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

2. 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. 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. 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. 5 What is HTML? Is not a 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: –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.

6. 6 A simple HTML page My First HTML Page Hello World Wide Web!

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

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

9. 9 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 Errors in an html page are usually recoverable In HTML, there is an exception to almost every rule!

10. 10 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:

11. 11 Another Example Untitled 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

12. 12

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

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

15. 15 More Hyperlinks Email Newsgroup Connect to the Library

16. 16 Advanced HTML

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

18. 18 Frames

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

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

21. 21 Example Frames Example Here is a description of what you are missing since your browser doesn’t support frames.

22. 22 Frames In Browser

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

24. 24 What’s Wrong? What is wrong with the file “bad.html”: Bad Example

25. 25 More Problems with Frames 1.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 2.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?

26. 26 Images Adding images to the page can be done using the IMG tag Am image can be used as a link

27. 27 The Head of an HTML Page The META tag adds information about the document (rather than content) Examples:

28. 28 Forms

29. 29 Forms A form is surrounded by: 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

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

31. 31 Form Widgets Example Text: Password: Checkbox 1: Checkbox 2: Option 1: Option 2:

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

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

34. 34 Example Default text... bananas apples tomatoes cucumbers lettuce

35. 35 Important Topics not Covered Tables Using Hebrew in a document Setting the background, font and link colors Entities ( < > ) See references for details about these