Headings

There are multiple types of headings in HTML

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Paragraphs

You can define paragraphs in HTML

this is a paragraph

this is an other paragraph

<p>this is a paragraph</p>
<p>this is an other paragraph</p>

Links

You can add links to your HTML page

this is a link to my website's main page

<a href="https://ohfroot.neocities.org/">this is a link to my website's main page</a>

When clicking on a link, you can chose different targets

this link opens in the same window/tab it was clicked
this link opens in a new window or tab
this link opens in the parent frame
this link opens in the full body of the window

<a href="https://ohfroot.neocities.org/" target="_self">this link opens in the same window/tab it was clicked</a><br>
<a href="https://ohfroot.neocities.org/" target="_blank">this link opens in a new window or tab</a><br>
<a href="https://ohfroot.neocities.org/" target="_parent">this link opens in the parent frame</a><br>
<a href="https://ohfroot.neocities.org/" target="top">this link opens in the full body of the window</a>

Images can be used as links

<a href="https://ohfroot.neocities.org/" target="_blank">
<img src="https://i.ibb.co/YPD8tmh/output-onlinepngtools.png" alt="a carrot :0" class="example" style="width:30%; margin:20px 0px 20px 0px auto">
</a>

You can use links to create bookmarks on your page : they will redirect you to other sections of it

jump to the section about HTML borders (this section has "border" as an id)

<a href="#borders"> jump to the section about HTML borders (this section has "border" as an id)</a>

Images

You can insert images to your website via HTML

<img src="https://i.ibb.co/4RLjZBJ/pixil-frame-0.png" alt="a bunny :3" style="width:30%; margin:20px 0px 20px 0px auto;">

Images can have different floating points to define where they will float regarding the text : example with those two arrows

<img src="https://i.ibb.co/cCnPVZN/grey-arrow.png" alt="a grey arrow" style="float:left; width:10%; margin:20px 0px 20px 0px auto">
<img src="https://i.ibb.co/cCnPVZN/grey-arrow.png" alt="a grey arrow" style="float:right; width:10%; margin:20px 0px 20px 0px auto; transform: rotateY(180deg)">

Using links, you can do what is called image mapping : depending on where you click on your image, a different link will open

<img src="https://i.ibb.co/4VNtPDX/puter-1.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="screen" title="screen" href="https://www.apple.com/us/search/screen?src=globalnav" coords="26,25,161,101" shape="rect">
    <area target="" alt="keyboard" title="keyboard" href="https://www.apple.com/us/search/Keyboard?src=serp" coords="16,160,35,138,148,138,167,160" shape="poly">
    <area target="" alt="mouse" title="mouse" href="https://www.apple.com/us/search/mouse?src=globalnav" coords="164,191,153,198,155,223,184,227,182,202,177,193" shape="poly">
</map>

A favicon is the little image that represents a website. On this website, the Favicon is a blue house!

See more about favicons here

Line breaks

Line breaks have to be manually inserted into your code

this is a paragraph without a line break

this is a paragraph
with a line break

<p>this is a paragraph
without a line break</p>
<p>this is a paragraph<br>
with a line break</p>

Font sizes

You can chose the size of your text

This text's size is 30px

This text's size is 40px

This text's size is 10px

<p style="font-size: 30px;">This text's size is 30px</p>
<p style="font-size: 40px;">This text's size is 40px</p>
<p style="font-size: 10px;">This text's size is 10px</p>

Code vs display

In HTML, extra spaces or line jumps are not rendered

This paragraph contains a lot of spaces and line jumps, but the browser ignores them

<p>This paragraph           contains a lot
of spaces and line
      
      
      
jumps, but the browser
      
          ignores them
</p>

Text and background colors

You can change the color of your text and its background

The color of this text is:#80b5b0
the color of its background is: #deebeb

The color of this text is: grey
the color of its background is: #f9cebd

The color of this text is: rgb(220, 184, 199)
the color of its background is: #f8efc6

<p style="color: #80b5b0; background-color: #deebeb;">
The color of this text is:#80b5b0<br>
the color of its background is: #deebeb</p>
<p style="color: grey; background-color: #f9cebd;">
The color of this text is: grey<br>
the color of its background is: #f9cebd</p>
<p style="color: rgb(220, 184, 199); background-color: #f8efc6;">
The color of this text is: rgb(220, 184, 199)<br>

Text alignment

There are multiple ways to align text

this paragraph is left aligned

this paragraph is centered

