1. © 2010, Robert K. Moniot1 Basic HTML An Introduction

2. © 2010, Robert K. Moniot2 OBJECTIVES ● Learn basic elements of HTML syntax – Controlling document structure – Including images in a document – Inserting hyperlinks for navigation – Making lists and tables – Including meta data for search engines ● Learn differences between HTML and XHTML

3. © 2010, Robert K. Moniot3 HTML ● Hypertext Markup Language – foundation of the World Wide Web ● Design goals: – Platform independence – Transparent to differing data formats – Convenient linking between documents – HTML defines structure, not appearance ● Openness (not proprietary) key to wide adoption of HTML & growth of Web

4. © 2010, Robert K. Moniot4 XHTML ● Based on HTML but stricter: document must be valid XML (Extensible Markup Language) – Extensible for future purposes – Improves interoperability with other data formats and user agents ● Only content and structure, not style, is specified – For style, use Cascading Style Sheets (CSS)

5. © 2010, Robert K. Moniot5 XHTML vs. HTML ● Browsers continue to accept HTML ● Adherence to XHTML improves compatibility across browsers & platforms ● Use a validator to verify compliance with standard: validator.w3.org validator.w3.org

6. © 2010, Robert K. Moniot6 Form of an HTML Document ● Plain text document (no binary codes) ● Document text includes – Content: to be rendered and displayed to user – Meta-data: describes structure, formatting, etc. ● Meta-data distinguished from content by use of tags: – Tag is tag-name enclosed in angle brackets, e.g.

7. © 2010, Robert K. Moniot7 Tags ● Most tags come in pairs: opening and closing tags ● Closing tag has tag-name preceded by a slash ● Content affected by tag is enclosed between opening and closing tag ● Example: Bold Text

8. © 2010, Robert K. Moniot8 Nesting of Tags ● Regions enclosed by tags must nest, not overlap Correct: Bold Emphasized Text Incorrect: Bold Emphasized Text

9. © 2010, Robert K. Moniot9 Closing Tags ● Some tags do not need closing tag – For some tags, closing tag is optional in HTML: paragraph. In HTML, implies closing of previous paragraph tag. For these, closing tag is mandatory in XHTML – Some tags never take closing tag: line break. For these, XHTML mandates slash / before right angle bracket >

10. © 2010, Robert K. Moniot10 Case Sensitivity ● In HTML, tag names are case-insensitive: – are all equivalent. ● In XHTML, only lower-case names allowed

11. © 2010, Robert K. Moniot11 Unknown Tags ● If browser does not recognize a tag name, the tag is ignored – Allows new tags to be introduced in later versions of HTML without causing problems for older browsers – But effect of new tags is lost in older browsers – And no error message for misspelled tag name!

12. © 2010, Robert K. Moniot12 Tag Attributes ● Tags can contain attributes – Provide needed information – Change default properties of tag ● Attribute is a name=value pair inside the angle brackets – Value always enclosed in straight quotes – Example: ● (Closing tags never contain attributes)

13. © 2010, Robert K. Moniot13 Tags for Document Type ● These tags were not in original HTML standard: introduced in XHTML ● XML version tag: ● Document type definition: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ● Best to copy and paste these from documents on Web, don’t try to type them!

14. © 2010, Robert K. Moniot14 Tags for Page Structure ● Document is divided into head and body – Head contains only meta-information, no rendered content ● May also contain style sheets & scripts – Body contains content & formatting tags ● Overall page structure: … Example 1Example 1 (ignore other tags for now)

15. © 2010, Robert K. Moniot15 Tags for Document Head ● Title tag: specifies title for browser title bar – NOT the heading that appears in page – Optional but should always be provided – Assists in navigating browser history list Example: Jane’s Home Page ● Meta tag: info about the page – Used by search engines to index page Example:

16. © 2010, Robert K. Moniot16 Tags for Document Body ● Block Elements – Headings, paragraphs, lists, etc. – Set off by line breaks – May contain nested block or inline elements ● Inline Elements – Format codes, hyperlinks, etc. – May contain only inline elements

