HTML & CSS

By the end of this course, you'll learn the basics of HTML and CSS and how to structure and style your webpage.

Introduction to HTML

Basics

Why learn HTML?

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add paragraphs, headings, images and links to a webpage.

In the editor to the right, there's a tab called test.html. This is the file we'll type our HTML into. See the code with the <>s? That's HTML! Like any language, it has its own special syntax (rules for communicating).

When we press Save & Submit Code, the results tab will act like an Internet browser (e.g. Chrome, Firefox, Internet Explorer). A browser's job is to transform the code in test.html into a recognizable webpage! It knows how to lay out the page by following the HTML syntax.

HTML and CSS

HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!

A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.

What makes webpages pretty? That's CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.

The first thing we should do is set up the skeleton of the page.

a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).b. Always put <html> on the next line. This starts the HTML document.c. Always put </html> on the last line. This ends the HTML document.

Basic terminology

To learn more HTML, we should learn how to talk about HTML. Already you have seen we use <>s a lot.

  1. Things inside <>s are called tags.
  2. Tags nearly always come in pairs: an opening tag and a closing tag.
  3. Example of opening tag: <html>
  4. Example of closing tag: </html>

You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also nest, so you should close them in the right order: the most recently opened tag should be the first one closed, like in the example below.

<first tag><second tag>Some text!</second tag></first tag>

The last exercise taught us how to set up our HTML file. Everything we do now will go between <html> and </html>.

HTML Structure

Making lists

Introduction

Let's continue learning more HTML. You've already covered a lot: how to set up <head>and <body> tags, how to make headings and paragraphs, and how to add images and links.

In this course, we'll take it to the next level:

a. Making ordered and unordered listsb. Changing font size, color and typec. Changing the background colord. Aligning the text

Unordered lists

We just learned how to make ordered lists, but what if the order doesn't matter, what if we just want bullet points?

<h2>Taco Ingredients</h2>

<ul>

    <li>Cheese</li>

    <li>Sour Cream</li>

</ul>

Does this look familiar?

  1. First, we open our list with an unordered list <ul> tag
  2. For each item we wish to add to the list, we use a list item tag <li> with text in between
  3. We then tell the browser we are done with our list by calling our closing </ul> tag

Ordered lists

Good! Now let's learn how to make ordered lists. An ordered list is simply a list that is numbered, like the one below.

  1. We begin the ordered list with the opening tag <ol>.
  2. We wrap (i.e. surround) each individual item with <li> and </li>tags.
  3. Because each listed item is only on one line, we put the entire element on one line.
  4. We finish the ordered list with the closing tag </ol>.

How cool is this? We can now add ordered lists to headings and paragraphs as things we can use in our HTML body.

Styling

What are tables?

Tables are very useful. We use them to store tabular data so it is easy to read! When you want to present information neatly in a table with rows and columns—you guessed it—the <table> tag is what you need.

There are many tags associated with tables, but it all starts with the <table> tag, so let's add that first.

Head of the table

Here's the table we made earlier. It's okay, but it just looks like we have a list of famous Hollywood people (monsters?) and their birth years. To make our table look a little more like a table, we'll use the <thead> and <tbody>tags. These go within the <table> tag and stand for table head and table body, respectively.

The <head> HTML tag contains information about a web page (e.g. its title) and the <body>tag contains the contents of the web page. In the same way, the <thead> tag can be thought of as containing information about a table and the <tbody> tag containing the actual tabular data.

Style that head!

Your table is starting to look great, but it's still a little bland. We've gone ahead and added some styling to the table to make it a bit easier to read. It's your job to add the finishing touches!

Feel free to play around with any of the styleattributes we added; you'll learn much more about these things later during the CSS courses.

If you want to add more than one style, you just separate your styles with a semicolon, like so:

<th style="font-size:12px; color:red"></th>


Div

One of the most versatile structure tags available to you is the <div></div> tag. Short for "division," <div> allows you to divide your page into containers (that is, different pieces). This will come in handy when you begin learning CSS in the next unit: you'll be able to style different parts of your website individually!

Span

Great! You're really getting the hang of this. These tags can be a little tricky, though, so let's go through one more example.

Color is just one attribute you can selectively change with <span> tags; you can also change font size, font family, and any other style attribute you can think of!

Introduction to CSS

What is it?

What CSS is

CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.

A style sheet is a file that describes how an HTML file should look. That's it!

We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that! (We'll talk more about cascading in section four.)

Elements

Multiple Selectors

As you've seen, it's possible to nest HTML elements inside one another, like so:

<div>

    <div>

        <p>I like tacos!</p>

So what if you want to grab <p>s that are inside two <div>s, and not all <p>s?

You select those in the CSS tab like this:

divdivp {

    /*CSS stuff!*/

}


Details

Inline-block

Good work! If you didn't notice much of a difference, don't worry. Our <div>s were block elements by default; as we specify different display values, they'll start to move around.

As mentioned, any element that comes in as a block (say, a paragraph) will automatically take up the full width of the page, no matter how much or how little content you put in.

If we specify a display of inline-block, however, our blocks are still blocks, but will be able to sit next to each other on the same line.

Borders

Well done! You can see how fine-tuning your margins will help you place elements where you'd like them to be on the page.

We've worked with borders before, but it never hurts to have extra practice.

To the right!

Okay! So we know how our individual elements are constructed. But how do we determine where they go on the page?

One way is to use floats. When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other.

You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other.

Controlling the position of HTML elements allows you incredibly fine control over how your pages look. No longer will your <div>s sit directly on top of one another! (Unless you want them to.)

As we mentioned, elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify.

Quiz

What is the function of the tag: <title> Jane's Website </title>

  • It shows meta information about the title
  • It stores the webpage title for browser and search engine results
  • It shows the server how to title the website
  • It shows the server how to index the website

Where in your HTML document should you include this code: <!DOCTYPE html>?

  • It doesn't matter
  • The very first line
  • In the body section
  • The last line

HTML is a "markup language." What does that mean?

  • It's used to "mark up" existing code
  • It means the language cannot be interpreted by a web browse
  • It turns text into images, links, tables, lists, and more
  • It was developed by a community (rather than a single architect) over time