Introduction to HTML
HTML: HyperText Markup
Language
HTML documents are simply text documents with a
specific form
Documents comprised of content and markup tags
Content: actual information being conveyed
The markup tags tell the Web browser how to display the
page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor
2
Our First Example
If you are running Windows, start Notepad
If you are on a Mac, start SimpleText
If you telnet to csupomona.edu, use “pico”
Type in the following:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Open this file using a browser, and you will see…
3
HTML Tags
HTML tags are used to mark-up HTML elements
Surrounded by angle brackets < and >
HTML tags normally come in pairs, like <tagname> (start
tag) and </tagname> (end tag)
The text between the start and end tags is the element
content
Not case-sensitive
Follow the latest web standards:
Use lowercase tags
4
Tag Attributes
Tags can have attributes that provide additional
information to an HTML element
Attributes always come in name/value pairs like:
name=“value”
Attributes are always specified in the start tag
Attribute values should always be enclosed in quotes.
Double quotes are most common.
Also case-insensitive: however, lowercase is recommended
<tagname a1=“v1” a2=“v2”></tagname>
For example, <table border=“0”> is a start tag that defines
a table that has no borders
5
HTML Document Structure
Entire document enclosed within <html> and </html>
tags
Two subparts:
Head
Enclosed within <head> and </head>
Within the head, more tags can be used to specify title of the
page, meta-information, etc.
Body
Enclosed within <body> and </body>
Within the body, content is to be displayed
Other tags can be embedded in the body
6
We’ll Study…
HTML Basics
(http://www.w3schools.com/html/html_intro.asp):
HTML Elements
HTML Headings
HTML Paragraphs
HTML Formatting
HTML Styles
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Colors
7
Headings, Paragraphs,
Breaks & Horizontal Rules
In this chapter you will add headings to your page, insert
paragraphs, add some breaks, and add horizontal
rules.
Objectives
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.
8
Headings, <Hx> </Hx>
Inside the BODY element, heading elements H1
through H6 are generally used for major divisions of
the document. Headings are permitted to appear in
any order, but you will obtain the best results when
your documents are displayed in a browser if you
follow these guidelines:
1. H1: should be used as the highest level of
heading, H2 as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3
should not appear after an H1, unless there is
an H2 between them.
9
Headings, <Hx> </Hx>
10
Paragraphs, <P> </P>
Paragraphs allow you to add text to a document in such
a way that it will automatically adjust the end of line to
suite the window size of the browser in which it is being
displayed. Each line of text will stretch the entire
length of the window.
11
Paragraphs, <P> </P>
12
Break, <BR>
Line breaks allow you to decide where the text will
break on a line or continue to the end of the window.
A <BR> is an empty Element, meaning that it may
contain attributes but it does not contain content.
The <BR> element does not have a closing tag.
13
Break, <BR>
14
Horizontal Rule, <HR>
15
Colors
Background and text colors are attributes of the “body”
of the document.
text=“#xxxxxx” determines your text color
Bgcolor=“#xxxxxx” determines your background color
Colors and codes for HTML can be found at
http://hotwired.lycos.com/webmonkey/reference/colo
r_codes/
16
Colors
17
Color Codes
18
The Body Element
The BODY element of a web page is an important
element in regards to the page’s appearance. Here are
the attributes of the BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all the text on
the page (full page text color.)
This element contains information about the page’s
background color, the background image, as well as the
text and link colors.
19
Background Color
It is very common to see web pages with their
background color set to white or some other colors.
To set your document’s background color, you need to
edit the <BODY> element by adding the BGCOLOR
attribute. The following example will display a
document with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
20
TEXT Color
The TEXT attribute is used to control the color of all the
normal text in the document. The default color for text
is black. The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red
21
Character Formatting
In this chapter you will learn how to enhance your page with Bold, Italics,
and other character formatting options.
Objectives
Upon completing this section, you should be able to
Change the color and size of your text.
Use Common Character Formatting Elements.
Align your text.
Add special characters.
Use other character formatting elements.
22
Bold, Italic and other Character
Formatting Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
The size attribute can be set as an absolute value from 1 to 7 or as a relative
value using the “+” or “-” sign. Normal text size is 3 (from -2 to +4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g., <FONT
COLOR=“#RRGGBB”>this text has color</FONT>
<PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in a mono-
spaced font. Spaces and line breaks are supported without additional elements
or special characters.
23
Bold, Italic and other Character
Formatting Elements
<EM> Emphasis </EM> Browsers usually display this as
italics.
<STRONG> STRONG </STRONG> Browsers display this as
bold.
<TT> TELETYPE </TT> Text is displayed in a mono-
spaced font. A typewriter text, e.g. fixed-width font.
<CITE> Citation </CITE> represents a document citation
(italics). For titles of books, films, etc. Typically
displayed in italics. (A Beginner's Guide to HTML)
24
Alignment
Some elements have attributes for alignment (ALIGN)
e.g. Headings, Paragraphs and Horizontal Rules.
The Three alignment values are : LEFT, RIGHT, CENTER.
<CENTER></CENTER> Will center elements.
25
Lists
Lists are found inside the body, and are written as
“<ul>” for an unordered list, or “<ol>” for an ordered
(or numbered) list.
List items are denoted by “<li>” and do not require
closing tags.
26
List Elements
You have the choice of three bullet types: disc(default), circle, square.
These are controlled in Netscape Navigator by the “TYPE” attribute for the
<UL> element.
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
List item …
List item …
List item …
27
Links
The biggest thing that made HTML so popular was its
ability to link to other documents or sections of
documents.
A link is indicated by <a> (anchor).
The text that will become the link is identified with by
<href> (hyperlink reference).
28
More Links
An example link would be: <a
href=“document.html”>Link to document</a>
This would make the phrase “Link to document” a
hyperlink to “document.html” assuming that it is in the
same directory as your current file.
If the document is in a different directory, you need to
include it in the path. For example:
<a href=“extracrap/document.html”>
29
LINK, VLINK, and ALINK
These attributes control the colors of the different link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000” LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY>
30
Adding Images
<IMG>This element defines a graphic image on the
page.
Image File (SRC:source): This value will be a URL
(location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
Alternate Text (ALT): This is a text field that describes
an image or acts as a label. It is displayed when they
position the cursor over a graphic image.
Alignment (ALIGN): This allows you to align the image
on your page.
31
Adding Images
I suggest you make a folder for images in your directory
– it will make it easier to refer to things.
The <image src=“??????”> tag will allow you to insert an
image. ??????? Should be the path to the image file.
For example: <image src=“sample.jpeg> if the image
named “sample” is in the same directory as your html
file.
32
Images
Width (WIDTH): is the width of the image in pixels.
Height (HEIGHT): is the height of the image in pixels.
Border (BORDER): is for a border around the image, specified in pixels.
HSPACE: is for Horizontal Space on both sides of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space on both sides of the
image.
VSPACE: is for Vertical Space on top and bottom of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space above and bellow
the image.
33
Images as Links
You can also href an image the same way you would
with text, by including the <image src=“sample.jpeg> in
place of the text between the href anchors.
For example: <a href=“www.catabus.com”><image
src=“sample.jpeg></a>
Or, you could have “mailto:[email protected]” in place of
the website.
34
Using Image Background
The BODY element also gives you ability of setting an
image as the document’s background.
An example of a background image’s HTML code is as
follows:
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>
35
Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
36
TABLES
The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
The table row elements usually contain table header
elements or table data elements.
37
TABLES
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr> 38
</table>
Tables Attributes
BGColor: Some browsers support background colors in a
table.
Width: you can specify the table width as an absolute
number of pixels or a percentage of the document
width. You can set the width for the table cells as well.
Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
CellSpacing: Cell Spacing represents the space between
cells and is specified in pixels.
39
Tables Attributes
CellPadding: Cell Padding is the space between the cell
border and the cell contents and is specified in pixels.
Align: tables can have left, right, or center alignment.
Background: Background Image, will be titled in IE3.0
and above.
BorderColor, BorderColorDark.
40
Table Data and Table Header
Attributes
Colspan: Specifies how many cell columns of the table this cell should span.
Rowspan: Specifies how many cell rows of the table this cell should span.
Align: cell data can have left, right, or center alignment.
Valign: cell data can have top, middle, or bottom alignment.
Width: you can specify the width as an absolute number of pixels or a
percentage of the document width.
Height: You can specify the height as an absolute number of pixels or a
percentage of the document height
41
Forms
Forms add the ability to web pages to not only provide the person viewing
the document with dynamic information but also to obtain information
from the person viewing it, and process the information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
Forms work in all browsers.
Forms are Platform Independent.
42
Forms
To insert a form we use the <FORM></FORM> tags. The rest of the
form elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname”
MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”>
</P>
</FORM>
</BODY> </HTML>
43
Form Elements
Form elements have properties: Text boxes, Password
boxes, Checkboxes, Option(Radio) buttons, Submit,
Reset, File, Hidden and Image.
The properties are specified in the TYPE Attribute of
the HTML element <INPUT></INPUT>.
44
Form Elements
45
Text Box
46
Example on Text Box
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>
47
Password
48
Password example
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD"
NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>
49
Check Box
50
CHECKBOX EXAMPLE
51
Radio Button
52
RADIOBUTTON EXAMPLE
53
Submit Button
54
SUBMIT BUTTON EXAMPLE
55
EXERCISE
IMPLEMENT TEXTAREA,FILE and any other form elements
missing
56
END
57
