Skip to content

step 1: html basics

Jump to bottom Edit New page
Khurram Virani edited this page Oct 12, 2015 · 4 revisions

IMPORTANT NOTE

This one was imported into Compass. Please put any edits in there - KV

objectives

  • download the app starter code
  • learn HTML basics
    • common tags
    • attributes
    • nesting
  • apply basics to build static page
  • add classes that align with lib.css to automagically style page

tutorial

prepping for content

First, let's download some code that will help us later in the class as we build out Finstagram. Unzip the file, rename the resulting directory to "finstagram," and move it to wherever you keep your projects. (This is the first project of many!)

Now let's open up the whole project in Sublime Text.

  • Open Sublime Text
  • File... Open... [Select project directory]
  • Check to make sure your sidebar looks like this.

You'll notice there are all sorts of files and directories here, but for now, we're going to focus only in app/views. Open up the blank app/views/index.html that's just waiting for your first lines of code.

Let's start with some tags that must be present if you want a browser to render HTML.

First, the special <!doctype html> tag that let's the browser know what type of document this is. And the <html> tags that wrap everything in the document:

<!doctype html>
<html></html>

Hooray! Next, the section of our HTML that we don't see—<head>:

<!doctype html>
<html>
  <head></head>
</html>

Notice when tags get nested inside other tags, we put the nested tag on a new line and indent.

Add the real meat of our HTML to our <html> sandwich—<body>. This is the section we can actually see in the browser. We'll add some text to the body, too.

<!doctype html>
<html>
  <head></head>
  <body>Hello world!</body>
</html>

Okay let's take a look at this thing and make sure we're on the right track. From the command line (or your file management GUI of choice), open app/views/index.html.

Voila! It's beautiful.

The title of the page in our browser tab is... not as beautiful. "index.html" Gross. Let's add a tag inside <head> that tells our browser what the real <title> is:

<head>
  <title>Finstagram</title>
</head>

Refresh your page, and boom: real title. We did it.

Notice in the above code snippet, I omitted some code around the example. This is how we'll proceed from here out.

displaying a header

Now that we know how to setup an HTML document, let's add some actual content!

As you know, there are a bunch of HTML tags. They all have nicely defined use cases. As we build out our page, we'll try to use tags that make sense.

First, let's add a simple header to our site. The tag selection is easy on this one:

<body>
  <header>
    <h1>Finstagram</h1>
  </header>
</body>

<header>s are for... um... headers. And <h1>s are used for text headings.

Refresh and check it out. Your "Finstagram" <h1> is rendered nice and large, indicating, "This is important." Why? Browsers have default styles that affect how elements look on the page. (We're going to learn way more about how to affect the style of tags in the body later on.)

our first post

All right, we're about to construct our first post using a veritable plethora of tags. There are few black and white rules when it comes to writing markup, but we'll try to be semantic.

So to start, we have options as to what to name the section after our <header>, but let's try <main>. Makes sense, right? This is where the "main" content will go (posts for now, but eventually login, signup, etc.).

<header>
  <h1>Finstagram</h1>
</header>
<main role="main"></main>

We'll talk about that text inside the tag itself (role="main") in a bit.

Now let's add a wrapper tag for a single post. There's no <post> tag unfortunately, but we can get pretty close with <article>.

<main role="main">
  <article></article>
</main>

We'll need to display the user info for each post so let's add that section inside our <article> tag, like so:

<main role="main">
  <article>
    <div>
      <img src="http://naserca.com/images/sharky_j.jpg" alt="sharky_j">
      <h2>sharky_j</h2>
      <h3>15 minutes ago</h3>
    </div>
  </article>
</main>

Okay, let's break this down before we check it out in the browser. We have another wrapper tag: <div>. You'll use <div>s a bunch as they're a great all-purpose container for when no other HTML tag seems to fit. Here, for example, we just want something to wrap our user info section.

Inside the <div>, we have an <img> tag. I'm sure you can guess what that's for. But notice we have some text inside the tag itself:

src="http://naserca.com/images/sharky_j.jpg" alt="sharky_j"

These are called attributes, and here we have two. The src attribute tells our browser which image to display. And the alt attribute tells our browser (and ultimately our users) what the image is.

Go ahead and take a look at our page with the user info added. [pause for effect] Nice! A few notes:

  • Again the browser is applying default styles to our <h2> and <h3> tags.
  • The alt attribute on our <img> is displayed when you hover over the image. You've probably noticed this before. Mystery solved!

Now for the Big Photo™ in our post:

<article>
  ...
  <a href="#">
    <img src="http://naserca.com/images/shark.png" alt="post from sharky_j">
  </a>
</article>

This <a> tag gives you the power of linking! [cue laser sounds for some reason] The href attribute is what you're linking to. In our case, we're leaving a dummy value there (#) because we don't have another page. Refresh and you'll see we now have a big photo that's clickable. Excellent.

Let's finish out our post with the following markup:

<article>
  ...
  <div>
    0 likes
    <span>0 comments</span>
  </div>
  <ul>
    <li>
      <p>
        sharky_j: Out for the long weekend... too embarrassed to show y'all the beach bod!
      </p>
    </li>
  </ul>
</article>

Notice our comments are listed in the <ul> tag within <li> tags. This is common pattern when we need to display a list of similar things.

The <p> tag signifies a paragraph. We'll consider our comments paragraphs.

Okay let's check our page and we should see our (largely unstyled) post. Pretty cool!

stylin'

As an intro to the next step, let's add some class attributes to certain post tags. This attribute is used as an easy way to target certain elements in our CSS.

<article class="post">
  <div class="user-info">
    <img src="http://naserca.com/images/sharky_j.jpg" alt="sharky_j">
    <h2>sharky_j</h2>
    <h3>15 minutes ago</h3>
  </div>
  <a class="photo" href="#">
    <img src="http://naserca.com/images/shark.png" alt="post from sharky_j">
  </a>
  <div class="actions">
    0 likes
    <span class="comment-count">0 comments</span>
  </div>
  <ul class="comments">
    <li>
      <p>
        sharky_j: Out for the long weekend... too embarrassed to show y'all the beach bod!
      </p>
    </li>
  </ul>
</article>

And now that we've taken care of that, let's automagically apply some styles we've set up for you. In the <head>, add three <link> tags that point to preexisting stylesheets:

<head>
  <link rel="stylesheet" href="../../public/stylesheets/normalize.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,700italic,700,300">
  <link rel="stylesheet" href="../../public/stylesheets/lib.css">
  <title>Finstagram</title>
</head>

We'll talk more about this next step, but for now: refresh your page and feast your eyes upon... A WEBSITE.

Add a custom footer
Add a custom sidebar
Clone this wiki locally