Scribd
Upload
22 views37 pages

Web Lec1

Uploaded by

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

Web Lec1

Uploaded by

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

Web Designing

National College of Business Administration & Economics

Assistant Professor Dr. Rabbia Alamdar


Lecture objectives
HTML 5:
• Learn the anatomy of HTML syntax to structure your websites.
• Understand the HTML boilerplate and HTML doc types.
• How to structure text in HTML.
• How to structure HTML lists to create unordered and ordered lists.
• How to insert images using HTML
• How to create hyperlinks using anchor tags.
Anatomy of HTML syntax to structure your
websites
• HTML stands for Hyper Text Markup Language. Developed in early
1990s.
• HTML is not a programming language. It is used to define text,
graphics, audio and video in web page.
• HTML command are known as Tags. The HTML tags are surrounded
by angle brackets <>.
• The tags normally come in pair.
• The element is a command that tell a browser to do something. The
text between the start and end tag is called element content.
Start tag Element content End tag
<h1> This is a Heading </h1>

<p> This is paragraph. </p>


Minimum requirement to create a web page
• Text Editor: it is use to write the HTML commands using any simple
txt editor like Notepad.

• Web browser: it is use to test the web page.


Structure of HTML Document
<HTML>
<HEAD>
Head Section
</HEAD>

<BODY>
</BODY> Actual Document

</HTML>

• Head Section identify the heading or title of document. The tag


<title> </title> can appear only in this section. The text in the title tag
appears in the browser’s window.
• Body Section, the txt in this section appears on the web page.
HTML Document Structure
Practice 1.1
• Write the code that display a simple message on the web page.
Steps to do 1.1
• Open notepad
• Type the following code:
<HTML>
<HEAD>
<title> it is my first web page </title>
</HEAD>

<BODY>
HTML Stands for Hyper Text Markup Language
</BODY>
</HTML>
• Save the file with .html extension
• Double clock on the file. The page will open with browser.
Attributes of <body> tags

Example
<body bgcolor =“red” TEXT =“yellow”>
<body background =“mypic.jpg” TEXT =“yellow”>
Heading
• Heading is an important tag in the body of HTML document. It is use
to display the different font size of heading
• Attribute of heading tag:

Attribute Description
ALIGN It specifies the alignment of the heading.
The possible values are center, right, and
left. The default value is left
Practice 1.2
• Write a code that display SIX types of heading on the webpage.
Steps to do 1.2
• Open notepad and type the following code:
<HTML>
<body>
<h1> My 1st heading </h1>
<h2> My 2nd heading </h2>
<h3> My 3rd heading </h3>
<h4> My 4th heading </h4>
<h5> My 5th heading </h5>
<h6> My 6th heading </h6>
</body>
</HTML>
• Save the file as “heading.html”
Paragraph in HTML
• Paragraph is used to add text in such a way that it will automatically
adjust the end of the line to suit the window of browser.
<p> this is a paragraph </p>

Attribute Description
ALIGN It specifies the alignment of the heading.
The possible values are center, right, and
left. The default value is left
Practice 1.3
• Write HTML code that displays three paragraph with different
paragraph alignments.
Steps to do 1.3
• Open code editor / notepad and write the following code:
<HTML>
<body>
<p align=“center”> write some text here</p>
<p align=“right”> write some text here</p>
<p align=“left”> write some text here</p>
</body>
</HTML>
• Save the file as “paragraph.html”
Line breaks in HTML
• It can be used to move the control the next line. <br> tag is use to
break the line or end the line . No closing tag is required.
<HTML>
<body>
Three important things in life are: <br> honesty <br>
sincerity <br> and loyalty.
</body>
</HTML>
Practice 1.4
• Write HTML code that display text in four lines using line break tag.
Text Formatting Tags
Tag Description
<b> </b> Specifies the text as bold. Eg. this is bold text
<em> </em> It is a phrase text. It specifies the emphasized text.
Eg. Emphasized text
<strong> </strong> It is a phrase tag. It specifies an important text. Eg. this
is strong text
<i> </i> The content of italic tag is displayed in italic. Eg. Italic
text
<sub> </sub> Specifies the subscripted text. Eg. X1
2
<sup> </sup> Defines the superscripted text. Eg. X
<ins> </ins> Specifies the inserted text. Eg. The price of pen is
now 2015.
<del> </del> Specifies the deleted text. Eg. The price of pen is
now 2015.
<mark> </mark> Specifies the marked text. Eg. It is raining
<br> tag inserts a single line break, it is an empty tag which
means that it has no end tag.
<h1> </h1> Heading tag of different sizes
Font
• Font tag <font> is used to specify the characteristics of font.

