Scribd Logo
Upload

Welcome to Scribd!

  • Conception Web: Prof: Habibi Lotfi Année Scolaire: 2023-2024

    Uploaded by

    Lotfi Habibi
    11 views18 pages

    Original Title

    TD

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views18 pages

    Conception Web: Prof: Habibi Lotfi Année Scolaire: 2023-2024

    Uploaded by

    Lotfi Habibi

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    Conception Web

    Prof : Habibi Lotfi


    Année scolaire : 2023-2024
    Nom de
    domaine

    Choisir un
    PARTIE nom de
    domaine
    1
    Disponibilité Extension

    https://www.ecole-riad.ma/
    Toute activité sur Internet commence par le choix de son nom de domaine qui
    est son adresse domiciliaire sur Internet.

    Suivez les règles :


     Concision et clarté : un long nom de domaine compliqué est plus difficile à
    retenir et à taper sur un clavier.
     Créatif et mémorable : plus votre nom de domaine sera unique, clair et
    concis, plus il marquera les esprits et sera facile à retenir pour vos visiteurs.
     Facile à lire et à prononcer : évitez les numéros et les caractères spéciaux.
    Dites-vous que quand le nom choisi n’est pas facile à prononcer ni à
    partager, il s’agit très rarement d’un choix gagnant.
    L'audience du site est-elle locale ou internationale ? L'objet
    est-il commercial, éducatif, informatif, etc ?
    https://www.ecole-riad.ma/

    c’est ce qui vient à la fin de votre adresse : le .com, .fr, .ca, .org, .net, et ainsi de
    suite. Dans la majorité des cas, un .com sera la meilleure option puisque c’est
    l’extension que les utilisateurs sont le plus habitué et retiennent le mieux.
    Cependant, il est de plus en plus difficile de trouver des noms de domaine de
    qualité en .com, ça prend donc des alternatives.

    Une option intéressante est d’utiliser des extensions de pays. Par exemple, .ma
    ( Maroc), .fr (France), .ca (Canada), etc.
    Google s’en sert pour géolocaliser les sites Internet, donc choisissez ces
    extensions seulement si ça s’applique à votre projet.
    Votre nom de domaine
    est-il disponible ?
    https://www.ionos.fr/domaine/noms-de-domaine
    Notion de langage
    PARTIE HTML
    2
    Objectifs pédagogiques

    À la fin de ce cours, vous serez capable de :

     utiliser du code HTML ;

     structurer une page web en HTML ;

     utiliser du code CSS ;

     mettre en forme une page web en CSS ;


    1)Construction d'une page

    a) Codage d'une page:

    Ouvrir Notepad++ :

    C’est un éditeur de texte qui ne tape que ce que vous lui demandez. Il n'ajoute rien au

    « code » que vous tapez contrairement aux logiciels de traitement de texte. Passer le

    logiciel en HTML : Langage > H > HTML


    1- Dans notepad++, écrire ce code HTML :
    <html>
    <head>
    <!– En-tête de la page 
    Structure <title>Titre</title>
    de base </head>
    d'une <body>

    page <!– Corps de la page 

    HTML5 Bonjour !!
    </body>
    </html>
    I. La balise </html>
    C'est la balise principale du code. Elle englobe tout le contenu de votre page. La balise fermante </html>
    se trouve tout à la fin du code .
    II. L'en-tête <head> et le corps <body>
    Une page web est constituée de deux parties :
    L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son
    titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez
    courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement
    des informations générales à destination de l'ordinateur.
    Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons
    ici sera affiché à l'écran
    III. Les commentaires :un commentaire en HTML est un texte qui sert simplement de
    mémo. Il n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à
    l'affichage de la page.
    Insérer un commentaire
    Un commentaire est une balise HTML avec une forme bien spéciale :

    <!-- Ceci est un commentaire -->


    IV. Le titre principal de la page
    C'est le titre de votre page qui s’affiche en haut de la page (souvent dans
    l’onglet du navigateur ) Il faut savoir que le titre apparaît aussi dans les
    résultats de recherche, comme sur Google
    b) Les balises :
    Une balise est un élément de texte, un nom, encadrée par le caractère inférieur < et le
    caractère supérieur >. Par exemple <html>.
    • Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles peuvent être
    saisies indifféremment en minuscules ou en majuscules !
    • Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La
    première est appelée « balise d'ouverture » parfois balise ouvrante)et la seconde « balise de fermeture »
    ou fermante. La balise fermante est précédé du caractère /.
    Les balises

    En paires orphelines

    Ce sont des balises qui servent le


    Elles s'ouvrent, contiennent du
    plus souvent à insérer un
    texte, et se ferment plus loin
    élément à un endroit précis

    Exemple : Exemple :
    <title>Titre </title> < image />
    c) Les attributs:
    Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
    informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le
    plus souvent une valeur, comme ceci :
    <balise attribut="valeur">
    Exemple 1 (balise orpheline ) : <image nom=‘’image.jpg’’ />
    Exemple 2 (balise orpheline ) : <citation auteur=‘’ Gandhi‘’ date=‘’01/01/1900 ‘’ > La vie
    est un mystère qu'il faut vivre, et non un problème à résoudre.</citation>
     On utilise l'éditeur de texte Notepad++ pour créer un fichier ayant l'extension .html (par exemple : index.html ). Ce sera
    notre page web.

     Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-clic dessus.

     À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML.

    Les balises peuvent avoir plusieurs formes :

     <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple) ;

     <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un élément à un endroit
    précis (par exemple une image).

     Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires (exemple : <image
    nom="photo.jpg" /> ).

     Une page web est constituée de deux sections principales : un en-tête ( <head> ) et un corps ( <body> ).

     On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en sélectionnant
    2) Organisez votre texte

    You might also like