WK02 HTML Basics

IT240 Web Fluency
Wei Zhang
Please silent your cell phone or beeper.
Logistics
Access to Course Website

Course Sessions
Logistics
Group Project Documents on the course website:

Course Sessions > Session 1 Course Introduction
Logistics
Group Formation by tomorrow

I will randomly assign unsigned to groups
Logistics
Subscribe to course discussion board
Agenda
Introduction to the Web

The Internet The web A few key concepts
The Client/Server Model Protocols Markup Languages
HTML Basics
Set up the development environment for this course HTML conventions HTML page structures Most used elements Your first page(s) Assignment
The Evolution of the Internet
Internet
Interconnected network of computer networks ARPAnet
Advanced Research Project Agency 1969 four computers connected
NSFnet
National Science Foundation
Use of the Internet was originally limited to government, research and academic use 1991 Commercial ban lifted
Growth of the Internet
Hobbes Internet Timeline

http://www.zakon.org/robert/internet/timeline/
Year 1969 1989 1992 1995 2001 2002 2003 2006
Host Computers 4 100,000 1,000,000 8,000,000 109,000,000 147,000,000 171,600,000 439,000,000
Reasons for Internet Growth in the 1990s
Removal of the ban on commercial activity

Development of the World Wide Web by Tim Berners-Lee at CERN
1989, Centre Europen de Recherche Nuclaire
Development of Mosaic, the first graphicsbased web browser at NCSA

1992, National Center for Supercomputing Applications (NCSA) at the University of Illinois Urbana-Champaign
The World Wide Web
The graphical user interface (GUI) to information stored on some of the computers connected to the Internet.
the client software program's user interface would be consistent across all types of computer platforms so that users could access information from many types of computers
http://www.hitmill.com/internet/web_history.html
Computing on the Internet
Now Predominantly Client/Server

Request Message
Client Program
Response Message
Server Program
Does Light I/O and Post-Download Processing Client PC
Does Heavy Database and Other Heavy Processing Server
Highly scalable: Use powerful server as number of clients increases
The Client/Server Model
The Internet Client/Server Model

Client -- Web Browser Server -- Web Server
12
Web Client
Connected to the Internet when needed Usually runs web browser (client) software such as Internet Explorer or Firefox
But not all, many apps on your cell phone are web clients too
Uses HTTP (Hypertext Transfer Protocol) Requests web pages from server Receives web pages and files from server Interprets web pages and display them
Markup Languages
A different kind of programming

Not really about logic, process, or data Describing what an element is and how it is expected to be interpreted and displayed
Nothing to do with exactly how it is actually displayed
SGML Standard Generalized Markup Language

A standard for specifying a markup language or tag set standard for standard
Hypertext Markup Languages
HTML Hypertext Markup Language

The set of markup symbols or codes placed in a file intended for display on a web browser. Mix of what to display (content) and how to display (format, structure)
<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>
CSS
Cascading Style Sheet

Separate the format from the content and structure of the webpages
<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>
Different Browsers
Different Browsers
Interpret same code differently

Mostly same Some notable differences
www.html5test.com
HTML5 Basics
Set up the development environment for this course HTML conventions HTML page structures Most used elements Your first page(s) Assignment
Development Environment
Both HTML and CSS codes are text-based

Any text editor will do Some better than others
Popular IDE for web development

Adobe Dreamweaver Microsoft Expression Web Powerful, but complicated and not easy to learn
Popular suites for web development

Adobe Creative Suite Microsoft Expression Studio
Adobe Dreamweaver
For this course
Aptana + Firefox
Both open source, legally free See Appendix A for information on installing and using Aptana and source codes from textbook
Only tool can be used for IT240
View Webpage Codes in Browers

Use the FileOpen command with Internet Explorer or the FileFile Open command with Firefox. Use the features of your text editor or IDE.
View Source Code for Webpages
Use the ViewSource or ViewPage Source command. Right-click on the page and select the Source, View Source, or View Page Source command.
HTML Elements
Each individual markup code is referred to as an element or tag.

Each tag has a purpose. Tags are enclosed in angle brackets, "<" and ">" symbols. Most tags come in pairs: opening tag and closing tag. <html>
<head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>
HTML Elements and Tags
Elements and tags

Some elements have no closing tags (empty/void tags)
<br> <img>
Unlike in XHTML, trailing slash (e.g. <br necessary
/>)
is not
Many have attributes

