Chapter1-HTML.docx

COSC 101 Webpage Design and Development
Cavite State University – Rosario
Department of Computer studies
1
What is the Internet?
It is the computer-based worldwide information network.
It is composed of a large number of smaller interconnected networks and International computer
network linking together thousands of individual networks at military and government agencies,
educational institutions, nonprofits organizations, industrial and financial corporation’s of all sizes, and
commercial enterprises (called gateways or services providers) that enable individuals to access the
network . The most popular features of the Internet include electronic mail (email), discussion groups
(called newsgroups or bulletin boards, where users can post messages and look for responses on a
system called Usernet), on-line conversations (called chats), adventure and role-playing games,
information retrieval, and electronic commerce (e-commerce).
Internet-Computer based worldwide information
Importance of the Internet
o Information
o Communication
 Effective communication with people around the world
 Inexpensive communication
Example: Email, MIRC (is a particular kind of Internet Relay Chat messaging
service)
Client /Server Architecture
o Client - user, subscriber = information Receiver
o Server – provider = information provider
How to connect to the Internet
1. Log in to the Network.
2. Request information on a remote server.
3. The server sends the information to the client in the form of a file.
Downloading – the process of retrieving files from a remote server to user’s terminal.
Hypertext – Interlinked system of documents.
Hyperlink – Portions of the hypertext documents that are linked to other related documents.
Accessing Categories
Dedicated access – the computer is directly connected to the internet via router using cable, as a
router.
Dial-up access- a computer connects to the Internet with a temporary connection.
Tel. Wire, Analog
Packet – small units of information.
Modem – a device that converts the electronic signals from a computer into signal that can be
transmitted via telephone lines.
TCP/IP – transmission Control Protocol / Internet Protocol

2
Internet Protocol (IP Address) – is a numerical value assigned to each computer and printer,
participating in a computer network that uses the Internet Protocol for communication.
Network Address- is a variable for a node or network interface of a telecommunications network
Web server or host- a computer that sends (serves) requested Web pages.
Publishing- copying files onto a web server.
URL- Uniform Resource Locator
Website name type of site
http://www.internet101.org/start.html
transfer protocol domain name document name
specification
Transfer protocol specifications
http:// - hypertext transfer protocol
ftp:// - file transfer protocol
gopher:// - gopher site
news: - address of a newsgroup
mailto: -links to an e-mail address
telnet:// - telnet site
wais:// -wais site
Document name- directory and name of the file.
Directory- may be multiple in many cases, defines where the web server may find the file needed.
Name of the file- generally have .htm or .html extension.
TWO – LETTER INTERNET COUNTRY CODES (a two – letter abbreviation for a particular country)
ch – China de – Denmark
jp – Japan fr – France
uk – United Kingdom ph – Philippines
in – India
NETWORK- is the techniques, physical connections and computer programs used to link two or more
computers.
3 Components of a Network
1. Application Software – consists of computer programs that interface with network users and
permits sharing of information. Ex. Windows, DOS
Type of site
.com- commercial site
.edu- educational institution
.gov- government agencies
.mil – military entity
.org- organizations other than government
agencies
.net- network services provider or resource

3
2. Network Software – consists of computer programs that establish protocols or rules, for
computers to talk with one another. E x. UNIX
3. Network Hardware – Physical components that connect computer. Ex. Modem, telephone
lines, NIC card, UTP cable.
Transmission Schemes
o WWW- World Wide Web
o FTP- File Transfer Protocol
o File Structure
o Gopher – Enhanced FTP
o Telnet – LAN
o ARPANET – Advanced Research Project Agency Network ( early internet)
o First name of Internet
o Used from Advanced Research Project Agents
o Network for military purposes
History of the Internet and Networking
o Internet came from the word inter (“international”) and net (“network”).
o The Internet is a global network of networks.
o People and organizations connect into the Internet so they can access its massive store of
shared information.
o The Internet is an inherently participative medium.
o Anybody can publish information or create new services.
o The Internet is a cooperative endeavour – no organization is in charge of the net.
o The internet is a network of computers, which links many different types of computers all over
the world
o Originally developed by university researchers and was funded by the United States Defense
Department.
o The original network, dubbed ARPANet ( for the Advances Research Projects Agency that
developed it) evolved into a communications channel among contractors, military personnel,
and university researchers who were contributing to ARPA projects.
Web Browsers
o Is a program that enables a computer to locate, download, and display documents containing
text, sound, video, graphics, animation, and photographs located in computer networks.
o The act of viewing and moving about between documents on computer networks is called
browsing.
o Users browse through document on open, public-access networks called intranets.
o The largest open network is the Internet, a worldwide computer network that provides access
to sites on the World Wide Web (WWW, the Web).

