1 / 35

HTML: HyperText Markup Language

HTML: HyperText Markup Language. Representation and Management of Data on the Internet. Disclaimer. HTML is a broad topic. Only a small part of using HTML will be taught. Links to tutorials and resources for learning HTML are available at the course homepage.

cahil
Download Presentation

HTML: HyperText Markup Language

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. Disclaimer HTML is a broad topic. Only a small part of using HTML will be taught. Links to tutorials and resources for learning HTML are available at the course homepage. You can also learn from pages on the web, by using the “View Source” option

  3. What is the World-Wide Web? • 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) A network of computers, along with

  4. What is a URI? • A Uniform Resource Identifier is a string that uniquely identifies a resource • One type of URI is a Uniform Resource Locator (URL). A URL is generally made up of: • The protocol used to access the resource • The domain name where the resource is located • The name of the resource itself, given as a path http://www.cs.huji.ac.il/~dbi

  5. What is HTML? • Is nota programming language • Is used to write web pages: specify the style that should be used when displaying the page • HTML gives authors the means to: • Publishonline documents with text, images, etc. • Retrieve online information via hypertext links • Design forms for conducting transactions with remote services, for searching for information, making reservations, ordering products, etc.

  6. A simple HTML page <html> <head><title>My First HTML Page</title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html>

  7. A simple HTML page • HTML contains text, separated by tags • Generally, tags come in pairs, an opening tag and a closing tag • Tags can have attributes, which have values <html> <head><title>My First HTML Page</title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html>

  8. Some General Rules • HTML page is surrounded by the html tag • 2 Basic parts: • Head: Consists of things that describe the document (e.g., title – shown on the browser bar) • Body: Consists of the content of the document <html> <head><title>My First HTML Page</title></head> <body><font color=“red”> Hello World Wide Web!</font></body> </html>

  9. Some More General Rules • Tags are not case sensitive (<head>, <HEAD>, <Head> are the same) • Whitespace in an html document is ignored • HTML files should end with .htm or .html • Your homepage should be in ~login/www and called index.html • Errors in an html page are usually recoverable • In HTML, there is an exception to almost every rule!

  10. The Body of an HTML Page • Headings: <h1>, …, <h6> where h1 is the most important • Paragraphs: <p> (optional closing tag) • Line breaks: <br>(no closing tag) • Horizontal lines: <hr>(no closing tag) • Formatted text: bold <b>, italics <i>, underline <u> • Font colors and styles: <font color = “red” face=“Arial”>

  11. Another Example <html><head> <title>Untitled</title></head><!–- Here is a comment --> <body> <h1>This is an example of an HTML page</h1> <p>Here is <b>emphasized</b> text and there is also <i>italic</i> text here. <br> Here is a new line </p> <p>Is this<font color=“blue” face=“Arial”>easy</font>?<p><hr>And some parting words... Good Bye </body> </html>

  12. <ol> <li>Item 1 <li>Item 2 <ul> <li>Inner list item <li> Another one </ul> <li>Item 3 </ol> Lists • Unordered lists: <ul> • Ordered lists: <ol> • List items: <li> (optional closing tag)

  13. Hyperlinks Basic form: <a href = “target”>text to be linked</a> Defining an anchor: <a name = “anchor_name”> text to anchor </a> Examples: • Complete Path <a href = “http://www.google.com”>Google</a> • Relative Path <a href = “assigments/ex1.html”>Exercise 1</a> • Relative Path to Anchor <a href = “assigments/ex1.html#submit”>To Submit</a>

  14. More Hyperlinks • <a href ="mailto:dbi@cs.huji.ac.il">Email</a> • <a href="news:local.course.dbi">Newsgroup</a> • <a href=“telnet://aleph@ram0.huji.ac.il”> Connect to the Library</a>

  15. Advanced HTML

  16. Document Type Definitions • Since there are many standards for HTML, you should specify which one you are using. Put a document type definition (DTD) as the first line of your file (before the html tag) • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ > • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

  17. Frames

  18. FrameSets • Instead of a “BODY”, the document has a “FRAMESET” element • Size and number of frames is determined by the attributes “COLS” and “ROWS” • Size can be given as a percent (50%) or number of pixels (70) or as “remaining size” (*)

  19. Frames • Within FRAMESET elements, there can be FRAMESETs, FRAMEs, and NORAMEs • A FRAME can have the attributes: • src=“url”: The url to be displayed in the frame • name=”window_name”: Name, used for targeting • scrolling=“yes|no|auto”: auto is default • In a NOFRAMES element put content for browsers that don’t support frame

  20. Example <html><head><title>Frames Example</title></head> <frameset cols=“20%,*”> <frameset rows=“200,*”> <frame name=“frame1” src=“merlin.gif”> <frame name=“frame2” src=“helloWorld.html”> </frameset> <frame name=“frame3” src=“http://www.cs.huji.ac.il/~dbi/main.html”> <noframes> Here is a description of what you are missing since your browser doesn’t support frames. </noframes> </frameset> </html>

  21. Frames In Browser

  22. Links in Frames • In a link, the TARGET attribute can specify where the new page 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

  23. What’s Wrong? • What is wrong with the file “bad.html”: <html> <head><title>Bad Example</title></head> <frameset cols=“20%,*”> <frame name=“frame1” src=“merlin.gif”> <frame name=“frame2” src=“bad.html”> </frameset> </html>

  24. More Problems with Frames • The one-to-one relationship between the url and the view has been broken • you can’t bookmark what you see • a search engine can’t index the page properly • Pages can be “stolen” using frames • Think about it: How can you make a page using a frameset and doesn’t suffer from problem 1?

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

  26. The Head of an HTML Page • The META tag adds information about the document (rather than content) • Examples: <META name="Author”content=“Sara Cohen”> <META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <META http-equiv="refresh" content=“10; url=http://www.cs.huji.ac.il/~mynewpage"> <META http-equiv="refresh" content="0; url=maotzur2.mid">

  27. Forms

  28. Forms • A form is surrounded by: <form method=“method_type” action=“url”> </form> • where: • method_type is GET or POST (more details when you learn about HTTP) • url is the page that should get the form’s contents

  29. Form Widgets • Input tag, with attributes: • type: text/password/checkbox/radio/submit/reset • name: name of variable that widget defines (not needed for submit and reset widgets) • value: for text/password -> default value, for checkbox/radio -> value of the button when checked, submit/reset -> label of button • checked: for checkbox/radio -> means checked by default • size: for text/password -> size in characters • maxlength: for text/password -> maximum number of input characters

  30. Form Widgets Example <form method=“get” action="http://www.cs.huji.ac.il/~noplace"> Text: <input type="text" name="mytext"> <br> Password: <input type="password" name="mypassword"> <br> Checkbox 1: <input type="checkbox" name="mycheck1" value="1 check" checked="true" > Checkbox 2: <input type="checkbox" name="mycheck2" value="2 check"> <br> Option 1: <input type="radio" name="myradio" value="1 radio"> Option 2: <input type="radio" name="myradio" value="2 radio"><br> <input type = "submit"> <input type = "reset"> </form>

  31. More Widgets • Select tag, with attributes • name: name of variable that widget defines • size: if size is > 1, then a listbox is displayed, otherwise a pop-down menu is displayed • multiple: if present, allow multiple selections (then, always displayed as listbox) • Within tag, option tags with the choices. Can have attribute selected, if selected by default

  32. Yet Another Widget • Textarea tag, with attributes • name: name of variable that widget defines • rows: height of text area • cols: width of text area

  33. Example <textarea name="mytext" rows="3" cols="20">Default text... </textarea><br> <select name="fruit" size="1"> <option> bananas <option> apples </select> <select name="vegetables" size="2"> <option> tomatoes <option> cucumbers <option> lettuce </select> <br>

  34. Important Topics not Covered • Tables • Using Hebrew in a document • Setting the background, font and link colors • Entities (&nbsp; &lt; &gt; ) • See references for details about these

More Related