Site Banner

Beginning HTML


This page introduces HTML codes for beginners to create simple HTML web pages.

HTML Core

The basic "must have" tags in a HTML page are HTML, Head, Title, and Body.

<HTML>
<HEAD>
<Title>My Web Page</Title>
</HEAD>

<BODY>

This is a basic HTML file.

</BODY>
</HTML>

The "Title" tag displays the page title on the top left conner of the browser.
show title on browser top left

To view a sample page with the above HTML codes, click here.

Fonts

Font style can be used to emphasize a word or a phrase in a sentence, such as bold, italic, underline, superscript, subscript, and strong.

<HTML>
<HEAD>
<Title>My Web Page</title>
</HEAD>
<BODY>
<h1>This is a basic HTML file.</h1>
You can use the text style to emphasize a word or a phrase in a paragraph, such as <b>bold</b>, <I>italic</I>, <u>underline</u>, <sup>superscript</sup>, <sub>subscript</sub>, and <strong>Strong</strong>. </BODY>
</HTML>

To view a sample page with the above HTML codes, click here.

Image

Use Image tag <IMG> to insert an image on the page. Under ADA compliance Section 508 rules, the alternate text (alt attribute) is required with a meaningful description of the image.
e.g. <img src="http://www.csudh.edu/images/DHbanner.gif" alt="Campus Banner">
If the height and width are not specified, the original size of the image will be displayed.

<HTML>
<HEAD>
<Title>My Web Page</title>
</HEAD>
<BODY>
<h1>This is a basic HTML file.</h1>
<hr width="80%" align="center" size="3">
You can use the text style to emphasize a word or a phrase in a paragraph, such as <b>bold</b>, <I>italic</I>, <u>underline</u>, <sup>superscript</sup>, <sub>subscript</sub>.<br>
<img src="http://www.csudh.edu/webmaster/images/Dhbanner.gif" Alt="CSUDH Banner" height="65" width="330" border="0">
</BODY>
</HTML>

To view a sample page with the above HTML codes, click here.

Ordered/Unordered List

Use <UL> tag for unordered list, and use <OL> tag for ordered list. Use <Li> for each list item. Use type attribute to display different bullet shapes.

Values are disc, square, circle, 1, A, a, I, i

<HTML>
<HEAD>
<Title>My Web Page</title>
</HEAD>
<BODY>
<h1>This is a basic HTML file.</h1>
<hr width="80%" align="center" size="3">
<p align=justify>You can use the text style to <font color="red" face="courier">emphasize</font> a word or a phrase in a paragraph, such as <b>bold</b>, <I>italic</I>, <u>underline</u>, <sup>superscript</sup>, <sub>subscript</sub>.</p>
<img src="http://www.csudh.edu/webmaster/images/Dhbanner.gif" Alt="CSUDH Banner" height="65" width="330" border="0">
Here is the Ordered List
<ol type="i">
  <li>Orange
  <li>Yellow
  <li>Blue
</ol>
Here is the Unordered List
<ul type="circle">
  <li>Orange
  <li>Yellow
  <li>Blue
</ul>
</BODY>
</HTML>

To view a sample page with the above HTML codes, click here.

Hyperlinks/Bookmarks

Use an anchor (<a> tag) to add hyperlinks and bookmarks on a web page.
Use the href attribute to create a link to another document.
Use the name attribute to create a bookmark in a document.
e.g.
Hyperlink: <a href="nextpage.html">
Bookmark : <a name="section2">
If the browser area is bigger than the whole page, the page will begin showing from the first line of the page. If the page is longer than the browser area, the line with the bookmark will be shown on the top of the browser.

<HTML>
<HEAD>
<Title>My Web Page</title>
</HEAD>
<BODY>
<h1>This is a basic HTML file.</h1>
<hr width="80%" align="center" size="3">

When the below link is clicked, it will go to the bookmark of lists on this page.
<a href="#lists">Goto lists</a></p>

<p>You can use the text style to <font color="red" face="courier">emphasize</font> a word or a phrase in a paragraph, such as <b>bold</b>, <I>italic</I>, <u>underline</u>, <sup>superscript</sup>, <sub>subscript</sub>.</p></p>

<p>Add hyperlink to an image:</br>
<a href="http://www.csudh.edu" target="_top"><img src="http://www.csudh.edu/webmaster/images/Dhbanner.gif" Alt="CSUDH Banner" height="65" width="330" border="0"></a></p>

<p>Add a bookmark to the lists:
<a name="lists"></br>
Here is the Ordered List
<ol type="i">
  <li>Orange
  <li>Yellow
  <li>Blue
</ol></p>

<p>Here is the Unordered List
<ul type="circle">
  <li>Orange
  <li>Yellow
  <li>Blue
</ul></p>

</BODY>
</HTML>

To view a sample page with the above HTML codes, click here.

Other Resources

Learn HTML:
W3Schools
HTML Tutorial
HTML 5