Basic HTML: Simple Markup Code

Topics

Internet != Web
         
Client vs. Server
   ISP
   http request (web page request), protocol
   DNS
   IP address (IPv4 32 bits - IPv6 128 bits)
   http response (web page)

HTML
   markup
   structure
   elements
      tags  <tag>      
         open, close, self closing (see meta)            
            <!DOCTYPE html>
            <!-- comment -->
            <html>
            <head>
            <body>
      interpreted by browser
      instructions TO the browser
      
      attributes (lang, charset)
     
   SEO !!! (headers, semantic tags)

9 Line Template

Use this code as a starter page for your html pages.
NOTE that this html validates !
VERY important...

<!DOCTYPE html>
<html> 
 <head> 
    <meta charset="UTF-8" />
    <title> your title here </title>
 </head>
 <body>   
 </body>
</html>


Example Page 1   rendered code

<!DOCTYPE html>
<html> 
    <!-- your name -->
    <!-- note that comments help organization & understanding - they do NOT affect the page -->
    <!-- purpose, how used, where used -->
 <head> 
    <meta charset="UTF-8" /> <!-- attribute is charset - attributes are always quoted -->
    <title> - your title here: shows up on tab in browser - </title> 
 </head>

 <body>
   Content will be in the body.
   Content is the most important and is assisted by:
   <ol>
      <li>structure (html elements)</li>
      <li>style (css)</li>
      <li>behavior (js)</li>
   </ol>
   People come for the style, 
   but stay for the content...   
 </body>
</html>


Example Page 2   rendered code

<!DOCTYPE html>
<!-- FILE: basichtml.html -->
<!-- wyatt -->
<html lang="en"><!-- attribute is lang - always quoted -->
<head> 
    <title>basic html code</title>
    <meta charset="UTF-8" /> <!-- attribute is charset - always quoted -->
</head>
<body>
   

Hello World!

Hello Country

Hello State

Hello City

Hello Street
Hello House
Gives structure and implies importance or hierarchy.
Provides meaning for search engines. </body> </html>


Example Page 3   rendered code

<!DOCTYPE html>
<!-- FILE: basichtml.html -->
<!-- wyatt -->
<html lang="en"> <!-- attribute is lang - always quoted -->
<head>
    <title>basic html markup code</title>
    <meta charset="UTF-8" /> <!-- attribute is charset - always quoted -->
</head>
<body>    
   HTML provides STRUCTURE for a web document.  Think scaffolding or framework.
   <div>A div is the workhorse for structuring documents.
      <div>
        A div can be nested inside another div.  This looks pretty plain, huh??
      </div>
      <div>
        CSS presents a way to affect the PRESENTATION of a web page.
      </div>
   </div>
   <hr />
   Web Stack:
   <ol>
      <li>HTML provides <em>STRUCTURE</em></li>
      <li>CSS provides <em>PRESENTATION</em></li>
      <li>JavaScript provides <em>BEHAVIOR</em></li>
   </ol>   
</body>
</html>