Scribd
Upload
2 views

HTML Chap2

Uploaded by

gadisakarorsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML Chap2

Uploaded by

gadisakarorsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 55

CHAPTER TWO

Web page Development using HTML

1 Tariku Birhanu
HyperText Markup Language (HTML)

 A markup language, i.e. it’s used to markup content.


 Composed of several tags.
 HTML Document
 A text document containing markup tags
 Tags are instructions that are embedded directly into the text of a
document
 The tags tell the browser how to display the document
 Should have an .htm or .html file name extension
 Can be created using a simple text editor
2 Tariku Birhanu
HTML – Document Structure

 An HTML document has the following basic structure:


<html>
<head>
<title>page title</title>
</head>
<body>
</body>
</html>

3 Tariku Birhanu
HTML Elements
 Names enclosed in < and >
 Commonly have a start tag and end tag
 Start tag format: <tag_name>
 End tag format: </tag_name> [ note the / after < ]
 E.g. <strong>bold text</strong>
 Some tags may not have end tags
 (uppaired tag/or standalone tag)
 E.g. <br>
 Tags may have attributes(additional information supported by tags)
 <tag_name attr1=“val1” attr2=“val2” …>…</tag_name>
 E.g. <font face=“arial” size=“9”>Hello</font>
 Not case sensitive

4 Tariku Birhanu
HTML Tags
 html
 everything in the document should be within <html> &</html>
 head
 contains information which is not displayed in the browser
display area
 may contain other tags in it
 format: <head>…</head>
 title
 sets the title of the web page to be displayed in the browser’s title
bar.
 found within the <head> tag.
 format: <title>…</title>
5 Tariku Birhanu
HTML Tags (cont’d)
 body
 contains the visible part of the web page
 displayed in the display area of the browser
 contains several other tags and content in it
 format: <body>…</body>
 attributes:
 bgcolor=“color” , background color. It changes the default
background color
 background=“img url” , it specifies the name of the image file that
will be used as the background of the document
 text=“text color” , it changes the body text color.
 link=“link color”
 alink=“active link color”
 vlink=“visited link color”
 …
6 Tariku Birhanu
Exercise : Hello World
1. Open Notepad (StartRunnotepad)
2. Enter the following, as is
<html>
<head><title>My first web page</title></head>
<body>
Hello World!
</body>
</html>
3. Save it with file name: hello.html (in My
Documents)
4. Open My Documents folder
5. Find and open (double-click) hello.html
7 Tariku Birhanu
HTML Tags (cont’d)
 headings
 predefined formats for text presentation(or formatting)
 six heading formats defined in HTML: <h1> up to <h6>
 <h1> the largest font size
 <h6> the smallest font size
 Format:
 <h1>…</h1>
 E.g. <h2>a text in heading two</h2>
 bold
 makes a text appear in bold
 Format: <b>…</b> or <strong>…</strong>
 E.g. <b>a text in bold</b>
8 Tariku Birhanu
HTML Tags (cont’d)
 italics
 makes a text appear in italics
 Format: <i>…</i> or <em>…</em>
 E.g. <i>a text in italics</i>
 underline
 makes a text appear underlined
 Format: <u>…</u>
 E.g. <u>underlined text</u>
 paragraph
 defines a paragraph
 Format: <p>…</p>

9 Tariku Birhanu
HTML Tags (cont’d)
 E.g. <p>this is a paragraph of text. it has a new
line before and after it.</p>
 The browser inserts a new line before and after
the text in the paragraph tag.
 attribute:
 align=“alignment” {left, right, center, justify}

 line break
 inserts a new line
 Format: <br>
 E.g. line one <br> line two <br> line three <br>
line four

10 Tariku Birhanu
 <font>……</font>
 Attributes:
 Face: it sets the font to the specified name
 Size: it sets the size of the text
 the size can take from 1 to 7
 Color

11 Tariku Birhanu
Exercise : Fancy Hello World
<html>
<head><title>My second web
page</html></head>
<body>
<h1><i>Welcome !</i></h1> <br>
<p>Hello every body. This is my second
web site</p>
</body>
</html>

12 Tariku Birhanu
HTML Tags (cont’d)
 horizontal rule
 inserts a horizontal line
 Format: <hr>
 attributes:
 width=“width” {absolute: in pixels or relative: in %}
 noshade
 color=“color” {browser dependent}
 Align={left,right,center}
 Size= { changes the size}
 E.g. <hr width=“75%” noshade color=“#FF0000”>
 sub/sup
 define either a subscript or a superscript
 Format: <sub>…</sub> ; <sup>…</sup>
 E.g. X<sub>1</sub><sup>2</sup> + 2X<sub>3</sub>
