Skip to content

Latest commit

 

History

History
154 lines (100 loc) · 6.68 KB

chapter12.md

File metadata and controls

154 lines (100 loc) · 6.68 KB
Raw

What's a web page?

This chapter summarizes what you need to know about the Web and web pages.

Internet and the Web

As you probably know, the World Wide Web (or Web for short) is an ever-expanding information space built on top of the Internet. Web resources are accessible via their address, called their URL, and can contain hyperlinks to other resources. Together, all these interlinked resources form a huge mesh analogous to a spider web.

Documents suitable for the Web are called web pages. They are grouped together on websites and visited through a special kind of software called a browser.

The languages of the Web

There are three main technologies for creating web pages: HTML, CSS and JavaScript.

HTML

HTML, short for HyperText Markup Language, is the document format of web pages. An HTML document is made of text and structural elements called tags. Tags are used to describe the page content: paragraphs, headings, hyperlinks, images, etc.

Here is an example of a simple web page, usually stored as an .html file.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>My web page</title>
</head>

<body>
    <h1>My web page</h1>
    <p>Hello! My name's Baptiste.</p>
    <p>I live in the great city of <a href="https://en.wikipedia.org/wiki/Bordeaux">Bordeaux</a>.</p>
</body>

</html>

Display result

Here are a few references for learning more about HTML:

CSS

CSS, or Cascading Style Sheets, is a language used to alter the presentation of web pages.

CSS uses selectors to declare which HTML elements a style applies to. Many selecting strategies are possible, most notably:

  • All elements of a given tag name.
  • Elements matching a given class (selector syntax: .myClass).
  • The element matching a given and unique identifier (selector syntax: #MyId).

Here is an example of a simple CSS style sheet, usually stored as a .css file.

/* All h1 elements are pink */
h1 {
   color: pink;
}

/* All elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

/* The element having id "rude" is shown uppercase with a particular font */
#rude {
  font-family: monospace;
  text-transform: uppercase;
}

A style sheet is associated with an HTML document using a link tag in the head part of the page.

<!-- Link to a CSS stylesheet -->
<link href="path/to/file.css" rel="stylesheet" type="text/css">

To learn more about CSS, visit the following links:

JavaScript

JavaScript can interact with an HTML document to provide dynamic interactivity: responses to user actions on the page, dynamic styling, animations, etc. It is the only programming language understood by all web browsers.

A JavaScript file, usually stored in a .js file, is loaded by a web page with a <script> tag.

<!-- Load a JavaScript file -->
<script src="path/to/file.js"></script>

Developing web pages

To create interactive web pages, you need to write HTML, CSS and JavaScript code. If you're just starting out, the easiest way to do so is by using an online JavaScript playground. However, you will likely want to develop in a more professional fashion at some point, or need to work offline.

Refer to the introduction for details on setting up your environment.

TL;DR

  • The World Wide Web (or Web) is an information space built on top of the Internet. Web resources are accessible via their URL, and can contain hyperlinks to other resources.

  • A web page is a document suitable for the Web. Creating web pages usually involves three technologies: HTML to structure the content, CSS to define its presentation and JavaScript to add interactivity.

  • An HTML document is made of text and structural elements called tags that describe the page content, such as: paragraphs, headings, hyperlinks, images, etc.

  • CSS uses selectors to declare which HTML elements a style applies to. Elements can be selected by tag name (h1), by class (.done) or by identifier (#rude).

  • An HTML document can include a CSS stylesheet with a <link> tag and a JavaScript file with a <script> tag.

<!doctype html>
<html>

<head>
    <!-- Info about the page: title, character set, etc -->

    <!-- Link to a CSS stylesheet -->
    <link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- Page content -->

    <!-- Link to a JavaScript file -->
    <script src="path/to/file.js"></script>
</body>

</html>
  • A browser is the software you use to visit webpages and use web applications. The modern ones include a set of developer tools to ease the task of developing for the web.

Coding time!

You can skip this exercise if you have prior experience with HTML and CSS.

Your first web page

Follow the beginning of the Getting started with the Web tutorial from Mozilla Developer Network to create a simple web page using HTML and CSS. The required steps are:

  1. What will your website look like?
  2. Dealing with files
  3. HTML basics
  4. CSS basics

Expected result