3vision-Group.com l Consuting - Infographisme - Site Web - Marketing - Maintenance
Bienvenue sur le forum de l'agence 3vision-Group

Afin de profiter pleinement de tout ce que vous offre notre forum, merci de vous identifier si vous êtes déjà membre ou de rejoindre notre communauté si vous ne l'êtes pas encore en cliquant sur "s'inscrire".
Nous sommes un site de pro, notre spécial se résume sur tous les domaines.



Le forum officiel du site 3vision-Group.com
 
AccueilGalerieRechercherMembresGroupesCalendrierFAQS'enregistrerConnexion
Le site web 3vision-group.com vous met ce forum a votre disposition, c'est gratuit
Les nouveautés logiciels XnView Photo et graphisme XnView XnView est un logiciel permettant de convertir et visualiser des fichiers graphiques ! Where's My Head? iPhone Where's My Head? Where's My Head? est une application gratuite pour iPhone dans laquelle il vous faut résoudre des énigmes. MKVToolNix Vidéo MKVToolNix Un excellent logiciel dédié à l'édition de fichiers MKV. Grâce à lui, fusionner plusieurs vidéos, éditez les chapitres, supprimez ou ajouter des sous-titres... Et bien plus encore ! Google chrome : Nouvelle version navigateur sous licence libre qui dispose de nombreuses fonctionnalités visant l’Internet social Téléchargement sponsorisé Utilitaires Alcohol 120% Alcohol 120% permet de créer des fichiers images CD et DVD afin de les stocker sur un disque dur... Internet SpeedyFox SpeedyFox est un petit utilitaire gratuit compatible avec Windows et Max OS a pour but de rendre la navigation beaucoup plus rapide. Utilitaires SDVocal Ecoutez les textes disponibles à l'écran à l'aide de ce logiciel. Si vous avez des troubles de la vue, des problèmes de lecture, ou si vous en avez tout simplement assez d'être "scotché" à l'écran, voilà la solution ! Internet Skype Skype est le logiciel de référence de téléphonie sur IP (VoIP) permettant de passer des appels gratuitement ou à moindre frais partout dans le monde, à partir de votre ordinateur ou smartphone compatible. Photo et graphisme iSpy iSpy est un programme gratuit permettant d'enregistrer ou de détecter des mouvements ou des sons. Utilitaires Free Internet Eraser Internet Eraser est le programme parfait pour nettoyer vos traces de passages sur le net. Internet Maxthon Maxthon est un navigateur Web basé sur 2 moteurs de rendu de pages : Trident et Webkit. Il permet de naviguer via un système d’onglets et rend possible la personnalisation du navigateur à l’aide des nombreux skins proposés. Utilitaires Daemon Tools Lite Daemon Tools Lite vous permettra de créer des lecteurs virtuels sur votre ordinateur. Utilitaires RenMultiFiles Pro Outil pour renommer en série les noms des fichiers. Les logiciels recommandés pour les internautes Winrar Winrar µTorrent Avast! Antivirus Gratuit 7 edia player VLC media player DAEMON Tools Lite Internet Download Manager (IDM) Mozilla Firefox PhotoFiltre Malwarebytes' Anti-Malware Adobe Photoshop CS5.1 et CS6 Beta CCleaner Google Chrome Skype Hamachi Avira AntiVir Personal Free Antivirus Google Earth DirectX Adobe Reader (Acrobat) AVG AntiVirus Free Edition 2012 7-Zip Windows Movie Maker OpenOffice.org Audacity Audacity PDFCreator SuperCopier Mumble iTunes Nero 7 YouTube Video Downloader Windows Live Messenger 2011 Free YouTube to MP3 Converter Photoscape CamStudio Kaspersky Antivirus 2012 Flash Player 11 The Gimp eMule Glary Utilities RealPlayer 10 Microsoft .NET Framework Foxit Reader Everest Ultimate Jdownloader Windows XP Service Pack 3 Office 2003 flechePublicité A télécharger aujourd'hui Windows | Mac | Windows Mobile | Téléphone Mobile Windows : 5 logiciels à télécharger Samsung Kies Windows logiciel Windows Samsung Kies - 2.3 Samsung Kies : Gérez votre smartphone Samsung depuis votre PC ! télécharger The Cursed Windows logiciel Windows The Cursed - 1.182 Incarnez des "damnés" ou leurs ennemis dans ce jeu de stratégie en temps réel télécharger Sophos Virus Removal Tool Windows logiciel Windows Sophos Virus Removal Tool - 2.0.0.0 L'outil de suppression de virus gratuit et immédiat en version 2 ! télécharger Image Tuner Windows logiciel Windows Image Tuner - 3.0 Effectuer les modifications par lot les plus courantes sur ses photos en un clic télécharger Scarab Darkroom Windows logiciel Windows Scarab Darkroom - 1.0 beta build 92 Visualiser, convertir et éditer ses photos au format RAW télécharger Logiciels | Démos | Vidéos | Patchs Mises à jour logiciels Internet Explorer 8 télécharger Internet Explorer 9 télécharger Samsung Kies télécharger Samsung Kies télécharger Notepad++ télécharger Tiny USB Office télécharger FlashGot télécharger SmoothDraw télécharger System Explorer télécharger VSO Downloader télécharger Larousse. Dictionnaire Larousse complet sur Votre PC. Téléchargement gratuit!
ImageImage ImageImageImage
Le site coolcatcheforum avec services gratuits pour tous! Bonne humeur et convivialite sont les cléfs de se site! Petite annonces, entre aide, asstuces, conseils, rencontres, tout ce que vous avez besoin.. ici notre objectif est de satisfaire...
LE LOGICIEL DU JOUR ET LES DERNIERES MAJ .............. Home 1.2.2 Home 1.2.2 Logiciel Windows | Internet Utilitaire gratuit et en français permettant via votre webcam de surveiller à distance votre habitation, veiller sur un proche ou sur votre animal de compagnie... Freemake Video Converter 3.0.2.3 Freemake Video Converter 3.0.2.3 Utilitaire gratuit et en français permettant de convertir vos vidéos en AVI, MP4, WMV, MKV, SWF, FLV, 3GP, MPEG, DVD, Blu-ray, MP3, iPod, iPhone, PSP, Android, Nokia, BlackBerry... EASEUS Partition Master Home Edition 9.1.1 EASEUS Partition Master Home Edition 9.1.1 Utilitaire gratuit permettant de gérer vos partitions sur votre disque dur... Dexpot 1.5.16 Build 1853 Dexpot 1.5.16 Build 1853 Excellent utilitaire gratuit et en français permettant d'avoir plusieurs bureaux virtuels... OCCT 4.2.0 OCCT 4.2.0 Testez la stabilité de votre système grâce à cet utilitaire gratuit, en français et portable... LedRenommer 1.9.0 LedRenommer 1.9.0 Utilitaire gratuit et en français permettant de renommer automatiquement et en série un ensemble de fichiers en fonction de règles définies par l'utilisateur...
Vous avons optimiser le site alors plus d'inquiétude.. http://togopub.tk est est le meilleur site qui peut vous créer un site gratuitement.. alors soyez complet
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Compteur Traffic global
Compteur Global
Derniers sujets
Ceux qui commencent le plus de sujets
Admin
 
civitch
 
Admin MAROUF
 
Actu sport
 
jouad
 
epousthouflante
 
Gaetan_29
 
Publier le site Voter pour coolcatcheforum

Partagez | 
 

 html css tuto suite

Aller en bas 
AuteurMessage
Admin
Admin
Admin
avatar

coolcatche monnaie : 100059439
Votre Réputation : 0
Date d'inscription : 04/02/2012
Localisation : ADMINISTRATEUR DU SITE

MessageSujet: html css tuto suite   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 :





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 ») :




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 »).




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 :-)



Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://3vision-group.1fr1.net
 
html css tuto suite
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Lecteur de pensée
» Bug-la balise image a changé de comportement avec un mélange html et code img suite aux modifications de juillet
» modif suite tuto "suppréssion des colonnes sujets et messages"
» Outpost Security Suite FREE
» Tutoriel Outpost Security Suite FREE

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
3vision-Group.com l Consuting - Infographisme - Site Web - Marketing - Maintenance :: Cours :: Programmation-
Sauter vers: