Link Search Menu Expand Document
HTML&CSS

Introduction to HTML

Class Agenda

  1. Introduction to web browsers
  2. The structure of a website
  3. Introduction to HTML
  4. Exercise: website analysis
  5. Helpful terms to know / Terminology

1. Introduction to web browsers

Web browsers like Chrome, Safari, Firefox, and Edge are how we use the internet.

Every time we visit a page like https://google.com or https://redi-school.github.io/berlin-html-and-css/, the page we see in our browser is structured using HTML and styled using CSS.

Since 1993 it was decided that the Web should act as an open standard accessible worldwide.

How did the first website look like? http://info.cern.ch/

ETA: ~15min

2. The structure of a website

Most websites share common structural elements. This makes it easy for people to use new websites quickly, as they have already learned what to expect.

Most websites have a “homepage.” This is where you might begin when you browse content on the website. For example, the homepage of ReDI is https://www.redi-school.org/. From there, you can navigate (change pages) to several other pages by clicking links.

Almost all websites feature some text. This text is usually broken up into sections with headers (large/bold text) and paragraphs (multiple setences) or lists.

Text is often set in several different sizes on a single page to make it easy for users to quickly view and understand. A user can usually make sense of what a section will be about simply by reading the heading.

Most websites also have a navigation bar or navbar. This is a collection of links to other pages, often at the very top of the page. This makes it easy to go from one page to another. The section at the top of the page, which often includes a navbar, is called a header.

Websites have space between different pieces of content. This makes pages easier to read and nicer to look at. There’s no real reason content needs to be spaced apart besides that our brains like it.

Most websites also have a footer at the bottom. Footers usually have a few important or legally required links in them and not much else.

Many websites feature images, such as photos or drawings. These images are often grouped together with text. That text might describe the image, or the image could lend feeling to the text.

3. Introduction to HTML

This section covers the introduction to HTML and should give understanding of basic questions such as:

  • What is HTML?
  • What does HTML stand for?
  • Why do we need HTML?
  • What HTML is limited to?
  • What do HTML rules and language look like?

ETA: ~40min

Break: ~5min

4. Exercise: website analysis

All websites have structure - but we often don’t think about it! Common website features:

  • Navigation bar or nav bar
  • Search bar
  • Tabs
  • Blocks with image + text together (like an item and its name on an online shopping page, or an article headline and image on a news site)
  1. Work with your team, pick out a website and list as many different elements and groups of elements as you can (navigation bar, link, large/medium/small heading, paragraph, image…). Navigate to many different pages and find more patterns!
  2. Create a file in Codepen and write down those elements and groups of elements, using an unordered list <ul> and list item <li> tags.

ETA: ~30min

5. Helpful terms to know / Terminology

  • Page/webpage: a single hypertext document
  • URL/address: think of it like a physical address - it’s how you travel to a specific web page. It consists of a domain followed by a path (there’s some other stuff too like https:// which you need at the front. We won’t go into it now, but you can research on your own if you like!)
  • Domain: the root “name” of a website, such as redi-school.org, wikipedia.org, google.com, etc. https://www.redi-school.org/course-finder and https://www.redi-school.org/redi-school-berlin are URLs/addresses that share the redi-school.org domain
  • Path: the root “name” of a website, such as redi-school.org, wikipedia.org, google.com, etc. https://www.redi-school.org/course-finder and https://www.redi-school.org/redi-school-berlin are URLs/addresses that share the redi-school.org domain
  • Navigate: travel from one web page to another by clicking a link or typing a URL in the address bar
  • Website: a collection of web pages on the same domain
  • Navigation bar (browser): the part of the browser you use to navigate the web. Includes the address bar and forward/back buttons
  • Address bar: the part of the browser you use to type in a URL so you can navigate to it
  • Navigation bar (HTML): part of a webpage used to navigate within the website. Usually includes several links to important pages within a site
  • Page header: the top part of the page, usually including a navigation bar
  • Text header: large text, used to declare the content of a section
  • Sidebar: a collection of content on the left or right side of a webpage, usually a list of links to other content
  • Footer: content at the very bottom of a page, often including links
  • Hyper Text: a link to another webpage
  • Markup Language: something you can write that tells a computer “treat this content a specific way”. It’ll make more sense as the semester goes on :)
  • Nesting: putting something inside something else, like a bird and eggs inside a nest. We’ll use “nesting” a lot to refer to HTML elements being inside other HTMl elements

Homework

  1. Create a wireframe of a simple restaurant website. Be as detailed as possible! Where would there be text? Images? What information is important to include on a restaurant website? How would you structure it? Include all of the elements that you would like to have/think are important in a good website. You can use Excalidraw (https://excalidraw.com/) or use pencil and paper and take a picture with your phone
  2. Make yourself familiar with the MDN Web Docs website and with the W3Schools website as they are good sources of information
  3. Test out Inspect on some websites!

Slides