HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

52
HTML, by Dr. Khalil 1 HTML HyperText Markup Language Dr. Awad Khalil Dr. Awad Khalil Computer Science Department Computer Science Department AUC AUC

Transcript of HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

Page 1: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 1

HTML

HyperText Markup Language

Dr. Awad KhalilDr. Awad Khalil

Computer Science DepartmentComputer Science Department

AUCAUC

Page 2: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 2

History of Markup

SGML, the the Standard Generalized Markup Language (1980), (1980), is a more powerful ancestor of XML. SGML is a is a more powerful ancestor of XML. SGML is a text-basedtext-based meta-language used to describe application languages. SGML is meta-language used to describe application languages. SGML is a text-based language that can be used to a text-based language that can be used to markup data – that is, data – that is, add add metadata – in a way which is self describing. Although – in a way which is self describing. Although SGML has many useful features, the complexity of SGML makes SGML has many useful features, the complexity of SGML makes it extremely hard to use and learn.it extremely hard to use and learn.

HTML, the the HyperText Markup Language (1989), is one of the (1989), is one of the best known applications of SGML. HTML was defined to be a best known applications of SGML. HTML was defined to be a universal markup language for the display of information, and universal markup language for the display of information, and the linking of different pieces of information. The idea was that the linking of different pieces of information. The idea was that any HTML document (or any HTML document (or web page) would be presentable in ) would be presentable in any application that was capable of understanding HTML any application that was capable of understanding HTML (termed a (termed a web browser).).

Page 3: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 3

HTML

HTML is the document formatting language used HTML is the document formatting language used to design most Web pages.to design most Web pages.

It is a simple, yet powerful, platform-independent It is a simple, yet powerful, platform-independent document language.document language.

Originally developed by Tim Berners-Lee while Originally developed by Tim Berners-Lee while at CERN but was standardized in November at CERN but was standardized in November 1995.1995.

In early 2000, W3C produced XHTML 1.0 as a In early 2000, W3C produced XHTML 1.0 as a reformulation of HTML 4 in XML.reformulation of HTML 4 in XML.

Page 4: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 4

So Why XML? Unfortunately, SGML is such a Unfortunately, SGML is such a

complicatedcomplicated language that it’s not language that it’s not well suited for data interchange over well suited for data interchange over the web.the web.

And, although HTML has been And, although HTML has been incredibly successful, it’s also incredibly successful, it’s also limitedlimited in its scope; it is only intended for in its scope; it is only intended for displaying documents in a browser.displaying documents in a browser.

Due to these reasons, XML was Due to these reasons, XML was created.created.

XML is a XML is a subset of SGMLsubset of SGML with the with the attempt to make most of the power of attempt to make most of the power of SGML and to make simpler and SGML and to make simpler and easier to learn and use. easier to learn and use.

XML is not really a “language” at all, XML is not really a “language” at all, but a but a standard for creating languages standard for creating languages which meet the XML criteria.which meet the XML criteria.

For example, suppose we have data For example, suppose we have data about a name, and we need to be about a name, and we need to be able to share that information with able to share that information with others. But we also want to be able others. But we also want to be able to use that information in a to use that information in a computer program. Instead of just computer program. Instead of just creating a text file like this:creating a text file like this:

Tamer Soliman

or an HTML file like this:or an HTML file like this:<HTML><HEAD><TITLE>Name</TITLE></HEAD><BODY><P>Tamer Soliman</P></BODY></HTML>

We might create an XML file like this:We might create an XML file like this:<name> <first>Tamer</first> <last>Soliman</last></name>

Page 5: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 5

Who is the World Wide Web Consortium?

