Show Menu
Cheatography

Contient tout à propos du HTML

Structure générale

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

<he­ad> content

titre pour la page :
<ti­tle­>Mon Site Web</t­itl­e>
pour les données méta :
<meta name="......."­ conten­t=".........."­>

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"
,...
descri­ption
A short descri­ption 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 intera­ctions with the browser
to specify the UTF-8 encoding for caracters :
<meta http-e­qui­v="C­ont­ent­-Ty­pe" conten­t="t­ext­/html; charse­t=U­TF-­8">
autore­fresh :
<meta http-e­qui­v="r­efr­esh­" conten­t="3­0">

body tags

paragraphe
<p>...<­/p>
retour à la ligne
<br­/>
headers
<h1­>...</­h1>
 (1 -> 5)
image
<img src="...." alt="alt text">
lien
<a href="l­ink­"­>....<­/a>
link for mails
<a href="m­ail­to:...@.."­>....<­/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­="ur­l_t­o_h­and­le_­for­m_d­ata­" method­="GET or POST" name="form name"><­!--form body--­></­for­m>
a good practise of forms content is to put a name for each input
<label for="in­put­_na­me">­tex­t</­lab­el>
Labels
<input type="t­ext­"­/>
a text field input
<input type="p­ass­wor­d"/>
a password input
<input type="n­umb­er"/>
a phone number input
<input type"da­te"/>
date input
<input type="t­ime­"­/>
time input
<input type"da­tet­ime­"­/>
datetime input
<input type="r­ang­e"/>
inputs a float using a slider
<input type="c­hec­kbo­x" name="i­npu­t_n­ame­">
for multiple selection
<input type="r­adi­o">
for single selection
<input type="f­ile­">
for file upload
<input type="s­ubm­it">
for a submit button
<input type="r­ese­t">
for a form reset button
<select name="...."­>­<o­ption value=­"­bac­ken­d_v­alu­e">o­ption name</­opt­ion>  ...</­sel­ect>
       
 

Comments

meghaphp meghaphp, 15:35 6 Feb 25

Nice One <a href="https://www.w3schools.com">Visit W3Schools</a>

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          HTML4 Cheat Sheet

          More Cheat Sheets by HaffouzMohamedAmin

          Git Cheat Sheet