Html1

949 views

Published on

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
949
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html1

  1. 1. HTML A Crash Course
  2. 2. Basic Guidelines <ul><li>HTML - Hyper Text Markup Language </li></ul><ul><li>Language of web page design </li></ul><ul><li>“ What you see is what you get” vs. learning the language in ANGEL </li></ul><ul><li>Each code is called a “tag” </li></ul><ul><li>Need: Notepad, Browser, Windows Explorer </li></ul>
  3. 3. Basic Page Format <ul><li>View “source of website” </li></ul><html> <head> <title>menu</title> </head> <body> <p>Other Pages:</p> <p><a href=&quot;syllabi.html&quot; target=&quot;frame2&quot;>Syllabi</a></p> <p><a href=&quot;notes.html&quot; target=&quot;frame2&quot;>course notes</a></p> <p><a href=&quot;instructors.html&quot; target=&quot;frame2&quot;>About the instructors</a></p> <p><a href=&quot;links1.html&quot; target=&quot;frame2&quot;>Links to supplemental resources</a></p> <p><a href=&quot;main1.html&quot; target=&quot;frame2&quot;>Home</a></p> </body> </html>
  4. 4. Making your first webpage <ul><li><html> - signal language you are using </li></ul><ul><li><head> - signal the heading of the site </li></ul><ul><li><title>My first webpage</title> - this is what you see on the top left bar </li></ul><ul><li></head> - always end sections </li></ul><ul><li><body> - signals start of body </li></ul><ul><li><p> This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. The body of the site <ul><li><body > </li></ul><ul><li>Adding text </li></ul><ul><ul><li><p align=“center”> signals new paragraph </p> </li></ul></ul><ul><ul><ul><li>“ align” attribute aligns text: left, center, or right </li></ul></ul></ul><ul><ul><li><br>Link break: starts new line </li></ul></ul><ul><ul><li><hr>Creates a horizontal line </li></ul></ul><ul><ul><li>&nbsp- adds a space </li></ul></ul><ul><ul><li>&quot;Adds Quotes&quot; </li></ul></ul><ul><ul><li><b> bold </b> (<strong>) <em> Italic </em>(<i>) </li></ul></ul>
  6. 6. Headings and Links <ul><li><h1> Biggest </h1> </li></ul><ul><li><h2> Bigger </h2> </li></ul><ul><li><h3> Big </h3> </li></ul><ul><li>Links: To a website </li></ul><ul><li><a href= http://www.google.com >Google</a> </li></ul><ul><li>To email: </li></ul><ul><li><a href=“mailto: [email_address] ”> Email me!</a> </li></ul><ul><li>To a file: </li></ul><ul><li><a href=“chapter16.ppt”>Chapter 16 Powerpoint</a> </li></ul>
  7. 7. Adding Images <ul><li><img src=“emily.jpg”> </li></ul><ul><li>Specify width and/or height in pixels </li></ul><ul><ul><li><img src=“emily.jpg” width=“250”> </li></ul></ul><ul><li>Specify “alt” – text that appears if your image does not show. </li></ul><ul><ul><li><img src=“emily.jpg” width=“250” alt=“my photo”> </li></ul></ul>
  8. 8. Viewing your site <ul><li>Save site in notepad as .html or .htm, not .txt </li></ul><ul><li>Open IE or firefox, go to file, open, and open your .html file </li></ul><ul><li>Everyone has website access through Kirkwood </li></ul><ul><ul><li>Have to activate your account </li></ul></ul><ul><ul><li>Use website manager to upload files </li></ul></ul>
  9. 9. Adding Color and Style <ul><li>HTML style tags such as background, fonts, and text colors are now out of date. </li></ul><ul><li>Use CSS or “Cascading Style Sheet” to format style of your site. </li></ul><ul><li>You can create internal or external style sheets. </li></ul><ul><li>Colors use Hexidecimal color codes: each color has a 6 number/letter combination. </li></ul>
  10. 10. Tables <ul><li>Using tables are great for course calendars </li></ul><ul><li><table> </li></ul><ul><li><tr> (table row) </li></ul><ul><li><th> (table heading) or <td> (table data cell) </li></ul><ul><li></table> </li></ul>
  11. 11. Example <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><th>Date</th> </li></ul><ul><li><th>Topic</th> </li></ul><ul><li><th>Chapter</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>11/20/06</td> </li></ul><ul><li><td>Persuasion</td> </li></ul><ul><li><td>Lucas Chapter 16</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  12. 12. Table Attributes <ul><li>Border- separates cells <table border=“2”> </li></ul><ul><ul><li>Number value refers to thickness in pixels </li></ul></ul><ul><ul><li><table bordercolor=“#982353”> - specifies color </li></ul></ul><ul><li>Caption – title of table </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><caption>Course Calendar</caption> </li></ul></ul><ul><li>There are many more attributes such as color, spacing, and images </li></ul>
  13. 13. Creating Lists <ul><li>Ordered Lists: </li></ul><ul><ul><li><h2>Speech Order</h2> </li></ul></ul><ul><ul><li><ol> </li></ul></ul><ul><ul><li><li>Gus Frerotte</li> </li></ul></ul><ul><ul><li><li>Chester Taylor</li> </li></ul></ul><ul><ul><li><li>Ryan Longwell</li> </li></ul></ul><ul><ul><li><li>Pat Williams</li> </li></ul></ul><ul><ul><li><li>Adrian Peterson</li> </li></ul></ul><ul><ul><li></ol> </li></ul></ul>
  14. 14. Creating Lists <ul><li>Unordered Lists </li></ul><ul><ul><li><h2>This is a list</h2> </li></ul></ul><ul><ul><li><ul> </li></ul></ul><ul><ul><li><li>Bullet point 1</li> </li></ul></ul><ul><ul><li><li>Bullet point 2</li> </li></ul></ul><ul><ul><li><li>Bullet point 3</li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul>

×