Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Web Programming Chapter Two

Chapter2

Uploaded by

dmretab
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

Web Programming Chapter Two

Chapter2

Uploaded by

dmretab
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 67

Chapter Two

Hyper Text Markup Language


(HTML)

12/25/2024 1
Basics of HTML
 HTML, stands for Hypertext Markup Language.
 It is the predominant markup language used for creating web pages.
 A markup language is a set of markup tags.
 HTML document is created using a simple text editor like notepad or any other text
editor.
 Notepad++ can edit HTML, and at the same time you are able to view what you edit,
in a web browser.

12/25/2024 2
HTML Tags
 HTML markup tags are usually called HTML tags or just tags.
 The tags are already pre-defined.
 HTML tags are keywords surrounded by angle brackets like <html>.
 HTML tags normally come in pairs, like <html> and </html>.
 The first tag in a pair is the start tag(opening tag) and the second tag is the end tag
(closing tag).
 HTML tags are not case-sensitive. <html> means the same as <HTML>.

12/25/2024 3
Structure of Web page
The basic structure for all HTML documents is simple and should include the following
minimum elements or tags:
1. <html>-This is the main container for HTML pages.
2. <head>-This is the container for page header information.
3. <title>-The is used for the title of the page.
 Used to give a title to the browser window
 Displayed at the top left side of the window
4. <body>-This is a container of the main body of the page.
 This is where we will place our content for our visitors.
 may contain anything from a couple of paragraphs under a heading to more complicated
layouts containing forms and tables.

12/25/2024 4
Structure of Web page Cont.

12/25/2024 5
HTML Comments
 Comments can be inserted into the HTML code to make it more readable and
understandable.
 There is an opening and a closing much like tags.
 You can put comments between any tags in your HTML documents.
 Comments use the following syntax:
<!--This is a comment-->
<!--This is a
multiple-line comment
that ends here-- >

12/25/2024 6
HTML Links
 A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to a new document.
 Links are specified in HTML using the <a> tag.
 This element is called an anchor tag as well.
To link to another document
 the opening <a> tag must carry an attribute called href, whose value is the page you are
linking to.
 Go to the <a href=“index.html”>index page</a>
 The file index.html should be in the same folder.
To link to a different site
 write the URL between <a> and </a> tags-source anchor.
 <a href=“http://www.google.com”>Search Google</a>

12/25/2024 7
Attributes of <a>
1. The href Attribute
 A link in HTML is always composed of two parts:
 the URL (the destination site, page or resource).
 the clickable part (the link text) and
 The URL is specified using the href attribute.

Example: <a href=“http://www.google.com/”>Search Google</a>

<a href=“http://mail.yahoo.com”> Yahoo mail</a>


URL: http://mail.yahoo.com
Clickable part (link text): Yahoo mail

12/25/2024 8
Attributes of <a> Cont.
2. The target Attribute
It is used to specify where to display the contents of a selected hyperlink.

It is set to:


 _blank: then a new window will be opened to display the loaded page

 _self: then loads the new page in the current window. By default its _self.

Example: a link that opens on a new window

<a href="first.html" target="_blank"> First Page</a>

12/25/2024 9
Attributes of <a> Cont.
3. The title Attribute
 It is used to type a short description of the link.

 If you place the cursor over the link, you will see the text in the title attribute.

Example:
<a href="http://www.html.net/" title=“This is a link in HTML">Learn HTML </a>

12/25/2024 10
Cont.
Using an image as a link
 Put the image element in the anchor element.
<a href="http://www.youtube.com"><img src="youtube.JPG"/></a>
 Most browsers display linked text as blue and underlined and linked images with a
blue border.
 Visited links are generally displayed in purple.
 One can change the color of the links by using CSS and it is recommended that you
keep them consistent throughout your site so as not to confuse your users.

12/25/2024 11
HTML Text formatting
Bold Text
 Anything that appears within <b>...</b> element, is displayed in bold
Italic Text
 Anything that appears within <i>...</i> element is displayed in italicized
Underlined Text
 Anything that appears within <u>...</u> element, is displayed with underline
Strike Text
 Anything that appears thin <strike>.. .</strike> element is displayed with
strikethrough, which is a thin line through the text

12/25/2024 12
Cont.
Superscript txt
 The content of a <sup>..</sup> element is written in superscript.
Subscript Text
 The content of a <sub>...</sub> element is written in subscript.
Larger Text
 The content of the <big>...</big> element is displayed one font size larger than the
rest of the text surrounding it.
Smaller Text
 The content of the <small>...</small> element is displayed one font size smaller than