Attribute Description
Face It specifies the font of the text.
Size It specifies the font size of the text.
color It specifies the font color of the text.

<font face =“Arial” size =“+1” one size larger </font> <br>
<font face =“Arial” size =“-1” color=“red” one size larger </font>
DIV tag
• Div tag <div> is used to define a section in HTML. It is use to group the
larger section of HTML.

Attribute Description
ALIGN It specifies the alignment of the heading.
The possible values are center, right, and
left. The default value is left
Style It is used to include inline cascading style
sheet
Practice 1.5
• Write HTML code that displays two sections of text with different
formatting with inline CSS using div tag.
Steps to do 1.5
<HTML>
<body>
<div styple=“background-color:orange;text-align:center”>
<p> it is section one</p>
</div>

<div styple=“border:1px;text-align:right”>
<p align=“right”> it is section two</p>
</div>
</body>
</HTML>
HTML Links
• HTML links are defined with <a> tags:
<a href="https://www.ncba.com">This is a link</a>
• The link destination is specified in the href attribute.
Link example
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the &lta&gt tag.</p>

<a href="https://www.xyz.com">This is a link</a>

</body>
</html>
HTML Images
• HTML images are defined with <img> tags.

• The source file (src), alternative text (alt), width, and height are
provided as attributes:
<img src="img_xyz.jpg" alt=“xyz"style="width:120px;height:150px">
Images example
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the &lt;img&gt; tag.</p>

<img src="img_xyz.jpg" alt="" style="width:120px;height:150px">

</body>
</html>
HTML Buttons
• HTML buttons are defined with <button> tags:
<button>Click me</button>
Button
<!DOCTYPE html>
<html>
<body>

<h2>HTML Buttons</h2>

<p>HTML buttons are defined with the &ltbutton&gt tag.</p>

<button>Click me</button>

</body>
</html>
HTML Lists
• HTML lists are defined with <ul> (unordered/bullet list) or <ol>
(ordered/numbered list) tags, followed by <li> tags (list items):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
List example
• <!DOCTYPE html>
• <html>
• <body>
• <h2>An Unordered HTML List</h2>
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• <h2>An Ordered HTML List</h2>
• <ol>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ol>
• </body>
• </html>
HTML Tables
• An HTML table is defined with a <table> tag.
• Table rows are defined with <tr> tags.
• Table headers are defined with <th> tags. (bold and centered by
default).
• Table cells (data) are defined with <td> tags.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Basic tags
Tag Description
Use of Basic Tag
<html> </html> Specifies the document
as a web page.
<html>
<head> </head> Specifies the descriptive <head> Heading goes here…</head>
information about the
web documents. <title> Title goes here…</title>
<body> Body goes here…</body>
<title> </title> Specifies the title of the </html>
web page.

<body> </body> Specifies the body of a


web document.
List tags
Tag Description
<ul> </ul> Specifies an unordered list.
<ol> </ol> Specifies an ordered list.
<li> </li> Specifies a list item.
<dl> </dl> Specifies a description list.
<dt> </dt> Specifies the term in a description list.
<dd> </dd> Specifies description of term in a
description list.
Table Tags
Tag Description

<table> </table> Specifies a table.

<tr> </tr> Specifies a row in the table.

<th> </th> Specifies header cell in the table.

<td> </td> Specifies the data in an cell of the table.

<caption> </caption> Specifies the table caption.

<colgroup> </colgroup> Specifies a group of columns in a table for


formatting.
Practical-1

Create a web page use followings:


• Use formatting tags discussed above
• Use list tags discussed above
• Insert a table.
End of Slides

You might also like