HTML Guide: Essential Elements for Web Development

Web Development
Hypertext Mark-up
Language (HTML)

 the "mother tongue" of your browser
 invented in 1990 by a scientist called Tim Berners-
Lee
 a language, which makes it possible to present
information on the Internet
 What you see when you view a page on the Internet
is your browser's interpretation of HTML.
 To see the HTML code of a page on the Internet,
simply click "View" in the top menu of your browser
and choose "Source".
What is HTML?

What can I use HTML for?
 HTML is used to make websites. It is as simple as
that!
 HTML is an abbreviation of "HyperText Mark-up
Language" - which is already more than you need to
know at this stage. However, for the sake of good
order, let us explain in greater detail.
 Hyper is the opposite of linear.
 Text is self-explanatory.
 Mark-up is what you do with the text. You are marking up
the text the same way you do in a text editing program with
headings, bullets and bold text and so on.
 Language is what HTML is. It uses many English words.

What is needed?
 a "browser". A browser is the program that
makes it possible to browse and open
websites.
 a simple text editor
 If you are using Windows you can use
Notepad, which is usually found in the start
menu under Programs in Accessories

Elements & Tags
 Tags are labels you use to mark up the begining
and end of an element.
 All tags have the same format: they begin with a
less-than sign "<" and end with a greater-than sign
">".
 Generally, there are two kinds of tags - opening
tags: <html> and closing tags: </html>.
 The only difference between an opening tag and a
closing tag is the forward slash "/". You label content
by putting it between an opening tag and a closing
tag.

Document Tags
 Document tags define the overall structure of
an HTML document.
 There are four tags every HTML document
should have. These tags define the what type
of document it is, and the major sections.
These tags are <html>, <head>, <title> and
<body>.

Attributes
 elements give structure to a HTML document
and tells the browser how you want your
website to be presented (for example, <br />
informs the browser to make a line break).
 In some elements you can add more
information. Such additional information is
called an attribute.
 Ex: <body style="background-color: red;">

<html> tag
 Placed at the beginning and end of your
document.
 Everything in the document goes inside
<html>…</html>
<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>
<BODY> Hi There! </BODY>
</HTML>

<head> tag
 the cover page of the document.
 Just as the cover page of a book contains
information about the book (such as the title),
the <head> section contains information
about the document.
<HEAD>
</HEAD>

<title> tag
 <title> states the title of the document.
 <title> always goes in the <head>
section.
 The text inside <title> is not displayed in
the document. However, most browsers will
display the title at the top of the window.
<HEAD>
</HEAD>

<body> tag
 one of the two major sections that goes
inside <html>
 defines the visible section of the document
 the section that holds everything that is
actually displayed. All the text, headers,
tables, etc are in this section
 it has a number of attributes which control the
overall document appearance

Attributes of the <body> tag
 BGCOLOR: background color of the page
 BACKGROUND: background picture for the page
 TEXT: color of the text on the page
 LINK: color of links that haven't been followed yet
 VLINK: color of links that have been followed
 ALINK: color of links while you are clicking on them
 BGPROPERTIES: if the background image should not scroll
 TOPMARGIN: size of top and bottom margins
 LEFTMARGIN: size of left and right margins
 MARGINHEIGHT: size of top and bottom margins
 MARGINWIDTH: size of left and right margins

HTML Color - bgcolor
 The bgcolor attribute is used to control the
background of an HTML elmement,
specifically page and table backgrounds.
 The HTML to change the background color is
simple:
 <TAGNAME bgcolor="value">

HTML Color Coding System -
Color Names
 There are 3 different methods to set color.
 The simplest being the Generic terms of
colors. Examples: black, white, red, green,
and blue.
 Generic colors are preset HTML coded colors
where the value is simply the name of each color.

HTML Coloring System - RGB
Values
 RGB stands for Red, Green, Blue. Each can
have a value from 0 (none of that color) to
255 (fully that color).
 The format for RGB is - rgb(RED, GREEN,
BLUE), just like the name implies.

