HTML Lecture 2
HTML Lecture 2
and Design :
Getting a Web Site Up and
Running
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?
<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.
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
< 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
<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>
<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>
<BODY bgcolor=“#000800”
background=marb.jpg >
<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
59
Simple HTML Tables – Example
cellspacing cellpadding
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="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
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)
79
Other Form Controls (3)
81
Labels
82
HTML Forms – Example
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
color range
Date search
datetime-local tel
email time
month url
number week
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
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
opacity: 0.5 or 1
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
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
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>
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
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.
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.
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>
Marquee attribute