HTML Quick List


HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

**(This Box indicates what the code does)**

Before we get started..

Here are some great tutorial sites:

FTP Settings

**FTP (File Transfer Protocol) is how you transfer your website from your computer to MIT's server

You can download an FTP program, Fetch (OS X) or SecureFx (Windows), from MIT by clicking here

For more in depth, you can also check out the 'how to upload' pdf tutorial

The web settings are as follows:

Hostname (Server): ftp.dialup.mit.edu
Username: [KERBEROS USERNAME]
Connection type: SFTP
Password: [KERBEROS PASSWORD]
Default Dir: /afs/athena.mit.edu/

Your folder is usually located in the filesystem as follows:
/ afs / athena.mit.edu / user / (first letter of your user name) / (second letter of your user name) / (your user name)

Mine would be...
/ afs / athena.mit.edu / user / c / m / cmalcolm / www

Your website is stored at:
http://web.mit.edu/[username]

HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here...
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

HEADING 1

<h2> . . . </h2>

HEADING 2

<h3> . . . </h3>

HEADING 3

<h4> . . . </h4>

HEADING 4

<h5> . . . </h5>

HEADING 5

<h6>Smallest Heading</h6>

HEADING 6

Text Elements

<p>This is a paragraph</p>

This is a paragraph

This is a paragraph

<br> (line break)
There is a break
in this sentence
<hr> (horizontal rule)



<pre>This text is preformatted</pre>
This text is preformatted

Logical Styles

<em>This text is emphasized</em>
This text is emphasized
<strong>This text is strong</strong>
This text is strong
<code>This is some computer code</code>
This is some computer code

Physical Styles

<b>This text is bold</b>
This text is bold
<i>This text is italic</i>
This text is italic
<u>This text is underline</u>
This text is underline
<span style='color: yellow'>This text is yellow</span> and <span style='color: green'>this is green</span>
It is best to use actual hexidecimal color codes instead of color names...i.e. #FFFF00 would be yellow. #00FF00 would be green.
This text is yellow and this is green

Links

Ordinary link (Absolute):
<a href="http://www.example.com/">Link-text goes here</a>
Link-text goes here
Page link (Relative):
<a href="anotherPage.html">Link-text goes here</a>
Its important to use relative sites when your linking to your own pages, just in case you site gets moved!
This would be a page in the same directory
Image-link: <a href="http://catsticker.com"><img src="images/dancing-cat.gif" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>

A named anchor:
<a href="#top">Jump to the the Top</a>

Jump to the the Top

Unordered list

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Ordered list

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
  1. First item
  2. Second item

Tables

<table border="1">
  <tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
  </tr>
  <tr>
    <td>sometext</td>
    <td>sometext</td>
  </tr>
</table>

TableheaderTableheader
SometextSometext

Iframe

<iframe src="http://mit.edu" width=480 height=200 ></iframe>

Entities

&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from a source.
</blockquote>