Scribd Logo
Importer

Bienvenue sur Scribd !

  • Création de Site WEB

    Transféré par

    wazani jamil
    52 vues18 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PPT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    52 vues18 pages

    Création de Site WEB

    Transféré par

    wazani jamil

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 18

    Création de Site WEB

    Par RHATAY KHALIL


    Présentation du Service WEB
    • Le web est un ensemble de serveurs proposant des
    documents accessibles via un protocole appelé HTTP
    pour HyperText Transfer Protocol.

    • Un serveur web met à disposition des utilisateurs de


    navigateurs des documents de tous types : textes
    classiques, images, sons, animations, applications Java
    ou même n’importe quel fichier binaire.

    – Les documents qui structurent les serveurs web sont un peu particuliers :
    ils sont appelés pages HTML.
    – HTML (HyperText Markup Language) est un langage qui permet de
    composer un document, visualisé via un navigateur web

    • Les Navigateurs sont des Logiciels Utiliser par les internautes pour
    Récupérer les documents à partir d’un Serveur Web et les afficher.
    Architecture du WEB
    Les Etapes de Création d’un Site Web
    1. Collecte d’informations à Publier.
    – Texte
    – Photos
    – Vidéo
    2. Conception de la structure du Site.
    3. Création des Pages WEB
    • Editeur HTML : MS FrontPage, WebExpert, MS Expression
    • Editeur Classique : Blocnote
    • Assistant Web : Word, PowerPoint, Excel
    • Langages : HTML, Javascript, PHP, ASP.net, AJAX…
    • Autres outils : Flash, Gif Animateur….
    4. Hébergement du Site sur Un Serveur : IIS, Apache
    5. Référencement du Site : Google
    6. Maintenance et Mise à Jour du Site
    Le langage HTML
    • Leçon 1 : Les Bases

    • Une page web contient les balises html. Ces dernières


    sont composées en général, par un marqueur
    d’ouverture et un marqueur de fermeture .

    • Les marqueurs Html utilisent les caractères < et > pour


    limiter le début et la fin . Le marqueur de fin s’écrit avec
    un “/“.

    • Exemple : <marqueur> texte </marqueur>


    Structure d’une Page Web
    Exemple Résultat
    <html>
    <head>
    <title>ceci est un test</title>
    </head> Bienvenu dans ma première page

    <body>
    Bienvenu dans ma première page

    </body>
    </html>
    Balises d’Entête
    1 - <meta>: Définit des infos spécifiques au document.
    • Ex:

    <head>
    <meta name=«author» content=« Rhatay Khalil»>
    <meta name=«keywords» content=«Cours,html,iis »>
    <meta name=«description» content=«cours sur le développement de sites web»>
    </head>
    2- <script>: insérer un script dans Une page HTML
    • Ex:
    <head>
    <script language=javascript>
    //code du script
    </script>
    <noscript>
    votre navigateur ne supporte pas les scripts
    </noscript>
    </head>
    La Balise Body
    <body>
    Attributs:
    - alink
    - vlink
    - link
    - text
    - background
    - bgcolor
    Leçon 2 : La Mise en Forme (Niveau Texte)

    • <b>, <i>, <u>


    – <B>Mon Texte</B>
    – <I>Mon Texte</I>
    – <U>Mon Texte</U>

    • <font size=5 color=« red » face=« Arial »>


    – <font size=5 color=« red » face=« Arial »> Mon
    Titre</Font>
    • <big>, <small>
    • <sub>,<sup>
    Leçon 3 : La Mise en Forme (Niveau Paragraphe)

    • <br> : Retour à la ligne


    • <center> : Centrer un Paragraphe
    • <div align=left/right/center> : Diviser un Document
    • <p align=left/right/center/justify> : Paragraphe
    • <h1>-<h6> : Style de Titre
    Leçon 3 : Les Listes
    Type Code Résultat
    Langage de programmation Langage de programmation
    Liste non <ul> • VB
    ordonnée <li>VB
    <li>Pascal
    • Pascal

    • C1C++
    <li>C1C++
    </ul>
    Microsoft Office Microsoft Office
    Liste ordonnée <ol> 1. Word
    <li>Word 2. Excel
    <li>Excel
    3. Access
    <li>Access

    </ol>
    <dl> Définition de termes :
    Liste de Définition de termes : HTML
    définition <dt>HTML
    <dd>Hyper Text Markup
    Hyper Text Markup
    Language WWW
    Langage
    <dt>WWW World Wide Web
    <dd>World Wide Web

    </dl>
    Leçon 4 : Les Liens Hyper Texte

    • Liens internes au site

    • Liens internes à la page

    • Liens vers email

    • Liens externes

    <a href=«index.html» target=«cadre»>


    Texte </a>
    Liens internes à la page
    • Définition de l’ancre :

    <a name=«ancre1»> paragraphe </a>


    • Définition du lien :

    <a href=« accueil.htm#ancre1 »> texte </a>


    Leçon 5 : les Images
    <img src=« logo.gif »
    width=largeur en pixel
    height=hauteur en pixel
    alt=« texte de remplacement »
    border= épaisseur du cadre
    align=top/middle/bottom/left/right
    hspace=espace horizontal autour de l ’image
    vspace=espace vertical autour de l ’image
    >
    Les Tableaux
    <table>
    <tr>
    <th> En-tête1 </th> Entête 1 Entête 2
    <th> En-tête2 </th>
    </tr> Donnée 1 Donnée 2
    <tr> …… …….
    <td> Donnée 1.1 </td>
    <td> Donnée 1.2 </td>
    </tr>
    …..
    </table>
    Les Tableaux : Alignement &
    Couleur
    Alignement :

    • Alignement horizontal :
    align= left/right/center
    application : table, ligne, cellule
    • Alignement vertical :
    valign= top/middle/bottom
    application : ligne, cellule
    • Couleur d ’arriére-plan :
    bgcolor
    application : table, ligne, cellule
    Les Tableaux : Les Marges
    • Marge intérieure des cellules :
    <table cellpadding=6>
    …..
    </table >

    • Espacement de cellules:
    <table cellspacing=8>
    …..
    </table >
    Les Tableaux : Largeur et Bordures
    • Largeur du tableau :
    <table width=100%>
    …..
    </table >

    • Bordure:
    <table width=100% border=4>
    …..
    </table >

    Vous aimerez peut-être aussi