webMapWorkshop-logo-01

Week 1: Intro to Websites (HTML/CSS)

Welcome to the Web Map Workshop! Our workshop series gets started with two sessions on website basics. This is an introductory tutorial to introduce some of the concepts and fundamentals behind a web page, starting with securing hosting, downloading a text editor, and then moving through the basic building blocks of HTML and styling with CSS. Additional tips, tricks, and next steps, such as adding Javascript, are at the end. This is the first session of the Spring 2015 'Web Map Workshop' series. Let's get started!


Visit the Updated Version of the Tutorial.

Download the Workshop Materials.


1. Introduction

A web page is a document suitable for display and distribution over the internet. At the most basic level, a web page is a text document containing code (often HyperText Markup Language, often shortened to HTML), that is located at a node on the internet. This node is called a 'server', as it serves the file to the world wide web, allowing your computer, the 'client', to access it.

When you sign into a web browser, such as Firefox or Chrome, and input a URL, something like www.mit.edu, into the address bar, the web browser navigates to the node you have specified and requests this document, which it reads, interprets, and displays on your screen depending on the interpretation of the document. This means a couple of things:

  • You need to have a location on the internet you can place your documents.
  • You have to create and place the right kinds of documents in this location.

The focus of this session is the latter, but we will briefly cover the former.

i. Web Hosting

A "host" is the server on which you store your website files and assets, such as stylesheets, images, javascript, and more. You can host your site on almost any computer given you are connected to the internet and have server software. Alot of software packages exist to do this, perhaps the most common is the free and open source Apache server software. Do not download this though. Running a server is alot of work, it must run at all hours of the day, and requires constant maintenance to remain bug free and safe for you and your visitors.

The optimal solution for most users is to use a hosting service that does all this for you. There are hundreds of companies that offer this service, including Go Daddy, Bluehost, and Amazon.

My recommended hosting services are:

Free Web Hosting at MIT with your Athena Account

MIT also offers hosting to community members, free for staff, faculty, and students, through Athena lockers. However, it only supports static sites.

If you are on a laptop, connecting to your Athena locker is easy, but requires a couple of steps. The instructions are found at the following links:

Navigate to your Athena locker and locate your www folder. This is an active folder in which you can serve a website to the internet. In your Athena space, you will see a structure similar to the following. Note the www folder.

www_folder

The www folder can be accessed anywhere on the web by typing http://web.mit.edu/username/www and navigating to your site. This is a great place for a simple homepage during your time at MIT.

ii. File Structure

The next important topic to discuss up front is the file structure. There are often a lot of files located on a server. When you navigate to a website, how does the browser know which file to initially read?

Standard protocol is that a file named index is what will be provided by default when a browser finds your site. This index file must be in the base level of your web folder, and is what users will see when they navigate to your web site. All code for today will be contained in a file we will create and save in our webspace as index.html (note the HTML file extension, indicating the file is written in HTML). The file structure found in my directory looks like the following.

file-structure

You can have supplemental files, such as images, style files, scripts, and other items in your root directory alongside the index.html standing alone or in subdirectories. You can see in my structure I have images for holding images, css for holding style files, and js for scripts. When a browser gets to my files, they will be provided the index.html file.

To upload and download these files from the server, you can use an FTP connected to your hosting space, or drag and drop into your Athena www folder.

iii. Text Editor

While you can get away using a basic text editor to create HTML files, there are text editing software programs designed to make your life easier by color coding code snips and autocompleting lines. Download and install one of the following text editing softwares if you don’t already have one. In this workshop, you will use one of these to edit and write HTML, CSS, and Javascript.

  • Sublime Text – (Windows, Mac, or Linux) One of the most popular and well-loved text editors around. Free to download and use, but will occasionally show a pop-up window if you don’t purchase it. This is what I’ll be using during the workshop
  • Brackets – (Windows, Mac, or Linux) A newer, free open source code editor.
  • Notepad++ – A solid and reliable text editor for Windows. Free.
  • TextWrangler – A free text editor for Mac only.
  • DreamWeaver – Adobe’s software for making basic websites. This is not free generally, but many MIT students already have it installed. This software can sometimes make simple tasks far more complicated than necessary. Not recommended, but if you already have it and you don’t want two install anything else, I will grudgingly acknowledge that it will work just fine for the workshop.

