HTML Quick List

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

Before we get started..

Here are some great tutorial sites:

Basic Terms

FTP: [File Transfer Protocol] A standardized way of sending and getting files from your local computer and a remote server.

HTML: [Hypertext markup language] The basic physical content of a webpage.

CSS:[Cascading Stylesheets] Seperate syntax used to seperate content from how it's presented (colors, fonts, etc).

JAVASCRIPT: Programming language built into browsers for manipulating content in real time (transitions, slideshows, ajax, pop-ups, etc).

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/user/[1st character username]/[2nd character username]/[username]/www/
Public URL:	http://web.mit.edu/[username]/www

My default directory would be...
/ afs / athena.mit.edu / user / c / m / cmalcolm / www

My website is stored at:
http://web.mit.edu/cmalcolm/www

HTML Basic Document

Below is the basic structure of an HTML page, HTML uses a nested tags syntax. a Tag is represented by open tags: <[tag type]> and closed tags: </[tag type]>. Sometimes tags do not have closed tags such as images.

Within a tag you may have attributes to define additional information. An attribute looks like [attribute]='value' and is within the open tag. See below for examples.

<!DOCTYPE html>
<html>
	<head>
		<title>Title of Document goes here</title>
	</head>
	<body>
		Visible text goes here!
	</body>
</html>

To explain above. Typically. to create an html page, You have a doctype tag to tell the browser what type a file it is. Then you have an html tag that surrounds two main components: The head and the body tag. The head tag stores information that is not directly visible to the end user, but instead has reference data (CSS and javascript files) and meta data such as the title of the page. This appears as your tab/window name. In the body, this is where all html goes and is directly visible to user. You can write plain text or html (links, images, etc) here.

If you copy the above code and paste it into a text editor and save as a .html file type..you will be able to then open it into a browser and see the following...

Common HTML elements

HEADING 1", "

HEADING 2

", "

HEADING 3

", "

HEADING 4

", "

HEADING 5

", "

HEADING 6

", "divider_Rich Text", "Bold", "Italic", "Underline", "~~Strikethrough~~", "This is red", "Red background", "Red Border", "Arial font", "divider_Comment", "", "divider_Breaks", "A break tag
Starts a new line!
", "

Woohoo.

Paragraphs.

They can be created with the 'p' tag!

", "Hey there is a horizontal rule

between this", "divider_Organization", "Who dat is?!

Div's are very common.

By default they are block elements,
meaning they claim their own line(s).", "But wait..Span's are also common.
By default they are in-line elements,
meaning they exist inline with other elements.", "divider_Links", " Relative Link", "Relative Link to parent directory", "Relative Link to parent of parent directory", "Relative Link to page
within the folder directory
of this directory!", " Absolute Link (don't use these!)", "divider_Images", "

", "divider_Lists", "

Number 1
Number 2

", "

Item
Item

", "divider_Iframes", " ", "divider_Tables", "

Tableheader	Tableheader
Sometext	Sometext

" ))?>

What is CSS?

Css was created to seperate web content from web styling. It is a seperate syntax inserted before the body tag (generally), to tell the browser how to display your content. So you can make a standard html page look completely different, without editing any of the existing html. Lets say we have this html page.



	
		Title of Document goes here
	
	
		
		Visible text goes here! Here is some content
		
		But here is some content that is special and has been styled differently.
		
		Ok no more special treatment, I'm not styled...becuase i don't have a class! Im just in the container.
		
		Hey look at me Im also in a special box!! There can be multiple elements with the same class.
		And hey don't forget we also have different default links . Hover over this link!
		
	
");?>

By default this would show like this.

But by adding css, which we will go over in the next section, you can completely change how it looks. Below is the result of adding some CSS to the top of the page, but no extra html was added to the body. This seperates the styles from the content.

CSS Basic Structure

With CSS, you specify styles( colors, borders, widths, paddings, etc) by referencing elements in usually 1 of 3 ways.

IDs: One is giving your html object an id attribute. Then with css, you can style that object, using the
#[name of id] identifier.
Classes: Second way is to give your object a class attribute . Then with css, you can style that object, with the .[name of class] identifier. The difference between id's and classes is that Id's are meant for one object and it should be unique. Classes can be shared between multiple objects (like maybe you have a sequence of images with the same class). A single element could also have multiple classes
Plain Elements: You can also override normal elements like the anchor tag or body tag. Here you would just specify the name of the tag, like a for links shown below.

Below you can see some typical css

Using CSS

To use css, you can do so in usually 1 of two typical ways.

1. In document: One way is to place css between a Style tag like below



	
		
		Title of Document goes here
		
	
	
		
			Visible text goes here! Here is some content
			
				But here is some content that is special and has been styled differently.
			
			Ok no more special treatment, I'm not styled...becuase i don't have a class! Im just in the container.
			
				Hey look at me Im also in a special box!! There can be multiple elements with the same class.
				And hey don't forget we also have different default links . Hover over this link!
			
	
");?>

2. Reference File: You can save the raw css in a seperate file ..maybe name it style.css or something and then reference it like a link. This also would be put in the head tag as show below. This would normally be used for css that is shared across multiple pages.



	
		
		Title of Document goes here
	
	
		
			Visible text goes here! Here is some content
			
				But here is some content that is special and has been styled differently.
			
			Ok no more special treatment, I'm not styled...becuase i don't have a class! Im just in the container.
			
				Hey look at me Im also in a special box!! There can be multiple elements with the same class.
				And hey don't forget we also have different default links . Hover over this link!
			
	
");?>