The Ulta-Handy HTML Guide
-
Upload
jsved -
Category
Technology
-
view
784 -
download
1
description
Transcript of The Ulta-Handy HTML Guide
![Page 1: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/1.jpg)
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
![Page 2: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/2.jpg)
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
![Page 3: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/3.jpg)
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
![Page 4: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/4.jpg)
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.
![Page 5: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/5.jpg)
!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]">
![Page 6: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/6.jpg)
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>
![Page 7: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/7.jpg)
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
![Page 8: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/8.jpg)
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
![Page 9: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/9.jpg)
<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>
![Page 10: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/10.jpg)
<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
![Page 11: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/11.jpg)
<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
![Page 12: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/12.jpg)
<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”/>
![Page 13: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/13.jpg)
<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”>
![Page 14: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/14.jpg)
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
![Page 15: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/15.jpg)
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)
![Page 16: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/16.jpg)
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
![Page 17: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/17.jpg)
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
![Page 18: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/18.jpg)
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
![Page 19: The Ulta-Handy HTML Guide](https://reader033.fdocuments.us/reader033/viewer/2022051209/5479fbfcb4af9fa0158b49bc/html5/thumbnails/19.jpg)
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