Enough front matter, let's get going on our web page!


2. Basic HTML

All the files we want to use today are provided in a zip file located at the link below. To get started:

  • Make a folder on your computer that you can use for the workshop. This folder will be your workspace and all files can be saved here. Call it my_first_webpage.
  • Download the workshop materials here, unzip them, and put them in your special folder.
In the next steps, we will create a blank document, fill it with HTML code, save it as index.html, and view our results in a browser.

i. Create a Blank Document

In your text editor, open and create a new blank document. Signify that the document will be written in HTML by adding the following line at the top of your file.
<!DOCTYPE html>
This is called a tag. HTML tags are keywords surrounded by angled brackets. This tag states for the browser that the rest of your file will be written in HTML. The rest of our document will follow a very simple rule, no matter how complex the code. When you write a tag (aka start tag), you will need a second tag that declares the end of that part of the document (aka end tag). Content goes between the start and end tags. A start tag looks like and an end tag has a dash in front of it . Conceptually, you will write the following.
<tagname>Content...</tagname>
For our page, since it is in HTML, we have to put everything in an tag. Do this with an html start tag. Copy and paste the following into your document, and we will walk through this.
<!DOCTYPE html>
<html>
<!-- we need to put everything inside of an html tag. -->
<!-- What is this thing?! This is a comment! it doesn't do anything and allows me to write secret notes to other people who look at the html document. This is just our little secret note. -->
<head>
	<!-- Generally speaking, the head part of an html document is for information about this document. the body is for the content you want to show. -->
	<title>HELLO MY NAME IS HTML</title>
	<!-- the "title" tag is the thing that is displayed on the tab, and it's what a bookmark to this page will be named by default. -->
</head>
<body>
	<!-- The Body. This is the sweet spot. This is where our content will go! Whatever we want to display. -->
</body>
</html>

The head section contains information about the document, we have included the title tag. This contains the page title that appears in your browser tabs. Additionally, just to help out, we threw a couple comments in here to assist you. Comments are very useful and help people read your code.

The body is where the magic happens, this is where we will place the vast majority of our website content. Finally, we end the document with our html end tag

Save you file to your special folder. Call it index.html, making sure that html is the file extension.

ii. Add Text

Our HTML document is looking bare, we need to add content. We can start by adding a heading that welcomes visitors to our site and a couple simple paragraphs. Working between the body tags, add the following lines.

<h1>Welcome to my Webpage!</h1>
<p>This is my first webpage! I created it during IAP 2015.</p>
<p>This is my second paragraph. So much things.</p>

The h1 tag signifies a heading, this is a bolded style of text that vary in size ranging from h1 to h6. The p tag signifies a paragraph that can contain large blocks of text. Save your file, and refresh/open it in your browser. You should see a simple web page with three lines of text.

page-is-up

iii. Add a Link

Adding a link to your site is simple. To add a link, we use the a tag. The a tag defines a hyperlink that can be used to link from one page to another. HTML tags can have attributes. Attributes define and provide additional information about an element. To create a hyperlink, we use the href attribute of the a tag. The following line contains a link to the DUSP home page, and illustrates how you would set up a link. You can place links separate from your paragraphs, or place them within. Write the following line of code at the end your second paragraph, just before the p end tag.

<a href="http://dusp.mit.edu">Take me to DUSP.</a>

Note the use of quotations around the target web address, and the closure of the a tag at the end.

Save your file. View it in your browser to test your link. Note a link has been appended to your last paragraph.

iv. Add an Image

Adding an image is just as easy as adding a hyperlink, although a bit different. An image is not stored on your webpage, but it sits on your server, just like your other files. When you display an image in an html file, you are linking to the image. The HTML tells the browser to locate and display it. Therefore, we will follow a multiple step process.

  • Create a folder named images in your special folder. You only need to do this once, you can place all subsequent images here.
  • Copy and paste cat.png from the downloaded materials into the images folder you just created.
  • Use the img tag to link to that image in your index.html

Your file structure, once the images folder is created and you have copied cat.png. In other words, the image is now being served.

