WK02 HTML Basics

8/13/2019 WK02 HTML Basics

1/56


2/56

LogisticsAccess to Course Website

Course Sessions


3/56

Logistics

Group Project Documents on the course

website: Course Sessions > Session 1 Course Introduction


4/56

Logistics

Group Formation by tomorrow I will randomly assign unsigned to groups


5/56

Logistics

Subscribe to course discussion board


6/56

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


7/56

The Evolution of the Internet

Internet Interconnected network of computer networks

ARPAnet Advanced Research Project Agency

1969four computers connected

NSFnet National Science Foundation

Use of the Internet was originally limited togovernment, research and academic use

1991 Commercial ban lifted


8/56

Growth of the Internet

Hobbes Internet Timeline http://www.zakon.org/robert/internet/timeline/

Year1969

1989

1992

19952001

2002

2003

2006

Host Computers4

100,000

1,000,000

8,000,000109,000,000

147,000,000

171,600,000

439,000,000
http://www.zakon.org/robert/internet/timeline/http://www.zakon.org/robert/internet/timeline/


9/56

Reasons for Internet Growth

in the 1990s

Removal of the ban on commercial activity

Development of the World Wide Web by TimBerners-Lee at CERN 1989, Centre Europen de Recherche Nuclaire

Development of Mosaic, the first graphics-based web browser at NCSA 1992, National Center for SupercomputingApplications (NCSA) at the University of IllinoisUrbana-Champaign


10/56

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 computerplatforms so that users could access information

from many types of computers

http://www.hitmill.com/internet/web_history.html


11/56

Highly scalable: Use powerful server as number of clients increases

Client Program Server Program

Request Message

Response Message

Server

Client PC

Does Light I/O and

Post-Download

Processing

Does Heavy

Database

and Other Heavy

Processing

Computing on the Internet

Now Predominantly Client/Server


12/56

The Client/Server Model

The Internet Client/Server Model

Client -- Web Browser

Server -- Web Server

12


13/56

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 areweb 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


14/56

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

SGMLStandard Generalized MarkupLanguage

A standard for specifying a markup language or

tag set

standard for standard


15/56

Hypertext Markup Languages

HTMLHypertext 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)

Hello World

Hello World!


16/56

CSS Cascading Style Sheet

Separate the format from the content andstructure of the webpages

Hello World

Hello World!


17/56

Different Browsers


18/56

Different Browsers

Interpret same code differently

Mostly same

Some notable differences

www.html5test.com


19/56

HTML5 Basics

Set up the development environment for

this course

HTML conventions

HTML page structures

Most used elements

Your first page(s)

Assignment


20/56

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


21/56

Adobe Dreamweaver

F thi


22/56

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

Onlytoolcan be

used for

IT240


23/56

View Webpage Codes in

Browers Use the FileOpen command with Internet

Explorer or the FileFile Open command withFirefox.

Use the features of your text editor or IDE.


24/56

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.


25/56

HTML Elements

Each individual markup code is referred to asan elementor tag. Each tag has a purpose.

Tags are enclosed in angle brackets, ""

symbols. Most tags come in pairs: opening tag and closing

tag.

Hello World

Hello World!


26/56

HTML Elements and Tags

Elements and tags

Some elements have no closing tags (empty/void

tags)

Unlike in XHTML, trailing slash (e.g.
) is not

necessary

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

To code multiple attributes, separate each attribute with a

space.


27/56

Comments and Whitespace

Use comments to describe or explain portions of

code

Use whitespace to indent lines of code and make

them easier to read.

San Joaquin Valley Town Hall

San Joaquin Valley Town HallBringing cutting-edge speakers to the valley

Contact us by phone at (559) 444-2180 for ticket information


28/56

Basic Structure of HTML Document

.

.

..

DOCTYPE declaration

head element

body element

document tree

Elements ofinformation about the

webpage : title,

favicon, meta data

Content of the

webpage

Dont change thisAlways code the langattribute toidentify the language for the page


29/56