17. © 2010, Robert K. Moniot17 Heading Tags ● Up to 6 levels of headings: Main Heading Subheading... Least Prominent Heading Example 1

18. © 2010, Robert K. Moniot18 Organizational Tags ● Paragraphs and Layout – start of a new paragraph. Closing optional in HTML but required in XHTML. – line break. Unlike is inline and does not imply extra vertical spacing. Useful e.g. for addresses. – centered text (deprecated). – for large chunk of quoted text. – preformatted text (typewriter font). Useful for showing exactly how typed text should look. Example 2

19. © 2010, Robert K. Moniot19 Tags for Style ● Explicit style tags: Boldface text Italicized text Underlined text (deprecated) Typewriter font ● Logical style tags: Prominent text (usually bold) Emphasized text (usually italics) Citation (usually italics) Computer code (usually typewriter font) Example 3

20. © 2010, Robert K. Moniot20 Tags for Style ● The tag – In early days of web programming, this tag was introduced to allow control of font family, typeface, color, etc. – This tag is now deprecated. CSS style sheets provide much better control over style and better compatibility. – Many pages still use this tag for simple effects such as text size & color. Example: Large, red text

21. © 2010, Robert K. Moniot21 Hypertext Links ● Connect one document to another. ● Link has two components: – Link text, which user sees to click on – Link target, location to which browser is directed when link is clicked ● Form of hypertext link: link text

22. © 2010, Robert K. Moniot22 Link Target ● Hypertext reference (href) is in form of a Uniform Resource Locator (URL) ● URL has 3 components, not all of which need to be supplied in every reference: – A protocol – An Internet address (name or number) – A file path Example: http://www.fordham.edu/current/index.html

23. © 2010, Robert K. Moniot23 URL Protocol ● The protocol portion of URL specifies the way the web browser will interact with the server to obtain the resource. ● Protocols supported by most browsers include: ➔ http – Hypertext Transport Protocol (the default) ➔ https – Secure HTTP ➔ ftp – File transfer protocol ➔ file – Local file on browser’s computer ➔ mailto – for email addresses

24. © 2010, Robert K. Moniot24 URL Address ● If omitted, Internet address of URL is taken to be the same as the address in the URL of the document containing the link. – i.e. link refers to a document on same server that served page containing link ● URL without address portion can be either absolute or relative.

25. © 2010, Robert K. Moniot25 URL File Path ● The file path portion of URL specifies chain of directories (folders) in which document is located on server, and name of file itself. – Directory names separated by / character ● If file name omitted, it defaults to a value defined by server, e.g. index.html Example: http://www.myplace.com/shopping/fruit/ may resolve to http://www.myplace.com/shopping/fruit/index.html

26. © 2010, Robert K. Moniot26 Relative vs. Absolute URLs ● In URL without address portion, file path may be absolute or relative – Absolute path begins with / whereas relative path does not – For relative path, chain of directories is that of URL of referencing document Absolute URL Relative URL

27. © 2010, Robert K. Moniot27 Relative URLs ● Relative file path can specify directories. – These are relative to the referencing document’s directory – Use../ to specify parent directory Link referencing file in subdirectory of current page’s directory: Relative link Link referencing file in sibling directory of current page’s directory: Relative link

28. © 2010, Robert K. Moniot28 Absolute URLs ● In absolute file path, chain of directories starts at top of web server’s URL space, called the document root. Absolute link referencing top-level home page of web server: Absolute link Absolute link referencing a file in a subdirectory of the top-level directory of server containing referencing page: Absolute link

29. © 2010, Robert K. Moniot29 Images ● Include images with tag. – Mandatory attribute src to specify URL that gives location of image – Optional, recommended attributes height & width to specify size – Optional, recommended attribute alt to provide alternate text Example:

30. © 2010, Robert K. Moniot30 Image Size ● The height and width attributes of tag can be used to resize an image, but doing so is not recommended. – Best to resize image using an image editor such as GIMP or Photoshop – Use height and width attributes to tell the browser how much space to leave for image (downloaded later) while rendering page

