Learn about coding with HTML/CSS and Scratch!
Coding with HTML/CSS!
HTML (Hypertext Markup Language)
CSS (Cascading Style Sheet)
Let's Start Coding!
<!DOCTYPE html> (This let's your computer know that what you are coding is in HTML.)
<html> (This starts the HTML format.)
<head> (This is the opening tg for the "head" of the coding page. There is a head and a body in a coding page, and you will see the body of the page below.)
<title>Coding!!!</title> (This is the title of the coding page, but it will not show up when you test the code. If you finish a website and put it on EasyBib or something, the title of the website will be this.)
</head> (This is the closing tag for the "head." Remember, there is a closing tag for every opening tag, except for the DOCTYPE tag.)
<body> (This is the said before "body" of the coding page. This is where you put the code for everything on the website/document that you want to show up.)
</body> (This is the closing tag for the "body." You might realize that there is a forward slash in the closing tags. This lets your computer know that you are ending whatever tag you used before.)
</html> (This is the closing tag for the HTML tag near the top. This also should be the end of the coding page.)
And that is the outside layer for an HTML code. Now to add the details in the body tag:
<H1>Coding!!! :D</H1> (This is a heading tag. This can be used as an actual title which shows up or a heading. There are 6 sizes of headings, H1-H6. 1 is the biggest and 6 is the smallest.)
<p>Coding is really fun! I started learning coding this year and now I am teaching you how to code!</p> (This is a paragraph tag, and you can make it say anything you want just by typing in between the opening and closing tags.)
But nothing is decorated! Where are the different fonts and colors and sizes!? Now to add some CSS:
<H1 style="font-family:Arial; color:skyblue;">Coding!!! :D</H1> (You probably noticed the style part inside the heading tag. What I have put in there makes the font Arial and the color sky blue.)
<p style="font-family:Arial; color:gray; font-size:15px">Coding is really fun! I started learning coding this year and now I am teaching you how to code!</p> (There is also a style part inside this paragraph tag. What I have done here is make the font Arial, the color gray, and the size 15 pixels. FYI, px, as you saw in the style part, stands for pixels.)
And that is the basics of HTML and CSS! Now to learn how to code with Scratch! (See what the coding above has created by visiting this link.)