Scribd
Upload
72 views

HTML Introduction - PHP Lecture 2 PDF

The document discusses HTML (Hypertext Markup Language) and web technologies. It covers HTML fundamentals including tags, elements, and the basic structure of an HTML document. It also describes various HTML tags for formatting text, images, links, and other content. The document provides examples of HTML code and explanations of concepts like headings, comments, and colors in HTML.

Uploaded by

Dimitrios Loumpas
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
72 views

HTML Introduction - PHP Lecture 2 PDF

The document discusses HTML (Hypertext Markup Language) and web technologies. It covers HTML fundamentals including tags, elements, and the basic structure of an HTML document. It also describes various HTML tags for formatting text, images, links, and other content. The document provides examples of HTML code and explanations of concepts like headings, comments, and colors in HTML.

Uploaded by

Dimitrios Loumpas
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

EC201 – Web Technologies I

Hypertext
ype e Markup
a up Language
a guage
(HTML)

http://freepdf-books.com
Assignment
g # 1 – Due date 20 April, 2009
2

Question # 1
Q
a) What’s your (most) favorite web site?
„ How did you find it?
„ Does it have any flaws?
b) What’s the web site you dislike the most?
„ From those you need to use
„ Why do you need to use it?
„ What can you do to change the site?
„ What are the good things about this site?
† Evaluate both sites based on the prior criteria
criteria.
Question # 2
† What different types
yp of websites exists? Explain
p each
category with examples.

http://freepdf-books.com
Overview
3

… Introduced by: Tim Berners


