Scribd
Upload
16 views

HTML Lecture 2

This document provides an overview of HTML, the essential language for creating web pages, including its basic tags, rules, and formatting options. It outlines the necessary tools for web development, such as text editors and web browsers, and includes exercises for practical application. Additionally, it covers how to structure content using lists and color attributes to enhance web page design.

Uploaded by

haroonsadiq331
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views

HTML Lecture 2

This document provides an overview of HTML, the essential language for creating web pages, including its basic tags, rules, and formatting options. It outlines the necessary tools for web development, such as text editors and web browsers, and includes exercises for practical application. Additionally, it covers how to structure content using lists and color attributes to enhance web page design.

Uploaded by

haroonsadiq331
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 120

Web Page Concept

and Design :
Getting a Web Site Up and
Running

Creating Web Pages Using HTML

Nangarhar University Computer Science Department 1


Scope

 What is HTML?
 What are the tools needed for creating web
pages using HTML?
 What are the basic HTML tags?
 How to create a web page using HTML?
 How to build a web site using HTML?

Nangarhar University Computer Science Department 2


What is HTML?

HyperText Markup Language (HTML)


 the publishing language of the World Wide
Web; the standard used to create web
pages
 markup language that defines the structure
of information by using a variety of tags
and attributes, which is designed to display
text and other information on a screen and
provide hyperlinks to other Web documents
Nangarhar University Computer Science Department 3
What are the basic tools?

 Plain text editor like NotePad – to write


HTML documents
 Web browser – to test and view the
created web page
 HTML reference book – to serve as
guide for HTML tags
 Information and other materials about
the library in electronic file

Nangarhar University Computer Science Department 4


What are the basic HTML
rules?

 HTML tags are enclosed by brackets < > for


example <HTML>
 Most tags require a closing tag <HTML> …
</HTML>
 Tags must be nested correctly <B><I>My
Library Web Site</I></B> first tag on, last
tag off
 HTML treats all white space as a single
blank space
Nangarhar University Computer Science Department 5
What are the basic
HTML rules?

 Tags are not case sensitive but are usually written in


uppercase, with the attributes and values in small
letters enclosed by quotation marks
 Most tags have optional attributes with several
possible values that modify the tag’s behavior

Look inside HTML element (Tag)


TAG attribute value closing tag
<BODY bgcolor="#FFFFFF" text="#000066"> … </BODY>
Nangarhar University Computer Science Department 6
What are the basic
HTML tags?

<HTML> [identifies the document as HTML]


<HEAD> Contains
<TITLE>My Library</TITLE> information
</HEAD> about the
HTML
<BODY> document

<P>Content of My Library’s Web Page</P>


</BODY> Contains all information displayed on the browse
</HTML> [ closing tag ]
These tags generally define the basic structure
of a web page
Nangarhar University Computer Science Department 7
What are the basic
HTML tags?

 The basic HTML tags above (written using Notepad


and saved with a file extension .htm) create a simple
web page shown beside it.
Nangarhar University Computer Science Department 8
What are the basic
HTML tags?

 Header tags range from<H1> to <H6>,


<H1> the largest and <H6> is the
smallest.
 The headings’ size shows the hierarchy of
importance on the page’s layout.

<H1> My Library </H1> (page title)


<H2> Mission, Vision and Goals </H2> (main topic)
<H3> Objectives</H3> (subtopic)
Nangarhar University Computer Science Department 9
What are the basic
HTML tags?
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
<H3> Objectives</H3>

Nangarhar University Computer Science Department 10


What are the basic
HTML tags?

Use <CENTER> tag to center


elements on the page
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
Nangarhar University Computer Science Department 11
What are the basic
HTML tags?

<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
Nangarhar University Computer Science Department 12
What are the basic
HTML tags?
 The <P> tag breaks the textual
information on a page and inserts a
single line space, which is useful for
defining and separating paragraphs.

<H2> Mission, Vision and Goals </H2>


<P> MyLibrary aims to be the country's public virtual
library with state-of-the art resources and associated
services, accessible to anyone, anytime, anywhere.
</P>

Nangarhar University Computer Science Department 13


What are the basic
HTML tags?

<P> MyLibrary aims to be the country's


public virtual library with state-of-the art
resources and associated services, available
to anyone, anytime, anywhere. </P>

Nangarhar University Computer Science Department 14


What are the basic
HTML tags?

