Web

HTML & CSS

Slides by Bertil Chapuis, Olivier Lemer, Olivier Tischauser & Vincent Guidoux

Introduction to HTML

## <i class="fas fa-code"></i> Anatomy of an HTML document

```html
                        <!DOCTYPE html>
                        <html>
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Welcome page</title>
                        </head>
                        <body>
                            <h1>Hello students of the Web Technologies course !</h1>
                        </body>
                        </html>
                        ```

- `DOCTYPE` declaration is an instruction to the web browser about what version of HTML the page is written in.
                        - `<html>` is the root element of an HTML page.
                        - `<head>` contains the page metadata.
                        - `<meta charset="utf-8">` sets the character encoding for the page.
                        - `<title>` sets the title of the page.
                        - `<body>` contains the visible page content.

## <i class="fas fa-sitemap"></i> Search Engine Optimization (SEO)

Search engines use opaque and complex algorithms to rank web pages based on their contents.

Search Engine Optimization (SEO) is the art of pleasing these algorithms:

- Use the right tags
                        - Structure tags properly
                        - Provide relevant metadata, like keywords and descriptions
                        - Do not forget to put your keywords in the title, the meta description, the URL, the H1, the first paragraph, the image alt text, etc.
                        - Put your competitors' keywords in your content
                        - Check the accessibility of your website
                        - Check the performance of your website

