Welcome

Media and Web Development

Week 2 - Introduction to HTML

Agenda

  • What is HTML?

  • The DOM

  • Elements and Tags

  • Typography

  • Layout

  • The Glitch Environment

What is HTML?

HTML (Hyper-Text Markup Language) is the content language of the web.

We use html to describe the content on a page.

Text, Images, Links, and Layout are all described using HTML.

Of the three languages we will learn this semester. HTML is the most important. You can strip away style or interaction and still have a functioning website, but to remove the HTML is to remove the content of the website.

The DOM

Document Object Model

Elements!

An element is the atomic unit of HTML

All web pages start as a collection of elements.

That was an Image element

and that was a Header element

There are a lot of html elements.

Luckily many are redundant, and some are outside the scope of this course.

Here are the really important ones...

  • Heading - Titles and Subtitles ( 6 different levels ).

  • Paragraph - The basic unit of text.

  • Anchor - A link to another page.

  • Image - Renders and Image.

  • Div - Defines a section on the page.

  • Span - Defines a section in a block of text.

  • Strong - Defines a section of strong text ( usually bold ).

  • Emphasis - Defines a section of emphasized text ( usually italic ).

  • List and List Item - Define different types of lists ( This page is a big list :) ).

With these building blocks we can build almost anything on the web.

Elements and Tags in Code

We define elements in our code with tags

In this class the relationship between tags and elements is largely 1 to 1, but that isn't always the case with more advanced usage.

An element usually consists of an opening tag, some content, and a closing tag.

<p>some text</p>

This text defines a paragraph element

An element usually consists of an opening tag, some content, and a closing tag.

<p>some text</p>

The opening tag is written with the tag name surrounded by < & > signs

Then the content

<p>some text</p>

The content comes directly after the opening tag. In most cases, content will be plain text, or other html elements.

and then the closing tag

<p>some text</p>

The tag name preceeded by a slash, inside angle brackets.

HTML has a tree like structure.

This means we can embed tags withing other tags to form complex structures.

        <div>
          <h1>A header</h1>
          <p>Some Content</p>
          <p>
            <em>
              Something
              Emphasized
            </em>
          </p>
        </div>

Opening tags can also include extra information about the element in the form of Attributes

We will work more with attributes in the coming weeks, but if you want some extra credit this week a couple are available right from the start.

The Anchor tag defines a link between 2 pages.


<a href="https://www.google.com">
  A link to google
</a>

We can use the href attribute on the anchor tag to define where the link will link to.


<a href="https://www.google.com">
  A link to google
</a>

All attributes are express as a name (href in this case), followed by an =, followed by their value ( usually wrapped in quotes ).

The Image tag displays an image


<img src="cat.jpg">

We can use the src attribute on the Image tag to define the image we want to load.

Layout!

Broadly speaking, html elements default to one of 2 layout schemes.

  • Block elements start a new line on the page.

  • Inline elements can exist on the same line as other inline elements.

Most elements are Block level by default.

Some notable exceptions are

  • Image

  • Anchor

  • Span

I find layout hard to understand in the abstract so lets take a break and go onto glitch for a demo.

Fork this project to get started on glitch