HTML 4.0

Mohamed Elabnody
HTML 4.0
http://www.Elabnody.net
Elabnody@msn.com
Lecture (3)
2013

Outline
 Introduction to HTML
 HTML Elements
 Basic HTML Tags
 HTML Text Formatting
 HTML Character Entities
 HTML Links
 HTML Frames
 HTML Tables
 HTML Lists
 HTML Forms
 HTML Images
 HTML Backgrounds
 HTML Colors
 HTML Fonts
 HTML Styles
 HTML Head
 HTML Meta
 HTML Scripts
3
www.elabnody.net

3.1 Introduction to HTML
 HTML stands for Hyper Text Markup
Language
 An HTML file is a text file containing small
markup tags
 The markup tags tell the Web browser
how to display the page
 An HTML file must have an htm or html
file extension
 An HTML file can be created using a
simple text editor
www.elabnody.net 4

Document Structure
www.elabnody.net 5
< / HTML>
< HTML >
Header
Body

Example
<html>
<head>
<title>Title of page</title>
<meta_tags/>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
www.elabnody.net 6

3.2 HTML Elements
 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 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
 The text between the start and end tags is the element
content
 HTML tags are not case sensitive, <b> means the same as
<B>
www.elabnody.net 7

3.3 Basic HTML Tags
 Headings
<h1>This is a heading</h1>
 Paragraphs
<p>This is a paragraph</p>
<p>This is another paragraph</p>
www.elabnody.net 8

3.3 Basic HTML Tags
 Line Breaks
<p>This <br> is a para<br>graph with line breaks</p>
 Comments in HTML

www.elabnody.net 9
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule

3.4 HTML Text Formatting
 Text Formatting Tags
www.elabnody.net 10
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

 "Computer Output" Tags
www.elabnody.net 11
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

 Citations, Quotations, and Definition Tags
www.elabnody.net 12
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

3.5 HTML Character Entities
 Character Entities
www.elabnody.net 13
Result Description Entity Name Entity Number
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
™ trademark ™ ™

3.6 HTML Links
 The Anchor Tag and the Href Attribute
<a href="url">Text to be displayed</a>
<a href="http://www.elabnody.net/">Visit
Elabnody.net!</a>
 The Target Attribute
<a href="http://www.elabnody.com/"
target="_blank">Visit Elabnody.com!</a>
www.elabnody.net 14
Visit Elabnody.net!
opens
elabnody.net
in new window

3.6 HTML Links
 The Anchor Tag and the Name Attribute
 <a name="label">Text to be displayed</a>
 The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>
 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="http://www.elabnody.net/help.html#tips">
 A hyperlink to the Useful Tips Section from
WITHIN the file
<a href="#tips">Jump to the Useful Tips Section</a>
www.elabnody.net 15

3.7 HTML Frames
 HTML Frames
 With frames, you can display more than one Web
page in the same browser window.
 The disadvantages of using frames are:
 The web developer must keep track of more
HTML documents
 It is difficult to print the entire page
 The Frameset Tag
 The <frameset> tag defines how to divide the
window into frames
 Each frameset defines a set of rows or columns
 The values of the rows/columns indicate the
amount of screen area each row/column will
occupy
www.elabnody.net 16

3.7 HTML Frames
 3.7 HTML Frames
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
www.elabnody.net 17
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that
do not handle frames
<iframe> Defines an inline sub window (frame)
Banner
Menu Content
Footer

3.8 HTML Tables
 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).
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
www.elabnody.net 18

3.8 HTML Tables
 Headings in a Table
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th> </tr>
<tr>
<td>row 1, cell 2</td> </tr>
<tr>
<td>row 2, cell 2</td> </tr>
</table>
www.elabnody.net 19

3.8 HTML Tables
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
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a
table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
www.elabnody.net 20

3.9 HTML Lists
 Unordered Lists
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 Ordered Lists
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
www.elabnody.net 21

3.9 HTML Lists
 Definition Lists
