Hour 02

1,178 views
1,057 views

Published on

Hour 02 ~ CSCI 28A

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

  • Be the first to like this

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

No notes for slide

Hour 02

  1. 1. <ul><li>Everyone has a success mechanism and a failure mechanism. The failure mechanism goes off by itself. The success mechanism only goes off with a goal. Every time we write down and talk about a goal we push the button to start the success mechanism. </li></ul><ul><li>Charles Jones </li></ul>
  2. 2. Create a Web Page Right Now <ul><li>Sams Teach Yourself HTML and CSS in 24 Hours, 7th Edition </li></ul>
  3. 3. Objectives <ul><li>Using Notepad </li></ul><ul><ul><li>Getting Started </li></ul></ul><ul><li>Learn simple codes </li></ul><ul><ul><li>HTML Tags Every Web Page Must Have </li></ul></ul><ul><li>Create a look and feel </li></ul><ul><ul><li>Organizing a Page with Paragraphs and Line Breaks </li></ul></ul>
  4. 4. Objectives <ul><li>Emphasize your content </li></ul><ul><ul><li>Calling Out Text with Headings </li></ul></ul><ul><li>Looking under the hood </li></ul><ul><ul><li>Peeking at Other People’s Pages </li></ul></ul><ul><li>Suitable Structure </li></ul><ul><ul><li>Validating Your Pages </li></ul></ul>
  5. 5. Getting Started with a Simple Web Page <ul><li>Working with a simple text editor </li></ul><ul><li>Save as plain, standard ASCII text </li></ul><ul><li>Don’t forget to add .html after the file name </li></ul>
  6. 6. Getting Started with a Simple Web Page <ul><li>HTML Tag – a coded command used to indicate how part of a web page should be displayed </li></ul>
  7. 7. HTML Tags Every Web Page Must Have* <ul><li><?xml version=“1.0” encoding=“UTF-8” </li></ul><ul><ul><li>XML – Extensible Markup Language </li></ul></ul><ul><ul><li>UTF-8 – Unicode Transformation Format </li></ul></ul><ul><ul><ul><li>ASCII – American Standard Code for Information Interchange </li></ul></ul></ul>*element
  8. 8. HTML Tags Every Web Page Must Have* <ul><li><!DOCTYPE html Public “-//W3C// DTD XHTML 1.1//en” http://www.we.org/TR/xhtml11/DTD/xhtml11.dtd> </li></ul>*element
  9. 9. HTML Tags Every Web Page Must Have <ul><li>Most HTML tags have two parts: </li></ul><ul><ul><li>Opening tag - <html> </li></ul></ul><ul><ul><li>Closing tag - </html> </li></ul></ul><ul><li>Another type - empty tag </li></ul><ul><ul><li>No matching pair of tags - <br /> </li></ul></ul>
  10. 10. HTML Tags Every Web Page Must Have <ul><li><html>…</html> </li></ul><ul><ul><li>Encloses the entire HTML document </li></ul></ul><ul><ul><li>Always close every web page with </html> </li></ul></ul>
  11. 11. HTML Tags Every Web Page Must Have <ul><li><head>…</head> </li></ul><ul><ul><li>Encloses the head of the html document </li></ul></ul><ul><ul><li>Describes the page and is not displayed in browser </li></ul></ul>
  12. 12. HTML Tags Every Web Page Must Have <ul><li>< title> … </title> </li></ul><ul><ul><li>Indicates the title of the document </li></ul></ul><ul><ul><li>Used within <head> </li></ul></ul><ul><ul><li>Appears in title of web browser </li></ul></ul>
  13. 13. HTML Tags Every Web Page Must Have <ul><li><body>…</body> </li></ul><ul><ul><li>Encloses the body of the HTHL document </li></ul></ul><ul><ul><li>Everything between the tags will appear in the browser window </li></ul></ul>
  14. 14. Organizing a Page with Paragraphs and Line Breaks <ul><li><p> … </p> </li></ul><ul><ul><li>Skip a line between paragraphs </li></ul></ul><ul><ul><li>Open and close </li></ul></ul>
  15. 15. Organizing a Page with Paragraphs and Line Breaks <ul><li><br /> </li></ul><ul><ul><li>Line break within a paragraph </li></ul></ul><ul><ul><li>Empty tag </li></ul></ul><ul><ul><li>Not <br> </li></ul></ul>
  16. 16. Organizing a Page with Paragraphs and Line Breaks <ul><li><hr /> </li></ul><ul><ul><li>Horizontal rule line </li></ul></ul><ul><ul><li>Causes line break </li></ul></ul><ul><ul><li>Empty tag </li></ul></ul><ul><ul><li>Not <hr> </li></ul></ul>
  17. 17. Calling Out Text with Headings <ul><li>Heading Tags </li></ul><ul><ul><li><h1> … </h1> Heading One </li></ul></ul><ul><ul><li><h2> … </h2> Heading Two </li></ul></ul><ul><ul><li><h3> … </h3> Heading Three </li></ul></ul><ul><ul><li><h4> … </h4> Heading Four </li></ul></ul><ul><ul><li><h5> … </h5> Heading Five </li></ul></ul><ul><ul><li><h7> … </h6> Heading Six </li></ul></ul>
  18. 18. Peeking at Other People’s Pages <ul><li>Just the tip of the HTML iceberg! </li></ul><ul><li>View Source </li></ul><ul><li>Building on a solid foundation </li></ul>
  19. 19. Validating Your Page - validator.w3.org <ul><li>Looking to the future </li></ul><ul><li>Published = Yes </li></ul><ul><li>Computer = YES! </li></ul><ul><li>On the fly = YES! </li></ul>
  20. 23. Summary <ul><li>Using Notepad </li></ul><ul><ul><li>Getting Started </li></ul></ul><ul><li>Learn simple codes </li></ul><ul><ul><li>HTML Tags Every Web Page Must Have </li></ul></ul><ul><li>Create a look and feel </li></ul><ul><ul><li>Organizing a Page with Paragraphs and Line Breaks </li></ul></ul>
  21. 24. Summary <ul><li>Emphasize your content </li></ul><ul><ul><li>Calling Out Text with Headings </li></ul></ul><ul><li>Looking under the hood </li></ul><ul><ul><li>Peeking at Other People’s Pages </li></ul></ul><ul><li>Suitable Structure </li></ul><ul><ul><li>Validating Your Pages </li></ul></ul>
  22. 25. Creativity

×