the rest of the text surrounding it.

12/25/2024 13
Cont.
HTML Headings
 A heading element briefly describes the topic of the section it introduces.

 Headings are defined with the <h1> to <h6> tags.

 Helps to organize the document into sections, just as you might do when writing a
book.

 <h1> defines the largest heading and <h6> the smallest heading.

12/25/2024 14
HTML Headings Cont.
Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

12/25/2024 15
HTML Paragraphs
 The <p> tag offers a way to structure your text into different paragraphs.

 Each paragraph of text should go in between an opening <p> and a closing </p> tag.

Example: <p>This is a paragraph</p>

<p>This is another paragraph</p>

Align attribute
It is used to align your paragraphs.

 Paragraphs can be left aligned, center aligned, right aligned or justified.


12/25/2024 16
HTML Paragraphs
 Align attribute can be used with other tags like headers, table, etc.

Example:
<h1 align="left"> Heading Aligned Left </h1>

<h2 align="center"> Heading Aligned Center </h2>

<h3 align="right"> Heading Aligned right</h3>

<h3 align="justify"> Heading Aligned Justify</h3>

12/25/2024 17
HTML Fonts
 HTML <font> tag is used to add style, size, and color to the text on your website.
 The font tag has three attributes called size, color, and face to customize your fonts.
 You can change one or all of the font attributes within one <font> tag.

Font Size
 You can set the size of your font with size attribute.

 The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example: <font size="1">Font size="1"</font>

<font size="2">Font size="2"</font>

<font size="3">Font size="3"</font>


12/25/2024 18
HTML Fonts Cont.
Font Face

 You can set any font you like using face attribute.‘

 Instead they will default to Times New Roman of your font with size attribute.

Example: <font face="Times New Roman" size="5"> Times New Roman </font> <br>
<font face="Verdana" size="5"> Verdana </font> <br>

<font face="Comic sans MS" size="5"> Comic Sans MS </font> <br>

12/25/2024 19
HTML Fonts Cont.
Font Color

You can set any font color you like using color attribute.

You can specify the color that you want by either the color name or hexadecimal code
for that color.

Example: <font color="#0000FF">This text is blue color</font>

<font color="red">This text is red</font>

12/25/2024 20
HTML image
 HTML image is used to add image inside the HTML document.
 <img> tag is used to embedding image in the HTML document.
 An empty<img> tag contains attributes only, and has no ending tag.
Attributes of <img>
src attribute (source)
 It is used to display an image
 The value of the src attribute is the URL of the image you want to display.
Syntax : <img src="url" />
Here, url is the location(Full Path) where the image is stored.

12/25/2024 21
HTML image Cont.
alt attribute
 specifies an alternate text for an image, if the image cannot be displayed.

 It provides alternative information for an image if a user for some reason cannot
view it (because of a slow connection, or an error in the src attribute).

Example: <img src=“coffee.png" alt=“Coffee Cup/>

<img src="Yahoo.JPG" alt="Yahoo"/>

12/25/2024 22
HTML image Cont.
width attribute
 It sets the width of the image, rather than letting the browser compute the size.

 This can have a value like 10 (pixels) or 20% (percentage of the available window size) etc.

height attribute
 To sets the height of the image.

 This can have a value like 10(pixels) or 20% (percentage of the available window size) etc.

Example: <img src="Yahoo.JPG" height="50" width="100">

12/25/2024 23
HTML image Cont.
border attribute: It sets a border around the image. T
 This will have a value like 1 or 2 etc.

align attribute: It sets the horizontal alignment of the image


 It takes value either left, right, or center.

Example: <img src="Yahoo.JPG" alt="Yahoo" width="100" height="100"


border="2" align="right" title="Yahoo mail" />

12/25/2024 24
HTML image Cont.
hspace: sets horizontal space around the image.
 This will have a value like 10 or 20% etc.

vspace: sets vertical space around the image.


 This will have a value like 10 or 20% etc.

title attribute: The title attribute specifies a text title.


 The browser displays the title when the mouse passes over the link.
Example: <img src="email logo.JPG" alt="Email logo" align="left" hspace="50"
vspace="100" title="Email logo" />

12/25/2024 25
HTML List
We can create three types of lists:
1. Definition lists
 A special kind of list for providing terms followed by a short text definition or description
for them.
Syntax: <dl>
<dt> term 1</dt>
<dd>definition</dd>
<dt>term 2 </dt>
<dd>definition </dd>
</dl>

12/25/2024 26
HTML List
Example
<p>This is Definition list
<dl>
<dt>Unordered list</dt>
<dd>A list of bullet points</dd>
<dt>Ordered list</dt>
<dd>An orderd list of points</dd>
<dt>Definition list</dt>
<dd>A list terms and definitions</dd>
</dl>
</p>

12/25/2024 27
HTML List
2. Unordered lists
 Unordered lists are of lists of bullet points.
 You can choose the type of bullet using the attribute “type” with the value circle,
square, disk.

Syntax: <ul>
<li>...</li>
<li>...</li>
</ul>

12/25/2024 28
HTML List
Example:
<p>This is unordered list
<ul type="square">
<li>Ethiopia</li>
<li>Somali</li>
<li>Kenya</li>
</ul>

12/25/2024 29
HTML List
3. Ordered lists
 It uses a sequence of numbers or letters instead of bullet points.
 You can choose the type of order by using the attribute “type” with the value:
 A for capital alphabet,
 a for small alphabets,
 I for capital Roman numbers,
 i for small letter Roman numbers.
Syntax <ol >
<li>…</li>
<li>…</li>
<li>…</li>
</ol>

12/25/2024 30
HTML List
Example:
<p>This is Ordered list
<ol type="I">
<li>Ethiopia</li>
<li>Somali</li>
<li>kenya</li>
</ol>

12/25/2024 31
HTML Table
 Allow web authors to arrange data like text, images, links, other tables, etc. into rows
and columns of cells.
 created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells.
 border is an attribute of <table> tag and it is used to put a border across all the cells.
 If you do not need a border then you can use border="0".Table heading can be defined
using <th> tag

12/25/2024 32
Table attributes
 cellspacing : defines the width of the border,
 cellpadding: represents the distance between cell borders and the content within a
cell.
 colspan :merge two or more columns into a single column.
 rowspan :merge two or more rows.
 bgcolor : set background color for whole table or just for one cell.
 background :set background image for whole table or just for one cell.
 bordercolor : set border color
 Height and Width :set a table width and height using width and height attribute
 caption tag will serve as a title or explanation for the table and it shows up at the top
of the table.
12/25/2024 33
Table attributes Cont.
<table border="1">
<tr>
<th>Header 1</th> <th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr>
</table>
 If you do not specify a border attribute, the table will be displayed without borders.

12/25/2024 34
Table attributes Cont.
 The attributes of a table will be applied on the whole table element which include one
or more rows (<tr>), header cells (<th>) or data cells (<td>).
Attribute Value Description
Align Left, Center, Right Specifies the alignment of a table according to
surrounding text
Bgcolor rgb(x,x,x), #xxxxxx, Specifies the background color for a table
colorname
Background Image url Sets background image of the table
Border Pixels Specifies the width of the borders around a table
Bordercolor rgb(x,x,x), #xxxxxx, Specifies the color used for the border
colorname
Cellpadding pixels Specifies the space between the cell wall and the
cell content
Cellspacing pixles Specifies the space between cells
Width Pixles (%) Specifies the width of a table
Height Pixles (%) Specifies the height of a table
12/25/2024 35
Example
<table border="5" bordercolor="green" bgcolor="gray">

<tr> <th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th> </tr>

<tr><td rowspan="2">Row 1 Cell 1</td>

<td bgcolor="red">Row 1 Cell 2</td>

<td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

</table>
12/25/2024 36
Class work

12/25/2024 37
Class work
<table border="5"> <td>3478/10</td>
<tr> <td>Object Oriented Programming</td>
<th>Name</th> </tr>
<th>ID</th> <tr>
<th>Course</th> <td>Yonathan</td>
</tr> <td>2378/10</td></tr>
<tr> <tr>
<td>Rahel</td> <td>Internet Programming</td></tr>
</table>

12/25/2024 38
Table Cellpadding and Cellspacing
The two attributes used to adjust the white space in your table cell.

Cellspacing defines the width of the border.


 It is the pixel width between the individual data cells in the table (The thickness
of the lines making the table grid)

Cellpadding represents the distance between cell borders and the content within.
 pixel space between the cell contents and the cell border.

12/25/2024 39
Cont.
Example: Cellpadding
<table border="1"cellpadding="10">
<tr>
<td>cell one</td>
<td>cell two</td>
</tr><tr>
<td>cell three</td>
<td>cell four</td> </tr>
</table>

