Intro To HTML

1,277 views
1,198 views

Published on

A presentation created for The Fuse Factory, a Columbus OH art-tech collective and designed by Katawi Cato with input by Dawn Friedman

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

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

No notes for slide

Intro To HTML

  1. 1. Intro to HTML 4.01 Instructor: Dawn Friedman The Fuse Factory Electronic and Digital Arts Lab 09.16.09
  2. 2. Workshop Outline <ul><li>Presentation: How a web site works (understanding elements and tags: the DNA of HTML) </li></ul><ul><li>Presentation part 2: Rules “beautiful” HTML code adheres to </li></ul><ul><li>Hands on exercise: Getting started in HTML </li></ul>09.16.09
  3. 3. What is HTML? <ul><li>Hyper Text Markup Language </li></ul><ul><li>Hyper : You can go anywhere and everywhere on a browser </li></ul><ul><li>Text : You are working primarily with text </li></ul><ul><li>Markup : The code necessary for making the HTML readable by a browser </li></ul><ul><li>Language : Refers to the specific syntax of a programming or scripting language </li></ul>09.16.09
  4. 4. What is HTML? <ul><li>HTML is a markup (or scripting) language - not a programming language </li></ul><ul><li>A markup language contains markup tags that describe how the text is to be formatted </li></ul>09.16.09
  5. 5. 09.16.09
  6. 6. What is HTML? <ul><li>In the same way that proofreader marks help editors format an essay, HTML tells browsers how to format your page </li></ul>09.16.09
  7. 7. HTML vs. CSS <ul><li>HTML for content (think of a scaffold), CSS for presentation (color, fonts, advanced layout) </li></ul><ul><li>Many HTML elements and attributes declaring colors, fonts, background, etc. are deprecated </li></ul><ul><li>Deprecated means the code will not be (or is not) supported by the most recent versions of HTML and web browsers </li></ul>09.16.09
  8. 8. What is a Web Browser? <ul><li>A web browser is a computer application that does two things: </li></ul><ul><li>It goes to a web server on the internet and requests a page, so it can pull the page through the network and into your machine </li></ul><ul><li>It interprets the HTML elements and tags within the page in order to display it on the screen as the page’s creator intended </li></ul>09.16.09
  9. 9. How a Web Browser Works 09.16.09
  10. 10. Viewing the Page Source <ul><li>Viewing the page source is like popping up the hood of a car to look at the engine </li></ul><ul><li>Don’t be intimidated by the code! </li></ul><ul><li>It will become more familiar with practice </li></ul><ul><li>Viewing source code is a great way to learn </li></ul><ul><li>Check out: </li></ul><ul><li>www.w3schools.com/html/html_intro.asp </li></ul>09.16.09
  11. 11. Elements and tags 09.16.09 <title>This is a title</title>
  12. 12. Elements and tags 09.16.09 <title>This is a title</title> All of this is an element
  13. 13. Elements and tags 09.16.09 <title>This is a title</title> This is a start tag
  14. 14. Elements and tags 09.16.09 <title>This is a title</title> And this is an end tag
  15. 15. 09.16.09 What Does HTML Look Like?
  16. 16. Recommended Text Editors (Windows) <ul><li>Notepad++ </li></ul><ul><li>Caditor </li></ul><ul><li>GNU Emacs </li></ul><ul><li>Crimson Editor </li></ul><ul><li>ConTEXT </li></ul><ul><li>SciTE </li></ul><ul><li>Komodo Edit </li></ul><ul><li>jEdit </li></ul>09.16.09
  17. 17. Recommended Text Editors (Mac) <ul><li>Bluefish Editor </li></ul><ul><li>Text Wrangler </li></ul><ul><li>Smultron </li></ul><ul><li>GNU Emacs </li></ul><ul><li>Komodo Edit </li></ul><ul><li>jEdit </li></ul>09.16.09
  18. 18. HTML Toolbox: Lists and Links <ul><li>Text links </li></ul><ul><li>Image links </li></ul><ul><li>Open link in a new browser window or tab </li></ul><ul><li>Page anchors </li></ul><ul><li>Email links </li></ul><ul><li>Ordered lists </li></ul><ul><li>Unordered lists </li></ul>09.16.09
  19. 19. HTML Toolbox: Sample Tags <ul><li><a href> (link tag) </li></ul><ul><li><img src> (image tag) </li></ul><ul><li><mailto:> (email link tag) </li></ul><ul><li><table> (to create a table) </li></ul><ul><li><ol> (ordered list opening tag) </li></ul><ul><li><ul> (unordered list opening tag) </li></ul>09.16.09
  20. 20. Validating Your HTML <ul><li>Making sure your HTML is “clean” </li></ul><ul><li>HTML errors are not necessarily reflected in the appearance of your page </li></ul><ul><li>http://validator.w3.org </li></ul><ul><li>http://htmlhelp.com/tools/valet/ </li></ul><ul><li>Firefox add-ons </li></ul>09.16.09
  21. 21. Special HTML Characters <ul><li>HTML renders them with numeric or character encoding so that they can be included in the document properly </li></ul><ul><li>There are several characters that should not be left unencoded </li></ul><ul><li>Left unencoded, they can confuse the browser and not show up correctly </li></ul>09.16.09
  22. 22. Special HTML Characters <ul><li>Less-than sign: < </li></ul><ul><li>Greater-than sign: > </li></ul><ul><li>Ampersand: & </li></ul><ul><li>Quotation marks “ ” </li></ul>09.16.09
  23. 23. Special HTML Characters Done Right <ul><li>Less-than sign: & it; </li></ul><ul><li>Greater-than sign: & gt; </li></ul><ul><li>Ampersand: & amp; </li></ul><ul><li>Quotation mark: & quot </li></ul><ul><li>Full list of special characters: </li></ul><ul><li>degraeve.com/reference/specialcharacters.php </li></ul>09.16.09
  24. 24. Skills Supplementing HTML <ul><li>XHTML </li></ul><ul><li>CSS </li></ul><ul><li>Javascript </li></ul><ul><li>JQuery </li></ul><ul><li>Moo Tools </li></ul><ul><li>Flash </li></ul><ul><li>PHP </li></ul><ul><li>CMS (Content Management System) </li></ul>09.16.09
  25. 25. Difference Between HTML and XHTML <ul><li>Since 2000, W3C recommendations based on XML </li></ul><ul><li>Provides more robust and rigorous documentation </li></ul><ul><li>All tags must be closed </li></ul><ul><li>All attributes have to be in quotes </li></ul><ul><li>All lower case </li></ul>09.16.09
  26. 26. What Beautiful HTML Code Looks Like <ul><li>DOCTYPE properly declared </li></ul><ul><li>Tidy head section </li></ul><ul><li>Body ID’ed </li></ul><ul><li>Semantically clean menu </li></ul><ul><li>Important content first </li></ul><ul><li>css-tricks.com/what-beautiful-html-code-looks-like/ </li></ul>09.16.09
  27. 27. What Beautiful HTML Code Looks Like <ul><li>DOCTYPE properly declared </li></ul><ul><li>Tidy head section </li></ul><ul><li>Body ID’ed </li></ul><ul><li>Semantically clean menu </li></ul><ul><li>webdesignfromscratch.com/html-css/semantic-html.php </li></ul><ul><li>Important content first </li></ul>09.16.09
  28. 28. What Beautiful HTML Code Looks Like <ul><li>Proper ending tags </li></ul><ul><li>Code is tabbed into sections </li></ul><ul><li>Hierarchy of header tags </li></ul><ul><li>Content, content, content </li></ul><ul><li>No styling! Leave it to CSS! </li></ul>09.16.09
  29. 29. 09.16.09
  30. 30. <ul><li>http://css-tricks.com/ </li></ul><ul><li>what-beautiful-html-code-looks-like/ </li></ul>What Beautiful HTML Code Looks Like 09.16.09
  31. 31. Now on to part two: The hands-on make your first web page with HTML part! 09.16.09

×