# data[].attributes.body
We will be learning how to write our site’s structure with HTML. We will use a basic template to imitate throughout this lesson.

If we were to compare the web design process to a building the HTML would be something like the building’s foundation and framing; it’s the base from which everything else is built.

# data[].attributes.body
We have mentioned HTML a lot in this class already, but haven’t yet talked about what it is exactly, other than a “super cool secret language”. The web is all about languages and communication, and HTML is an important part of all this.

HyperText Markup Language, HTML, is a language that marks up a site’s content for a browser to understand and display. It gives structure to a regular ol’ text file that a browser would otherwise not be able to read.

# data[].attributes.body
For example, we can’t type up a paragraph in our text editors and expect a browser to just know it’s a paragraph. The paragraph text has to be inside of the right HTML markup, a paragraph, or <p> element (any bit of funny looking text like the <p> here just shows that this text is also code).

# data[].attributes.body
HTML is built of elements that have important meaning, like the paragraph element mentioned above. Each element has an opening (the beginning) and a closing (the end) tag, with site content written between these two tags.

These opening and closing tags for each element are written within angle brackets (like these: < >), though a closing tag also has a forward slash (like this: < / >).

# data[].attributes.body
Today we will start a mini-html project.
For the duration of today's class we will be using an online HTML editor called HTML TIDY in order to write our code.

http://htmltidy.net/

Now we can start our project by adding our structure. Again, think of this as putting together a building, we need to get the framing in place.

The very first piece of HTML we will write is the <!DOCTYPE html> which tells the browser “Hey, this is an HTML document!”

<!DOCTYPE html>

Then, under that, we need the <html> element:

<!DOCTYPE html>
<html>

</html>

Everything else will be nested within this element.

# data[].attributes.body
“Like a bird’s nest?” Well, maybe more like nesting dolls, or to stay with our neat town theme, nested buildings. Nesting is what happens when we place an element inside of another one.

# data[].attributes.body
The bit of code below shows a paragraph element nesting within the body element, because it lives between the body’s opening and closing tags.

<body>
<p>This paragraph element is nested inside the body element.</p></body>

We make the code in our HTML file easier to read by pushing nested elements further to the right. (Use the tab key in your keyboard)
Like this:

# data[].attributes.body
Now, nested within this html element we will want to add a head element.

The head will contain the title of our page, which will show up in a browser tab. Lots of nesting!

<html>
<head>
<title>Tuts+Town Project</title>
</head>
</html>

A lot of what is included in the head of an HTML document isn’t seen on the website itself, but instead helps tell search engines, like Google, what our website is all about.

Also, later when we create a new file to add styles to this one, we will connect these two documents together through a link added in the head. So, it’s kind of like a behind the scenes control center that our website’s visitors don’t get to see for the most part.

# data[].attributes.body
Everything on our site that we will see in the browser will be nested within the body, and this is where the fun really begins! Below you can see an image of the website (exercise) we will recreate during the following weeks.

HTML lets us write helpful notes within our work. These notes won’t show themselves on our website, but are brilliant for adding helpful bits of information for other designers looking at our code.

Notice how within the body you have three more sections: header, main, and footer.

# data[].attributes.body
The header element is not the same as the head element that we have already talked about. The header lives within the body and generally contains all the stuff at the top of a site.

The very first thing we will put at the top of our site is a header containing some text and an image.

<html>
<head>
<title>Tuts+Town Project</title>
</head>
<body>
<header></header>
</body>
</html>

We will only be adding the header for now to prepare for the content to be included.

# data[].attributes.body
The list of town businesses is what our website is all about, so all this content will live within an element called main.

We will talk about the smaller containers (like the three different groups: Sleep, Food, and Shop) within this larger main container in the next lesson when we add the content.

# data[].attributes.body
The footer is the part at the very end of the site. We will usually see some links here, such as for Facebook and Twitter, or some small text just letting people know who created the site.

We will add a sentence proudly saying that we made the site within the footer element.

<footer> </footer>

Remember: at this point we are still adding elements that are nested within the body.

# data[].attributes.body
Now, let’s do a final review of our HTML structure so far.

It’s easy to forget closing tags, which would cause some errors on our website. We want to make sure that every tag we opened has a closing tag.

# data[].attributes.body
HTML lets us write helpful notes within our work. These notes won’t show themselves on our website, but are brilliant for adding helpful bits of information for other designers looking at our code.

<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->

# data[].attributes.body
Please show this show your code to Ms. Sarah. If you're not done in class, take a screenshot of your code and send it to sgomez@saintgeorge.do