file-structure-images

Now we can add the image to our index.html. The following line of code uses the img tag, and then links to our image. We will use the src attribute to name the source of the image. The image is coming from our own server, we don't need to go externally to get it, so we can put the name of the folder and image as our image address.

Copy and paste this following line in between the body tags in your index.html, after your last paragraph.

<img src="images/cat.png"/>

Note: image is a special tag, known as a void element. This means the end tag is incorporated right into the start tag. Take a look at our syntax and note where the end tag is located.

At present, you document should look like the following.

<!DOCTYPE html>
<html>
<!-- we need to put everything inside of an html tag. -->
<!-- What is this thing?! This is a comment! it doesn't do anything and allows me to write secret notes to other people who look at the html document. This is just our little secret note. -->
<head>
	<!-- Generally speaking, the head part of an html document is for information about this document. the body is for the content you want to show. -->
	<title>HELLO MY NAME IS HTML</title>
	<!-- the "title" tag is the thing that is displayed on the tab, and it's what a bookmark to this page will be named by default. -->
</head>
<body>
	<!-- The Body. This is the sweet spot. This is where our content will go! Whatever we want to display. -->
    <h1>Welcome to my Webpage!</h1>
    <p>This is my first webpage! I created it during IAP 2015.</p>
    <p>This is my second paragraph. So much things. <a href="http://dusp.mit.edu">Take me to DUSP.</a></p>
    <img src="images/cat.jpg"/>
</body>
</html>

Save your index.html. Refresh your page in your web browser. Your page, with our content, should look something similar to the following.

webpage-cat

More resources to continue learning about tags, elements, and attributes are found at the end of this exercise.


3. Styling

Now we have a web page, but it is not very fancy. Styling your web page is a large part of web programming. In this next session, we will style our web page.

Using the div Tag

The div tag defines a division or section of an HTML page, and can contain many nested elements. The div tag is an element of HTML that allows you to group content into containers (or divisions) you can organize and style on your web page, and divs play nicely with CSS (Cascading Style Sheets). CSS is a style sheet language used for describing the look and formatting of an HTML page, we will introduce it in the next step.

i. Place our main body content in a div called wrapper

To illustrate the usage of a div, we are going to add two simple lines to our web page. These lines will not outwardly change the appearance of our page immediately, but will lay the groundwork for styling in our following steps. In practice, what we are doing is creating a subdivision of the body, making it easier to style only specific elements of the HTML body, rather than the whole thing. You can include many divs on a webpage.

  • i. Add the following tag in the first line after your initial body tag.
<div id="wrapper"/>
  • ii. At the end of the body, right before the tag, add the following line to end the div element.
</div>

Your body session will look something similar to the following. Note how all the body content is within the div tags.

<body>
   	<div id="wrapper">
        <h1>Welcome to my Webpage!</h1>
        <p>This is my first webpage! I created it during IAP 2015.</p>
        <p>This is my second paragraph. So much things. <a href="http://dusp.mit.edu">Take me to DUSP.</a></p>
        <img src="images/cat.jpg"/>
    </div>
</body>

ii. Styling Elements: Introducing CSS

As mentioned above, Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of an HTML page. We are going to be using CSS3, which is the third iteration of the CSS styling language. CSS is a very useful styling system, and allows you to style items on your page according to a number of methods based on the element it falls within (ie div, body, p, etc), the id of the element, or the class of the element.

Why 'Cascading'?

The language 'cascades' in the effect that if you style an element, any nested elements will get the same styling unless you specify otherwise. For example, if you set the font for your body element, a p (paragraph) will also be set to the same font, unless you specify specifically in the CSS that you want that p to have another font. This is a useful method in that is minimizes the code you need to write and forces you to be careful with your page organization. We will explain what we are doing as we go through the next steps.

a. Add style tags to your code

Start adding style by adding the style tags to your HTML code. CSS essentially extends HTML, so it works nicely. Add the style tags to the head section of your code, not the body. We do not include the style code as content within our website body.

In your heading, after the title tags, add the style start and end tags, on different line. Our code will go within these tags.

<head>
    <title>HELLO MY NAME IS HTML</title>
    <style>
        // Our style code will go here.       
    </style>
