1/9

1. HTML introduction

First webpage

  • Create a file named index.html on your hard drive

  • Fill it with the following code

<!DOCTYPE html>

<html>

<head>
        <title> CSE104 </title>
</head>

<body>
       <h1>My first webpage</h1>
       This is HTML code.
</body>

</html>

  • Open the file using web browser to observe its visual appearance

Notes:

  • Take the habit to create your files in a specific directory such that you don’t mix your files with other ones, can retrieve them easily, and don’t erase previous one when you start a new exercise. For instance, you can use the following hierarchy CSE104/class01/ex01/index.html.

  • Reminder on available and recommended text editor

  • index.html` is the default name for webpage that is looked automatically by browsers. However, you can rename your file as you want.

HTML tags

The goal of HTML tags is to provide a structure to your document. Well placed tags allows to efficiently understand, and thus index (such as for Google search engine), your webpage. Tags may have default visual behavior (usually inherited from old time), however this visual appearance can be modified (see CSS later on).

Therefore, as a good practice in HTML5, your choice of tag should be guided by its semantic meaning (= the structure of your document and meaning of content), and not by its default visual appearance.

  • The following tags are often used and may be worth to remember. Experiment with them to observe their default behaviors.

Note: Don’t hesitate to refer to the exhaustive list of HTML (see W3School, or Mozilla Development Network) for more tags and info.

  • <h2>, <h3>, …​, <h6> - Titles tags

  • <!-- --> - Comments tag

    • ex. <!-- This is a comment -->

  • <p> - Design and delimit a paragraph of text

    • ex. <p> A paragraph of text </p>`

  • <br> - A line break

    • ex. <p> A first line. <br> A second line.</p>

  • <a> - Link to another webpage

    • ex. <a href="https://www.polytechnique.edu/en/bachelor">This is a link</a>

  • <strong> and <em> - Highlight text

    • ex. <p> <strong> Important text </strong>, and <em> emphasized text </em> </p>`

  • <ul> - Unordered list

    • ex.

 <ul>
    <li>Element of unordered list</li>
    <li>Second element</li>
    <li>Third element</li>
    <li>
      <ul>
              <li> Element of nested list </li>
              <li> Second element</li>
      </ul>
    </li>
 </ul>

  • <ol> - Ordered list

    • ex.

<ol>
    <li> Element of ordered list </li>
    <li> Second element </li>
</ol>

  • <img src=…​> - Insert an image

    • ex <img alt="logo html" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_128.png"> Where alt attribute refers to an alternate text describing the image. This alt description should be used as follow:

    • It appears when the picture cannot be loaded (broken link, slow connection, command line browser, etc.)

    • Can be used and analyzed by search-engine (picture content is harder to analyze)

    • Can be used by a screen reader for people with visual impairment, allowing them to understand your website.

An alt description should be provided for every image. You can use the alt="" for purely decorative images.

  • <table> Insert data organized as a 2D tabular

    • ex.

<table>
    <tr> <!-- First line -->
        <td> A </td>
        <td> B </td>
        <td> C </td>
    </tr>
    <tr> <!-- Second line -->
        <td> D </td>
        <td> E </td>
        <td> F </td>
    </tr>
</table>

Note: Table should be used to visualize data which are organized as table (semantic meaning, but not to place arbitrary elements in front of each other (visual appearance)

  • <q> - Quote

    • ex. <q> This is a quote </q>

  • <sup> and <sub> - Quote

    • ex. <p> x<sup>2</sup>, x<sub>i</sub> </p>

    • <p>&int; x<sup>2</sup> dx = x<sup>3</sup>/3 </p>

  • <s> - Text that is no longer correct or relevant (shorthand for strikethrough)

    • ex. <s>2+2=5</s>

Exercise

  • Create a webpage imitating the following on. Use when possible relevant tags instead of hard-coded decorating characters.

Multiple webpages

The tag <a> can be used to create link to external webpage, but also to other local ones. In such case, the href attribute is set with local path.

  • Create in the same directory a file page_01.html and another one page_02.html.

  • In file page_01.html add a link to the page 2 with href="page_02.html", and conversely in file page_02.html.

  • Make sure you can naviguate between these two files from your browser. You can create any arbitrary links between multiple pages this way.

HTML Validator

Browsers are usually not following strict HTML5 rules in order to be robust to syntax errors, and to avoid breaking old style HTML programming. They typically allow incorrect html code to be rendered in a "correct" way, helping non expert developers to obtain quickly visual results. While, often, rendering correctly in browser, writing non standard code is considered as a bad practice. It may render differently on various browser, and may be rendered incorrectly in the future version of the browser. A good practice consists in checking your HTML code in validator.

The W3C Validator is a common tool to check that your code follows standard rules (browser extensions are also available). Check regularly if your HTML code is valid, many typos and errors which are silently rendered by your browser can be detected and cleaned up.