Favorites Icon - favicon

A square imageassociated

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:


30/56

and tags

San Joaquin Valley Town Hall |speakers and luncheons


31/56

The Heading Element

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6


32/56

tag

Paragraph element

paragraph goes here

Groups sentences and sections of texttogether.

Configures a blank line above and below the

paragraph


33/56

San Joaquin Valley Town Hall ProgramsPre-lecture coffee at the Saroyan

Join us for a complimentary coffee hour, 9:15 to 10:15

a.m. on the day of each lecture. The speakers usuallyattend this very special event.

Post-lecture luncheon at the Saroyan

Extend the excitement of Town Hall by purchasing

tickets to the luncheons


34/56

tag

Line Break element

empty tag

text goes here
This starts on a new line.

Causes the next element or text to display on a

new line But unlike
no space is created


35/56

Block Elements for

Special Types of Text

How to use JavaScript to display the year:

var today = new Date();

document.writeln( today.getFullYear() );

Ernest Hemingway wrote:

Cowardice, as distinguished from panic, is

almost always simply a lack of ability to suspend the

functioning of the imagination.

How to contact Mike Murach & Associates:
1-800-221-5528

[email protected]

preserves whitespace and displayed in

monospaced font

Quotations

Contact information


36/56


37/56

Inline Elements

For formatting text

i :italics

b : bold

sub : subscript

sup: superscript

br

For identifying

content abbr

cite

code

dfn

em

kbd

q

samp

strong

var

Inline elements dont begin a

new line Use formatting elements

when no special meaning is

implied

Use content elements whenused to convey meanings;

could be formatted with CSS

If you don't get 78% or more on your final,


38/56

If you don t get 78% or more on your final,you won't pass.

Save a bundle at ourbig yearendsale.

When the dialog box is displayed, enterbrock21.

The chemical symbol for water is H2O.

To sleep, perchance to dream-ay, there's therub.

S i l h t


39/56

Special charactersEntity Character

& &

< >

(opening single quote).

(closing single quote or apostrophe).

(opening double quote).

(closing double quote).


40/56

tag

The anchor element Specifies a hyperlink reference (href) to a file

Text between the and is displayed onthe web page.

Contact Us

href Attribute Indicates the file name or URL, Web page document,

photo, pdf, etc.

Automatically launch the default mailprogram configured for the browser

[email protected]

40


41/56

Ordered List

Conveys information in an ordered fashion

: Contains the ordered list

type attribute determines numbering scheme of list, default is

numerals

: Contains an item in the list

Apply to schoolRegister for course

Pay tuition

Attend course


42/56

Unordered List

Displays information with bullet points : Contains the unordered list

type attribute determines the type of bullet point

default type is disc (but depends on the browser

used)

: Contains an item in the list

TCP

IPHTTP

FTP


43/56

Semantic Elements

Bring logical structure to a page

header section article nav aside footer hgroup time figure figcaption


Welcome to San Joaquin Valley Town Hall. Wehave some fascinating speakers for you this

season!

Copyright 2012 San Joaquin Valley TownHall.

and


44/56

and : A blockelement defining part of a web page

Use only when the HTML5 semantic elements dont apply

: An inlineelement for formatting text

Use only when the tags for identifying content dont apply.


Welcome to San JoaquinValley Town Hall.We have some fascinating speakers for you

this season!

Copyright 2012 San Joaquin Valley TownHall.

User instead


45/56

Putting Everything Together


46/56


47/56


48/56

Current

version ofIE


49/56

What It Looks Like


50/56

Validate HTML pages

Ensure that codes follow the correct HTML

grammar

http://validator.w3.org/


51/56

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


52/56

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:

S b itti Y W k


53/56

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


54/56

Submitting Your Work Make sure to send the whole folder, not just the

index.html, to a zipped file

U l d h Zi fil


55/56

Upload the Zip file


56/56

After Submission

Download to

confirm

submission

Click to changesubmission

WK02 HTML Basics

Documents

Transcript of WK02 HTML Basics