- Basic website structure
- HTML
- CSS
- Markdown
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 browserTCP/IP
: Two protocols, handled by the operating system- Link layer: Thar be dragons
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.
<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">
"Horizontal-Rule": <hr>
"line-break": <br>
<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)
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