Use the align attribute of the <P> tag to justify the


paragraph: center, right or left. (left is the default)
<P align=center> MyLibrary aims to be the country's
public virtual library with state-of-the art resources and
associated services, available to anyone, anytime,
anywhere. </P>
Nangarhar University Computer Science Department 15
HTML basic tags

 Format text with tags that make the text bold


<B> and/or italic <I> to put emphasis on some
points

<P> <B> MyLibrary </B> aims to be the country's


<I> public virtual library </I> with state-of-the art
resources and associated services, available to
anyone, anytime, anywhere. </P>

Nangarhar University Computer Science Department 16


HTML basic tags

 Tags can be nested as long as the first tag


open is the last tag closed with and end tag.
<P> <B> MyLibrary </B> aims to be the country's
<B> <I> public virtual library </I> </B> with state-
of-the art resources and associated services, available
to anyone, anytime, anywhere. </P>

Nangarhar University Computer Science Department 17


What are the basic
HTML tags?

 Break tag <BR> forces line breaks without


creating a vertical space, which should be
used only for reasons of design or content

<H3> Library Hours </H3>


<P> Monday – Friday </BR>
8:00 a.m. – 5:00 p.m. <P>
<P> *Open on Holidays </P>
Nangarhar University Computer Science Department 18
What are the basic
HTML tags?
<H3> Library Hours </H3>
<P> Monday – Friday <BR>
24 Hours Open </P>
<P> *Open on Holidays </P>

Nangarhar University Computer Science Department 19


What are the basic
HTML tags?
 Horizontal rule <HR> tag separate major
sections of the page by inserting a bar in
between paragraphs or sections
 Using one or more of its attributes could
vary its appearance

<HR width=50% size=3 align=center>


Nangarhar University Computer Science Department 20
Exercise 1

 Create a new folder in C:\ directory and name it as


mod6_html
 Open NotePad or any text editor
 Use the basic tags discussed to create a basic web
page about your library, mission, vision and goals,
history, collections, services, etc. (You can copy and
paste the information if they are already in
electronic form. Supply the necessary tags in the
appropriate place.)
 Save the file as about.htm in the created directory
c:\mod6_html
 Test / View / Edit using your browser
Nangarhar University Computer Science Department 21
What are other HTML
formatting tags?

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Nangarhar University Computer Science Department 22


HTML Formatting tags

 HTML also supports lists; unordered lists,


ordered lists and, definition list, which is
sometimes the best way to present information
 Unordered list is a bulleted list that uses <UL>
and <LI> tags
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>
Nangarhar University Computer Science Department 23
What are other HTML
formatting tags?
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>

Nangarhar University Computer Science Department 24


What are other HTML
formatting tags?

 Ordered list is a numbered list that uses


<OL> and <LI> tags
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>

Nangarhar University Computer Science Department 25


What are other HTML
formatting tags?
<H3> Library Resources </H3>
<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>

Nangarhar University Computer Science Department 26


What are other HTML
formatting tags?
 Lists can be nested, one within another
<OL>
<LI> Library Collections </LI>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL> <LI> CD-ROMs </LI>
<LI> Abstracts & Indexes </LI>
</UL>
</OL> Nangarhar University Computer Science Department 27
What are other HTML
formatting tags?
<OL>
<LI> Library Collections </LI>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL> <LI> CD-ROMs </LI>
<LI> Abstracts &
Indexes </LI>
</UL>
</OL>

Nangarhar University Computer Science Department 28


What are other HTML
formatting tags?
 The list item type attribute can be used to change the
bullets in <UL> disc, square or circle, and in <OL>
from number 1 to lowercase (a) or uppercase (A)
letters, or lowercase (i) or uppercase (I) roman
numerals
<OL type=I>
<LI> Library Collections </LI>
<UL type=square> <LI> Books </LI>
<LI> Journals </LI> </UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL type=disc> <LI> CD-ROMs </LI>
<LI>Abstracts & Indexes</LI> </UL>
</OL>
Nangarhar University Computer Science Department 29
What are other HTML
formatting tags?
<OL type=I>
<LI> Library Collections </LI>
<UL type=square> <LI> Books </LI>
<LI> Journals </LI> </UL>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI>
<UL type=disc> <LI> CD-ROMs </LI>
<LI>Abstracts & Indexes</LI> </UL>
</OL>

Nangarhar University Computer Science Department 30


