What is HTML?
HTML (Hyper Text Markup Language) is a language for
specifying how text and graphics appear on a web page
When you visit a web site (e.g., [Link]) your
web browser retrieves the HTML web page and renders it
The HTML page is actually stored on the computer
that is hosting the web site and the page is sent to your
browser
To see what HTML looks like go to your web browser
View menu and select View Source
HTML
HTML is a textual language that includes special
markup tags such as:
<title> Bob’s Diner </title>
The <title> ... </title> tag specifies a title for the
web page
HTML code is stored in a simple text file that has
either a .htm or a .html filename extension
(e.g., [Link])
How to author html
Use a simple text editor such as notepad to create
simple web documents
Use a web editor tool such as Amaya to create more
professional looking web documents
[Link]
Amaya is simple to use. Use the editor tools to author
a document as you would using a text editor such as
Microsoft Word
When you save the document it creates an .html file
HTML Title
A title is usually displayed on the top bar of a
web browser’s window when you visit a web site
The title will now be displayed in the main web
browser window, just on the top bar <title> Your
title text goes here </title>
<title> is the start tag and </title> is the end tag
HTML Headings
HTML allows you to create sections in a document using
headings, there are six levels of headings the first level
creates the most significant heading, e.g.,
<H1> This is a major section </H1>
...
and the sixth level creates the least significant heading, e.g.,
<H6> This is a minor section </H6>
After each heading you insert the text and images that pertain to
that section, like you would do in MS Word
HTML Paragraphs
The <p> tag is used to start a paragraph
The </p> tag is used to end a paragraph
<p> The text in between the two tags is your
paragraph ... </p>
The </p> tag is optional, HTML assumes that you
are in the same paragraph until it encounters the
next <p> tag
You can force a line break using the <br> tag
Formatting text
<i> italics </i>
<em> also italics </em>
<b> bold </b>
<i><b> italics and bold </b></i>
2 <sup> 4 </sup> = 16
H <sub> 2 </sub> O
This text is <del> scratched </del> out
<code> use this tag for computer code </code>
Pre formatting text
Text will always be formatted automatically unless you use
the pre format <pre> ... </pre> tags to force a different
format
Very useful when you want to display examples of code (I
suggest using <pre><code> ... </code></pre> for that
purpose)
<pre> This text will appear on the
website exactly how
I pre formatted it
</pre>
Inserting images
<img src=”[Link]” width=”120” height=”100”
align=”left”>
The image source is in file [Link] and the width and
height attributes specify the dimensions of the image on
the web page in pixels
You can also add a brief description of the image in case
the user cannot see the image e.g.,
<img src=”[Link]” width=”120” height=”100” alt=”My
pet dog”>
HTML lists
Unordered Lists Ordered Lists Definition Lists
<ul> <ol> <dl>
<li> Gold <li> Gold <dt> Gold
<li> Silver <li> Silver <dd> For the best
<dt> Silver
<li> Bronze </ul> <li> Bronze
<dd> ... second best
</ol> </dl>
Gold 1. Gold Gold
Silver 2. Silver For the best
Silver
Bronze 3. Bronze ... the second best
Lists can be nested too
<ul>
<li> A Students
<ol>
<li> John A Students
<li> Mary 1. John
<li> Peter 2. Mary
</ol> 3. Peter
<li> B Students B Students
<ol> 1. Paul
<li> Paul 2. Cathy
<li> Cathy 3. Jill
<li> Jill
</ol> </ul>
HTML Tables
<table cellpadding determines the
cellpadding=”2” space between the cell
cellspacing=”4” border=”1”
bordercolor=”black”
borders and the text
bgcolor=rgb(0,255,0)>
cellspacing determines the
<tr>
<th> Column 1 </th>
width of the border
<th> Column 2 </th>
</tr> bgcolor defines the table’s
<tr> background color
<td> (1,1) </td>
<td> (1,2) </td>
</tr>
The table rows are defined
<tr> one after the other; some
<td> (2,1) </td>
rows can be headers and
<td> (2,2) </td>
</tr> others data
</table>
Linking to other pages
<a href=”[Link] Spiros’ Page </a>
This links to a page on the World Wide Web (WWW)
<a href=”[Link]“> Spiros’ Courses </a>
This links to a page called [Link] in the same directory as the
html file
<a href=”../[Link]“> Spiros’ Music </a>
This links to a page called [Link] in the directory above the
directory of the html file
<a href=”hobbies/[Link]“> Spiros’ Music </a>
This links to a page called [Link] in the hobbies sub-directory
Linking to Another part of
the same page
First define a link target header (anchor):
<h2><a name=”soccer-scores”> Soccer Scores </a></h2> Or
you can avoid the use of <a>
<h2><id=”soccer-scores”> Soccer Scores </h2> Then
reference the link target:
<a href=”#soccer-scores”> Go to Soccer Scores </a>
Or you can reference the link target from a remote web site:
<a href=”[Link] Go to Soccer
Scores </a>
Linking to an email
address
<a href=”spiros@[Link]”> Send Spiros a message </a>
Caution: Web crawlers will find this e-mail address
and I might start to get more spam messages!
Better idea to use an image with the email address
Linking an image to a
Web page
By clicking on the image (e.g., Drexel logo of
Mario the Dragon) you can link to the Drexel
University homepage
<a href=”[Link]
<img src=”[Link]” alt=”Drexel home page”
align=”right”></a>
HTML Sound Files
You can link sound files to your web pages:
<a href=”[Link]
type=”audio/x-mpegurl”> listen to my song from an m3u </a>
<a href=”[Link]
type=”audio/mpeg”> listen to my song as from an mp3 </a>
Cascading style Sheets
You can use cascading style sheets (CSS) to
customize your html file
e.g., specify colors, fonts, bold, italics for the
entire document
Style rules are defined using the tags
<style> ... </style>
Example CSS
<style> body
{
background-image:url('[Link]');
background-position : 50% 50% ; background-size : 100% ;
background-origin : content ; background-repeat: no-repeat ;
font-family: “Times New Roman” color:
blue
}
</style>
Putting it all together
<!-- This is an optional comment -->
<html>
<head>
<title> Your title goes here </title>
<style> Your style sheet goes here </style>
</head>
<body>
Your content goes here ... Paragraphs, images, lists,
links, texts, headings, etc.
</body>
</html>
Create your Personal
Webpage
Now that you know the HTML basics you can create a
personal web page on [Link]
Create the directory public_html under your home
directory:
/home/userid/public_html
Deposit the web page [Link] with your personal
homepage into the public_html directory
To access your page go to:
[Link]
Advancing your html
skills
There are many on line resources to help you
advance your knowledge of HTML
[Link]
[Link]