1 / 36

Lecture #5 Static Web Documents

Lecture #5 Static Web Documents. Shimrit Tzur-David HAIT Summer 2005. HTML: HyperText Markup Language. HTML is a Markup Language It is used to write web pages: specify the role of different parts of the page and the style that should be used when displaying the page

holt
Download Presentation

Lecture #5 Static Web Documents

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. Lecture #5Static Web Documents Shimrit Tzur-David HAIT Summer 2005

  2. HTML: HyperText Markup Language • HTML is a Markup Language • It is used to write web pages: specify the role of different parts of the page and 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.

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

  4. HTML contains text, separated by tags A simple HTML page – Cont. • 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>

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

  6. 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 • In HTML, there is an exception to almost every rule!

  7. Entities • There are entities that replace special symbol: • Space: &nbsp; • <: &lt; • >: &gt; • &: &amp; Why are these entities defined?

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

  9. Another Example <html><head> <title>Example 2</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>

  10. The Page

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

  12. Hyperlinks Basic form: <a href = “target-url”>text to be linked</a> Defining an anchor: <a href = “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> • Email <a href ="mailto:dbi@cs.huji.ac.il">Email</a>

  13. Images • Adding images to the page can be done using the img tag <img src=“monkey.gif” alt=“Picture of a monkey”> • An image can be used as a link <a href=“monkies.html”><img src=“monkey.gif” alt=“Picture of a monkey”></a> • What will happen when we click the image?

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

  15. Frames

  16. 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” (*)

  17. Frames • Within FRAMESET elements, there can be FRAMESETs, FRAMEs, and NOFRAMEs • 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

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

  19. Frames in Browser

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

  21. Forms

  22. Forms – Cont. • 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 location of the server that should get the form’s contents

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

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

  25. 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 • Textarea tag, with attributes • name: name of variable that widget defines • rows: height of text area • cols: width of text area

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

  27. Tables <h1>Example of Using Tables</h1> <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>

  28. Tables

  29. What are Style Sheets • A style sheet is a mechanism that allows to specify how HTML pages should look • Do we have style in simple HTML files? • For HTML files that do not have an explicit style, where is their style hidden? • A style sheet file!

  30. Why do we Need a Style Sheet? • Separates content from format • Consistent appearance over a site • Allows to easily change style • In one page • In a whole site • Increases the ability to handle style features

  31. A CSS Style Sheet • A file that ends with .css • Contains a list of style rules for HTML elements • Case insensitive • Comments are enclosed in /* */

  32. Simple Example <HTML> <HEAD><TITLE>Formatting style with CSS</TITLE></HEAD> <BODY> <IMG SRC="tomato.gif"> <H1>A joke</H1> <P> A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </P> </BODY> </HTML>

  33. Simple Example – Cont.

  34. Style File: joke.css BODY { background-image: url("tomato1.gif"); background-attachment: fixed } H1 { background-color: rgb(100,150,100); /* green */ color: rgb(250, 200, 250) /* pink */ } P { background-color: yellow; color: purple; font-size: 200% }

  35. <HTML> <HEAD><TITLE>Formatting style with CSS</TITLE> <LINK rel="stylesheet" type="text/css” href=“joke.css“> </HEAD> <BODY> <IMG SRC="tomato.gif"> <H1>A joke</H1> <P> A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </P> </BODY> </HTML>

More Related