What are other HTML
formatting tags?
 Definition list allows listing of terms and
definitions. Uses <DL>, <DT> for the
term and <DD> for definition.
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership card
to avail of the library services and privileges. </DD>
</DL>
Nangarhar University Computer Science Department 31
What are other HTML
formatting tags?
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership card
to avail of the library services and privileges. </DD>
</DL>

Nangarhar University Computer Science Department 32


List Tag Description

Tag 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

Nangarhar University Computer Science Department 33


Exercise 2

 Create two more web pages, about your


library collections and library services (one
web page for each) using the list tags and
other tags discussed earlier.
 Save and name them accordingly,
collection.htm and services.htm, in the
created directory c:\mod6_html
 Test / View / Edit using your browser
 Always save file after editing before viewing
the page
Nangarhar University Computer Science Department 34
How to add color

 The color of the background and text elements


of the web page can vary using attributes of the
<BODY> and <FONT> tag
 To specify color, HTML uses the color names
(16 colors supported by most browsers), or the
numerical equivalent in RGB hexadecimal
codes that correspond to over 14 million
possible color, shades, hues and tints
White #ffffff Black #000000 Blue #0000ff
Red #ff0000 Yellow #ffff00 Green #00800
Nangarhar University Computer Science Department 35
How to add color

< BODY bgcolor=“#ffffff” text=“#000000”


link=“#0000cc” vlink=“#00ff00” alink=“#ff0000”
>
 bgcolor sets the background color of the
whole page
 text defines the text color for the page
 link - unvisited link color
 vlink - visited link color
 alink - activated link color

Nangarhar University Computer Science Department 36


How to add color

< BODY
bgcolor=“#8A2BE2”
text=“#ffffff”
link=“#0000ff”
vlink=“#00ff00”
alink=“#ff0000” >
< BODY
bgcolor=“green”
text=“white”
link=“#ffffff”
vlink=“#00ff00”
alink=“#ff0000” >
Nangarhar University Computer Science Department 37
How to add color

 Color attribute of <FONT> tag sets the color of


selected text within the page overriding the
text attribute on the <BODY> tag.
<CENTER>
<FONT color=“#000000"><H1> My Library </H1>
</FONT>
<H2> Mission, Vision and Goals </H2></CENTER>
<FONT color=“#ffff00”>
<P> <B> MyLibrary </B> aims to be the country's
<B> <I> public virtual library </I> </B> with state-of-
the art resources and associated services, available to
anyone, anytime, anywhere. </P>
</FONT> Nangarhar University Computer Science Department 38
How to add color

<CENTER>
<FONT color=“#000000"><H1> My Library </H1> </FONT>
<H2> Mission, Vision and Goals </H2></CENTER>
<FONT color=“#ffff00”>
<P> <B> MyLibrary </B> aims to be the country's <B> <I>
public virtual library </I> </B> with state-of-the art resources
and associated services, available to anyone, anytime,
anywhere. </P>
</FONT>

Nangarhar University Computer Science Department 39


Exercise 3

 Edit the web pages you have created, you


should have three by now: about.htm,
collections.htm and services.htm
 Add color to your page
 Consult with an HTML reference book or the
Internet for the hexadecimal color codes you
can use to add color
 Test / View / Edit / Save in the created
directory c:\mod6_html

Nangarhar University Computer Science Department 40


How to add images

Image and other graphical elements can


be added on the web page through the
<IMG> tag using the src (source)
attribute that points to the image /
graphics

< IMG src=“mylogo.gif” >

Nangarhar University Computer Science Department 41


How to add images

<IMG src=“mylogo.gif”>
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and
Goals </H2> </CENTER>
Nangarhar University Computer Science Department 42
How to add images

<CENTER>
<IMG src=“mylogo.gif”>
<H1> My Library </H1>
<H2> Mission, Vision and
Goals </H2>
</CENTER>

Nangarhar University Computer Science Department 43


How to add images

<IMG src=“mylogo.gif” align=left>


Nangarhar University Computer Science Department 44
How to add images

<IMG src=“mylogo.gif” width=100


height=100 align=left alt=logo>

Nangarhar University Computer Science Department 45


How to add images

<BODY bgcolor=“#000800”
background=marb.jpg >

Nangarhar University Computer Science Department 46


Exercise 4

 Insert images on your web pages


 Test / View / Edit using your browser and
Notepad
 Always save them after editing
 Respect copyright of materials, use original
