1. 1 Lecture #5 Static Web Documents Shimrit Tzur-David HAIT Summer 2005

2. 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: –Publish online 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. 3 A simple HTML page My First HTML Page Hello World Wide Web!

4. 4 A simple HTML page – Cont. My First HTML Page Hello World Wide Web! Generally, tags come in pairs, an opening tag and a closing tag Tags can have attributes, which have values HTML contains text, separated by tags

5. 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 My First HTML Page Hello World Wide Web!

6. 6 Some More General Rules Tags are not case sensitive (,, 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. 7 Entities There are entities that replace special symbol: – Space: –<: < –>: > –&: & Why are these entities defined?

8. 8 The Body of an HTML Page Headings:, …, where h1 is the most important Paragraphs: (optional closing tag) Line breaks: (no closing tag) Horizontal lines: (no closing tag) Formatted text: bold, italics, underline Font colors and styles:

9. 9 Another Example Example 2 This is an example of an HTML page Here is emphasized text and there is also italic text here. Here is a new line Is this easy ? And some parting words... Good Bye

10. 10 The Page

11. 11 Lists Unordered lists: Ordered lists: List items: (optional closing tag) Item 1 Item 2 Inner list item Another one Item 3

12. 12 Hyperlinks Basic form: text to be linked Defining an anchor: text to anchor Examples: 1.Complete Path Google 2.Relative Path Exercise 1 3.Relative Path to Anchor To Submit 4.Email Email

13. 13 Images Adding images to the page can be done using the img tag An image can be used as a link What will happen when we click the image?

14. 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) –

15. 15 Frames

16. 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. 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. 18 Example Frames Example Here is a description of what you are missing since your browser doesn ’ t support frames.

19. 19 Frames in Browser

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

22. 22 Forms – Cont. A form is surrounded by: 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. 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. 24 Form Widgets Example Text: Password: Checkbox 1: Checkbox 2: Option 1: Option 2:

25. 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. 26 Example Default text... bananas apples tomatoes cucumbers lettuce

27. 27 Tables Example of Using Tables A test table with merged cells Average Red eyes height weight Males 1.9 0.003 40% Females 1.7 0.002 43%

28. 28 Tables

29. 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. 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. 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. 32 Simple Example Formatting style with CSS A joke 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!").

33. 33 Simple Example – Cont.

34. 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. 35 Formatting style with CSS A joke 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!").

36. 36