12/25/2024 40
Cont.
Example: Cellspacing
<table border="1"cellspacing="5”cellpadding="10">
<tr>
<td>cell one</td>
<td>cell two</td>
</tr><tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
12/25/2024 41
Attributes of rows and cells
 Applicable only to the header cell or the data cell if it is used with <th> or <td> tag
 It will affect the whole content of the row if it is used by the <tr> tag.
Attribute Value Description
Align Left | right | center | justify Aligns the content in a cell
Bgcolor Rgb(x,x,x) |#xxxxxx Specifies a background color for a cell
Colorname
Colspan Number Specifies the number of columns a cell should
span
Rowspan Number Sets the number of rows a cell should span
Height Pixles (%) Sets the height of a cell
Width Pixles (%) Specifies the width of a cell
Valign top|middle|bottom Vertical aligns the content in a table row

12/25/2024 42
rowspan and colspan
 It’s sometimes necessary for data to span multiple rows or columns.
<table border="1">
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td></tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td></tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr></table>
12/25/2024 43
Creating Preformatted text
 It will display the content as it is formatted in the source document.
 It uses the html tag <pre>…</pre>
 Used to display tabular data without the use of table and to represent computer source
code.
 Most browsers would display this text in a monospaced font by default
Example 1: <p>Student Grade Report
<pre>
Name Id Result
Solomon 1123 78
Girma 1233 83
Bizunesh 1027 95
</pre>
</p>
12/25/2024 44
Cont.
Example 2:
<p> Java code to add two integers
<pre>
Sum=var1+var2;
System.out.print(“the sum is ”+sum);
</pre>
</p>

12/25/2024 45
Marque tag
 <marquee>…</marquee>
 The marquee tag is used to scroll text up, down, left or right automatically.
Bgcolor
 Sets the background color of the marquee.
Direction
 Sets the direction of the marquee box to either left-to-right, right-to-left, up-to-down
and down-to-up.
Width
 This sets how wide the marquee should be.
Loop
 This sets how many times the marquee should 'Loop' its text.
12/25/2024 46
HTML Forms
 HTML Forms are used to select different kinds of user inputs and to pass the data to a
server.
 A form can contain input elements like textboxes, checkboxes, radio-buttons,
submit buttons, reset button and more.
 It can also contain drop down lists, textareas, fieldsets, label elements.
 The <form> tag is used to create an HTML form
 Users generally "fill" a form by modifying its controls (entering text, selecting list
items, etc.) before submitting the form for further processing by server (e.g., to a Web
server, to a mail server, etc.)
 A form will take input from the site visitor and then will post to your back-end
application

12/25/2024 47
Attributes of <form>
Method: It a method to be used to upload data and it can be post or get.
Action: It is given in form to specify which page the form should go after submitting it.
Name: It identifies the form with its name attribute.
Syntax: <form>
Input Fields/ form elements
</form>

<form action="Script URL" method="GET|POST">


form elements like input, textarea etc.
</form>

12/25/2024 48
Input Fields
 The input fields are used to accept user information.
These are various types
1. Textbox
2. Textarea
3. Checkbox
4. Radio Button
5. Drop down list
6. Submit and Reset etc…

12/25/2024 49
Text box
 You can create text box by using: <input type="text">

 This defines a one-line input field that a user can enter text into

 It has two important attributes: name and value.


Example 1:
<form>
First name: <input type=“text” name=“firstname” value=“Selam” /><br />
Last name: <input type=“text” name=“lastname” value=“Tola” />
</form>

12/25/2024 50
Cont.
Example 2:

<p>Form Input Field</p>


<form name="f1" method="post" action="form1.html">
Name: <input type="text" name="name" /><br />
Age: <input type="text" name="age" />
</form>

12/25/2024 51
Attributes for <input type=”text”> tag
1. name: It is required for identifying the input field name.
2. value : It specifies default text that appears in the field when the form is loaded.
3. 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.
4. maxlength: set a maximum character limit if the forms processing program you
are using requires it.
Example:
<input type="text" name="username" size="8" maxlength="8">

12/25/2024 52
Password
 A password field works just like a text entry field, except

 The characters are obscured from view using asterisk (*) or bullet (•) characters, or
another character determined by the browser.

 <input type="password"/> defines a password field:

Example:

<form>
Password: <input type="password" name="pwd">
</form>
12/25/2024 53
Text area
It is used when you want your users to be able enter multiple line of text.

 the <textarea> element is a multi-line, scrollable text entry box when displayed by
the browser.

Example:

<textarea name="comment"> Tell us what you feel about our tutorial with 50
words or less.

</textarea>

12/25/2024 54
Text area attributes
name: It is used to identify the text area.