4
Examples of Web Browsers
Browses allow users to access Web information by locating documents on remote computers
that function as Web servers. A browser downloads information over phone lines to s user’s
computer through the user’s modem and then displays the information on the computer. Most
browsers can display a variety of text and graphics that may be integrated into such a
document, including animation, audio and video.
o Netscape
o Lynx
o Chameleon
o Other Infos
o Internet Explorer
o Netcruiser
o Hot Java
o Mosaic
o IBM Webexplorer
o Firefox
Types of Web Browser
1. Text – based Web Browser – is a browser that provides access to the web in text – only mode.
Ex. www, Lynx
2. Graphical Web Browser – allows user to see more what the world wide web has to offer such
as graphics, images, audio and video.
Ex. Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Amaya, Hot Java,
Mosaic
Navigating
o Browser can create the illusion of travelling to an actual location in virtual space (hyperspace)
where the document being viewed exists. The virtual location in hyperspace is referred to as a
node, or a Web site. The process of virtual travel between Websites is called navigating.
Hypertext
o Documents on networks are called hypertext if the media is text only or hypermedia if the
media includes graphics as well as text.
o Every hypertext or hypermedia document on the internet has a unique address called a
Uniform Resource Locator (URL).
o Hypertext documents usually contain references to other URLs that appear in bold, underlined,
or colored text.
o The user can connect to the site indicated by the URL by clicking on it. This use of a URL within
a Web site is known as a hyperlink. When the user clicks on a hyperlink, the browser moves to
this next server and downloads and displays the document targeted by the link. Using this
method, browsers can rapidly take users back and forth between different sites.

5
Search Engine
o Common features found in browsers include the ability to automatically designate a Website
to which the browser opens with each use, the option to create directories of favourite or
useful Web sites, access to search engines (programs that permit the use of key words to
locate information on the Internet, an Internet or an intranet), and the ability to screen out
certain types of information by blocking access to certain categories of sites.
Factors affecting Browser’s Performance
o A browser’s performance depends upon the speed and efficiency of the user’s computer, the
type of modem being used, and the bandwidth of the data-transmission medium (the amount
of information that can be transmitted per second). Low bandwidth results in slow movement
of data between source and recipient, leading to longer transmission times for documents.
NETSCAPE NAVIGATOR TOOLBAR
 MSIE ( Microsoft Internet Explorer)
o Is the graphical WWW browser or user interface that is provided with the Microsoft
Windows 95 operating system. The MSIE browser is an alternative to the most popular
Web Browser, Netscape Navigator.- as of early January 1998
 Internet Explorer
INTERNET SERVICES
E- Mail- the most popular and most frequently used internet service. It has the same concept as the
postal mail (which is now called snail mail) where sending messages is done from one computer to
another rather than through the postal service. It eliminates delay and other problems associated with
physical delivery.
E-mail address- needed to make sure that the receiver will receive the e-mail sent. The e-mail address
has three parts: the account name, the @ sign and the domain name.
cute@yahoo.com
account name domain name type of institution
@ (at sign)
The E-mail address is pronounced as:
cute “at” yahoo “dot “com

6
HTML- Hypertext Markup Language
What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
HTML Documents = Web Pages
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph.
.HTM or .HTML File Extension?
When you save an HTML file, you can use either the .htm or the .html file extension. There is no
difference; it is entirely up to you.
HTML Element Syntax
 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML
tags.
HTML Attributes
Attributes provide additional information about HTML elements.
 HTML elements can have attributes

7
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
Attribute Example
<body> tag specifies bgcolor attribute:
INITIAL TAGS / BASIC STRUCTURE of HTML
<html>
 The <html> tag tells the browser that this is an HTML document.
 The html element is the outermost element in HTML and XHTML documents. The html element
is also known as the root element.
<head>
 The head element is a container for all the head elements. Elements inside <head> can include
scripts, instruct the browser where to find style sheets, provide meta information, and more.
 The following tags can be added to the head section: <base>, <link>, <meta>, <script>,
<style>, and <title>.
 The <title> tag defines the title of the document, and is the only required element in the head
section!
<body>
 The body element defines the document's body.
 The body element contains all the contents of an HTML document, such as text, hyperlinks,
images, tables, lists, etc.
Attribute Value Description
alink #xxxxxx/ colorname Specifies the color of an active link in a document
background URL Specifies a background image for a document
bgcolor #xxxxxx/colorname Specifies the background color of a document
link #xxxxxx/colorname Specifies the default color of unvisited links in a document
text #xxxxxx/colorname Specifies the color of the text in a document
vlink #xxxxxx/colorname Specifies the color of the visited links in a document
BUILDING BLOCKS: Headings and Paragraphs
Headings
<h1>…</h6>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
This area will contain everything that will be visible through a web browser, such as text and graphics.
All of the information will be HTML coded.
</body>
</html>

8
 The <h1> to <h6> tags are used to define HTML headings.
 <h1> defines the most important heading. <h6> defines the least important heading.
align left/center/right/justify Specifies the alignment of a heading
Paragraphs <p>…</p>
 The <p> tag defines a paragraph.
 The p element automatically creates some space before and after itself. The space is
automatically applied by the browser, or you can specify it in a style sheet.
align left/center/right/justify Specifies the alignment of a heading
Line Break <br>
 The <br> tag inserts a single line break.
 The <br> tag is an empty tag which means that it has no end tag.
Preformatted Text <pre>…</pre>
 The <pre> tag defines preformatted text.
 Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks.
Blockquote <blockquote> for Long Quotations
width number Specifies the maximum number of characters per line
INLINE STYLES
 Italic Text <i>…</i>
 Emphasized Text <em>…</em>
 Bold Text <b>…</b>
 Strong Text <strong>… </strong>
 Underlined Text <u>…</u>
 Strikethrough Text <strike>…</strike>
 Subscript <sub>…</sub>
 Superscript <sup>…</sup>
