Presentation of 

Head First <HTML> and {CSS}

Download Internet Explorer  Download Firefox  Download Safari  Download Opera  Download Google Chrome
or BrowseHappy




  1. The Language of the Web: getting to know HTML  p. 1
    1. The first web page   Original browser
    2. index.html The Finished Version
    3. mission.html The Finished version
    4. p14.html  Blank .html
    5. p17.html  Blank .html with text - no format
    6. p21.html  Limited text format - no html structure
    7. p22.html  All text format - no html structure
    8. p23.html  Text formated and html structure
    9. p27_1.html  Blank .html
    10. p27_2.html  Formated "Starbuzz Coffee's Mission"
    11. p29.html  Formated "Starbuzz Coffee Beverages" - empty embeded CSS
    12. p30.html  Formated "Starbuzz Coffee Beverages" - CSS body format
    13. p33_1.html  Formated "Starbuzz Coffee's Mission" - No CSS
    14. p33_2.html  Formated "Starbuzz Coffee's Mission" - CSS body format
  2. Meet the ‘HT’ in HTML: going further, with hypertext    p. 43
    1. lounge.html p. 47
    2. p. 47
    3. p. 54
      1. p. 54 elixir.html
      2. p. 54 directions.html
    4. p. 58
    5. p. 68
  3. Web Page Construction: building blocks  p. 77
    1. journal.html  Finished version p. 83
    2. journal_p_83 Just the text
    3. journal_p_83 text and HTML formated
    4. journal_p_88 the q element  
    5. journal_p_91  
    6. p. 94 CSS Positioning and Layout
    7. journal_p_96   <br>
    8. journal_p_102 HTML list - Step 1
    9. journal_p_103 HTML list - Step 2
    10. journal_p_106 HTML definition list
    11. HTML ISO-8859-1 Reference  p. 112  The <html> element rocks.
    12. The Unicode Consortium
      1. Unicode 6.2 Character Code Charts  p. 112
    13. Crack the Location Challenge p. 113
      1. &#208;&epsilon;&tau;&#114;&ouml;&igrave;&tau; =  Ðετröìτ
  4. A Trip to Webville: getting connected    p. 123
    1. Website of the world's first-ever web server
    2. Finding a hosting company: Hosting Providers  p. 125
    3. You Bought a Domain...Now What?
    4. Starbuzz Coffee p. 126
    5. FTP  p. 132
      1. FileZilla
      2. Cyberduck
    6. index.html  p. 143 - 147
    7. A Case of Relatives and Absolutes p. 146
      1. http://www.robotsrus.com/   (http://www.robogeddon.com/index.asp)
      2. https://www.robot-r-us.com/
    8. index_p_149 exercise
    9. index_p_150  p. 150 Using the id attribute to create a destination for <a>
    10. http://wickedlysmart.com/buzz/ p. 151   (Line 104)
    11. index_p_152    #Coffee
    12. index_p_152_extra    #Other_sources  (Not in the book, an "extra")
    13. index_p_156 Opening a new window using target
  5. Meeting the Media: adding images to your pages   p. 165
    1. sharpen_your_pencil_p_171.html
    2. sharpen_your_pencil_p_173.html  alt
    3. sharpen_your_pencil_p_173.html broken.png
    4. We start with:
      1. index.html   The finished page - save as index_finished.html
      2. index_bak.html  The start page - save as index.html replacing existing file
      3. index_thumbs.html  The thumbnail image page
    5. index_p_176.html  Check out myPod's "index.html" file.
    6. index_p_177.html  Sharpen your pencil
    7. index_p_188.html  Fixing up myPod HTML
    8. index_p_190.html  More photos for myPod
    9. index_p_194.html  Rework the HTML to use the thumbnails
    10. Create individual pages for the photos p. 197
      1. seattle_video_med.html
      2. seattle_classic.html
      3. seattle_shuffle.html
      4. seattle_downtown.htm Not in html folder/create from seattle_shuffle.html
      5. britain.html
      6. applestore.html
    11. index_p_200.html  Add the image links to "index.html"
    12. index_p_208.html  Add the logo to the myPod web page
  6. Getting Serious with HTML: standards and all that jazz   p. 219
    1. Recommended Doctype Declarations to use in your Web document.
    2. lounge_229.html No DOCTYPE
    3. lounge_229 doctype.html <!doctype>
    4. W3C Markup Validation Service
    5. lounge_236 fix.html Fixing that error
    6. lounge_240.html  <meta charset="utf-8">
    7. exercise p. 243
      1. directions_243.html  <meta charset="utf-8">
      2. elixir_243.html  <meta charset="utf-8">
    8. lounge_243.html No DOCTYPE
  7. Adding a Little Style: getting started with CSS p. 255
    1. lounge.html
    2. lounge.html p261
    3. lounge.html p262
    4. lounge.html p264  Top gray box
    5. lounge.html p264  Second gray box
    6. lounge.html p265  line
    7. lounge.html p266  line only under <h1>
    8. Selectutorial - CSS selectors
    9. lounge_p_275.html
      1. directions_276.html
      2. elixir_276.html
    10. lounge_p_280.html
    11. lounge_p_282.html
    12. lounge_p_284.html
    13. elixir_287-8.html
    14. Clear winner p. 93
      1. elixir_293.html  Start - embeded styles <p class="greentea">
      2. elixir_293_1.html  <p class="greentea raspberry blueberry">
      3. elixir_293_2.html  <p class="raspberry blueberry greentea">
      4. elixir_293_3.html  p.greentea{color:green;} at bottom
      5. elixir_293_4.html  p.raspberry{color:blue; } at bottom
      6. elixir_293_5.html  <p class="greentea">
    15. CSS Validation Service p. 299
  8. Expanding your Vocabulary: styling with fonts and colors  p. 341
    1. journal.html p. 318   The finished version
    2. journal_p_319.html  Getting Tony a new font-family
    3. journal_p_326.html  Web font
    4. journal_p_332.html  font-size
    5. journal_p_336.html  normal-weight heading
    6. journal_p_338.html  italic
    7. Web colors  p. 349
    8. journal_p_351.html  Orange heading and underline
    9. journal_p_354.html  Remove underline add border
  9. Getting Intimate with Elements: the box model  p. 361
    1. lounge.html  p. 362  Lounge gets an upgrade
    2. lounge_p_364.html  Setting up and a few simple upgrades
    3. lounge_p_365.html  One more adjustment-
    4. lounge_p_375.html  Guarantee style
    5. lounge_p_377.html  Padding
    6. lounge_p_378.html  Margin
    7. lounge_p_380.html  Background image
    8. lounge_p_383.html  Fix background image
    9. lounge_p_384.html  Padding only on left
    10. lounge_p_385.html  Margin on right
    11. lounge_p_389.html  border-style: dashed;
    12. lounge_p_389.html  border-color: white;
    13. lounge_p_396.html  #guarantee
    14. lounge-complete
      1. lounge-mediaquery.html  p. 401
      2. lounge.html  p. 404
  10. Advanced Web Construction: <div> and <span>  p. 413
    1. lounge.html  p. 415
    2. lounge_p_422.html  <div id="elixirs">    
    3. lounge_p_424.html  Adding a border
    4. lounge_p_426.html  Elixir width
    5. lounge_p_431.html  Elixir basic styles 
    6. lounge_p_439.html  Elixir color of headings 
    7. lounge_p_440.html  line-height:1em  
    8. lounge_p_440.html  line-height:1 
    9. lounge_p_444.html  shortcut 
    10. lounge_p_445.html  Footer
    11. lounge_p_448.html  Playing at the lounge
    12. lounge_p_453.html  pseudo-class
    13. lounge_p_455.html  pseudo-class to work   
    14. lounge_p_465.html  Super Brain Power
  11. Arranging Elements: layout and positioning  p. 471
    1. index.html p. 483 The new Starbuzz
    2. index.html p. 488  Move the sidebar
    3. index.html p. 488  Width and float sidebar
    4. index.html p_492  Margin main section
    5. index.html p_495  Solving overlap
    6. index.html p_498  No CSS
    7. index.html p_499  Righty tighty, lefty loosey
    8. index.html p_501  Liquid and frozen
    9. index.html p_502  Jello
    10. index.html p_508  Absolute 
    11. index.html p_509  Fix
    12. Use CSS display:table for Layout      
    13. index.html p_514  Table display still centered
    14. index.html p_516  Meanwhile, back at Starbuzz
    15. index.html p_518  Fix the spacing
    16. index.html p_519  Exercise: 3 column
    17. index.html p_525  Fix header image
    18. index.html p_526  Fix header image CSS
    19. index.html p_528  Adding the award
    20. index.html p_532  Coupon
    21. index.html p_533  Using a negative left property value
  12. Modern HTML: HTML5 Markup  p. 545
    1. David J. Hark's <html> Class Resources
    2. David's HTML5 page
  13. Getting Tabular: Tables and More Lista  p. 601
    1. table.html p. 604    Testing Tony's Travels
    2. table.html p. 606    Tables dissected
    3. table.html p. 609     Caption
    4. journal.html            My Trip Around the USA on a Segway
    5. journal.html p. 611  Style the table
    6. journal.html p. 616  border-collapse: collapse;
    7. journal.html p. 617  Align right, center
    8. journal.html p. 618  Color
    9. journal.html p. 622  rowspan
    10. journal.html p. 626  nested table
    11. journal.html p. 628  nested table background color
    12. Listamatic
    13. journal.html p. 632  list-style-image
    14. TableMaker   Updated on Dec 4, 1997
  14. Getting Interactive: HTML Forms  p. 645
    1. David's form info
    2. HTML tag:
      1. <lable>
      2. <fieldset>
      3. <legend>
      4. <optgroup>
  15. Appendix: Leftovers: The Top Ten Topics p. 697 [top]

David J. Hark
HARK/INTERNET-HELP, Inc.
P. O. Box 201 Shepherdstown, WV 25443-0201
304-876-2607
N8GMQ
dhark@fred.net
http://www.dhark.com
http://www.dhark.info
Last updated: 17 February 2014

 

© 2013, 2014 David J. Hark