Le forum de doingbuzz

Le monde aussi petit soit-il est un vivier de talents, de cerveaux ou si vous voulez de matières grises. De belles idées, de beaux enseignements, de pertinents conseils sommeillent en nous. Ce forum est après et avant tout un rendez-vous du donner et du recevoir. Lâchez-vous !

Le forum de doingbuzz

Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le forum de doingbuzz

Forum de doingbuzz.com

Mots-clés

Octobre 2020

LunMarMerJeuVenSamDim
   1234
567891011
12131415161718
19202122232425
262728293031 

Calendrier Calendrier

Sondage

Coup d'etat au Mali Pour ou contre ?

 
 
 

Voir les résultats

Flux RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 

Membres les plus tagués

    html css tuto suite

    Admin
    Admin
    Admin
    Admin

    Doingbuzz Monnaie virtuelle : 100060282
    Votre Réputation : 0
    Date d'inscription : 04/02/2012
    Localisation : france

    html css tuto suite Empty html css tuto suite

    Message par Admin le Lun 9 Avr - 20:20

    Est-ce que CSS ne concerne que les couleurs et les polices ?


    Hormis ajouter une présentation tels que des couleurs, des types de polices, etc.,
    CSS peut aussi servir à contrôler la mise en page et la présentation
    (les marges, le flottement, l'alignement, la largeur, la hauteur, etc.). La régulation des différents éléments par CSS permet
    de présenter ses pages avec élégance et précision.


    Exemple 3 :





    <p style="padding:25px;border:1px solid red;">J'aime CSS</p>




    Dans le navigateur, cela donne :




    J'aime CSS



    La propriété float permet de faire flotter un élément à droite ou bien à gauche. L'exemple suivant
    en illustre le principe :


    Exemple 4 :





    <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
    quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat...</p>




    Dans le navigateur, cela donne :




    html css tuto suite Bill
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...



    Dans cet exemple, un élément (l'image) flotte à gauche, et l'autre (le texte) remplit l'espace ainsi libéré.

    La propriété position permet de placer un élément exactement là où on veut qu'il soit dans la page :


    Exemple 5 :




    <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />







    Dans l'exemple, l'image se place à 50 pixels du bas et à 10 pixels de la droite dans le navigateur. Mais vous pouvez la placer
    exactement où vous voulez. Très facile et très cool, n'est-ce pas ?


    Super oui ! Mais facile ?


    On n'apprend pas CSS en 10 minutes. Et comme annoncé auparavant, cette leçon ne constitue qu'un bref aperçu.
    Vous apprendrez beaucoup plus après dans notre tutoriel CSS .

    Pour l'instant, concentrons-nous sur HTML et passons à la prochaine leçon où l'on apprendra à mettre en place le site Web sur
    Internet sous le regard du monde entier !


    Leçon 13 : La mise en place des pages


    Jusqu'à présent, vous n'avez eu la satisfaction que de visionner les pages. Il est temps maintenant que le reste du monde puisse
    admirer votre chef d'œuvre..


    Le monde est-il prêt pour ça ?


    Le monde est prêt, et bientôt vous le serez aussi. Pour installer votre site Web sur Internet, vous avez juste besoin d'espace
    sur un serveur et d'un programme FTP libre
    .

    Si vous avez un accès Internet, il se peut que vous disposiez déjà
    d'un espace serveur gratuit pour votre site.
    L'adresse de votre espace serveur est alors probablement quelque chose
    comme « http://home.fournisseur.com/~identifiant ».
    Il faudra peut-être l'activer d'abord. Renseignez-vous à ce sujet dans
    les documents fournis par votre fournisseur d'accès Internet,
    ou dans leurs pages d'assistance.

    Une autre option consiste à prendre un espace serveur gratuit sur Internet. Comme pour la mise en place d'un compte e-mail
    (par exemple, chez Hotmail), vous pouvez vous inscrire pour de l'espace serveur libre sur Internet.
    Plusieurs sociétés proposent un tel service, entre autres 000webhost.com (cliquez sur
    « Order » et sélectionnez l'adhésion gratuite), cela prendra seulement quelques minutes pour s'inscrire.

    Pour accéder au serveur, vous aurez besoin de connaître son nom d'hôte (N.d.T. Host Name), par exemple ftp.htmlnet.site50.net,
    et d'avoir votre nom d'utilisateur (N.d.T. username) et votre mot de passe (N.d.T. password) sous la main.


    C'est tout ce qu'il faut ?


    Pour accéder au serveur et mettre en place vos pages, vous aurez
    également besoin d'un logiciel FTP. Il se peut que vous n'ayiez pas
    encore de logiciel de ce type, mais heureusement on peut en télécharger
    des gratuits.

    Il existe beaucoup de logiciels FTP différents. L'un des meilleurs est FileZilla, qui est entièrement gratuit.
    Vous pouvez ainsi télécharger FileZilla à filezilla.sourceforge.net .


    Et comment est-ce que j'installe les pages ?


    On décrit ci-dessous comment charger les pages sur un compte gratuit chez 000webhost.com avec FileZilla. Toutefois,
    la procédure est plus ou moins la même pour tous les fournisseurs d'accès et tous les logiciels FTP.

    Lancez le logiciel FTP une fois connecté sur Internet. Inscrivez le
    nom d'hôte ("ftp.htmlnet.site50.net" à « Address »),
    le nom d'utilisateur (à « User ») et le mot de passe (à « Password »)
    puis cliquez « Connect ». Vous devriez maintenant avoir accès
    au serveur. D'un côté de la fenêtre du logiciel, vous pouvez voir le
    contenu de votre ordinateur (« Local Site »), et de l'autre côté,
    le contenu du serveur (« Remote Site ») :


    html css tuto suite Filezilla

    Repérez les documents HTML et les images sur votre ordinateur (côté « Local Site ») et transférez-les sur le serveur
    (côté « Remote Site ») en double-cliquant sur eux. Maintenant le monde entier peut les voir ! (Par exemple, à l'adresse
    http://htmlnet.site50.net/page1.htm).

    Nommez une des pages "index.htm" (ou "index.html") et elle deviendra
    automatiquement la page d'entrée, c'est-à-dire que si vous tapez
    http://htmlnet.site50.net (sans nom de fichier), vous ouvrirez en
    réalité http://htmlnet.site50.net/index.htm.

    À plus long terme, il sera peut-être préférable d'acquérir un nom de domaine propre
    (tel que www.votre-nom-de-domaine.com) pour éviter les adresses longues
    et compliquées attribuées par votre fournisseur d'accès,
    ou des fournisseurs d'espace serveur gratuit. On peut trouver et
    acheter des noms de domaines, par exemple, chez
    Speednames ou NetworkSolutions .


    Leçon 14 : Les standards du Web et la validation



    Dans cette leçon, vous renforcerez un peu plus votre connaissance théorique de HTML.


    Qu'y a t-il d'autre à connaître à propos de HTML ?


    On peut coder en HTML de plusieurs façons. Et les navigateurs peuvent interpréter HTML d'autant de façons. On pourrait dire que
    HTML comporte beaucoup de dialectes. C'est la raison pour laquelle les sites Web semblent différents sur des
    navigateurs différents.

    Presque dès le début d'Internet, il y a eu des tentatives pour élaborer un standard commun de HTML par le biais du
    World Wide Web Consortium (W3C)
    fondé par Tim Berners-Lee (oui ! le type formidable
    qui a inventé HTML). Mais le chemin fut long et difficile.

    À l'époque, quand les navigateurs étaient payants, le navigateur
    Netscape dominait. Les standards HTML s'appelaient alors
    2.0 et 3.2. Mais avec une part de marché de plus de 90 %, Netscape
    n'était pas obligé de tant se soucier (et ne se soucia pas)
    de standards communs. Au contraire, Netscape inventait ses propres
    éléments étranges, qui ne fonctionnaient pas sur d'autres navigateurs.

    Longtemps, Microsoft ignora presque complètement Internet. Après un temps, la société entra en compétition avec Netscape et
    introduisit un navigateur. Les premières versions du navigateur de Microsoft, Internet Explorer, n'étaient pas meilleures que
    Netscape dans le respect des standards HTML. Puis Microsoft choisit de distribuer son navigateur gratuitement
    (une option toujours très acclamée) et Internet Explorer devint bientôt le navigateur le plus populaire.

    À partir des versions 4 et 5, Microsoft chercha à soutenir de plus en plus les standards HTML du W3C.
    Netscape n'entreprit pas de développer de nouvelle version de son navigateur et continua à en distribuer la version 4 dépassée.

    Le reste appartient à l'histoire. Aujourd'hui, les standards HTML se nomment 4.01 et XHTML. Et c'est au tour d'Internet Explorer
    d'avoir une part de marché de 90 %. Internet Explorer a toujours ses propres éléments étranges mais utilise aussi les
    standards HTML du W3C. Tout comme d'autres navigateurs tels que Mozilla, Opera et Netscape.

    Donc si votre code HTML respecte les standards du W3C, vous rendez vos sites Web lisibles par tous les navigateurs,
    que ce soit aujourd'hui et à l'avenir. Et par chance, ce que vous avez appris dans ce tutoriel est une version de HTML
    nouvelle plus stricte et plus propre appelée XHTML
    .


    Super ! Puis-je l'annoncer à chacun ?


    Avec tous les types différents de HTML, il est nécessaire de dire au
    navigateur quel « dialecte » HTML est utilisé, dans ce cas XHTML.
    Pour ce faire, on utilise une déclaration de type de document. La
    déclaration de type de document se place toujours en haut du document :


    Exemple 1 :





    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">


    <head>
    <title>Titre</title>
    </head>

    <body>
    <p>texte texte</p>
    </body>

    </html>




    Hormis la déclaration de type de document (la première ligne dans
    l'exemple précédent), qui indique au navigateur votre choix de XHTML,
    il est nécessaire de fournir des informations spéciales dans la balise html au moyen des deux attributs xmlns
    et lang.

    Le terme « xmlns » est l'abréviation de « XML-Name-Space »
    (N.d.T. espace de nommage XML), et il devrait toujours avoir la valeur
    http://www.w3.org/1999/xhtml. C'est tout ce qu'il faut savoir. Si vous êtes assoifé de connaissances compliquées,
    vous pouvez lire plus à propos des espaces de nommage sur le
    site Web du W3C .

    Dans l'attribut lang, vous indiquez la langue dans laquelle le document est écrit. À cet effet, on utilise le
    standard ISO 639 , qui liste les codes de toutes les langues du monde.
    Dans l'exemple ci-dessus, la langue indiquée est le français ("fr").

    Avec la définition de type de document (DTD) de la déclaration, le
    navigateur sait exactement comment interpréter et afficher votre
    code HTML. De fait, utilisez l'exemple précédent comme gabarit pour
    tous vos futurs documents HTML.

    La définition de type de document revêt également de l'importance pour la validation des pages.


    Valider !? Pourquoi le faire et comment ?


    Insérez une déclaration de type de document dans vos pages afin de toujours pouvoir corriger les erreurs de votre code HTML
    à l'aide du validateur gratuit du W3C .

    Pour un test, fabriquez une page et mettez-la en place sur Internet. Ensuite allez à validator.w3.org
    et tapez l'adresse (URL) de votre page et validez-la. Si votre HTML est
    correct, vous obtiendrez un message de félicitation. Sinon
    vous aurez un rapport d'erreurs indiquant exactement en quoi et où vous
    vous êtes trompé. Faites exprès des erreurs pour voir
    ce qui arrive.

    Le validateur n'est pas seulement utile pour trouver les erreurs.
    Certains navigateurs compensent les défaillances
    des développeurs Web en essayant de réparer les erreurs du code HTML et
    en affichant les pages comme ils estiment qu'elles devraient
    apparaître.
    Avec eux, il se peut que vous ne voyiez jamais d'erreurs dans le
    navigateur. Par contre, les autres navigateurs feront peut-être
    des estimations différentes et n'afficheront pas du tout la page. Le
    validateur peut vous aider à trouver des erreurs
    dont vous ignoriez même l'existence.

    Validez toujours vos pages pour vous assurer qu'elles s'afficheront toujours correctement.




    Leçon 15 : Les dernières astuces


    Félicitations, vous êtes à la dernière leçon.


    Donc maintenant je sais tout ?


    Vous avez beaucoup appris et vous êtes capable de fabriquer vos propres sites Web ! Néanmoins, vous ne connaissez que les bases
    et il y a encore beaucoup à maîtriser. Mais les fondations sont solides.

    Dans cette dernière leçon, vous trouverez quelques astuces finales :



    • Premièrement, c'est une bonne idée que de conserver l'ordre et la
      structure dans vos documents HTML. En chargeant des documents
      bien arrangés, vous montrerez non seulement votre maîtrise de HTML
      mais aussi faciliterez considérablement votre vision d'ensemble.
    • Collez aux standards et validez vos pages. On ne le dira jamais assez : toujours écrire du XHTML propre,
      utiliser une déclaration de type de document et valider vos pages à validator.w3c.org .
    • Donnez du contenu à vos pages. Rappelez-vous que HTML est un outil qui vous permet de présenter des informations sur Internet,
      donc assurez-vous qu'il y ait de l'information à présenter. Les belles pages peuvent être jolies mais la plupart des personnes
      utilise Internet pour y trouver de l'information.
    • Évitez de surcharger vos pages avec des images lourdes et autres
      fantaisies trouvées sur Internet. Cela ralentit le chargement
      des pages et pourrait embrouiller les visiteurs. Les pages qui mettent
      plus de 20 secondes à charger sont susceptibles de perdre
      jusqu'à 50 % des visiteurs.
    • Rappelez-vous d'ajouter votre site Web dans les moteurs de
      recherche/annuaires pour que les personnes n'appartenant pas à votre
      famille proche
      puissent les trouver et les apprécier. Sur la page d'accueil de tous
      les moteurs de recherche, vous trouverez un lien pour ajouter
      de nouvelles pages (le plus important est Google , mais il y en a d'autres tels que
      DMOZ , Yahoo , AltaVista ,
      AlltheWeb et Lycos ).
    • Dans ce tutoriel, vous avez employé « Bloc-notes », qui est un
      éditeur simple d'utilisation très facile,
      mais il sera peut-être pratique d'utiliser un éditeur plus évolué
      offrant une meilleure vue d'ensemble et plus de possibilités.
      Vous trouverez un résumé et des critiques de plusieurs éditeurs sur Download.com .


    Comment s'améliorer ?


    Avant tout, il importe de continuer à travailler et expérimenter avec les choses apprises dans ce tutoriel. Étudiez les sites
    d'autres personnes et, si besoin, voyez comment ils sont faits avec « Voir source » (cliquez « Affichage » dans le menu de
    votre navigateur et sélectionnez « Source »).


    html css tuto suite Viewsource

    Cherchez sur Internet des exemples et articles sur HTML. Il y a beaucoup de sites avec un bon contenu sur HTML.


    Lisez et posez des questions dans la rubrique Forums . Vous y rencontrerez les vrais experts et vous apprendrez beaucoup auprès d'eux.

    Enfin, et non la moindre, dès que vous vous sentirez prêt(e), vous devriez poursuivre avec l'apprentissage de CSS dans notre
    tutoriel CSS .

    Une dernière chose : nous vous souhaitons des heures d'amusement avec votre nouvel ami HTML.

    À bientôt sur Internet :-)




      La date/heure actuelle est Mer 28 Oct - 3:21