Scribd
Upload
8 views

Lec 1

Uploaded by

umarmalikk64
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Lec 1

Uploaded by

umarmalikk64
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Hyper Text Markup Language (HTML)

1. Hyper Text Markup Language (HTML):


HTML – Hyper-Text Markup Language – The Language of Web Pages on the World Wide Web.
It defines the structure of webpages and determines how data is displayed in the browser.
HTML is a text formatting language. It is a set of special instructions that can be added in the
text to add formatting and linking information. HTML is directly interpreted by the browser.

The name HTML defines the major functions of HTML which are

Hypertext: It allows for non-linear linking to other documents

Markup Language: Content is “marked up” or tagged to tell the browser how to display it

HTML standards are developed under the authority of the World Wide Web Consortium (W3C),
headed by Tim Lee (http://www.w3c.org)

1.1 History of HTML:

HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland. It was designed to allow
scientists to display and share their research. By 1995, lots of browsers had added their own
bits to HTML. Dan Connolly and colleagues collected all the HTML tags that were widely used
and collated them into a draft document. This release is called HTML-2. In 1997, the newer
version of HTML (HTML 3.2) was released. It was the first version developed and standardized
exclusively by the W3C. HTML 3.2 included the support for applets, text flow around images,
subscripts and superscripts etc. In 1999, HTML 4.1 was launched. It extends HTML with
mechanisms for style sheets, scripting, frames etc. The current version of HTML is HTML5
which is still under development.

2. HTML instructions:
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like
<html>), within the web page contents. Tags are instructions that are directly embedded into
the text of the document. It is a signal to a browser to do something before just throwing text
on the screen. A HTML instruction begins with open angle bracket < and ends with close angle
bracket > while a closing instruction is written as </tag>. We can write a HTML instruction or tag
as <html>, where html is the instruction enclosed in angle brackets and its closing tag is written
as </html>.

HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as
singular elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the
second tag is the end tag (they are also called opening tags and closing tags). In between these
tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or
audible web pages. The browser does not display the HTML tags, but uses the tags to interpret
the content of the page.

2.1 Basic structure of a HTML page:

We start a HTML page by <html> instruction and end the page by </html> instruction. Between
these tags, there are two section of the web page

The head section: The head section of the webpage includes all the stuff that does not show
directly on the resulting page. Usually, we add the following information about the web page in
the head section

 In head section we add the title of the page. The <title> and </title> tags encapsulate
the title of your page. The title is what shows in the top of your browser window when
the page is loaded
 Another thing you will often see in the head section is meta-tags. Meta-tags are used
for, among other things, to improve the rankings in search engines
 Usually, we write client-side scripts in the head section and CSS styles are also defined in
the head section
The body section: The body of the document contains all that can be seen when the user loads
the page.

The basic structure of a web page is given below Title of the p


<html>
<head>
<title> title of the page</title>
</head>
<body>
Contents of the page
</body> Conte
</html>

2.2 How to create a basic web page:

1. Open Notepad
2. Click on File -> Save as…
3. In the File name pull-down box, type in webpage.html
4. Click on Save
5. Type in content for your file
6. Once you finished the content, click on File -> Save

1.3 Example of a basic HTML page:


Below is an example of a basic html page which displays a welcome message in the browser
window
<html>
<head>
<title> My first HTML page </title>
</head>
<body>
Welcome to HTML
</body>
</html>

Output of the above program is shown below

Title of the page

2. The body tag:


Contents of the body
In HTML each instruction has some attributes. These attributes are used to control the behavior
of the instruction. We add these attributes inside the instruction. The body tag is used to start a
body section in the web page. When we use the body tag, it displays the contents of the page
on a white background and the default color of the text is black. HTML provides some attributes
to control the behavior of the body tag. These tags are used to control the background and text
color of the web page. The attributes of the body tag are
• BGCOLOR: Change the background color
• Example: <body bgcolor=”color-name”>
• BACKGROUND: Place an image at background
• Example: <body background=”image reference”>
• TEXT: Change the color of the body text
• Example: <body text=”text-color”>
If we replace the following line in the previous example, the output is shown below
<body bgcolor=”pink” text=”red”>

Text=“red”
bgcolor=“pink”

If we use the background attribute in the previous example where we set an image image.jpg at
the background of the page, the output will be:
<body background=”image.jpg”>