HTML Coloring System -
Hexadecimal
 Hexadecimals are the best choice for
compatible web development because of
their consistency between browsers.
 If you want to be absolutely sure your colors
will not change, use paired hex values for
color.
 Examples: "#0011EE", "#44HHFF", or
"#117788".
 These are called True Colors, since they will
stay true in hue from browser to browser.

HTML - Background
 Images can be placed within elements of
HTML.
 Tables, paragraphs, and bodys may all have
a background image.
 To accomplish this, we use the background
attribute as follows.
<table height="100" width="150“
background=“background.jpg" >
<tr>
<td>This table has a background image</td>
</tr>
</table>

<font> tag
 one of the most important visual elements of
your page
 used to add style, size, and color to the text
on your site. Use the size, color, and face
attributes to manipulate your fonts.
Attributes:
 SIZE: size of the font
 COLOR: color of the text
 FACE: set the typestyle for text

Example
 <font size="5">Here is a size 5 font</font>
 <font color="#990000">
This text is hexcolor #990000
</font>
<br />
<font color="red">This text is red</font>
 <font face="Bookman Old Style, Book Antiqua,
Garamond">This paragraph has had its
font...</font>

Text Formatting Tags
 <B> Bold
 <I> Italics
 <S> Strikeout
 <STRIKE> Strikeout
 <U> Underline
 <BIG>
 <SMALL>
 <SUB> Subscript
 <SUP> Superscript

Lists
 HTML offers authors several mechanisms for
specifying lists of information. All lists must
contain one or more list elements. Lists may
contain:
 Unordered information: <ul></ul>
 Ordered information: <ol></ol>
 Definitions. <dd></dd

<ol> tag
 creates an ordered list.
 "Ordered" means that the order of the items
in the list is important.
 To show this, browsers automatically number
the list.
 Attributes:
 TYPE: type of numerals
 START: where to start counting

<li> tag
 indicates the start of a new line item within a
list.
 <li> can be used with <ol>,<ul> and
<dir>
Attributes:
 TYPE: type of bullet or numeral
 VALUE: where to continue counting

Attribute type for <OL>
1 is the default: normal
Arabic numerals.
<OL TYPE=1>
<LI>Turn left on Maple Street
<LI>Turn right on Clover Court
</OL>
1. Turn left on Maple Street
2. Turn right on Clover Court
A makes the list use capital
letters
<OL TYPE=A>
</OL>
A. Turn left on Maple Street
B. Turn right on Clover Court
a makes the list use
lowercase letters
<OL TYPE=a>
</OL>
a. Turn left on Maple Street
b. Turn right on Clover Court
I makes the list use capital
Roman Numerals
<OL TYPE=I>
</OL>
I. Turn left on Maple Street
II. Turn right on Clover Court
i makes the list use
lowercase Roman
Numerals
<OL TYPE=i>
</OL>
i. Turn left on Maple Street
ii. Turn right on Clover Court

Example
this code produces this
<H3>Meeting Agenda</H3>
<OL TYPE=A>
<LI>Budget
<OL TYPE=a>
<LI>Equipment
<LI>Salaries
</OL>
<LI>Convention Plans
<OL TYPE=a>
<LI>Accommodations
<LI>Schedule
</OL>
</OL>
Meeting Agenda
A. Budget
a. Equipment
b. Salaries
B. Convention Plans
a. Accomodations
b. Schedule

Attribute start for <OL>
 START tells the browser what number to start
counting at.
We now pick up where we
left off yesterday
with the chilled
gelatin:
<OL START=5>
<LI>Place gelatin mold
over plate
<LI>Tap gently with a
spoon
<LI>Lift mold off of
gelatin
</OL>
We now pick up where we left off
yesterday with the chilled
gelatin:
5. Place gelatin mold over plate
6. Tap gently with a spoon
7. Lift mold off of gelatin

<ul> tag
 creates an unordered list.
 The unordered part means that the items in the list