13 Tariku Birhanu
HTML Tags (cont’d)
 lists
 Unordered Lists (ul)
 define bulleted lists
 Starts with <ul> and ends with </ul>
 Each list starts with <li>
 Format:

<ul>
<li>…</li>
<li>…</li>
</ul>
 Atribute:
 type=“bullet type” {disc, circle, square}

 E.g.
<ul type=“square”>
14 <li>book</li><li>marker</li><li>chalk</li></ul>
Tariku Birhanu
 <ul typ=“fill round”>
 <li> Computer
 <li>Washing Machine
 <li>TV
 </ul>

15 Tariku Birhanu
HTML Tags (cont’d)
 Ordered Lists (ol)
 define numbered lists
 Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
 Atribute:
 type=“number type” {1, i, I, a, A}

 E.g.
<ol type=“i”>
<li>book</li><li>marker</li><li>chalk</li></ol>

16 Tariku Birhanu
 <ul type=“1” start=“5”>
 <li> Computer
 <li>Washing Machine
 <li>TV
 </ul>

17 Tariku Birhanu
HTML Tags (cont’d)
 Definition Lists (dl)
 define a list of term-description pairs
 <dl> </dl>
 Definition term tag <dt>
 Definition description tag <dd>
 Format:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
</dl>
 E.g.
<dl>
<dt>book</dt><dd>something that we read …</dd>
<dt>marker</dt><dd>something we write with …</dd>
</dl>
18 Tariku Birhanu
HTML Tags (cont’d)
 images
 insert images in an html document
 Format: <img> {no end tag}
 Attributes:
 src=“img url”
 alt=“alternate text”
 border=“border width”
 width=“image width”
 height=“image height”
 supported image formats:
 gif, jpg/jpeg, png
 E.g. <img src=“assets/images/logo.gif” alt=“Site
Logo”>
19 Tariku Birhanu
HTML Tags (cont’d)
 anchor
 defines a hyperlink or a named anchor
 used for navigation
 Format: <a>…</a>
 Attributes:
 href=“url”
 target=“target” { _self, _blank }
 name=“anchor name”
E.g.
<a href=“home.htm”>Go to home</a>
<a href=“http://www.google.com”
target=“_blank”>Google</a>

20 Tariku Birhanu
HTML Tags (cont’d)
 Navigation with anchors
 named anchors
 named places in an html document
 Format: <a name=“anchor_name”></a>
 E.g. <a name=“top”></a>
 linking to anchors
 Format:
 <a href=“#anchor_name”>link text</a> {on the

same page}
 <a href=“url#anchor_name”link text</a> {on a

different page}
 E.g.
 <a href=“#top”>Top of page</a> {assuming the

example above}
21  <a Tariku Birhanu
HTML Tags (cont’d)
 Tables
 insert tabular data
 design page layout
 Tags involved: <table>, <tr>, <td>, <th>,
<caption>

 <caption>….</caption>
 allows to give heading to a table.
 Appears with in <table>…</atble>
 Attributes:
 Align={top,bottom}
22 Tariku Birhanu
HTML Tags (cont’d)
 Format:
<table>
<caption>table caption</caption>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
…
</table>

23 Tariku Birhanu
HTML Tags (cont’d)
 E.g.
<table>
<caption align=“center” valign=“bottom”>table
1.0</caption>
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell 3</td> <td>Cell 4</td>
</tr>
24 Tariku Birhanu
</table>
HTML Tags (cont’d)
 Table attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 width=“table width” {absolute or relative}
 border=“border width”
 bordercolor=“color”
 cellspacing=“space amount” {in pixels}
 it controls the spacing between adjacent cells
 cellpadding=“padding amount” {in pixels}
 It controls the distance between data in a cell and the
boundaries of the cell

 …
25 Tariku Birhanu
HTML Tags (cont’d)
 Table row attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 height=“height”
 valign=“alignment” {top, middle, bottom}
 Table data/heading attributes:
 align=“alignment”
 valign=“alignment”
 width=“width”
 bgcolor=“color”
Unless otherwise specified, <tr> and <td>
inherit attributes of <table> whenever it
applies.
26 Tariku Birhanu
HTML Tags (cont’d)
 Cells spanning multiple rows/columns
 two additional attributes of <td> and <th>
 colspan=“num columns”
 one row needs to be a certain number of columns

wide
 rowspan=“num rows”
 Allows a cell to take off more than one row

 E.g. (colspan)
<table>
<tr> <td colspan=“2”>Cell 1</td> <td>Cell 2</td> <td>Cell
3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td>
<td>Cell 7</td> </tr>
<tr>
27 <td colspan=“4”>Cell 8</td> </tr>
Tariku Birhanu
HTML Tags (cont’d)
 E.g. (rowspan)
