CS1c Tai-Jin Lee
Handout #3
10/18/2005
Introduction to HTML
HTML (HyperText Markup Language) is the most basic way of creating a webpage.
They are plain-text (ASCII) documents that are read and displayed by web
browsers. There are also many other languages to create webpages such as
JavaScript, DHTML, XML, ASP, JSP, etc. Writing HTML is almost like writing a
paper, all you need is to type the content and format it so it looks pretty. Making
it look pretty can be very tricky. With the plethora of web browsers (IE, Firefox,
Mozilla, Netscape, Opera, Safari, etc) and their quirks, it is hard to create a
webpage that supports all of them. Thus, there are many WYSIWYG (what you see
is what you get) programs to help you build webpages (MSWord, Dreamweaver,
Adobe GoLive, etc). These programs can assist you, but sometimes, they can
hinder you in your ideas. It is important to understand HTML before using a visual
HTML editor so that you are able to go back into the code to change things.
HTML Basics
HTML makes use of tags. This means that everything that you want to “code” is
going to be inside a tag that looks like:
<html>Inside Tag</html>
Every tag consists of a begin tag (<tag>) and then an end tag (</tag>). All tags
have this exact same format. Inside each tag, the browser will know what to do
with what you’ve inserted. So basically, all you need is a good understanding of
what your tags do to your
Example code:
<html>
<head>
<title>HTML is easy to learn</title>
</head>
<!--this is a comment-->
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>
</html>
The basic structure of a webpage consists of the outer <html> tags, the <head>
tag and the <body> tag.
Important HTML structures
Some HTML structures that will probably be repeatedly used
Title
<title>This will be displayed in the caption bar</title>
Paragraph
<p>paragraph text</p>
Font Styles
<b>bold</b>
<strong>another bold</strong>
<i>italics</i>
<u>underline</u>
<strike>strikethrough</strike>
<tt>typewriter text</tt>
<pre>preformatted text (looks like typewriter text)</pre>
Headers
<h?>text</h?>
header with ?=1-6, 1 being largest, 6 being smallest
Forced Line Break
<br />
Links
<a href=“[Link]”>Text Displayed</a>
Images
<img src=“[Link]” alt=“Alternate Text cannot display img”>
Lists
Unordered list
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
Ordered list
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
Definition List
<dd>
<dt>Definition Term</dt>
<dd>Definition Data</dd>
</dd>
Tables
<table>
<!--First Row-->
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<!—Second Row-->
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>
Horizontal Rule
<hr />
Quotations
<blockquote>quote</blockquote>
Commenting
<!--In here is comments, in the code, but not on the website-->