2/13

1.1. First webpage

  • Create a file named index.html

    • To this end, open a new empty file using a text-editor (For instance Visual Code Studio is already installed on the school computers.)

    • Save this file on your disk under the name index.html.

  • Fill this it with the following code

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> CSE104 </title>
</head>

<body>
       <h1>My first webpage</h1>

       <p>
           This is HTML code.
       </p>

</body>

</html>

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

Notes:

  • Take the habit to create your files in specific directories 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 as long as you keep its .html extension.

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 your webpage (such as for Google search engine).

Tags may have default visual behavior (usually inherited from origin of HTML), 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.

Note: 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 organize arbitrary elements visually as a grid (see css display:grid for that)

  • <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.