are not in any particular order.
<UL><LI>Marketing <UL>
<LI>Andy Hodges
<LI>Trey Gregory
</UL><LI>Engineering
<UL> <LI>Karen Joslin
<LI>Sheila Malone
<LI>Karl Heinz
</UL></UL>
Marketing
Andy Hodges
Trey Gregory
Engineering
Karen Joslin
Sheila Malone
Karl Heinz

HTML Links and Anchors
 The ability to link from one document to
another is one of the most central features of
HTML .
 These connections are made using anchor
tags to create links.
 Internal - Links to anchors on the current page
 Local - Links to other pages within your domain
 Global - Links to other domains outside of your
site

<a> tag
 the <a></a> tags to define the start and
ending of an anchor.
 the cornerstone of HTML
 the tag that makes hypertext hypertext.
 the tag you use to make hyperlinks: the text
that you can click on in your web browser to
go to another web page.

Attributes of <a></a>
 HREF: URL you are linking to
 NAME: name a section of the page
 TARGET: controls where the new document will be
displayed when the user follows a link
 "_blank"
 "_parent"
 "_self"
 "_top"
 TITLE: suggested title for the document to be
opened

Examples
 Internal link:
 <a href="resumepage.html">my resume</A>
 Local Link:
 <a href="page2.htm">Go to page 2</a>
 Global link:
 <a href="http://www.yahoo.com/">Yahoo!</a>
 Link to email:
 <a href="mailto:nobody@html.net">E-mail at
HTML.net</a>

Images
 Images are a staple of any web designer, so
it is very important that you understand how
to use them properly.
 Images made the web cool
 The <img> tag is used to add images to
HTML documents

Attributes of the <img> tag
 SRC: where to get the picture
 ALT: text to show if you don't show the picture
 WIDTH: how wide is the picture
 HEIGHT: how tall is the picture
 ALIGN: how text should flow around the picture
 BORDER: border around the picture
 HSPACE: horizontal distance between the picture
and the text
 VSPACE: vertical distance between the picture and
the text

Example
<img SRC="../graphics/pumpkin.gif"
ALT="pumpkin“ />
<img src="images/logo.png" />

HTML Tables
 Tables are a handy way to create a site's
layout
 The <table> tag is used to begin a table.
 Within a table element are the <tr> (table
rows) and <td> (table columns) tags.

An Example
<table border="1">
<tr>
<td>Row 1 Cell 1</td>
</tr>
<tr>
</tr>
</table>
output

Spanning Multiple Rows and
Cells
 Use rowspan
to span
multiple rows
and colspan to
span multiple
columns.
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>

Cell Padding and Spacing
 With the cellpadding and
cellspacing attributes you will
be able to adjust the white
space on your tables.
 Spacing defines the width of the border
 Padding represents the distance between cell
borders and the content within.
 Ex. <table cellspacing=“5” cellpadding=“10” border=“1”>
The value you specify for padding and spacing is interpreted by the browser
as a pixel value you. So a value of 10 is simply 10 pixels wide. Most
attributes that use numeric values for their measurements use pixels.

Line Breaks
 Line breaks are different then most of the
tags we have seen so far.
 A line break ends the line you are currently
on and resumes on the next line.
 Placing <br /> within the code is the same as
pressing the return key in a word processor.
<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>

HTML Horizontal Rule
 Use the <hr /> tag to display lines across the
screen.
Note:
the horizontal
rule tag has no
ending tag like
the line break
tag.

HTML Layout
 HTML layout is very basic.
 Not many options exist with the body tag
alone.
 Tables on the other hand are the bread and
butter of HTML layouts.
 Any element may be placed inside of a table
including tables themselves.

END OF LECTURE
Web Design and Development Workshop-Seminar

HTML Guide: Essential Elements for Web Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to HTML Guide: Essential Elements for Web Development

Similar to HTML Guide: Essential Elements for Web Development (20)

Recently uploaded

Recently uploaded (20)

HTML Guide: Essential Elements for Web Development