Lecture 7: Introduction to HTML PDF

Lecture 7: Introduction to HTML Copyright © 2016 Pearson Education, Inc. All Rights Reserved Learning Objectives 7.1 The basic structure for an HTML document 7.2 How to use the HTML tags 7.3 How to construct absolute and relative file paths 7.4 How to embed images on a web page...

Lecture 7: Introduction to HTML Copyright © 2016 Pearson Education, Inc. All Rights Reserved Learning Objectives 7.1 The basic structure for an HTML document 7.2 How to use the HTML tags 7.3 How to construct absolute and relative file paths 7.4 How to embed images on a web page Copyright © 2016 Pearson Education, Inc. All Rights Reserved Terms (1 of 4) Web pages – Documents that are written in a language called HTML HTML – Stands for Hypertext Markup Language HTML Markup tags – Special 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 Copyright © 2016 Pearson Education, Inc. All Rights Reserved Terms (3 of 4) 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: Adobe Dreamweaver – Allows you to create and edit the page visually without having to manually add markup tags Copyright © 2016 Pearson Education, Inc. All Rights Reserved Terms (4 of 4) URL – Stands for Uniform Resource Locator – This is the standard for specifying the address of Web pages and other resources on the World Wide Web – Example: http://www.schoolname.edu/departments/compsci/ind ex.html Copyright © 2016 Pearson Education, Inc. All Rights Reserved  Term (1 of 5) XHTML – Stands for Extensible Hypertext Markup Language – Intended to be a replacement for HTML – Most of the tags are the same as those in HTML – Has stricter rules for writing HTML – These stricter rules are also supported but not enforced in HTML Cascading Style Sheets (CSS) – Widely used for Web page design and layout – Style sheets allow you to define styles to display HTML elements Copyright © 2016 Pearson Education, Inc. All Rights Reserved Term (3 of 5) JavaScript – A scripting language for Web pages – Can be used to: ▪ add interactivity ▪ generate content on the Web page based on the viewer’s choice ▪ validate online forms before submission ▪ create and track cookies Copyright © 2016 Pearson Education, Inc. All Rights Reserved Term (4 of 5) HTML 5 – The newest standard of HTML – Its specifications are still a work in progress – 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 Copyright © 2016 Pearson Education, Inc. All Rights Reserved Term (5 of 5) ▪ 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 Copyright © 2016 Pearson Education, Inc. All Rights Reserved  Markup Tag (2 of 2) Tells the Web browser the format of the text surrounded by < and > Example: Paragraph tag – start tag:  p  Examples: Tags without content – end tag:  /p  – line break: Placement of start and end tags can be written as: – Example: – image tag: This is a Paragraph can be written as: Copyright © 2016 Pearson Education, Inc. All Rights Reserved Attributes of a Tag To specify properties of the element that marked up the tag Example: – id attribute: This is a paragraph. Placed inside the start tag In name-value pairs like this: name = “value” Copyright © 2016 Pearson Education, Inc. All Rights Reserved Basic Structure of an HTML Document Copyright © 2016 Pearson Education, Inc. All Rights Reserved 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 – title element is nested inside Copyright © 2016 Pearson Education, Inc. All Rights Reserved Basic Structure of an XHTML Document (1 of 2) Same basic structure as an HTML document Plus a DOCTYPE declaration before tag Copyright © 2016 Pearson Education, Inc. All Rights Reserved 3 Document Types The XHTML 1.0 specifies three document types: Strict Transitional Frameset Copyright © 2016 Pearson Education, Inc. All Rights Reserved XHTML versus HTML (1 of 2) XHTML elements must always be closed or paired – Any start tag must be paired with an end tag XHTML tags and attributes must be in lowercase XHTML elements must be properly nested within each other Copyright © 2016 Pearson Education, Inc. All Rights Reserved XHTML versus HTML (2 of 2) An XHTML document must have one root element (i.e., the topmost element) – is the root element of an XHTML document – The HTML element must designate the XHTML namespace, like this: – Xmlns is the namespace attribute There must be a DOCTYPE declaration in the document prior to the root element (i.e.,) Copyright © 2016 Pearson Education, Inc. All Rights Reserved HTML 5 Latest revision of HTML Backward compatible New key features: – video and audio tags – content-specific tags – tags for form elements – canvas element – storage of user data Copyright © 2016 Pearson Education, Inc. All Rights Reserved Video, Audio and Content-Specific Tags Allow simple code for adding video and audio on Web pages Video and audio are played back by the Web browser's built-in player, not plug-ins Examples: , , , , , , , Allow mark up content by semantics Provide a standardized system to classify the information on Web pages Copyright © 2016 Pearson Education, Inc. All Rights Reserved Form Elements, Canvas and Storage of User Data Examples: date picker, color picker, numeric stepper, new input types (email, url, and search) Allows drawing graphics and placing images dynamically inside it using JavaScript. For animations and game development Approx. 5 MB depending on browsers Larger data limit than cookies (4 KB limit) Storage and retrieval of data on the user's device; i.e., no need for databases or user accounts set up on the server Copyright © 2016 Pearson Education, Inc. All Rights Reserved HTML 5 DOCTYPE declaration – Character encoding – Cases for tag and attribute names – No restriction Copyright © 2016 Pearson Education, Inc. All Rights Reserved HTML 5 Values of attributes – Does not have to be in quotation marks Boolean attribute – No need to write out the value. Jus the presence of the attribute means it is true; End tag – Not required. Closing tag not required for tags without content such as br and img. Copyright © 2016 Pearson Education, Inc. All Rights Reserved HTML 5 Basic Structure Copyright © 2016 Pearson Education, Inc. All Rights Reserved Paragraph: Example: This is the first paragraph. This is the second paragraph. Line Break: Example: This is the first paragraph.This is a new line of the same sameparagraph. This is the second paragraph. Copyright © 2016 Pearson Education, Inc. All Rights Reserved Headings: - (1 of 2) Left angle bracket h 1 right angle bracket hyphen left angle bracket h 6 right angle bracket. Example: Copyright © 2016 Pearson Education, Inc. All Rights Reserved Bold and Italics (1 of 4) Bold: Italics: Copyright © 2016 Pearson Education, Inc. All Rights Reserved List (1 of 3) Ordered list: Unordered list: List item: Copyright © 2016 Pearson Education, Inc. All Rights Reserved Link: Left angle bracket a h r e f = double quote unspecified double quote right angle bracket left angle bracket forward slash a right angle bracket. General Syntax: href is the attribute Example: Copyright © 2016 Pearson Education, Inc. All Rights Reserved Image: Left angle bracket i m g s r c = double quote unspecified double quote right angle bracket left angle bracket forward slash i m g right angle bracket. General Syntax: No element content src is the attribute Example: Copyright © 2016 Pearson Education, Inc. All Rights Reserved Table (1 of 5) Table: Table row: Table data: Copyright © 2016 Pearson Education, Inc. All Rights Reserved 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 (/) Types of File Paths for Web Documents – Absolute paths – Document-relative paths – Site root-relative paths Copyright © 2016 Pearson Education, Inc. All Rights Reserved Absolute Paths / Document-Relative Paths Example of Absolute Path: 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 Example of Document-Relative Path: products/coffee/french-roast.html Most used in Web authoring The path is relative to the page that french-roast.html is being requested Copyright © 2016 Pearson Education, Inc. All Rights Reserved 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 Copyright © 2016 Pearson Education, Inc. All Rights Reserved Example Folder Structure of a Site Copyright © 2016 Pearson Education, Inc. All Rights Reserved To Construct a Document-Relative Path (3 of 7) Example: To add a link in mocha-java.html (source page) to link to french-roast.html (target page), the file path is simply the filename french-roast.html Copyright © 2016 Pearson Education, Inc. All Rights Reserved To Construct a Document-Relative Path (5 of 7) Example: To add a link in index.html (in my-site folder) to link to french-roast.html (target page), the relative path is: products/coffee/french-roast.html Copyright © 2016 Pearson Education, Inc. All Rights Reserved To Construct a Document-Relative Path (7 of 7) Example: To add a link in french-roast.html (source page) to link to index.html (in my-site folder), the relative path is:../../index.html Copyright © 2016 Pearson Education, Inc. All Rights Reserved