<table>
<tr> <td rowspan=“3”>Cell 1</td> <td>Cell 2</td> <td>Cell
3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>

 E.g. (hybrid)
<table>
<tr> <th colspan=“3”>Title</th> </tr>
<tr> <th rowspan=“3”>Cell 1</th> <td>Cell 2</td> <td>Cell
3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
28 Tariku Birhanu
</table>
HTML Tags (cont’d)

 HTML comments
 insert commented text in an html document
 Format: <!-- comment text -->
 E.g. <!-- this is a comment text -->

29 Tariku Birhanu
Name Marks
50% 50% 100%
Abebe 30 40 70
Kebede 40 40 80

30 Tariku Birhanu
Divisions

 In HTML, we can create divisions of an HTML


document using the <div> tag.
 A <div> is a logical block tag that has no
predefined meaning or rendering
 Very important for page layout design
 The <div> tag works well with CSS
 Tag format:
 <div> … </div>
 Attributes:
 align=“alignment” {left, right, center} - define
content alignt.
31 Tariku Birhanu
HTML Forms

32 Tariku Birhanu
HTML Forms
 Used to gather input from users
 The input is usually sent to a server-side script for processing
 The data can be sent in two methods: GET & POST
 GET
 for small and non-secure data
 Is the default method
 Data is sent as part of the request URL
 Limitation in size of data

33 Tariku Birhanu
HTML Forms (cont’d)
 POST
 For large & secure data
 Input is sent as a data stream after the request
URL
 Tags
 The <form> tag
 Contains all input elements in the form
 Defines the method of sending data
 Defines the server-side script responsible for accepting
the data

34 Tariku Birhanu
HTML Forms (cont’d)
 Attributes:
 name=“name”
 method=“method” {get, post}
 action=“url” {url of the server-side script to post data to}
 ACTION is the URL to which we submit the data for
processing
 <form method=“post”
action=“search.php”></form>

35 Tariku Birhanu
HTML Forms (cont’d)
 <input> tag
 used to define input fields in a form
 several types of input fields
{textbox, listbox, checkbox, radio, button, …}
 Attributes:
 name=“name”
 type=“type” {text, hidden, password, file, submit,
reset, button, checkbox, radio, image}
 value=“value”
 disabled=“disabled”
 checked=“checked”

36 Tariku Birhanu
HTML Forms (cont’d)
 The possible input types:
 text – input text box
 hidden – a hidden field for storing values
 password – password input box
 file – input box for file uploading (browse)
 submit – a button that submits the form
 reset – a button that resets form fields to their
original values
 button – a general purpose button
 checkbox – a check box
 radio – a radio button (option button)
 image – an image button that submits the form
37 Tariku Birhanu
 text fields - User clicks and types; the display will wrap;
use input type=text for one line, textarea for multi-line.
 <input type=text name="yourname" size=32>
 <input type="text" disabled="disabled" name="disabled"
value="cannot be changed">
<input type="text" readonly="readonly" name="readonly"
value="cannot be changed“>
 Password fields are like text fields, except that the text entered is
not shown.
 <input type="password" name="pw">
 hidden fields
 A hidden field is hidden from user; used when developer wants to
pass a value w/o user input. Similarly using the disabled attribute
and setting it =disabled makes a field unavailable. The readonly
acts similarly.
 <input type="text" disabled="disabled" name="disabled"
value="cannot be changed">
38 Tariku Birhanu
<input type="text" readonly="readonly" name="readonly"
 checkbox buttons - Checkboxes are for non-exclusive
choices; check as many as apply.
 Here the variable "SPORT" will take the value of each box
checked.
<input type="checkbox" name="sport"
value="bb">Baseball
<input type="checkbox" name="sport" value="sc">Soccer
<Input type="checkbox" name="sport"
value="fb">Football

 radio buttons - The radio button allows one choice.


 Note: When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name
become unchecked.
 Here "SPORT2" initially equals sc. Note that each button has
the same variable name.
39 Tariku Birhanu
<input type="radio" name="sport2" value="bb">
 <select> tag
 used to create a select box
 Tag format:
 <select>
<option>…</option>
<option>…</option>
</select>
 Attributes:
 <select>
 name=“name”
 multiple=“multiple” {enables selection of multiple

items}
 disabled=“disabled”

40 Tariku Birhanu
 selection menus (option lists) - Selection menus present a
list of options. If size=1 a drop-down menu results.
 Note the multiple attribute. The selected attribute causes a