this paragraph is rigth aligned

the following paragraph is justified:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

<p style="text-align: left;">this paragraph is left aligned</p>
<p style="text-align: center;">this paragraph is centered</p>
<p style="text-align: right;">this paragraph is rigth aligned</p>
<p style="text-align: justify;">the following paragraph is justified:<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
</p>

Font styles

A text can have different styles

This text is bold

This text is important!

This text is italic

This text is emphasized

This is some smaller text.

this word is marked.

this ~~word~~ is deleted

this word is underlined

this is a _subscripted text

This is a ^{superscripted} text

<p><b>This text is bold</b></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><small>This is some smaller text.</small></p>
<p>this <mark>word</mark> is marked.</p>
<p>this <del>word</del> is deleted</p>
<p>this <ins>word</ins> is underlined</p>
<p>this is a <sub>subscripted</sub> text</p>
<p>This is a <sup>superscripted</sup> text</p>

Comments

You can add comments to your HTML code
They are indications or precisions that won't show on the page

in this code, there is a hidden comment

<p>
in this code, there is a
<!-- comment -->
hidden comment
</p>

Borders

You can add borders to your text
The padding is the space between the text and the border
The margin is the space outside the border

here are

different

border styles

10px thick grey bordered text with 30px padding and 50px margin

<p style="border: 1px solid; border-color: #80b5b0;">here are</p>
<p style="border: 3px solid; border-color: #d0b2d3">different</p>
<p style="border: 5px solid; border-color: #97c1a9;">border styles</p>
<p style="border: 10px solid grey; padding: 30px; margin: 50px;">10px thick grey bordered text with 30px padding and 50px margin</p>

The title to your HTML page

The title to an HTML page is set using the <title> attribute in the head of the page
It will appear next to your favicon

<title>training site remastered</title>

Tables

You can define tables using HTML
The header of the table uses the <th> element (whether it is a horizontal header or a vertical header)

Person 1	Person 2	Person 3
Emil	Tobias	Linus
16	14	10

<table>
   <tr>
      <th>Person 1</th>
      <th>Person 2</th>
      <th>Person 3</th>
   </tr>
   <tr>
      <td>Emil</td>
      <td>Tobias</td>
      <td>Linus</td>
   </tr>
   <tr>
      <td>16</td>
      <td>14</td>
      <td>10</td>
   </tr>
</table>

Tables have different width and line height

This table spans 80% of the page's total width

Firstname (this column spans 50% of the table's total width)	Lastname (this is part of the table's header)	Age
Jill (this line is 200px)	Smith	50
Eve	Jackson	94
John	Doe	80