An attribute consists of the attribute name, an equals sign (=), and the value for the attribute. Attribute values should be enclosed in double quotes Boolean attributes can be coded as just the attribute name to represent on or not coded to represent off <img src="logo.gif" alt="Murach Logo"> To code multiple attributes, separate each attribute with a <a href="contact.html" title="Click to Contact Us" class="nav_link"> space.
Comments and Whitespace
Use comments to describe or explain portions of code


<!DOCTYPE html> <!-This document displays the home page for the web site. --> <html> <head> <title>San Joaquin Valley Town Hall</title> </head> <body> <h1>San Joaquin Valley Town Hall</h1> <h2>Bringing cutting-edge speakers to the valley</h2>  <p>Contact us by phone at (559) 444-2180 for ticket information </body> </html>
Use whitespace to indent lines of code and make them easier to read.
Basic Structure of HTML Document

Dont change this Always code the lang attribute to identify the language for the page
<!DOCTYPE html> <html> <head> . . </head> <body> . . </body> </html>
DOCTYPE declaration
head element
Elements of information about the webpage : title, favicon, meta data

document tree
body element
Content of the webpage
Favorites Icon - favicon

A square image associated with a Web page Usually named: favicon.ico May display in the browser address bar, tab, or favorites/bookmarks list Configure with a link tag:
<link rel="icon" href="favicon.ico" type="image/x-icon" >
<title> and <meta> tags

<head> <title>San Joaquin Valley Town Hall | speakers and luncheons </title> <meta charset=utf-8"> <meta name="description" content="A yearly lecture series with speakers that present new information on a wide range of subjects"> <meta name="keywords" content="san joaquin, town hall, speakers, lectures, luncheons"> </head>
Three attributes of the <meta> tag

charset: required, specifies the type of character encoding name: specifies the type of metadata content: specifies the value of specific metadata item
The Heading Element

<h1>Heading <h2>Heading <h3>Heading <h4>Heading <h5>Heading <h6>Heading Level Level Level Level Level Level 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
<p> tag
Paragraph element <p> paragraph goes here </p>
Groups sentences and sections of text together. Configures a blank line above and below the paragraph
<h1>San Joaquin Valley Town Hall Programs</h1> <h2>Pre-lecture coffee at the Saroyan</h2> <p>Join us for a complimentary coffee hour, 9:15 to 10:15 a.m. on the day of each lecture. The speakers usually attend this very special event.</p> <h2>Post-lecture luncheon at the Saroyan</h2> <p>Extend the excitement of Town Hall by purchasing tickets to the luncheons</p>
<br> tag
Line Break element

empty tag text goes here <br> This starts on a new line. Causes the next element or text to display on a new line But unlike <p> </p> no space is created
Block Elements for Special Types of Text

<p>How to use JavaScript to display the year:</p> <pre> var today = new Date(); document.writeln( today.getFullYear() ); </pre> preserves whitespace and displayed in
monospaced font <p>Ernest Hemingway wrote:</p> <blockquote>Cowardice, as distinguished from panic, is almost always simply a lack of ability to suspend the functioning of the imagination. Quotations </blockquote>
<p>How to contact Mike Murach & Associates:</p> <address>1-800-221-5528<br> <a href="emailto:murachbooks@murach.com"> murachbooks@murach.com</a> </address> Contact information
<pre> </pre>
<blockquote> </blockquote>
<address> </address>
Inline Elements

Inline elements dont begin a For identifying new line content Use formatting elements abbr when no special meaning is cite implied code Use content elements when dfn used to convey meanings; em could be formatted with CSS kbd
For formatting text

i : italics
b : bold
sub : subscript sup: superscript br
q samp strong var
<p>If you don't get 78% or more on your final, <em>you won't pass.</em></p> <p>Save a bundle at our <strong>big yearend sale</strong>.</p> <p>When the dialog box is displayed, enter <kbd>brock21</kbd>.</p> <p>The chemical symbol for water is H<sub>2</sub>O.</p> <p><q>To sleep, perchance to dream-ay, there's the rub.</q></p>
Special characters
Entity & < > © ® ™ ¢ ° ± ‘ ’ “ ” Character & < > (opening single quote). (closing single quote or apostrophe). (opening double quote). (closing double quote).
<a> tag
The anchor element

Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page.
<a href="contact.html">Contact Us</a>
href Attribute
Indicates the file name or URL, Web page document, photo, pdf, etc.
Automatically launch the default mail program configured for the browser
<a href=mailto:me@hotmail.com>me@hotmail.com</a>
40
Ordered List
Conveys information in an ordered fashion <ol>: Contains the ordered list
type attribute determines numbering scheme of list, default is numerals
<li>: Contains an item in the list
<ol> <li>Apply to school</li>
<li>Register for course</li>

<li>Pay tuition</li> <li>Attend course</li> </ol>
Unordered List
Displays information with bullet points <ul>: Contains the unordered list
type attribute determines the type of bullet point default type is disc (but depends on the browser used)
<li>: Contains an item in the list

<ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul>
Semantic Elements
header section article nav aside footer hgroup time figure figcaption
Bring logical structure to a page

<body> <header> <h1>San Joaquin Valley Town Hall</h1> </header> <section> <p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!</p> </section> <footer> <p>© Copyright 2012 San Joaquin Valley Town Hall.</p> </footer> </body>
<div> and <span>

<div>: A block element defining part of a web page

Use only when the HTML5 semantic elements dont apply
<span>: An inline element for formatting text

Use only when the tags for identifying content dont apply.
<body> User <header> instead <div id="header"> <h1>San Joaquin Valley Town Hall</h1> </div> <div id="main"> <p><span id="welcome">Welcome to San Joaquin Valley Town Hall.</span> We have some fascinating speakers for you this season!</p> </div> <div id="footer"> <p>© Copyright 2012 San Joaquin Valley Town Hall.</p> </div> </body>
Putting Everything Together
Current version of IE
What It Looks Like
<img> <header> <hgroup> <h1> <ul> <section> <footer>
Validate HTML pages
Ensure that codes follow the correct HTML grammar

http://validator.w3.org/
Lab Assignment 1
Exercise 3-1 (textbook, pp116-118).

Follow the instructions Once you finish, upload the file(s) you have been working on. Make sure to choose the start page Questions?
Post them on the course discussion board
Lab Assignment 1
Download and install Aptana Download, extract, and save All Book Files
http://www.murach.com/downloads/htm5.htm
Files used for Lab Assignment 1 are under folder exercises >> town_hall_1 File structure:
Submitting Your Work
Browse to your project location

If you are working with an Aptana project, you can find your project location from menu item Project > Properties
Submitting Your Work
Make sure to send the whole folder , not just the index.html, to a zipped file
Upload the Zip file
After Submission
Download to confirm submission
Click to change submission

WK02 HTML Basics

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

WK02 HTML Basics

Caricato da

Copyright:

Formati disponibili

IT240 Web Fluency

Please silent your cell phone or beeper.

Access to Course Website

Group Project Documents on the course website:

Group Formation by tomorrow

Subscribe to course discussion board

Introduction to the Web

The Evolution of the Internet

Growth of the Internet

Hobbes Internet Timeline

Year 1969 1989 1992 1995 2001 2002 2003 2006

Host Computers 4 100,000 1,000,000 8,000,000 109,000,000 147,000,000 171,600,000 439,000,000

Reasons for Internet Growth in the 1990s

Removal of the ban on commercial activity

Development of Mosaic, the first graphicsbased web browser at NCSA

The World Wide Web

Computing on the Internet

Now Predominantly Client/Server

Does Light I/O and Post-Download Processing Client PC

Does Heavy Database and Other Heavy Processing Server

Highly scalable: Use powerful server as number of clients increases

The Client/Server Model

The Internet Client/Server Model

A different kind of programming

SGML Standard Generalized Markup Language

Hypertext Markup Languages

HTML Hypertext Markup Language

Cascading Style Sheet

Interpret same code differently

Both HTML and CSS codes are text-based

Popular IDE for web development

Popular suites for web development

For this course

Only tool can be used for IT240

View Webpage Codes in Browers

View Source Code for Webpages

Each individual markup code is referred to as an element or tag.

HTML Elements and Tags

Elements and tags

Unlike in XHTML, trailing slash (e.g. <br necessary

Many have attributes

Comments and Whitespace

Use comments to describe or explain portions of code

Basic Structure of HTML Document

<!DOCTYPE html> <html> <head> . . </head> <body> . . </body> </html>

Elements of information about the webpage : title, favicon, meta data

Content of the webpage

Favorites Icon - favicon

<link rel="icon" href="favicon.ico" type="image/x-icon" >

<title> and <meta> tags

Three attributes of the <meta> tag

The Heading Element

Line Break element

Block Elements for Special Types of Text

For formatting text

q samp strong var

The anchor element

type attribute determines numbering scheme of list, default is numerals

<li>: Contains an item in the list

<ol> <li>Apply to school</li>

<li>Register for course</li>

<li>: Contains an item in the list

Bring logical structure to a page