HTML HyperText Markup Language Dr. Awad Khalil Computer Science Department AUC HTML, by Dr. Khalil 1 History of Markup SGML, the Standard Generalized Markup Language (1980), is a more powerful ancestor of XML. SGML is a text-based meta-language used to describe application languages. SGML is a text-based language that can be used to markup data – that is, add metadata – in a way which is self describing. Although SGML has many useful features, the complexity of SGML makes it extremely hard to use and learn. HTML, the HyperText Markup Language (1989), is one of the best known applications of SGML. HTML was defined to be a universal markup language for the display of information, and the linking of different pieces of information. The idea was that any HTML document (or web page) would be presentable in any application that was capable of understanding HTML (termed a web browser). HTML, by Dr. Khalil 2 HTML HTML is the document formatting language used to design most Web pages. It is a simple, yet powerful, platform-independent document language. Originally developed by Tim Berners-Lee while at CERN but was standardized in November 1995. In early 2000, W3C produced XHTML 1.0 as a reformulation of HTML 4 in XML. HTML, by Dr. Khalil 3 So Why XML? Unfortunately, SGML is such a complicated language that it’s not well suited for data interchange over the web. And, although HTML has been incredibly successful, it’s also limited in its scope; it is only intended for displaying documents in a browser. Due to these reasons, XML was created. XML is a subset of SGML with the attempt to make most of the power of SGML and to make simpler and easier to learn and use. For example, suppose we have data about a name, and we need to be able to share that information with others. But we also want to be able to use that information in a computer program. Instead of just creating a text file like this: Tamer Soliman 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: <name> <first>Tamer</first> <last>Soliman</last> </name> XML is not really a “language” at all, but a standard for creating languages which meet the XML HTML, by Dr. Khalil criteria. 4 Who is the World Wide Web Consortium? The World Wide Web Consortium (W3C) was started in 1994, according to their web site (http://www.w3.org), “to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability”. W3C produces recommendations which describe the basic building blocks of the web. HTML recommendation is the most famous contribution of W3C to the web. In 1998, W3C started releasing recommendations for XML 1.0, XSLT, and XPath. HTML, by Dr. Khalil 5 What is XML? Extensible Markup Language (XML), is the latest buzzword on the Internet, but it’s also a rapidly maturing technology with powerful real-world applications, particularly for the management, display and organization of data. Together with its display language (XSL) and the standardized Document Object Model (DOM), it is an essential technology for anyone using markup language on the web or internally. HTML, by Dr. Khalil 6 HTML Concepts HTML Tags: HTML tags cover formatting, structural, and semantic markup 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, by Dr. Khalil 7 HTML Concepts <HTML> <HEAD> <TITLE>Exercise 1</TITLE> </HEAD> <BODY> Good Morning, <B><I>Egypt</I></B> </BODY> </HTML> HTML, by Dr. Khalil 8 HTML Concepts In 1989, <B><I>Tim Brayners</I></B>developed<HYPNOTIC> the first version of HTML </hypnotic> HTML, by Dr. Khalil 9 HTML Document Structure H TM L docum ent T itle <HTM L> <HEAD> < T IT L E > T itle o f y o u r d o c u m e n t g o e sh e re < /T IT L E . < /H E A D > <BO DY> Y o u r d o c u m e n t g o e s h e re < /B O D Y < /H T M L > B o d y s e c tio n HTML, by Dr. Khalil 10 Elements of HTML An element in HTML consists of three parts: A start tag Content An end tag Examples: <B>Egypt</B> <B><I>Egypt</I></B> Each element may have a set of attributes: <BODY BGCOLOR=RED TEXT=BLACK> <IMG SRC=“MyPhoto.jpg” WIDTH=200 LENGTH=300 BORDER=2> HTML, by Dr. Khalil 11 Classification of HTML Elements Page Structuring Elements Used to define the structure of the page such as: <H1>…</H1> <H2>…</H2> <P> <Div>…</Div> <BR> <HR> <CENTER> Text Formatting Elements Used to define the display properties of the text and to include hyperlinks and other objects such as images and audio: <B>…</B> <I>…</I> <U>…</U> <A HREF=“URL”>…</A> <IMG SRC=“URL”> HTML, by Dr. Khalil 12 Methods of Generating HTML Documents Using Text Editor: Microsoft NotePad Using HTML Generators: Microsoft Front Page Microsoft Word HTML, by Dr. Khalil 13 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> HTML, by Dr. Khalil 14 Arranging HTML Elements <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"> </CENTER> <P> 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 modern buildings. Write us at:<BR> P.O. BOX 555<BR> Cairo, Egypt.<BR> Or visit our <A HREF="http://www.ucctech.com/">Technical Site</A> <HR> </BODY> </HTML> HTML, by Dr. Khalil 15 Rules of White Spaces HTML 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> HTML, by Dr. Khalil 16 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> HTML, by Dr. Khalil 17 Comments <!-- My comments start here --> <!-The Universal Construction Company Home Page by Awad Khalil Copyright 2002 --> HTML, by Dr. Khalil 18 Referencing Entity Codes Character Numerical Entity Code Character Entity Code “ &#34; &quot; < &#60; &lt; > &#62; &gt; & &#38; &amp; HTML, by Dr. Khalil 19 Referencing Entity Codes Bullet: Trademark symbol: Copyright symbol Summation symbol: Square Root symbol: Greek Alpha: Greek Delta: &bull; &trade; &Copy; &sum: &radic; &Alpha; &Delta; HTML, by Dr. Khalil 20 Referencing Entity Codes Khalil &amp; Sons » khalil & Sons X &lt; Y » X<Y SONY&Trade; » SONYTM HTML, by Dr. Khalil 21 Using &nbsp; We hope that you will give us a call at (202) 517-3566 soon! We hope that you will give us a call at (202)&nbsp;517-3566 soon! Hello.&nbsp;World; Hello.&#160;World; HTML, by Dr. Khalil 22 Referencing to Colors Color RGB Value Color RGB Value White #FFFFFF Fushia #FF00FF Red #FF0000 Aqua #00FFFF Green #00FF00 Navy #000080 Blue #0000FF Gray #808080 Yellow #FFFF00 Purple #800080 HTML, by Dr. Khalil 23 Using Colors Changing color using attributes Attribute BGCOLOR <BODY BGCOLOR=”[colorname]”> < BODY BGCOLOR =”#[RGB-value]”> of the element <BODY> Attribute TEXT <BODY TEXT=”[colorname]”> < BODY TEXT =”#[RGB-value]”> Attribute BACKGROUND < BODY BACKGROUNG =”URL”> Attribute LINK Attribute VLINK Attribute ALINK <BODY LINK=”[colorname]”> <BODY VLINK=”[colorname]”> <BODY ALINK=”[colorname]”> HTML, by Dr. Khalil 24 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”> HTML, by Dr. Khalil 25 Including an Image as a Backgroung <BODY BACKGROUND=”RB03.jpg”> HTML, by Dr. Khalil 26 Defining the Color of Text <BODY TEXT=”TEAL”> <BODY TEXT=”#008080”> HTML, by Dr. Khalil 27 Defining the Color of LINK, VLINK, and ALINK <BODY LINK=”GREEN”> <BODY LINK=”#00FF00”> <BODY VLINK=”MAROON”> <BODY VLINK=”#800000”> <BODY ALINK=”FUSHIA”> <BODY ALINK=”#FF00FF”> HTML, by Dr. Khalil 28 Using the Element <FONT> Using the attribute Size to define the relative or 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 Color <FONT COLOR=”[colorname]”> <FONT COLOR=”#[RGB-value]”> to define the color of the text. Using the attribute Face to define the type of font (e.g.; 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> HTML, by Dr. Khalil 29 Examples <HTML> <HEAD> <TITLE>A Splash of my Favorite Colors</TITLE> </HEAD> <BODY BGCOLOR=”CYAN” TEXT=”#0000AA”> <H1>Enjoy The Colors</H1> <FONT COLOR=”RED”>Blood</FONT> is the favorite food of vampires. All of us enjoy a walk on the <FONT COLOR=”GREEN”>grass</FONT>. The <FONT COLOR=”#FFFF00”>sun</FONT>beams down. </BODY> </HTML> HTML, by Dr. Khalil 30 <HTML> <HEAD> <TITLE>The Year 2000</TITLE> </HEAD> <BODY BGCOLOR=”YELLOW” TEXT=”BLUE” LINK=”MAROON” ALINK=”GREEN” VLINK=”BROWN”> <!-- The Body tag attributes specify the color scheme, such as the background color of yellow. --> <H1> The Millenium Approaches</H1> <FONT SIZE=”+5”> <I>And You’re Invited!</I> </FONT> <P> <FONT COLOR=”PURPLE”>Please come to my <B>Celebration of the New Millenium BBQ &amp; Poetry Reading</B> to be held on December 31st at 7:00 p.m. Anyone reading this page is invited; send me mail using the link below for more details.</FONT> <HR> <A HREF=”Mailto:akhalil@emf.net”>Awad KHALIL</A><BR> &copy; 1999, Awad KHALIL </BODY> </HTML> HTML, by Dr. Khalil 31 <HTML> <HEAD> <TITLE>The Year 2000</TITLE> </HEAD> <BODY BGCOLOR=”YELLOW” TEXT=”BLUE” LINK=”MAROON” ALINK=”GREEN’ VLINK=”BROWN”> <!-- The body tag attributes specify the color scheme, such as the background color of light yellow. --> <CENTER> <H1>The Millenium Approaches</H1> <FONT SIZE=”+5” FACE=”Helvetica”> <I>And You’re Invited!</I> </FONT> </CENTER> <P> Please come to my <FONT COLOR=”PURPLE”> <B>Celebration of the New Millenium BBQ &amp; Poetry Reading</B> </FONT> to be held on December 31st at 7:00 p.m. Anyone reading this page is invited; send me mail using the link below for more details. <P> <CENTER> <FONT COLOR=”BLACK” SIZE=”4”> <B>Look out!</B> Unfortunately I’ll have to charge $200 for admission </FONT> </CENTER> <HR> <SMALL> <A HREF=”mailto:akhalil@emf.net”>Awad KHALIL</A> <BR> Copyright &copy; 1999, Awad KHALIL and Adel Kamel </SMALL> HTML, by Dr. Khalil <BODY> </HTML> 32 Header Element <H1>,<H2>,….<H6> 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: ALIGN ALIGN=“CENTER” ALIGN=“LEFT” ALIGN=“RIGHT” ALIGN=“JUSTIFY” HTML, by Dr. Khalil 33 Paragraph Element Used <P> 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 HTML, by Dr. Khalil 34 Address Element <ADDRESS> <ADDRESS> <A HREF=”MAILTO:akhalil@aucegypt.edu”>Awad Khalil: akhalil@aucegypt.edu</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> HTML, by Dr. Khalil 35 Horizontal Line Element <HR> Good Morning <HR> Egypt! <HR NOSHADE> <HR SIZE=”1”> <HR SIZE=”2” > <HR SIZE=”3” ALIGN=RIGHT WIDTH=200> <HR SIZE=”4”> <HR SIZE=”5” ALIGN=CENTER WIDTH=40%> <HR SIZE=”10”> <HR NOSHADE SIZE=”10”> <HR SIZE=”15”> <HR SIZE=”15” NOSHADE> HTML, by Dr. Khalil 36 Division Element <DIV> <TITLE>HappyFunCars Divisions</TITLE> <BODY> HappyFunCars Presents… <DIV ALIGN=”RIGHT”> The Newly Revised <H1>HappyFunCars Home Page</H1> Welcome! <P ALIGN=”CENTER”>We sell used cars at low prices! </DIV> Give us a call at (202(246-1294 HTML, by Dr. Khalil 37 Blockquote Element <BLOCKQUOTE> <P>From The Babylonian Laws, Hammu-rabi, 2027 B.C.: <BLOCKQUOTE> If a builder has built a house for a man and has not made his work sound, and the house which he has built has fallen down and so caused the death of the householder, that builder shall be put to death. <p> If a builder has built a house for a man and does not make his work perfect and a wall bulges, that builder shall put that wall into sound condition at his own cost. </BLOCKQUOTE> HTML, by Dr. Khalil 38 Lists – Unordered Lists <UL><LI> <TITLE>Two Shopping Lists</TITLE> <BODY> <UL> <LI>Eggs <LI>Milk <LI>Apples <LI>Razor Blades </UL> <UL TYPE=”SQUARE”> <LI>Hammer <LI>Screwdriver <LI TYPE=”DISC”>Screws <LI TYPE=”CIRCLE”>Chainsaw </UL> HTML, by Dr. Khalil 39 <LI>Head <LI>Hand <UL> <LI>Finger <LI>Thumb </UL> <LI>Leg </UL> <LI>Mind <UL> <LI>Brain <UL> <LI>Neuron </UL> </UL> <LI>Spirit <UL> <LI>Soul <UL> <LI>Light body </UL> </UL> </UL> HTML, by Dr. Khalil 40 Lists – Ordered Lists <OL><LI> <OL> <LI>Milk <LI>Bread <LI>Turkey Bacon <LI VALUE=”10”>Dark Chocolate <LI>Avocados </OL> -------------------------------------------<OL TYPE=a> <LI>Milk <LI>Bread <LI>Turkey Bacon <LI>Dark Chocolate <LI>Avocados </OL> HTML, by Dr. Khalil 41 Anchor Element <A HREF=“URL”>…</A> <A HREF=”http://www.cs.aucegypt.edu/~akhalil/”>Khalil’s Home Page</A> <A HREF=”http://www.yahoo.com/”>Visit Yahoo!</A> --------------------------------------------------------------------------------------------------<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="D:\MY DOCUMENT\zedini-eshkan.mp3">Song</A> ---------------------------------------------------------------------------------------------------<A HREF="D:\CMY DOCUMENT\IT Diploma\ITEC-020\HTMLCONCPTS.PPT">HTML CONCEPTS</A> ---------------------------------------------------------------------------------------------------<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=mailto:akhalil@aucegypt.edu 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=http://www.yahoo.com ACCESSKEY=”Y”>Yahoo!</A> HTML, by Dr. Khalil 42 Internal Links <HTML> <HEAD> <TITLE>Test Internal Links</TITLE> </HEAD> <BODY> <P ALIGN=RIGHT> <H1> <A NAME="TOP">Courses List</A> </H1> <P ALIGN=LEFT> <OL> <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="#Assembly" accesskey="A">Assembly Course</A></H3> </OL> HTML, by Dr. Khalil 43 Internal Links <H2> <FONT COLOR=BLUE><A NAME="Java">Java</A></FONT> </H2> Java is an object-oriented programming language developed by Sun Microsystems, ........................................ <BR> <A HREF="#TOP" accesskey="T">TOP</A> <H2> <FONT COLOR=BLUE><A NAME="Database">Databases</A></FONT> </H2> Databases are considered as major components in almost all recent computer application .................................................. <BR> <A HREF="#TOP" accesskey="T">TOP</A> <H2> <FONT COLOR=BLUE><A NAME="Assembly">Assembly</A></FONT> </H2> Assembly language is a low-level language .................................................. <BR> <A HREF="#TOP" accesskey="T">TOP</A> </BODY> </HTML> HTML, by Dr. Khalil 44 Internal Links HTML, by Dr. Khalil 45 Including an Applet Using Anchor Element import java.awt .Graphics; import java.awt.Font; import java.awt.Color; public class Welcome extends java.applet.Applet { Font f = new Font("Arial", Font.BOLD, 48); public void paint(Graphics screen) { screen.setFont(f); screen.setColor(Color.red); screen.drawString("Welcome to Egypt", 10, 40); } <HTML> <HEAD> <TITLE>The Wlecome Page</TITLE> </HEAD> <BODY> <P>We are very happy to say:: <BR> <APPLET CODE="Welcome.class" WIDTH=600 HEIGHT=100> </APPLET> </BODY> </HTML> } HTML, by Dr. Khalil 46 Basefont Element <BASEFONT SIZE=”2”> Welcome to <FONT SIZE=”+2”>Coffeehousebook.com</FONT> - - have a cup! HTML, by Dr. Khalil 47 Line Break Element <BR> Hello<BR> World! -----------------------------------------CLEAR=”LEFT” CLEAR=”RIGHT” CLEAR=”ALL” CLEAR=”NONE” HTML, by Dr. Khalil 48 Qoute Element <Q>…</Q> <P>Churchill said,<Q>”We have chosen shame and will get war,”</Q> but he wasn’t talking about 1066.</P> HTML, by Dr. Khalil 49 Font Style Elements <HTML> <BODY> <FONT SIZE=+2> Bold: <B>Good Morning, Egypt</B> Italic: <I>Good Morning, Egypt</I> Underline: <U>Good Morning, Egypt</U> Strike: <STRIKE>I'm some helpless text and I'm Struck</STRIKE> S: <S>I'm some helpless text and I'm Struck</S> Big: <BIG>Good Morning, Egypt</BIG> Small: <SMALL>Good Morning, Egypt<SMALL> Sub: H<SUB>2</SUB>O Sup: E=MC<SUP>2</SUP> -- Eat a MAC Burger<SUP>TM</SUP> </BODY> </HTML> HTML, by Dr. Khalil 50 Font Style Elements 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. 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 <DFN>SGML</DFN> (Standard Generalized Markup Language). 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. 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). Code: When using an anchor element, make sure to use the <CODE>HREF="<VAR>URL</VAR>"</CODE> attribute. TeleType: <TT>abc def ghi jkl</TT> HTML, by Dr. Khalil 51 Thank you HTML, by Dr. Khalil 52