the ulta-handy html guide
DESCRIPTION
TRANSCRIPT
The Ultra-Handy Guide to HTML5
The Ultra-Handy Guide to HTML5
By Kurt Richardson, Josh Sved, Ryle Laporte & Nathan
Smofsky
By Kurt Richardson, Josh Sved, Ryle Laporte & Nathan
Smofsky
HTML BasicsHTML Basics
Hypertext Markup Language
Uses “markup tags” Usually follows
<opentag>Content</closetag> format
Commands describe the website
HTML Document is a WEB PAGE
Hypertext Markup Language
Uses “markup tags” Usually follows
<opentag>Content</closetag> format
Commands describe the website
HTML Document is a WEB PAGE
Website vs. WebpageWebsite vs. Webpage
A webSITE is a collection of linked pages (HTML documents)
A webPAGE is an individual HTML document
A webSITE is a collection of linked pages (HTML documents)
A webPAGE is an individual HTML document
HTML vs. CSSHTML vs. CSS
HTML document is the STRUCTURE of the webpage Eg. how blocks of texts are arranged,
what they say CSS document is the design (look)
of the page Eg. font size/color, background
image/color, etc.
HTML document is the STRUCTURE of the webpage Eg. how blocks of texts are arranged,
what they say CSS document is the design (look)
of the page Eg. font size/color, background
image/color, etc.
!DOCTYPE Declaration!DOCTYPE Declaration
Should be the first line in any HTML document (before <html> tag)
Indicates to the browser which protocol is to be followed
Syntax: <!DOCTYPE [Top Element]
[Availability] "[Registration]// [Organization]// [Type] [Label]// [Language]" "[URL]">
Should be the first line in any HTML document (before <html> tag)
Indicates to the browser which protocol is to be followed
Syntax: <!DOCTYPE [Top Element]
[Availability] "[Registration]// [Organization]// [Type] [Label]// [Language]" "[URL]">
Basic Format of an HTML Doc
Basic Format of an HTML Doc
<html><head>
Head Content</head><body>
Body Content</body>
</html>
<html><head>
Head Content</head><body>
Body Content</body>
</html>
Basic Format, ContinuedBasic Format, Continued
Composed of <head> and <body>
<head> tag is for title and other info
<body> tag is where content goes
Composed of <head> and <body>
<head> tag is for title and other info
<body> tag is where content goes
Basic TagsBasic Tags
<p> means paragraph <a href=“”> creates a link <h1> means header <img src=“”> creates an image
<p> means paragraph <a href=“”> creates a link <h1> means header <img src=“”> creates an image
<p><p>
Means PARAGRAPH Basic Syntax:
<p>This is the paragraph</p> Uses regular size font Notice how tags must be CLOSED
with </whatever>
Means PARAGRAPH Basic Syntax:
<p>This is the paragraph</p> Uses regular size font Notice how tags must be CLOSED
with </whatever>
<a href=“”><a href=“”>
Creates a LINK Basic Syntax
<a href=“www.examplewebsite.com”>This is the link</a>
First part is the site you want to link to
Second part is the text that will appear in your webpage
Creates a LINK Basic Syntax
<a href=“www.examplewebsite.com”>This is the link</a>
First part is the site you want to link to
Second part is the text that will appear in your webpage
<h1><h1>
Creates a HEADER Basic syntax:
<h1>This is our header</h1> Numbers 1-6 can be used
1 is biggest header, 6 is smallest header
Text will appear bolded and larger than <p> font
Creates a HEADER Basic syntax:
<h1>This is our header</h1> Numbers 1-6 can be used
1 is biggest header, 6 is smallest header
Text will appear bolded and larger than <p> font
<img src=“”><img src=“”>
Will insert an image on the page Basic Syntax:
<img src=“filename” width=“x” height=“y”/>
Will insert an image on the page Basic Syntax:
<img src=“filename” width=“x” height=“y”/>
<meta><meta>
Appears in <head> section Information about the site itself Will be used to identify site in
searches Basic Syntax:
<meta name=“keywords” content=“tutorial, HTML, MPM17”>
Appears in <head> section Information about the site itself Will be used to identify site in
searches Basic Syntax:
<meta name=“keywords” content=“tutorial, HTML, MPM17”>
What is a web server?What is a web server?
A physical space (HDD) which stores data that can be accessed over the internet
HTML (and supporting) files will be saved here
They can then be accessed via a URL
A physical space (HDD) which stores data that can be accessed over the internet
HTML (and supporting) files will be saved here
They can then be accessed via a URL
URLURL
Uniform Resource Locator A unique address (string of
characters) pointing to a file that is accessible via the internet
Syntax: http://www.examplesite.com/image (protocol – domain name – specific
file)
Uniform Resource Locator A unique address (string of
characters) pointing to a file that is accessible via the internet
Syntax: http://www.examplesite.com/image (protocol – domain name – specific
file)
HTTPHTTP
Hypertext Transfer Protocol Foundation for data communication
over the World Wide Web Defines information format and
transmission A URL sends an HTTP request from
your browser to the server to display the corresponding web page
Hypertext Transfer Protocol Foundation for data communication
over the World Wide Web Defines information format and
transmission A URL sends an HTTP request from
your browser to the server to display the corresponding web page
FTPFTP
File Transfer Protocol Allows computers to communicate
over the internet Supports a wide variety of file
formats Popular Clients:
FileZilla, FireFTP
File Transfer Protocol Allows computers to communicate
over the internet Supports a wide variety of file
formats Popular Clients:
FileZilla, FireFTP
Accessing Your Web SpaceAccessing Your Web Space
Host ftp.imagearts.ryerson.ca
Username first initial + last name
Password Last 7 of student ID
Host ftp.imagearts.ryerson.ca
Username first initial + last name
Password Last 7 of student ID
SourcesSources
www.w3schools.com
Schafer, Steven M. HTML, XHTML, and CSS Bible. Indianapolis: Wiley Publishing, Inc., 2010. Print
www.w3schools.com
Schafer, Steven M. HTML, XHTML, and CSS Bible. Indianapolis: Wiley Publishing, Inc., 2010. Print