HTML Introduction Guide

Introduction to HTML
Chapter Two
1
17-Mar-20

What is an HTML ?
• HTML stands for Hyper Text Markup Language, is the
predominant markup language for web pages. HTML was invented
in 1990 by a scientist called Tim Berners-Lee.
• HTML provides it means to create a structured document such as
headings, paragraphs, lists, links, quotes, and other so many items.
• Support images and objects (audio and video) to be embedded and
create interactive Web Pages.
• Scripts languages such as JavaScript which are allow to load that
affect to create a dynamic user interactive Web Pages.
• HTML documents can be viewed in browsers such as Internet
Explorer, Mozilla, Opera, and Safari.
• HTML is the "mother tongue" of the browser.
2
17-Mar-20

HTM or HTML Extension?
• When you save an HTML file, you can use either the .htm or
the .html extension. We have used .htm in our examples. It
might be a bad habit inherited from the past when some of
the commonly used software only allowed three letter
extensions.
• With newer software we think it will be perfectly safe to use
.html
3
17-Mar-20

How to Create and View an HTML document?
1. Use an text editor such as Notepad to write the
document.
2. Save the file as filename.html on a PC. This is called
the Document Source.
3. Open any browsers
4. Click on File, Open File and select the filename.html
document that you just created.
5. Your HTML page should now appear just like any
other Web page in browsers.
4
17-Mar-20

Basic HTML Document Format
See what it
looks like:
5
17-Mar-20

HTML Tags
• Special formatting codes (called tags) to adjust fonts,
create bulleted lists, create forms, display images, create
tables, etc.
• HTML document/file is text file containing small mark-up
tags.
• The mark-up tags tells the web browser how to display the
page.
• HTML elements are defined using HTML tags.
• HTML tags are surrounded by the two characters < and >.
• The surrounding characters are called angle brackets.
6
17-Mar-20

Cont’d…..
 Two classes of tags:
 Those which appear in pairs.
<i> Good morning </i>
 Those which appear individually.
<img src=“baby.jpg”>
 Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
 Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
 Tags may be nested
<html> <head>…</head> <body>…</body> </html>
7
17-Mar-20

Cont’d…..
• The first tag in a pair is the start tag and the second tag
is the end tag’
• Most tags come in pairs, exceptions: <br>, <hr> tags
…
• The first tag turns the action on, and the second turns it
off.
• The text between the start and end tags is the element
content.
• HTML tags are not case sensitive, <b> means the same
as <B>.
8
17-Mar-20

Cont’d…..
 Tags are elements of the HTML document used to specify
how the document should be displayed by the browser. In
HTML, each tag has its own specific meaning, which is
(in general) common across all different browsers.
9
17-Mar-20

Some of HTML Tags
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
<!--> Defines a comment
10
17-Mar-20

Cont’d…..
Comment lines
• Comments are included between .
• Comments cannot be nested.
• 
• 
11
17-Mar-20

Why do We Use Lowercase Tags?
 We have just said that HTML tags are not case sensitive:
<B> means the same as <b>. We always use lowercase
tags.
 Why? If you want to follow the latest web standards, you
should always use lowercase tags.
 The World Wide Web Consortium (W3C) recommends
lowercase tags in their HTML 4 recommendation, and
XHTML (the next generation HTML) demands lowercase
tags.
12
17-Mar-20

HTMLAttributes
 HTML elements can have attributes
 Attributes provide additional information about an
element.
 Attributes are always specified in the start tag
 Attributes and attribute values are case sensitive.
 Attributes come in name/value pairs like: name="value“
 Attribute values should always be enclosed in quotes.
13
17-Mar-20

Cont’d…
 Some tags can have one or more (named) attributes to define
some additional characteristics of the tag.
<img src=“baby.jpg”>
<body text=“#FFFFFF” bgcolor=“#0000FF”>
<body text=“white” bgcolor=“blue”>html>
14
17-Mar-20

HTML Text Formatting tags
Tag Description
<u> Define underline text
<b> Defines bold text
<i> Defines italic text
<big> Defines big text
<em> Defines emphasized 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
15
17-Mar-20

<html>
<body>
<u>This text is underline</u><br>
<b>This text is bold</b><br>
<i> This text is italic</i><br>
<strong>This text is strong</strong><br>
<big>This text is big</big> <br>
<em>This text is emphasized</em><br>
<small>This text is small</small><br>
H<sub>2</sub>o<br>
X<sup>2</sup>+1=0
</body></html>
Cont’d…..
16
17-Mar-20

Cont’d…….
Tags Description
<cite> Defines a citation
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<q> Defines a short quotation
<del> Define delete element
<ins> Define inserted element
17
17-Mar-20

