1 / 52

Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML. Terms. Web pages Documents that are written in a language called HTML HTML Stands for H yper t ext M arkup L anguage HTML Markup tags Special codes that tell the Web browser how to display the HTML document Web browser

chakra
Download Presentation

Chapter 14 Introduction to HTML

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

More Related