Skip Navigation and go to content

You may be using a browser that will cause viewing problems on our web site... please visit our browser upgrade page to learn more.

HTML Basics

Software Information
Tips For Using Supported Software

HTML Basics - October 30, 2003

  • Hyper Text Markup Language
  • Authoring Language used to create documents on the World Wide Web
  • Tells the browser what to display and how to display it

Creating HTML pages

  • Create web pages using simple text editor or word processor: Notepad, WordPad, Textedit, (Word)
  • Save as ".html" file.
  • View in Web Browser: Netscape, Internet Explorer, Safari etc
  • Save the file each time you make changes before you view it.

***Note: To make your web pages visible to the rest of the world, you need a web server that can host them.

Tags

  • programming codes
  • usually come in pairs.

The tags surround an element and give that element attributes, e.g., <h5>My Title</h5>

"h5" stands for heading-level 5. The pair of <h5> tags surround the text that will be formatted as heading level 5. When viewed through a browser, it will look like:

My Title

 

Commonly Used Tags

TAG what it does notes samples/other notes
<html> </html> html document Placed at beginning and end of document <html>
<head>
<title>My first web page!</title>
</head>
<body>
<h1>All about ME!</h1>
</body>
</html>
<head> </head> head elements of document includes title
<title>Page Title</title> appears within browser window title part of head section
<body> </body> body elements of document includes background colors and text
       
<p>text</p> paragraph line ends, skips a line and starts on next line  
<br /> line break line ends, text starts on next line single tag
<h1>text</h1> heading level 1 largest sized heading h2, h3, h4, h5 also used
<h6>text</h6> heading level 6 smallest sized heading
<strong>text</strong> bold    
<em>text</em> italicized    
<blockquote>text</blockquote> indents text from either side    
<div align="alignment"> text </div> division align=right, left or center  
<ul>
<li>list item</li>
</ul>		 unordered or bulleted list list starts and ends with <ul> tag,
each item in list is surrounded by <li> tag		  
<ol>
<li>list item</li>
</ol> 		unordered or numbered list list starts and ends with "ol" tag,
each item in list is surrounded by "li" tag		  
<hr> horizontal rule <hr width="##%" size="##" align="alignment"> width = % of width of browser window, default size is 2 pixels
<table> </table> table tables are read row by row, starting with the left most column. Rows are designated by <tr>, columns are designated by <td> (example on right is 2 rows X 2 columns table) <table>
<tr>
<td>first row, left col</td>
<td>first row, right col</td>
</tr>
<tr>
<td>2nd row, left col</td>
<td>2nd row, right col</td>
</tr>
</table>

       
<img src="imagename.jpg"> image "imagename.jpg" is the file name of the picture you want to display on your web page. Images are usually jpg or gif files. Other attributes include pixel height, pixel width, alignment etc <img src="imagename.jpg" height="200" width="300" align="right">
<a href="http://www.name.com">linkable text </a> link to page on remote server use FULL URL in quotes  
<a href="myotherpage.html">linkable text </a> link to page on local server    
<a href="#anchor name">linkable text </a>
<a name="anchor name"> </a>		 link to same page Create the "anchor name" tag at the location that you want to be able to link to. Then include that name in your <a href> tag.  
<a href="http://www.redsox.com"><img src="nomar.jpg"></a> graphic IS link Instead of clickable text, you have a clickable image.  
       
<body bgcolor="#"> </body> ackground color (part of body tag) see handout for colors
<body background="filename"></body> background graphics (part of body tag)  
<body text="#"> </body> color of body text    
<body link="#"> </body> color of link text    
<body vlink="#"></body> color of visited link text    

Design Guidelines:

  • Make sure all text is readable!
  • Graphics should enhance your message, not confuse or distract audience
  • Avoid large file sized (high resolution) images (they take a longer time to load in Browser)
  • Use common design elements on the different pages of your site so that each page is seen as part of the larger whole
  • For more in-depth content, create new pages. Don't make users scroll for pages and pages.
  • Follow copyright rules for others' work

GUI editors:

Netscape Composer (free), DreamWeaver, FrontPage etc.

CSS

What's Next?

  • Server that can host your pages
  • uploading pages to a web server