webMapWorkshop-logo-01

In the following steps, we are going to create a website. To do so, we'll create a blank text document, fill it with HTML code, save it as an HTML file, and view results in our browser. In Part 1, we will cover the basics of using HTML to structure our web documents and CSS (Cascading Style Sheets) to style them.

HTML stands for HyperText Markup Language, which creates a structure to hold the content of your webpage; it does this using what it calls elements.

Getting Started

Organize your Directory

It pays to think about the structure of your website up front; a messy file structure begets messy code. A web directory should be organized in the following basic manner. This is simplified, you will find like assets separated into folders.

File Structure

File Structure

When a browser requests your page, your server will return the index.html file stored in the root directory (i.e., the directory that holds all of your other directories). You can think of an index.html page as a landing strip that the majority of the web traffic headed towards your site will be directed towards.

Use a Text Editor

Write all of your code using a text editor such as Atom. To complete the exercise, you will want to edit the files in the web folder using Atom. All CRON computers have Atom installed; you can also install it on your personal computer (I recommend doing so). Atom is a free and open-source text editor with an increasingly well-developed library of extensions, and that is comfortably integrated with Git and Github (it was developed by the latter). As will all good text editors, it supports syntax highlighting for a wide variety of languages. This will make your code far, far more readable.

Note: Never, ever edit code using a Word Processor (Word, Pages, LibreOffice Write); these will append an enormous amount of metadata and styling information to your document, which will prevent it from running as a script or a predictably structured web document.

HTML/CSS

HTML: The Core Concepts

Let's get started! Create a new blank text document in Atom and save it as index.html in your folder. The following introduces the core concepts behind HTML.

All HTML documents start with the following line of code:

<!DOCTYPE html>

This tag is a way of giving your browser an explicit heads up that it should expect to be interpreting and displaying HTML.

HTML is a markup framework language and is the lingua franca of the internet. You can think of a markup language as a way of imposing structure onto content, which allow you to style and interact with your design in a predicable way. While, in recent years, it's become more and more common to develop websites in Python (using a framework like Django) or Ruby (using a framework like Rails), these and other frameworks ultimately sent documents to your web browser as HTML.

Content in HTML is always organized into elements, which can then be filled with content, made interactive, and styled.

<element>Content goes here!</element>

A void element. Some elements are contained in one tag, such as images. These elements are called void elements.

<element />

A comment. Comments look like the following. They are used to write human-readable notes in your code, but are ignored by the browser.

<!-- This is a comment -->

A basic page, all together, will generally look something like this.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Hello World</title>
        </head>
        <body>
            <!-- This is a comment -->
            <h1>Hello World</h1>
            <div id="main">
                ...
            </div>
        </body>
    </html>

Copy and paste this code into a blank text document in Atom, and save it as index.html in the directory you'd like to serve as the (local) root directory of your website. This will now become the main page for your big-data page on your website.

As long as you're not doing anything sophisticate (for example interacting with databases to dynamically generate content), you can simply open an HTML file from your Desktop and it will behave as it would if it were on the internet.

The Document Object Model (DOM)

To help us organize the elements, we use something called the Document Object Model (or DOM). The Document Object Model represents the hierarchy of elements in our page. More than that, though: it is also serves as an interface that allows programs and scripts to dynamically access and update the content, style, and structure of the page.

You can diagram the HTML DOM Tree, and it consists of our HTML elements.

The DOM Tree

DOM

DOM

High-Level Structure

The <html></html>, <head></head>, and <body></body> elements are large containers that are present in every HTML file. They provide the highest-level structure for our document, separating metadata, stylesheets, and linked scripts from the body of our page.

<html lang="en">
        <!-- HEAD element containing meta information, style, and links -->
        <head>
            ...
        </head>
        <!-- BODY element containing all document content elements -->
        <body>
            ...
        </body>
    </html>

Links and images are referenced using the <a></a> and <img/> elements, respectively. Note that the <img/> tag is a void element - where most HTML tags require an opening and a closing tag, a single <img/> tag is sufficient to delineate a complete image element.

<!-- LINKS. A is used to define a hyperlink. The link url goes in the href attribute and the link text goes in between the tags. -->
    <a href="http://somesite.www">...</a>
    <!-- IMAGE tag to define a link to an image in your document. The location of the image is specified using the src attribute. -->
    <!-- It's a VOID ELEMENT -->
    <img src="someimage.png" />

Paragraphs and Spans

We can create paragraphs, conventionally containing longer blocks of body text, using the <p></p> element. We create groups of inline elements (multiple elements that should appear on the same line) using the <span></span> tag.