<table style="width: 80%;">
   <tr>
      <th style="width: 50%;">Firstname <span style="color: #c76e6b;">(this column spans 50% of the table's total width)</span></th>
      <th>Lastname <span style="color: #c76e6b;">(this is part of the table's header)</span></th>
      <th style="width: 10%">Age</th>
   </tr>
   <tr style="height: 200px;">
      <td style="text-align: center;">Jill <span style="color: #c76e6b;">(this line is 200px)</span></td>
      <td>Smith</td>
      <td>50</td>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
   </tr>
   <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
   </tr>
</table>

The colspan and rowspan elements allow you to combine multiple cells into one

this is the table's caption
Name		Age
Jill	Smith	50
Eve	Jackson	94

<table>
   <caption style="font-size: 10px;">
      this is the table's caption
   </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>

Name	Jill
Phone	555-1234
Phone	555-8745

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

Add adjacent colomns to a colgroup with a col element to define a style for all of those columns

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14

<table>
   <colgroup>
      <col span="2" style="background-color: #d6eeee;">
      <col span="1">
      <col span="3" style="background-color: pink;">
   </colgroup>
   <tr>
      <th>MON</th>
      <th>TUE</th>
      <th>WED</th>
      <th>THU</th>
      <th>FRI</th>
      <th>SAT</th>
      <th>SUN</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
   </tr>
</table>

You can difine different sizes for the spacing and the padding of your table

With Padding
hello	hello	hello
hello	hello	hello
hello	hello	hello

With Spacing
hello	hello	hello
hello	hello	hello
hello	hello	hello

<table>
   <caption>With Padding</caption>
   <tr>
      <td style="padding: 30px;">hello</td>
      <td style="padding: 30px;">hello</td>
      <td style="padding: 30px;">hello</td>
   </tr>
   <tr>
      <td style="padding: 30px;">hello</td>
      <td style="padding: 30px;">hello</td>
      <td style="padding: 30px;">hello</td>
   </tr>
   <tr>
      <td style="padding: 30px;">hello</td>
      <td style="padding: 30px;">hello</td>
      <td style="padding: 30px;">hello</td>
   </tr>
</table>
<br>
<table style="border-spacing: 30px;">
   <caption>With Spacing</caption>
   <tr>
      <td>hello</td>
      <td>hello</td>
      <td>hello</td>
   </tr>
   <tr>
      <td>hello</td>
      <td>hello</td>
      <td>hello</td>
   </tr>
   <tr>
      <td>hello</td>
      <td>hello</td>
      <td>hello</td>
   </tr>
</table>

This page indicates other elements for styling your table (color even columns or rows, make a line change color when you hover on it, have separators only between lines)
Such styling elements use css styling

Lists

You can define different types of lists using HTML

unordered lists can be defined using different bullet points

default
bullet
points (discs)

disc
bullet
points

circle
bullet
points

square
bullet
points

custom
bullet
points

no
bullet
point

<ul>
   <li>default</li>
   <li>bullet</li>
   <li>points (discs)</li>
</ul>
<ul style="list-style-type:disc;">
   <li>disc</li>
   <li>bullet</li>
   <li>points</li>
</ul>
<ul style="list-style-type:circle;">
   <li>circle</li>
   <li>bullet</li>
   <li>points</li>
</ul>
<ul style="list-style-type:square;">
   <li>square</li>
   <li>bullet</li>
   <li>points</li>
</ul>
<ul  style="list-style-type: ' ⦾ ';">
   <li>custom</li>
   <li>bullet</li>
   <li>points</li>
</ul>
<ul style="list-style-type:none;">
   <li>no</li>
   <li>bullet</li>
   <li>point</li>
</ul>

ordered lists can be diffined using different ordering systems

default
ordered
list (1, 2, 3, ...)

default
ordered
list starting from 38

numbered
ordered
list

uppercase letter
ordered
list

lowercase letter
ordered
list

uppercase roman
ordered
list

lowercase roman
ordered
list

<ol>
   <li>default</li>
   <li>ordered</li>
   <li>list (1, 2, 3, ...)</li>
</ol>
<ol start="38">
   <li>default</li>
   <li>ordered</li>
   <li>list starting from 38</li>
</ol>
<ol type="1">
   <li>numbered</li>
   <li>ordered</li>
   <li>list</li>
</ol>
<ol type="A">
   <li>uppercase letter</li>
   <li>ordered</li>
   <li>list</li>
</ol>
<ol type="a">
   <li>lowercase letter</li>
   <li>ordered</li>
   <li>list</li>
</ol>
<ol type="I">
   <li>uppercase roman</li>
   <li>ordered</li>
   <li>list</li>
</ol>
<ol type="i">
   <li>lowercase roman</li>
   <li>ordered</li>
   <li>list</li>
</ol>

The div element

The <div> element is used as a container for other HTML elements.

lorem ipsum

this is a div

dolor sit amet.

lorem ipsum<div style="background-color: lightgrey;">this is a div</div>dolor sit amet.

Use the CSS margin property set to auto to center the div element as shown here

You can set div elements side by side using css

London

London is the capital city of England.

London has over 13 million inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

Rome

Rome is the capital city of Italy.

Rome has almost 3 million inhabitants.

<style>
   div.mycontainer {
   width:100%;
   overflow:auto;
   }
   div.mycontainer div {
   width:33%;  
   float:left;
   }
</style>
<div class="mycontainer">
<div style="background-color:#FFF4A3;">
   <h2>London</h2>
   <p>London is the capital city of England.</p>
   <p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
   <h2>Oslo</h2>
   <p>Oslo is the capital city of Norway.</p>
   <p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
   <h2>Rome</h2>
   <p>Rome is the capital city of Italy.</p>
   <p>Rome has almost 3 million inhabitants.</p>
</div>

Similar effects as the example above can be done using inline-blocks, flex and grids

Classes and Ids

The HTML class attribute is used to specify a class for an HTML element. This allows you to define a style for each element which is set as this specific class

Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.

London

Paris

Tokyo

<style>
   .city {
   background-color: #FFC0C7;
   color: white;
   padding: 10px;
   } 
   .main {
   text-align: center;
   }
</style>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Ids are similar to classes, but the are only used by one element at a time. In the stylesheet, they use an # symbol

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

My Cities

<style>
   #myHeader {
   background-color: lightblue;
   color: white;
   padding: 40px;
   text-align: center;
   }
</style>

<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<h1 id="myHeader">My Cities</h1>

The span element

Use the span element to modify only parts of a text inline

My mother has blue eyes and my father has brown eyes.

<p>My mother has <span style="color: rgb(0, 184, 236); font-weight: bold;">blue</span> eyes and my father has <span style="color: rgb(141, 70, 54); font-weight: bold;">brown</span> eyes.</p>

Iframes

Iframes are used to include a view of another website into your page

<iframe src="https://aegi.neocities.org/main" style="height: 500px; width: 100%; border:2px solid black;" title="Iframe example"></iframe>

The HTML head

You can use the head element to:

define the title of the page
define a style
link a css stylesheet or a javascript file
use some meta tags to:

define the character set used:
define keywords for search engines:
define a description of your web page:
define the author of a page
refresh document every 30 seconds
set the viewport (size of your pages depending onthe device)

define your java scripts
use the base tag to define the base target of your links

More info on that here

Tag	Description
`<head>`	Defines information about the document
`<title>`	Defines the title of a document
`<base>`	Defines a default address or a default target for all links on a page
`<link>`	Defines the relationship between a document and an external resource
`<meta>`	Defines metadata about an HTML document
`<script>`	Defines a client-side script
`<style>`	Defines style information for a document

HTML responsive web design

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive images are images that scale nicely to fit any browser size
If the CSS width property is set to 100%, the image will be responsive and scale up and down

The image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

Example here

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

The HTML <picture> element allows you to define different images for different browser window sizes

Example here

<picture>
   <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
   <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
   <source srcset="flowers.jpg">
   <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

The text size can be set with a "vw" unit, which means the "viewport width" That way the text size will follow the size of the browser window

Responsive Text

Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

In addition to resize text and images, it is also common to use media queries in responsive web pages
With media queries you can define completely different styles for different browser sizes
In this example: resizing the browser window will make it so that the three div elements below will display horizontally on large screens and stack vertically on small screens

Example here

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

HTML computer code

HTML contains several elements for defining user input and computer code.

Tag	Description
`<code>`	Defines programming code
`<kbd>`	Defines keyboard input
`<samp>`	Defines computer output
`<var>`	Defines a variable
`<pre>`	Defines preformatted text

Save the document by pressing Ctrl + S

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

HTML semantics

A semantic element clearly describes its meaning to both the browser and the developer

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content

Tag	Description
`<article>`	Defines independent, self-contained content
`<aside>`	Defines content aside from the page content
`<details>`	Defines additional details that the user can view or hide
`<figcaption>`	Defines a caption for a `<figure>` element
`<figure>`	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
`<footer>`	Defines a footer for a document or section
`<header>`	Specifies a header for a document or section
`<main>`	Specifies the main content of a document
`<mark>`	Defines marked/highlighted text
`<nav>`	Defines navigation links
`<section>`	Defines a section in a document
`<summary>`	Defines a visible heading for a `<details>` element
`<time>`	Defines a date/time

HTML symbols and entities

Some characters are reserved in HTML
In order for the browser to not consider them as HTML attributes, their entity names or entity numbers can be used
Using the same method, symbols or letters that are not present on your keyboard can be added to HTML using entities

Char	Number	Entity	Description
©	©	©	COPYRIGHT
®	®	®	REGISTERED
€	€	€	EURO SIGN
™	™	™	TRADEMARK
←	←	←	LEFT ARROW
↑	↑	↑	UP ARROW
→	→	→	RIGHT ARROW
↓	↓	↓	DOWN ARROW
♠	♠	&spades;	SPADE
♣	♣	&clubs;	CLUB
♥	♥	&hearts;	HEART
♦	♦	&diams;	DIAMOND

Result	Description	Name	Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	trademark	®	®

Char	Number	Entity	Description
∀	∀	∀	For all
∂	∂	∂	Partial differential
∃	∃	∃	There exists
∅	∅	∅	Empty sets
∇	∇	∇	Nabla
∈	∈	∈	Element of
∉	∉	∉	Not an element of
∋	∋	&ni;	Contains as member
∏	∏	∏	N-ary product
∑	∑	∑	N-ary summation

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

Char	Number	Entity	Description
Α	Α	Α	GREEK ALPHA
Β	Β	Β	GREEK BETA
Γ	Γ	Γ	GREEK GAMMA
Δ	Δ	Δ	GREEK DELTA
Ε	Ε	Ε	GREEK EPSILON
Ζ	Ζ	Ζ	GREEK ZETA

I will display €

<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

The same system can be used to display emojis or any character for that matter 💻

HTML forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing

Type	Description
`<input type="text">`	Displays a single-line text input field
`<input type="radio">`	Displays a radio button (for selecting one of many choices)
`<input type="checkbox">`	Displays a checkbox (for selecting zero or more of many choices)
`<input type="submit">`	Displays a submit button (for submitting the form)
`<input type="button">`	Displays a clickable button

Tag	Description
`<form>`	Defines an HTML form for user input
`<input>`	Defines an input control
`<textarea>`	Defines a multiline input control (text area)
`<label>`	Defines a label for an `<input>` element	The for attribute of the `<label>` tag should be equal to the id of the `<input>` element to bind them together.
`<fieldset>`	Groups related elements in a form
`<legend>`	Defines a caption for a `<fieldset>` element
`<select>`	Defines a drop-down list
`<optgroup>`	Defines a group of related options in a drop-down list
`<option>`	Defines an option in a drop-down list
`<button>`	Defines a clickable button
`<datalist>`	Specifies a list of pre-defined options for input controls
`<output>`	Defines the result of a calculation

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form

Attribute restriction	Description
checked	Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field

Text fields

First name:

Last name:

Passwords

Username:

Password:

Radio

HTML
CSS
JavaScript

Checkbox

I have a bike
I have a car
I have a boat

Button

Color

Select your favorite color:

Date

Birthday:

You can also use the min and max attributes to add restrictions to dates

Enter a date before 1980-01-01:

Enter a date after 2000-01-01: Birthday (month and year):

Month

Datetime-local

Birthday (date and time):

Time

Select a time:

Week

Select a week:

Number

Quantity (between 1 and 5):

Range

Volume (between 0 and 50):

Search

Search Google:

Tel

Enter your phone number:

URL

Add your homepage:

Email

Enter your email:

Input file

Select a file:

Submit and Reset

Image as an input button

<form>

  <h2>Text fields</h2>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">

  <h2>Passwords</h2>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">

  <h2>Radio</h2>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <h2>Checkbox</h2>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>

  <h2>Button</h2>
  <input type="button" onclick="alert('Hello World!')" value="Click Me!">

  <h2>Color</h2>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">

  <h2>Date</h2>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <p style="color:#c76e6b;">You can also use the min and max attributes to add restrictions to dates</p>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
  <label for="bdaymonth">Birthday (month and year):</label>

  <h2>Month</h2>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <h2>Datetime-local</h2>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">

  <h2>Time</h2>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">

  <h2>Week</h2>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">

  <h2>Number</h2>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

  <h2>Range</h2>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">

  <h2>Search</h2>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">

  <h2>Tel</h2>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

  <h2>URL</h2>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">

  <h2>Email</h2>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">

  <h2>Input file</h2>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
  <h2>Submit and Reset</h2>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">

  <h2>Image as an input button</h2>
  <input type="image" src="https://i.ibb.co/9tgYdbx/submit.png" alt="Submit" width="48" height="48">

</form>

There are different attributes for HTML inputs

Value

The input value attribute specifies an initial value for an input field

First name:

Last name:

Readonly

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it)