• <cite> ……. </cite>:Tells the browser that this is a citation.
Usually displayed in italics.
• Abbreviations and acronyms <abbr> </abbr>;
<acronym></acronym>
• This example demonstrates how to handle an abbreviation or an
acronym.
<html>
<body>
<abbr title="United Nations">UN</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
</body>
</html>
18
17-Mar-20

<address> ……. </address>
• Supplies the contact information of the author.
• Generally formatted in italics, with a line break above
and below.
Example:
<address>
<i>Instructor Abebe Tolosa <br>
Department of Information Science. <br>
Ethiopia, Assosa University.<br>
Email: is@hotmail.com</i><br>
</address>
19
17-Mar-20

• Quotations: This example demonstrates how to handle
quotations.
<html> <body>
<q> This is a long quotation</q>
<body></html>
• Text direction :This example demonstrates how to change the text
direction.
<html>
<body>
<p> If your browser supports bi-directional override (bdo), the
next line will be written from the right to the left (rtl):</p>
<bdo dir="rtl">Here is some Hebrew text</bdo>
</body>
</html>
20
17-Mar-20

Deleted and inserted text
• This example demonstrates how to mark a text that is
deleted or inserted to a document.
<html>
<body>
<p>a dozen is <del>twenty</del>
<ins>twelve</ins> pieces</p>
<p> Most browsers will overstrike deleted text and underline
inserted text.</p>
</body>
</html>
21
17-Mar-20

HTML Character Entities
• Some characters like the < character, have a special meaning in
HTML, and therefore cannot be used in the text.
• To display a less than sign (<) in HTML, we have to use a
character entity.
A character entity has three parts:
1. an ampersand (&),
2. an entity name or a # and
3. an entity number, and finally a semicolon (;).
• To display a less than sign in an HTML document we must
write: < or <
22
17-Mar-20

Cont’d……….
 Advantage of using a name is easier to remember.
 Disadvantage of using a name is not all browsers
support the newest entity names, while the support for
entity numbers is very good in almost all browsers.
 Note: That the entities are case sensitive.
23
17-Mar-20

The Most Common Character Entities:
Result Description Entity Name Entity Number
non-breaking space &nbsp  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Non-breaking Space
• The most common character entity in HTML is the non-breaking
space. Normally HTML will truncate spaces in your text. If you
write 10 spaces in your text HTML will remove 9 of them.
• To add spaces to your text, use the   character entity.
24
17-Mar-20

Some Other Commonly Used Character Entities:
Result Description Entity Name Entity Number
¢ cent ¢ ¢
£ pound £ £
¥ Yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
25
17-Mar-20

HTML Images
 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.
 HTML Images attribute are src, alt, width and height.
 Src stands for "source".
 The value of the src attribute is the URL of the image you
want to display.
26
17-Mar-20

Cont’d….
 The required alt attribute specifies an alternate text for
an image, if the image cannot be displayed.
 The value of the alt attribute is an author-defined text:
 The height and width attributes are used to specify the
height and width of an image.
<img src="url" alt="some_text" width=“number“
height=“number" />
27
17-Mar-20

HTML Hyperlinks (Links)
 HTML uses a hyperlink to link to another document on
the Web.
 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.
 To create a link to another document, by using the <a>
tag. Stands for Anchor ,which means link.
28
17-Mar-20

Link attribute
 href- means hypertext Reference.
 Specifies the destination of a link or it url.
 Supported in all major browsers.
<a href=“url”>link text</a>
29
17-Mar-20

Defining a Table Structure
 The first step to creating a table is to specify the table
structure:
 the number of rows and columns
 the location of column headings
 the placement of a table caption
 Once the table structure is in place, you can start
entering data into the table.
31
17-Mar-20

HTML Table Tags
 Graphical tables are enclosed within a two-sided <table>
tag that identifies the start and ending of the table
structure.
 Each row of the table is indicated using a two-sided <tr>
(for table row).
 Within each table row, a two-sided <td> (for table data)
tag indicates the presence of individual table cells.
32
17-Mar-20

The General Table Syntax
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
two rows
two columns
33
17-Mar-20

Columns within a Table
 HTML does not provide a tag for table columns.
 In the original HTML specifications, the number of
columns is determined by how many cells are inserted
within each row.
 for example, if you have four <td> tags in each
table row, that table has four columns
 Later versions of HTML provide increased support for
controlling the appearance of table columns.
34
17-Mar-20

HTML Structure of a Table
beginning
of the table
structure
first row of
three in the
table
end of the
table
structure
table cells
You do not need to
indent the <td> tags
or place them on
separate lines, but
you may find it easier
to interpret your code
if you do so.
After the table
structure is in place,
you’re ready to add
the text for each cell.
35
17-Mar-20

