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

Web Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Web Development

Similar to Web Development (20)

Recently uploaded

Recently uploaded (20)

Web Development