Tutorial 1: Getting Started with HTML5 PDF

Tutorial 1 Getting Started with HTML5 HTML, CSS, and XML  Objectives XP Explore the history of the Internet, the Web, and HTML Compare the different versions of HTML Study the syntax of HTML tags and attributes...

Tutorial 1 Getting Started with HTML5 HTML, CSS, and XML  Objectives XP Explore the history of the Internet, the Web, and HTML Compare the different versions of HTML Study the syntax of HTML tags and attributes Define a Web page head, body, and title Work with the HTML5 structural elements New Perspectives on HTML, CSS and XML, 4th edition 2  Objectives XP Mark page headings, paragraphs, block quotes, and addresses Create unordered and ordered lists Apply an external style sheet to a Web page Run a JavaScript program Mark text-level elements including strong and emphasized text Insert inline images and line breaks Insert special characters from extended character sets New Perspectives on HTML, CSS and XML, 4th edition 3  The Structure of an HTML5 XP Document New Perspectives on HTML, CSS and XML, 4th edition 4  Exploring the History of the WorldXP Wide Web A network is a structure linking computers together for the purpose of sharing information and services Users typically access a network through a computer called a node or host A host that provides information or a service is called a server New Perspectives on HTML, CSS and XML, 4th edition 5  Exploring the History of the WorldXP Wide Web A computer or other device that receives a service is called a client One of the most commonly used designs is the client-server network If the computers that make up a network are close together (within a single department or building), then the network is referred to as a local area network (LAN) New Perspectives on HTML, CSS and XML, 4th edition 6  Exploring the History of the WorldXP Wide Web A network that covers a wide area, such as several buildings or cities, is called a wide area network (WAN) The largest WAN in existence is the Internet Today the Internet has grown to include an uncountable number of networks and hosts involving computers, mobile phones, PDAs, MP3 players, gaming systems, and television stations New Perspectives on HTML, CSS and XML, 4th edition 7  Exploring the History of the WorldXP Wide Web Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid the foundations for the World Wide Web, or the Web, in 1989 They developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another Hypertext is a method of organization in which data sources are interconnected through a series of links or hyperlinks that users can activate to jump from one piece of information to another New Perspectives on HTML, CSS and XML, 4th edition 8  Web Pages and Web Servers XP Each document on the World Wide Web is referred to as a Web page Web pages are stored on Web servers, which are computers that make Web pages available to any device connected to the Internet A Web browser retrieves the page from the Web server and renders it on the user’s computer or other device The earliest browsers, known as text-based browsers, were incapable of displaying images New Perspectives on HTML, CSS and XML, 4th edition 9  Introducing HTML XP A Web page is a text file written in Hypertext Markup Language A markup language is a language that describes the content and structure of a document by identifying, or tagging, different elements in the document New Perspectives on HTML, CSS and XML, 4th edition 10  The History of HTML XP The first popular markup language was Standard Generalized Markup Language (SGML) In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best New Perspectives on HTML, CSS and XML, 4th edition 11  The History of HTML XP A group of Web designers and programmers, called the World Wide Web Consortium, or the W3C, created a set of standards or specifications that all browser manufacturers were to follow The W3C has no enforcement power The recommendations of the W3C are usually followed since a uniform approach to Web page creation is beneficial to everyone New Perspectives on HTML, CSS and XML, 4th edition 12  The History of HTML XP Older features of HTML are often deprecated, or phased out, by the W3C. That does not mean you can’t continue to use them—you may need to use them if you are supporting older browsers Current Web developers are increasingly using XML (Extensible Markup Language) XML is a metalanguage like SGML, but without SGML’s complexity and overhead New Perspectives on HTML, CSS and XML, 4th edition 13  The History of HTML XP XHTML (Extensible Hypertext Markup Language) is a stricter version of HTML and is designed to confront some of the problems associated with the different and competing versions of HTML XHTML is also designed to better integrate HTML with other markup languages such as XML New Perspectives on HTML, CSS and XML, 4th edition 14  The History of HTML XP XHTML 2.0 began development, but work was halted in 2009 HTML5 was developed as the next HTML specification, and the de facto standard for the next generation of HTML New Perspectives on HTML, CSS and XML, 4th edition 15  The History of HTML XP New Perspectives on HTML, CSS and XML, 4th edition 16  HTML and Style Sheets XP HTML marks the different parts of a document, but it does not indicate how document content should be displayed by browsers For this reason, the exact appearance of each page element is described in a separate document known as a style sheet – Internal style sheets specify the appearance of different HTML elements New Perspectives on HTML, CSS and XML, 4th edition 17  Tools for Creating XP HTML Documents Basic text editor such as Windows Notepad Other software programs that enable you to create documents in different formats, such as Microsoft Word or Adobe Acrobat, include tools to convert their documents into HTML for quick and easy publishing on the Web Web publishing software manages all of the code and extended features of your site New Perspectives on HTML, CSS and XML, 4th edition 18  Entering Elements and Attributes XP An HTML document is composed of elements that represent distinct items in the Web page, such as a paragraph, the page heading, or even the entire body of the page itself – Elements are marked by one or more tags A two-sided tag is a tag that contains some document content. General syntax for a two- sided tag: content New Perspectives on HTML, CSS and XML, 4th edition 19  Marking Elements with Tags XP A two-sided tag’s opening tag () and closing tag () should completely enclose its content Elements can contain other elements – Tags cannot overlap Welcome to the J-Prop Shop New Perspectives on HTML, CSS and XML, 4th edition 20  Adding an Attribute to an ElementXP To add an element attribute, use the format content where attribute1, attribute2, etc. are the names of attributes associated with the element, and value1, value2, etc. are the values of those attributes New Perspectives on HTML, CSS and XML, 4th edition 21  White Space and HTML XP HTML file documents are composed of text characters and white space White space is the blank space, tabs, and line breaks within the file HTML treats each occurrence of white space as a single blank space You can use white space to make your document more readable New Perspectives on HTML, CSS and XML, 4th edition 22  Exploring the Structure XP of an HTML File head content body content New Perspectives on HTML, CSS and XML, 4th edition 23  The Structure of an HTML File XP An HTML document is divided into two main sections: the head and the body The head element contains information about the document, for example the document title or the keywords The content of the head element is not displayed within the Web page New Perspectives on HTML, CSS and XML, 4th edition 24  The Structure of an HTML File XP The body element contains all of the content to appear on the Web page The body element can contain code that tells the browser how to render the content New Perspectives on HTML, CSS and XML, 4th edition 25  Converting an HTML Document XP into XHTML There is considerable overlap between HTML and XHTML You can convert an HTML file into an XHTML file by replacing the opening tag with the following three lines of code: – – – New Perspectives on HTML, CSS and XML, 4th edition 26  The Document Type Declaration XP Prior to the opening tag, many HTML files also include a Document Type Declaration, or doctype, to indicate the type of markup language used in the document New Perspectives on HTML, CSS and XML, 4th edition 27  Defining the Page Title XP New Perspectives on HTML, CSS and XML, 4th edition 28  Adding Comments XP The comment tag adds notes to your HTML code Comments can be spread over several lines Comments are useful in documenting your HTML code for yourself and others New Perspectives on HTML, CSS and XML, 4th edition 29  Adding Comments XP New Perspectives on HTML, CSS and XML, 4th edition 30  Displaying an HTML File XP As you continue modifying the HTML code, you should occasionally view it with your Web browser to verify that you have not introduced any errors You may want to view the results using different browsers to check for compatibility New Perspectives on HTML, CSS and XML, 4th edition 31  Displaying an HTML File XP New Perspectives on HTML, CSS and XML, 4th edition 32  Defining the Structure XP of the Page Body New Perspectives on HTML, CSS and XML, 4th edition 33  Defining the Structure XP of the Page Body New Perspectives on HTML, CSS and XML, 4th edition 34  Marking Structural Elements XP in HTML5 To mark the page header, use the header element To mark the page footer, use the footer element To mark a main section of page content, use the section element To mark a sidebar, use the aside element To mark an article, use the article element New Perspectives on HTML, CSS and XML, 4th edition 35  Marking a Section XP with the div Element New Perspectives on HTML, CSS and XML, 4th edition 36  Page Content Elements XP New Perspectives on HTML, CSS and XML, 4th edition 37  Working with Grouping Elements XP New Perspectives on HTML, CSS and XML, 4th edition 38  Working with XP Grouping Elements Grouping elements are elements that contain content that is viewed as a distinct block within the Web page Heading elements are block-level elements that contain the text of main headings on the Web page – content – n is an integer between 1 and 6 is the largest heading is the smallest heading New Perspectives on HTML, CSS and XML, 4th edition 39  Marking Grouping Content XP To mark a heading, enter content where n is an integer from 1 to 6 and content is the text of heading To mark a paragraph, enter content To mark a block quote, enter content New Perspectives on HTML, CSS and XML, 4th edition 40  Adding Headings XP New Perspectives on HTML, CSS and XML, 4th edition 41  Marking Paragraph Elements XP New Perspectives on HTML, CSS and XML, 4th edition 42  Marking a Block Quote XP The syntax for making an extended quote is – content New Perspectives on HTML, CSS and XML, 4th edition 43  Marking an Address XP content New Perspectives on HTML, CSS and XML, 4th edition 44  Marking a List XP HTML supports three kinds of lists: ordered, unordered, and description You use an ordered list for items that must appear in a numerical order You use an unordered list for items that do not need to occur in any special order One list can contain another list. This is called a nested list New Perspectives on HTML, CSS and XML, 4th edition 45  Description Lists XP The description list contains a list of terms, each followed by the term’s description Web browsers typically display the definition description below the definition term and slightly indented: Basic Stick Easiest stick to learn New Perspectives on HTML, CSS and XML, 4th edition 46  Applying an External Style Sheet XP Style sheets are written in the Cascading Style Sheet (CSS) language To apply an external style sheet to a Web page, you create a link within the document head to the style sheet file using the link element New Perspectives on HTML, CSS and XML, 4th edition 47  Linking to a JavaScript File XP New Perspectives on HTML, CSS and XML, 4th edition 48  Marking Text-Level Elements XP New Perspectives on HTML, CSS and XML, 4th edition 49  Using the Generic Elements XP div and span HTML supports two such generic elements: div and span – The div element is used to mark general grouping content – The span element is used to mark general text- level content New Perspectives on HTML, CSS and XML, 4th edition 50  Marking a Line Break XP New Perspectives on HTML, CSS and XML, 4th edition 51  Inserting an Inline Image XP New Perspectives on HTML, CSS and XML, 4th edition 52  Figures and Figure Captions XP In books and magazines, figures and figure captions are often placed within boxes that stand aside from the main content of an article HTML5 introduced this type of object to Web page markup with the figure and figcaption elements content caption New Perspectives on HTML, CSS and XML, 4th edition 53  Working with Character Sets XP and Special Characters Character sets come in a wide variety of sizes, based on the number of symbols required for communication in the chosen Language – ASCII (American Standard Code for Information Interchange) – Latin-1 – ISO 8859-1 – Unicode – UTF-8 New Perspectives on HTML, CSS and XML, 4th edition 54  Working with Character Sets XP and Special Characters Character encoding associates each symbol from a character set with a numeric value called the numeric character reference Another way to insert a special symbol is to use a character entity reference, in which a short memorable name is used in place of the numeric character reference New Perspectives on HTML, CSS and XML, 4th edition 55  Working with Character Sets XP and Special Characters To insert a symbol based on the encoding number, use the entity &#code; where code is the encoding number. To insert a symbol based on a character entity reference, use the entity char; where char is the name assigned to the character. To insert a nonbreaking space, use the following entity: &nbsp; To insert the < symbol, use the following entity: &lt; To insert the > symbol, use the following entity: &gt; New Perspectives on HTML, CSS and XML, 4th edition 56  Working with Character Sets XP and Special Characters New Perspectives on HTML, CSS and XML, 4th edition 57  Specifying a Character Set XP New Perspectives on HTML, CSS and XML, 4th edition 58