Creating Headings with the <th> Tag
 HTML provides the <th> tag for table headings.
 Text formatted with the <th> tag is centered within the cell
and displayed in a boldface font.
 The <th> tag is most often used for column headings, but you
can use it for any cell that you want to contain centered
boldfaced text.
36
17-Mar-20

Adding Table Headings to the Table
Text in cells formatted with the <th> tag is bold and centered above
each table column.
37
17-Mar-20

Table attributes
Borders: By default, browsers display tables without
table borders.
 A table border can be added using the border attribute
to the <table> tag.
 The syntax for creating a table border is: <table
border=“value”>
 value is the width of the border in pixels
 The size attribute is optional; if you don’t specify a
size, the browser creates a table border 1 pixel wide.
38 38
17-Mar-20

Tables with Different Borders Values
This figure shows the effect on a table’s border when the border
size is varied.
39
17-Mar-20

Cell Spacing
 The cells pacing attribute controls the amount of space
inserted between table cells.
 Cell spacing refers to the space between the cells.
 The syntax for specifying the cell space is:
<table cells pacing=“value”>
 value is the width of the interior borders in pixels
 the default cell spacing is 2 pixels
40
17-Mar-20

Cell Padding
 To control the space between the table text and the cell
borders, add the cell padding attribute to the table tag.
 Cell padding refers to the space within the cells.
 The syntax for this attribute is:
<table cell padding=“value”>
 value is the distance from the table text to the cell border,
as measured in pixels
 the default cell padding value is 1 pixel
41
17-Mar-20

Tables with Different Cell Spacing and cell padding Values
different cell spacing values
different cell padding values
42
17-Mar-20

Creating Rules
 The rules attribute lets you control how the table gridlines are
drawn (not supported by Netscape)
 The syntax of the rules attribute is: <table rules=“type”>
 type is either “all”, “rows”, “cols”, or “none”
The effect of each of the rules attribute values on a table
43
17-Mar-20

Table Size
 The syntax for specifying the table size is:
<table width=“size” height=“size”>
 size is the width and height of the table as measured in pixels
or as a percentage of the display area.
 To create a table whose height is equal to the entire height of the
display area, enter the attribute height=“100%”.
 If you specify an absolute size for a table in pixels, its size
remains constant, regardless of the browser or monitor settings
used.
44
17-Mar-20

Aligning a Table on the Web Page
 By default, a browser places a table on the left margin of a Web
page, with surrounding text placed above and below the table.
 To align a table with the surrounding text, use the align attribute
as follows: align=“alignment”
 alignment equals “left”, “right”, or “center”
 left or right alignment places the table on the margin of the
Web page and wraps surrounding text to the side
 center alignment places the table in the horizontal center of the
page, but does not allow text to wrap around it
 The align attribute is similar to the align attribute used with the
<img> tag.
 The align attribute is available only with browsers that support
HTML 3.2 or later.
45
17-Mar-20

Aligning the Contents of a Table
 By default, cell text is placed in the middle of the cell,
aligned with the cell’s left edge.
 By using the align and valign attributes, you can
specify the text’s horizontal and vertical placement.
 To align the text for a single column, you must apply
the align attribute to every cell in that column.
46
17-Mar-20

Spanning Rows and Columns
 To merge several cells into one, you need to create a
spanning cell.
 A spanning cell is a cell that occupies more than one row
or column in a table.
 Spanning cells are created by inserting the rowspan and
colspan attribute in a <td> or <th> tag.
 The syntax for these attributes is: rowspan=“value”
colspan=“value”
 value is the number of rows or columns that the cell
spans in the table
47
17-Mar-20

Example of Spanning Rows and Columns
this cell
spans
three
columns
This cell
spans two
columns
and two
rows
This cell
spans three
rows
48
17-Mar-20

A Table Structure with a Row-Spanning Cell
HTML code
resulting table
four table cells in
the first row
only three table cells
are required for the
second and third
rows
49
17-Mar-20

Applying a Background Color
 Table elements support the bgcolor attribute.
 To specify a background color for all of the cells in a
table, all of the cells in a row, or for individual cells, by
adding the bgcolor attribute to either the <table>, <tr>,
<td>, or <th> tags as follows:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
 color is either a color name or hexadecimal color value.
50
17-Mar-20

The border color Attribute
 By default, table borders are displayed in two shades of gray that
create a three-dimensional effect.
 The syntax for the border color attribute is:
<table bordercolor=“color”>
 color is an HTML color name or hexadecimal color value
 Internet Explorer and Netscape apply this attribute differently.
<table border=“10” bordercolor=“blue”>
Internet Explorer Netscape
51
17-Mar-20

Applying a Table Background
 Add a background image to your tables using the background
attribute.
 A background can be applied to the entire table or to a cell.
