Web System and Technology: Mudassar Mahmood Mirza

Web System and
Technology
Lecture 2 Mudassar Mahmood Mirza
HTML History
 HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages.
 HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995. HTML 4.01 was a
major version of HTML and it was published in late 1999. Though HTML 4.01
version is widely used but currently we are having HTML-5 version which is an
extension to HTML 4.01, and this version was published in 2012
Hyper Text Markup Language
 Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML
to simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
 Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers.
 Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
Basic HTML Document
 <!DOCTYPE html>
 <html>
 <head>
 <title>This is document title</title>
 </head>
 <body>
 <h1>This is a heading</h1>
 <p>Document content goes here.....</p>
 </body>
 </html>
HTML TAGS
 HTML is a markup language and makes use of various tags to format the
content.
 These tags are enclosed within angle braces <Tag Name>.
 Except few tags, most of the tags have their corresponding closing tags.
 For example, <html> has its closing tag</html> and <body> tag has its
closing tag </body> tag etc.
Basic Tags with description
 Tag
 <!DOCTYPE...> This tag defines the document type and HTML version.
 <html> This tag encloses the complete HTML document and mainly comprises of document
header which is represented by <head>...</head> and document body which is
represented by <body>...</body> tags.
 <head> This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.
 <title> The <title> tag is used inside the <head> tag to mention the document title.
 <body> This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p> etc.
 <h1> This tag represents the heading.
 <p> This tag represents a paragraph.
HTML Document Basic Structure
The <!DOCTYPE> Declaration

<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE> Declaration
 The <!DOCTYPE> declaration tag is used by the web browser to understand

the version of the HTML used in the document. Current version of HTML is 5
and it makes use of the following declaration:
 <!DOCTYPE html>
Heading Tag
 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.
Heading Tag
<!DOCTYPE html>
<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:
Paragraph Tag
 <!DOCTYPE html>
 <html>
 <head>
 <title>Paragraph Example</title>
 </head>
 <body>
 <p>Here is a first paragraph of text.</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.
 The <br /> tag has a space between the characters br and the forward slash.
If you omit this space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and just use <br> it is not
valid in XHTML.
Line Brake
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Prof</p>
</body>
</html>
Centering Content
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
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
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
Tags And description
Tags Description
<strike> element is displayed with strikethrough
<tt> Mono spaced font
<sup> element is written in superscript
<sub> element is written in subscript
<big> one font size larger than the rest of the text
<small> one font size smaller than the rest of the text
<button> Adds a Button
<abbr> Used to define abbreviation

HTML Lists
 Creates data in the list format (ordered/bulleted)

 <ul>
<li>BSCS</li>
<li>ADP</li>
<li>MCS</li>
</ul>
 <ul style="list-style-type:circle;">
 <ul style="list-style-type:square;">
 <ol type="1">
 <ol type="A">
 <ol type="a">
 <ol type="I">
 <ol type="i">
 <ol start="50">
Images and links
 Images <img>
Used to add images in web
Syntax
<img src=“abc.jpg" alt="W3Schools.com" width="104" height="142">
 Links <a href>

Used to create a link to another web page
Syntax
<a href=“first.html">This is a link</a>
Attributes
 HTML tags can contain one or more attributes. Attributes are added to a tag
to provide the browser with more information about how the tag should
appear or behave. Attributes consist of a name and a value separated by an
equals (=) sign.
 The href Attribute

 The src Attribute
 The width and height Attributes
 The alt Attribute
 The style Attribute
 The title Attribute
Link
 HTML Link Colors

 By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Links - The target Attribute
 The target attribute specifies where to open the linked document.

 The target attribute can have one of the following values:
 _blank - Opens the linked document in a new window or tab
 _self - Opens the linked document in the same window/tab as it was clicked
(this is default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 <a href=“first.html" target="_blank">My page</a>

Image as link
 <a href="default.asp">
<img src="smiley.gif" alt=“Not Found" style="width:42px;height:42px;border:0;">
</a>
Link Titles
 <a href=“First.html" title=“My first Page">Visit My Page</a>
Image as backgroud
 <body >
<h2>Background Image</h2>
</body>
 <body>
<p style="background-image:url('clouds.jpg');">
...
</p>
</body>
 <body style="background-image:url('rm.jpg'); background-position: center; background-repeat: no-repeat;">
Image maping
 The <map> tag defines an image-map. An image-map is an image with clickable areas.
 <img src=“abc.jpg" alt=“test" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt=“Rect1" href=“1.htm">
<area shape="rect" coords="290,172,333,250" alt=“Rect2" href=“2.htm">
<area shape="circle" coords="337,300,44" alt=“circle" href=“3.htm">
</map>
Tables
 Defining an HTML Table

 An HTML table is defined with the <table> tag.
 Each table row is defined with the <tr> tag.
 A table header is defined with the <th> tag. By default, table headings are
bold and centered.
 A table data/cell is defined with the <td> tag.
Table Example
 <table style="width:100%">
<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>
Quiz 1……………………………….15
 Q1- Write HTML code to show any image as a
hyperlink…..……..7
 Write Html Code which contains ………..8
An Ordered List of 5 items which starts with no. “30”
A hyper link to www.google.com
A paragraph containing Text “ A2B3 + C2D + EF3”

Web System and Technology: Mudassar Mahmood Mirza

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web System and Technology: Mudassar Mahmood Mirza

Uploaded by

Copyright:

Available Formats

Web System and

The <!DOCTYPE> Declaration

 The <!DOCTYPE> declaration tag is used by the web browser to understand

 Horizontal lines are used to visually break-up sections of a document. The

 Horizontal lines are used to visually break-up sections of a document. The

<strike> element is displayed with strikethrough

<tt> Mono spaced font

<sup> element is written in superscript

<sub> element is written in subscript

<button> Adds a Button

<abbr> Used to define abbreviation

 Creates data in the list format (ordered/bulleted)

 Links <a href>

 The href Attribute

 HTML Link Colors

 The target attribute specifies where to open the linked document.

 <a href=“first.html" target="_blank">My page</a>

 Defining an HTML Table

You might also like