Web Page Designing: Unit - 10

Web Page Designing
Unit -10
Introduction to HTML
 It stands for Hyper Text Markup Language.
 It is markup language used to create HTML documents (web pages) on
internet.
 A markup language is a set of markup tags. HTML documents are described
by HTML tags Each HTML tag describes different document content of web
page.
 It is interpreted by the web browser. The web browser is the software that
runs on computer and interprets the HTML tags to display the content of the
Web page.
 It was developed by Berners Lee in 1990 at CERN.
 Examples of markup language: DHTML, SGML, XHTML, XML etc.
Uses of HTML
 It is used for basic layout creating or designing the web

pages.
 Without HTML, the world wide web will not exist.
 It allows embedding of text, multimedia and links to other
documents and the web pages.
 It provides a means to create structured document by
using paragraph, character formatting, links and lists.
 It can embed scripts such as CSS, JavaScript, PHP, etc.
Advantages of HTML
 Highly flexible and user friendly.

 It is platform and web browsers independent.
 Easily understandable.
 Easy to maintain and update.
 Takes less time to load on web browser.
Disadvantages of HTML
 Need to write lot of code for making simple webpage.

 It can create only static and plain pages so if we need dynamic pages
then HTML is not useful.
 Security features are not good in HTML.
 It is difficult to design attractive and complete web site by using only
HTML. So additional programming and scripting languages are used
such as JavaScript, PHP, C#, CSS.
 It only defines the page layout.
HTML Tags
 HTML Tags are the commands that shows the layout and
controls the appearance of the web pages.
 It is surrounded by angular brackets that always opens
with < (less than sign) and > (greater than sign).
 A tag contains three parts: element, attributes and value.
 Basic structure of Tag is
<tag_name>content</tag_name>
 HTML tags normally come in pairs like <p> and </p>
 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, but with a slash before the tag
name .
 The text between the start and end tags is the element content.
 HTML tags are not case sensitive, <b>
means the same as <B>
 HTML tags are of two types:
 Paired tags
 Singular tags
Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 The text between <html> and </html> describes an HTML
document
 The text between <head> and </head> provides
information about the document
 The text between <title> and </title> provides a title for
the document
 The text between <body> and </body> describes the
visible page content
 Using this description, a web browser can display a
document with a heading and a paragraph.
Heading Tags
Any document starts with a heading.
You can use different sizes for your
headings. HTML also has six levels of
headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading,
browser adds one line before and one
line after that heading.
Prepared By Niraj Shrestha
Heading Example
<html>
<head> <title>Heading
Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Paragraph Tag
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 as shown below in the example:
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<P>Paragraph tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening Pand a closing tag as shown
below in the example.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next
line. This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Centering Content
You can use <center> tag to put any content in the center of
the page or any table cell.
<html>
<head>
<title> Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center> <p>This text is in the center.</p> </center>
</body>
</html>
Horizontal Lines
Horizontal lines are used to visually break up sections of a document.
The <hr> tag creates a line from the current position in the document
to the right margin and breaks the line accordingly.
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p> <hr/>
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML Formatting Elements
In the previous chapter, you learned about HTML styling, using the HTML style attribute.
HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
•Bold text
•Important text
•Italic text
•Emphasized text
•Marked text
•Small text
•Deleted text
•Inserted text
•Subscripts
•Superscripts

HTML Bold and Strong Formatting
The HTML <b> element The HTML <strong> element

defines bold text, without defines strong text, with
any extra importance. added semantic "strong”
<html> <html>
<body> <body>
<p>This text is normal.</p> <p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is
</body> strong.</strong></p>
</html> </body>
</html>
HTML Italic and Emphasized Formatting
 TheHTML <i> element defines italic  TheHTML <em> element defines
text, without any extra importance. emphasized text, with added semantic
importance.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<p>This text is normal.</p> <p>This text is normal.</p>
<p><i>This text is italic.</i></p> <p><em>This text is emphasized.</em></p>
</body> </body>
</html> </html>

HTML Marked Formatting
HTML Small Formatting
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body>
<h2>HTML <mark>Marked</mark>
<h2>HTML <small>Small</small> Formatting </h2>
Formatting</h2> </body>
</html>
</body>
</html>

• HTML Deleted Formatting
HTML Inserted Formatting
The HTML <del> element defines The HTML <ins> element defines inserted
deleted (removed) text. (added) text.
<html> <html>
<body>
<body>
<p>The ins element represent inserted
<p>The del element represents deleted (added) text.</p>
(removed) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>My favorite color is <del>blue</del> </body>
red.</p>
</html>
</body>
</html>
 HTML Subscript Formatting  HTML Superscript
Formatting
 The HTML <sub> element defines  The HTML <sup> element defines
subscripted text. superscripted text.
<html> <html>
<body> <body>
<p>This is <sub>subscripted</sub> <p>This is
text.</p> <sup>superscripted</sup> text.</p>
</body> </body>
</html> </html>