First name:

Last name:

Disabled

A disabled input field is unusable and un-clickable

First name:

Last name:

Size

The input size attribute specifies the visible width, in characters, of an input field

First name:

PIN:

Maxlength

The input maxlength attribute specifies the maximum number of characters allowed in an input field

First name:

PIN:

Min and Max

The input min and max attributes specify the minimum and maximum values for an input field

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

Multiple

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field

Select files:

Pattern

The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password
Tip: Use the global title attribute to describe the pattern to help the user
(You cannot submit the form if a special character is entered)

Country code:

Placeholder

The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format)

Enter a phone number:

Required

The input required attribute specifies that an input field must be filled out before submitting the form

Username:

Step

The input step attribute specifies the legal number intervals for an input field
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Points:

Autofocus

The input autofocus attribute specifies that an input field should automatically get focus when the page loads
(It was not used here as to not hinder the page)

First name:

Last name:

Height and Width

The input height and width attributes specify the height and width of an image input element

First name:

Last name:

List

The input list attribute refers to a datalist element that contains pre-defined options for an input element

Autocomplete

The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off

First name:

Last name:

Email:

<form>
  <h2>Value</h2>
  <p>The input value attribute specifies an initial value for an input field</p>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe">

  <h2>Readonly</h2>
  <p>A read-only input field cannot be modified (however, a user can tab to it, highlightit, and copy the text from it)</p>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John" readonly><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe">

  <h2>Disabled</h2>
  <p>A disabled input field is unusable and un-clickable</p>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">

  <h2>Size</h2>
  <p>The input size attribute specifies the visible width, in characters, of an input field</p>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">

  <h2>Maxlength</h2>
  <p>The input maxlength attribute specifies the maximum number of characters allowed in an input field</p>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">

  <h2>Min and Max</h2>
  <p>The input min and max attributes specify the minimum and maximum values for an input field</p>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

  <h2>Multiple</h2>
  <p>The input multiple attribute specifies that the user is allowed to enter more than one value in an input field</p>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>

  <h2>Pattern</h2>
  <p>The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted<br>
    The pattern attribute works with the following input types: text, date, search, url, tel, email, and password<br>
    Tip: Use the global title attribute to describe the pattern to help the user<br>
    (You cannot submit the form if a special character is entered)</p>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

  <h2>Placeholder</h2>
  <p>The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format)</p>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

  <h2>Required</h2>
  <p>The input required attribute specifies that an input field must be filled out before submitting the form</p>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <h2>Step</h2>
  <p>The input step attribute specifies the legal number intervals for an input field<br>
    Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.</p>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">

  <h2>Autofocus</h2>
  <p>The input autofocus attribute specifies that an input field should automatically get focus when the page loads</p>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">

  <h2>Height and Width</h2>
  <p>The input height and width attributes specify the height and width of an image input element</p>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="https://i.ibb.co/9tgYdbx/submit.png" alt="Submit" width="48" height="48">

  <h2>List</h2>
  <p>The input list attribute refers to a datalist element that contains pre-defined options for an input element</p>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

  <h2>Autocomplete</h2>
  <p>The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off</p>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