or free graphical materials for your web
pages

Nangarhar University Computer Science Department 47


How to create hyperlinks

 Hypertext links are created on web pages using the


<A> anchor tag with the HREF (Hypertext
Reference) attribute
 Hyperlinks connect your web pages together and
point to other web documents (build your web site)

<A HREF=“collection.htm”>Library Collection</A>


<A HREF=
“http://www.unesco.org/webworld/portal_bib/”>
UNESCO Libraries Portal </A>
Nangarhar University Computer Science Department 48
How to create hyperlinks

<A HREF=“collection.htm”>
Library Collection</A>

<A HREF=
“http://www.unesco.org/we
bworld/portal_bib/”>
UNESCO Libraries Portal
</A>
Nangarhar University Computer Science Department 49
How to create hyperlinks

 Hyperlinks are also used to connect to graphic


and other media
 Icons and other graphic elements can be used as
the the “trigger’ (object) users click on to jump to
the referred document
<A HREF=“mylibrary.jpg”> MyLibrary </A>
<A HREF “mylibrary.jpg”> <IMG src
“mylibrary_sm.jpg”> </A>
<A HREF “mylibrary.jpg”> <IMG src
“mylibrary_sm.jpg”> </A>
Nangarhar University Computer Science Department 50
How to create hyperlinks

<A HREF=“mylibrary.jpg”> MyLibrary </A>

<A HREF “mylibrary.jpg”> <A HREF=“mylibrary.jpg”>


<IMG src “mylibrary_sm.jpg”> <IMG src=“mylibrary_sm.jpg”
</A> border=0> </A>

Nangarhar University Computer Science Department 51


How to create hyperlinks

 A named anchor inside an HTML document


 Hyperlinks are also used to connect to section
in same document

<A HREF=“#tips”> See chapter 10 </A>


<A NAME=“tips”> Chapter </A>

<A HREF=“#top”> top of page </A>

Nangarhar University Computer Science Department 52


How to create hyperlinks

Link to e-mail address can be


created to automatically open the
e-mail program on the system
supplying the address
Contact
<a HREF=“mailto:me@mylibrary”>[email protected]</a>

Nangarhar University Computer Science Department 53


Exercise 5

 Create a new web page that will serve as your


library’s home page
 Name it as index.htm
 Create links to the other web pages you have
created
 Create a link back to index.htm on the other web
pages
 Place contact information at the bottom of each
page (e-mail, tel no#, etc)
 Add more elements, pictures etc…
 View / Test the links / Edit and save
Nangarhar University Computer Science Department 54
Activity 3.2

 Read the following articles


 Dave Raggett. Getting started with HTML
– http://www.w3.org/MarkUp/Guide/
 Selena Sol. Introduction to Web Design
– http://www.wdvl.com/Authoring/HTML/
Tutorial/
 NCSA: A Beginner's Guide to HTML
– http://archive.ncsa.uiuc.edu/General/
Internet/WWW/HTMLPrimerAll.html
 Writing for the Web: A Primer for Librarians
– http://bones.med.ohio-state.edu/eric/papers/
primer/toc.html
Nangarhar University Computer Science Department 55
Activity 3.2

 Submit electronic copies of the web


pages created using the lesson:
about.htm, collections.htm, services.htm
and index.htm. The links on the web
pages should be working.

Nangarhar University Computer Science Department 56


HTML Tables
HTML Tables

 Tables represent tabular data

– A table consists of one or several rows

– Each row has one or more columns

 Tables comprised of several core tags: <table></table>:

begin / end the table


<tr></tr>: create a table row
<td></td>: create tabular data (cell)
 Tables should not be used for layout. Use CSS floats and

positioning styles instead


58
HTML Tables (2)

<table> ... </table>


Start and end of a table

<tr> ... </tr>


Start and end of a row

<td> ... </td>


Start and end of a cell in a row

59
Simple HTML Tables – Example

<table cellspacing="0" cellpadding="5">


<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
60
Simple HTML Tables – Example
(2)

<table cellspacing="0" cellpadding="5">


<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
61
Complete HTML Tables

 Table rows split into three semantic sections:


header, body and footer
– <thead> denotes table header and contains <th>
elements, instead of <td> elements
– <tbody> denotes collection of table rows that contain
the very data
– <tfoot> denotes table footer but comes BEFORE the
<tbody> tag
– <colgroup> and <col> define columns (most often
used to set column widths)
62
Complete HTML Table:
Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup> th
<thead>
header
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body
(data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
63
Complete HTML Table:
By default, header text
Example (2)
is bold and centered.
<table> table-full.html
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Although the 1.2</td></tr>
<tr><td>Cell 1.1</td><td>Cell footer is
before the data
<tr><td>Cell 2.1</td><td>Cell in the
2.2</td></tr>
</tbody> code, it is displayed
</table> last
64
Nested Tables
nested-
 Table data “cells” (<td>) can contain
tables.html

 nested tables (tables within tables):


<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
65
Cell Spacing and Padding
Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty


empty space space around the
between cells cell content

66
Cell Spacing and Padding –
Example
table-
cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
67
Cell Spacing and Padding –
Example (2)
table-
cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
68
Column and Row Span
 Table cells have two important attributes:

 colspan  rowspan

colspan="1 colspan="1 rowspan="2 rowspan="1


" " " "
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]

colspan="2" rowspan="1
"
 Defines how many  Defines how many
columns the cell rows the cell
occupies occupies
69
Column and Row Span –
Example

table-colspan-rowspan.html

<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>

70
Column and Row Span –
Example (2)
table-colspan-rowspan.html

<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
Cell[1,1
<td rowspan="2" Cell[2,1]
>Cell[2,2]</td>
]
<td>Cell[3,2]</td></tr>
Cell[1,2
<tr class=“3"><td>Cell[1,3]</td> Cell[3,2
]
<td>Cell[2,3]</td></tr>
Cell[2,2 ]
</table>
Cell[1,3 ] Cell[2,3
] ]