FONT, TEXT SIZE AND COLOR <font>…</font>
 The <font> tag specifies the font face, font size, and font color of text.
 Sizes are 1 to 7; default size is 3.
color #xxxxxx/colorname Specifies the color of text
face font_family Specifies the font of text
size number Specifies the size of text
Sample: <font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

9
Horizontal Line <hr>
 The <hr> tag creates a horizontal line in an HTML page.
 The hr element can be used to separate content in an HTML page.
align left/center/right Specifies the alignment of a hr element
size pixels Specifies the height of a hr element
width pixels% Specifies the width of a hr element
sample : <hr width = 40% size=4 align=center color=blue >
The Most Common Character Entities
Result Description Entity Name Entity Number
Non- breaking space    
< Less than < <
> Greater than > >
& Ampersand & &
“ Quotation mark " "
“ Left curly quotes 
” Right curly quotes 
‘ apostrophe ' (does not work in IE) '
Some other Commonly used Character Entities
Result Description Entity Name Entity Number
Character space
(nonbreaking space)
   
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
§ Section § §
© Copyright © ©
® Registered trademark ® ®
™ Trademark 
x Multiplication × ×
÷ division ÷ ÷
< Less than < 
> Greater than > 
HTML Comments
Comment tags  are used to insert comments in HTML.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:

Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.ackgroud

10
The <body> tag has two attributes where you can specify backgrounds. The background can be a
color or an image.
Bgcolor
The bgcolor attribute specifies a background- color for an HTML page. The value of
this attribute can be hexadecimal number, an RGB value, or a color name:
<body bgcolor=“#000000”>
<body bgcolor=“rgb(0,0,0)”>
<body bgcolor=“black”>
COLOR on the WEB
Tags and attributes that accept color values:
<BODY BGCOLOR=”value”> <BODY VLINK=”value”>
<BODY TEXT=”value”> <BODY ALINK=”value”>
<BODY LINK=”value”> <FONT COLOR=”value”>
<BASEFONT COLOR= “value”> <TABLE BGCOLOR=”value”>
<TR BGCOLOR=”value”> <TD BGCOLOR=”value”>
<TH BGCOLOR=”value”> Value may be color name or #RRGGBB:
Some Color Names:
black
white
Cool Neutrals
darkgray
darkslatergray
dimgray
gainsboro
ghostwhite
gray
lightgray
lightslategray
silver
slategray
snow
whitesmoke
Warm
Neutrals
antiquewhite
conrnsilk
floralwhite
ivory
linen
oldlace
papayawhip
seashell
Browns/Tans
beige
bisque
blanchedalmond
brown
burlywood
chocolate
khaki
moccasin
navahowhite
peru
rosybrown
saddlebrown
sandybrown
sienna
tan
wheat
Oranges
darkorange
orange
orangered
peachpuff
Yellows
darkgoldenrod
gold
goldenrod
lemonchiffon
lightyellow
palegoldenrod
yellow
Greens
aquamarine
darkgreen
darkkhaki
darkolivegree
n
darkseagreen
forestgreen
green
greenyellow
honeydew
lawngreen
lightgreen
lime
limegreen
mintcream
olive
olivedrab
palegreen
seagreen
springgreen
yellowgreen
Blues/Blue
Greens
aqua
cyan
darkcyan
lightcyan
lightseagreen
teal
turquoise
aliceblue
azure
cadetblue
darkblue
deepskyblue
indigo
lightblue
lightskyblue
mediumblue
navy

11
powderblue
royalblue
skyblue
slateblue
steelblue
Purples
blueviolet
darkmagenta
darkorchid
darkviolet
fuchsia
lavender
lavenderblush
orchid
plum
purple
thistle
violet
Pinks
Coral
darksalmon
Background
The background attribute specifies a background – image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.
<body background=“clouds.gif”>
<body background=“htpp://www.facebook.com/clouds.gif”>
Note:
If you want to use a background – image , you should keep in mind:
Will the background image increase the loading time too much?
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page?
Will the background image look good when it is repeated on the page?
Will the background image take away the focus from the text?
Basic Notes – Useful Tips
The bgcolor, background, the text attributes in the <body> tag are deprecated in the latest
versions of HTML (HTML4 and XHTML). The World Wide Web Consortium (W3c) has removed
these attributes from its recommendations. Style sheets (CSS) should be used instead (to define
the layout and display properties of HTML elements).
HTML Multimedia
Multimedia on the web, is sound, music, videos, movies, and animations.
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more. Web pages often
contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color. Later
came browsers with support for colors and fonts, and even support for pictures!
The support for sounds, animations, and videos is handled differently by various browsers.
Different types and formats are supported, and some formats requires extra helper programs
(plug-ins) to work.

12
Hopefully this will become history. HTML5 multimedia promises an easier future for multimedia.
Multimedia Formats
Multimedia elements (like sounds or videos) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension. When a
browser sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml
extension indicates an XML file, and the .css extension indicates a style sheet file. Pictures are
recognized by extensions like .gif, .png and .jpg.
Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.
Common Video Formats
 .mpg/.mpeg - MPEG. Developed by the Moving Pictures Expert Group. The first popular
video format on the web. Used to be supported by all browsers, but it is not supported
in HTML5 (See MP4).
 .avi- AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video
cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
 .wmv - WMV (Windows Media Video). Developed by Microsoft. Commonly used in video
cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
 .mov - QuickTime. Developed by Apple. Commonly used in video cameras and TV
hardware. Plays well on Apple computers, but not in web browsers.
 .rm /.ram - RealVideo. Developed by Real Media to allow video streaming with low
bandwidths. It is still used for online video and Internet TV, but does not play in web
browsers.
 .swf / .flv - Flash. Developed by Macromedia. Often requires an extra component (plug-
in) to play in web browsers.
 .ogg - Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
 .webm - WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google.
Supported by HTML5.
 .mp4 - MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime.
Commonly used in newer video cameras and TV hardware. Supported by all HTML5
browsers. Recommended by YouTube.
Note: Only MP4, WebM, and Ogg video is supported by the newest HTML5 standard.
Sound Formats
MP3 is the newest format for compressed recorded music. The term MP3 has become
synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
 .mid / .midi - MIDI (Musical Instrument Digital Interface). Main format for all electronic
music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but
digital notes that can be played by electronics. Plays well on all computers and music
hardware, but not in web browsers.
 .rm / .ram - RealAudio. Developed by Real Media to allow streaming of audio with low
bandwidths. Does not play in web browsers.

13
 .wma - WMA (Windows Media Audio). Developed by Microsoft. Commonly used in
music players. Plays well on Windows computers, but not in web browsers.
 .acc - AAC (Advanced Audio Coding). Developed by Apple as the default format for
iTunes. Plays well on Apple computers, but not in web browsers.
 .wav - WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and
Linux operating systems. Supported by HTML5.
 .ogg - Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
 .mp3 - MP3 files are actually the sound part of MPEG files. MP3 is the most popular
format for music players. Combines good compression (small files) with high quality.
Supported by all browsers.
 .mp4 - MP4 is a video format, but can also be used for audio. MP4 video is the
upcoming video format on the internet. This leads to automatic support for MP4 audio
by all browsers.
Note: Only MP3, WAV, and Ogg audio is supported by the newest HTML5 standard.
Code:
<audio autoplay id="bgsound">
<source src="music/music.mp3" type="audio/mp3">
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
HTML Video
Playing Videos in HTML
The HTML <video> Element
To show a video in HTML, use the <video> element:
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The autoplay attribute does not work in Safari and Opera, or in mobile devices like iPad and
iPhone.
HTML Video - Browser Support
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
HTML5 Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and

14
<audio>
HTML Images
The Image Tag and the SRC Attribute
In HTM, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attribute only and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for “source”. The
value of src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:
<img src=“url”>
The URL points to the location where the image is stored.
The ALT attribute
The alt attibute is used to define an “alternate text” of an image. The value of the alt attribute is
an author-defined text.
<img src=“boat.gif” alt=“Big boat”>
The “alt” attribute tells the reader what he or she is missing on a page if the browser can’t load
images. The browser will then display the alternate text instead of the image. It is good practice
to include the “alt” attribute for each image on a page, to improve the display and usefulness of
your document for people who have text-only browsers.
The <img> Tag and the Src Attribute
 In HTML, images are defined with the <img> tag.
 The <img> tag is empty, which means that it contains attributes only, and has no
closing tag.
 The <img> tag has two required attributes: src and alt.
Syntax for defining an image: <img src="url" alt="some_text"/>
alt text Specifies an alternate text for an image
src URL Specifies the URL of an image
align top/bottom/ Specifies the alignment of an image according to
middle/left/right surrounding elements
border pixels Specifies the width of the border around an image
height pixels / % Specifies the height of an image
usemap #mapname Specifies an image as a client-side image-map
width pixel / % Specifies the width of an image
title text Specifies extra information about an element
<img src="boat.gif" alt="Big Boat" />
HTML Links

15
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.
 A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
a new document or a new section within the current document.
 When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
 Links are specified in HTML using the <a> tag.
