Scribd Logo
Importer

Bienvenue sur Scribd !

  • 1 - Exercice HTML Structure de Base D Une Page HTML Titres P

    Transféré par

    fouad abdelhamid
    615 vues4 pages

    Titre original

    1 - Exercice HTML Structure de Base d Une Page HTML Titres p

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    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 :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    615 vues4 pages

    1 - Exercice HTML Structure de Base D Une Page HTML Titres P

    Transféré par

    fouad abdelhamid

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    Exercices HTML

    www.rahmouni.ma

    Structure d'une page, titres, paragraphes...


    Thme
    Raliser manuellement une page HTML simple : structure de base, titres, paragraphes, ligne de sparation horizontale...

    Rappel des balises

    Structure de la page avec titre :


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    La dclaration ci-dessus spcifie la version HTML utilise. Pour la norme HTML 4.01, on distingue les 3 DTD's suivantes (Document Type Definition, documents XML du W3C dfinissant les diffrentes balises et leur fonctionnement) : - Strict : n'autorise que les balises non dprcies - Transitional : idem Strict plus balises/attributs dprcis en faveur de CSS - Frameset : idem Transitional plus balises relatives aux frames
    <HTML> <HEAD> <TITLE>

    titre puis

    </TITLE>

    { {

    <META NAME="..."

    ou

    HTTP-

    EQUIV="..."

    CONTENT="...">

    } (cf. ex. sur attributs de page)

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;

    } (spcification du type de document (HTML) et du jeu de car. utilis (iso-latin-1) ) { <BASE HREF="URL" TARGET="target name"> } (cf. ex. sur les liens) { <STYLE TYPE="text/css"> <!-- dfinitions de styles -->
    charset=iso-8859-1"> </STYLE>

    ou {

    <LINK REL="stylesheet" HREF="URL stylesheet"

    TYPE="text/css"> </HEAD>

    } (cf. ex. sur CSS) script


    // --> </SCRIPT>

    <SCRIPT LANGUAGE="JavaScript"> <!--

    <BODY ventuels attributs...>

    corps de la page ...

    Exercices HTML
    </BODY> </HTML>

    www.rahmouni.ma

    Titres dans le document :


    <H1 ALIGN="LEFT|RIGHT|CENTER"> <H2 ALIGN="LEFT|RIGHT|CENTER"> <H3 ALIGN="LEFT|RIGHT|CENTER"> <H4 ALIGN="LEFT|RIGHT|CENTER"> <H5 ALIGN="LEFT|RIGHT|CENTER"> <H6 ALIGN="LEFT|RIGHT|CENTER">

    titre titre titre titre titre titre

    1er niveau </H1> 2e niveau </H2> 3e niveau </H3> 4e niveau </H4> 5e niveau </H5> 6e niveau </H6>

    Trait horizontal :
    <HR WIDTH="pixels

    ou

    %" SIZE="pixels"

    ALIGN="LEFT|RIGHT|CENTER"

    {NOSHADE}>

    Saut de ligne : <BR> Saut de paragraphe : <P> paragraphe {</P>} Texte qui reste sur une seule ligne : <NOBR>ce texte se sera jamais wrap sur plusieurs lignes</NOBR> Commentaire HTML : <!-- commentaire -->

    Exercices HTML

    www.rahmouni.ma

    Donne de l'exercice
    Raliser la page Web simple illustre par la copie-cran cidessous. Utilisez pour ce faire les 2 outils suivants :

    ouvrez le Bloc-notes (Notepad) Windows dans la moiti de gauche de l'cran lancez le browser Nescape dans la moiti de droite de l'cran

    Aprs avoir cr quelques lignes de votre page HTML, sauvegardez-la et ouvrez-la dans le navigateur 1 pour la vrifier. Au fur et mesure de l'avancement de votre travail, rechargez-la dans le navigateur (bouton[Reload this Page...] ou View>Reload) pour la contrler.

    Exercices HTML

    www.rahmouni.ma

    Corrig de l'exercice
    Etape Structure de base de la page <HTML> avec titre du document 1 (apparaissant dans la barre de titre de la fentre du browser et dans bookmarks si l'on mmorise cette page) Titre de 1er niveau centr, titres de second niveau, ainsi que traits de sparation 2 horizontaux (le tout insr dans le "body" de la page !) Quelques lignes de texte avec saut la ligne forc (que se passerait-il si vous 3 ne mettiez pas de<BR>, et quelle est l'effet des caractres "espace", "tab" et "cr" dans du code HTML ?) Deux "paragraphes" de 4 textes (avec espacement vertical entre paragraphes) Pied de page en italique 5 ( placer juste avant la balise </BODY>) Solution
    <HEAD> <TITLE>Jules Ducommun</TITLE> </HEAD> <BODY> </BODY> </HTML> <H1 ALIGN=CENTER>Jules Ducommun</H1> <HR SIZE="7"> <H2>Mes coordonnes</H2> <HR WIDTH="60%"> <H2>Mon curriculum vitae</H2> <HR WIDTH="60%"> <H2>Mes hobbies</H2>

    Jules Ducommun<BR> SI-DGR<BR> EPFL<BR> CH - 1015 Lausanne

    J'ai frquent l'cole primaire de ...<P> J'ai suivi ensuite ... <HR> <I>Jules Ducommun / rvision 2.5.99</I>

    Et comment faire pour que le texte " remplir..." du chapitre "Mes hobbies" soit <!-- remplir... --> 6 invisible au niveau du browser (commentaire HTML) ?

    Vous aimerez peut-être aussi