Scribd
Upload
42 views35 pages

HTML Lecture Complete

Uploaded by

Tayyib ul Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
42 views35 pages

HTML Lecture Complete

Uploaded by

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

Hypertext Markup Language

(HTML)
By
Fahad Ahmed Satti
HTML =

Overview
HyperText
Markup
Language

 Introduced by: Tim Berners-Lee.


• HTML
– Derived from SGML(Standard Generalized Markup
Language )
– Not a procedural programming language like C, Fortran,
Cobol or Pascal
– HyperText => Links connecting web pages
– MarkUp language
• The notation that is used to indicate how text should be displayed.
• Identify elements of a page so that a browser can render that
page on your computer screen

2
What is HTML? (Theory)
• HTML Tags
– keywords surrounded by angle brackets like <html>
– Normally come in pairs like <b> and </b>
– The first tag in a pair is the start tag, the second tag is the
end tag
– Case insensitive
– Ignores white spaces and unknown attributes
• HTML Documents = Web Pages
– HTML documents describe web pages
– HTML documents contain HTML tags and plain text
– HTML documents are also called web pages
3
What is HTML? (Example)
This course is very hard. <p>This course is very hard.</p>

<p>This course is <b>very</b> hard.</p>

<html>
<body>
<p>This course is <b>very</b> hard.</p>
</body>
</html>

4
Self-Study: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
HTML - Tags
• Open tags
– <name attributes/>
– <hr/>, <br/>
– <img src=“url” width=‘100px’
height=’60px’/>
• Closed tags
– <name attributes> stuff </name>
– <b>text to be bolded</b>
– <h1>level 1 heading text</h1>
• Comments
<!-- comment text -->

5
HTML – Document Structure
< HTML >

Metadata

HEAD

BODY Content

< / HTML>

6
HTML – Document Structure
< HTML >
<head>
<title> Web Engineering Example </title>
…
</head>

<body>
<! - - your web page content and markup - ->
<p>This course is <b>very</b> hard.</p>
</body>

< / HTML>

7
Authoring Tools
• WYSIWYG, Kompozer, Dreamweaver,
FrontPage, HomeSite

• Staying Simple: Just use Notepad


• The best way to learn HTML

8
Building the 2 Web Page (1/6) nd

<html> Output
<head>
</head>
<body>
World Wide Web
The WorldWideWeb (W3) is a wide-area
hypermedia information retrieval initiative
aiming to give universal access to a large
universe of documents.

Everything there is online about W3 is linked


directly or indirectly to this document,
including an executive summary of the
project, Mailing lists , Policy , November's W3
news , Frequently Asked Questions .
</body>
</html>

9
Building the 2 Web Page (2/6) nd

<html> Output
<head>
<TITLE>The World Wide Web project</TITLE>
</head>
<body>
<H1>World Wide Web</H1>
The WorldWideWeb (W3) is a wide-area
hypermedia information retrieval initiative
aiming to give universal access to a large universe
of documents.<BR>

Everything there is online about W3 is linked


directly or indirectly to this document, including
an executive summary of the project, Mailing lists
, Policy , November's W3 news , Frequently Asked
Questions . <Br>
</body>
</html>

10
Building the 2 Web Page (3/6) nd

<html>
<head>
Output
<TITLE>The World Wide Web project</TITLE>
</head>
<body>
<H1>World Wide Web</H1>
<A
The WorldWideWeb (W3) is a wide-area
NAME=0 HREF="WhatIs.html">hypermedia</A>
information retrieval initiative aiming to give universal access to a large
universe of documents.<br>

Everything there is online about W3 is linked directly or indirectly to


this document, including an <A
NAME=24 HREF="Summary.html">executive
summary</A> of the project, <A
NAME=29
HREF="Administration/Mailing/Overview.html">Mailing
lists</A> , <A
NAME=30 HREF="Policy.html">Policy</A> , November's <A
NAME=34 HREF="News/9211.html">W3 news</A> , <A
NAME=41 HREF="FAQ/List.html">Frequently Asked
Questions</A> . <br>
</body>
</html>
11
Building the 2 Web Page (4/6) nd

<html>
<head> Output
<TITLE>The World Wide Web project</TITLE>
</head>
<body>
<H1>World Wide Web</H1>
The WorldWideWeb (W3) is a wide-area <A
NAME=0 HREF="WhatIs.html">hypermedia</A> information retrieval initiative
aiming to give universal access to a large universe of documents.<br>

