How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.
-
Upload
elijah-booker -
Category
Documents
-
view
218 -
download
1
Transcript of How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.
![Page 1: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/1.jpg)
How to Validate and Upload
Learning Web Design:Chapter 10 & Chapter 21
![Page 2: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/2.jpg)
Document Type Definition (DTD) A valid HTML declares what version is
used in the document A collection of XML definitions set the
legal structure, elements and attributes that are available for use in the document and abides by the DTD
Three flavors of XHTML 1.0 XHTMLTransitional XHTML Strict XHTML Frameset
![Page 3: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/3.jpg)
Valid XHTML Syntax W3C rewrote HTML according to the more
strict rules of XML So XHTML is a said to be a subset of XML The X stands for eXtensible The first version of XHTML was
XHTML 1.0 Shares the same elements and attributes
as HTML 4.0, just “well-formed”
![Page 4: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/4.jpg)
XHTML 1.0 Transitional This is the version we will validate to!!! Takes advantage of XHTML features like
style sheets while still allowing older features that enable older browsers which cannot view style sheets to display these pages
Use: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ transitional.dtd">
![Page 5: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/5.jpg)
XHTML 1.0 Strict Use this when you want really clean
structural mark-up, free of.any tags associated with layout. Use this together with W3C's Cascading Style Sheet language (CSS) to get the font, color, and layout effects you want.
Use: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ strict.dtd">
![Page 6: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/6.jpg)
XHTML 1.0 Frameset Use this when you want to use
HTML Frames to partition the browser window into two or more frames.
Use: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/ frameset.dtd">
![Page 7: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/7.jpg)
<html> </html> tag The opening <html> tag must immediately
follow the DOCTYPE tag All text and HTML commands should be placed
within the beginning and ending html tags Your document would not be a valid XHTML
document without the following <html>attributes: xmlns=http://www.w3.org/1999/xhtml xml:lang="en" lang="en"
![Page 8: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/8.jpg)
What is Character Encoding?
There are hundreds of written languages with thousands of unique character shapes that need to be displayed on the web
Various character sets have been standardized for the Web
Our chosen character set is “utf-8” which is unicode which uses 8 bytes for each character
![Page 9: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/9.jpg)
Specifying Character Encoding The <meta> tag is used indicate
the character set of the page Of course, the <meta> tag
appears in the <head> of your file The attributes of the <meta> tag
are: http-equiv=“content-type” content=“text/html;charset-utf-8”
![Page 10: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/10.jpg)
“Well-Formed” XHTML Code Some things to check when your
code fails to validate: <!DOCTYPE> tag is correct Every non-empty has a closing tag Self-terminating tags have closing / Attributes are quoted Tags and Attributes are lowercase Use proper nesting
![Page 11: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/11.jpg)
What is Validation? Most Web documents are written using
markup languages, such as HTML or XHTML. Validation is a process of checking your
documents against a formal Standard, such as those published by the W3C
Validation serves a similar purpose to spell checking and proofreading for grammar and syntax
The Markup Validator is a free service by W3C that helps check the validity of Web documents.
![Page 12: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/12.jpg)
Why Should You Validate??? Validating Web documents is an
important step which can dramatically help improving and ensuring their quality, and it can save a lot of time and money.
Validation is, however, not a full quality check. A web page could still be poorly designed or hard to read.
![Page 13: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/13.jpg)
Start at the Beginning Every web page created will begin
with the start.htm file Contains the <!DOCTYPE>for
XHTML 1.0 Transitional Contains the <meta> tag for the
character code Contains other <meta> tags for
documentation
![Page 14: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/14.jpg)
Checking Your Page Save your html/xhtml document Go the the validation site:
http://validator.w3.org Do not type in the www in the URL
![Page 15: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/15.jpg)
![Page 16: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/16.jpg)
Validating Files You can validate a file that is still local
on your computer You should validate your file locally before
uploading it to a web server Make any needed changes locally
You can also validate a file that has been uploaded to a web server Always test you files for validation once you
have uploaded them!
![Page 17: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/17.jpg)
Validating Your Local File For pages located on a web server,
choose the “Validate by URI” tab To validate your web page when it
is still on your own machine, choose the “Validate by File Upload” tab.
![Page 18: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/18.jpg)
![Page 19: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/19.jpg)
Find the Page to Upload Click on the Browse button and find
the file you wish to validate When the correct file appears in the text
box, click on the : Check button Your local page will then be uploaded to
the W3C’s validator
![Page 20: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/20.jpg)
![Page 21: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/21.jpg)
Your Page was GREAT! If your page was “well-formed”
you will receive a message from the validator.
This document was successfully checked as Valid XHTML 1.0 Transitional
![Page 22: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/22.jpg)
![Page 23: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/23.jpg)
Validation Graphic and Link Near the bottom of the
validation page, code is provided to add a validation icon and validation link to your web page.
![Page 24: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/24.jpg)
Copy this code to your file!!!
![Page 25: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/25.jpg)
Copy the XHTML 1.0 Code After validating, copy the code
provided to add the validation graphic and link to your web page
Be sure to place the code just before the closing </body> tag of your page
This graphic will link back to the validator site when uploaded
![Page 26: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/26.jpg)
A Completed Project Page
![Page 27: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/27.jpg)
Validating a File on the Web Server Use the “Validate by URI” option for
pages uploaded on a web server. Paste the URL of your web page as
it is found on the web server in the Address box
If your page had errors, you should fix them, check the file locally and then re-upload the file to web server again.
![Page 28: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/28.jpg)
![Page 29: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/29.jpg)
Your Page is not Valid If your page does not have a <!
DOCTYPE> DTD tag, the validator will not be able to check your file
Use the start.htm file given to you by your instructor because it contains the needed <!DOCTYPE> as well as a <meta> tag that defines the character code of the file
![Page 30: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/30.jpg)
Errors were Found If you are not so lucky and errors are
found in your document … You will be given line numbers and help to fix
the errors. It is up to you to solve these problems This process is known as Debugging
You must fix errors, and retry the validation until you are 100% successful
Explanations for some common validation errors can be found at this page in the W3C website: errors.html
![Page 31: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/31.jpg)
![Page 32: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/32.jpg)
![Page 33: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/33.jpg)
What was Wrong? The first error in this document was
related to the <h1> tag The second error is related to
this missing <li> tag Sometimes the validator gives
more than one reason for an error
If you fix the problem both errors will go away
![Page 34: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/34.jpg)
Debugging your Code To find the problem in your code:
Read the validator message for the error
Look at the code shown This will help you to see just where
the error has occurred Go back to your file and fix the error Repeat if necessary
![Page 35: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/35.jpg)
Advantages of XHTML 1.0
Transitional With this coding standard we can use
some of the newer web features like: JavaScript (must be lowercase) Cascading Style Sheets FrameSets Etc.
We can still use many tags and attributes that have been deprecated
![Page 36: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/36.jpg)
Getting Your Pages on the Web
Learning Web Design:Chapter 21
![Page 37: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/37.jpg)
Web Server
A web server is a computer that is used to store your web pages
The web server has special software that allows you to connect to the server and request a page
Transmits the page to your own machine called the client
![Page 38: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/38.jpg)
FTP Clients Special software that allows you to
connect to the web server and do the following: You can make directories Move or upload files Delete files Download files
![Page 39: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/39.jpg)
Some Free FTP Clients FileZilla (open source) WinSCP (open source) FTP Commander Core FTP LE (freeware) FireFTP (multi-platform freeware)
![Page 40: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/40.jpg)
Using the Yoda web server The College of Technology and Computing
(Techcom) has created a web server for student use yoda.tc.uvu.edu
This web server is behind the UVU firewall, but content can be viewed on the WWW
Students must use a FTP client to upload files
![Page 41: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/41.jpg)
Choose an FTP client
Filezilla is available in most of the CS
labs
The host will be:
yoda.tc.uvu.edu/lastnamefirstname
Your username will be: your UV ID
Your instructor will email you your
password
![Page 42: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/42.jpg)
Setting the Transfer Mode Our Web server expects the transfer mode
to be Active, but the default is Passive You must change this setting, or your file
transfer will fail
![Page 43: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/43.jpg)
Setting Active Mode – A Must
Click onFTP
Make sure Active isselected
![Page 44: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/44.jpg)
Connect to Yoda
Host nameUsernamePassword
Quickconnect
![Page 45: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/45.jpg)
Moving Your Project Folders Each student has their own web site
on the Yoda web server Create a folder for Practices and one
for Projects in your home directory. Drag your project folder from your
local machine to your Yoda directory. You can move individual files also.
![Page 46: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/46.jpg)
Moving Files/Folders to Yoda
Client Machine Web Server
![Page 47: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/47.jpg)
Moving Files/Folders to Yoda
Select and dragfile or folder
![Page 48: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/48.jpg)
Check Files After Uploading You should always check your
pages in the web browser after uploading your project
Your project URL will be something like:
http://yoda.tc.uvu.edu/lastnamefirstname/Projects/Project1/index.htm
![Page 49: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/49.jpg)
Disconnect from Yoda When you are finished with your
work on Yoda, you should choose Disconnect from the Server menu
![Page 50: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/50.jpg)
After this Class if Over…How do You Publish a Web Site???
There are many types of web sites Non-Profit Personal Entertainment –
may need multimedia capabilities Commercial – needs shopping cart or
form processing capabilities Match your needs with an
appropriate web hosting option
![Page 51: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/51.jpg)
Getting a Domain Name and IP Address You can register the right to own
a given Internet domain name Usually requires a search for a
unique name Can be purchased for as low as
$8.00/year www.dotster.com www.register.com www.godaddy.com www.networksolutions.com
![Page 52: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/52.jpg)
Locating a Web Server for your personal use
Try your school or place of work Contact the webmaster or system
administrator for info
Try your Internet Service Provider (ISP) Publishing web pages may cost extra Restrictions usually apply
Try a Web Presence Provider Usually charges monthly Some offer free web hosting
![Page 53: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/53.jpg)
Free Web Hosting May provide virtual hostname
Looks like you have your own server Provide limited storage space Restrictions usually apply May have hidden fees, be careful Often have banner adds or
imbedded text links added to your pages
May not allow form processing
![Page 54: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/54.jpg)
Management of Files View your files using the HTTP protocol
You will be given a URL to your top-level directory
Find out the system’s default index file This file is loaded by default Usually index.htm, index.html or
default.htm Always place your files in a folder with
no spaces in the folder name Some web servers are case-sensitive
![Page 55: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/55.jpg)
Web Server Security Many organizations maintain both
public facing web servers and servers used for internal purposes.
Interaction with these servers should be highly controlled.
Network admins responsible for network security use a variety of tools to enforce security policies.
![Page 56: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/56.jpg)
What is a VPN??? A Virtual Private Network, or VPN, is
a private communications network A VPN is usually used within a company,
or by several different companies or organizations, communicating over a public network.
VPN message traffic is carried on public networking infrastructure (e.g. the Internet) using standard protocols.
![Page 57: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/57.jpg)
Authentication in a VPN A firewall sits between a remote user's
workstation or client and the host network or server.
The firewall may pass authentication data to an authentication service in a host network.
A known trusted person with privileged access, sometimes only using trusted devices, can be allowed to access resources not available to general users.
That's why the user feels that the network is private, even though it is not.
![Page 58: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/58.jpg)
What is a Firewall??? It is a piece of hardware and/or software
which functions in a networked environment to prevent some communications forbidden by the security policy, analogous to the function of firewalls in building construction.
A firewall is also called a Border Protection Device (BPD) or a packet filter.
A firewall has the basic task of controlling traffic between different zones of trust. Typical zones of trust include the Internet (a zone with no trust) and an internal network (a zone with high trust).
![Page 59: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/59.jpg)
The Goals of Security Policy The ultimate security goal in most
organizations is to: Provide controlled connectivity
between zones of differing trust levels through the enforcement of a security policy
Support a connectivity model based on the least privilege principle.
![Page 60: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/60.jpg)
Intranet Setup for IS&T Here in our IS&T programs, most of the
advanced classes contain resources that are on a private VPN network
The firewall protects our servers from malicious attacks
We have a school-wide security policy that helps set standards for passwords and use of these resources
![Page 61: How to Validate and Upload Learning Web Design: Chapter 10 & Chapter 21.](https://reader036.fdocuments.in/reader036/viewer/2022062423/56649e445503460f94b383a9/html5/thumbnails/61.jpg)
Summary Validation of our web pages requires “well-
formed” XHTML code Use the Markup Validation tool from the
W3C at: http://validtor.w3.org Your web pages will be uploaded to the
course web server using the FTP protocol Finding a domain name and a hosting
solution are necessary before creating a web site outside of this course