Image at background
3. Text formatting instructions in HTML:
Following are the basic text formatting instructions in HTML
4.1 Starting a paragraph: HTML provides <p> tag to start a paragraph while </p> tag ends
the paragraph. The major attribute of the <p> tag is align, which vertically align the paragraph.
The possible values of align attribute are center, left, right and justify
Example: <p align=:”justify”> paragraph text </p>
4.2 Break line: <br> tag is used to give one line break in the text. It is a singular tag (it does
not have a closing tag) and has no attribute
4.3 Heading: HTML provides heading tag to add heading tag in the web page. This tag is
paired tag and has six possible forms <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. <h1> displays the
greatest heading while <h6> is the smallest heading.
Example: <h1> heading text </h1>
4.4 Horizontal line: <hr> tag is used to draw a horizontal line. The attributes of the <hr> tag
are:
Size: fatness of the line
Width: controls the width of the line. Its value may be in pixels or percentage
Color: sets the color of the line
Align: horizontally aligns the line
Example: <hr color=”red” size=”4” width=”20%” align=”center”>
4.5 Text styles: These tags are used give style to text. <b> tag is used to make text bold, <i>
tag is used to make text italic and <u> tag is used underline the text. We can use these tags as
<b>Text </b>
4.6 Center: <center> tag is used to display contents at the center of the web page. Anything
written in <center> and </center> tags is displayed at the center of the web page.
4.7 Font: <font> tag is used to control the appearance of the font on the web page. The
common attributes of the <font> tag are
 FONTFACE: Sets the specified font name
 SIZE: Size of the text (between 1 and 7)
 COLOR: Set the color of the text
Example: <FONT FONTFACE=“COMIC SANS MS” SIZE=6 COLOR=RED> Welcome</FONT>
4.8 Some more text formatting tag:
<pre>…… </pre>: element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks.
<Strike>……</Strike>: The <strike> tag defines strikethrough text.
<SUB>……</SUB>: displays the text in subscript
<SUP>……</SUP>: displays the text in superscript format
4.9: Special characters:
 Non-breaking space: &nbsp;
 Copyright: &copy; ©
 Registration mark: &reg; ®
 Fraction one qtr: frac14; ¼
 Greater-than sign: &gt; >
 Less-than sign: &lt; <
 Trademark sign: &trade; ™

4. Lists in HTML:
HTML provides three types of lists.
5.1 un-ordered lists: An unordered list is simply a list of related items whose order
does not matter. We can start an unordered list with <ul> tag while <li> tag is used to add items
in the list. Type attribute is used to set the type of the mark which precedes the item. It has the
values fillround, square etc.
Example:
<html>
<head> Use of type attribute
<title> HTML lists </title>
</head>
<body> List items
<ul type="square">
<li>Punjab</li>
<li>KPK</li>
<li>Balochistan</li> Output: Un-ordered list
<li>Sindh</li>
</ul>
</body>
</html>

1.3 Ordered lists: An ordered list is defined using the <ol> tag, and list items placed inside of an
ordered list are preceded with numbers instead of bullets. An order is started with <ol> tag
while <li> tag is used to add items in the list. Type attribute is used to set the type of the
numbers, start attribute is used to set the number of the first list item and value attribute is
used to change the number sequence in the middle of an ordered list.
Example:
<html>
Start attribute
<head>
<title> HTML lists </title>
</head>
<body>
<ol type="1" start="4">
<li>Punjab</li> List attribute
<li>KPK</li>
<li>Balochistan</li>
<li value="10">Sindh</li>
</ol>
</body> Value attribute
</html> Output: Ordered list

1.4 Description/definition lists: Another type of list seen online (but not as often as unordered
or ordered lists) is the description list. Description lists are used to outline multiple terms
and their descriptions, as in a glossary, for example. <dl> tag starts a description list, <dt>
adds description term and <dd> adds description of the term.
Example:
<html>
<head>
<title> HTML lists </title>
</head>
<body>
<dl>
<dt>Islamabad
<dd>It is the capital of Pakistan
<dt> Karachi
<dd> it is the largest city of Pakistan
<dt> Lahore
<dd> This city is famous for its historical background
</body>
</html>

Description term

description

Output: Description list

You might also like