Hypertext Markup Language (HTML) Outline the World Wide Web The

Outline – Introduction to HTML HyperText Markup Language – Designing Documents for the World Wide Web (HTML) § Creating and publishing a Web page § Validating a document § Main HMTL elements – Block-level HTML elements – Text-level HTML element – Creating hypertext links – Adding images to documents – Building tables CS 4390 Web Programming Introduction to HTML 2 The World Wide Web The World Wide Web • Definitions – HTTP § The HyperText Transfer Protocol – request/response model – The World Wide Web § The language used by a WWW client (e.g. Netscape, Internet § The Internet is networks of computers that are connected Explorer) to request documents from a WWW server (i.e. the § The Web is the set of computers on the Internet that support program running at Web sites like amazon.com or yahoo.com) HTTP § A stateless protocol – server does not keep any information § In 1989, Tim Berners-Lee and associates proposed the World about the client after it sends its response Wide Web at CERN, The European High-Energy Physics § Interaction between client and server equires a Center request/response exchange (not like stand alone GUI) § The Web has ability to combine text with graphics and other – HTML multimedia § The HyperText Markup Language § The language used to design web pages CS 4390 Web Programming Introduction to HTML 3 CS 4390 Web Programming Introduction to HTML 4 HyperText Markup Language HTML Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> • Text Mixed with Markup Tags <HTML> <HEAD> <Title>Home Page for Lawrence M. Brown</Title> – Tags Enclosed in Angle Brackets </HEAD> <BODY BGCOLOR="WHITE"> (<H1>Introduction</H1>) <H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1> <HR> • What Does Markup Describe? <IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117 HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo"> – Appearance Senior Network Engineer<BR> <A HREF="http://www.dt.navy.mil/"> – Layout Naval Surface Warfare Center</A><BR> – Content (Can’t Enforce an Exact Look) 9500 MacArthur Boulevard<BR> West Bethesda, Maryland, MD 20817-5700<BR> <I>email:</I> <A HREF="mailto:[email protected]"> • Changes in HTML 3.2 to HTML 4.0 [email protected]</A><BR> <I>Phone:</I> (301) 277-4648<BR CLEAR="ALL"> – Standardization of frames <P> This is my personal home page. For more specific – Deprecation of formatting elements (vs. style sheets) programming-related resources pages, please see: – Improved cell alignment and grouping in tables  </BODY> – Mouse and keyboard events for nearly all elements </HTML> – Internationalization features CS 4390 Web Programming Introduction to HTML 5 CS 4390 Web Programming Introduction to HTML 6 1 Creating and Publishing a Web Page 1. Create an HTML document Designing Documents for the 2. Place the document in a world-accessible directory (often public_html or www) on a World Wide Web system running an HTTP server 3. Access the web page through http://hostname/~username/filename § E.g. http://www.apl.jhu.edu/~lmb/test.html – If the filename is omitted, a system default filename is assumed (often index.html) § E.g. http://www.apl.jhu.edu/~hall/ refers to the file index.html in hall’s public_html directory CS 4390 Web Programming Introduction to HTML 8 Creating and Publishing HTML Document Template a Web Page 4. Validate the Document – Check the syntax using a formal HTML validator § http://validator.w3.org/ § http://www.htmlhelp.com/tools/validator/ – The version of HTML against which the document is validated is based on the DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> The WWW Consortium recently added advice that Web pages include information on the character set, even though ASCII or Latin-1 is the default. The validator at http://validator.w3.org/ gives warnings if you omit this. You can ignore such warnings if you wish. CS 4390 Web Programming Introduction to HTML 9 CS 4390 Web Programming Introduction to HTML 10 Main HTML Elements Main HTML Elements DOCTYPE Declarations HTML: <HTML …> … </HTML> • Strict HTML 4.01 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> Attributes: • Transitional HTML 4.01 DOCTYPE • LANG -- informational, do not change how the text <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> is rendered, language code for search engine or spell • Frameset HTML 4.01 DOCTYPE checker <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 frameset//EN"> • HTML elements • DIR -- LTR, RTL, Netscape does not support http://www.w3.org/TR/html4/index/elements.html • VERSION – HTML version, browser can determine • HTML attributes the HTML version http://www.w3.org/TR/html4/index/attributes.html CS 4390 Web Programming Introduction to HTML 11 CS 4390 Web Programming Introduction to HTML 12 2 Main HTML Elements HEAD: <HEAD …> … </HEAD> Attributes: Profile – TITLE <TITLE> … </TITLE> element required – Optional elements: § BASE, META, BGSOUND § SCRIPT, NOSCRIPT, STYLE, LINK CS 4390 Web Programming Introduction to HTML 13 CS 4390 Web Programming Introduction to HTML 14 BASE Element BASE Element, Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> • Specifies the starting location for relative <HTML> <HEAD> URLs <TITLE>News Headlines</TITLE> <BASE HREF="HTTP://www.uhd.edu/library"> • Attributes: </HEAD> <BODY> – HREF -- URL of the file <H1 ALIGN="CENTER">News Headlines</H1> – TARGET -- specify the default frame to display <H2>National News</H2> Blah, blah, blah. <H2>International News</H2> Yadda, yadda, yadda. </BODY> </HTML> CS 4390 Web Programming Introduction to HTML 15 CS 4390 Web Programming Introduction to HTML 16 META Element META Element, Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> • Records document information, forwards <HTML> <HEAD> and refreshes pages <TITLE>News Headlines</TITLE> <META NAME="author" CONTENT="Ongard"> • Attributes and values: <META NAME="keywords" CONTENT="Headlines, National News, International News"> – NAME="author", "keywords", "description" <META HTTP-EQUIV="REFRESH" CONTENT="3600"> </HEAD> – CONTENT (required) <BODY> <H1 ALIGN="CENTER">News Headlines</H1> – HTTP-EQUIV="refresh" -- reload the page or <H2>National News</H2> Blah, blah, blah. load a new page <H2>International News</H2> Yadda, yadda, yadda. </BODY> </HTML> CS 4390 Web Programming Introduction to HTML 17 CS 4390 Web Programming Introduction to HTML 18 3 BGSOUND Element SCRIPT Element • Playing sound files (wav, MIDI) • Embed scripting programs, usually • Nonstandard HTML elements JavaScript • Attributes: • Attributes: – SRC -- source file – LANGUAGE -- JavaScript – LOOP -- repeated 1 (default) or –1 or infinite – TYPE (required) – SRC CS 4390 Web Programming Introduction to HTML 19 CS 4390 Web Programming Introduction to HTML 20 STYLE Element Main HTML Elements • Specify cascading style sheets BODY Element – <BODY BGCOLOR="YELLOW"> • Attributes: – HTML Attributes and Attribute Values – TYPE (required) – text/css § BACKGROUND -- tile small picture § BGCOLOR -- background color – TITLE § TEXT -- foreground color – MEDIA § LINK, VLINK, ALINK – link, visited link, active link color § OnLoad, OnUnload, OnFocus, OnBlur Elements inside BODY element – <BODY> Remaining HTML elements CS 4390 Web Programming Introduction to HTML 21 CS 4390 Web</BODY> Programming Introduction to HTML 22 Block-Level Elements • Headings – H1 ... H6 Block-Level Elements – ALIGN • Basic Text Sections – P – ALIGN – PRE – WIDTH – ADDRESS – BLOCKQUOTE CS 4390 Web Programming Introduction to HTML 24 4 Block-Level Elements Block-Level Elements • Lists • Tables and Forms – OL • Misc. – LI – HR – UL – DIV – CENTER – LI – MULTICOL (Netscape only) – DL – DT – DD CS 4390 Web Programming Introduction to HTML 25 CS 4390 Web Programming Introduction to HTML 26 Headings Headings • Heading Types • Attributes: ALIGN – <H1 ...> ... </H1> – Values: LEFT (default), RIGHT, CENTER – <H2 ...> ... </H2> • Nesting tags – <H3 ...> ... </H3> – Headings and other block-level elements can – <H4 ...> ... </H4> contain – <H5 ...> ... </H5> text-level elements, but not vice versa – <H6 ...> ... </H6> CS 4390 Web Programming Introduction to HTML 27 CS 4390 Web Programming Introduction to HTML 28 Headings, Example Headings, Result <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="CENTER">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="RIGHT">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML> CS 4390 Web Programming Introduction to HTML 29 CS 4390 Web Programming Introduction to HTML 30 5 P – The Basic Paragraph • Attributes: ALIGN – LEFT (default), RIGHT, CENTER. Same as headings. – Whitespace ignored (use <BR> for line break) § Consecutive <P>’s do not yield multiple blank lines – End Tag is Optional: <BODY> <BODY> <P> Paragraph 1 Paragraph 1 <P> </P> Paragraph 2 <P> <P> Paragraph 2 Paragraph 3 </P> </BODY> <P> Equivalent with Implied Tags Paragraph 3 </P> </BODY> Fully-Specified CS 4390 Web Programming Introduction to HTML 31 CS 4390 Web Programming Introduction to HTML 32 Preformatted Paragraphs • The PRE Element – <PRE> ... </PRE> • Attributes: WIDTH – Expected width in characters. Not widely supported. • Problem: Special Characters <PRE> if (a<b) { Desired Character HTML Required doThis(); < < } else { > > & & doThat(); " " } Non-breaking space   </PRE> CS 4390 Web Programming Introduction to HTML 33 CS 4390 Web

Hypertext Markup Language (HTML) Outline the World Wide Web The

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support