71
Table Tag

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
Cell spacing Defines a space between cells of table
Define a space between cell data and
Cel padding
cell border
Bg color Defines a color for background of table
Border Defines a size for border of table
<tfoot> Defines a table footer

Nangarhar University Computer Science Department 72


HTML Forms

Entering User Data from a


Web Page
HTML Forms

 Forms are the primary method for gathering data


from site visitors
 Create a form block with
The “method" attribute tells
<form></form> how the form data should be
 Example: sent – via GET or POST request

<form name="myForm" method="post"


action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
74
Form Fields

 Single-line text input fields:


<input type="text" name="FirstName"
value="This is a text field" />
 Multi-line textarea fields:

<textarea name="Comments">This is a multi-


line text field</textarea>
 Hidden fields contain data not shown to the user:
<input type="hidden" name="Account"
value="This is a hidden text field" />

– Often used by JavaScript code


75
Fieldsets
 Fieldsets are used to enclose a group of related form fields:
 The <legend> is the fieldset's title.

<form method="post" action="form.aspx">


<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>
76
Form Input Controls

 Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />

 Radio buttons:
<input type="radio" name="title"
value="Mr." />
 Radio buttons can be grouped, allowing only
one to be selected from a group:
<input type="radio" name="city" value="Lom"
/>
<input type="radio" name="city"
value="Ruse"
77 />
Other Form Controls

Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />
78
Other Form Controls (2)

 Reset button – brings the form to its initial state


<input type="reset" name="resetBtn"
value="Reset the form" />
 Image button – acts like submit but image is displayed and
click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
 Ordinary button – used for Javascript, no default action

<input type="button" value="click me" />

79
Other Form Controls (3)

 Password input – a text field which masks the entered


text with * signs
<input type="password" name="pass" />
 Multiple select field – displays the list of items in
multiple lines, instead of one
<select name="products"
multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value
3">speakers</option>
80
Other Form Controls (4)

 File input – a field used for uploading files


<input type="file" name="photo" />

– When used, it requires the form element to have a


specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

81
Labels

 Form labels are used to associate an explanatory text


to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
 Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are checked)
 Labels are both a usability and accessibility feature
and are required in order to pass accessibility
validation.

82
HTML Forms – Example

<form method="post" action="apply-now.php">


form.html
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select> <br>
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
83
HTML Forms – Example (2)
form.html (continued)

Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label> <br>
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
84
HTML Forms – Example (3)

form.html
(continued)

85
HTML Forms & Input

