Presentation on theme: "Tutorial 1: Getting Started with HTML5"— Presentation transcript:
1 Tutorial 1: Getting Started with HTML5 Session 1.1
2 Objectives Explore the history of the Internet, the Web, and HTML Compare the different versions of HTMLStudy the syntax of HTML tagsDefine a Web page head, body, and titleWork with the HTML5 structural elements
3 Introducing HTML Web pages are written in HTML HTML = HyperText Markup LanguageCharacteristics:Describes the content and structure of a documentUses tagsHTML AncestorSGML = Standard Generalized Markup LanguageSGML (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
4 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 HTMLXHTML is also designed to better integrate HTML with other markup languages such as XML
5 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 WebWeb publishing software manages all of the code and extended features of your site
6 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 itselfElements are marked by one or more tagsA two-sided tag is a tag that contains some document content. General syntax for a two-sided tag:<element>content</element>
7 Marking Elements with Tags A two-sided tag’s opening tag (<p>) and closing tag (</p>) should completely enclose its contentElements can contain other elementsTags cannot overlap<p>CBIS 3219: Web Development</p>
8 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>
9 Exploring the Structure of an HTML File <html> <head> head content </head> <body> body content </body> </html>Practice 3.
11 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.
12 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” “Doctype for XHTML:<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “ strict.dtd”>Doctype for HTML5:<!DOCTYPE html>Practice 2
13 PracticeAdd the doctype for HTML5 to the basic page.
14 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 6Used by search engines when compiling an index of search results.
15 PracticeSet the page title of the Basic page to The J-Prop Shop – Special This Month.
16 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
17 Practice Within the head element, insert the comment The J-Prop Shop Sample Page for the Basic StickAuthor: Your nameDate: the date
18 Defining the Structure of the Page Body Example of the J. Whitney Bunting College of Business Web site:
19 Insert HTML5 Structural Elements Example:<header> </header><nav></nav><section></section><aside></aside><footer></footer>Practice 9
20 Within the section structural element <section> <article> </article> </section>Practice 12
21 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.