The <a> tag defines an anchor. An anchor can be used in two ways:
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
The a element is usually referred to as a link or a hyperlink.
The most important attribute of the a element is the href attribute, which indicates the link’s
destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
<!DOCTYPE html>
<html>
<body>
<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
The href attribute specifies the destination address (http://www.facebook.com/leemin/)
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.
Note:
 The link text does not have to be text. It can be an HTML image or any other HTML
element.

16
 Without a trailing slash on subfolder addresses, you might generate two requests to the
server. Many servers will automatically add a trailing slash to the address, and then
create a new request.
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to
any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
<a href=“url”> Text to be displayed </a>
The <a> tag is used to create an anchor to link from, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
<!DOCTYPE html>
<html>
<body>
<p><a href="html_images.html">HTML Images</a> is a link to a page on this website.</p>
</body>
</html>
The target Attribute
With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href=http://www.site.com target=“_blank”> Visit schools site</a>
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is
default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
Framename Opens the linked document in a named frame
The Anchor Tag and the Name Attribute

17
The name attribute is used to create a named anchor. When using named anchors we can create
links that can jump directly into a specific section on a page, instead <a href=“url”> Text to be
displayed </a> of letting the user scroll around to find what he/she is looking for. Below is the
syntax of a named anchor.
<a name=“label”> Text to be displayed </a>
The name attribute is used to create a named anchor. The name of the anchor can be any text
you care to use. The line below defines a named anchor:
<a name=“tips”>Useful Tips Section</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the “tips” section, add a # sign and the name of the anchor to the end of a
URL, like this:
<a href=“htpp://www.w3schools.com/html_links.asp#tips>Jump to the Useful Tips
Section </a>
A hyperlink to the Useful tips Section from WITHIN the file “html_link.asp” will look like this:
<a href=“#tips”>Jump to the Useful Section</a>
Links - Image as Link
It is common to use images as links:
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the
image.</p>
</body>
</html>
Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks are practical if your website has long pages.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:

18
<h2 id="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:
Chapter Summary
 Use the HTML <a> element to define a link
 Use the HTML href attribute to define the link address
 Use the HTML target attribute to define where to open the linked document
 Use the HTML <img> element (inside <a>) to use an image as a link
 Use the HTML id attribute (id="value") to define bookmarks in a page
 Use the HTML href attribute (href="#value") to link to the bookmark
HTML Lists
The most common HTML lists are ordered and unordered lists:
An ordered list:
1. The first list item
2. The second list item
3. The third list item
An unordered list:
 List item
 List item
 List item
Unordered Lists
 An unordered list is a list of items.
 The list of the items are marked with bullets (typically small black circles).
 Unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
<ul>
<li> Coffee</li>
<li> Milk </li>
</ul>
type disc/square/circle Specifies the style of the bullet points of the list items
<ul type=”disc”>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
 Coffee
 Milk

19
Ordered Lists
 An ordered list is also list of items.
 The list of items are marked with numbers.
 An ordered list start with the <ol> tag.
 Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Coffee</li>
</ol>
Definition Lists
 A definition list is a list of items, with a description of each item.
 The <dl> tag defines a definition list.
 The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd>
(describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
List Tags
Tags Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
HTML <img> usemap Attribute
 The usemap attribute specifies an image as a client-side image-map.
 An image-map is an image with clickable areas.
 The usemap attribute is associated with a map element's name or id attribute, and
creates a relationship between the image and the map.
 The <map> tag is used to define a client-side image-map.

20
 The name attribute is required in the map element.
name mapname Specifies the name for an image-map
 This attribute is associated with the <img>'s usemap attribute and creates a relationship
between the image and the map.
 The map element contains a number of area elements, that defines the clickable areas in
the image map.
 The <area> tag defines an area inside an image-map.
 The area element is always nested inside a <map> tag.
alt text Specifies an alternate text for an area
coords coordinates Specifies the coordinates of an area
href URL Specifies the destination of a link in an area
shape default/rect/ Specifies the shape of an area
circle/poly
target _blank/_parent/ Specifies where to open the linked page specified
_self/_top in the href attribute
 _blank Open in a new window or tab
 _self Open in the same frame as it was clicked
 _parent Open in the parent frameset
 _top Open in the full body of the window
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

21

22
HTML marquee
You can create an HTML marquee (i.e. scrolling text or scrolling images) by using
the <marquee> tag. You can make the text/images scroll from right to left, left to right, top to
bottom, or bottom to top.
Marquee Code
Continuous scrolling text:
This marquee causes the text to scroll continuously from right to left. Once it disappears from
the left, it re-appears from the right.
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
Slide-in text:
This text slides in from the right, then stays where it is. You will need to refresh this page to see
the effect again.
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>
Text bouncing back and forth:
<marquee behavior="alternate">Your bouncing text goes here</marquee>
Text Scrolling Upwards:
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>
Change the Scrolling Speed:
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>
Scrolling Images:
Simply replace the src="... part with the location of your own image.
<marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100"
height="100" alt="smile" /></marquee>
Images & Text (Both Scrolling):
Simply add your text under the image tag (but still within the marquee tags).
<marquee behavior="scroll" direction="left">
<img src="/pix/smile.gif" width="100" height="100" alt="smile" />
<p>Sample text under a <a href="/html/codes/scrolling_images.cfm">scrolling
image</a>.</p>
</marquee>
References:
http://www.quackit.com/html/codes/html_marquee_code.cfm

23

24
Web Site Organization
 Linear Web Site Layout- displays your Web pages in a straight line. This is appropriate
if the information must be read one page after another.
 Hierarchical Web Site Layout- displays information in a tree-like structure. It is perfect
for information that has index or table of contents.
 Webbed Web Site Layout- has no set structure. This is good for information that does
not need to be read in order.
 Narrow Web Site Layout- one in which the home page is the index. All other web
pages in this layout are individually linked to the home page. This forces the visitor
return to the home page in order to move from one Web Page to another
 Deep Web Site- is one in which the content Web Pages are buried beneath many other
Web pages. A deep web site forces a visitor to link to several Web pages before reaching
a Web Page with content. This is not effective layout because there are interim pages
with little or no content.
HTML Tables
 Table is use to display contents in a tabular format.
 Table is also use as a standard method for page layout.
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag), and each row is divided into data cells
(with the <td> tag). td stands for "table data," and holds the content of a data cell. A
<td> tag can contain text, links, images, lists, forms, other tables, etc.
 A simple HTML table consists of the table element and one or more tr, th, and td
elements.
 A more complex HTML table may also include caption, col, colgroup, thead, tfoot, and
tbody elements.
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<table> tag attributes
align left/center/right Specifies the alignment of a table according to surrounding text
background url relative or absolute location of a graphic image file
loaded as a background image for the entire table.
bgcolor #xxxxxx/colorname Specifies the background color for a table
border pixels Specifies the width of the borders around a table
bordercolor #xxxxxx/colorname Specifies the border color for a table

25
cellpadding pixels Specifies the space between the cell wall and the cell content
cellspacing pixels Specifies the space between cells STF
frame void/above/below/hsides Specifies which parts of the outside borders that should
be visible
lhs/rhs/vsides/box
rules none/rows/cols/all Specifies which parts of the inside borders that should be
visible
summary text Specifies a summary of the content of a table
width/height pixels/percentage(%) Specifies the width and height of a table
<tr> tag attributes
align left/center/right/justify Specifies the position of data in a row
background url Sets the background image for the row
bordercolor #xxxxxx/colorname Specifies the border color for the row
bgcolor #xxxxxx/colorname Specifies the background color for the row
<td>/<th> tags attributes
align left/center/right Specifies the alignment of the contents of a cell
background url Set a background image for a cell
bgcolor #xxxxxx/colorname Specifies the background color for a cell
bordercolor #xxxxxx/colorname Specifies the border color for a cell
valign top/middle/bottomVertical aligns the content in a cell
width/height pixels/percentage(%) Specifies the width and height of a cell
colspan number Sets a number of columns the cell should span
rowspan number Sets a number of rows the cell should span
Table Example #1
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>

26
<tr>
</tr>
</table>
How the HTML code above looks in your browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Table Example #2
<table width="100%" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="3">Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Rowspan and Colspan
 Use the colspan attribute to make a cell span many columns
<table width="100%" border="1" >
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
 Use the rowspan attribute to make a cell span many rows

27
<table width="100%" border="1">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
HTML Frames
 Frames divide the browser window into smaller windowpanes which contain HTML
documents.
 With frames, you can display more than one HTML document in the same browser
window.
 Each HTML document is called a frame, and each frame is independent of the others.
Advantages:
 Frames, if properly used, prove to be an excellent navigation tool. One frame can be
used for navigational links or menus while the other can be used for the actual content.
 Easier site maintenance. If you want to add another menu or another major section on
your website, you only have to edit or change the navigational frame that contains the
links or menus
Disadvantages:
 Frames are not expected to be supported in future versions of HTML
 The web developer must keep track of more HTML documents
 Framed sites are not indexed well by searched engines. Results of search engines might
have your HTML document displayed out of its frameset, resulting to the lost of
navigational or other aspects that you have developed with frameset.
The HTML frameset Element
The frameset element holds one or more frame elements. Each frame element can hold a
separate document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and
HOW MUCH percentage/pixels of space will occupy each of them.
The HTML frame Element

28
The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.
The first column is set to 25% of the width of the browser window. The second column is set to
75% of the width of the browser window. The document "frame_a.htm" is put into the first
column, and the document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can
be set to use the remaining space, with an asterisk (cols="25%,*").
Basic Notes - Useful Tips
Tip: If a frame has visible borders, the user can resize it by dragging the border. To prevent a
user from doing this, you can add noresize="noresize" to the <frame> tag.
Note: Add the <noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the
<frameset></frameset> tags! However, if you add a <noframes> tag containing some text for
browsers that do not support frames, you will have to enclose the text in <body></body> tags!
See how it is done in the first example below.
HTML Frame Tags
Tag Description
<frameset> Tells the browser that the documents contain frames
<frame> Specify the frame and the HTML document it would use
<noframes>
Enclose the alternative HTML that will be used if Frame is not supported by the
browser
<frameset> tag attributes
cols pixel , % , * Specifies the number and size of columns in a frameset
rows pixel , % , * Specifies the number and size of rows in a frameset
frameborder 1 or 0 Specifies if the frameset will display borders between frames
border pixel Sets the thickness of the borders between frames
<frame> tag attributes
frameborder 0 or 1 Specifies whether or not to display a border around a frame
marginheight pixels Specifies the top and bottom margins of a frame
marginwidth pixels Specifies the left and right margins of a frame

29
name name Specifies the name of a frame
noresize noresize Specifies that a frame cannot be resized
scrolling yes/no/auto Specifies whether or not to display scrollbars in a frame
src URL Specifies the URL of the document to show in a frame
Sample <noframes> tag
<html>
<head></head>
<frameset cols="25%,50%,25%">
<frame src="frame_c.htm" />
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>
Sample nested framesets
How to create a frameset with three documents, and how to mix them in rows and columns.
<html>
<head></head>
<frameset rows="50%,50%">
<frameset cols="25%,75%">
<frame src="frame_c.htm" />
</frameset>
</frameset>
</html>
Sample navigation frame
The navigation frame contains a list of links with the second frame as the target. The file called
"tryhtml_contents.htm" contains three links. The source code of the links:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document.
<html>

30
<head></head>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" />
<frame src="frame_a.htm" name="showframe" />
</frameset>
</html>

31
HTML Iframes
An iframe is used to display a web page within a web page.
Syntax for adding an iframe:
<iframe src="URL"></iframe>
<iframe> tag attributes
align left, right, top, middle, bottom Specifies the alignment of an iframe according to
surrounding elements
frameborder 0 or 1 Specifies whether or not to display a border around an iframe
marginheight pixels Specifies the top and bottom margins of a iframe
marginwidth pixels Specifies the left and right margins of a iframe
name name Specifies the name of a iframe
noresize noresize Specifies that an iframe cannot be resized
scrolling yes/no/auto Specifies whether or not to display scrollbars in a frame
src URL Specifies the URL of the document to show in a iframe
height/width pixel, % Sets the dimensions of the iframe
Sample iframe
<iframe src=”sample.html” width=”300” height=”200” frameborder=”1” scrolling=”auto”
noresize>
<p>Your browser does not support iframes.</p>
</iframe>
HTML Forms
 HTML forms are used to pass data to a server.
 This are also used to gather information from the visitors.
 A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons
and more.
 A form can also contain select lists, textarea, fieldset, legend, and label elements.
 The <form> tag is used to create an HTML form:
<form> (start of form)
.
input elements
.
</form> (end of form)

32
HTML Form Tags
Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
The <form> tag attributes
name name Specifies the name for a form
method get / post Specifies how to send form-data
action URL Specifies where to send the form-data when a form is submitted
target _blank/_self/_parent/ Specifies where to open the action URL
_top/framename
_____________________________________________________________________________________
Example:
<form name=”myform” action=”admin_act.jsp” method=”post” target=”_blank”>…</form>
<form method=”post” action="mailto:flokz12@yahoo.com">…</form>
Notes on the "get" method:
 This method appends the form-data to the URL in name/value pairs :
URL?name=value&name=value
 This method is useful for form submissions where a user want to bookmark the result
 There is a limit to how much data you can place in a URL (varies between browsers),
therefore, you cannot be sure that all of the form-data will be correctly transferred
 Never use the "get" method to pass sensitive information! (password or other sensitive
information will be visible in the browser's address bar)
Notes on the "post" method:
 This method sends the form-data as an HTTP post transaction
 Form submissions with the "post" method cannot be bookmarked
 The "post" method is more robust and secure than "get", and "post" does not have size
limitations
The Input Element <input/> tag
 The most important form element is the <input> element.

33
 The <input> element is used to select user information.
 An input element can vary in many ways, depending on the type attribute.
 An input element can be of type text field, checkbox, password, radio button, submit button, and
more.
type button/checkbox/file Specifies the type of an input element
hidden/image/password
radio/reset/submit/text
accept MIME_type Specifies the types of files that can be submitted through a file
upload (only for type="file")
alt text Specifies an alternate text for an image input (only for type="image")
checked checked Specifies that an input element should be preselected when the
page loads (for type="checkbox" or type="radio")
disabled disabled Specifies that an input element should be disabled when the page loads
maxlength number Specifies the maximum length (in characters) of an input field
(for type="text" or type="password")
name name Specifies a name for an input element
readonly readonly Specifies that an input field should be read-only
(for type="text" or type="password")
size number Specifies the width of an input field
src URL Specifies the URL to an image to display as a submit button
(only for type="image")
value value Specifies the value of an input element
_____________________________________________________________________________________
Type attributes values
Value Description
Button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
File Defines an input field and a "Browse..." button, for file uploads
Hidden Defines a hidden input field
Image Defines an image as a submit button
password Defines a password field. The characters in this field are masked
Radio Defines a radio button
reset Defines a reset button. A reset button resets all form fields to their initial values
Submit Defines a submit button. A submit button sends form data to a server
Text
Defines a one-line input field that a user can enter text into. Default width is 20
characters
Text Fields
<input type=”text”> : defines a one-line input field that a user can enter text into
<form>
First name: <input type="text" name="firstname" /><br />

34
Last name: <input type="text" name="lastname" />
</form>
Password Field
<input type="password" /> : defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
Radio Buttons
<input type="radio" /> : defines a radio button. Radio buttons let a user select ONLY ONE
one of a limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Checkboxes
<input type="checkbox" /> : defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
Submit Button
<input type="submit" /> : defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in
the form's action attribute. The file defined in the action attribute usually does something with
the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp".
Button

35
<input type="button" /> defines a clickable button, that does not do anything. The button
type is most often used to activate a JavaScript when a user clicks on the button.

36
<html>
<head>
<script type="text/javascript">
function msg()
{
alert("Hello world!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me" onclick="msg()" />
</form>
</body>
</html>
File
<input type="file" /> is used for file uploads.
<form>
<input type="file" name="pic" accept="image/gif" />
</form>
Hidden
<input type="hidden" /> defines a hidden field. A hidden field is not visible for the user.
Hidden fields often store a default value, or have their value changed by a JavaScript.
<form>
<input type="hidden" name="country" value="Norway" />
</form>
Image
<input type="image" /> defines an image as a submit button.
The src and alt attribute are required with <input type="image">.
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />
</form>

37
Reset Button
<input type="reset" /> defines a reset button. A reset button resets all form fields to their
initial values.
Use the reset button carefully! It can be annoying for users who accidentally activate the reset
button.
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
Pin: <input type="text" name="pin" maxlength="4" /><br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
HTML <textarea> Tag
 The <textarea> tag defines a multi-line text input control.
 A text area can hold an unlimited number of characters, and the text renders in a fixed-width
font (usually Courier).
 The size of a textarea can be specified by the cols and rows attributes, or even better;
through CSS' height and width properties.
cols number Specifies the visible width of a text-area
rows number Specifies the visible number of rows in a text-area
disabled disabled Specifies that a text-area should be disabled
name name_of_textarea Specifies the name for a text-area
readonly readonly Specifies that a text-area should be read-only
wrap off turns word wrapping off
_____________________________________________________________________________________
<form name="myform2">
<textarea name="query" cols="20" rows="3">Please type your message here. </textarea>
</form>
HTML <fieldset> & <legend> Tag
 The <fieldset> tag is used to logically group together elements in a form.

38
 The <fieldset> tag draws a box around the related form elements.
 The <legend> tag defines a caption for the fieldset element.
<form>
<fieldset>
<legend>Personal Information:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
HTML <select>, <option> & <optgroup> Tag
 The <select> tag is used to create a select list (drop-down list).
 The <option> tags inside the select element define the available options in the list.
 The <optgroup> tag is used to group together related options in a select list.
 If you have a long list of options, groups of related options are easier to handle for the user.
<select> tag attributes
disabled disabled Specifies that a drop-down list should be disabled
multiple multiple Specifies that multiple options can be selected
name name Specifies the name of a drop-down list
size number Specifies the number of visible options in a drop-down list
_____________________________________________________________________________________
<option> tag attributes
disabled disabled Specifies that an option should be disabled
label text Specifies a shorter label for an option
selected selected Specifies that an option should be selected by default
value text Specifies the value to be sent to a server when a form is submitted
_____________________________________________________________________________________
<optgroup> tag attributes
label text Specifies a description for a group of options
disabled disabled Specifies that an option group should be disabled
_____________________________________________________________________________________

39
Example #1:
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
Example #2:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
HTML <button> Tag
 The <button> tag defines a push button.
 Inside a button element you can put content, like text or images. This is the difference
between this element and buttons created with the input element.
 Always specify the type attribute for the button. The default type for Internet Explorer is
"button", while in other browsers it is "submit".
Disabled disabled Specifies that a button should be disabled
name name Specifies the name for a button
type button/reset/submit Specifies the type of a button
value text Specifies the underlying value of a button
_____________________________________________________________________________________
Example:
<button type="button">Hello<img src="FACE02.ico"/></button>

40
Exercises:
<form action="/html/tags/html_form_tag_action.cfm"
method="get">
<fieldset>
<legend>Your Details</legend>
<div>
<label for="first_name">First Name:</label><br>
<input type="text" name="first_name" value=""
maxlength="100"><br>
</div>
<div>
<label for="lunch">Lunch:</label><br>
<input type="radio" name="lunch" value="pasta"> Pasta
<input type="radio" name="lunch" value="fish"> Fish
</div>
<div>
<label for="drinks">Drinks:</label><br>
<input type="checkbox" name="drinks" value="beer"> Beer
<input type="checkbox" name="drinks" value="wine"> Wine
</div>
<div>
<label for="city">Preferred City:</label><br>
<select name="city">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
</div>
<div>
<label for="comments">Comments:</label><br>
<textarea rows="3" cols="20" name="comments"></textarea>
</div>
<div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
References:
http://www.quackit.com/html/codes/html_form_code.cfm
Your Details
First Name:
Lunch:
Pasta Fish
Drinks:
Beer Wine
Preferred City:
Comments:
Submit

41
HTML Layouts
 Web page layout is very important to make your website look good.
 Design your webpage layout very carefully.
Website Layouts
 Most websites have put their content in multiple columns (formatted like a magazine or
newspaper).
 Multiple columns is created by using <table> or <div> tags.
 Some CSS are normally also added to position elements, or to create backgrounds or
colorful look for the pages.
HTML Layouts - Using Div Elements
The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the
same result as in the previous example:
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 cvsu-rosario.edu.ph</div>
</div>
</body>
</html>

42
The HTML code above will produce the following result:
HTML <div> Tag
 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is often used to group block-elements to format them with styles.

43
http://www.quackit.com/html/codes/

<table class="myTableText">
<tr>
<th>Header 1</th><th>Header
2</th>
</tr>
<tr>
<td>Try <a
href="/css/">CSS</a></td>
<td>And <a href="/css/css3/">CSS
3</a></td>
</tr>
<tr>
<td>Or <a
href="/html/">HTML</a></td>
<td>Or <a
href="/sql/tutorial/">SQL</a></td>
</tr>
</table>

<style scoped>
.myTableText {
border-collapse: collapse;
background-color: #98FB98;
}
.myTableText td,
.myTableText th {
border: 2px solid #47ae32;
padding: 5px;
}
.myTableText th {
font: bold 18px/1.1em Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 4px black;
letter-spacing: 0.1em;
background-color: #47ae32;
color:#98FB98;
}
.myTableText td {
font: normal 14px/1.5em Goudy, Georgia, serif;
color: #47ae32;
}
.myTableText td a:link {
color: #006400;
text-decoration: none;
}
.myTableText td a:visited {
color: #006400;
}
.myTableText td a:hover {
color: #FF4500;
text-decoration: underline;
}
.myTableText td a:active {
color: #FF0000;
}
</style>

Chapter1-HTML.docx

More Related Content

Similar to Chapter1-HTML.docx (20)

Recently uploaded (20)

Chapter1-HTML.docx