parch.jpg
<table background=“parch.jpg”> <td background=“parch.jpg”>
52
17-Mar-20

HTML Frames
 To display more than one Web page or html document in
the same browser window.
 each HTML document is called a frame
 each frame is independent of the others
 frame have no body tag
 Frame Tags
<frameset>
 defines a set of frames tag
 defines how to divide the window into frames
 Each frameset defines a set of rows or columns
54
17-Mar-20

Cont’d…
 <frame> defines a sub window (a frame)
 have cols and rows attributes
 Cols-to make vertical frameset
 placed in frameset tag
 to divided frameset in columns
 rows-to make horizontal frameset
 placed in frameset tag
 to divided frameset in to rows
55
17-Mar-20

Cont’d…….
 <frame> defines a sub window (a frame)
 Use for insert the location.
 Src-to specifies the source of the html document
Example
<html><frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
56
17-Mar-20

Nest frame example
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frameset rows="50%,50%">
<frame src="frame_c.htm">
<frame src="frame_c.htm">
</frameset></frameset>
</html>
57
17-Mar-20

What are forms?
 <form> is just another kind of XHTML/HTML tag.
 Forms are used to create (rather primitive) GUIs on Web pages.
 Usually the purpose is to ask the user for information.
 The information is then sent back to the server.
 A form is an area that can contain form elements.
 The syntax is: <form parameters> ...form elements... </form>
 Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc.
 Other kinds of tags can be mixed in with the form elements.
 A form usually contains a Submit button to send the information
in he form elements to the server.
59
17-Mar-20

The <input> tag
 Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of element it is.
 type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
 Other common input tag arguments include:
 name: the name of the element
 id: a unique identifier for the element
 value: the “value” of the element; used in different ways for
different values of type
 Read only: the value cannot be changed
 disabled: the user can’t do anything with this element
 Other arguments are defined for the input tag but have
meaning only for certain values of type . 60
17-Mar-20

Text input
• A text field:
<input type="text" name="textfield" value="with an initial value" />
• A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
• A password field:
<input type="password" name="textfield3" value="secret" />
• Note that two of these use the input tag, but one uses text area
61
17-Mar-20

Buttons
 A submit button:
<input type="submit" name="Submit1" value="Submit" />
 A reset button:
<input type="reset" name="Submit2" value="Reset" />
 A plain button:
<input type="button" name="Submit3" value="Push Me" />
 submit: send data
 reset: restore all form elements to their
initial state
 button: take some action as specified
by JavaScript
• Note that the type is input, not “button” 62
17-Mar-20

Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />
male<br>
<input type="radio" name="radiobutton" value="myValue2”
checked="checked" />female
 If two or more radio buttons have the same name, the user can
only select one of them at a time
 This is how you make a radio button “group”
 If you ask for the value of that name, you will get the value
specified for the selected radio button
 As with checkboxes, radio buttons do not contain any text
63
17-Mar-20

Checkboxes
 A checkbox:
<input type="checkbox" name="checkbox"
value="checkbox" checked="checked">
 type: "checkbox"
 name: used to reference this form element from JavaScript
 value: value to be returned when element is checked
 Note that there is no text associated with the checkbox
 Unless you use a label tag, only clicking on the box itself has
any effect
64
17-Mar-20

Drop-down menu or list
 A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
 Additional arguments:
 size: the number of items visible in the list (default is "1")
 multiple
 if set to "true" (or just about anything else), any number of
items may be selected
 if omitted, only one item may be selected
 if set to "false", behavior depends on the particular browser
65
17-Mar-20

HTML Lists
List Tags
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
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
66
17-Mar-20

Different types of ordered lists
Numbered list Letters list
<html> <body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body> </html>
<html> <body>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body> </html>
67
17-Mar-20

Cont’d………
Lowercase letters list Roman numbers list
<html><body>
<h4>Lowercase letters
list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> </body> </html>
<html><body>
<h4>Roman numbers
list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> </body></html>
68
17-Mar-20

<html><body>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body></html>
69
17-Mar-20

• An unordered list is a list of items. The list items are
marked with bullets (typically small black circles).
• An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
70
17-Mar-20

Cont’d…..
Disc bullets list( ) Circle bullets list(0 )
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li
<body>
<html>
<html><body>
</ul><h4>Circle bullets
list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<body>
<html>
71
17-Mar-20

Square bullets list
Nested list
</body></html>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
This example demonstrates
how you can nest lists.
<html><body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul><li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body> </html>
72
17-Mar-20

The end of Chapter Two
Thank You
73
17-Mar-20

HTML Introduction Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to HTML Introduction Guide

Similar to HTML Introduction Guide (20)

More from FkdiMl

More from FkdiMl (7)

Recently uploaded

Recently uploaded (20)

HTML Introduction Guide