3. Introduction to HTML

# 3. Introduction to HTML ###### tags: `Web Applications` HTML stands for **Hyper-Text Markup Language**, and is the language used to structure webpages. ## Basic tags >[!TLDR] >Most HTML tags must be closed with a backslash `/` with form: `<tag>content</tag>`. In the case that it's not specified, it must be interpreted as necesarilly requiring a closing tag, otherwise it will be marked as being *self-closing*. Some of the most important HTML tags are: * `<head>`: contains information about the HTML document; it will not be visually rendered by the Web browser. * `<meta>`: defines metadata about the document. It is *self-closing*. * `<body>`: includes the contents of the document that are to be visually rendered by the Web browser (e.g. audio, text, images, etc.) * `<title>`: the tile of the page. * `<link>`: it is a link to an external resource. * `<style>`: includes an embedded style sheet (e.g. a CSS one). * `<script>`: includes embedded code (e.g. JavaScript). Other very common tags: * `<p>`: defines a paragraph. * `<pre>`: includes pre-formatted text. This text will appear as is in the rendered webpage. * `<img>`: defines a message. It is *self-closing*. * `<a>`: defines an hyperlink. Another ones for text formatting: * `<em>`: emphasizes text, it generally amounts to text in italic. * `<strong>`: strongly emphasizes text, it generally amounts to boldface. * `<small>`: text with small size, typically for additional information or customary legal remarks. * `<i>`: italic. * `<b>`: boldface. Elements can be either **block elements** or **inline elements**. The former will be separated from the other elements by a line, while the later will be displayed in the same line. - Examples of block elements: `<p>`, `<pre>`, `<div>`, etc. - Examples of inline elements: `<em>`, `<strong>`, `<a>`, etc. Tags of the form `<h1>`, `<h2>`, ..., `<h6>`, etc. define **page headers**. `<h1>` is the largest headers whereas `<h6>` is the smallest one. **Comments** can be added using the following syntax ``. We can group different elements in HTML using the `<div>` and `<span>` tags. The former establishes a block element, whereas the later an inline one. This allows, for instance, the usage of CSS styles to all of the elements of the grouping. ### Encoding character set and UTF-8 Historically, the default encoding in the web is `ISO-8859`, but this standard is deprecated so we need to specify that we want to use the `UTF-8` encoding. It can done by writing `<meta charset="UTF-8">`. ### The img tag - The `<img>` tag stands for an image. - A written description ought to be provided alongside the image to make it accessible to people that might have difficulty seeing it (e.g. due to blindness). - The image can be scaled. For `<img src="logo-onyx.jpg" alt="Onyx logo" width="50" height="50"`>: - `src` stands for the source where the image can be found (it can be a full URL). - `alt` stands for the description of the image. - `width` and `height` specify the dimensions of the image. ### Hyperlinks Hyperlinks is used in HTML to links to external resources or other sections of the same document. `<a href="http://www.uc3m.es/">` declares an hyperlink to the website of the Carlos III University of Madrid official webpage. The text that is to be displayed can be written between the initial tag and the closing tag: `<a href="http://www.uc3m.es/">Page of the Carlos III University</a>`. If we wanted the hyperlink to be opened in another tab we would write: `<a href=”http://www.uc3m.es/” target=”_blank”>`. An hyperlink can be combined with other elements, e.g., with an image. ### Lists Ordered lists are declared with the tag `<ol>` while unordered lists are initiated with the `<ul>` tag. Bullets are produce with the `<li>` tag between either the `<ol>` or `<ul>` tags. It is possible to defined different kinds of bullets in the `<ol>` or `<ul>` tags. Further customization is done with CSS. ### Tables '#TODO' TODO Explain `<thead></thead>, <tbody></tbody> and <tfoot></tfoot>`. * `<th>`: cells in the head of the table; * `<td>`: cells in the body of the table (also holds for cells in the footer). Lines and other tweaks can be performed using CSS. ### Sections Documents are broken into section, they allow for better readability when they get larger. They are also useful to delimit customized visual styles, e.g., different styling for different parts of the document. A default, unspecific section is declared by the `<section>` tag, other tags exist for more specific purposes. The `<article>` tag defines a basic unit of a webpage, e.g., an *article* of a blog or newspaper. * `<header>`: defines a document or section header. * `<footer>`: defines a document or section footer. * `<nav>`: defines a section with navigation links. * `<aside>`: defines a section dedicated to secondary or auxiliary information. * `<address>`: defines a section dedicated to contact information. These tags have no influence in the visual rendering of the page by the Browser. We use them to give a better structure to the page and to be able to customize these blocks (which can be used many times over the webpage) through CSS. ### Forms TODO