Chapter 14 Introduction to HTML

1. Chapter 14Introduction to HTML

2. Terms • Web pagesDocuments that are written in a language called HTML • HTMLStands for Hypertext Markup Language • HTML Markup tagsSpecial codes that tell the Web browser how to display the HTML document • Web browser • An application that can interpret HTML and display the document in the format and layout according to the markup tags • Examples: Firefox, Internet Explorer, Safari, Chrome, Opera

3. Terms • HTML Document • A plain text file, that can be created using: • a text editor (Notepad in Windows, or TextEdit in Mac OS) • a Web page editor • Web page editor • Example: Microsoft Expression Web, Adobe Dreamweaver • Allows you to create and edit the page visually without having to manually add markup tags

4. URL • Stands for Uniform Resource Locator • standard for specifying the address of Web pages and other resources on the World Wide Web • Example:http://www.schoolname.edu/departments/compsci/index.html • The address is made up of segments of standard information: • http:// • http stands for Hypertext Transfer Protocol • The protocol specifies a set of rules that govern how the information transfer between the Web server and the Web client (the computer that requests to view the page)

5. URL • Example:http://www.schoolname.edu/departments/compsci/index.html • The address is made up of segments of standard information: • www.schoolname.edu • This is the domain name of the Web server

6. URL • Example:http://www.schoolname.edu/departments/compsci/index.html • The address is made up of segments of standard information: • departments/compsci/index.html • This is the file path of the document index.html • The file path is the location information of the page on the Web server • In this example, the document index.html is in a folder called compsci, which in turn is located in a folder called departments

7. Term • Cascading Style Sheets (CSS) • Widely used for Web page design and layout • Style sheets allow you to define styles to display HTML elements • Style sheet files are text files • The styles defined in the files follow specific rules and syntax

8. Term • JavaScript • A scripting language for Web pages • Can be used to: • Add functional features on web pages including interactivity • validate online forms before submission

9. Term • Dynamic HTML (DHTML) • Not a programming language by itself, but a combination of HTML, CSS, and JavaScript • When combined with CSS, JavaScript can be used to dynamically control properties such as: • text styles • text color • visibility of HTML elements • positioning of HTML elements (and hence create animation) • image file to be used for an image element (and hence create animation)

10. Term • HTML 5 • The newest standard of HTML • Its specifications are still a work in progress (at the time of writing the book) • New features of HTML 5 include: • video and audio tags • content-specfic tags: footer, header, nav, article, section, figure, summary, aside • tags for form elements • canvas element: • allows drawing graphics and displaying images dynamically using JavaScript • commonly used for HTML 5 game development • allowing storage and retrieval of data on the user's device using JavaScript

11. Markup Tag • Tells the Web browser the format of the text • Surrounded by < > • Examples: • paragraph tag: <p> • HTML Components <a href=“http://www.towson.edu">Towson Univ.</a> Ending tag value Starting tag attribute elements

12. Markup Tag • In pairs: start tag and end tag (closing tag) • Example: • start tag: <p> • end tag: </p> • Placement of start and end tags • Example:<p>This is a paragraph.</p> element content

13. Tags That Do Not Have Element Content Examples: • line break: <br></br>can be written as: <br /> • image tag: <img></img> can be written as: <img />

14. Attributes of a Tag • To specify properties of the element that is marked up the tag • Example: • id attribute:<p id="introduction">This is a paragraph.</p> • Placed inside the start tag • In name-value pairs like this:name = "value"

15. Basic Structure of an HTML Document <html> <head> <title>This is a title.</title> </head> <body> This is the content of the Web page. </body> </html>

16. Document Tags • <html> tag • Tells the browser that this is the start of an HTML document • Start tag <html> is placed at the beginning of the HTML document • End tag </html> is placed at the end of the HTML document • <head> tag • Its element content is information about the document • <title> • function definitions of JavaScript • links to external JavaScript and style sheets • Header information is not displayed in the body of the browser window

17. Document Tags • <title> Tag • Its element content is the title of the document. • The title is displayed on the Window bar of the browser window. • The title is used as the bookmark for the page. • Displays a title for the page in search-engine results • <body> Tag • Defines the document's body. • Its element content is what will be displayed in the browser window. • Contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

18. Nested Tags • Markup elements can be nested in another element (i.e., placed within another element’s content.) • Example: • header and body elements are nested inside <html> • title element is nested inside <head>

19. Paragraph: <p></p> • Browsers automatically add some space (margin) before and after each <p> element. • The margins can be modified with CSS (with the margin properties).

20. Line Break: <br /> • Inserts a single line break • <br> tab is empty tag which means that it has no end tag • Note • Use the <br> tag to insert line breaks, not to create paragraphs • In XHTML the <br> tag must be properly closed, like this: </br>

21. Headings: <h1> - <h6> • <h1><h2><h3><h4><h5><h6> • Display title or subtitle on web pages

22. Font Styling Tags • <i> : renders as italic text • <b> : renders as bold text • <big> : renders as bigger text • <tt> : renders as teletype text • <small> renders as smaller text

23. Superscripts and Subscripts • <sub> • Defines subscript text • Subscript text appears half a character below the baseline • <sup> • Defines superscript text • Superscript text appears half a character above the baseline