<!-- PARAGRAPH tag for large blocks of body text -->
    <p>...</p>
    <!-- SPAN is for groups of inline elements -->
    <span>...</span>

Lists

Lists are useful for itemized information.

<!-- UL defines an unordered list -->
    <ul>
        <li>...</li> <!-- line in list -->
    </ul>
    <!-- OL defines an ordered list -->
    <ol>
        <li>...</li> <!-- line in list -->
    </ol>
    <!-- A Description list, useful for pairing terms with definitions-->
    <dl>
        <!-- term -->
        <dt>Coffee</dt>
        <!-- description or definition -->
        <dd>Hot delicious drink.</dd>
    </dl>

Ordered lists can have a number of different styles:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

DIV Tags

One of the most common tags (and one of the more difficult to grasp, initially) is the <div></div> tag. This tag is used to separate out a division or section of an HTML page. One page can contain many such elements, and they can nest endlessly. It doesn't have any inherent form, meaning that it is used to group content into containers (or divisions) that are styled and placed using CSS (Cascading Style Sheets). CSS is a styling language used for describing the style of an HTML page. We will introduce it in the next step.

<div id="main">
        <!-- Content goes here -->
        ...
    </div>

Attributes, Classes, and IDs

Tags are specified and defined using attributes, classes, and IDs. These attributes, classes, and IDs allow you to identify specific elements, modify individual elements and groups of elements, and set the characteristics of the elements.

  • Attributes specify properties of elements. Elements can have multiple attributes. For example, a link (<a></a>, remember?) will can include an href = "" that specifies the link destination alongside the attribute target = "_blank" which instructs the web browser to open the link in a new tab.
  • Class is a special attribute that identifies a group of elements that operate similarly or work in the same fashion. These are specified using the class = "classname". The advantage of this is that you can efficiently specify the same style or behavior for many elements.
  • ID is an attribute that identifies unique features. In other words: if you specify id = "specialthing", there should be no other elements with the id specialthing. Each ID should be unique. This allows you to specify operations and styles that are unique to that feature.
<a href="http://www.github.com" class="button" id="unique">...</tag>

Modify Your index.html

Add Text

Our HTML document is looking bare, we need to add content. We can start by modifying the heading that welcomes visitors to our site and adding a couple of paragraph elements.

Modify the HTML code on the page to include the following. Add some paragraph p elements within the div element of your page. Give them classes and IDs.

<h1 id="headtext">Body Heading</h1>
    <p class="my_paragraphs" id="foo">This is my first paragraph.</p>
    <p class="my_paragraphs" id="bar">This is my second paragraph.</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. To view a full list of elements available, view the MDN Element Reference.

Adding a link to your site is simple. To add a link, we use the a tag. 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>

You have many options for links. Read about them here. For example, as we mentioned above, you may want your link to open in a new browser tab. Do this using target="_blank" as a property of the A tag.

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.

  • Locate the folder named images that you copied to your web directory. You will find one image here named cat.jpg. Here you store all subsequent images you want to use in your page.
  • 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.jpg. In other words, the image is now being served.

file structure

file structure

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.

If you want to add an image from another page, you can simply include the URL at which the image is located. The following links to an image on Wikimedia.

<img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Liberty_Bell_2008.jpg" alt="Liberty Bell" height="100" width="100"/>

Our Code

At present, your document will look something like the following.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Hello World</title>
        </head>
        <body>
            <!-- This is a comment -->
            <h1>Hello World</h1>
            <div id="main">
                <p class="my_paragraphs" id="foo">This is my first paragraph.</p>
                <p class="my_paragraphs" id="bar">This is my second paragraph. <a href="http://dusp.mit.edu">Take me to DUSP.</a></p>
                <img src="images/cat.jpg"/>
                <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Liberty_Bell_2008.jpg" alt="Liberty Bell" height="100" width="100"/>
            </div>
        </body>
    </html>

Our page, with this code, contains a bit more content now.

Our page is a little dull though, let's start with some styling.

CSS: The Core Concepts

Cascading Style Sheets

