Comment créer une page Web ?
Sommaire:
1. Eléments necessaires pour créer une page Web.
2. Structure de la page Web: le langage HTML.
3. Mise en page de la page Web: le langage css.
4. Création d'un menu de navigation.
Le langage HTML
1. Création d'un fichier HTML.
2. Structure d'un fichier HTML
3. Le langage HTML
4. Ajouter une image à l'aide du langage HTML
5. Ajouter un lien à l'aide du langage HTML
- Un logiciel de prise de note: N'importe quel logiciel fonctionne bloc-note, Notepad++,Sublim Text, CoffeeCup...
- Un navigateur internet pour visualiser votre site internet. (Optionnel)
Création d'un fichier HTML.
Dans votre logiciel de texte, enregistrer un premier document en HTML. Pour cela, il va falloir "forcer" le format de votre fichier.
Création d'un fichier HTML.
Sous Sublime Text ou Notepad++
Sous Bloc-note
ou
Création d'un fichier HTML.
Une fois votre fichier créé, vous pouvez double-cliquer dessus dans votre dossier, il va s'ouvrir par défaut avec un navigateur internet dans lequel vous pourrez voir le résultat de vos lignes de code. Pour voir les modifications, il faut que votre fichier soit bien sauvegardé (ctrl+s maintenant qu'il a été enregistré une première fois) et cliquer sur l'icône de mise à jour de votre navigateur.
Structure d'un fichier HTML.
Le HTML fonctionne sous le principe de balise c'est-à-dire de petits mots-clés qui sont entourés de chevrons: < > Vous pouvez les retrouvez en bas à gauche de votre clavier. La touche majuscule vous permet d'atteindre le chevron qui ferme la balise
Structure d'un fichier HTML.
<!DOCTYPE html> Cette balise renseigne le navigateur sur le type de langage qui va être utilisé. <html>....</hmtl> Cette balise renseigne sur le début et la fin de votre code. <head>...</head> Cette balise renseigne l'en-tête de la page . C'est grâce à elle qu'on va pouvoir s'occuper de tout ce qui est interne au site web mais sans le voir. On peut ajouter le référencement de notre site web , la liaison avec la feuille de style CSS, mais aussi la balise de titre qui donnera un nom au niveau de l'onglet à notre page. <body>...</body> Cette balise indique la partie visible de votre code qui sera visible sur la page affichée par le navigateur.
Le langage HTML
La structuration de votre page web se fait entre les balises <body>...</body>. - <p>...</p> correspond à un paragraphe.
- <h1>...</h1> correspond au titre principal.
- <h2>...</h2> correspond au titre secondaire.
- <h3>...</h3>;<h4>...</h4> et ainsi de suite donne des titres plus petits.
- <strong>...</strong> met les mots entre les baiises en gras.
- <em>...</em> met les mots entre les balises en avant (souvent en italique).
- <sub>...</sub> met les caractères entre les balises en indices.
- <sup>...</sup> met les caractères entre les balises en exposant.
- <blockquote>...</blockquote> met le texte comme citation.
- <u>...</u> souligne le texte.
- <br>...</br> permet d'aller à la ligne.
Le langage HTML: suite
La structuration de votre page web se fait entre les balises <body>...</body>. - <ul> permet de créer une liste avec des points.
- <ol> permet de créer une liste numérotée.
- <li> correspond aux différents éléments de la liste.
- <table> créer un tableau
- <tr> créer une nouvelle ligne.
- <th> créer une nouvelle colonne (en gras).
- <td> créer une nouvelle colonne
Exemple de création d'une page Web avec le langage HTML.
Lignes de code de la page
Page Web obtenue
Ajouter une image sur votre page web à l'aide du langage HTML:
Pour ajouter une image, il faut d'abord l'enregistrer dans votre dossier. Donner un nom simple à votre dossier (il va falloir l'écrire dans votre fichier) et sans espace. Noter ensuite <img src="lien vers l'image"> Pour modifier la taille ou la dimension d'une image <img src="nom de l'image.jpg" width="500" height="500"> width indique le nombre de pixel en largeur. height indique le nombre de pixel en hauteur.
Le langage CSS
1. Création d'un fichier CSS.
2. Comment indiquer votre ficher CSS au fichier HTML.
3. Customisation d'une page Web: le langage CSS.
cRéation d'un ficher css
Dans votre logiciel texte, enregistrez un deuxième document en.css puis le nommer style.css. Comme pour le premier fichier, il va falloir "forcer" le format de votre fichier.
Sous Sublime Text
Sous Bloc Note
OU
Comment indiquer votre fichier CSS au fichier HTML ?
Pour que votre fichier HTML sache que votre fichier .css existe, il va falloir le lui indiquer. On ajoute un lien qui permet de relier le fichier HTML au fichier css que l'on va utiliser par la suite pour styliser le contenu de la page web. Ceci se fait au niveau de la balise <head>....</head> comme suit : <head> <title> nom du site </title> <meta charset="uft-8"> <link rel="stylesheet" type="text/css"href="emplacement du fichier .css"> </head> <title>...</title> texte afficher dans l'onglet. <meta charset="uft-8"> permet de s'assurer que tous les caractères de l'alpahabet françaos vont être bien compris (optionnel)
Customisation du site Web
Dans un premier temps, on selectionne la balise que l'on voudrait cibler dans le fichier HTML. Exemple: On souhaite modifier la couleur du texte du paragraphe de la balise suivante qui se trouve dans le fichier HTML pour le mettre en rouge: <h1> titre principal </h1> Pour faire cela, on cible l'élément h1 pour titre et on écrit sur le fichier. css le code suivant : h1{ Tout ce qui sera inscrit entre ces parenthèse va personnaliser la balise : ce sont les propriétés CSS}
Customisation du site Web: commandes
color: #000000; pour changer la couleur du texte. background-color: couleur; pour changer la couleur du fond du texte. background: URL("l'adresse URL de l'image"); pour mettre une image en fond de texte. background-size: 300px; pour changer la taille de l'image (Ici l'image aura une taille de 300 pixels). background-size: 100%; pour afficher la taille de l'image sur tout l'écran. font-size: 300px; pour ajuster la taille des éléments concernés. font-weight: bold; pour mettre en gras. font-weight: normal; pour empêcher de mettre en gras cet élément. font-family: serif; pour choisir la police du texte (Ici la police du texte choisi est serif). Attention: si on met une police non reconnue par le navigateur va afficher ce qu'il veut). font-style: italic; pour mettre en italique. padding: 15px; pour ici mettre un écart de 15 pixels autour du bloc texte. opacity: 0.7; pour changer la transparence de l'élément.
Customisation du site Web: Modification d'un élément en particulier
Pour modifier un élément en particulier, on cible la balise sur laquelle on ajoute l'attibrut class afin d'éviter que la modification affecte toutes les autres balises du même type.Exemple:
<body><h1> class="in"> Bienvenue sur mon site ! </h1><h2 class="on"> Salut à tous ! </h2></body>
h1.in { font-size:300px; } h2.on { font-size:300px;}
Création d'un menu de navigation.
Créer une balise de navigation <nav>...</nav> dans la balise <body>...</body>: c'est grâce à cette balise comme son nom l'indique, que l'on va gérer la navigation de la page web. Créer ensuite à l'intérieur de la balise de navigation, une sous-balise de navigation <ul>...</ul> dans laquelle sera rangé les différents balise puces <li>...</li>. Lorsque l'on clique sur l'une de ces puces, rien ne se passe car, ce n'est que du texte. Il va falloir les associer à des liens.
Remarque: "#" permet lorsque l'on clique dessus de rester sur la même page. "contact.html" est un lien interne, c'est-à-dire vers une autre page de votre site que vous allez devoir créer et nommez ainsi.
Maintenant, à vous de jouer !!!
Comment créer une page Web ?
Chloé GRENON
Created on January 7, 2024
Ce diaporama regroupe les outils essentiels afin de créer sa propre page Web.
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Psychedelic Presentation
View
Chalkboard Presentation
View
Witchcraft Presentation
View
Sketchbook Presentation
View
Genial Storytale Presentation
View
Vaporwave presentation
View
Animated Sketch Presentation
Explore all templates
Transcript
Comment créer une page Web ?
Sommaire:
1. Eléments necessaires pour créer une page Web.
2. Structure de la page Web: le langage HTML.
3. Mise en page de la page Web: le langage css.
4. Création d'un menu de navigation.
Le langage HTML
1. Création d'un fichier HTML.
2. Structure d'un fichier HTML
3. Le langage HTML
4. Ajouter une image à l'aide du langage HTML
5. Ajouter un lien à l'aide du langage HTML
Création d'un fichier HTML.
Dans votre logiciel de texte, enregistrer un premier document en HTML. Pour cela, il va falloir "forcer" le format de votre fichier.
Création d'un fichier HTML.
Sous Sublime Text ou Notepad++
Sous Bloc-note
ou
Création d'un fichier HTML.
Une fois votre fichier créé, vous pouvez double-cliquer dessus dans votre dossier, il va s'ouvrir par défaut avec un navigateur internet dans lequel vous pourrez voir le résultat de vos lignes de code. Pour voir les modifications, il faut que votre fichier soit bien sauvegardé (ctrl+s maintenant qu'il a été enregistré une première fois) et cliquer sur l'icône de mise à jour de votre navigateur.
Structure d'un fichier HTML.
Le HTML fonctionne sous le principe de balise c'est-à-dire de petits mots-clés qui sont entourés de chevrons: < > Vous pouvez les retrouvez en bas à gauche de votre clavier. La touche majuscule vous permet d'atteindre le chevron qui ferme la balise
Structure d'un fichier HTML.
<!DOCTYPE html> Cette balise renseigne le navigateur sur le type de langage qui va être utilisé. <html>....</hmtl> Cette balise renseigne sur le début et la fin de votre code. <head>...</head> Cette balise renseigne l'en-tête de la page . C'est grâce à elle qu'on va pouvoir s'occuper de tout ce qui est interne au site web mais sans le voir. On peut ajouter le référencement de notre site web , la liaison avec la feuille de style CSS, mais aussi la balise de titre qui donnera un nom au niveau de l'onglet à notre page. <body>...</body> Cette balise indique la partie visible de votre code qui sera visible sur la page affichée par le navigateur.
Le langage HTML
La structuration de votre page web se fait entre les balises <body>...</body>.- <p>...</p> correspond à un paragraphe.
- <h1>...</h1> correspond au titre principal.
- <h2>...</h2> correspond au titre secondaire.
- <h3>...</h3>;<h4>...</h4> et ainsi de suite donne des titres plus petits.
- <strong>...</strong> met les mots entre les baiises en gras.
- <em>...</em> met les mots entre les balises en avant (souvent en italique).
- <sub>...</sub> met les caractères entre les balises en indices.
- <sup>...</sup> met les caractères entre les balises en exposant.
- <blockquote>...</blockquote> met le texte comme citation.
- <u>...</u> souligne le texte.
- <br>...</br> permet d'aller à la ligne.
Le langage HTML: suite
La structuration de votre page web se fait entre les balises <body>...</body>.- <hr> créer une ligne.
- <ul> permet de créer une liste avec des points.
- <ol> permet de créer une liste numérotée.
- <li> correspond aux différents éléments de la liste.
- <table> créer un tableau
- <tr> créer une nouvelle ligne.
- <th> créer une nouvelle colonne (en gras).
- <td> créer une nouvelle colonne
Exemple de création d'une page Web avec le langage HTML.
Lignes de code de la page
Page Web obtenue
Ajouter une image sur votre page web à l'aide du langage HTML:
Pour ajouter une image, il faut d'abord l'enregistrer dans votre dossier. Donner un nom simple à votre dossier (il va falloir l'écrire dans votre fichier) et sans espace. Noter ensuite <img src="lien vers l'image"> Pour modifier la taille ou la dimension d'une image <img src="nom de l'image.jpg" width="500" height="500"> width indique le nombre de pixel en largeur. height indique le nombre de pixel en hauteur.
Le langage CSS
1. Création d'un fichier CSS.
2. Comment indiquer votre ficher CSS au fichier HTML.
3. Customisation d'une page Web: le langage CSS.
cRéation d'un ficher css
Dans votre logiciel texte, enregistrez un deuxième document en.css puis le nommer style.css. Comme pour le premier fichier, il va falloir "forcer" le format de votre fichier.
Sous Sublime Text
Sous Bloc Note
OU
Comment indiquer votre fichier CSS au fichier HTML ?
Pour que votre fichier HTML sache que votre fichier .css existe, il va falloir le lui indiquer. On ajoute un lien qui permet de relier le fichier HTML au fichier css que l'on va utiliser par la suite pour styliser le contenu de la page web. Ceci se fait au niveau de la balise <head>....</head> comme suit : <head> <title> nom du site </title> <meta charset="uft-8"> <link rel="stylesheet" type="text/css"href="emplacement du fichier .css"> </head> <title>...</title> texte afficher dans l'onglet. <meta charset="uft-8"> permet de s'assurer que tous les caractères de l'alpahabet françaos vont être bien compris (optionnel)
Customisation du site Web
Dans un premier temps, on selectionne la balise que l'on voudrait cibler dans le fichier HTML. Exemple: On souhaite modifier la couleur du texte du paragraphe de la balise suivante qui se trouve dans le fichier HTML pour le mettre en rouge: <h1> titre principal </h1> Pour faire cela, on cible l'élément h1 pour titre et on écrit sur le fichier. css le code suivant : h1{ Tout ce qui sera inscrit entre ces parenthèse va personnaliser la balise : ce sont les propriétés CSS}
Customisation du site Web: commandes
color: #000000; pour changer la couleur du texte. background-color: couleur; pour changer la couleur du fond du texte. background: URL("l'adresse URL de l'image"); pour mettre une image en fond de texte. background-size: 300px; pour changer la taille de l'image (Ici l'image aura une taille de 300 pixels). background-size: 100%; pour afficher la taille de l'image sur tout l'écran. font-size: 300px; pour ajuster la taille des éléments concernés. font-weight: bold; pour mettre en gras. font-weight: normal; pour empêcher de mettre en gras cet élément. font-family: serif; pour choisir la police du texte (Ici la police du texte choisi est serif). Attention: si on met une police non reconnue par le navigateur va afficher ce qu'il veut). font-style: italic; pour mettre en italique. padding: 15px; pour ici mettre un écart de 15 pixels autour du bloc texte. opacity: 0.7; pour changer la transparence de l'élément.
Customisation du site Web: Modification d'un élément en particulier
Pour modifier un élément en particulier, on cible la balise sur laquelle on ajoute l'attibrut class afin d'éviter que la modification affecte toutes les autres balises du même type.Exemple:
- Dans le fichier HTML:
<body><h1> class="in"> Bienvenue sur mon site ! </h1><h2 class="on"> Salut à tous ! </h2></body>- Dans le fichier CSS:
h1.in { font-size:300px; } h2.on { font-size:300px;}Création d'un menu de navigation.
Créer une balise de navigation <nav>...</nav> dans la balise <body>...</body>: c'est grâce à cette balise comme son nom l'indique, que l'on va gérer la navigation de la page web. Créer ensuite à l'intérieur de la balise de navigation, une sous-balise de navigation <ul>...</ul> dans laquelle sera rangé les différents balise puces <li>...</li>. Lorsque l'on clique sur l'une de ces puces, rien ne se passe car, ce n'est que du texte. Il va falloir les associer à des liens.
Remarque: "#" permet lorsque l'on clique dessus de rester sur la même page. "contact.html" est un lien interne, c'est-à-dire vers une autre page de votre site que vous allez devoir créer et nommez ainsi.
Maintenant, à vous de jouer !!!