default selection.
<select multiple size=2 name="sportmenu">
<option>BASEBALL <option>SOCCER
<option selected>BASKETBALL
<option>FOOTBALL <option>HOCKEY </select
 Reset buttons change the form back to its original state. The
Submit sends form output to the URL specified as the action.
<input type="reset" value="Clear">
<input
41 type="submit" value="Send Data"
Tariku Birhanu
 <!DOCTYPE html>
 <html>
 <body>
 <form action="">
 <select name="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat" selected="selected">Fiat</option>
 <option value="audi">Audi</option>
 </select>
 </form>
 </body>
 </html>

42 Tariku Birhanu
HTML Forms (cont’d)
 Other input fields
 <textarea> tag
 used to input a large block of text
 Tag format: <textarea>…</textarea>

 Attributes:
 name=“name”
 cols=“num_columns”
 rows=“num_rows”
 readonly=“readonly”

43 Tariku Birhanu
 <textarea name="address" cols=30
rows=3>
optional text to appear in the textarea
</textarea>
(use wrap=physical within the tag to force
wraparound)

44 Tariku Birhanu
HTML Forms (cont’d)
 <option>
 value=“value”
 selected=“selected”
 disabled=“disabled” {browser compatibility: Firefox ?}

 Ex.
1. <select name=“department”>
<option value=“1”>Computer
Science</option>
<option value=“2”>Information
Science</option>
<option value=“3”>Computer
Engineering</option>
</select>
45 2. Modify the above input so that Information
Tariku Birhanu Science
HTML Forms (cont’d)
 submit & reset buttons
 the vlaue attribute is the caption of the buttons
Ex. <input type=“submit” value=“ok”>
inserts a button with the caption (label) ok.

 file upload fields


Ex. <input type=“file” name=“doc”>

46 Tariku Birhanu
HTML Forms (cont’d)
 <label> tag
 used to give labels to input fields

Ex.
<label>First Name:
<input type=“text” name=“fname”>
</label>

47 Tariku Birhanu
HTML Forms (cont’d)
 <fieldset> tag
 used to group input fields in a form
 the title/label of the group is set using the
<legend> tag
 Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>

 Attributes:
 <legend>
 align=“alignment” {left, center, right}

48 Tariku Birhanu
 HTML <optgroup> Tag
 The <optgroup> is used to group related options in a drop-
down list.
 If you have a long list of options, groups of related options
are easier to handle for a user.
 Attributes:
 Disabled: disabled
 Specifies that an option-group should be disabled
 Labele:text ->Specifies a label for an option-group
 <select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
49 Tariku Birhanu
 HTML File Upload
 HTML File Upload is used to show the list of all file, when a
user click on browse button A form in an HTML (web page)
contain an input element with type="file". This involve one
or more files into the submission of form. The file are stored
into hard disk of the web server, that is why file input is
called" file upload".
 <input type="file">:The <input type="file> is used to
create a upload file with a text box and the browse button.
The method attribute used in form must be set to post
 <input type="file">:The <input type="file> is used to
create a upload file with a text box and the browse button.
The method attribute used in form must be set to post

50 Tariku Birhanu
 <html>
<body>
<form action="fileinsert.html" method="post">
<p>
Enter Your Text (Optional):<br>
<input type="text" name="textwrite" size="15">
</p>
<p>
Specify your File:<br>
<input type="file" name="datasize" size="30">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
</body>
</html

51 Tariku Birhanu
HTML Forms (cont’d)
 Presentation
 tables can be used to align form fields and their
labels so that the presentation of the form looks
more regular.
 one possibility is to use:
 one table row per input field
 within a table row
 one column for the labels
 one column for the input fields

 the table borders can be set to 0 so that they are


not visible
 other features of tables (rows & columns) can be
adjusted as required
52 Tariku Birhanu
HTML Forms (cont’d)
 Presentation (cont’d)
 Cascading Style Sheets (CSS) can be used to
define further presentation related attributes for
input fields

 Ex. all text input fields should have font size of 10


and background color of grey.

 will be discussed in the next section.

53 Tariku Birhanu
HTML Forms (cont’d)

 Exercises

 Create an HTML page which displays a login screen with


 a username field

 a password field

 a button to submit the form

 a button to reset the content of the form

54 Tariku Birhanu
HTML Forms (cont’d)

 Create an HTML page which displays student


registration screen with
 a name field

 an ID field
 a department field {select box with values:
1. Computer Science
2. Information Science
3. Computer Engineering
 a semester field {select box with values:
1. I
2. II
 an academic year field
{select box with values: 1998-2000, 2000 default}
 a button to submit the form
 a button to reset the form
55 Tariku Birhanu

You might also like