Berners‐Lee
Lee.
… HyperText Markup Language (HTML)
† Derived from SGML ((Standard Generalized Markup
p
Language )
† Not a procedural programming language like C,
Fortran Cobol or Pascal
Fortran,
† 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 p
page
g on yyour computer
p screen

http://freepdf-books.com
HTML Fundamentals
4

… HTML Tags
g
† 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

http://freepdf-books.com
HTML ‐ Fundamentals
5

… Open
p tags
g
† <name attributes/>
† <hr/>, <br/>
† <img
i src=“url”
l width=‘100px’
id h 100
height=’60px’/>
… Closed tags
g
† <name attributes> stuff </name>
† <b>text to be bolded</b>
† <h1>level
l l1h heading /
d text</h1>
… Comments
<!-- comment text -->

http://freepdf-books.com
HTML – Fundamentals
Document Structure
6

< HTML >

Header

Body

< / HTML>

http://freepdf-books.com
HTML – Fundamentals
Basic Structure
7

<html>
<head>
<title> The title of your html page </title>
…
</head>
<body>

<! ‐ ‐ your web page content and markup ‐ ‐>

</body>
</html>

http://freepdf-books.com
Various HTML Elements
8

http://freepdf-books.com
Writingg and Savingg an HTML File
9

School of Electrical Engineering and Computer Science,NUST.


http://freepdf-books.com
Authoringg Tools
10

… WYSIWYG, Kompozer, Dreamweaver, FrontPage,


HomeSite

… Staying Simple: Just use Notepad


… The best way to learn HTML

Web Tech 1. Hypertext Markup Language


http://freepdf-books.com
HTML – Fundamentals
11

<html>
<head>
/
</head>
<body>
Mike Tyler
PO Box 190387 Output
Hungry Horse, Mt 59919
</body>
</html>

http://freepdf-books.com
HTML ‐ Fundamentals
12

<html>
<head>
</head>
<body>
<h1>Mike Tyler</h1>
PO B
Box 190387<b
190387<br>>
Hungry Horse, Mt 59919<br>
Output
</body>
<html>

http://freepdf-books.com
HTML ‐ Fundamentals
13

<html>
<head>
</head>
<body>
<font face=“Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br>
Output
</font>
</body>
<html>
h l

http://freepdf-books.com
HTML ‐ Fundamentals
14

<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br> Output
Hungry Horse, Mt 59919<br></font>
</p>
</body>
<html>
http://freepdf-books.com
HTML ‐ Fundamentals
15

<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
<img src="file:///c:/mike.jpg"/>
</p>
</body>
<html> Output
http://freepdf-books.com
HTML ‐ Fundamentals
16
<html>
<head>
h d
</head>
<body>y
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike
h1 Mik TTyler</h1>
l /h1
PO Box 190387<br>
g y Horse, Mt 59919<br></font>
Hungry
<img src="file:///c:/mike.jpg"/><br>
<a href=“biopage.html”>Read my Bio</a>
</ >
</p>
</body>
<html> http://freepdf-books.com
HTML ‐ Fundamentals
17

Output
http://freepdf-books.com
Miscellaneous
18

… Most Common Character Entities


… Colors
Color HEX RGB
Character Description Entity Name #000000 rgb(0,0,0)
space &nbsp; #FF0000 rgb(255,0,0)
< l
less than
h &lt;
l #00FF00 rgb(0 255 0)
rgb(0,255,0)
> greater than &gt; #0000FF rgb(0,0,255)
& ampersand &amp; #FFFF00 rgb(255,255,0)
" quotation mark &quot; #00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
g ( , , )
#FFFFFF rgb(255,255,255)
Web Tech 1. Hypertext Markup Language
http://freepdf-books.com
HTML – Fundamentals
Colors
19

color = “red”
red
color = “#FF0000”
Hexadecimal values vary from 00 to FF
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

#FF FF FF

Red Blue

Green

http://freepdf-books.com
HTML – Fundamentals
Headings
20

… 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>Headingg 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>

http://freepdf-books.com
HTML – Fundamentals
Horizontal Lines and Comments
21

… Horizontal Line
„ The <hr /> tag is used to create an horizontal rule (line).
<p>This
p is a p
paragraph</p>
g p /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 Language


http://freepdf-books.com
HTML – Fundamentals
Text Formatting (not recommended , use CSS instead)
22

Tag Description
<b>
b D fi
Defines b
bold
ld text
<big> Defines big text
<em> Defines emphasized text
<i>
i D fi
Defines it
italic
li ttextt
<small> Defines small text
<strong> Defines strong text
< b>
<sub> D fi
Defines subscripted
b i t d ttextt
<sup> Defines superscripted text
<ins> Defines inserted text
<d l>
<del> D fi
Defines d
deleted
l t d ttextt
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated Use styles instead
Deprecated.

Web Tech 1. Hypertext Markup Language


http://freepdf-books.com
HTML – Fundamentals
Style Attribute
23

… 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=
style="font‐size:10px"
font‐size:10px
† style="font‐family : Times"
† style=
style="text‐align
text align : center"
center
Web Tech 1. Hypertext Markup Language
http://freepdf-books.com
HTML – Fundamentals
Style Attribute
24

… <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>
… </ht l>
</html>
Web Tech 1. Hypertext Markup Language
http://freepdf-books.com
Hyperlinks:
yp Essence of Hypertext
yp
25

… 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 Language
http://freepdf-books.com
More about Hyperlinks
yp
26

… Relative Paths (Recommended)


† Same directory: <a href=“file.html”>…
† Parent directory: <a
a href
href=“../file.html>…
../file.html …
… Target Attribute
† <a href=“url”
href url target
target=“_blank
blank”>…</a>
>…</a>
… Named Anchors
† <a name= ec201 >Web Technologies</a> …
name=“ec201”>Web
† Within the page: <a href=“#ec201”>…

† From other pages: <a href


href=“course.html#ec201”>…
course.html#ec201 >…
Web Tech 1. Hypertext Markup Language
http://freepdf-books.com
HTML – Fundamentals
Lists
27

Unordered list Ordered list

<ul type=
type=‘disc’>
disc > <ol type=‘i’
type= i start=
start=‘2’>
2>
<li>apples</li> <li>apples</li>
<li>bananas</li> <li>bananas</li>
<li>grapes</li> <li>grapes</li>
<li> t
<li>strawberries</li>
b i </li> <li> t
<li>strawberries</li>
b i </li>
</ul> </ol>

http://freepdf-books.com
HTML – Fundamentals
Lists
28

Unordered list Ordered list

… apples II
II. apples
… bananas III. bananas
… grapes IV
IV. grapes
… strawberries V. strawberries

What is Definition List?

http://freepdf-books.com
HTML – Fundamentals
Tables
29

<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>
http://freepdf-books.com
HTML – Fundamentals
Tables
30

… BORDER=value

… ALIGN=left|right|center

… CELLSPACING=value

… CELLPADDING=value

… WIDTH=value|percent

http://freepdf-books.com
HTML – Fundamentals
Tables
31

<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2”


ALIGN "RIGHT">
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>
http://freepdf-books.com
HTML – Fundamentals
Tables

rowspan and colspan

32
http://freepdf-books.com
HTML – Fundamentals
33
<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>S </TD>
<TD>Sue</TD>
</TR>
</TABLE>
http://freepdf-books.com
Screen Compatibility
p y
34

1280 x 1024

1024 x 768

800 x 600

640 x 480

http://freepdf-books.com
HTML – Fundamentals
Tables

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

640 35
http://freepdf-books.com
Next Class
36

… Advance HTML
† Forms, Frames, Embedded Objects …

Web Tech 1. Hypertext Markup Language


http://freepdf-books.com
Resources
http://www w3schools com/
http://www.w3schools.com/
37

… HTML Tutorials … XML Tutorials ‰ .NET (dotnet)


Learn HTML Learn XML .NET
NET Microsoft
Learn XHTML Learn XSL .NET ASP
Learn CSS Learn XSLT .NET Mobile
Learn TCP/IP Learn XSL‐FO
Learn XPath ‰ Multimedia
Learn XQuery Learn Media
… Browser Scripting Learn SMIL
Learn JavaScript Learn XLink Learn SVG
Learn DHTML Learn XPointer Learn Flash
Learn VBScript Learn DTD
Learn HTML DOM Learn Schema ‰ Web Building
Learn WMLScript Learn XML DOM Web Building
Learn XForms Web W3C
Learn SOAP W bB
Web Browsers
… Server Scripting Learn WSDL Web Quality
Learn SQL Learn RDF Web Semantic
Learn ASP Learn RSS Web Careers
Learn ADO Learn WAP Web Hosting
Learn PHP Web Certification

http://freepdf-books.com

You might also like