HTML

name: portada
layout: true
class: portada-slide, middle, right
---
# HTML
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# HTML
- .b[HTML] stands for __HyperText Markup Language__. 
- It is a presentation markup language and uses .b[.html] extension.
- It is used to display web pages and to program the graphical interface in some applications.
- Based on __XML__. Uses the same rules.
- Current version: __HTML5__
- Web browers: HTML interpreters.

---
# Web page
In a web page:
- .b[HTML] defines the .blue[structure] and contents of the page.
- .b[CSS] defines the .blue[style] of the elements of the HTML.
- .b[JavaScript] defines the .blue[behaviour] of the elements of the page.

---
# HTML tags
HTML tags follow the same syntax as XML tags.
- Start and end tag name must be the same.

```html
<tag_name attribute_name="attribute_value">CONTENT</tag_name>
<empty_element attribute_name="attribute_value"/>
```

---
# HTML structure
This is the structure of a HTML document.
- `<!DOCTYPE html>`: Header
- `<html>`: Root element
- `<head>`: Metadata of the document
- `<body>`: Content of the document

```html
<!DOCTYPE html>
<html>
    <head>
      
      <meta charset="UTF-8">
      <title>Page title</title>
    </head>
    <body>
        
    </body>
</html>
```

---
# Block elements VS inline elements
.columns[
.column[
## Block elements
- Rendered in a new line.
- Can contain block or inline elements.
]
.column[
## Inline elements
- Rendered in the same line.
- Can contain inline elements this sample is testi
]
]

.center[[W3 Block and inline elements](https://www.w3schools.com/html/html_blocks.asp)]

---
# Semantic meaning
Choosing appropiate elements in you HTML is important.
- Gives information about the content is being displayed.
- Helps keeping everything organized and structured.
- Is easier to maintain and style.
- Helps with [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization)

---
# Headings

```html
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>
```
.center[[W3 Headings](https://www.w3schools.com/html/html_headings.asp)]

.scale-80[
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>
]

---
# Paragraphs
```html
<h1>Paragraphs</h1>
<p>This is a parapgraph</p>
<p>This is another parapgraph</p>
```

.scale-80[
<h1>Paragraphs</h1>
<p>This is a parapgraph</p>
<p>This is another parapgraph</p>
]

---
# Emphasis
- Both are .b[inline] elements.

```html
<p>Text with <em>emphasis</em> is written between &lt;em&gt; tags. 
By default, it is <em>italic</em>.</p>
<p>Text with <strong>strong emphasis</strong> is written between &lt;strong&gt; tags. 
By default, it is <strong>bold</strong>.</p>
```

.scale-80[
<p>Text with <em>emphasis</em> is written between < em > tags. By default, it is <em>italic</em>.</p>
<p>Text with <strong>strong emphasis</strong> is written between < strong > tags. 
By default, it is <strong>bold</strong>.</p>
]

---
# Ordered lists
```html
<p>This is an ordered list.</p>
<ol> 
  <li>First item.</li> 
  <li>Second item.</li> 
</ol>
```

.scale-80[
<p>This is an ordered list.</p>
<ol>
  <li>First item.</li>
  <li>Second item.</li>
</ol>
]

---
# Unordered lists
```html
<p>This is an unordered list.</p>
<ul> 
  <li>First item.</li> 
  <li>Second item.</li> 
</ul>
```

.scale-80[
<p>This is an unordered list.</p>
<ul>
  <li>First item.</li>
  <li>Second item.</li>
</ul>
]

---
# Links
- `<a>` element.
- URL specified with `href` attribute.

.center[[W3School Filepaths](https://www.w3schools.com/html/html_filepaths.asp)]

```html
<p>This is a <a href="https://joapuiib.github.io/itb/ASIX-LLMQ/UD2/01_html.html">link to this slides</a>.</p>
```

.scale-80[
<p>This is a <a href="https://joapuiib.github.io/itb/ASIX-LLMQ/UD2/01_html.html">link to this slides</a>.</p>
]

---
# Images
- `<img>` element.
- URL specified with `src` attribute.
- Alternative text with `alt` attribute.
- Title with `title` attribute. (Hover your mouse over the image)
- Width and height with `width` and `height` respectevely. (It's better to use CSS)
```html
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" title="HTML5"/>
```

.scale-80.img-25.center[
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" title="HTML5"/>
]

---
class: background-dark
# Film exercise: Part I
- Write a HTML document with the following content and format.
- Place it in __/film/index.html__

.scale-40[
<h1>Monty Python's Life of Brian</h1>
<img src="https://upload.wikimedia.org/wikipedia/en/1/18/Lifeofbrianfilmposter.jpg" alt="Life of brian poster">
<h2>Release date:</h2>
<p>17 Agoust 1979</p>
<h2>Argument</h2>
<p>Born on the original Christmas in the stable next door to Jesus Christ, 
Brian of Nazareth spends his life being mistaken for a messiah.</p>
<h2>Actors</h2>
<ul>
<li>Graham Chapman</li>
<li>John Cleese</li>
<li>Terry Gilliam</li>
<li>Eric Idle</li>
</ul>
<h2>Urls</h2>
<a href="https://www.imdb.com/title/tt0079470/">IMDB</a>
]

---
# Div
Generic block element that allows creating logical divisions inside the HTML document.

```html
<h1>Title </h1>
<p>A little bit of text</p>
<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" title="HTML5"/>
    <p>HTML image</p>
</div>
```

.scale-60.img-25[
<h1>Title </h1>
<p>A little bit of text</p>
<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" title="HTML5"/>
    <p>HTML image</p>
</div>
]

---
# Semantic divisions
Block element that allows creating logical divisions with semantic information

.columns[
.column[
```html
<article></article>
<aside></aside>
<details></details>
<figcaption></figcaption>
<figure></figure>
<footer></footer>
<header></header>
<main></main>
<mark></mark>
<nav></nav>
<section></section>
<summary></summary>
<time></time>
```
]

.column[
![semantic elements](img/img_sem_elements.gif)
]
]

- Positioning elements will be possible using CSS.

.center[[Semantic elements W3Schools](https://www.w3schools.com/html/html5_semantic_elements.asp)]

---
# Span
Inline container used to mark up a part of a text, or a part of a document.

Similar to `<div>` but inline.

```html
<p>This text is <span style="color: blue">blue</span></p>
```
.box[
<p>This text is <span style="color: blue">blue</span></p>
]

---
# Attributes
Just as XML, attributes can be set to any HTML element.

There are attributes for a specific element (e.g. `href` for `<a>`).

Also, there are attributes for all elements. These are the most important:
- `id=`: Identifies a element inside the whole document. 
   Any id has to be unique inside the document.
- `class=`: Used to specify a class for an HTML element.
   It is often used to point to a class name in a style sheet.
- `style=`: Used to specify CSS styles to a single element.

.center[
[id W3Schools](https://www.w3schools.com/html/html_id.asp)

[class W3Schools](https://www.w3schools.com/html/html_classes.asp)

[styles W3Schools](https://www.w3schools.com/html/html_styles.asp)
]

---
class: background-dark
# Film exercise: Part II
Update __/index.html__ to include:
- Exercises section identified with "exercises".
(Rectangular white rectangle, in the example)
- Link to the film exercise.

.scale-80[
<h1>Joan Puigcerver Markup Languages solutions</h1>
<section id="exercises" style="border-style: solid;">
<h2>Exercises</h2>
<ul>
  <li><a href="#15">Film</a>: Life of Brian film details.</li>
</ul>
</section>
]