Here is a page with more informations about Input form* Attributes
Those attributes help to decide what happens when a form is sent from the server side

HTML multimedia

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

Common video formats

Format	File	Description
MPEG	.mpg .mpeg	MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML.
AVI	.avi	AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV	.wmv	WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime	.mov	QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers.
RealVideo	.rm .ram	RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not play in web browsers.
Flash	.swf .flv	Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
Ogg	.ogg	Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
WebM	.webm	WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.
MPEG-4 or MP4	.mp4	MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube.

Common audio formats

Format	File	Description
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers.
RealAudio	.rm .ram	RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.
WMA	.wma	WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers.
AAC	.aac	AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.
WAV	.wav	WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML.
Ogg	.ogg	Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
MP3	.mp3	MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.
MP4	.mp4	MP4 is a video format, but can also be used for audio. Supported by all browsers.

HTML videos

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

To start a video automatically, use the autoplay attribute.

Add muted after autoplay to let your video start playing automatically (but muted).

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

HTML youtube videos

The easiest way to display a video in yout HTML page is to use youtube combined with the iframe tag

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

Add loop=1 to let your video loop forever.

Add controls=0 to not display controls in the video player.

Separating video links with a comma will play the videos as a playlist.

<iframe width="320" height="310" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=1&autoplay=1&muted=1&loop=1"></iframe>

HTML audio

HTML audios use the same controls as html videos

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

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

How to create a web page using HTML?

Table of contents

Headings

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

Paragraphs

Links

Images

Line breaks

Font sizes

Code vs display

Text and background colors

Text alignment

Font styles

Comments

Borders

The title to your HTML page

Tables

Lists

The div element

London

Oslo

Rome

Classes and Ids

London

Paris

Tokyo

My Cities

The span element

Iframes

The HTML head

HTML responsive web design

Responsive Text

HTML computer code

HTML semantics

HTML symbols and entities

HTML forms

Text fields

Passwords

Radio

Checkbox

Button

Color

Date

Month

Datetime-local

Time

Week

Number

Range

Search

Tel

URL

Email

Input file

Submit and Reset

Image as an input button

Value

Readonly

Disabled

Size

Maxlength

Min and Max

Multiple

Pattern

Placeholder

Required

Step

Autofocus

Height and Width

List

Autocomplete

HTML multimedia

HTML videos

HTML youtube videos

HTML audio

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