HTML
HTML
domain:port/path/filename
*MEDIA
*VIDEO
*AUDIO
*WEB STORAGE
With web storage, web applications can store data locally within the user's
browser.
localStorage.setItem("lastname", "Smith")
localStorage.getItem("lastname")
localStorage.removeItem("lastname");
*IMAGE
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
*IMAGE MAP
The HTML <map> tag defines an image map.
An image map is an image with clickable areas.
The areas are defined with one or more <area> tags.
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
*BACKGROUND IMAGE
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
*PICTURE
The HTML <picture> element gives web developers more flexibility in specifying
image resources.
The <picture> element contains one or more <source> elements, each referring to
different images through the srcset attribute.
This way the browser can choose the image that best fits the current view and/or
device
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
*LINKS
*BOOMARKS
*TABLE
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<caption>Monthly savings</caption>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
2,4,6
tr:nth-child(even) {
background-color: #D6EEEE;
}
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
*FAV ICON
*UTF-8
<meta charset="UTF-8">
*CANVAS
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
*SVG
*INPUT TYPE
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
*FORM ELEMENT
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
*HEAD
The HTML <head> element is a container for the following elements: <title>,
<style>, <meta>, <link>, <script>, and <base>.
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">