The The World Wide Web Consortium ( (W3C) was started in ) was started in 1994, according to their web site (1994, according to their web site (http://www.w3.org), “to ), “to lead the World Wide Web to its full potential by lead the World Wide Web to its full potential by developing common protocols that promote its evolution developing common protocols that promote its evolution and ensure its interoperability”.and ensure its interoperability”.

W3C produces W3C produces recommendations which describe the which describe the basic building blocks of the web.basic building blocks of the web.

HTML recommendation is the most famous contribution recommendation is the most famous contribution of W3C to the web.of W3C to the web.

In 1998, W3C started releasing recommendations for In 1998, W3C started releasing recommendations for XML 1.0, , XSLT, and , and XPath..

Page 6: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 6

What is XML?

Extensible Markup Language (XML), is the latest is the latest buzzword on the Internet, but it’s also a rapidly buzzword on the Internet, but it’s also a rapidly maturing technology with powerful real-world maturing technology with powerful real-world applications, particularly for the management, display applications, particularly for the management, display and organization of data.and organization of data.

Together with its display language (Together with its display language (XSL) and the ) and the standardized Document Object Model (standardized Document Object Model (DOM), it is an ), it is an essential technology for anyone using markup language essential technology for anyone using markup language

on the web or internally.on the web or internally.

Page 7: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 7

HTML Concepts

HTML Tags: HTML tags cover formatting, HTML tags cover formatting,

structural, and semantic markup structural, and semantic markup of an HTML document.of an HTML document.

<HTML><HEAD><TITLE><BODY><A><IMG><B><I><HR>

Good morning <B> Egypt </B> <HR WIDTH="200"> In 1989, <B><I>Tim

Brayners</I></B> developed the first version of HTML

<HTML> <HEAD> <TITLE>Page1</TITLE> </HEAD> <BODY> Good Morning,

<B><I>Egypt</I></B> </BODY> </HTML>

Page 8: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 8

HTML Concepts

<HTML>

<HEAD>

<TITLE>Exercise 1</TITLE>

</HEAD>

<BODY>

Good Morning, <B><I>Egypt</I></B>

</BODY>

</HTML>

Page 9: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 9

HTML Concepts

In 1989, <B><I>Tim Brayners</I></B>developed<HYPNOTIC> the first version of HTML </hypnotic>

Page 10: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 10

HTML Document Structure

<HEAD>

</HEAD> <BODY>

</BODY

Your document goes here

<TITLE>

</TITLE.

Title of your document goes here

</HTML>

<HTML>

HTML document

Bo dy section

Title

Page 11: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 11

Elements of HTML

An element in HTML consists of three parts:An element in HTML consists of three parts: A start tagA start tag ContentContent An end tagAn end tag

Examples:Examples:<B>Egypt</B>

<B><I>Egypt</I></B>

Each element may have a set of attributes:Each element may have a set of attributes:<BODY BGCOLOR=RED TEXT=BLACK>

<IMG SRC=“MyPhoto.jpg” WIDTH=200 LENGTH=300 BORDER=2>

Page 12: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 12

Classification of HTML Elements

Page Structuring Elements

Used to define the structure of Used to define the structure of the page such as:the page such as:

<H1>…</H1>

<H2>…</H2>

<P>

<Div>…</Div>

<BR>

<HR>

<CENTER>

Text Formatting Elements

Used to define the display Used to define the display properties of the text and to properties of the text and to include hyperlinks and other include hyperlinks and other objects such as images and audio:objects such as images and audio:

<B>…</B>

<I>…</I>

<U>…</U>

<A HREF=“URL”>…</A>

<IMG SRC=“URL”>

Page 13: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 13

Methods of Generating HTML Documents

Using Text Editor:Using Text Editor:

Microsoft NotePad

Using HTML Generators:Using HTML Generators: Microsoft Front Page Microsoft Word

Page 14: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 14

A Complete HTML Page

<HTML><HEAD> <TITLE>The Universal Construction Company</TITLE></HEAD><BODY><IMG SRC="welcome.gif"><H1>The Universal Construction Company !</H1><H2>Specialists in Construction Since 1920</H2><CENTER><IMG SRC="logo.gif" HEIGHT=60 WIDTH=100></CENTER><P>Our Company offers a highly specialized group of <B><I>highly experienced engineers</I></B> with the <I><B>state-of-the-art technology </B></I>for constructing modern buildings. Write us at:<BR>P.O. Box 555<BR>Cairo 11511, Egypt<BR>Or visit our<A HREF="http://www.ucc.com/technical/">UCC Technical Site</A><HR></BODY></HTML>

Page 15: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 15

Arranging HTML Elements

<HTML><HTML><HEAD><HEAD>

<TITLE>The Universal Construction Company </TITLE><TITLE>The Universal Construction Company </TITLE><HEAD><HEAD>

   <BODY><BODY><IMG SRC="WELCOME.GIF"><IMG SRC="WELCOME.GIF"><H1>The Universal Construction Company !</H1><H1>The Universal Construction Company !</H1><H2>Specialists in Construction Since 1920</H2><H2>Specialists in Construction Since 1920</H2>

   <CENTER><CENTER><IMG SRC="LOGO.GIF"><IMG SRC="LOGO.GIF"></CENTER></CENTER>

   <P><P>Our company offers a specialized group of <B><I> highly experienced group of Our company offers a specialized group of <B><I> highly experienced group of engineers</I></B> with the <B><I>state-of-the-art technology</I></B> for constructing engineers</I></B> with the <B><I>state-of-the-art technology</I></B> for constructing modern buildings. Write us at:<BR>modern buildings. Write us at:<BR>P.O. BOX 555<BR>P.O. BOX 555<BR>Cairo, Egypt.<BR>Cairo, Egypt.<BR>Or visit ourOr visit our<A HREF="http://www.ucctech.com/">Technical Site</A><A HREF="http://www.ucctech.com/">Technical Site</A>  <HR><HR>

   </BODY></BODY></HTML></HTML>

Page 16: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 16

Rules of White Spaces

HTML doesn’t keep white spacesHTML doesn’t keep white spaces

<TITLE>Good Software<TITLE>

<BODY>

Without

 

Good and

 

robust <B><I>Software</I></B>,

 

you can throw

 

the <B><I>Hardware</I></B> out.

 

</BODY>

Page 17: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 17

Using Element <Pre>…</Pre> for White Spaces

<HTML>

<BODY>

<Pre>

XXXXXXXX XXXXXXXX

YYYYYYYY YYYYYYYY

ZZZZZZZZZ ZZZZZZZZZ

</Pre>

<HR>

<p>

XXXXXXXX XXXXXXXX

YYYYYYYY YYYYYYYY

ZZZZZZZZZ ZZZZZZZZZ

 

</BODY>

</HTML>

Page 18: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 18

Comments

<!-- My comments start here --><!-- My comments start here -->

<!--<!--

The Universal Construction Company Home PageThe Universal Construction Company Home Page

by Awad Khalilby Awad Khalil

Copyright 2002Copyright 2002

-->-->

Page 19: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 19

Referencing Entity Codes

Character Numerical Entity Code

Character Entity Code

““ &#34;&#34; &quot;&quot;

<< &#60;&#60; &lt;&lt;

>> &#62;&#62; &gt;&gt;

&& &#38;&#38; &amp;&amp;

Page 20: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 20

Referencing Entity Codes

Bullet:Bullet: &bull;&bull;

Trademark symbol:Trademark symbol: &trade;&trade;

Copyright symbolCopyright symbol &Copy;&Copy;

Summation symbol:Summation symbol: &sum:&sum:

Square Root symbol:Square Root symbol: &radic;&radic;

Greek Alpha:Greek Alpha: &Alpha;&Alpha;

Greek Delta:Greek Delta: &Delta;&Delta;

Page 21: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 21

Referencing Entity Codes

Khalil &amp; Sons » khalil & Sons

X &lt; Y » X < Y

SONY&Trade; » SONYTM

Page 22: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 22

Using &nbsp;

We hope that you will give us a call at (202)We hope that you will give us a call at (202)

517-3566 soon!517-3566 soon!

We hope that you will give us a call at (202)&We hope that you will give us a call at (202)&nbsp;nbsp;517-3566 517-3566 soon!soon!

Hello.&nbsp;World;

Hello.&#160;World;

Page 23: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 23

Referencing to Colors

ColorColor RGB ValueRGB Value ColorColor RGB ValueRGB Value

WhiteWhite #FFFFFF#FFFFFF FushiaFushia #FF00FF#FF00FF

RedRed #FF0000#FF0000 AquaAqua #00FFFF#00FFFF

GreenGreen #00FF00#00FF00 NavyNavy #000080#000080

BlueBlue #0000FF#0000FF GrayGray #808080#808080

YellowYellow #FFFF00#FFFF00 PurplePurple #800080#800080

Page 24: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 24

Using Colors

Changing color using attributes of the element Changing color using attributes of the element <BODY> AttributeAttribute BGCOLOR

<BODY BGCOLOR=”[colorname]”>

< BODY BGCOLOR =”#[RGB-value]”>

AttributeAttribute TEXT

<BODY TEXT=”[colorname]”>

< BODY TEXT =”#[RGB-value]”>

AttributeAttribute BACKGROUND

< BODY BACKGROUNG =”URL”>

AttributeAttribute LINK <BODY LINK=”[colorname]”> AttributeAttribute VLINK <BODY VLINK=”[colorname]”> AttributeAttribute ALINK <BODY ALINK=”[colorname]”>

Page 25: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 25

Changing Background Color by BGCOLOR

<HTML>

<HEAD>

<TITLE>Black and White Are My Favorite Colors</TITLE>

</HEAD>

<BODY BGCOLOR=”BLACK” TEXT=”WHITE”>

<B>Good Morning, Egypt.</B>

</BODY>

</HTML>

--------------------------------------------------------------------------------------------

<BODY BGCOLOR=”Green”>

<BODY BGCOLOR=”#00FF00”>

Page 26: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 26

Including an Image as a Backgroung

  >>BODY BACKGROUND=BODY BACKGROUND=””RB03.jpgRB03.jpg””<<

Page 27: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 27

Defining the Color of Text

>>BODY TEXT=BODY TEXT=””TEALTEAL””<<

<BODY TEXT=<BODY TEXT=””#008080#008080””>>

Page 28: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 28

Defining the Color of LINK, VLINK, and ALINK

<BODY LINK=<BODY LINK=””GREENGREEN””>>

<BODY LINK=<BODY LINK=””#00FF00#00FF00””>>

<BODY VLINK=<BODY VLINK=””MAROONMAROON””>>

<BODY VLINK=<BODY VLINK=””#800000#800000””>>

<BODY ALINK=<BODY ALINK=””FUSHIAFUSHIA””>>

<BODY ALINK=<BODY ALINK=””#FF00FF#FF00FF””>>

Page 29: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 29

Using the Element <FONT>

Using the attribute Using the attribute Size to define the relative or to define the relative or absolute size of the text.absolute size of the text.

<FONT SIZE=”5”>The Universal Construction Company! </FONT><FONT SIZE=”1”>Copyright &copy; 1988 by Awad Khalil.</FONT>

Using the attribute Using the attribute Color to define the color of the text. to define the color of the text.<FONT COLOR=”[colorname]”><FONT COLOR=”#[RGB-value]”>

Using the attribute Using the attribute Face to define the type of font (e.g.; to define the type of font (e.g.; Arial, Times New Roman, …etc).Arial, Times New Roman, …etc).

<FONT FACE=”Arial”>I lived in Cairo for several years.</FONT><FONT COLOR=”RED” SIZE=”4” FACE=”Garamond”>Call me.</Font>

Page 30: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 30

Examples

<HTML><HTML>

<HEAD><HEAD>

<TITLE>A Splash of my Favorite Colors</TITLE><TITLE>A Splash of my Favorite Colors</TITLE>

</HEAD></HEAD>

<BODY BGCOLOR=<BODY BGCOLOR=””CYANCYAN”” TEXT= TEXT=””#0000AA#0000AA””>>

<H1>Enjoy The Colors</H1><H1>Enjoy The Colors</H1>

<FONT COLOR=<FONT COLOR=””REDRED””>Blood</FONT> is the favorite food of >Blood</FONT> is the favorite food of vampires. All of us enjoy a walk on the vampires. All of us enjoy a walk on the

<FONT COLOR=<FONT COLOR=””GREENGREEN””>grass</FONT>.>grass</FONT>.

The <FONT COLOR=The <FONT COLOR=””#FFFF00#FFFF00””>sun</FONT>beams down.>sun</FONT>beams down.

</BODY></BODY>

</HTML></HTML>

Page 31: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 31

<HTML><HTML><HEAD><HEAD>

<TITLE>The Year 2000</TITLE><TITLE>The Year 2000</TITLE></HEAD></HEAD><BODY BGCOLOR=<BODY BGCOLOR=””YELLOWYELLOW”” TEXT= TEXT=””BLUEBLUE””

LINK=LINK=””MAROONMAROON”” ALINK= ALINK=””GREENGREEN”” VLINK=VLINK=””BROWNBROWN””>>

  <!-- The Body tag attributes specify the color <!-- The Body tag attributes specify the color scheme, such as the background color of scheme, such as the background color of yellow. -->yellow. -->

  <H1> The Millenium Approaches</H1><H1> The Millenium Approaches</H1>  <FONT SIZE=<FONT SIZE=””+5+5””>>

<I>And You<I>And You’’re Invited!</I>re Invited!</I></FONT></FONT>  <P><P>  <FONT COLOR=<FONT COLOR=””PURPLEPURPLE””>Please come to my>Please come to my<B>Celebration of the New Millenium BBQ &amp; <B>Celebration of the New Millenium BBQ &amp;

Poetry Reading</B> to be held on December Poetry Reading</B> to be held on December 3131stst at 7:00 p.m. Anyone reading this page is at 7:00 p.m. Anyone reading this page is invited; send me mail using the link below for invited; send me mail using the link below for more details.</FONT>more details.</FONT>

  <HR><HR><A HREF=<A HREF=””Mailto:[email protected]:[email protected]””>Awad >Awad

KHALIL</A><BR> &copy; 1999, Awad KHALILKHALIL</A><BR> &copy; 1999, Awad KHALIL  </BODY></BODY></HTML></HTML>

Page 32: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 32

<HTML><HTML><HEAD><HEAD>

<TITLE>The Year 2000</TITLE><TITLE>The Year 2000</TITLE></HEAD></HEAD><BODY BGCOLOR=<BODY BGCOLOR=””YELLOWYELLOW”” TEXT= TEXT=””BLUEBLUE”” LINK= LINK=””MAROONMAROON”” ALINK= ALINK=””GREENGREEN’’ VLINK= VLINK=””BROWNBROWN””>><!-- The body tag attributes specify the color scheme, such as the background color of light yellow. --><!-- The body tag attributes specify the color scheme, such as the background color of light yellow. --><CENTER><CENTER>

<H1>The Millenium Approaches</H1><H1>The Millenium Approaches</H1><FONT SIZE=<FONT SIZE=””+5+5”” FACE= FACE=””HelveticaHelvetica””>>

<I>And You<I>And You’’re Invited!</I>re Invited!</I></FONT></FONT>

</CENTER></CENTER><P><P>Please come to myPlease come to my<FONT COLOR=<FONT COLOR=””PURPLEPURPLE””>>

<B>Celebration of the New Millenium BBQ &amp; Poetry Reading</B><B>Celebration of the New Millenium BBQ &amp; Poetry Reading</B></FONT></FONT>to be held on December 31to be held on December 31stst at 7:00 p.m. Anyone at 7:00 p.m. Anyonereading this page is invited; send me mail using thereading this page is invited; send me mail using thelink below for more details.link below for more details.<P><P><CENTER><CENTER>

<FONT COLOR=<FONT COLOR=””BLACKBLACK”” SIZE= SIZE=””44””>><B>Look out!</B> Unfortunately I<B>Look out!</B> Unfortunately I’’ll have to charge $200 for admissionll have to charge $200 for admission</FONT></FONT></CENTER></CENTER><HR><HR><SMALL><SMALL>

<A HREF=<A HREF=””mailto:[email protected]:[email protected]””>Awad KHALIL</A>>Awad KHALIL</A><BR><BR>Copyright &copy; 1999, Awad KHALIL and Adel KamelCopyright &copy; 1999, Awad KHALIL and Adel Kamel

</SMALL></SMALL><BODY><BODY></HTML></HTML>

  

Page 33: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 33

Header Element <H1>,<H2>,….<H6>

There are six levels of headers in HTML:There are six levels of headers in HTML:<H1 ALIGN=“CENTER”>Heading Level One</H1>

<H2 ALIGN=“RIGHT”>Heading Level Two</H2>

<H3 ALIGN=“LEFT>Heading Level Three</H3>

<H4 ALIGN=“JUSTIFY”>Heading Level Four</H4>

<H5>Heading Level Five</H5>

<H6>Heading Level Six</H6>

Attribute: Attribute: ALIGN

ALIGN=“CENTER”

ALIGN=“LEFT”

ALIGN=“RIGHT”

ALIGN=“JUSTIFY”

Page 34: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 34

Paragraph Element <P>

Used to divide the text into paragraphsUsed to divide the text into paragraphs<P ALIGN=LEFT>This is paragraph ONE

<P ALIGN=LEFT>This is paragraph TWO

<P>This is paragraph THREE

<P ALIGN=RIGHT>This is paragraph FOUR

<P ALIGN=CENTER>This is paragraph FIVE

<P ALIGN=JUSTIFY>This is paragraph SIX

Page 35: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 35

Address Element <ADDRESS><ADDRESS>

<A HREF=”MAILTO:[email protected]”>Awad Khalil: [email protected]</A>

</ADDRESS>

-----------------------------------------------------

<ADDRESS>

The American University in Cairo<BR>

113 Kasr El Aini Street <BR>

P.O. Box 2511<BR>

Cairo, Egypt<BR>

Phone: +(202)797-6336<BR>

Fax: +(202)795-7565

</ADDRESS>

Page 36: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 36

Horizontal Line Element <HR>

Good Morning <HR> Egypt!Good Morning <HR> Egypt!

<HR NOSHADE><HR NOSHADE>

<HR SIZE=”1”><HR SIZE=”1”>

<HR SIZE=”2” ><HR SIZE=”2” >

<HR SIZE=”3” ALIGN=RIGHT <HR SIZE=”3” ALIGN=RIGHT WIDTH=200>WIDTH=200>

<HR SIZE=”4”><HR SIZE=”4”>

<HR SIZE=”5” ALIGN=CENTER <HR SIZE=”5” ALIGN=CENTER WIDTH=40%>WIDTH=40%>

<HR SIZE=”10”><HR SIZE=”10”>

<HR NOSHADE SIZE=”10”><HR NOSHADE SIZE=”10”>

<HR SIZE=”15”><HR SIZE=”15”>

<HR SIZE=”15” NOSHADE><HR SIZE=”15” NOSHADE>

Page 37: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 37

Division Element <DIV>

<TITLE>HappyFunCars <TITLE>HappyFunCars Divisions</TITLE>Divisions</TITLE>

<BODY><BODY>

HappyFunCars Presents…HappyFunCars Presents…

<DIV ALIGN=”RIGHT”><DIV ALIGN=”RIGHT”>

The Newly RevisedThe Newly Revised

<H1>HappyFunCars Home <H1>HappyFunCars Home Page</H1>Page</H1>

Welcome!Welcome!

<P ALIGN=”CENTER”>We sell used <P ALIGN=”CENTER”>We sell used cars at low prices!cars at low prices!

</DIV></DIV>

Give us a call at (202(246-1294Give us a call at (202(246-1294

Page 38: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 38

Blockquote Element <BLOCKQUOTE>

<P>From The Babylonian Laws, <P>From The Babylonian Laws, Hammu-rabi, 2027 B.C.:Hammu-rabi, 2027 B.C.:<BLOCKQUOTE><BLOCKQUOTE>If a builder has built a house for a If a builder has built a house for a man and has not made his work man and has not made his work sound, and the house which he has sound, and the house which he has built has fallen down and so caused built has fallen down and so caused the death of the householder, that the death of the householder, that builder shall be put to death.builder shall be put to death. <p><p>If a builder has built a house for a If a builder has built a house for a man and does not make his work man and does not make his work perfect and a wall bulges, that builder perfect and a wall bulges, that builder shall put that wall into sound condition shall put that wall into sound condition at his own cost.at his own cost.</BLOCKQUOTE></BLOCKQUOTE>

Page 39: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 39

Lists – Unordered Lists <UL><LI><TITLE>Two Shopping Lists</TITLE><TITLE>Two Shopping Lists</TITLE>

<BODY><BODY>

<UL><UL>

<LI>Eggs<LI>Eggs

<LI>Milk<LI>Milk

<LI>Apples<LI>Apples

<LI>Razor Blades<LI>Razor Blades

</UL></UL>

  

<UL TYPE=”SQUARE”><UL TYPE=”SQUARE”>

<LI>Hammer<LI>Hammer

<LI>Screwdriver<LI>Screwdriver

<LI TYPE=”DISC”>Screws<LI TYPE=”DISC”>Screws

<LI TYPE=”CIRCLE”>Chainsaw<LI TYPE=”CIRCLE”>Chainsaw

</UL></UL>

Page 40: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 40

<LI>Head<LI>Head <LI>Hand<LI>Hand

<UL><UL><LI>Finger<LI>Finger<LI>Thumb<LI>Thumb</UL></UL>

<LI>Leg<LI>Leg </UL></UL>  <LI>Mind<LI>Mind <UL><UL> <LI>Brain<LI>Brain

<UL><UL><LI>Neuron<LI>Neuron</UL></UL>

</UL></UL>  <LI>Spirit<LI>Spirit <UL><UL> <LI>Soul<LI>Soul

<UL><UL><LI>Light body<LI>Light body</UL></UL>

</UL></UL></UL></UL>

Page 41: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 41

Lists – Ordered Lists <OL><LI>

<OL><OL><LI>Milk<LI>Milk<LI>Bread<LI>Bread<LI>Turkey Bacon<LI>Turkey Bacon<LI VALUE=”10”>Dark Chocolate<LI VALUE=”10”>Dark Chocolate<LI>Avocados<LI>Avocados</OL></OL>----------------------------------------------------------------------------------------<OL TYPE=a><OL TYPE=a><LI>Milk<LI>Milk<LI>Bread<LI>Bread<LI>Turkey Bacon<LI>Turkey Bacon<LI>Dark Chocolate<LI>Dark Chocolate<LI>Avocados<LI>Avocados</OL></OL>

Page 42: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 42

Anchor Element <A HREF=“URL”>…</A>

<A HREF=”http://www.cs.aucegypt.edu/~akhalil/”>Khalil’s Home Page</A><A HREF=”http://www.cs.aucegypt.edu/~akhalil/”>Khalil’s Home Page</A>

<A HREF=”http://www.yahoo.com/”>Visit Yahoo!</A><A HREF=”http://www.yahoo.com/”>Visit Yahoo!</A>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<P>you can see a five-megabyte movie of two players playing chess <P>you can see a five-megabyte movie of two players playing chess

<A HREF=”http://www.unrealities.com/videos/chess.avi”>Chess</A><A HREF=”http://www.unrealities.com/videos/chess.avi”>Chess</A>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<A HREF="D:\MY DOCUMENT\zedini-eshkan.mp3">Song</A><A HREF="D:\MY DOCUMENT\zedini-eshkan.mp3">Song</A>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<A HREF="D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT">HTML CONCEPTS</A><A HREF="D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT">HTML CONCEPTS</A>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<P>If you have trouble downloading this<P>If you have trouble downloading this

<A HREF=”ftp:D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT”> file</A>, then go ahead and <A HREF=<A HREF=”ftp:D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT”> file</A>, then go ahead and <A HREF= mailto:mailto:akhalilakhalil@@aucegyptaucegypt..eduedu TITLE=“A problem in downloading”>send a message to Dr. Khalil</A>. TITLE=“A problem in downloading”>send a message to Dr. Khalil</A>.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<A HREF="D:\CMY DOCUMENT\CSCI 485\485 WEB SITE\index.htm"><IMG SRC="khalil.bmp" ALT="Photo of Dr. Khalil"></A><A HREF="D:\CMY DOCUMENT\CSCI 485\485 WEB SITE\index.htm"><IMG SRC="khalil.bmp" ALT="Photo of Dr. Khalil"></A>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<A HREF=<A HREF=http://www.yahoo.comhttp://www.yahoo.com ACCESSKEY=”Y”>Yahoo!</A> ACCESSKEY=”Y”>Yahoo!</A>

Page 43: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 43

Internal Links<HTML><HTML>

<HEAD><HEAD>

<TITLE>Test Internal Links</TITLE><TITLE>Test Internal Links</TITLE>

</HEAD></HEAD>

<BODY><BODY>

<P ALIGN=RIGHT><P ALIGN=RIGHT>

<H1><H1>

<A NAME="TOP">Courses List</A><A NAME="TOP">Courses List</A>

</H1></H1>

<P ALIGN=LEFT><P ALIGN=LEFT>

<OL><OL>

<LI><H3><A HREF="#Java" accesskey="J">Java Course</A></H3><LI><H3><A HREF="#Java" accesskey="J">Java Course</A></H3>

<LI><H3><A HREF="#Database" accesskey = "D">Database Course</A></H3><LI><H3><A HREF="#Database" accesskey = "D">Database Course</A></H3>

<LI><H3><A HREF="#Assembly" accesskey="A">Assembly Course</A></H3><LI><H3><A HREF="#Assembly" accesskey="A">Assembly Course</A></H3>

</OL></OL>

Page 44: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 44

Internal Links

<H2><H2><FONT COLOR=BLUE><A NAME="Java">Java</A></FONT><FONT COLOR=BLUE><A NAME="Java">Java</A></FONT></H2></H2>Java is an object-oriented programming language developed by Sun Microsystems, Java is an object-oriented programming language developed by Sun Microsystems, ................................................................................<BR><BR><A HREF="#TOP" accesskey="T">TOP</A><A HREF="#TOP" accesskey="T">TOP</A><H2><H2><FONT COLOR=BLUE><A NAME="Database">Databases</A></FONT><FONT COLOR=BLUE><A NAME="Database">Databases</A></FONT></H2></H2>Databases are considered as major components in almost all recent computer application Databases are considered as major components in almost all recent computer application ....................................................................................................<BR><BR><A HREF="#TOP" accesskey="T">TOP</A><A HREF="#TOP" accesskey="T">TOP</A><H2><H2><FONT COLOR=BLUE><A NAME="Assembly">Assembly</A></FONT><FONT COLOR=BLUE><A NAME="Assembly">Assembly</A></FONT></H2></H2>Assembly language is a low-level language Assembly language is a low-level language ....................................................................................................<BR><BR><A HREF="#TOP" accesskey="T">TOP</A><A HREF="#TOP" accesskey="T">TOP</A></BODY></BODY></HTML></HTML>

Page 45: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 45

Internal Links

Page 46: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 46

Including an Applet Using Anchor Element

import java.awt .Graphics; import java.awt .Graphics; import java.awt.Font; import java.awt.Font; import java.awt.Color; import java.awt.Color; public class Welcome extends public class Welcome extends

java.applet.Applet {java.applet.Applet {Font f = new Font("Arial", Font f = new Font("Arial", Font.BOLD, 48); Font.BOLD, 48);

public void paint(Graphics public void paint(Graphics screen) {screen) { screen.setFont(f); screen.setFont(f); screen.setColor(Color.red); screen.setColor(Color.red); screen.drawString("Welcome screen.drawString("Welcome to Egypt", 10, 40); to Egypt", 10, 40); }}

}}

<HTML> <HTML>

<HEAD> <HEAD>

<TITLE>The Wlecome Page</TITLE> <TITLE>The Wlecome Page</TITLE>

</HEAD> </HEAD>

<BODY><BODY>

<P>We are very happy to say:: <P>We are very happy to say::

<BR> <BR>

<APPLET CODE="Welcome.class" WIDTH=600 HEIGHT=100>

</APPLET> </BODY> </BODY>

</HTML> </HTML>

Page 47: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 47

Basefont Element

<BASEFONT SIZE=”2”><BASEFONT SIZE=”2”>

Welcome toWelcome to

<FONT SIZE=”+2”>Coffeehousebook.com</FONT><FONT SIZE=”+2”>Coffeehousebook.com</FONT>

- - have a cup!- - have a cup!

Page 48: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 48

Line Break Element <BR>

Hello<BR>Hello<BR>

World!World!

------------------------------------------------------------------------------------

CLEAR=”LEFT”CLEAR=”LEFT”

CLEAR=”RIGHT”CLEAR=”RIGHT”

CLEAR=”ALL”CLEAR=”ALL”

CLEAR=”NONE”CLEAR=”NONE”

Page 49: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 49

Qoute Element <Q>…</Q>

<P>Churchill said,<Q>”We have chosen shame and will get <P>Churchill said,<Q>”We have chosen shame and will get war,”</Q> but he wasn’t talking about 1066.</P>war,”</Q> but he wasn’t talking about 1066.</P>

Page 50: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 50

Font Style Elements

<HTML><HTML><BODY><BODY><FONT SIZE=+2><FONT SIZE=+2>Bold: <B>Good Morning, Egypt</B>Bold: <B>Good Morning, Egypt</B>Italic: <I>Good Morning, Egypt</I>Italic: <I>Good Morning, Egypt</I>Underline: <U>Good Morning, Egypt</U>Underline: <U>Good Morning, Egypt</U>Strike: <STRIKE>I'm some helpless text and I'm Struck</STRIKE>Strike: <STRIKE>I'm some helpless text and I'm Struck</STRIKE>S: <S>I'm some helpless text and I'm Struck</S>S: <S>I'm some helpless text and I'm Struck</S>Big: <BIG>Good Morning, Egypt</BIG>Big: <BIG>Good Morning, Egypt</BIG>Small: <SMALL>Good Morning, Egypt<SMALL>Small: <SMALL>Good Morning, Egypt<SMALL>Sub: H<SUB>2</SUB>OSub: H<SUB>2</SUB>OSup: E=MC<SUP>2</SUP> -- Eat a MAC Burger<SUP>TM</SUP>Sup: E=MC<SUP>2</SUP> -- Eat a MAC Burger<SUP>TM</SUP></BODY></BODY></HTML> </HTML>

Page 51: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 51

Font Style ElementsAcronym: I spy for the <ACRONYM TITLE=”Federal Bureau of Investigation”> FBI</ACRONYM>Acronym: I spy for the <ACRONYM TITLE=”Federal Bureau of Investigation”> FBI</ACRONYM>

CITE: I have read and reread<CITE>Moby Dick</CITE> but I still can’t make heads nor tails of it.CITE: I have read and reread<CITE>Moby Dick</CITE> but I still can’t make heads nor tails of it.

CODE: To use the Automatic date feature in Excel, just enter <CODE>=Date()</CODE> into a cell.CODE: To use the Automatic date feature in Excel, just enter <CODE>=Date()</CODE> into a cell.

Definition: It’s not strange that <DFN>HTML</DFN> (HyperText Markup Language) is just a subset of Definition: It’s not strange that <DFN>HTML</DFN> (HyperText Markup Language) is just a subset of <DFN>SGML</DFN> (Standard Generalized Markup Language).<DFN>SGML</DFN> (Standard Generalized Markup Language).

Emphasis: I simply <EM>must</EM>get that book!Emphasis: I simply <EM>must</EM>get that book!

Strong Emphasis: I swear, if they don’t give me that raise<STRONG> tomorrow</STRONG>, I quit.Strong Emphasis: I swear, if they don’t give me that raise<STRONG> tomorrow</STRONG>, I quit.

Variables: The formula for the <VAR>distance traveled</VAR> (in miles) is <VAR> speed</VAR> (in Variables: The formula for the <VAR>distance traveled</VAR> (in miles) is <VAR> speed</VAR> (in miles per hour) multiplied by <VAR> time</VAR> (in hours).miles per hour) multiplied by <VAR> time</VAR> (in hours).

Code: When using an anchor element, make sure to use the Code: When using an anchor element, make sure to use the <CODE>HREF="<VAR>URL</VAR>"</CODE> attribute.<CODE>HREF="<VAR>URL</VAR>"</CODE> attribute.

TeleType: <TT>abc def ghi jkl</TT>TeleType: <TT>abc def ghi jkl</TT>

Page 52: HTML, by Dr. Khalil1 HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC.

HTML, by Dr. Khalil 52

Thank you