When you are learning, it helps to be able to look over someone's shoulder!
HTML - Basics - Lesson 2
This is a very basic explanation of a HTML Document
A HTML page consists of a number of HTML Tags
<html> <body> </body> </html>
These tags are the "Opening" and "Closing" HTML tags
<html> is the opening tag for a HTML document and
</html> is the closing tag.
These define the beginning and the end of your HTML Document.
Next we have within the HTML Tags the Body Tags
<body> is the opening tag for the body or content of your website and
</body> is the closing tag.
A web browser reads these tags and it can decide how to "render" or interpret your HTML Code.
Upto now, if you were to copy and paste this into your text editor, save it and view it in your web browser, you won't see much.
A Webpages Tags are never displayed.
Now if we were to do this...
<html> <body> Hello, I am a webpage and this sentence will display in a web browser </body> </html>
and view this in our web browser, these clever little words will appear.
Go ahead and try it.
Then you'll see something else interesting happen.
Did you try it?
Well if you did, you would have gasped and said
"Hey that showed up as a single line, but you've got
it in the example as 3 separate lines... What gives?"
I'm glad you asked!
Web browsers simply ignore any new lines or spaces unless they are surrounded by valid HTML Formatting Tags.
So if we did want our clever little sentence to appear over 3 lines as in the example, then we would have to give the web browser the intructions to do just that...
So next we'll introduce the Break Tag - <br />
<html> <body> Hello, I am a webpage and<br /> this sentence will display<br /> in a web browser on three separate lines! </body> </html>
Notice that this tag appears on it's own and has the terminating character / after the letter b with a space.
This is one of those special single tags. The reason for the / is to comply with the new standards. Every tag must be terminated. No that's not some kind of story line for a movie. It's just to satisfy the standards and it's good practice. So get into the habit of it.
Ok - Not bad huh! HTML is pretty simple once you get the hang of it. Like anything new, it can take time, but we'll have you knocking up webpages in no time.
It is actually much more difficult to come up with the design and content for a website than to write the code for one.
Moving along...
Text has paragraphs, right? Well so does HTML and it's the unforgettable <p> and </p>
So we have br for Break and p for Paragraph
This next section is displayed in the following code example to show you how paragraphs work
Guess what? You are seeing them in action already - See - this is a paragraph and....
This is another paragraph.. Neat huh
I can enclose lots of words with the paragraph tags and the web browser will display them in a block with spaces between the paragraphs... So this would appear as...
<html> <body> <p>Guess what? You are seeing them in action already - See - this is a paragraph and....</p> <p>This is another paragraph.. Neat huh</p> <p>I can enclose lots of words with the paragraph tags and the web browser will display them in a block with spaces between the paragraphs... So this would appear as...</p> </body> </html>
See, I've made it all squeezed up and on lots of lines but the HTML is telling the web browser what my paragraph sections are and it will wrap the words into a new line when it runs out of space across the line and give me spaces in between paragraphs - All for Free!.
Now if you've been watching carefully, you'll have noticed that I've been BOLDING some of my characters and words.
Yep, you guessed it, It's another HTML Tag - and it's the mighty <b> and </b> Tags.