Cascading Style Sheets (CSS) is a styling language used for describing the look and formatting of the elements in an HTML page. It uses the DOM as the way it interfaces with the elemebts, and styles 'cascade' from higher elements in the DOM tree to elements further down.

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 (ie #main, #myimg, etc), or the class of the element (ie ..

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.

CSS can be added to style your website in one of a few ways. You can apply CSS to individual elements, embed it within your HTML document, or create a separate CSS file and link it to your HTML doc. In your file, add the following link in head section of your document.

<link href="css/main.css" rel="stylesheet" />

Save your document, and refresh your page. Everything should center. This is because we applied CSS code to our document by linking to our style file.

In the materials for this week, locate the file 'main.css'. This is our stylesheet. We can name it anything really, as long as it has the CSS file type. Open this in your text editor to view the contents. It is a very simple bit of CSS that tells everything in the body element to center in the page.

body {
        text-align: center;
    }

All content in the body tag are now in the center of the page.

Basic Syntax

Basic CSS syntax looks like the following.

[selector] {
        [property]: [value];
    }

Selectors are page elements, and can be tags, ids, titles, classes, etc. For example, if we want to style everything that falls in the body tag, we use the body selector as above.

Selectors can be specified by element:

p {
        font-size: 12;
    }

Styling by Class

We style by class using the .classname syntax as follows:

.my_paragraphs {
        background-color: #1d1230;
    }

This will style any elements (paragraphs or otherwise) that include class = ".my_paragraphs" as an attribute.

Styling by ID

We style by ID using the #idname syntax as follows:

#foo {
        color: #ff0000;
    }

    #bar {
        color: white;
        background-color: red;
    }

Because IDs are unique, these will style the one element with the corresponding ID (in this case, id = "foo" and id = "bar").

Inheritance and Order of Operations

CSS follows the DOM model, with styles applied to elements higher in the DOM applied to those that are descendents. If selectors are defined in multiple locations in your CSS, which one gets precedence?

There are two general rules of thumb.

  • CSS defined last in your document will supersede CSS set on a selector earlier in your document.
  • The more specific selector will override the less specific selector. For example, a style set on the body selector will be overridden by a style set on an element within the body, such as one by ID.

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.

Style Font and Type Size

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. This can be accomplished by adding the following selector and properties to the stylesheet. Because this is modifying the HTML tag, it will be a very general application of style. To help keep us organized, put this at the top of the document!

html {
      font-family: Georgia, Times, serif;
      font-size: 24px;
      line-height: 32px;
    }

Font family prioritizes a list of font names for the selected element. Line height specifies the minimal height of line boxes within the element.

Looking for some good fonts and colors, visit this Design page on DUSPviz

Change Font Color

Colors can specified using hexadecimal values, RGB values, or a set of preset supported color names. I find it helpful to use a utility like Adobe Kuler to locate a color I like.

These are three ways of making my font red:

#foo {
        color: #ff0000;
        /* color: rgb(255, 0, 0); */
        /* color: red; */
    }

Change Background Color

Adjust the color of an element using background color.

.my_paragraphs {
        background-color: #1d1230;
    }

Change link colors using the following.

a {
      color: orange;
    }

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. We signify a pseudo-class using :. For example, one pseudo-class is hover, and it signifies what happens you hover over an element. This can be used to change the color a link turns when you hover over it.

a:hover {
      color: orange;
    }

Chaining

To find selectors that are nested within other selectors, you can use the concept of chaining. Chaining is how we identify multiple ids, classes, and selectors.

.my_paragraphs a {
      font-size: 18px;
    }

Read more about it here.

Developer Tools (Chrome/Firefox)

Modern web browsers have powerful developer tools that let you manipulate and interface with webpages you have navigated to. This is a really handy tool for testing out CSS changes and modifying properties, or just seeing if the page you are working on is operating correctly.

To access them, right click on an element in the page, and select Inspect Element.

A window will pop up in your browser, and you can edit the code!

Fun Task - Go edit the headlines on NY Times, and change up the fonts, sizes, and colors.

The Box Model: Size and Positioning

Every element in your document is represented by a box. These boxes allow you to set properties such as margins around items. You can check out the box model in the Developer tools.

  • Padding - The content is surrounded by the padding area, exists between the content and the border.

  • Border - Every box has a border that exists on the outer edge of the padding area.

  • Margin - Margin defines the distance between the element and neighboring elements. Margin never has color.

  • Dimensions - Controls the height and width of the elements.

You can also adjust the margins, padding, and border individually on each side of the element. And example element, along with its styling, is below. Add this to your CSS stylesheet and save to see how it changes our basic webpage.

p {
        padding: 20px;
        width: 320px;
        height: 40px;
        margin-left: 50px;
    }

Positioning

Positioning your element can be one of the trickier parts of working with CSS. There are a couple of ways you can position items.

Value Description
static Default value. Elements render in order, as they appear in the document flow
absolute The element is positioned relative to its first positioned (not static) ancestor element
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element.

Another available property is called is float. Float can be used to wrap text around images.

#bar {
        float: right;
    }

CSS is the way you style your page, learn more by referring to the references, or playing around in a sandbox such as CSS Desk.

For your reference, here are some CSS resources.