Tutorial 1: Getting Started with HTML5 Session 1.1
Objectives Explore the history of the Internet, the Web, and HTML Compare the different versions of HTML Study the syntax of HTML tags Define a Web page head, body, and title Work with the HTML5 structural elements
Introducing HTML Web pages are written in HTML HTML = HyperText Markup Language Characteristics: Describes the content and structure of a document Uses tags HTML Ancestor SGML = Standard Generalized Markup Language SGML (first markup language)= device- and system-independent but complex and costly (because needs to maintain an environment to run the SGML). From SGML, creation of HTML, a markup language tailored to specific tasks and simpler to use and maintain. Creation of the HTML by
XHTML and the Development of HTML 5 Existence of several versions of HTML (deprecation) 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
Tools for Creating HTML Documents Basic text editor such as Windows Notepad (PC) or TextEdit (Mac). 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
Entering Elements and Attributes 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: <element>content</element>
Marking Elements with Tags A two-sided tag’s opening tag (<p>) and closing tag (</p>) should completely enclose its content Elements can contain other elements Tags cannot overlap <p>CBIS 3219: Web Development</p>
Adding an Attribute to an Element To add an element attribute, use the format <element attribute1=”value1” attribute2=”value2” ...>content</element> where attribute1, attribute2, etc. are the names of attributes associated with the element, and value1, value2, etc. are the values of those attributes. <p align =“left”>CBIS 3219: Web Development</p>
Exploring the Structure of an HTML File <html> <head> head content </head> <body> body content </body> </html> Practice 3.
HTML is like a Sandwich???
Practice Create a new html page and save it as basic.html Create the root html element and nest the head and body elements within it.
Document Type Declaration Prior to the opening <html> tag, many HTML files also include a Document Type Declaration, or doctype, to indicate the type of markup language used in the document. Doctype for HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN” “http://www.w3.org/TR/html4/strict.dtd”> Doctype for XHTML: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd”> Doctype for HTML5: <!DOCTYPE html> Practice 2
Practice Add the doctype for HTML5 to the basic page.
Head Element Page Title (appears in the title bar of the browser) Syntax: <title>document title</title> Example: <title>Shop clothes for women, men, maternity, baby, and kids | Gap </title> Practice 6 Used by search engines when compiling an index of search results.
Practice Set the page title of the Basic page to The J-Prop Shop – Special This Month.
Adding Comments Purpose: Explain your code to yourself or others. Comments are not displayed in the browser. Comments can be spread over several lines if necessary. Syntax: <!-- comment --> Example: <!– The doctype of this document indicates that HTML5 is used --> Practice 4
Practice Within the head element, insert the comment The J-Prop Shop Sample Page for the Basic Stick Author: Your name Date: the date
Defining the Structure of the Page Body Example of the J. Whitney Bunting College of Business Web site: http://www.gcsu.edu/business/deanswelcomeundergrad.htm
Insert HTML5 Structural Elements Example: <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer> Practice 9
Within the section structural element <section> <article> </article> </section> Practice 12
No Structural Element in HTML 4.01 or XHTML Replace the structural elements with div elements. Syntax: <div id=“id”> content </div> id = unique name assigned to the division (not required but useful). content = page content contained within the division.
Practice Within the body element, create structural elements for the page header, main section, and footer.
Summary of tags <doctype> <html> <head> <body> <title> <header>, <section>, <article>, <nav>, <aside>, <footer> or <div> Comments: <!-- Tips: use comments to explain your code-->