4. html css javascript basics

24
Session 1.1 Tutorial 1: Getting Started with HTML5

Upload: harshit-mehta

Post on 03-Feb-2016

242 views

Category:

Documents


1 download

DESCRIPTION

HTMLS CSS

TRANSCRIPT

Page 1: 4. HTML CSS JavaScript Basics

Session 1.1

Tutorial 1: Getting Started with HTML5

Page 2: 4. HTML CSS JavaScript Basics

ObjectivesExplore the history of the Internet, the

Web, and HTMLCompare the different versions of HTMLStudy the syntax of HTML tagsDefine a Web page head, body, and titleWork with the HTML5 structural elements

Page 3: 4. HTML CSS JavaScript Basics

Introducing HTMLWeb pages are written in HTMLHTML = HyperText Markup LanguageCharacteristics:

Describes the content and structure of a document

Uses tagsHTML Ancestor

SGML = Standard Generalized Markup Language

Page 4: 4. HTML CSS JavaScript Basics

XHTML and the Development of HTML 5

Page 5: 4. HTML CSS JavaScript Basics

Tools for Creating HTML DocumentsBasic 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

Page 6: 4. HTML CSS JavaScript Basics

Entering Elements and AttributesAn 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 tags

A two-sided tag is a tag that contains some document content. General syntax for a two-sided tag:

<element>content</element>

6

Page 7: 4. HTML CSS JavaScript Basics

Marking Elements with TagsA two-sided tag’s opening tag (<p>) and

closing tag (</p>) should completely enclose its content

Elements can contain other elementsTags cannot overlap

<p>CBIS 3219: Web Development</p>

7

Page 8: 4. HTML CSS JavaScript Basics

Adding an Attribute to an ElementTo 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>

8

Page 9: 4. HTML CSS JavaScript Basics

Exploring the Structure of an HTML File

<html><head>

head content</head><body>

body content</body>

</html>

9

Page 10: 4. HTML CSS JavaScript Basics

HTML is like a Sandwich???

Page 11: 4. HTML CSS JavaScript Basics

PracticeCreate a new html page and save it as

basic.htmlCreate the root html element and nest the

head and body elements within it.

Page 12: 4. HTML CSS JavaScript Basics

Document Type DeclarationPrior 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>

Page 13: 4. HTML CSS JavaScript Basics

PracticeAdd the doctype for HTML5 to the basic

page.

Page 14: 4. HTML CSS JavaScript Basics

Head ElementPage 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>

Page 15: 4. HTML CSS JavaScript Basics

PracticeSet the page title of the Basic page to The

J-Prop Shop – Special This Month.

Page 16: 4. HTML CSS JavaScript Basics

Adding CommentsPurpose: 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 -->

Page 17: 4. HTML CSS JavaScript Basics

PracticeWithin the head element, insert the

commentThe J-Prop Shop Sample Page for the Basic StickAuthor: Your nameDate: the date

Page 18: 4. HTML CSS JavaScript Basics

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

Page 19: 4. HTML CSS JavaScript Basics

Insert HTML5 Structural ElementsExample: <header>

</header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer>

Page 20: 4. HTML CSS JavaScript Basics

Within the section structural element<section> <article> </article> <article> </article></section>

Page 21: 4. HTML CSS JavaScript Basics

No Structural Element in HTML 4.01 or XHTMLReplace the structural elements with div

elements.Syntax:<div id=“id”>

content</div>

Page 22: 4. HTML CSS JavaScript Basics
Page 23: 4. HTML CSS JavaScript Basics

PracticeWithin the body element, create structural

elements for the page header, main section, and footer.

Page 24: 4. HTML CSS JavaScript Basics

Summary of tags<doctype><html><head><body><title><header>, <section>, <article>, <nav>,

<aside>, <footer> or <div>

Comments: <!-- Tips: use comments to explain your code-->