<dl>
<dt>HTTP</dt>
<dd> Hyper Text Transfer Protocol </dd>
<dt>HTML</dt>
<dd> Hyper Text Mark-up Language </dd>
</dl>
www.elabnody.net 22
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

3.10 HTML Forms
 HTML Forms are used to select different
kinds of user input.
 A form is defined with the <form> tag.
 Input
 Text Fields
<form>
First name: <input type="text" name="firstname">
<br />
Last name: <input type="text" name="lastname">
</form>
www.elabnody.net 23

3.10 HTML Forms
 Input
 Radio Buttons
<form>
<input type="radio" name="sex" value="male"> Male <br />
<input type="radio" name="sex" value="female"> Female
</form>
 Checkboxes
<form>
<input type="checkbox" name="bike">
I have a bike <br />
<input type="checkbox" name="car">
I have a car
</form>
www.elabnody.net 24

3.10 HTML Forms
 The Form's Action Attribute and the
Submit Button
<form name="input"
action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
www.elabnody.net 25

3.10 HTML Forms
 Form Tags
www.elabnody.net 26
Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input
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

3.11 HTML Images
 The syntax of defining an image:
<img src="url">
 The Alt Attribute
<img src="boat.gif" alt="Big Boat">
www.elabnody.net 27

3.12 HTML Backgrounds
 Backgrounds
<body background="clouds.gif">
<body
background="http://www.elabnody.com/clouds
.gif">
 Bgcolor
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
www.elabnody.net 28

3.13 HTML Colors
 Colors are displayed combining RED,
GREEN, and BLUE light sources.
color = “red” (Browser compatibility issues)
color = “#FF0000”
values vary from 00 to FF (hexadecimal)
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
www.elabnody.net 29
Red
Green
Blue
#FF FF FF

3.13 HTML Colors
 Color Values
www.elabnody.net 30

3.14 HTML Fonts
 The HTML <font> Tag
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times” color=“red”>
This is another paragraph.
</font>
</p>
www.elabnody.net 31

3.15 HTML Styles
 External Style Sheet
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
 Internal Style Sheet
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
www.elabnody.net 32

3.15 HTML Styles
 Inline Styles
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
 Style Tags
www.elabnody.net 33
Tag Description
<style> Defines a style definition
<link> Defines a resource reference
<div> Defines a section in a document
<span> Defines a section in a document

3.16 HTML Head
 Information Inside the Head Element
 According to the HTML standard, only a few
tags are legal inside the head section. These
are: <base>, <link>, <meta>, <title>, <style>,
and <script>.
www.elabnody.net 34
Tag Description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
<!DOCTYPE> Defines the document type. This tag goes
before the <html> start tag.

3.17 HTML Meta
 keywords for Search Engines
 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">
www.elabnody.net 35

3.18 HTML Scripts
 Insert a Script into HTML Page
 A script in HTML is defined with the <script> tag.
Note that you will have to use the type attribute
to specify the scripting language.
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
www.elabnody.net 36

3.18 HTML Scripts
 JavaScript:
<script type="text/javascript">

</script>
<noscript>Your browser does not support JavaScript!</noscript>
 VBScript:
<script type="text/vbscript">

</script>
<noscript>Your browser does not support VBScript!</noscript>
www.elabnody.net 37

Summary
 This tutorial has taught you how to use
HTML to create your own web site.
 HTML is the universal markup language for
the Web.
 HTML lets you format text, add graphics,
create links, input forms, frames and
tables, etc., and save it all in a text file
that any browser can read and display.
 The key to HTML is the tags, which
indicates what content is coming up.
www.elabnody.net 38

What's Next?
 CSS
 CSS is used to control the style and layout of
multiple Web pages all at once.
 With CSS, all formatting can be removed from
the HTML document and stored in a separate
file.
 JavaScript
 JavaScript can make your web site more
dynamic.
 A static web site is nice when you just want to
show flat content, but a dynamic web site can
react to events and allow user interaction.
www.elabnody.net 39

HTML 4.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML 4.0

Similar to HTML 4.0 (20)

Recently uploaded

Recently uploaded (20)

HTML 4.0