Web and Interactive Design



To understand web design, I want you to think of the work of art by Joseph Kosuth entitled, “One and Three Chairs”. Here is an image of the piece. As you can see we are presented with three different ways of representing a chair: verbal, physical, and a photograph. Which one is the real chair? All of them? Are they the same thing? Web design is very similar.



First, we have general content, such as what we see in this handout. There is basic type and images and it flows with no interruptions. Secondly, we have the information that we see in our text editors. We’ll be using screen shots from Brackets for this. As we can see on the screen, the text editor allows us to see the hidden information which, in turn, styles our content to look as we see it in its third permutation: via a browser from our computer, tablet or phone. The content is exactly the same way across each way of looking at it.

So let’s jump right in and talk about HTML, elements, tags, and very basic CSS.

HTML stands for hypertext markup language. HTML allows us to use hidden elements to communicate with your browser to tell it how it should display the content that is being used. HTML is essentially the structure of your website. HTML, in and of itself, does not look very appealing, as we can see here. It essentially just gets the information onto your browser with the proper elements and tags attached. So that leads us into the next point. What are element s and tags?

If you are looking at the Brackets screen shot version of this presentation, you’ll notice that peppered throughout the text are these funny looking abbreviations sandwiched between two arrows. These are called elements or tags. Essentially, this is markup language. These hidden characters give us the flexibility to change the characteristics of any image or piece of text. Tags more often than not come with an opening and a closing. It works like this: when you open a tag, you are telling the browser that everything that follows will take on the characteristic of that tag. Let’s take a look…right here I’m going to add a bold tag and everything that comes after it will be bolded until I decide to close it, which I will do right….there. Let’s look at some examples of basic tags.

Tags

Headers



Header tags are default tags which control the size of the text within. Usually these come in six different varieties ranging from "h1" to "h6". Below is a list of the six header tags, formatted within an unstyled list.

  • Header 1

  • Header 2

  • Header 3

  • Header 4

  • Header 5
  • Header 6


Paragraphs



Paragraph tags define the body copy of any bit of text. This sentence, as are all of the sentences, are wrapped in paragraph tags. A break tag is gives us line breaks inside of paragraphs.

I prefer to use one opening "p" tag and instead of closing each paragraph with a closing

tag and reopening again on the next line, to just use
tags. Unlike many other tags, you do not have to close the "br" tags. They are stand alone tags. Also, the more you use...




the more space you get in btween elements.

The bold and italic tags are pretty self-explanatory. They allow us to bold and italicize any bit of text.

Here's some super important text that has been bolded.

Here's some fancy text that has been italicized.

Horizontal rules




Whoa! That cool thing was a horizontal rule. Similar to the "br" tag, it is a standalone tag that allows make a horizontal rule on the page. This rule will span the entirety of the containing structure.


Now you might be asking, why is this page so ugly? All of the text is default, it spans the entireity

When we are creating HTML pages we use containers called divs which is short for divisions. Divs allow us to compartmentalize areas of a web page in sections so that we can create rows and columns. Today, with responsive design, there are many, many structural systems that we can use such as Bootstrap 3 and Skeleton which allow us to create websites that behave differently across many different types of devices… more about that late. For now, let’s try to make some basic structure on the page. Think of this as a Russian doll. We will have one very large container with smaller containers inside of that and so on. I’ve placed a div called wrapper into our page which contains everything. I’ve also created smaller divs which fit inside of those called “third” and “box”. More on that in a second. So, at this point, we’ve fleshed out a very basic HTML page. Obviously, it looks pretty boring and static. HTML allows us to get the information into our browsers with some basic hierarchy, but In order to make this look like an actual web page, we need to add something called CSS or a cascading style sheet. CSS is style sheet which assigns rules to HTML elements. For instance. We have an “h1” tag. As it stands, it is purely default. What if we want to change the color or change the size of it? We can do this by assigning styles to that tag so that when it displays we see the “h1” element, but with new color or as a different size.