Web Fundamentals

Taught by Alexandra Ackerman
Code available at https://github.com/newschool-webfundamentals
Presentations available at newschool-webfundamentals.github.io

Agenda

  • Warm up
  • HTML in-depth
  • Build a webpage together
  • Choose your own adventure lab

Warm up

  1. What's the difference between HTTP and HTML?
  2. What are head tags and body tags used for?
  3. Show me how to build the basic foundation for an HTML webpage.

We've discussed how the web works: servers, requests, HTTP and beyond.

We've also covered how to make files and folders on a computer to upload to GitHub.

Now we need to figure out how to structure the content in our files to make webpages.

HTML

Hyper Text Markup Language

Learning objectives

  • Label components of an HTML element
  • Know how to symantically structure a document using HTML
  • Be able to link to other webpages using absolute and relative paths
  • Go over basic usability principles
  • Begin to incorperate CSS

Webpages act like electronic versions of the documents we see in everyday life.

Documents all have a structure. How is a newspaper structured?

  • Headline
  • Byline
  • Body or paragraph text
  • Subheadings
  • Images
  • Blockquotes

Webpages are structured the same way. There is a hierarchy of information.

HTML describes the markup of pages.

What's this called?

These elements are made up of what?

These tags are like containers and tell the browser information about what is in between the tags.

Head & Body

A webpage is made up of a head and a body. A head element contains information about the page, such as a title. A body element displays its contents to the browser.

Head

The metadata and resources

Body

What the user sees.

Structural & Semantic markup

Let's go over some of the typical tags you migth use when building a web page.

Structural tags

Structural markup are the elements that describe the structure of a document, such as headings and paragraphs.

Headings

There are six levels of headings.

Paragraphs

Lists

Unordered and ordered

Every list has "list items"

Some elements have "attributes"

Attributes have a name and are followed by an equals sign with a value in quotation marks.

They give more context about what the element is.

Images

Have a "src" (source) attribute, to designate image location.

Tags can have other attributes, which give extra info on the element.

This image is displayed at 50% height and width, and it has a url source.

Links or "anchor" tags

Should have a "href" (hyperlink reference) attribute

Divs

Divs are tags that create "divisions" between other elements. You group them together, most often for styling purposes.

These elements define the structure of your webpage.

There are also elements that give extra information about the meaning of the text they surround. This is called "semantic" markup.

Emphasis and italics

One is structural, one is semantic. What do you think?

Italics are structural, they define how the word looks.

Emphasis is semantic, they describe how the words feel.

Same with strong and bold tags.

Blockquotes

Horizontal rule

Divides pages with a line. Does not have a closing tag

Media Tags

There are also tags that embed video, audio and other content

Style attributes

CSS next class, but try playing with style attributes to change text color, font-size, background color, etc

Style tags

Allows you to write CSS for the entire file.

Before we continue to my demo and lab, let's talk about usability

Most rules are common sense, you just need to be aware of them.

When we talk about usability, we are referring to how quickly a user can reach their goals.

If a site is usable, they can navigate and perform actions (shop, chat, etc) without getting lost

People don't read websites (unless they're reading an article)

We scan them.

Important things should be important.

Things that are similar, should be shown similarly

Let's look at the NYTimes as an example

Let's try to recreate the structure of a webpage together.

Choose your own adventure

Create at least 5 html files that connect to one another and tell a short choose your own adventure story.

  • Include an image
  • A list
  • Headers and paragraph text
  • Links to other pages
  • Style at least 2 elements using the style attribute

Create and add it to a web-fundamentals GitHub repository by the end of class.