Everything there is online about W3 is linked directly or indirectly to this document,


including an <A
NAME=24 HREF="Summary.html">executive
summary</A> of the project, <A
NAME=29 HREF="Administration/Mailing/Overview.html">Mailing lists</A> , <A
NAME=30 HREF="Policy.html">Policy</A> , November's <A
NAME=34 HREF="News/9211.html">W3 news</A> , <A
NAME=41 HREF="FAQ/List.html">Frequently Asked Questions</A> . <br>

<H2>
<font face=“Arial" color="red" size="3">
Addendum
</font>
</H2>
<P>Thank you Tim Berners Lee</P>
</body>
</html>
12
Building the 2 Web Page (5/6) nd

<html>
<head> Output
<TITLE>The World Wide Web project</TITLE>
</head>
<body>
<H1>World Wide Web</H1>
The WorldWideWeb (W3) is a wide-area <A
NAME=0 HREF="WhatIs.html">hypermedia</A> information retrieval initiative
aiming to give universal access to a large universe of documents.<br>

Everything there is online about W3 is linked directly or indirectly to this document,


including an <A
NAME=24 HREF="Summary.html">executive
summary</A> of the project, <A
NAME=29 HREF="Administration/Mailing/Overview.html">Mailing lists</A> , <A
NAME=30 HREF="Policy.html">Policy</A> , November's <A
NAME=34 HREF="News/9211.html">W3 news</A> , <A
NAME=41 HREF="FAQ/List.html">Frequently Asked Questions</A> . <br>

<DIV align="center">
<H2>
<font face=“Arial" color="red" size="3">
Addendum
</font>
</H2>
<P>Thank you Tim Berners Lee</P>

</DIV>
</body>
</html>

13
Building the 2 Web Page (6/6) nd

<html>
<head> Output
<TITLE>The World Wide Web project</TITLE>
</head>
<body>
<H1>World Wide Web</H1>
The WorldWideWeb (W3) is a wide-area <A
NAME=0 HREF="WhatIs.html">hypermedia</A> information retrieval initiative aiming
to give universal access to a large universe of documents.<br>

Everything there is online about W3 is linked directly or indirectly to this document,


including an <A
NAME=24 HREF="Summary.html">executive
summary</A> of the project, <A
NAME=29 HREF="Administration/Mailing/Overview.html">Mailing lists</A> , <A
NAME=30 HREF="Policy.html">Policy</A> , November's <A
NAME=34 HREF="News/9211.html">W3 news</A> , <A
NAME=41 HREF="FAQ/List.html">Frequently Asked Questions</A> . <br>

<DIV align="center">
<H2>
<font face=“Arial" color="red" size="3">
Addendum
</font>
</H2>
<P>Thank you Tim Berners Lee</P>

<IMG src="https://www.w3.org/Press/Stock/Berners-
Lee/2001-europaeum-eighth.jpg" />
</DIV>
</body>
</html>
14
HTML Entities
• How can we add the following?
– Less than (<)
– Greater Than (>)
– Equal to (=)
– Space ( )

15
HTML Entities
Character Description Entity Name
non-breaking space &nbsp;
< less than &lt;
> greater than &gt;
& ampersand &amp;
" double quotation mark &quot;
single quotation mark
' &apos;
(apostrophe)
© copyright &copy;
® registered trademark &reg;

<p> 0 &lt; 1 &amp; 100 &gt; 1 =&gt; 0 &lt 100</p>

Modern browsers are smart enough to render characters without using entities but for code clarity and to ensure
extended compliance these should be used.
e.g. <p> 0 <1 & 100> 1 => 0 <100</p> also produces the same output 16
rgb= Red,

HTML – Fundamentals Green, Blue

Colors hsl= hue,


saturation,
lightness
• color = “red” Color HEX RGB
• color = rgb(255, 0, 0) #000000 rgb(0,0,0)
• color = hsl(0, 100%, 50%) #FF0000 rgb(255,0,0)
• color = “#FF0000” #00FF00 rgb(0,255,0)
– Hexadecimal values vary from 00 to #0000FF rgb(0,0,255)
FF
#FF FF FF #FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
• color = rgba(255, 0, 0, 0.5)
• color = hsla(0, 100%, 50%, 0.5)
hsl= Hue,
rgba= Red, Saturation,
Green, Lightness,
Blue, Alpha Alpha 17
HTML – Fundamentals
Headings

• Renders text as a heading, the rendering depending on the


level of heading selected. Headings should be automatically
spaced from the body text.

<h1>Heading 1 level text</h1>


<h2>Heading 2 level text</h2>
<h3>Heading 3 level text</h3>
<h4>Heading 4 level text</h4>
<h5>Heading 5 level text</h5>
<h6>Heading 6 level text</h6>

18
HTML – Fundamentals
Horizontal Lines and Comments

• Horizontal Line
• The <hr /> tag is used to create an horizontal rule (line).
<p>This is a paragraph</p>
<hr>
• Comments
• Comments are ignored by the browser and are not
displayed.
• Make the code readable and understandable
<!-- This is a comment -->
Web Tech 1. Hypertext Markup
19
Language
HTML – Fundamentals
Text Formatting (not recommended , use CSS instead)
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
The <ins> HTML element represents a range of
<ins> text that has been added to a document.
<del> Defines deleted text
Deprecated. Use <del> instead (strikethrough
<s> tag)
<strike> Deprecated. Use <del> instead

Web Tech 1. Hypertext Markup


20
Language
HTML – Fundamentals
Style Attribute

• The style attribute is a new HTML attribute.


• It introduces CSS to HTML.
• Purpose: To provide a common way to style all
HTML elements.
• HTML Style Examples
– style="background-color : yellow"
– style="font-size:10px"
– style="font-family : Times"
– style="text-align : center"
Web Tech 1. Hypertext Markup
21
Language
HTML – Fundamentals
Style Attribute

• <html>
• <body style="background-color : PowderBlue;">
• <h1>Look! Styles and colors</h1>
• <p style="font-family:verdana; color:red">
• This text is in Verdana and red</p>
• <p style="font-family:times; color:green">
• This text is in Times and green</p>
• <p style="font-size:30px">This text is 30 pixels high</p>
• </body>
• </html>

Web Tech 1. Hypertext Markup


22
Language
Hyperlinks: Essence of Hypertext
• Anchor Tag
– <a href=“url”> description </a>
<p>Kalfoglou and Schorlemmer presented
<a href=“http://citeseer.ist.psu.edu/2146170”>
Information Flow based Ontology Mapping</a> at the
International Conference …</p>

http://citeseer.ist.psu.edu/2146170

Web Tech 1. Hypertext Markup Langua 23


ge
More about Hyperlinks
• Relative Paths (Recommended)
– Same directory: <a href=“file.html”>…
– Parent directory: <a href=“../file.html>…
• Target Attribute
– <a href=“url” target=“_blank”>…</a>

Web Tech 1. Hypertext Markup Langua 24


ge
HTML – Fundamentals
Lists

Unordered list Ordered list

<ul type=‘disc’> <ol type=“i” start=“2”>


<li>apples</li> <li>apples</li>
<li>bananas</li> <li>bananas</li>
<li>grapes</li> <li>grapes</li>
<li>strawberries</li> <li>strawberries</li>
</ul> </ol>

25
HTML – Fundamentals
Lists

Unordered list Ordered list

• apples II. apples


• bananas III. bananas
• grapes IV. grapes
• strawberries V. strawberries

What is Definition List?

26
27
HTML – Fundamentals
Tables
<TABLE BORDER=“1”>
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>

28
HTML – Fundamentals
Tables

• BORDER=value

• ALIGN=left|right|center

• CELLSPACING=value

• CELLPADDING=value

• WIDTH=value|percent
• Height = value only!

29
HTML – Fundamentals
Tables
<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2”
ALIGN="RIGHT">
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>

30
HTML – Fundamentals
Tables

rowspan and colspan

31
HTML – Fundamentals
<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">
<TR>
<TD colspan=2 align='center'>
<font color="red"><b>Student Grades</b></font>
</TD>
</TR>
<TR>
<TD><b>Student</b></TD>
<TD><b>Grade</b></TD>
</TR>
<TR>
<TD>Tom</TD>
<TD rowspan=2>A</TD>
</TR>
<TR>
<TD>Sue</TD>
</TR>
</TABLE>

32
Screen Compatibility
1280 x 1024

1024 x 768

800 x 600

640 x 480

33
HTML – Fundamentals
Tables

• Tables are frequently used to layout the basic web page design.
1280

640 34
Questions?

THANK YOU

Copyright 2005 - The Small Business


35
Depot

You might also like