1 / 40

HTML – H yper T ext M arkup L anguage

HTML – H yper T ext M arkup L anguage. Representation and Management of Data on the Internet. The World-Wide Web. Based on A uniform naming scheme for locating resources on the Web (e.g., URIs) Protocols , for access to named resources over the Web (e.g., HTTP)

benedict-kane
Download Presentation

HTML – H yper T ext M arkup L anguage

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML – HyperText Markup Language Representation and Management of Data on the Internet

  2. The World-Wide Web • Based on • A uniform naming scheme for locating resources on the Web (e.g., URIs) • Protocols, for access to named resources over the Web (e.g., HTTP) • Hypertext, for easy navigation among resources (e.g., HTML)

  3. URI’s • URIs typically consist of three pieces: • The naming scheme of the mechanism used to access the resource • The name of the machine hosting the resource • The name of the resource itself, given as a path

  4. HTML • HTML • HyperText Markup Language • Not a procedural programming language like C, Fortran, Cobol or Pascal • Markup language • Identify elements of a page so that a browser can render that page on your computer screen • Presentation of a document vs. structure

  5. HTML • HTML gives authors the means to: • Publishonline documents with headings, text, tables, lists, photos, etc • Retrieve online information via hypertext links, at the click of a button • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc • Include spread-sheets, video clips, sound clips, and other applications directly in their documents

  6. Markup Languages • Markup language • Used to format text and information • HTML • Marked up with elements, delineated by tags • Tags: keywords contained in pairs of angle brackets • HTML tags • Not case sensitive • Can have attributes • Forgetting to close tags is a syntax error

  7. HTML Files • HTML files • .htm or .html extensions • File name of your home page should be index.html • Errors in HTML • Usually not fatal

  8. DTD Document Hello World <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! <!-- This is a comment --> </BODY> </HTML> HEAD + BODY

  9. HEAD & BODY • HEAD section • Info about the document • Info in header not generally rendered in display window • TITLE element names your Web page • BODY section • Page content • Includes text, images, links, forms, etc. • Elements include backgrounds, link colors and font faces • P element forms a paragraph, blank line before and after

  10. DTDs • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  11. Character Encoding • Used to set the Document Character Set • In the Browser you can see the encoding by “View>Encoding” or “View>CharacterEncoding” <meta http-equiv="content-type" content="text/html; charset=iso-8859-8-I">

  12. Hebrew In the Page • You can use logical Hebrew: • charset=“windows-1255” • Only good in Explorer • Hebrew text is written from right to left • You can use visual Hebrew: • charset=“iso-8859-8” • Can be seen in Netscape • Hebrew text is written from left to right Also neededalign=“right”

  13. Meta Information • The META tag adds information about the document (rather than content) • name <META name="Author" content=“Danny Din"> • http-equiv <META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> • content • schema <META scheme="ISBN" name="identifier“ content="0-8230-2355-9">

  14. META Can Help Search Engines <-- For speakers of US English --> <META name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <-- For speakers of British English --> <META name="keywords" lang="en" content="holiday, Greece, sunshine"> <-- For speakers of French --> <META name="keywords" lang="fr" content="vacances, Gr&egrave;ce, soleil">

  15. META for Automatic Loading • For moving to the dbi page automatically after 10 seconds: <meta http-equiv=“refresh” content=“10; url=http://www.cs.huji.ac.il/~dbi”> • For automatic loading of a sound file when loading the page <meta http-equiv=“refresh” content=“0; url=DingDong.mid”>

  16. BODY <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... document body... </BODY> </HTML>

  17. Body With Style <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> <STYLEtype="text/css"> BODY{background:white;color:black}A:link{color:red}A:visited{color:maroon}A:active{color:fuchsia}</STYLE> </HEAD> <BODY> ... document body... </BODY> </HTML>

  18. Headers • Headers • Simple form of text formatting • Vary text size based on the header’s “level” • Actual size of text of header element is selected by browser • Can vary significantly between browsers • H1…H6

  19. Text Types • EM: Indicates emphasis • STRONG: Indicates stronger emphasis • CITE: Contains a citation or a reference to other sources • DFN: Indicates that this is the defining instance of the enclosed term • CODE: Designates a fragment of computer code • SAMP: Designates sample output from programs, scripts, etc • KBD: Indicates text to be entered by the user • VAR: Indicates an instance of a variable or program argument • ABBR: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.) • ACRONYM: Indicates an acronym (e.g., WAC, radar, etc.)

  20. Style Tags • <B>Bold Text</B> • <U>Underlined Text</U> • <S>Strike-Through Text</S> • <I>Italic Text</I> • <SUP> for superscript, • <SUB> for subscript • <BIG> and <SMALL> for size of text

  21. Position Style • <PRE> - keeps white spaces • <BLOCKQUOTE> - creates a block for an example (text pushed to the left) • <P> - a new paragraph • <BR> - a line break

  22. Another Example <html><head> <title>Untitled</title></head><body> <h1>This is an example of an HTML page</h1> Here is an <b>emphasized</b> text and there is also <i>italic</i> text here. <p> So now we can say: <fontcolor="red"> Hello world</font></body></html>

  23. Lists • UL – Unordered List OL – Ordered list <UL> <LI> ... Level one, number one... <OL> <LI> ... Level two, number one... <LI> ... Level two, number two... <OL start="10"> <LI> ... Level three, number one... </OL> <LI> ... Level two, number three... </OL> <LI> ... Level one, number two... </UL>

  24. Tables <TABLE border="1"> <CAPTION><EM>A test table with merged cells</EM> </CAPTION> <TR><TH rowspan="2"></TH><TH colspan="2">Average</TH><TH rowspan="2">Red<BR>eyes</TH></TR> <TR><TH>height<TH>weight</TR> <TR><TH>Males</TH><TD>1.9</TD> <TD>0.003</TD><TD>40%</TD> <TR><TH>Females</TH><TD>1.7</TD><TD>0.002</TD><TD>43%</TD></TR> </TABLE>

  25. Global url Relative url A link to an anchor Anchors • Putting an anchor: <a name=“my picture”>…</a> • Creating a link <a href=“http://www.cs.huji.ac.il /~dbi/info.html”>text</a> <a href=“info.html”>text</a> <a href=“#my picture”>text</a>

  26. More Types of Links • <A HREF="mailto:dbi@cs.huji.ac.il">email</A> • <A HREF="news:local.course.dbi">Newsgroup</A> • <A HREF= “file://localhost/instructions/start.text”> instructions</A> • The same for ftp and telnet

  27. Images • Adding images to the page can be done using the IMG tag <img src=“monkey.gif” alt=“Picture of a monkey”> • Am image can be used as a link <a href=“monkies.html”><img src=“monkey.gif” alt=“Picture of a monkey”></a>

  28. Image Map • A picture is divided to several areas where each area is a link to a different place: <imgsrc=“monkey.gif” usemap=“#monky-map”><map name=“monky-map”> <area shape=“rect” coords=“8, 8, 49, 34” href=“http://www.cs.huji.ac.il”> <area shape=“poly” coords=“42, 87, 47, 66, 40, 87” href=“information.html”> <area shape=“circle” coords=“50, 34, 12” href=“#info”></map>

  29. Frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN“"http://www.w3.org/TR/html4/frameset.dtd"><HTML><HEAD><TITLE>A simple frameset document</TITLE> </HEAD><FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="flower.gif"> <FRAME src="table.html"> </FRAMESET> <FRAME src="list.html"> <NOFRAMES> <P>This frameset document contains: <UL> <LI><Ahref="list.html">The lists page</A> <LI><IMGsrc="flower.gif"alt="A flower"> <LI><Ahref="table.html">The tables page</A> </UL> </NOFRAMES></FRAMESET></HTML>

  30. Links in Frames • The TARGET attribute can specify where the new link will be opened: • target=“frame-name” : in the specified frame • target=“_self” : in the frame where the link is • target=“_top” : in the same window over the whole screen • target-=“_blank” : in a new window of the navigator

  31. Forms • Adds to the document components for interactions with a server: • Buttons • Checkboxes • Radio buttons • Menus • Text inputs • File select

  32. Forms <FORM action="http://www.cs.huji.ac.il/~dbi/prog/register“ method="post"> <P>First name: <INPUT type="text" name="firstname"><BR>Last name: <INPUT type="text" name="lastname"><BR><INPUT type="radio" name="sex" value="Male"> Male<INPUT type="radio" name="sex" value="Female"> Female<BR>Your photo <INPUT type="file“ name="name_of_files"><BR>email: <INPUT type="text" name="email"><BR><INPUT type="checkbox" name="updates">Mark to get updates by email<BR><INPUT type="submit" value="Send"> <INPUT type="reset"></P> </FORM>

More Related