Tag Description
<form> Defines a form for user input
<input> Defines an input field
Defines a text-area (a multi-line text input
<textarea>
control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button

Nangarhar University Computer Science Department 86


New HTML5 Form Elements

color range
Date search
datetime-local tel
email time
month url
number week

Nangarhar University Computer Science Department 87


The Form's Action Attribute and
the Submit Button

When the user clicks on the "Submit" button, the content


of the form is sent to another file. The form's action
attribute defines the name of the file to send the content to.
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>

Nangarhar University Computer Science Department 88


Form Attribute

 Name: Name of the form. Used for referencing from


JavaScript
 Action: Name of the resource handling the user
request
 Method: Manner of transferring data
 GET – All user input is sent as Query string
 POST – All user input sent as HTTP

Nangarhar University Computer Science Department 89


Using <DIV> and <SPAN>
Block and Inline Elements
Block and Inline Elements

Block elements add a line break before and


after them
– <div> is a block element
– Other block elements are <table>, <hr>,
headings, lists, <p> and etc.
Inline elements don’t break the text before
and after them
– <span> is an inline element
– Most HTML elements are inline, e.g. <a>
91
Block elements

Nangarhar University Computer Science Department 92


Inline Elements

Nangarhar University Computer Science Department 93


The <div> Tag

 <div> creates logical divisions within a page


 Block style element
 Used with CSS
 Example:

div-and-
span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
94
The <span> Tag

 Inline style element


 Useful for modifying a specific portion of text
– Don't create a separate area (paragraph)
in the document
 Very useful with CSS

span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-
size:32px; font-weight:bold">TEST</span>.</p>
95
HTML Graphics

The web has always been a visual medium, HTML


developers were limited to CSS and JavaScript in order to
produce animations or visual effects for their websites, or
they would have to rely on a plugin like Flash.

With the addition of technologies like the canvas element,


Web GL, and SVG images, this is no longer the case! In fact,
there are many new features which deal with graphics on the
web.

Nangarhar University Computer Science Department 96


What is SVG?

SVG stands for Scalable Vector Graphics


SVG is used to define graphics for the Web
SVG is a W3C recommendation

The HTML <svg> element is a container for SVG


graphics.
SVG has several methods for drawing, boxes, circles,
text, and graphic images.

Nangarhar University Computer Science Department 97


SVG Circle

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="green
" stroke-width="4“ fill="yellow" />
Any message if browser doesn't support the
SVG tag
</svg>

Nangarhar University Computer Science Department 98


SVG Rectangle

<svg width="400" height="100">


<rect width="400" height="100" style="fill:rgb(0,0
,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

opacity: 0.5 or 1

Nangarhar University Computer Science Department 99


SVG Star

<svg width="300" height="200">


<polygon points="100,10 40,198
190,78 10,78 160,198"
style="fill:lime; stroke:purple;stroke-
width:5;fill-rule:evenodd;" />

Sorry, your browser does not support


inline SVG.
</svg>

Nangarhar University Computer Science Department 100


Inline Frames: <iframe>

iframe-
demo.html
<iframe name="iframeGoogle" width="600"
height="400" src=“http://www.google.com"
frameborder="yes"
scrolling="yes"></iframe>
Inline frames provide a way to show
one website inside another website:
101
HTML Multimedia

Multimedia comes in many different formats. It can be


almost anything you can hear or see.
Examples: Images, music, sound, videos, records,
films, animations, and more.
Web pages often contain
multimedia elements of different types
and formats.

Nangarhar University Computer Science Department 102


Playing Videos in HTML5

Before HTML5, a video could only be played in a browser with a


plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a
video in a web page.
<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 <source> element allows you to specify alternative video
files which the browser may choose from.
The browser will use the first recognized format.

To start a video automatically use the autoplay attribute:


Nangarhar University Computer Science Department 103
HTML5 Audio

The HTML5 <audio> element specifies a standard way


to embed audio in a web page.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> The <source> element allows you to specify alternative
video files which the browser may choose from.
The browser will use the first recognized format.

To start a video automatically use the autoplay attribute:


Nangarhar University Computer Science Department 104
Playing a YouTube Video in HTML

•Upload the video to YouTube


•Take a note of the video id
•Define an <iframe> element in your web page
•Let the src attribute point to the video URL
•Use the width and height attributes to specify the
dimension of the player
•Add any other parameters to the URL

<iframe width="420" height="315"


src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Nangarhar University Computer Science Department 105
YouTube Autoplay

video start playing automatically when a user visits that


page by adding a simple parameter to your YouTube URL
Value 0 (default): The video will not play automatically when the
player loads.
Value 1: The video will play automatically when the player loads.

<iframe width="420" height="315"


src="https://www.youtube.com/embed/tgbNymZ7vqY?
autoplay=1">
</iframe>
Nangarhar University Computer Science Department 106
Playing a YouTube Video in HTML ….

YouTube Loop
Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?
playlist=tgbNymZ7vqY&loop=1">
</iframe> YouTube Controls
Value 0: Player controls does not display.
Value 1 (default): Player controls display.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Nangarhar University Computer Science Department 107
HTML Frames
<frameset>, <frame>
HTML Frames

 Frames provide a way to show multiple HTML


documents in a single Web page
 The page can be split into separate views (frames)
horizontally and vertically
 Frames were popular in the early ages of HTML
development, but now their usage is rejected
 Frames are not supported by all user agents
(browsers, search engines, etc.)
– A <noframes> element is used to provide content for non-
compatible agents.

109
HTML Frames – Demo
frames.ht
ml
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

 Note the target attribute applied to


the <a> elements in the left frame.
110
Frame Tag

Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
Defines a noframe section for browsers that do
<noframes>
not handle frames
Scrolling It have tree options (auto, yes and no)
Border color Ste the color for border of frame
It takes two values 1 or 0 for to display the border
Border
of frame
This option prevent the user from resizing of
Noresize
frame

Nangarhar University Computer Science Department 111


Values of the target Attribute

Value Name Notes


Opens the linked document in a new tab
_blank
or window.
Opens the link in the parent frame.
_parent
Frames are deprecated in HTML5.
_self Open the link in the current frame.
Opens the link in the top-most frame.
_top
Frames are deprecated in HTML5.
frame name Opens the link in the named frame.

Nangarhar University Computer Science Department 112


HTML Meta

Some search engines on the WWW will use the name and content
attributes of the meta tag to index your pages.
This meta element defines a description of your page:
<meta name="description" content="Free Web tutorials on HTML,
CSS, XML, and XHTML">
This meta element defines keywords for your page:
<meta name="keywords" content="HTML, DHTML, CSS, XML,
XHTML, JavaScript, VBScript">
The intention of the name and content attributes is to describe the
content of a page.

Nangarhar University Computer Science Department 113


HTML Events

New to HTML 4.0 is the ability to let HTML events trigger actions in
the browser, like starting a JavaScript when a user clicks on an HTML
element. Below is a list of attributes that can be inserted into HTML
tags to define event actions.
•Window Events
Only valid in body and frameset elements.

Attribute Value Description


onload script Script to be run when a document loads
onunload script Script to be run when a document unloads

Nangarhar University Computer Science Department 114


Form Element Events
Only valid in form elements.

Attribute Value Description


onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus

Nangarhar University Computer Science Department 115


HTML Event Attribute

Keyboard Events Attribute Value Description

onkeydown script What to do when key is pressed


onkeypress script What to do when key is pressed and released

Mouse Events onkeyup script What to do when key is released

Attribute Value Description

onclick script What to do on a mouse click


ondblclick script What to do on a mouse double-click
onmousedown script What to do when mouse button is pressed
onmousemove script What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an element
onmouseover script What to do when mouse pointer moves over an element
onmouseup script What to do when mouse button is released

Nangarhar University Computer Science Department 116


Font tag

The <font> tag is deprecated in the latest versions of


HTML (HTML 4 and XHTML).
The World Wide Web Consortium (W3C) has
removed the <font> tag from its recommendations.
In future versions of HTML, style sheets (CSS) will
be used to define the layout and display properties of
HTML elements.

Nangarhar University Computer Science Department 117


Font tag

By this tag you can specify both the size and the type of the
browser output
Example:
<font size="2" face="Verdana">
This is a paragraph.
</font>
<font size="3" face="Times">
This is another paragraph.
</font>

Nangarhar University Computer Science Department 118


Font attribute

Attribute Example Purpose

size="number" size="2" Defines the font size

size="+number" size="+1" Increases the font size

size="-number" size="-1" Decreases the font size

face="face-name" face="Times" Defines the font-name

color="color-value" color="#eeff00" Defines the font color

color="color-name" color="red" Defines the font color

Nangarhar University Computer Science Department 119


Marquee

By marquee tag we can move text, movie, image and


another object
Structure:
<marquee> text to be moved </marquee>

Marquee attribute

Nangarhar University Computer Science Department 120

You might also like