31. © 2010, Robert K. Moniot31 Alternate Text ● Value of alt attribute is displayed if browser cannot render images ● Is read aloud by screen-reader software – Important for accessibility ● Also may appear as a tooltip ● Separate attribute to specify tooltip: title

32. © 2010, Robert K. Moniot32 Lists ● Three types of lists: – ordered list (numbered or lettered) – unordered list (bullets) – definition list (term and description) ● For,, list item starts with ● For, head word starts with, description starts with ● List item may contain sub-list of any type

33. © 2010, Robert K. Moniot33 Lists, cont’d ● Closing tags must be supplied for,, – Otherwise browser doesn’t know where list ends ● Closing tags for,, are optional in HTML (implied by next item), mandatory in XHTML ● Sub-list must be inside an item Example 4

34. © 2010, Robert K. Moniot34 Horizontal Rule ● Separates sections of web page with horizontal line ● Self-closing tag ● Optional attributes (deprecated) – width="50%" – fraction of page width – align="center" – or left or right

35. © 2010, Robert K. Moniot35 HTML Comments ● Intended for reader of the HTML code, not the viewer of the page ● May span multiple lines ● Everything from is ignored by browser ● Useful for documenting page or hiding content temporarily

36. © 2010, Robert K. Moniot36 Special Characters ● Some characters have special meaning in HTML delimit tags ● Others are not available on keyboard or lack standard encoding “ ” © € π ● These are encoded using character entity references

37. © 2010, Robert K. Moniot37 Character Entity References ● Begin with & and end with ; ● Commonly used: < – less-than < > – greater-than > & – ampersand & ● Codes are case-sensitive (unlike tags) ● Many more defined: see www.w3.org reference on HTMLwww.w3.org

38. © 2010, Robert K. Moniot38 Other useful tags ● Superscript: x ● Subscript: x ● Strikethru text: deleted text Example 5

39. © 2010, Robert K. Moniot39 Tables ● The W3C says: “Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.” ● Be aware that visitors use different hardware & software to view your page

40. © 2010, Robert K. Moniot40 Defining Tables ● A table organizes content into a grid of horizontal rows and vertical columns ● Table area enclosed between …

41. © 2010, Robert K. Moniot41 Table Elements ● Each row starts with (closing tag optional in HTML) ● Each column (cell) of row starts with (closing tag optional in HTML) – Use for heading cells (implies more prominent text style) ● Use align attribute (values left, right, center ) to align text within a cell Example 6

42. © 2010, Robert K. Moniot42 Table Attributes ● summary="text" – provides description of table’s purpose & structure for non-visual agents (e.g. speech). ● width="length" – specifies width of table. The length value can be absolute distance in pixels or percentage of the width of the page.

43. © 2010, Robert K. Moniot43 Table Attributes for Appearance ● border="pixels" – specifies width in pixels of frame drawn around table. Use width of 0 to suppress frame. ● cellspacing="pixels" – specifies spacing between cells (above, below, and on either side). ● cellpadding="space" – sets spacing between contents of cell and its boundary. Space may be in pixels or percent of cell size.

44. © 2010, Robert K. Moniot44 Elements Within Table ● Caption: within tag. – Optional attribute align (values top, bottom, left, right ) to control where caption appears. E.g. This is the caption

45. © 2010, Robert K. Moniot45 Elements within Table, cont’d ● Group rows into head, body, and foot:... (header rows)... (footer rows)... (body rows) Note must precede so that browser can render foot before receiving all (possibly numerous) body rows, which may scroll independently of head and foot. Table can contain multiple elements.

46. © 2010, Robert K. Moniot46 Cells That Span Rows, Columns ● A single cell can span multiple rows and/or multiple columns. ● Specified using rowspan and colspan attributes of or tag. – Use valign attribute (values top, bottom, middle ) to control vertical position Example: Spans 2 columns Example: Spans 2 rows Example 7