4. html css javascript basics
Post on 03-Feb-2016
229 Views
Preview:
DESCRIPTION
TRANSCRIPT
Session 1.1
Tutorial 1: Getting Started with HTML5
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
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
XHTML and the Development of HTML 5
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
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
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
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
Exploring the Structure of an HTML File
<html><head>
head content</head><body>
body content</body>
</html>
9
HTML is like a Sandwich???
PracticeCreate a new html page and save it as
basic.htmlCreate the root html element and nest the
head and body elements within it.
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>
PracticeAdd the doctype for HTML5 to the basic
page.
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>
PracticeSet the page title of the Basic page to The
J-Prop Shop – Special This Month.
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 -->
PracticeWithin the head element, insert the
commentThe J-Prop Shop Sample Page for the Basic StickAuthor: Your nameDate: 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 ElementsExample: <header>
</header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer>
Within the section structural element<section> <article> </article> <article> </article></section>
No Structural Element in HTML 4.01 or XHTMLReplace the structural elements with div
elements.Syntax:<div id=“id”>
content</div>
PracticeWithin 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-->
top related