HTMLtoFTP<br />By: Keira Dooley<br />
Doctype<br />The doctype declaration should be the very first thing in an HTML document, before the <html> tag.<br />It is...
XHTML Transitional<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/D...
	HTML is Easy!<br />It’s got a HEAD and a BODY.<br />	<html>	<head>		<title>Welcome to my web site!</title>	</head>	<body>...
<html><br />The <html> tag tells the browser that this is an HTML document.<br />
<head><br />doctype<br />keywords<br />page title<br />The head element contains the “brains” of the webpage:<br />doctype...
<body><br />The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, list...
Semantic Structure<br />Assistive technologies allow users to navigate between sections of information if structure is use...
<h1> = Heading<br />The <h1> to <h6> tags are used to define HTML headings<br /><h1> defines the largest heading and <h6> ...
How “AT” Reads Headings<br />Assistive technology (AT) devices allow users to navigate through a webpage using the various...
A Good Example of Semantic Structure<br />GOOD!<br /><h1>Page Topic</h1><br />Content about this topic resides in this par...
A Bad Example of Semantic Structure<br /><h2>Page Topic</h2><br />Content about this topic resides in this paragraph.<br /...
<ol> = Ordered Lists<br />Code View:<ol>	<li>list item</li>	<li>list item</li>	<li>list item</li></ol><br />Tip: Change li...
<ul> = Unordered Lists<br />Code View:<ul>	<li>list item</li>	<li>list item</li>	<li>list item</li></ul><br />Tip: Change ...
List item
List item</li></li></ul><li><p> = Paragraph<br />The <p> tag defines a paragraph.<br />The p element automatically creates...
<br /> = Break<br />The <br> tag inserts a single line break. <br />An HTML break is the <br> tag.<br />An XHTML break is ...
Images<br />Image tag<imgsrc=“http://www.website.com/photo.jpg”><br />Your website<br />
Data Tables vs. Layout Tables<br />Data tables can be accessible!<br />Layout tables should be replaced with more accessib...
Tables<br />Tables<table>	<tr> (table row>		<td> (table column) </td>	</tr></table><br />
Web Editors<br />There are two types of programs that can be used to design basic web sites:<br />WYSIWYG: What You See Is...
FTP (File Transport Protocol)<br />FTP is a way of transferring your website’s files to and from your computer and the web...
FTP Programs	<br />Filezilla – Used in class<br />CuteFTP<br />WSFTP<br />
FTP Settings for CSULB<br />
Web Design Rules to Remember<br />Design your site to accommodate a 1024 x 768 pixel layout<br />Use a standard web font f...
Upcoming SlideShare
Loading in …5
×

HTML to FTP

3,073 views
2,950 views

Published on

Learn the basics of web design from HTML to FTP.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,073
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Without a doctype, your web page will fail validation when you test it later.
  • HTML to FTP

    1. 1. HTMLtoFTP<br />By: Keira Dooley<br />
    2. 2. Doctype<br />The doctype declaration should be the very first thing in an HTML document, before the <html> tag.<br />It is an instruction to the web browser about what version of the markup language the page is written in.<br />http://www.w3schools.com/tags/tag_doctype.asp<br />
    3. 3. XHTML Transitional<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />HTML 4<br />XML<br />1<br />XHTML<br />
    4. 4. HTML is Easy!<br />It’s got a HEAD and a BODY.<br /> <html> <head> <title>Welcome to my web site!</title> </head> <body> Read my content ! ! !<br /> </body></html><br />
    5. 5. <html><br />The <html> tag tells the browser that this is an HTML document.<br />
    6. 6. <head><br />doctype<br />keywords<br />page title<br />The head element contains the “brains” of the webpage:<br />doctype<br />page title<br />meta data, like keywords & page description.<br />
    7. 7. <body><br />The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.<br />text<br />
    8. 8. Semantic Structure<br />Assistive technologies allow users to navigate between sections of information if structure is used.<br />Structured content is beneficial for sighted users as well.<br />
    9. 9. <h1> = Heading<br />The <h1> to <h6> tags are used to define HTML headings<br /><h1> defines the largest heading and <h6> defines the smallest heading.<br />Important! Headings should be used to determine hierarchical content structure, NOT to make text larger and bolder.<br />
    10. 10. How “AT” Reads Headings<br />Assistive technology (AT) devices allow users to navigate through a webpage using the various headings as "bookmarks" to jump from section to section. <br />
    11. 11. A Good Example of Semantic Structure<br />GOOD!<br /><h1>Page Topic</h1><br />Content about this topic resides in this paragraph.<br /><h2> Sub Topic<br />Content about this topic resides in this paragraph.<br /><h3> Sub-Sub Topic<br />Content about this topic resides in this paragraph.<br /><h2> Sub Topic<br />Content about this topic resides in this paragraph.<br />Note: Use only one “Heading 1 <h1> ” per page.<br />
    12. 12. A Bad Example of Semantic Structure<br /><h2>Page Topic</h2><br />Content about this topic resides in this paragraph.<br /><h1>Topic</h1><br />Content about this topic resides in this paragraph.<br /><h3>Topic</h3><br />Content about this topic resides in this paragraph.<br /><h2>Sub Topic</h2><br />Content about this topic resides in this paragraph.<br />Note: Headings should be used in order to present information in a logical way to all users.<br />
    13. 13. <ol> = Ordered Lists<br />Code View:<ol> <li>list item</li> <li>list item</li> <li>list item</li></ol><br />Tip: Change list type by using <ol type=“A”> or <ol type=“a”><br />Live View:<br />List item<br />List item<br />List item<br />
    14. 14. <ul> = Unordered Lists<br />Code View:<ul> <li>list item</li> <li>list item</li> <li>list item</li></ul><br />Tip: Change list type by using <ul type=“square”> or <ul type=“circle”><br />Live View:<br /><ul><li>List item
    15. 15. List item
    16. 16. List item</li></li></ul><li><p> = Paragraph<br />The <p> tag defines a paragraph.<br />The p element automatically creates some space before and after itself. This space can be adjusted later with some formatting.<br />
    17. 17. <br /> = Break<br />The <br> tag inserts a single line break. <br />An HTML break is the <br> tag.<br />An XHTML break is the <br /> tag, which is properly closed.<br />Note: Use the break tag to insert line breaks, not to create paragraphs.<br />
    18. 18. Images<br />Image tag<imgsrc=“http://www.website.com/photo.jpg”><br />Your website<br />
    19. 19. Data Tables vs. Layout Tables<br />Data tables can be accessible!<br />Layout tables should be replaced with more accessible layout techniques, like CSS.<br />
    20. 20. Tables<br />Tables<table> <tr> (table row> <td> (table column) </td> </tr></table><br />
    21. 21. Web Editors<br />There are two types of programs that can be used to design basic web sites:<br />WYSIWYG: What You See Is What You Get.“Drag and drop” web design program. (ie: DreamWeaver, Microsoft Frontpage)<br />HTML Text Editor: You write the code. [ie: UltraEdit, Notepad/Windows, Simpletext/MAC]<br />
    22. 22. FTP (File Transport Protocol)<br />FTP is a way of transferring your website’s files to and from your computer and the web server<br />Your computer<br />WWW<br />FTP<br />
    23. 23. FTP Programs <br />Filezilla – Used in class<br />CuteFTP<br />WSFTP<br />
    24. 24. FTP Settings for CSULB<br />
    25. 25. Web Design Rules to Remember<br />Design your site to accommodate a 1024 x 768 pixel layout<br />Use a standard web font families<br />Use a browser-safe palette when possible<br />Save graphics at 72 dpi (dots per inch)<br />
    26. 26. References<br />W3 Schools: Tags Ordered by Function: http://www.w3schools.com/tags/ref_byfunc.asp<br />WebAIM: http://www.webaim.org/techniques/semanticstructure/<br />

    ×