Close Menu Navigation
Open Categories Menu HTML Basic Tags
- 25 January, 2012 -
- beginner, build -
- Tags :
- 0 Comments
HTML – Basic Tags
For the HTML tags below, please be sure you understand all tags outlined in the notes below. Remember, if you have any questions on how to use the tag, please take a look at the example located here: HTML Example directory
Also, note the name of each tag is hyperlinked and links to an example page. (Click on “background color” below to see example). If you view the source of the example page, you can see exactly how the page is coded.
body { background-color: #000000;}
body { background-image:url("images/an_image.gif"); }
<h1>The biggest heading</h1> <h2>The second biggest heading</h2> <h3>The third biggest heading</h3> <h4>The fourth biggest heading</h4> <h5>The fifth biggest heading</h5> <h6>The sixth biggest heading</h6>
4. Line break
some text using a br with a line break at the end<br />
5. Paragraph
<p>some text in a paragraph, always has a blank line after it</p>
<strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br> <strong>Some Bold Text AND <em>some bold and Italic text</em></strong>
How would you use html markup to produce this sentence (bold & italic, then italic)?
<hr /> <hr size=”20″ /> <hr width=”100″ align=”left” /> <hr width=”50%” />
8. Image
<img src=”images/an_image.gif” width=”200″ height=”100″ alt=”An image to be displayed” />
9. Links
A link to another web site
<a href=”http://www.nytimes.com/”>Link to the New York Times</a>
A link to a page within the website
<a href=”about.html”>About </a>
A link that sends an email.
<a href=”mailto:jane@jane.com”>Email Jane</a>
The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” version is the link and must include the “#”, the “name” version is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:
<a href=”#lowerpoint”>Link to a location lower on this page</a> <a name=”lowerpoint”>Some text lower on the same page</a>
10. Font
body { font-family: Arial, Verdana, sans-serif; }
| PC | Mac |
| Arial | Helvetica |
| Times New Roman | Times |
| Courier New | Courier |
| Verdana | Verdana |
| Trebuchet | Trebuchet |
| Symbol | Symbol |
11. Indenting a paragraph, creates a paragraph and adds margin on left and right
<blockquote>some indented text</blockquote>
12. Bulleted list
<ul> <li>this is item 1 in an un-ordered list</li> <li>this is item 2</li> <li>this is item 3</li> <li>this is item 4</li> </ul>
13. Numbered list, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”
<ol type=”i”> <li>this is item 1 in an ordered list</li> <li>this is item 2 in an ordered list</li> <li>this is item 3 in an ordered list</li> <li>this is item 4 in an ordered list</li> </ol>
14. Navigation using the list tag
<ul> <li><a href=”http://www.website.com/about.html/”>About</a></li> <li><a href=”http://www.website.com/portfolio.html/”>Portfolio</a></li> <li><a href=”http://www.website.com/services.html/”>Services</a></li> <li><a href=”http://www.website.com/contact.html/”>Contact</a></li> </ul>
15. Preformated text allows use of extra spaces and line breaks to format your text
</pre>
alskf asldk
aslfk asldkf asdlk
als faslfk alskfa sldk
aksdf alsfk laskf alsdkf
alskf asldk aslkf
als kfasdlk
</pre>
16. Flowing text around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image
<img src=”images/an_image.gif” width=”200″ height=”100″ align=”left” hspace=”10″ vspace=”10″>
17. Text colors text=basic text color, link=links color, vlink=visited links, alink=link when mouse down
body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }
18. Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines
<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”> <meta name=”description” content=”The New York Times on the Web”> <meta name=”keywords” content=”New York Times, newspaper, international, news, business”>
19. Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–”, end it with “–>”, and do not use “–” within the comment.
<!– this is a comment –>
20. Linking CSS file to your HTML page
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
