Log in
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest None
Most users ever online was 329 on 4th July 2021, 4:18 am
Top posting users this month
| No user |
Lesson #1: The HTML Skeleton, and tags
Page 1 of 1
20130530
Lesson #1: The HTML Skeleton, and tags
If you have even a little HTML knowledge, a lot of the stuff in this lesson is review. Today I'm talking about tags, HTML syntax, and the skeleton.
HTML code is very well structured and organized. It needs to be, in order for computers to read it, because computers interpret everything literally. That's important to remember when writing HTML- computers will read and execute even the slightest typo to the letter.
The basic structure for HTML code is called the "skeleton". Just like the skeleton in the human body, the HTML skeleton is important, and provides the framework for a webpage, but on its own, it doesn't do you any good.
Here's the HTML skeleton, in its most basic form:
There are a few things wrong with this skeleton, and I'll get to that later, but right now, look at the tags. "Tags" are what we call the words inside the greater-than and less-than signs, and they tell the HTML interpreter what to do.
Each tag is either an opening tag or a closing tag. The opening tags have no slash in them, while closing tags have one after the less-than sign at the beginning. The opening and closing tags tell the HTML interpreter what starts and ends where.
So, if you took the tag for bold, <b>, and put it anywhere in your HTML file, everything after it would be bold up until the closing </b>.
Example:
This is a paragraph with bold text in it. The bold stops after the closing tag.
The <html> tag tells the interpreter to start decoding HTML code. Kinda like saying at the beginning of a letter that it's in English, to clear up any confusion. Usually, you'll have a DTD, or Document Type Definition, in addition to your HTML starting tag, but it's not required. I'll give DTDs their own full lesson.
The closing </html> tag at the end of every HTML page tells the interpreter that it's over, and to stop reading. Inside these two tags, <html> and </html>, you put all of your code that you want displayed on the web page.
Inside the <html> tags, you have two very important sets of tags- head and body.
<head> includes information about the page- the name of the page, maybe a description of the page, search keywords, style information, et cetera. All optional, but all recommended. In general, the <head> section of the HTML code tells the web browser what the page is, and how to handle it.
The <body> section is where everything you see on the page goes. In here, you'll put your paragraphs, your images, your videos, whatever you want to put on the page. This section will be the topic of many of my future lessons on HTML, there's a ton that needs to be covered in here.
In the <body> section, you'll use a ton of different tags. Each tag does something- like make text italic, or insert an image, or anything else you need. Every tag starts with a less-than sign and ends with a greater than sign.
Before I end the lesson, one last thing. HTML code is interpreted and read by computers, but it also has to be read by the people who write it. So, it's a good idea to help yourself out and use comments. In HTML, a comment is a section of text that the interpreter ignores- it can contain an explanation of what something does, a to-do list, some code you might add to the page later, whatever. Comments make your life easier by allowing you to save notes for later.
Comments have their own "tags" of sorts, too. HTML comments look like this:
HTML comments start with a less-than sign, an exclamation point, and two dashes. They end with two dashes and a greater-than sign. Inside the beginning and closing, you can put whatever you want. Well, okay, there are limitations. You can't "nest" comments, which means that this is illegal:
Nested comments are wrong because the HTML interpreter will see the comment beginning code, and skip to the comment ending code. That means that everything after the nested comment won't be counted as a comment, and the system breaks. Here's what the HTML interpreter thinks when it sees nested comments:
<!-- Comment #1 <!-- Comment #2 --> This is part of Comment #1 -->
The blue represents what the interpreter thinks is a comment, and the red doesn't count as a comment.
Your assignment this week is to familiarize yourself with the HTML skeleton by writing it up in a text editor. On Windows, I recommend either notepad or gedit. Whichever text editor you use, make sure it doesn't have any formatting built in. You can ask if you need help with choosing a good editor.
After your editor's open, write up the HTML skeleton, and save it as skeleton.html or something similar. HTML files are stored with .html format, always, but the name skeleton can be whatever you want.
If you want, open up the skeleton in your web browser. It should show a blank page.
So, that was a lot of stuff I just threw out there. If you have questions, please ask! I'll gladly clarify anything.
HTML code is very well structured and organized. It needs to be, in order for computers to read it, because computers interpret everything literally. That's important to remember when writing HTML- computers will read and execute even the slightest typo to the letter.
The basic structure for HTML code is called the "skeleton". Just like the skeleton in the human body, the HTML skeleton is important, and provides the framework for a webpage, but on its own, it doesn't do you any good.
Here's the HTML skeleton, in its most basic form:
- Code:
<html>
<head>
</head>
<body>
</body>
</html>
There are a few things wrong with this skeleton, and I'll get to that later, but right now, look at the tags. "Tags" are what we call the words inside the greater-than and less-than signs, and they tell the HTML interpreter what to do.
Each tag is either an opening tag or a closing tag. The opening tags have no slash in them, while closing tags have one after the less-than sign at the beginning. The opening and closing tags tell the HTML interpreter what starts and ends where.
So, if you took the tag for bold, <b>, and put it anywhere in your HTML file, everything after it would be bold up until the closing </b>.
Example:
- Code:
This is a paragraph <b>with bold text in it.</b> The bold stops after the closing tag.
This is a paragraph with bold text in it. The bold stops after the closing tag.
The <html> tag tells the interpreter to start decoding HTML code. Kinda like saying at the beginning of a letter that it's in English, to clear up any confusion. Usually, you'll have a DTD, or Document Type Definition, in addition to your HTML starting tag, but it's not required. I'll give DTDs their own full lesson.
The closing </html> tag at the end of every HTML page tells the interpreter that it's over, and to stop reading. Inside these two tags, <html> and </html>, you put all of your code that you want displayed on the web page.
Inside the <html> tags, you have two very important sets of tags- head and body.
<head> includes information about the page- the name of the page, maybe a description of the page, search keywords, style information, et cetera. All optional, but all recommended. In general, the <head> section of the HTML code tells the web browser what the page is, and how to handle it.
The <body> section is where everything you see on the page goes. In here, you'll put your paragraphs, your images, your videos, whatever you want to put on the page. This section will be the topic of many of my future lessons on HTML, there's a ton that needs to be covered in here.
In the <body> section, you'll use a ton of different tags. Each tag does something- like make text italic, or insert an image, or anything else you need. Every tag starts with a less-than sign and ends with a greater than sign.
Before I end the lesson, one last thing. HTML code is interpreted and read by computers, but it also has to be read by the people who write it. So, it's a good idea to help yourself out and use comments. In HTML, a comment is a section of text that the interpreter ignores- it can contain an explanation of what something does, a to-do list, some code you might add to the page later, whatever. Comments make your life easier by allowing you to save notes for later.
Comments have their own "tags" of sorts, too. HTML comments look like this:
- Code:
<!-- This is a comment, text goes here. -->
HTML comments start with a less-than sign, an exclamation point, and two dashes. They end with two dashes and a greater-than sign. Inside the beginning and closing, you can put whatever you want. Well, okay, there are limitations. You can't "nest" comments, which means that this is illegal:
- Code:
<!-- This is a comment. Here's another one: <!--- Hi, I'm a nested comment. --> -->
Nested comments are wrong because the HTML interpreter will see the comment beginning code, and skip to the comment ending code. That means that everything after the nested comment won't be counted as a comment, and the system breaks. Here's what the HTML interpreter thinks when it sees nested comments:
<!-- Comment #1 <!-- Comment #2 --> This is part of Comment #1 -->
The blue represents what the interpreter thinks is a comment, and the red doesn't count as a comment.
Your assignment this week is to familiarize yourself with the HTML skeleton by writing it up in a text editor. On Windows, I recommend either notepad or gedit. Whichever text editor you use, make sure it doesn't have any formatting built in. You can ask if you need help with choosing a good editor.
After your editor's open, write up the HTML skeleton, and save it as skeleton.html or something similar. HTML files are stored with .html format, always, but the name skeleton can be whatever you want.
If you want, open up the skeleton in your web browser. It should show a blank page.
So, that was a lot of stuff I just threw out there. If you have questions, please ask! I'll gladly clarify anything.
Sko- On Vacation
- Posts : 1367
Join date : 2012-10-10
Location : About 150 Km from Sol, give or take. -
Share this post on:
Lesson #1: The HTML Skeleton, and tags :: Comments
31st May 2013, 3:06 pm by Woody
I thought the tag for bold text was
Does
- Code:
<strong>bold text</strong>
Does
- Code:
<b>bold text</b>
31st May 2013, 6:13 pm by Sko
Woody wrote:I thought the tag for bold text was
- Code:
<strong>bold text</strong>
Doeswork too?
- Code:
<b>bold text</b>
Yes. You can use whichever you like.
I prefer to use <b> myself, because it's quicker to type.
Similar topics» Lesson #2: Body tags
» Lesson #0: Intro, and an overview of what HTML actually is.
» The CONTROL Lab Discount off Green and Orange Tags
» Life's greatest lesson
» Lesson #3: Cascading Style Sheets (CSS)
» Lesson #0: Intro, and an overview of what HTML actually is.
» The CONTROL Lab Discount off Green and Orange Tags
» Life's greatest lesson
» Lesson #3: Cascading Style Sheets (CSS)
Permissions in this forum:
You cannot reply to topics in this forum
