Friday, 10 July 2015

HTML Tags

00:53  Unknown  No comments

HTML Tags

HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom:
<HTML>
</HTML>
This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.
Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page.
So add those two tags to your text editor and it will look like this:
Notepad showing HTML tags
The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up.
The next pair of tags are the HEAD tags: They go between the two HTML ones:
<HTML>
<HEAD>
</HEAD>

</HTML>
Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand.
A special instruction your browser can understand is the TITLE tag:
<TITLE> </TITLE>
The Title tag always goes in the HEAD section of the HTML skeleton.
Notepad showing HTML HEAD and TITLE tags
The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.)
The final, and most important part, of the HTML skeleton is the BODY section.
Notepad showing HTML BODY tags
In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.
In your text editor, then, add the following:
Notepad showing all basic HTML tags
Notice that we've added some text between the two TITLE tags: My First Page. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results.

DOCTYPE

One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this:
<!DOCTYPE HTML>
DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML.
So add a DOCTYPE to the top of your page. Your text editor will look something like this:
Notepad showing DOCTYPE tag
Coming up next, we'll take a look at how to save your web pages.

Posted in: ,,,,

0 comments:

Post a Comment