WP - Chapter Two
WP - Chapter Two
WP - Chapter Two
1
It is the language used to write Web documents.
like natural human languages, it contains all the rules (grammar)
and codes (words and phrases) necessary for the creation of a
usable document
It uses standard ASCII characters and contains formatting codes,
called commands or tags,
» It describe the structure of a document, provide font and graphics
information and contain hyperlinks to other web pages and internet
resources.
An HTML file must have an htm or HTML file extension.
It can be created using a simple text editor.
2
HTML: A Structured Language
HTML is a language for describing web pages.
HTML is not a programming language, it is a markup language,
which is used to design web pages.
A markup language is a set of markup tags
The purpose of the tags are to describe page content
A markup language such as HTML is simply a collection of codes
(elements in this case) that are used to indicate the structure and
format of a document.
The codes have meaning that is interpreted by a formatting
program, often a Web browser, which renders the document.
HTML documents (web pages) contain HTML tags, plain text and
HTML elements.
3
HTML Tags
HTML tags are keywords (tag names) 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.
The end tag is written like the start tag, with a forward slash before the tag
name.
Start and end tags are also called opening tags and closing tags.
Eg. <tagname>content</tagname>
HTML Elements
HTML element is everything between the start tag and the end tag,
including the tags:
The markup tags tell the web browser how to display the page.
4
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet
Explorer, Firefox, Safari) is to read HTML documents and display
them as web pages.
The browser does not display the HTML tags, but uses the tags to
interpret the content of the page:
5
HTML Page Structure
Below is a visualization of an HTML page structure
Write the following HTML code on notepad
<!DOCTYPE html>
<html>
<head><title>page title</title></head>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Finally save the above code as .html file extension and then run the file on your
browser.
6
HTML Editor
7
HTML Elements……….
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
It defined with the <h1> to <h6> tags.
Example
<h1>This is a heading one</h1>
<h2>This is a heading two</h2>
<h3>This is a heading three</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> </p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Images
HTML images are defined with the <img> tag.
<img src="C:\Users\pc\Desktop\article02.jpg" width="104" height="142"> 8
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML
elements).
HTML documents consist of nested HTML elements.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.
9
HTML Example Explained
<font> - element
⚫ family – attribute
⚫ color – attribute
⚫ size - attribute
<p> - element,
✓ align - attribute
o center
o right
o left
⚫ Attributes have two parts
− Name – the property to be set eg. face, color
− Value – is the value of the property eg. Arial, 71ec90
<font face="arial" color="cc2400"> An element should never have two
attributes of the same name!! it will ignore the second one.
14
HTML Tip: Use Lowercase Attributes
Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C) recommends
lowercase attributes/attribute values in their HTML 4
recommendation.
HTML Lines
The <hr>tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
15
HTML Headings
HTML headings are titles or subtitles that you want to display on
a webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> 16
HTML Comments
17
HTML Output - Useful Tips
18
Cont.….
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph contains a lot of spaces in the source code,
but the browser ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window.
If you resize the browser window, the number of lines in this paragraph will change.
</p> </body></html> 19
Line Breaks
Use the <br> tag if you want a line break (a new line)
without starting a new paragraph:
The <br> element is an empty HTML element. It has no
end tag.
<p> This is <br> a para <br> graph with line breaks </p>
20
HTML Text Formatting
21
Text Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<big> To display larger text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text from documents
<mark> Defines text that should be marked or highlighted
<s> strikethrough (erasing, canceling, removing text)
Note: the above listed tags have start tag and end tag
22
Formatting Example
<html>
<body>
<p>The following word uses a
<b>bold</b> typeface.</p>
<p>The following word uses a
<strong> strong </strong> typeface</p>
<p>The following word uses a
<i>italic</i> typeface</p>
<p>The following word uses a
<em> Emphasized</em> typeface</p>
<p>The following word uses a
<mark>mark</mark> typeface</p>
<p>The following word is
<u> underlined</u> </p>
<p>The following word uses a
<s>strikethrough</s>.</p>
<p>The following word has
<big>larger</big> fonts.</p>
<p>The following word has
<small>smaller</small> fonts.</p>
<p>Alemu got the 1
<sup>st</sup> prize in Maths club.<p>
<p>Addition of (1001)
<sub>2</sub> and (0001)<sub>2</sub> ?</p>
</body>
</html>
23
Abbreviation and Acronyms Element
Note: when you put the cursor on it, it will display the abbreviated word in full
version.
24
Citation
⚫ The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem,
a song, a movie, a painting).
⚫ <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Defining terms
⚫ Used when defining instance of a word
<p><dfn>Script typefaces</dfn>
are based on handwriting.</p>
Inserted and deleted text
The ins and del elements are used to mark up changes to the text and indicate
parts of a document that have been inserted or deleted
<html>
<body>
<p>The scientific director of MAU university is: </p>
<del title="retired">Mr somebody</del>
<ins>Dr someone</ins>
</body></html> 25
HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page
to page.
These pages often include links to other Web sites or other pages in the same site.
A link is specified using the anchor <a> element.
Anything between the opening <a> tag and the closing </a> tag becomes part of the
link a user can click in a browser.
To link to another document, the opening <a> tag must carry an attribute called href,
whose value is the page you are linking to.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump
to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
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
26
HTML Link Syntax
27
Linking to a website
⚫ To link to a different site you need to write the URL between the
<a> and </a> tags - source anchor,
<body>
You can also <a href="http://www.google.com/">search Google
</a>?
</body>
⚫ You can include title attribute to links – when the mouse is over
the link additional information could be delivered to the user.
<body>
<a href="http://www.Google.com/" title="Search the Web with
Google">Google</a> is a very popular search engine.
</body>
28
Using image as a link
29
Linking to E-mail Addresses
30
HTML Tables
Are used to display tabular data
Tables are made up of cells, arranged into rows.
<table></table> marks the start and end of table contents
<tr></tr> marks the start and end of each table row
<td></td> marks the start and the end of the contents of a data cell
A table row can also be divided into table headings with the <th> tag.
<caption></caption> formats text to appear as a table
Each cell is then written inside the row element using a <td> element for “table
data” and <th> for “table headers,”
<table border="1">
<tr>
<td>row 1, column 1 </td>
<td>row 1, column 2 </td>
</tr>
<tr>
<td>row 2, column 1 </td>
<td>row 2, column 2 </td>
</tr> 31
Table Headers
❑ <TH> tag - Defines a table header cell.
❑ Browsers generally display the contents of the header cells in bold, and
centered.
❑ Same attributes as the <TD> tag.
In the code fragment below how many columns and rows are there?
<html>
<head><title>Image link</title>
<head>
<body>
<table border=“1”; style="width:50%;
background-color:lightblue;">
<caption> Students Result </caption>
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Ayele</td> <td> 86</td> </tr>
<tr> <td> Kebede</td> <td> 65</td> </tr>
</table></body></html> 32
Spanning Cells
⚫ is the stretching of a cell to cover several rows or columns
⚫ You make a header or data cell span by adding the colspan or rowspan
attributes
⚫ Column spans, created with the colspan attribute in the td or th
element.
⚫ Row spans ,created with the rowspan in the td or th element
− Example :
<table border="1">
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td> Saturated Fat (g) </td>
<td> Unsaturated Fat (g) </td>
</tr>
</table>
33
Exercise
34
Row spans
⚫ Row spans, created with the rowspan attribute
− cause the cell to span downward over several rows.
Example:
<table border="2">
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
35
</table>
Exercise
36
The align attribute
37
Cell Padding and Spacing
⚫ By default, cells are sized just large enough to fit their contents
⚫ Cell padding is the amount of space held between the contents of the cell
and the cell border.
⚫ if you don’t specify any cell padding, the cells will have the default value of
one pixel of padding.
− Example:
<table border="1" cellpadding="15">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table> 38
width and height attributes
39
Animated Text
40
The behavior, direction, and loop attributes
41
The scrollamount and scrolldelay attributes
42
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
❑ There are a number of tags for building lists.
❑For purpose of improving the readability of the text.
❑ Depending on the way the list items are displayed, lists may be divided
into three types:
❑ Unordered list(ul)- This will list items using plain bullets (there is no
special order between items)
❑ Ordered list (ol)- This will use different schemes of numbers to list
your items.
Items occur in a particular order, such as step-by-step instructions or
driving directions
❑ Definition list(dl)- This arranges your items in the same way as they are
arranged in a dictionary 43
43
HTML Lists…….
An Unordered List: An Ordered List:
Item 1. First item
Item 2. Second item
Item 3. Third item
Item 4. Fourth item
Unordered HTML List
▪ An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
▪ Used to display a set of related items that appear in no particular
order.
▪ The list items will be marked with bullets (small black circles) by
default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> 44
Unordered HTML List - Choose List Item Marker
Disc Square
<ul style="list-style-type:square">
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Coffee</li> <li>Tea</li>
<li>Tea</li> <li>Milk</li>
<li>Milk</li> </ul>
</ul> None
Circle <ul style="list-style-type:none">
<li>Coffee</li>
<ul style="list-style-type:circle"> <li>Tea</li>
<li>Coffee</li> <li>Milk</li>
<li>Tea</li> </ul>
<li>Milk</li>
</ul>
45
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
Numbered or ordered lists are used when the sequence of the
items is important.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
46
Ordered HTML List - The Type Attribute
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
47
</ol>
Ordered HTML List - The Type Attribute
52
The <input> Element
53
Text Input type
54
Radio Button Input type
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices:
Example
<form>
<input type="radio" name="gender" value="male" checked>
Male<br>
<input type="radio" name="gender" value="female">
Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
55
The Name Attribute…..
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will
not be sent at all.
This example will only submit the "Last name" input field:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value=“Abebe"><br>
<br>
<input type="submit" value="Submit">
</form> 56
HTML Form Elements……..
58
Labels
⚫ It is used to associate descriptive text with its respective form field.
⚫ Each label element is associated with exactly one form control.
⚫ There are two ways to use it.
1) implicit association, nests the control and its description within a label
element:
<label>Male: <input type="radio" name="gender" value="M" /></label>
<label>Female: <input type="radio" name="gender" value="F" /></label>
2) explicit association, matches the label with the control's id reference, The for
attribute tells which control the label is for.
⚫ <label for="form-login-username">Login account:</label>
<input type="text" name="login" id="form-login-username" />
<label for="form-login-password">Password:</label>
<input type="password" name="password" id="form-login-password"/>
59
Fieldset and legend
⚫ fieldset element is used to indicate a logical group of form controls.
⚫ A fieldset may also include a legend element that provides a caption for the
enclosed fields.
<fieldset>
<legend>Customer Information</legend>
<ol>
<li><label>Full name: <input type="text" name="name" /></label></li>
<li><label>Email: <input type="text" name="email" /></label></li>
<li><label>State: <input type="text" name="state" /></label></li>
</ol>
</fieldset>
<fieldset>
<legend>Mailing List Sign-up</legend>
<ul>
<li><label>Add me to your mailing list <input type="radio"
name="list" value="yes" checked="checked" /></label></li>
<li><label>No thanks <input type="radio" name="list" value="no" />
60
Single-line text field attribute
❖ used for entering a single word or line of text
syntax : <input type="text" />
Example:
<li><label for="form-city">City:</label>
<input type="text" name="city" value="Your Hometown" size="25"
maxlength="50" id="form-city" /></li>
value attribute: specifies default text that appears in the field when the form is
loaded. When you reset a form, it returns to this value.
Size
⚫ By default, browsers display a text-entry box that is 20 characters wide, but
you can change the number of characters using the size attribute. eg. size="25"
maxlength
⚫ By default, users can type an unlimited number of characters in a text field
regardless of its size.
⚫ You can set a maximum character limit using the maxlength attribute. Eg
61
maxlength="50”
Multiline text entry field attributes
Syntax: <textarea>...</textarea>//used for entering multiple line
of words.
Example:
<li><label for="form-entry">Official contest entry:</label> <br/>
<textarea name="contest_entry" rows="5" cols="100" id="form-entry">Tell us
why you love the band in 50 words or less. Five winners will get backstage
passes!</textarea></li>
rows
⚫ Specifies the number of lines of text the area should display. Scrollbars
will be provided if the user types more text than fits in the allotted space.
cols
⚫ Specifies the width of the text area measured in number of characters
62
Input Type Password
<input type="password"> defines a password field:
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
63
Input Type Reset
64
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
66
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time
input field, with no time zone.
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Input Type Email
The <input type="email"> is used for input fields that should
contain an e-mail address.
<form>
E-mail:
<input type="email" name="email">
</form>
67
Input Type Month
The <input type="month"> allows the user to select a month and year.
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
❑ You can set restrictions on what numbers are accepted with the min, max, and step
attributes:
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
68
Input Type numbers…..
You can set restrictions on what numbers are accepted with the min, max, and step
attributes:
<form>
Quantity:
<input type="number" name="points" min="0"
max="100" step="10" value="30"> </form>
Input Type Search
❑ The <input type="search"> is used for search fields (a search field behaves like a
regular text field).
Example
<form>
Search Google:
<input type="search" name="google search">
</form>
69
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone
number.
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
71
HTML Input Attributes
The value Attribute
❖ The value attribute specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
The readonly Attribute
❖ The readonly attribute specifies that the input field is read only (cannot be
changed):
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
72
The disabled Attribute
73
The maxlength Attribute
The maxlength attribute specifies the maximum allowed length for the input
field:
Example
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
In maxlength attribute, the input field will not accept more than the allowed
number of characters.
The height and width Attributes
The height and width attributes specify the height and width of an <input
type="image"> element.
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
74
The list Attribute
The list attribute refers to a <datalist> element that contains pre-
defined options for an <input> element.
An <input> element with pre-defined values in a <datalist>:
<form action="">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist></form> 75
The min and max Attributes
The min and max attributes specify the minimum and
maximum values for an <input> element.
The min and max attributes work with the following input
types: number, range, date, datetime-local, month, time
and week.
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
77
The placeholder Attribute
❖ The placeholder attribute specifies a hint that describes the expected value of an
input field (a sample value or a short description of the format).
❖ The hint is displayed in the input field before the user enters a value.
❖ The placeholder attribute works with the following input types: text, search, url, tel,
email, and password.
Example
An input field with a placeholder text:
<input type="text" name="fname" placeholder="First name">
79
The Action Attribute
The action attribute defines the action to be performed when
the form is submitted.
Normally, the form data is sent to a web page on the server
when the user clicks on the submit button.
In the example above, the form data is sent to a page on the
server called "/action_page.php". This page contains a
server-side script that handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current
page.
80
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:
<form action="/action_page.php" method="get“> or:
<form action="/action_page.php" method="post">
When to Use GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page
address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Note: GET must NOT be used when sending sensitive information! GET is best suited
for short, non-sensitive, amounts of data, because it has size limitations too.
When to Use POST?
Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address field.
POST has no size limitations, and can be used to send large amounts of data.
81
Menus
⚫ Menus tend to be more compact than groups of buttons and
checkboxes.
− Pull-down
− scrolling menu
Menu control
<select>...</select>
An option within a menu
<option>...</option>
A logical grouping of options within a menu
<optgroup>...</optgroup>
82
Pull-down menus
⚫ only one item may be selected.
⚫ select element displays as a pull-down menu by default when no size is specified or
if the size attribute is set to 1
Example:
<label for="form-fave">What is your favorite 80s band?<label><br
/>
<select name="EightiesFave" id="form-fave">
<option>The Cure</option>
<option>Cocteau Twins</option>
<option>Tears for Fears</option>
<option>Thompson Twins</option>
<option value="EBTG">Everything But the Girl</option>
</select>
83
Scrolling menu
⚫ specify the number of lines you’d like to be visible using the size attribute.
⚫ The multiple attribute allows users to make more than one selection from the
scrolling list.
<label for="EightiesBands">What 80s bands did you listen to?</label>
<select name="EightiesBands" size="6" multiple="multiple“ for="EightiesBands“ >
<option>The Cure</option>
<option>Cocteau Twins</option>
<option selected="selected">Tears for Fears</option>
<option selected="selected">Thompson Twins</option>
<option value="EBTG">Everything But the Girl</option>
<option>Depeche Mode</option>
<option>The Smiths</option>
<option>New Order</option>
</select>
84
Grouping menu options
You can use the optgroup element to create conceptual groups of
options.
⚫ Example :
87
Attributes of Frameset Element
88
Cont…
⚫ cols: it divides browser window Column wise.
<html><frameset cols=“30%,40%,30%”>
<frame src=“a.html>
<frame src=“b.html”>
<frame src=“c.html”></frameset>
</html>
89
Example
<html>
<head>
<title>Frames example</title>
</head>
<frameset rows="150, *, 100">
<frame src="top_frame.html" />
<frame src="main_frame.html" />
<frame src="bottom_frame.html" />
</frameset>
<noframes>
<body>
This site uses a technology called frames. Unfortunately, your
browser does not support this technology. Please upgrade
your browser and visit us again! </body></noframes></html> 90
Example: Creating Links Between
Frames
− In frame_link.html
<frameset cols="200, *"
<frame src="frames/linksNav.html" />
<frame src="frames/linksMain.html" name="main_page" />
</frameset>
− In linksNav.html
<body>
<h1> Navigation </h1>
<a href="http://www.wrox.com" target="main_page">Wrox Press</a><br />
<a href="http://www.google.com" target="main_page">Google</a><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a><br />
<a href="http://news.bbc.co.uk/" target="main_page">BBC News</a><br />
</body>
− In linksMain.html
<body>
<h3> The links should display here </h3>
</body>
99
Default Target Frames
⚫ Setting a Default Target Frames Using the <base> Element
⚫ You can set a default target frame using the <base>
element in any page that contains links that should
open in another frame.
⚫ The <base> element should carry an attribute called
target, whose value is the name for the frame you
want the content to be loaded into.
⚫ So, you could add the following to links Nav.html to specify a
default frame target:
<head>
<base target="main_page" />
</head>
102