WK02 HTML Basics
Transcript of WK02 HTML Basics
-
8/13/2019 WK02 HTML Basics
1/56
-
8/13/2019 WK02 HTML Basics
2/56
LogisticsAccess to Course Website
Course Sessions
-
8/13/2019 WK02 HTML Basics
3/56
Logistics
Group Project Documents on the course
website: Course Sessions > Session 1 Course Introduction
-
8/13/2019 WK02 HTML Basics
4/56
Logistics
Group Formation by tomorrow I will randomly assign unsigned to groups
-
8/13/2019 WK02 HTML Basics
5/56
Logistics
Subscribe to course discussion board
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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/13/2019 WK02 HTML Basics
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/ -
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
12/56
The Client/Server Model
The Internet Client/Server Model
Client -- Web Browser
Server -- Web Server
12
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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!
-
8/13/2019 WK02 HTML Basics
16/56
CSS Cascading Style Sheet
Separate the format from the content andstructure of the webpages
Hello World
Hello World!
-
8/13/2019 WK02 HTML Basics
17/56
Different Browsers
-
8/13/2019 WK02 HTML Basics
18/56
Different Browsers
Interpret same code differently
Mostly same
Some notable differences
www.html5test.com
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
21/56
Adobe Dreamweaver
F thi
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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.
-
8/13/2019 WK02 HTML Basics
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.
-
8/13/2019 WK02 HTML Basics
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!
-
8/13/2019 WK02 HTML Basics
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 notnecessary
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.
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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:
-
8/13/2019 WK02 HTML Basics
30/56
and tags
San Joaquin Valley Town Hall |speakers and luncheons
-
8/13/2019 WK02 HTML Basics
31/56
The Heading Element
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
-
8/13/2019 WK02 HTML Basics
32/56
tag
Paragraph element
paragraph goes here
Groups sentences and sections of texttogether.
Configures a blank line above and below the
paragraph
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
34/56
tagLine 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 -
8/13/2019 WK02 HTML Basics
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
preserves whitespace and displayed in
monospaced font
Quotations
Contact information
-
8/13/2019 WK02 HTML Basics
36/56
-
8/13/2019 WK02 HTML Basics
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,
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
39/56
Special charactersEntity Character
& &
< >
(opening single quote).
(closing single quote or apostrophe).
(opening double quote).
(closing double quote).
-
8/13/2019 WK02 HTML Basics
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
40
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
43/56
Semantic Elements
Bring logical structure to a page
header section article nav aside footer hgroup time figure figcaption
San Joaquin Valley Town Hall
Welcome to San Joaquin Valley Town Hall. Wehave some fascinating speakers for you this
season!
Copyright 2012 San Joaquin Valley TownHall.
and
-
8/13/2019 WK02 HTML Basics
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.
San Joaquin Valley Town Hall
Welcome to San JoaquinValley Town Hall.We have some fascinating speakers for you
this season!
Copyright 2012 San Joaquin Valley TownHall.
User instead
-
8/13/2019 WK02 HTML Basics
45/56
Putting Everything Together
-
8/13/2019 WK02 HTML Basics
46/56
-
8/13/2019 WK02 HTML Basics
47/56
-
8/13/2019 WK02 HTML Basics
48/56
Current
version ofIE
-
8/13/2019 WK02 HTML Basics
49/56
What It Looks Like
-
8/13/2019 WK02 HTML Basics
50/56
Validate HTML pages
Ensure that codes follow the correct HTML
grammar
http://validator.w3.org/
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
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
-
8/13/2019 WK02 HTML Basics
55/56
Upload the Zip file
-
8/13/2019 WK02 HTML Basics
56/56
After Submission
Download to
confirm
submission
Click to changesubmission