</head>
<body>
    ...

How is CSS formatted?

We are going to add our CSS code between the style tags we just added to our HTML document. CSS is formatted in a very specific manner. The tag is signified, followed by placing the style definitions in brackets. The tag is called a selector. Your CSS code, on a conceptual level, will look like the following, where selector signifies the element in your HTML, property is what within that element you are stying, and value is how you are styling that property.

selector {
    property: value;
}

Selectors (or page elements) can be tags, ids, titles, classes, etc. For example, if we want to style everything that falls between the body tags on our page, we would write the following using the body selector:

body {
    property: value;
}

More on Selectors

Selectors are the page element. As above, if we want to select our body page element, we use body as our selector, then we specify our properties and values.

  • A selector with no pre-characters signifies a tagged element in our HTML.
  • A # before a selector indicates that the selector is an ID.
  • A . before a selector indicates that the selector is a class.

A Selector reference is located here:

Properties and Values

There are hundreds of properties you can set using CSS. Some of these include font, color, location on page, opacity, size, etc. An extensive list can be found in CSS reference documents. Two prominent references are by W3Schools and Mozilla, check them out for further reading.

In the following steps, we will detail a couple of these properties for the various element we have created on our page.

b. Style font and type size

To begin our styling, lets change our font and type size. If we want to change the font for all of our document, we change it on the highest level we can by signifying we want to style everything within the html tag. To do so, in between the style tabs we just added, add the following code.

html {
  font-family: Georgia, Times, serif;
  font-size: 24px;
  line-height: 32px;
}
What does this do?
  • html: Tells us that we are styling everything within the html tags.
  • font-family: Prioritizes a list of font family names for the selected element.
  • font-size: Specifies the size of the font.
  • line-height: Specifies the minimal height of line boxes within the element..

Click save once you have this in your code between the html tags. Be very careful with semi-colons and colons! You must end every property and value styling with a semi-colon. (;)

styled-fonts

Note how we have styled our fonts!

c. Change link color

On our webpage, we have a link we created above to the DUSP homepage. By default, HTML links are blue and underlined. Using CSS, we can change this to be what we want! In order to do so, we write up a CSS code block that modifies the properties of the a tags in our document. Remember, per above, the a tags signify where we have links.

Add the following snippet into our style tags, after and separate from the html styling we just completed.

a {
  color: orange;
}

Save your file and refresh your page. Note that the link color changes.

color-orange

To read more about the values you can set for color, check out the CSS Color Reference Guide.

Pseudo-classes: change link color on Hover.

In CSS, elements have what are called pseudo-classes. Pseudo-classes are keywords added to selectors that specifies a special state of the element to be selected. Let's demonstrate.

After the a element we just added to our style sheet, add another a tag, except signify this one as a:hover. This will tell the browser how to display the a tag when we hover over it with our mouse.

a:hover {
  color: red;
}

Save your file and refresh your page. Your link will now turn red when you hover. More on pseudo-classes is found here:

CSS Hover Reference

Our stylesheet so far. Note what each of these did to the elements of our page.
html {
    font-family: Georgia, Times, serif;
    font-size: 24px;
    line-height: 32px;
}

a {
    color: orange;
}

a:hover {
    color: red;
}

d. Adjusting element size and location properties

To begin to demonstrate locating items on the page, let's style the paragraph elements (p elements). We have two of them on our page, right now lined up left justified on our page. Here we will introduce locational properties such as width and height, margin, padding, and float. Copy and paste the snippet of code below in between the style tags, after the styled a elements.

p {
    background-color: #dddddd;
    padding: 20px;
    width: 320px;
    margin: 10px;
    float: left;
    // float allows us to flexibly stack items
    // in multiple columns
}

The following graphic depicts what we these properties do. The blue area is the element:

padding-width

Here is a walkthrough of what these selectors are doing.

  • background-color: Changes the background color of the page element.
  • padding: Settings the padding distance around the element.
  • width: Sets the width of the element, in pixel or percentage of page.
  • margin: Sets the margin distance for the page element.
  • float: Allows us to flexible stake content in multiple columns. Floats to the left of the screen.

Save you document and refresh your page.

p-style

