(Spacing must be exactly like this for the (NOTE: These are comments that you want behind the scenes within the HTML, not to show up on the Web page, such as for instructions or details about the page. Use these judiciously, however.) See the Unordered List example below for how it looks on a Web page. See the Ordered List example below for how it looks on a Web page. Please note the placement and use of the opening and closing tags. Remember to add the closing tags, too. Using the markup designated for its purpose is important, too. See my tutorial on their appropriate use with examples at Semantics, HTML, XHTML, and Structure. Jump to: Remember to use them in order, beginning with You can use CSS to style them how you wish, including colors, fonts, font sizes, margins, padding, and more. For example, the colors, fonts, font sizes, etc. that you see below are all handled with WebsiteTips.com's CSS behind the scenes. This markup: creates this: This markup: creates this: This markup: creates this: This markup: creates this: This markup: creates this: This markup: creates this: Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is the next paragraph. Here is the next paragraph. Here is the next paragraph. Here is the next paragraph. This markup: As John Doe stated recently, creates this: As John Doe stated recently, “Here is a sample of quoted text, usually a couple of sentences or more. Here is a sample of quoted text, usually a couple of sentences or more. Here is a sample of quoted text, usually a couple of sentences or more.” This markup: creates this: Here is a sample of emphasized text. This sentenceemphasizes these words but not the others. This markup: creates this: Here is a sample of bold text. For this sentence, only these words are in bold text. This markup: creates this: This markup: creates this: This markup: creates this:Name Opening Tag Closing Tag 1st Level Heading Title 2nd Level Heading Title 3rd Level Heading Title 4th Level Heading Title 5th Level Heading Title 6th Level Heading Title Paragraph Blockquote Line Break (none) Non-breaking space (none) Italic, Emphasis Bold Quote "(none) Comment tags comment element, with a space between the beginning and ending tags.)
For Special CharactersName Character HTML Ampersand & &Quote, Inches " "Curly Quote - Opening “ “Curly Quote - Closing ” ”Copyright © ©Trademark TM TMRegistered ® ®
For Unordered ListsName Opening Tag Closing Tag Unordered List Unordered List item Unordered List Example:
List item
Next list item
Another list item
For Ordered ListsName Opening Tag Closing Tag Ordered List Ordered List item Ordered List Example:
Item One
Item Two
Item Three
For Definition ListsName Opening Tag Closing Tag Definition List Definition Term Definition Definition List Example:
Term
Definition of term above
Another Term
Definition of another term aboveExamples: HTML Markup in Action
Heading Examples
h1, and don't skip over any of them (such as from h1 toh3, skipping h2).Example 1.1: 1st Level Heading Title
Heading TitleHeading Title
Example 1.2: 2nd Level Heading Title
Heading TitleHeading Title
Example 1.3: 3rd Level Heading Title
Heading TitleHeading Title
Example 1.4: 4th Level Heading Title
Heading TitleHeading Title
Example 1.5: 5th Level Heading Title
Heading TitleHeading Title
Example 1.6: 6th Level Heading Title
Heading TitleHeading Title
Paragraph Examples
Example 2.1: Two Paragraphs (showing the HTML)
Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph. Here is a sample of text with HTML for a paragraph.Here is the next paragraph. Here is the next paragraph. Here is the next paragraph. Here is the next paragraph.Example 2.2: The two paragraphs above as they would appear on a Web page:
Blockquote and Curly Quotes Examples
“
”Example 3.1: Miscellaneous Examples
Text with Emphasis
Here is a sample of emphasized text. This sentence emphasizes these words but not the others.Bold Text
Here is a sample of bold text. For this sentence, only these words are in bold text.Lists, Definition Lists
Unordered List
List item
Next list item
Another list itemOrdered List
Item One
Item Two
Item ThreeDefinition List
Term
Definition of term above
Another Term
Definition of another term above
Monday, September 13, 2010
SOME BASIC HTML TAGS AND HOW TO USE THEM
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment