tomleo/intro.md

## intro.md

      
    Raw
  

              intro.md
            
          
    Goals


Basic website structure
HTML
CSS
Markdown

Series of Tubes

Protocols

Whats your favorite color... over
Blue... over
Thanks over and out
When talking on walkie-talkies you can't both talk and listen. So there's a
protocol you follow. To avoid talking over someone, before they're done
talking, you end your sentance with "over". To end your conversation you say
"over and out".
The web is composed of multiple layers/protocols (OSI model)

HTTP: Handled by the browser
TCP/IP: Two protocols, handled by the operating system
Link layer: Thar be dragons

HTML Basics

Opening Tags start with < followed by the name of the tag and ending with >
Closing Tags start with < followed by the name of the tag and ending with />
Content is added between opening tags and closing tags
The code for a "paragraph" is <p> and can be used as follows:
<p>My cool paragraph goes here</p>
Some tags are self-closing meaning there is no content between an
Opening Tag and Closing Tag.
An image tag for example, unlike a paragraph does not have any text,
instead it just links to an image.
<img src="cats.jpg">
The src part in the tag is known as an attribute. Attributes provide "meta"
data for tags. Meta data includes things such as the location or source of an
image, or where a link should go.
Commonly Used Tags

<h1>Test Heading</h1>
<h2>Test Heading</h2>
<h3>Test Heading</h3>
<h4>Test Heading</h4>
<h5>Test Heading</h5>
<h6>Test Heading</h6>
<p>This is a paragraph</p>
<ol>
    <li>One fish</li>
    <li>Two fish</li>
    <li>Red fish</li>
    <li>Blue Fish</li>
</ol>
<ul>
    <li>One fish</li>
    <li>Two fish</li>
    <li>Red fish</li>
    <li>Blue Fish</li>
</ul>
<em>Hello</em>

<a href="www.google.com">Google</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Kriz_Puppy.jpg">
Example 01
Commonly Used self closing tags

"Horizontal-Rule": <hr>
"line-break": <br>
Meaningless Tags

<div>
<span>
By meaningless, I mean these tags have no semantics. A <h1> tag means the top
level header or title of a web page. It can be a cue to web crawlers (i.e.
Google) what a website is about. It will allow visually impared people using
screen readers to understand how a document is layed out. It will visually look
different (i.e. bigger) than other text on the page aiding in readability.
So why are there "meaningless" tags? One use common use of <div> tags is to
group sections of HTML togeather for styling purposes (this will make more
sense once you learn CSS or JS)
Tabular Data

HTML was origionally developed as a way to share documents between staff at
CERN. A table is a very common way to organize data. The <table> element is
how you "mark-up" tabular data in a web page.
<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

<thead> is an element for the "head" of your spreadsheet / table
<th> a header row (can be thought of as a column name / description)
<td> a cell in a row
<tbody> is an element for the "body" or your spreadsheet / table
<tr> stands for "table row"
<td> is a cell within a row, the text between an opening <td> element and
a closing </td> element is the data you wish to display

Example 02