We've given a little styling to our paragraph text, and set where they will fall on the page.

e. Importing a Stylesheet

We've now done a bit of styling of our web page. You can see, as you add styles, the code quickly grows. Sometimes it can be most efficient to keep your CSS code in another document, and then import it into the HTML. This allows you to edit the CSS outside of the HTML document. A line of code in the head section of the page that includes the path to your stylesheet with accomplish this. There is a file in your downloaded materials called style.css that contains a couple more lines of CSS code we want to include in our document. Let's add that document.

  • In the downloaded materials, locate style.css and put it in the same folder as your main index.html document.
  • Place the following line of code in the head section of your document. Make sure it is outside of the style tags. This line tells the browser to read the style.css file as if it were part of the document, styling the elements.
<link href="style.css" rel="stylesheet">

This link provide the link to the style document. Save and refresh your page. View the new page, then look at the style.css document.

Content of style.css

The style.css file contains the following block of code. Look through and observe the selectors, their properties and what the values do to our page. Note that the h1 (heading) is styled, our img (cat image) is given a size and location, and our div with the id of wrapper is styled.

The selection for wrapper is the id of the div we created earlier, and is formated #wrapper (the format for ID selectors is #id)

>#wrapper {
  margin: 0px auto;
  width: 800px;
  background-color: #eeeeee;
  padding: 20px;
  overflow: auto;
  // necessary for "clearing" the floats
  // contained within
}

img {
    padding: 20px;
    width: 320px;
    margin: 10px;
    float: left;
}

h1 {
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 24px;
}

Save and refresh your page.

my-webpage

Make it a portfolio!

Add a couple more images to your page by using the img tag introduced above. Because it is styled in our CSS by the img selector, they will already be styled. In your workshop materials, you will find two images, one called boston.jpg and the other mit.jpg. Add them to your page! The code will look like the following:

<img src="images/boston.jpg"/>
<img src="images/mit.jpg"/>

Save and refresh your page.

4. Our web page.

portfolio-finish

The code

The completed HTML code for everything we have just completed is located in your download materials as sample.html. Download it to help troubleshoot problems you might be having.

This exercise just led us through setting up this basic static webpage. This is the tip of the iceberg, you can continue to add elements, images, links, and stylesheets until you have reached a satisfactory design.

5. Additional Tips and Tricks (and Links!)

A couple links, tips, and tricks for the road.

1. References are your friend. No one is expected to know all of the syntax, the more you code the more you will become acquainted with the code reference guides. As mentioned above, here are some good references:

HTML CSS

2. Work through more online courses and tutorials. There are a number of great resources online. You can find a list of these on the following page on the DUSPviz website: Coding and Development

3. Take advantage of in-browser developer tools. Google Chrome and Mozilla Firefox offer great tools for developers to get in and explore websites and learn to code. These tools allow you to examine existing websites, view code, and even temporarily change items in the HTML and CSS. Read more here:

4. Add additional functionality and interaction with Javascript. HTML5 and CSS3 provide a high level of functionality, and can be expanded upon by incorporating Javascript into your code. Javascript is scripting language that allow for rich application building. It is beyond the scope of this tutorial, but links to learn Javascript can be found on many of the tutorial sites on the DUSPviz Coding and Development page.

5. Use existing templates. Many templates and libraries exist with many pre-coded components. We will focus on these in the next session! Using these can be a great way to learn. Grab a template and customize the CSS. A great one to start with is Bootstrap. Download a template and customize the code.

6. Use a Content Management System. You might not need to code everything! Coding websites manually is alot of work and require alot of knowledge on code and web structures. If you have alot of material that is constantly being updated, the best solution is use a Content Management System, which is a prebuilt interface you can customize and make your website more accessible to non-coders and other colleagues. Examples of popular Content Management Systems include Wordpress, Drupal, and Joomla.

Go forth and make awesome websites.

Next week: we will continue working with websites, looking at how we can grab code that has already been written to help us make our website. The next session will focus on Bootstrap, a common web framework, and how you can start to customize it into something you can effectively use.

A special thanks to Ben Golder for providing inspiration and materials for this workshop!



Return to Web Map Workshop homepage Return to DUSPVIZ tutorials webpage