HTML Headings • Headings are defined with the
to tags. – defines the most important heading. – defines the least important heading.
• Use HTML headings for headings only.
– Don't use headings to make text BIG or bold. – Search engines use your headings to index the structure and content of your web pages. – Since users may skim your pages by its headings, it is important to use headings to show the document structure.
• H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on. • Browsers automatically add some empty space (a margin) before and after each heading 11/14/2011
HTMLIntro_Lesson_03.ppt
1
HTML Headings (continued) • • • • • • • • • • • •
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
11/14/2011
HTMLIntro_Lesson_03.ppt
2
HTML Lines • The
tag creates a horizontal line in an HTML page. • The hr element can be used to separate content:
11/14/2011
HTMLIntro_Lesson_03.ppt
3
HTML Lines (continued) • • •
The hr tag defines a horizontal rule:
•
•
This is a paragraph
•
•
This is a paragraph
• •
11/14/2011
HTMLIntro_Lesson_03.ppt
4
HTML Comments • Comments can be inserted into the HTML code to make it more readable and understandable. • Comments are ignored by the browser and are not displayed. • Comments are written like this: – – There is an exclamation point after the opening angle bracket, but not before the closing angle bracket.
11/14/2011
HTMLIntro_Lesson_03.ppt
5
HTML Comments (continued) • • • • • • • • • • •
This is a regular paragraph
This is another regular paragraph
And still another regular paragraph
11/14/2011
HTMLIntro_Lesson_03.ppt
6
HTML Paragraphs • Paragraphs are defined with the
tag. • Browsers automatically add an empty line before and after a paragraph.
HTML Line Breaks • Use the
tag if you want a line break (a new line) without starting a new paragraph • The
element is an empty HTML element. It has no end tag. 11/14/2011
HTMLIntro_Lesson_03.ppt
7
HTML Paragraphs (continued) • •
•
This is a paragraph. •
This is a paragraph. •
This is a paragraph. •
Don't forget to close your HTML tags!
• •
11/14/2011
HTMLIntro_Lesson_03.ppt
8
HTML Line Breaks (Continued) • • • •
This is
a para
graph with line breaks
• • •
11/14/2011
HTMLIntro_Lesson_03.ppt
9
HTML Rendering • You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results • With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code • The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space 11/14/2011
HTMLIntro_Lesson_03.ppt
10
HTML Rendering (continued) • • • • • • • • • • • • • • • • • • • • • • •
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
Note - your browser ignores the layout!
11/14/2011
HTMLIntro_Lesson_03.ppt
11
View HTML Code • Have you ever seen a Web page and wondered "Hey! How did they do that?" • To find out, right-click in the page and select: – "View Source" in Internet Explorer, or – "View Page Source" (Firefox), or – similar for other browsers.
• This will open a window containing the HTML code of the page. 11/14/2011
HTMLIntro_Lesson_03.ppt
12
