Getting Started with Html & CSS
Html Tags to get you started
Below I have some code and a table. The code is what your going to copy and paste to a blank sheet on your Html editor and save as index.html . Below the code is a
table that explains what the Html tags mean. I can tell you how to save it in Notepad++. After getting the text on the page. The little white thing
below the word files makes a blank sheet. Once the text is on there, click file, then click save as, then at bottom where it says "save as type", change that
to "Hyper text markup language file". Then type index in small letters
in the file name box (when your pages are uploaded to the server and you have a domain name, when someone goes to your domain,
there going to land on the page with the file name index.html. Your home page has to be named index.html. You can rename it to template later). If you haven't made a folder for your website files, make it, open it,
and click save. You should be able to just click the file to open it in browser. Nothing is on the page yet, so it will be blank. Also you can right click on the file
to see a menu where you will see "open with". That should give you the option of opening it with your editor. Also, in notepad++ there is a list of recently opened files under the
file menu.
Whatever program your using, the file has to have a .html extension at the end. The file name should read index.html. In microsofts notepad, you save it as type .txt
in bottom box. You can choose between all documents and txt . Then in the file name box, you type in index.html , You have to type in the .html in notepad. In notepad ++, you do not
have to type in the .html.
This is the first block of tags to start
your Html document. The only one of these tags that get CSS styling is the <body> tag. You can also add a font-size to the <html> tag.
We will do that later. Here is the HTML in bold text. The <!DOCTYPE html> tag to the closing </html> tag. This is a
good block of HTML code to start with.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
| <!DOCTYPE html> | <!DOCTYPE html> goes above the opening <html> tag and tells the browser that this page is html5 webpage. There is a different doctype for every version of html and xhtml. I am just using the html 5 doctype so it is the only one I have listed here. Html5 is considered the latest version of html. |
| <html></html> | Beginning and end of a web page. This tells the browser when the web page starts and when it ends which means this tag is the first and last tag on the web page besides the doctype tag which goes right above the opening html tag. lang="en" is a attribute and they recommend you use it. This specifies the language of the elements content. |
| <head></head> | These tags go right after the opening <html> tag. The head section is not viewable in the browser. It contains meta information and the title. You can also put css styling in the head section. Javascript can go in the head section and links to external files like your external style sheet will go in the head section. |
| <title></title> | These tags go in between the 2 head tags. The title appears in the tab at the top of page. Like if you have 2 windows open in the same browser, you click the tab to move from one page to another. That is the tab that is where the text will appear that you put in the <title></title> tags. |
| <body></body> | The body tags go after the closing </head> tag. The closing </body> tag will be right before the closing </html> tag. All the content that appears in the browser go in between the <body></body> tags. |