HTML Attributes
An attribute is used to define the characteristics of an HTML element and is placed
inside the element's opening tag. All attributes are made up of two parts: a name
and a value:
•The name is the property you want to set. For example, the paragraph <p>
element in the example carries an attribute whose name is align, which you can use
to indicate the alignment of paragraph on the page.
•The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align
attribute: left, center and right
Attributes provide additional information about an element

Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
. Prepared By Niraj Shrestha
The href Attribute
Size Attributes
HTML links are defined with the <a> HTML images are defined with the
tag. The link address is specified in <img> tag.
the href attribute: The filename of the source (src), and
the size of the image (width and
<!DOCTYPE html> height) are all provided as attributes:
<html>
<!DOCTYPE html>
<body>
<html>
<a href="http://www.facebook.com">
This is a link of facebook</a> <body>
</body> <img src=“picture.jpg" width="104"
</html> height="142">
</body>
Prepared By Niraj Shrestha </html>
HTML Background Color
The background-color property defines the background
color for an HTML element:
This example sets the background for a page to lightgrey:
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text Color
The color property defines the text color for an HTML
element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
HTML Fonts
The font-family property defines the font to be used for an
HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>

HTML Text Size
The font-size property defines the text size for an HTML
element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
HTML Text Alignment
The text-align property defines the horizontal text
alignment for an HTML element
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered heading</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p1 style=“font-family:verdana; font-size:300%; text-align:center; ">
<h1>HTML</h1><br/>
<h4>It stands for Hyper Text Markup Language. It is markup language used to
create HTML documents (web pages) on internet. A markup language is a set of
markup tags. HTML documents are described by HTML tags Each HTML tag
describes different document content of web page.It is interpreted by the web
browser. The web browser is the software that runs on computer and interprets
the HTML tags to display the content of the Web page. <br/>
It was developed by Berners Lee in 1990 at CERN.Examples of markup language:
DHTML, SGML, XHTML, XML etc.</h4>
</p1>
</body>
</html>
HTML Images
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
NOTE Always specify the width and height of an image. If width and height are not
specified,
Prepared the page will flicker while the image loads.
By Niraj Shrestha
HTML Lists
Unordered List: Ordered List:

 Item 1 First item
 Item 2 Second item
 Item 3 Third item
 Item 4 Fourth item

Unordered HTML Lists
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles):
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

Disc:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Circle:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle

Bullets</h2>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
Square:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square

Bullets</h2>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
None:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
Prepared By Niraj Shrestha </html>
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of the
marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Numbers:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Uppercase Letters:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Lowercase Letters:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase

Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Uppercase Roman Numbers:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Lowercase Roman Numbers:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman

Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Nested HTML Lists
List can be nested (lists inside lists):
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Tables
HTML Table Example
Number First Name Last Name AGE

1 Eve Jackson 55
2 John Doe 73
3 Adam Johnson 67
4 Jill Smith 50

Table Example
<!DOCTYPE html> <tr>
<html> <td>John</td>
<body> <td>Doe</td>
<td>80</td>
<table style="width:100%"> </tr>
<tr> </table>
<td>Jill</td>
<td>Smith</td> </body>
<td>50</td> </html>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
Example explained:
 Tables are defined with the <table> tag.
 Tables are divided into table rows with the <tr> tag.
 Table rows are divided into table data with the <td> tag.
 A table row can also be divided into table headings with

the <th> tag.

An HTML Table with a Border Attribute
If you do not specify a border for the table, it will be
displayed without borders.
A border can be added using the border attribute:
<!DOCTYPE html> <tr>
<td>Eve</td>
<html>
<td>Jackson</td>
<body> <td>94</td>
</tr>
<table border="1" <tr>
style="width:100%"> <td>John</td>
<td>Doe</td>
<tr>
<td>80</td>
<td>Jill</td> </tr>
<td>Smith</td> </table>
<td>50</td>
</tr>
Prepared By Niraj Shrestha </body>
</html>
HTML Table Headings
Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
<!DOCTYPE html>
<html> <tr>
<head> <td>Eve</td>
</head> <td>Jackson</td>
<body> <td>94</td>
<table style="width:100%"> </tr>
<tr> <tr>
<th>Firstname</th> <td>John</td>
<th>Lastname</th> <td>Doe</td>
<th>AGE</th> <td>80</td>
</tr> </tr>
<tr> </table>
<td>Jill</td>
<td>Smith</td> </body>
<td>50</td> </html>
</tr>
To add borders, use the CSS border property:
<!DOCTYPE html>
<tr>
<html>
<td>Eve</td>
<head>
<td>Jackson</td>
<style>
<td>94</td>
table, th, td {
</tr>
border: 1px solid black;
<tr>
}
<td>John</td>
</style>
<td>Doe</td>
</head>
<td>80</td>
<body>
</tr>
</table>
<table style="width:100%">
<tr>
</body>
<td>Jill</td>
</html>
<td>Smith</td>
<td>50</td>
</tr>
An HTML Table with Collapsed Borders
If you want the borders to collapse into one border, add CSS border-collapse:
<!DOCTYPE html> <td>50</td>
<html> </tr>
<tr>
<head> <td>Eve</td>
<style> <td>Jackson</td>
table, th, td { <td>94</td>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
<td>John</td>
} <td>Doe</td>
</style> <td>80</td>
</head> </tr>
</table>
<body>
</body>
<table style="width:100%"> </html>
<tr>
<td>Jill</td>
<td>Smith</td>
An HTML Table with Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
<!DOCTYPE html> <body> <tr>
<html> <td>John</td>
<head> <table style="width:100%"> <td>Doe</td>
<style> <tr> <td>80</td>
table, th, td { <td>Jill</td> </tr>
border: 1px solid black; <td>Smith</td> </table>
border-collapse: <td>50</td>
collapse; </tr> </body>
} <tr> </html>
th, td { <td>Eve</td>
padding: 15px; <td>Jackson</td>
} <td>94</td>
</style> </tr>
</head>
HTML Table Headings
Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and
centered:

<!DOCTYPE html> #section {
<html> width:350px;
<head> float:left;
<style> padding:10px;
#header { }
background-color:black; #footer {
color:white; background-color:black;
text-align:center; color:white;
padding:5px; clear:both;
} text-align:center;
#nav { padding:5px;
line-height:30px; }
background-color:#eeeeee; </style>
height:300px; </head>
width:100px;
float:left;
padding:5px;
}
<body>
<div id="header">
<h1>City Gallery</h1>
</div> <div id="footer">
<div id="nav"> Copyright HSMONLINE.EDU.NP
London<br> </div>
Paris<br>
Tokyo
</div> </body>
<div id="section"> </html>
<h2>London</h2>
<p>London is the capital city of England. It is the
most populous city in the United Kingdom,
with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has been
a major settlement for two millennia,
its history going back to its founding by the
Romans, who named it Londinium.</p>
</div>
The <form> Element
HTML forms are used to collect user input.
The <form> element defines an HTML form:
HTML forms contain form elements.

Form elements are different types of input elements,
checkboxes, radio buttons, submit buttons, and more.

The <input> Element
The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of many choices)
submit Defines a submit button (for submitting the form)

<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not
visible.</p>
<p>Also note that the default width of a
text input field is 20 characters.</p>
</body>
</html>
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<!DOCTYPE html>
<html>
<body>
<form>SEX:
<input type="radio" name="sex"
value="male" checked> Male
<input type="radio" name="sex"
value="female"> Female
</form>
</body>
</html>
The Submit Button
<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<!DOCTYPE html>
<br><br>
<html>
<input type="submit" value="Submit">
<body>
</form>
<form action="action_page.php">
<p>If you click the "Submit" button, the
First name:<br>
form-data will be sent to a page called
<input type="text" name="firstname"
"action_page.php".</p>
value="Mickey">
<br>
</body>
Last name:<br>
</html>
<input type="text" name="lastname"
value="Mouse">
The <select> Element (Drop-Down List)
The <select> element defines a drop-down list:
The <option> elements defines the options to select.

The list will normally show the first item as selected.
You can add a selected attribute to define a predefined
option.

<!DOCTYPE html>
<html>
<body>
<select name=“EDUCATION LEVEL">
<option value=“BELOW SLC">BELOW SLC</option>
<option value=“SLC">SLC</option>
<option value=“+2">+2</option>
<option value=“BACHELOR">Bachelor</option>
<option value=“MASTERS">Masters</option>
<option value=“PHD">PHD</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10"
cols="30">
Write your text here....
</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
Input Type Password
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

HTML <input> checked Attribute
<form action="/action_page.php">
<input type="checkbox" name="vehicle" value="Bike"> I have a
bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I
have a car<br>
<input type="submit" value="Submit">
</form>

Web Page Designing: Unit - 10

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Page Designing: Unit - 10

Hochgeladen von

Copyright:

Verfügbare Formate

Web Page Designing

 It is used for basic layout creating or designing the web

 Highly flexible and user friendly.

 Need to write lot of code for making simple webpage.

Prepared By Niraj Shrestha

The HTML <b> element The HTML <strong> element

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

Attributes provide additional information about an element

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

Unordered List: Ordered List:

Prepared By Niraj Shrestha

<h2>Unordered List with Default Bullets</h2>

list-style-type:circle The list items will be marked with circles

Prepared By Niraj Shrestha

<h2>Unordered List with Disc Bullets</h2>

<h2>Unordered List with Circle

<h2>Unordered List with Square

<h2>Unordered List without Bullets</h2>

Prepared By Niraj Shrestha

<h2>Ordered List with Numbers</h2>

<h2>Ordered List with Letters</h2>

<h2>Ordered List with Lowercase

<h2>Ordered List with Roman Numbers</h2>

<h2>Ordered List with Lowercase Roman

<h2>A Description List</h2>

Number First Name Last Name AGE

Prepared By Niraj Shrestha

 Tables are defined with the <table> tag.

 A table row can also be divided into table headings with

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

HTML forms contain form elements.

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

The <option> elements defines the options to select.

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

Prepared By Niraj Shrestha

Das könnte Ihnen auch gefallen