Because these algorithms evolves constantly, so does SEO. Checkout the [Google SEO Starter Guide](https://support.google.com/webmasters/answer/7451184?hl=en), [How to get your website on Google Search](https://developers.google.com/search) and [PageSpeed Insights](https://pagespeed.web.dev/)

HTML Elements

## <i class="fas fa-code"></i> Media elements
                        
                        The image element must have an `src` (image url) and `alt` (caption of the image) attribute.

```html
                        <img src="image.jpg" alt="caption" />
                        ```
                        
                        The audio element requires special permissions to autoplay.

```html
                        <audio src="audio.mp3"></audio>
                        ```

The canvas element allows for dynamic, scriptable rendering of 2D and 3D shapes.

```html
                        <canvas></canvas>
                        ```

It is very bad practice to omit the `alt` attribute of an image. In addition to being displayed when hovering over the image, it is used by screen readers to describe the image to visually impaired users. Accessibility is a crucial aspect of web development.

## <i class="fas fa-code"></i> Tables

Tables should only be used for tabular data, not for layout.
                        
                        ```html
                        <table>
                            
                            <tr>
                                
                                <th>Student ID</th>
                                <th>Grade</th>
                            </tr>
                            <tr>
                                
                                <td>4</td>
                                <td>5</td>
                            </tr>
                            <tr>
                                
                                <td colspan="2">6</td>
                            </tr>
                        </table>
                        ```
                        
                        - `tr` is a **t**able **r**ow
                        - `td` is a **t**able **d**ata, i.e. a regular cell
                        - `th` is a **t**able **h**eader, i.e. a header cell
                        
                        The `colspan` and `rowspan` attributes are used to merge cells.

## <i class="fas fa-cogs"></i> HTML Forms    
                        
                        HTML Forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, generally sending that data to the web server.

The `<form>` element defines a form.

```html
                        <form action='/articles/' method='POST'>
                            <label for="email">E-mail:</label>
                            <input type="email" id="email" name="email" />
                            <label>Title:
                                <input type="text" id="title" name="title" />
                            </label>
                            <label for="content">Content:</label>
                            <textarea id="content" name="content" />
                            <button type="submit">Save</button>
                        </form>
                        ```

- The `action` attribute defines the location (URL) where the form should be sent when it is submitted.
                        - The `method` attribute defines which HTTP method to send the data with (it can be "get" or "post").
                        
                        https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form

## <i class="fab fa-js"></i> HTML Input Element

There exist many types of input elements, each with its own behavior and set of attributes.
                        
                        Some of the available types are: `text`, `password`, `submit`, `hidden`, `radio`, `checkbox`, `file`, `email`, `url`, `date`, `url`, etc.
                        
                        Common attributes are
                        
                        - `name`: the name of the input, which is submitted with the form data.
                        - `value`: the default value of the input.
                        - `placeholder`: the text that appears within the input when empty.
                        - `required`: indicates that the input is mandatory. Submission will be blocked if the input is empty.
                        - `readonly`: indicates that the input cannot be edited.
                        
                        https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Hands-on

Introduction to CSS

## <i class="fas fa-paint-brush"></i> Adding CSS to an HTML Document

**Embedded stylesheets** are contained in a `<style></style>` element inside the HTML document:
                        
                        ```html
                        <!DOCTYPE html>
                        <html>
                          <head>
                            <style>
                              body {
                                background-color: linen;
                              }
                            </style>
                          </head>
                          <body></body>
                        </html>
                        ```
                        
                        **External stylesheets** are contained in a file that is then imported with a `link` element:
                        
                        ```html
                        <!DOCTYPE html>
                        <html>
                          <head>
                            <link rel="stylesheet" type="text/css" href="style.css">
                          </head>
                          <body></body>
                        </html>
                        ```

**Inlined directives** are added in the `style` attribute of an element.
                        
                        ```html
                        <h1 style="color: blue; font-size: 32px;">I'm blue</h1>
                        ```

Selectors

## <i class="fas fa-paint-brush"></i> Selectors

The **type selector** selects the elements that match the given node name:
                        
                        ```css
                        p {}
                        ```
                        
                        The **id selector** selects the elements that have a given id attribute:
                        
                        ```css
                        #myid {}
                        ```
                        
                        The **class selector** selects the elements that have a given class attribute:
                        
                        ```css
                        .myclass {}
                        ```
                        
                        The **universal selector** select all the elements:
                        
                        ```css
                        * {}
                        ```
                        
                        The **attribute selector** select the elements with a given attribute:
                        
                        ```css
                        [attr=value] {}
                        ```

Selectors can be **grouped**:
                        
                        ```css
                        h1, h2, h3, p {}
                        ```
                        
                        https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

## <i class="fas fa-paint-brush"></i> Specificity

Specificity determines which CSS directive is applied to an element.

The specificity algorithm assigns a 4-vector to each
                        declaration : `(a, b, c, d)`.

- `a` - 1 if declaration is **inlined**, 0 otherwise.
                        - `b` - Includes only ID selectors, such as `#example`. For each ID in a matching selector, add 1-0-0 to the weight value.
                        - `c` - Number of **class, attribute and pseudo-classe** selectors in the ruleset.
                        - `d` - Number of **element and pseudo-element** selectors in the ruleset.

Two declarations are compared by comparing their vectors
                        from left to right. The highest wins.

```css
                        #myElement {
                            color: green;
                        }
                        .bodyClass .sectionClass .parentClass [id="myElement"] {
                            color: yellow;
                        }
                        ```

```css
                        #myElement {
                            color: yellow;
                        }
                        #myApp [id="myElement"] {
                            color: green;
                        }
                        ```

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

## <i class="fas fa-paint-brush"></i> Specificity Solution

When we say "compared from right to left", we mean that, first, the values of `a` are compared. If one is higher than the other, that declaration wins. Otherwise if they are equal, the values of `b` are compared. If one is higher than the other, it wins, and so on. If we reach equality, the cascading rule applies, and the last declaration wins.

```css
                        #myElement {
                            color: green;  /* (0, 1, 0, 0)  - WINS!! */
                        }
                        .bodyClass .sectionClass .parentClass [id="myElement"] {
                            color: yellow; /* (0, 0, 4, 0) */
                        }
                        ```
                        ```css
                        #myElement {
                            color: yellow; /* (0, 1, 0, 0) */
                        }
                        #myApp [id="myElement"] {
                            color: green;  /* (0, 1, 1, 0)  - WINS!! */
                        }
                        ```
                        ```css
                        :root input {
                            color: green; /* 0-1-1 - WINS because CLASS column is greater */
                        }
                        html body main input {
                            color: yellow; /* 0-0-4 */
                        }
                        ```
                        ```css
                        input.myClass {
                            color: yellow; /* 0-1-1 */
                        }
                        :root input {
                            color: green; /* 0-1-1 WINS because it comes later */
                        }
                        ```

Properties

## <i class="fas fa-paint-brush"></i> Background Properties

```css
                        body {
                            background-color: blue;
                            background-image: url('../image.jpg');
                            background-repeat: no-repeat;
                            background-size: auto;
                        }
                        ```

There are many more CSS properties for background manipulation, like background position, background attachment, background origin, etc.
                        
                        https://developer.mozilla.org/en-US/docs/Web/CSS/background

Background repeat can be used to repeat the background image horizontally, vertically, or both. It can also be used to repeat the background image only once, or not at all.
                        
                        Background clip helps to define the painting area of the background. It can be used to clip the background to the border box, padding box, or content box.
                        
                        Background attachment can be used to make the background image fixed with regard to the viewport or scrollable with the content.

## <i class="fas fa-paint-brush"></i> Color Property

The color property sets the foreground color value of an element's text.

```css
                        p {
                            /* named-color values */
                            color: red;
                            color: orange;

/* hex-color values */
                            color: #090;
                            color: #009900;

/* rgb() values, rgba() also has alpha (opacity) */
                            color: rgb(34, 12, 64);
                            color: rgba(34, 12, 64, 0.6);
                        }
                        ```

**Color values** can be used with other CSS properties such as:

```css
                        background-color: #090;
                        border-color: #090;
                        ```

https://developer.mozilla.org/en-US/docs/Web/CSS/color

Layout

## <i class="fas fa-paint-brush"></i> Layout

The **display** property specifies if/how an element is displayed.
                        
                        The default value of `display` depends on the element. The most common values are:

- **block**: element generates line break before and after itself. Can have specified height and width. If unspecified, takes up the whole width of its parent element (e.g. div, p, h1, h2, etc.).

- **inline**: element does not generate line breaks, only takes up as much width as necessary (e.g. span, a, img, etc.). It will be on the same line as other inline elements, if there is space.

- **inline-block**: element is displayed as an inline element, but can have specified width and height (e.g. buttons, input fields, etc.).

- **none**: element is not displayed at all.

*And many more*

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Box Model

## <i class="fas fa-paint-brush"></i> Width and Height

The width and height properties are used to set the width and height of an element.

```css
                        .box {
                            width: 200px;
                            height: 200px;
                        }
                        ```

The min-width and max-width properties specify the minimum and maximum width of an element.

```css
                        .box {
                            min-width: 100px;
                            max-width: 300px;
                        }
                        ```

The min-height and max-height properties specify the minimum and maximum height of an element.

```css
                        .box {
                            min-height: 100px;
                            max-height: 300px;
                        }
                        ```

## <i class="fas fa-paint-brush"></i> Positionning

```html
                        <div id="el">My element</div>
                        ```

```css
                        #el {
                            position: fixed
                            top: 100px;
                            left: 100px;
                            bottom: 100px;
                            right: 100px;
                        }
                        ```

The position CSS property sets how an element is positioned in a document.

- `static`: The element is positioned according to the normal flow of the document.
                        - `relative`: The element is positioned according to the normal flow of the document, and then offset relative to itself.
                        - `absolute`: The element is positioned relative to its closest non-static positioned ancestor.
                        - `fixed`: The element is positioned relative to the initial containing block established by the viewport and does not move with scroll.
                        - `sticky`: The element is positonned according to the normal flow of the document, but behaves like `fixed` when scrolled out of view. If another element is positioned `sticky` nearby, they will "push" each other out of the way.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Positionning - Examples

2 (static)

2 (relative)

2 (absolute)

2 (fixed)

2 (sticky)

## <i class="fas fa-paint-brush"></i> Common units

Relative units:
                        - **%** : percentage relative to a property of the parent element
                        - **em** : relative to the inherited font-size of the element
                        - **rem** : relative to the inherited font-size of the root element

Absolute units:
                        - **px** : pixels, should only be used for the screen
                        - **cm** : centimeters, should only be used for print
                        - **pt** : points, often used for setting font size for print (1pt = 1/72 of an inch)

Viewport units:
                        - **vw** : 1% of viewport width
                        - **vh** : 1% of viewport height
                        - **vmin** :  the smaller of vw and vh 
                        - **vmax** : the larger of vw and vh

https://developer.mozilla.org/en-US/docs/Web/CSS/length#units

Common units - Examples

Change the font size of the container to see the effect on all its descendants using relative units.

(2em) Header

(1em) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam numquam ea suscipit nostrum quidem ipsum, quis tempora neque! Et animi, non voluptatem cumque totam officiis vitae? Totam ut labore enim!

(0.7em) Animi, soluta quaerat illo officia sequi expedita beatae ullam praesentium dolorum illum vitae blanditiis saepe labore! Cumque tenetur modi dicta harum sed nemo laborum architecto, dolorem porro saepe nisi. Corrupti corporis quibusdam rem ipsum nobis aperiam. Quas ex adipisci corrupti neque repellendus deserunt similique a reiciendis sint, voluptate laboriosam cupiditate quam! Rerum tempora quidem quo dignissimos at.

Flexbox & Grid Layouts

## <i class="fas fa-paint-brush"></i> Flexbox

The Flexbox layout (`display: flex`) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
                        
                        ```html
                        <div class="container">
                            <div class="item">Item A</div>
                            <div class="item">Item B</div>
                            <div class="item">Item C</div>
                        </div>
                        ```

```css
                        .container {
                            display: flex;
                            flex-direction: row;
                        }
                        .item {
                            order: 1;
                            flex-grow: 1
                        }
                        ```

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

## <i class="fas fa-paint-brush"></i> Grid

In some scenarios, the grid layout (`display: grid`) is more convenient,
                        in particular for dynamically spreading content on a
                        grid structure.

The concepts are similar to those of the Flexbox layout. There are properties for the parent (Grid Container) and others for the children (Grid Items).

- **Container (parent) properties** : grid-template-column, grid-template-rows, grid-template-areas, grid-template, ...
                        - **Item (child) properties** : grid-column-start, grid-column-end, grid-column, grid-row, grid-area, ...

See the illustrations on
                        [CSS-tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
                        to learn about the potential of grid.

The basic idea is to set the number of columns and rows using e.g. `grid-template-column|row` and then place the child elements using e.g. `grid-column|row`

Web