HTML to FTP
3 likes2,943 views
The document discusses various HTML tags and their uses. It covers tags for document structure like <html>, <head>, <body>; headings from <h1> to <h6>; lists using <ol>, <ul>; paragraphs with <p>; line breaks with <br>; images with <img>; and tables with <table>, <tr>, <td>. It also discusses semantic structure, data versus layout tables, web editors, FTP for file transfer, and design best practices.
![Web EditorsThere are two types of programs that can be used to design basic web sites:WYSIWYG: What You See Is What You Get.“Drag and drop” web design program. (ie: DreamWeaver, Microsoft Frontpage)HTML Text Editor: You write the code. [ie: UltraEdit, Notepad/Windows, Simpletext/MAC]](https://image.slidesharecdn.com/week2-html-ftp-100427142442-phpapp02/85/HTML-to-FTP-21-320.jpg)
HTML to FTP
- 2. DoctypeThe doctype declaration should be the very first thing in an HTML document, before the <html> tag.It is an instruction to the web browser about what version of the markup language the page is written in.http://www.w3schools.com/tags/tag_doctype.asp
- 3. XHTML Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML 4XML1XHTML
- 4. HTML is Easy!It’s got a HEAD and a BODY. <html> <head> <title>Welcome to my web site!</title> </head> <body> Read my content ! ! ! </body></html>
- 5. <html>The <html> tag tells the browser that this is an HTML document.
- 6. <head>doctypekeywordspage titleThe head element contains the “brains” of the webpage:doctypepage titlemeta data, like keywords & page description.
- 7. <body>The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.text
- 8. Semantic StructureAssistive technologies allow users to navigate between sections of information if structure is used.Structured content is beneficial for sighted users as well.
- 9. <h1> = HeadingThe <h1> to <h6> tags are used to define HTML headings<h1> defines the largest heading and <h6> defines the smallest heading.Important! Headings should be used to determine hierarchical content structure, NOT to make text larger and bolder.
- 10. How “AT” Reads HeadingsAssistive technology (AT) devices allow users to navigate through a webpage using the various headings as "bookmarks" to jump from section to section.
- 11. A Good Example of Semantic StructureGOOD!<h1>Page Topic</h1>Content about this topic resides in this paragraph.<h2> Sub TopicContent about this topic resides in this paragraph.<h3> Sub-Sub TopicContent about this topic resides in this paragraph.<h2> Sub TopicContent about this topic resides in this paragraph.Note: Use only one “Heading 1 <h1> ” per page.
- 12. A Bad Example of Semantic Structure<h2>Page Topic</h2>Content about this topic resides in this paragraph.<h1>Topic</h1>Content about this topic resides in this paragraph.<h3>Topic</h3>Content about this topic resides in this paragraph.<h2>Sub Topic</h2>Content about this topic resides in this paragraph.Note: Headings should be used in order to present information in a logical way to all users.
- 13. <ol> = Ordered ListsCode View:<ol> <li>list item</li> <li>list item</li> <li>list item</li></ol>Tip: Change list type by using <ol type=“A”> or <ol type=“a”>Live View:List itemList itemList item
- 14. <ul> = Unordered ListsCode View:<ul> <li>list item</li> <li>list item</li> <li>list item</li></ul>Tip: Change list type by using <ul type=“square”> or <ul type=“circle”>Live View:List item
- 15. List item
- 16. List item<p> = ParagraphThe <p> tag defines a paragraph.The p element automatically creates some space before and after itself. This space can be adjusted later with some formatting.
- 17. <br /> = BreakThe <br> tag inserts a single line break. An HTML break is the <br> tag.An XHTML break is the <br /> tag, which is properly closed.Note: Use the break tag to insert line breaks, not to create paragraphs.
- 19. Data Tables vs. Layout TablesData tables can be accessible!Layout tables should be replaced with more accessible layout techniques, like CSS.
- 20. TablesTables<table> <tr> (table row> <td> (table column) </td> </tr></table>
- 21. Web EditorsThere are two types of programs that can be used to design basic web sites:WYSIWYG: What You See Is What You Get.“Drag and drop” web design program. (ie: DreamWeaver, Microsoft Frontpage)HTML Text Editor: You write the code. [ie: UltraEdit, Notepad/Windows, Simpletext/MAC]
- 22. FTP (File Transport Protocol)FTP is a way of transferring your website’s files to and from your computer and the web serverYour computerWWWFTP
- 23. FTP Programs Filezilla – Used in classCuteFTPWSFTP
- 24. FTP Settings for CSULB
- 25. Web Design Rules to RememberDesign your site to accommodate a 1024 x 768 pixel layoutUse a standard web font familiesUse a browser-safe palette when possibleSave graphics at 72 dpi (dots per inch)
- 26. ReferencesW3 Schools: Tags Ordered by Function: http://www.w3schools.com/tags/ref_byfunc.aspWebAIM: http://www.webaim.org/techniques/semanticstructure/
Editor's Notes
- #3: Without a doctype, your web page will fail validation when you test it later.