HTML Cheat Sheet

A Programming › HTML cheat sheet in English by HaffouzMohamedAmin

Contient tout à propos du HTML

4,174 views 595 downloads 5 Feb 2025 History

PRs

Structure générale

<!DOCTYPE html>
<html lang="en">
<head>
    <!--ici l'en-tête du document-->
</head>
<body>
    <!--corps du document-->
</body>
</html>

<head> content

titre pour la page :

<title>Mon Site Web</title>

pour les données méta :

<meta name="......." content="..........">

Exemples de métadata

name	content
`author`	ton nom
`keywords`	Mots-clés qui , si saisit dans le moteur de recherche, conduisent à ton site
`category`	catégorie du site
`language`	`"fr"`,`"en"`,`"de"`,`"es"`,...
`description`	A short description for the website
`copyright`	Les copyrights du site
`generator`	les différents logiciels utilisés
`date`	Date de création du site

metadata http-equiv

used to modify the aspect of the website and his interactions with the browser

to specify the UTF-8 encoding for caracters :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

autorefresh :

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

body tags

paragraphe	`<p>...</p>`
retour à la ligne	`<br/>`
headers	`<h1>...</h1>` (1 -> 5)
image	`<img src="...." alt="alt text">`
lien	`<a href="link">....</a>`
link for mails	`<a href="mailto:...@..">....</a>`

Unordered lists

<ul>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ul>

Ordered lists

<ol>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ol>

Definition list

<dl>
    <dt>def title</dt>
    <dd>def paragraph</dd>

    <dt>def title</dt>
    <dd>def paragraph</dd>
</dl>

Table Layout

    <table>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td></td><td>3</td></tr>
        <tr><td rowspan=2>1</td><td>2</td><td>3</td></tr>
        <tr><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>

.

Forms

<form action="url_to_handle_form_data" method="GET or POST" name="form name"></form>

a good practise of forms content is to put a name for each input

<label for="input_name">text</label> Labels

<input type="text"/> a text field input

<input type="password"/> a password input

<input type="number"/> a phone number input

<input type"date"/> date input

<input type="time"/> time input

<input type"datetime"/> datetime input

<input type="range"/> inputs a float using a slider

<input type="checkbox" name="input_name"> for multiple selection

<input type="radio"> for single selection

<input type="file"> for file upload

<input type="submit"> for a submit button

<input type="reset"> for a form reset button

<select name="...."><option value="backend_value">option name</option> ...</select>

Comments (1)

meghaphp 15:34 6 Feb 2025

Nice Deta