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


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).).


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.


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>


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..


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.


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>


HTML Concepts

<HTML>

<HEAD>

<TITLE>Exercise 1</TITLE>

</HEAD>

<BODY>

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

</BODY>

</HTML>


HTML Concepts

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


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


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>


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”>


Methods of Generating HTML Documents

Using Text Editor:Using Text Editor:

Microsoft NotePad

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


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>


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>


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>


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>

Comments



-->


Referencing Entity Codes

Character Numerical Entity Code

Character Entity Code

““ "" ""

<< << <<

>> >> >>

&& && &&



Bullet:Bullet: ••

Trademark symbol:Trademark symbol: ™™

Copyright symbolCopyright symbol &Copy;&Copy;

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

Square Root symbol:Square Root symbol: √√

Greek Alpha:Greek Alpha: ΑΑ

Greek Delta:Greek Delta: ΔΔ



Khalil & Sons » khalil & Sons

X < Y » X < Y

SONY&Trade; » SONYTM


Using

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;517-3566 517-3566 soon!soon!

Hello. World;

Hello. World;


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


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]”>


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”>


Including an Image as a Backgroung

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


Defining the Color of Text

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

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


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””>>


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 © 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>


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>

<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””>>

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 & <B>Celebration of the New Millenium BBQ &

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> © 1999, Awad KHALILKHALIL</A><BR> © 1999, Awad KHALIL </BODY></BODY></HTML></HTML>

<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””>><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 & Poetry Reading</B><B>Celebration of the New Millenium BBQ & 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 © 1999, Awad KHALIL and Adel KamelCopyright © 1999, Awad KHALIL and Adel Kamel

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


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”


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


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>


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=”5” ALIGN=CENTER <HR SIZE=”5” ALIGN=CENTER WIDTH=40%>WIDTH=40%>


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


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


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


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>


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>


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


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>


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>


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>


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>


Internal Links


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>


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!


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”


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>


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>


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>


Thank you

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

Documents

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