Intro to Web Development with HTML/CSS

01: Introduction
UReddit
February 21, 2012

Contents
1 Introduction

2 The structure of a website

3 Structure reflected in code

4 Outline of further material

Introduction

HTML and CSS are the languages of modern websites. For someone with no programming experience or
graphical coding experience, it can be slightly difficult to approach the concept of text translating into a
visual and aesthetic design of the types seen around the web. How does text translate into a two-column
layout or a blog, server-side dynamic programming languages aside? The answer to this question is the focus
of this series of documents.

The structure of a website

Rather than simply listing the syntax of HTML and CSS and giving code for you to try to understand
on your own, lets take a moment to deconstruct the structure of a website and see how it conceptually
correlates with the design of the HyperText Markup Language (HTML) and Cascading Style Sheets (CSS).
Lets begin with one of the pages on the UReddit website.
Look at the image below and try to deconstruct its organization. Look at the discrete sections of the
website, at the text and images within them, the positioning and sizing of the text. Look at the shapes of
the separate areas and note how they are positioned.

There are two horizontal bars that stretch the width of the page at the top, the header and the social
bar. Below that is the main content area, which is divided into two columns; below the content area is a
footer. If we were to conceptually recreate this website, we would likely begin by somehow designating these
content areas. Remember that a computer processes a file, in order, from beginning to end, so, if we were
to create a file containing the appropriate commands, they would be interpreted and synthesized into visual
elements in order. (This principle will not necessarily hold once CSS is used as one can force elements to be
displayed out of order, but ignore that for the moment).
Keeping order in mind, we would create one element, then another, then two more for the columns, and
a last one for the footer. But this isnt enough; what about size? Positioning? We would have to specifically
designate that the second element (the social bar) is below the first (the header), so we would specify that
the first element is to stretch the width of the window and that the second would be below it, not alongside
it. Next, we might designate a main content area below the social bar and then further specify that it is to
be split into two columns. They have different widths, so that has to be specified as well. What about text?
The columns, being the main content area, would have to fit the text we want to display, so we would make
the columns stretch to contain the text within them, as opposed to the two horizontal bars at the top, which
have a fixed height by design. Lastly, the footer is another element at the bottom whose width stretches to
fill the window.
Again considering how a computer processes a file, the text evident in the above screenshot would have
to be placed inside the content areas defined. This goes for the images as well. The spacing between

lines, formatting of text (bold, italic, text size, &c) would logically have to be defined where the text is, as a
computer does not understand human language and can only deal with exactly defined data. For example,
the text in the header is aligned to the right of the header element with some spacing between lines, the logo
is not square with the upper-left corner but is instead placed farther in, class names in the right column of
the main content area are bolded while class descriptions are not, and so on; it makes sense to conceptually
divide the text and images into types and locations and then apply formatting to the categories defined.
Ideally, we would label class names with a marker of some sort and then say that any text with that marker
is bolded (as a simple example).
Without knowing how to program and without opening a text editor, we have conceptually just recreated
not only the website in the screenshot above but also the fundamental principles of HTML and CSS.

Structure reflected in code

HTML and CSS work together to rigorously encode the constructive design process just detailed. A website
is a text document containing HTML code in which blocks of content are programmatically defined and that
have some basic default looks and behaviors, and CSS is the language used to outline how these elements are
to appear - width, height, background color, borders, text size, whether they stretch, and so on. By learning
the syntax of HTML code, we can recreate the above website by appropriately defining the organizational
elements evident, and then style them using CSS in order to end up with the final visual product covered
above. Furthermore, by so dividing organization and style, we can alter details of the final product by
tweaking a couple lines of a CSS file that are applied by the web browser to an HTML element that has
been given a certain name rather than by rewriting the whole website.

Outline of further material

In the following material, we will begin to look at the tools which HTML provides for creating elements of a
web page. Next, we will see how these elements behave and display by default, and then we will investigate
how to style and manipulate those elements using CSS rules in order to create a working visual product.