rows: It specifies the number of lines of text area should display.


 Scrollbars will be provided if the user types more text than fits in the allotted space.

cols: It specifies the width of the text area measured in number of characters.
Example:
<textarea name="comment" rows="5" cols="100">

Tell us what you feel about our tutorial with 50 words or less. </textarea>

12/25/2024 55
Attributes of rows and cells
<form>
First name:<br> <input type="text"
name="firstname" value=“Aster"><br />
Last name:<br> <input type="text"
name="lastname" ><br>
Show Max Length <br><input type=
"text“ name="username" size="8"
maxlength="8" /><br>
Password:<br> <input type="password"
name="pwd"><br>
Write comment here <br>
<textarea name="comment" rows="15“
cols=“50"> Tell us what you feel
about our tutorial with 50 words or less.
</textarea>
</form>
12/25/2024 56
Using Buttons, Checkboxes and Selection Lists
Radio Buttons
 Radio buttons are a popular form of interaction.

 It makes the user select ONE of a limited number of choices.

 Only one value will be sent for a given group of radio buttons

 <input type="radio"> defines a radio button.

12/25/2024 57
Attributes of Radio button
1. name: sets name of the radio button

2. value: sets the value of the radio button.


 This is the data sent to server when the user submits the form.

3. checked: sets whether the radio button is checked by default or not. It accepts the
value checked.

12/25/2024 58
Cont.
Example:

<form method=”post” action=”register.php” >


<input type="radio" name="sex" value="male" checked=“checked" / > Male<br />
<input type="radio" name="sex" value="female" /> Female

</form>

12/25/2024 59
Checkboxes
 Check boxes allow for multiple items to be selected for a certain group of choices.

 It is defined as <input type="checkbox" />.

 It makes the user select ONE or MORE options of a limited number of choices.

 The check box's name and value attributes behave the same as a radio button.

1. name: sets name of the checkbox

2. value: sets the value of the checkbox. This is the data sent to server when the user submits the
form.

3. checked: sets whether the checkbox is checked by default or not. It accepts the value checked.
12/25/2024 60
Example
What type of food do you like?

<ul>

<li><input type="checkbox" name="genre" value=" spaghetti " checked="checked">


Spaghetti</li>

<li><input type="checkbox" name="genre" value="pizza" checked="checked"> Pizza</li>

<li><input type="checkbox" name="genre" value="sandwich">Sandwich </li>

<li><input type="checkbox" name="genre" value="Burger">Burger</li>

</ul>

12/25/2024 61
Selection List
 Drop down menus are created with the <select> and <option> tags.
 <select> is the list itself and each <option> is an available choice for the user.
Example:
Educational level: <br>
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
</select>

12/25/2024 62
Scrolling Lists
 To make the menu display as a scrolling list, simply specify the number of lines you’d
like to be visible using the size attribute.
Example:
Select the fruits you like:
<select name="fruits" size="6" multiple="multiple">
<option>Orange</option>
<option>Apple</option>
<option selected="selected">Banana</option>
<option selected="selected">Mango</option>
<option> Avocado</option>
<option>Pineapple</option>
<option>Papaya</option>
<option>Strawberry</option>
</select>
12/25/2024 63
Grouping menu options
 You can use the <optgroup> element to create conceptual groups of options.
 The required label attribute in the optgroup element provides the heading for the
group.
Example: <select name="icecream" multiple="multiple“ size=“8”>
<optgroup label="traditional">
<option>vanilla</option>
<option>chocolate</option>
</optgroup>
<optgroup label="fancy">
<option>Super praline</option>
<option>Nut surprise</option>
<option>Candy corn</option>
</optgroup>
</select>
12/25/2024 64
Buttons
 There are a number of different kinds of buttons that can be added to web forms.

 Some are: submit button and reset button.

1. Submit Button
 When clicked, the submit button immediately sends the collected data in the form to the server for
processing.

 It is defined as: <input type="submit">

Submit button has the following attributes:

 value: this sets the text displayed on the button as a label.

 name: used to give name to the submit button


12/25/2024 65
Cont.
 Submit button has the following attributes:

 value: this sets the text displayed on the button as a label.


 name: used to give name to the submit button

Example: <input type=”submit” name=”info” value=”Send”>

12/25/2024 66
Cont.
2. Reset Button
 The reset button returns the form controls to the state they were in when the form
loaded.

 This clears the text users typed into text fields, and removes selections made.

 Reset button can be defined as: <input type="reset">

Example: <input type="reset" name="reset">

12/25/2024 67

You might also like