24. Emphasizing Text • <em> • Renders as emphasized text • <strong> • Renders as strong (highlighted) text

25. Other Font Styling Tags • <dfn> • Defines a definition term • <code> • Defines a piece of computer code • <sample> • Defines sample output from a computer program • <kbd> • Defines keyboard input • <var> • Defines a variable part of a text • <cite> • Defines a citation

26. Highlighting Text • <mark> • Defines marked text • Used to highlight parts of your text

27. Ordered List • <ol> • Defines an ordered list • <li> • Defines list items

28. Unordered List • <ul> • Defines an unordered (bulleted) list. • <li> • Defines list items

29. Comments • <!-- --> • Used to insert comments in the source code • Comments are not displayed in the browser • Use comments to explain your code, which can help you when you edit the source code at a later time

30. Link: <a href="..."></a> • A link has two main parts • Destination • Specify what happen when the visitor triggers the link • Label • The part that the visitor sees in a browser <a href="url or file path">whatever to be displayed as a clickable link</a> destination label

31. Links • <a></a> • A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or new section within the current document • When you move the cursor over a link in a Web page, the arrow will turn into a little hand

32. Links (Cont.) Move to “tip” section in current page Move to www.towson.edu Open a new web page and move to www.towson.edu Launch a default e-mail application such as MS-outlook

33. Image Format • Presently, the three most widely used formats on the Web are JPEG, PNG, and GIF. • Current browsers can view all three image formats • JPEG • Handles large amounts of color • compresses image into small size • A lossy format which means you lose some of the image’s original information when you save it as a JPEG • Usually used for color photo-graphs • PNG and GIF • Compresses areas of continuous colors of repetitive patterns better than the JPEG format does • Usually used for logos with large amounts of solid pattern

34. Image: <img src="..."></img> • General Syntax: <imgsrc="url or file path" /> or <imgsrc="url or file path"></img> • No element content • src is the attribute • Example: <imgsrc="logo.jpg" />

35. linking Images to a Page • <img> • Used to link images to a HTML page • Note that images are not inserted into a HTML page, images are linked to a pages • <img> tag creates a holding space for the referenced image • src: Specifies the location of page • alt : Specifies an alternate text for an image • height : Specifies the height of an image • width : Specifies the width of image width height If the image exist If the image doesn’t exist

36. Hyper Link and Image • <img> tag can be nested in <a> tag • By nesting <img> tag in <a> tag, an image can be used for hyper link When a user clicks the image, destination page is displayed on the scree

37. Image Map • <map> • Defines clickable area in an image • Name : associated with usemap attribute in <img> tag • <area> : defines an area inside an image map • Shape : specifies the same of an area • Coords : Specifies the coordinates of area 0,0 8 (radius) 8 124, 58 (center) 82,126 145,126

38. Table • HTML table model allows us to arrange data (text, image, links, forms, form fields, other table, etc.) into rows and columns of cells • Defining Table Structure • The number of rows and columns • The location of column heading • The placement of a table caption • Once the table structure is in place, you can start entering data into the table

39. Table (cont.) • Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure. • Each row of the table is indicated using a two-sided <tr> (for table row). • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells. two rows two columns

40. <table>, <tr>, and <td> tags Example: A table without a border <table> <tr> <td> row 1, column 1</td> <td> row 1, column 2</td> </tr> <tr> <td> row 2, column 1</td> <td> row 2, column 2</td> </tr> <tr> <td> row 3, column 1</td> <td> row 3, column 2</td> </tr> </table> Example: A table with a border <table border="1"> <tr> <td> row 1, column 1</td> <td> row 1, column 2</td> </tr> <tr> <td> row 2, column 1</td> <td> row 2, column 2</td> </tr> <tr> <td> row 3, column 1</td> <td> row 3, column 2</td> </tr> </table>

41. Table Without a table border With a table border

42. Creating Headings with the <th> Tag • HTML provides the <th> tag for table headings. • Text formatted with the <th> tag is centered within the cell and displayed in a boldface font. • The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text Text in cells formatted with the <th> tag is bold and centered above each table column.

43. File Path • Location of a file on a computer • Like an address to a house • Start with the outermost folder to the inner folders • Folder names are separated by a slash (/)

44. Types of File Paths for Web Documents • Absolute paths • Document-relative paths • Site root-relative paths

45. Absolute Paths • Example:http://www.mysite.com/products/coffee/french-roast.html • Full URL to a Web page or any media • Used for linking to files that are on a different Web site Request(http://www.mysite.com/products/coffee/french-roast.html)

46. Document-Relative Paths • Example:products/coffee/french-roast.html • Most commonly used in Web authoring • Request starts at the current folder • The path is relative to the page that french-roast.html is being requested. Root folder Product folder and index.html are in the same folder Request(products/coffee/french-roast.html) from index.html 46

47. Document Relative Path(Cont..) • Example:../products/coffee/french-roast.html • “..” Means going to the parent folder Request(../products/coffee/french-roast.html) from cart.html

48. Site Root-Relative Paths • Example:/products/coffee/french-roast.html • Starts with a slash (/), meaning starting from the root folder of the site • A root folder is the outermost folder of the site Request(/products/coffee/french-roast.html) from cart.html

49. Example Folder Structure of a Site Root folder Root folder

50. Navigating Folders