Scribd
Upload
24 views

HTML

The document provides information on various HTML elements and concepts including multimedia, video, audio, web storage, lists, iframes, images, links, forms, tables, and more. Key elements covered include <video>, <audio>, <ul>, <ol>, <iframe>, <img>, <input>, and <form>. Concepts like localStorage, image maps, and responsive design using <picture> are also summarized.

Uploaded by

Mohamed Aziz Rbii
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views

HTML

The document provides information on various HTML elements and concepts including multimedia, video, audio, web storage, lists, iframes, images, links, forms, tables, and more. Key elements covered include <video>, <audio>, <ul>, <ol>, <iframe>, <img>, <input>, and <form>. Concepts like localStorage, image maps, and responsive design using <picture> are also summarized.

Uploaded by

Mohamed Aziz Rbii
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

scheme://prefix.

domain:port/path/filename

*MEDIA

Multimedia on the web is sound, music, videos, movies, and animations.


Only MP4, WebM, and Ogg video are supported by the HTML standard.
Only MP3, WAV, and Ogg audio are supported by the HTML standard.

*VIDEO

<video width="320" height="240" controls autoplay muted>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

*AUDIO

<audio controls autoplay muted>


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

*WEB STORAGE

With web storage, web applications can store data locally within the user's
browser.

window.localStorage - stores data with no expiration date


window.sessionStorage - stores data for one session (data is lost when the browser
tab is closed)

localStorage.setItem("lastname", "Smith")
localStorage.getItem("lastname")
localStorage.removeItem("lastname");

*UNORDRED HTML LIST


<ul style="list-style-type:disc,circle,sqaure,none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

*ORDRED HTML LIST


<ol type="1, A, a, I, i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

*HTML DESCRIPTION LIST


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
*IFRAME
An inline frame is used to embed another document within the current HTML document
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>


<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

*IMAGE
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

APNG => .apng


GIF => .gif
ICO => .ico, .cur
JPEG => .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG => .png
SVG => .svg

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<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

An unvisited link is underlined and blue


A visited link is underlined and purple
An active link is underlined and red
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

a:link , visited, hover, active

*BOOMARKS

<h2 id="C4">Chapter 4</h2>


<a href="#C4">Jump to Chapter 4</a>

*HTML Layout Elements


<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

*HTML Layout Techniques


CSS framework
CSS float property
CSS flexbox
CSS grid

*HTML Formatting Elements


<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

*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>

Semantic Elements in HTML

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

*FAV ICON

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

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

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">


</canvas>

*SVG

VG defines vector-based graphics in XML format.


SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation

*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>

<input type="submit" formaction="/action_page2.php" value="Submit as Admin">


<input type="submit" formenctype="multipart/form-data" value="Submit as
Multipart/form-data">
<input type="submit" formmethod="post" value="Submit using POST">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
<input type="submit" formnovalidate="formnovalidate" value="Submit without
validation">

*HEAD

The HTML <head> element is a container for the following elements: <title>,
<style>, <meta>, <link>, <script>, and <base>.

Define the character set used:


<meta charset="UTF-8">

Define keywords for search engines:


<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:


<meta name="description" content="Free Web tutorials">

Define the author of a page:


<meta name="author" content="John Doe">

Refresh document every 30 seconds:


<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

You might also like