Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML to FTP

3,316 views

Published on

Learn the basics of web design from HTML to FTP.

Published in: Technology
  • Be the first to comment

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 />

×