ShinysHunters

Forum des chasseurs de shinies (SH). Bienvenue !
 
AccueilAccueil  Site SH  Discord  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Initiation au HTML/CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Initiation au HTML/CSS   Jeu 26 Jan 2012 - 21:43

Tutoriel 1 :

Bonsoir à tous et à toutes, et bienvenu à ce topic touchant sur l'initiation aux technologies du web. Ce topic ne vous apprendra qu'a réaliser des sites vitrines, je ne parlerai pas de javascript/AJAX, ni de jquery. Il ne touchera pas les transferts ftp, le référencement, positionnement, etc.

Tout d'abord commençons par le commencement.

Le HTML est un langage qui suit un schéma très précis et qui est soumis à la norme W3C. Pour faire valider vos sites je vous invites à rejoindre : http://validator.w3.org/.
Vous pouvez développer via Adobe Dreamweawer, mais Notepad++ ou tout autre éditeur de texte pour les moins riche suffira. Chaque fichier créer devra être enregistrer au format ".html"

Donc pour réaliser vos sites cela devra obligatoirement se présenter sous la forme suivante :
 

Le doctype et les meta/title sont obligatoire pour respecter les normes. Cependant avec le HTML5, il y a désormais des simplifications. Mais étant un langage très récent je n'en parlerai pas.

La balise HEAD représente comme son nom l'indique la tête du programme. C'est ici que vous déclarerez vos fonctions javascript, appellerez vos feuilles de style, déclarerez vos meta.

La balise BODY représente donc le corp du programme, c'est ici que nous allons désormais travailler pour ce premier petit cours.

Attaquons désormais les deux types de balise existant.
1) Les balises de bloc tels que les balises div, body, paragraphe que nous verrons plus tard.
2) Les balises auto-fermante sur une ligne tels que les images,.

Je vais désormais vous proposez certains premiers exercices, mais tout d'abord vous donnez deux trois balises utiles pour vous aider :
 

Concernant les balises tout ce qui est entre guillemet se nomme un attribut. Grâce a eux on peux jouer sur les dimensions ou la forme. Par exemple la balise image peux modifier sa largeur et sa hauteur grâce a eux. Toujours sur la balise image le alt est OBLIGATOIRE..

Je suis désolé d'être aussi bref, mais rien ne vaut d'essayer soit même. Ce premier cours est un test pour voir si le topic marche, je rajouterai des exercices et des infos si certains sont intéressé.


Maintenant voici les exercices :

Exercice 1 : Afficher Hello words dans une page Html en titre, avec un paragraphe de description. Le paragraphe devra contenir du texte en italique et en gras :
 

Exercice 2 : Afficher une image sous 3 formes. Tout d'abord sous sa taille normale. La deuxième avec l'attribut width et height a 75px. Et pour la dernière juste le width à 100px. Regarder ce qu'il se passe :
 

Exercice 3 : Créer un lien avec un texte vers une deuxième page qui aura en titre de niveau 3 "page 2", mais aussi un lien avec une image redirigeant vers une page 3 ayant un titre de niveau 1 "Page 3".:
 

Exercice 4 : Créer un tableau ayant d'un côté des images, de l'autre du texte, un texte. Faites varier l'épaisseur de la bordure, le cellpadding et le cellspacing. Constatez.:
 

Exercice 5 : Créer une liste dans laquelle vous insererez des listes non ordonnée (ça se corse =p) :
 

Exercice 6: La vous allez devoir faire des recherches.
Créer un tableau de 5 colonnes et 5 lignes. Faire fusionner les ensembles comme ci-dessous :
 

Si certains font ces exercices je les autorise à poster en UN SEUL post les screens des 6 exercices ci-dessus.


Voilà amusez vous bien (enfin j'espère Sad) et bonne soirée

Edit : Merci à shika et Manaphy pour m'avoir aider à corriger ce premier tutoriel.


Dernière édition par Latha & Zuhl le Lun 30 Jan 2012 - 20:20, édité 1 fois
Revenir en haut Aller en bas
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Re: Initiation au HTML/CSS   Jeu 26 Jan 2012 - 21:51

J'ai oublié une balise utile mais je ne peux pas éditer sans casser tout mon travail.

Code:
Retour à la ligne à placer en fin de phrase :

Les balises titre reviennent automatiquement à la ligne

Edit : Tuto 1 corrigé merci aux admin/moderateur de supprimer ce post.


Dernière édition par Latha & Zuhl le Lun 30 Jan 2012 - 20:23, édité 1 fois
Revenir en haut Aller en bas
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Re: Initiation au HTML/CSS   Jeu 26 Jan 2012 - 22:01

Ah la vache je fatigue une autre erreur à signaler excusez moi, faire ça toutes la journée ça épuise ... tr = ligne et td = colonne certains diront ça change rien bah si dans la logique du codage que j'essaie d'inculquer aux intéresser c'est important. Surtout pour l'exercice 6

Et aussi vache j'en oublie des choses ... Quand vous enregistrez vos fichier c'est en ".html"

Edit : Tuto1 corrigé, merci aux moderateurs/admins de supprimer ce post.


Dernière édition par Latha & Zuhl le Lun 30 Jan 2012 - 20:24, édité 1 fois
Revenir en haut Aller en bas
Shika25
Aspirant SH
Aspirant SH
avatar

Masculin Age : 24
Nombre de messages : 1193
Date d'inscription : 05/06/2009
Localisation : Pontarlier
Nombre de Shinies : Regarde sur ma SH-card ça m'évite d'actualiser cet onglet quand j'en ai un x)

MessageSujet: Re: Initiation au HTML/CSS   Ven 27 Jan 2012 - 18:45

Pas que je sois contre ce topic (loin de là même s'il ne pas pas utile) mais un topic semblable existe déjà ici. Bon après je sens venir le "oui mais c'est des exercices d'initiation" mais dans ce cas il y a le site du zéro qui initie plutôt bien non?
Enfin je donne mon avis libre aux modos de laisser comme je l'ai dit je suis loin d'être contre.^^
Revenir en haut Aller en bas
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Re: Initiation au HTML/CSS   Sam 28 Jan 2012 - 11:39

Ah effectivement j'avais pourtant lancé une recherche mais non rien.

Pour les sites qui prétendent apprendre oui il donne les bases mais pas toujours des bonnes. Le niveau qu'il donne n'est pas toujours bien. En tant que développeur je t'affirme que seul le site développez.com est bien. L'intérêt pour moi d'avoir fais ce topic est surtout la pour aider la communauté sh (notamment pour la réalisation de new Sh ou de cv en ligne très prisé en ce moment.) . Ça parait anodin comme cela mais développez en html contient de nombreuses normes que je n'ai appris qu'a ma troisième année d'étude en dev.
Donc je peux te garantir que l'autodidacte en informatique ca n'existe pas et je l'ai appris amèrement.

Et comme déjà indiqué si le topic réussis je vous donnerai toutes les bases y compris utilisé des plug in et pourquoi pas un topic Php à venir.
Doc juste un test Wink
Revenir en haut Aller en bas
Shika25
Aspirant SH
Aspirant SH
avatar

Masculin Age : 24
Nombre de messages : 1193
Date d'inscription : 05/06/2009
Localisation : Pontarlier
Nombre de Shinies : Regarde sur ma SH-card ça m'évite d'actualiser cet onglet quand j'en ai un x)

MessageSujet: Re: Initiation au HTML/CSS   Sam 28 Jan 2012 - 12:57

Ok je comprends ce que tu veux dire. Je suivrai quand même ce topic je pourrais voir pour donner des conseils éventuellement (je fais des études dans le domaine et je me débrouille pas trop mal).

Sinon l’autodidacte existe quand même en informatique la preuve mon oncle a tout appris seul et il a son agence de création de site web enfin bon Razz
Revenir en haut Aller en bas
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Re: Initiation au HTML/CSS   Dim 29 Jan 2012 - 15:10

Bah en autodidacte on peux apprendre les méthodes mais la logique nécessaire dure ^^
Revenir en haut Aller en bas
Mana Sencha
Modérateur (MS)
Modérateur (MS)
avatar

Masculin Age : 22
Nombre de messages : 813
Date d'inscription : 11/08/2008
Localisation : Liuz, Lyaka

MessageSujet: Re: Initiation au HTML/CSS   Dim 29 Jan 2012 - 15:41

Bien, tu as juste oublié d'indiquer les balises pour les liens, et qu'il fallait enregistrer le tout dans un fichier .html x) Tu passes complètement à côté de certaines choses qu'un débutant ne comprendra pas.

EDIT: Ah et je viens même de remarquer que tu nous demande à créer des pages avec un certain style sans même nous indiquer comment utiliser une feuille de style CSS =/

Donc même si ça part d'une bonne idée, essaye de te relire et pense au débutant qui se retrouve avec 40 informations manquantes...

_________________


Mana Sencha, alias Mana' 21 pour les anciens ~
Revenir en haut Aller en bas
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Re: Initiation au HTML/CSS   Dim 29 Jan 2012 - 19:15

Les balises de liens y sont et enregistrer en fichier Html indiquer dans le post en dessous Wink
Je vais modifier le topic plus tard en remplaçant par des images je pense plus sympa à lire.

Pour les feuilles de style bah le topic je comptais le faire ce soir Wink.

Lier une page css.
Gestion des blocs avec classe, id. Positionner les blocs en flottant, relatif, absolue, static.
Ajouter un effet ombré.

Et oui je sais que j'ai rajouter des infos à la suite mais c'est dut à la structure que le forum m'impose modifier maintenant supprime l'affichage HTML c'est pour cela que je compte refaire le tuto1.

Fin maintenant assez parler je m'attaque au tuto2, puis je refais le tuto1 Wink

Edit : Tuto corrigés, merci aux administrateurs/moderateurs de supprimer ce post


Dernière édition par Latha & Zuhl le Lun 30 Jan 2012 - 20:29, édité 1 fois
Revenir en haut Aller en bas
Latha & Zuhl
Nouveau Membre
Nouveau Membre
avatar

Nombre de messages : 140
Date d'inscription : 08/12/2011
Localisation : Dans notre appart
Nombre de Shinies : 51

MessageSujet: Re: Initiation au HTML/CSS   Dim 29 Jan 2012 - 20:27

Tutoriel numéro 2 :




  • Lier une feuille css
  • Utiliser les "class" et les "id"
  • Liste de fonctions css possible
  • Exercices


Lier une feuille de style css :
Avant d'apprendre à lier une feuille de style en cascade, nous
allons tout d'abord exprimer comment les créer et leurs intérêt. Pour
les créer, il suffit d'enregistrer un fichier texte en un fichier
".css". Elles permettent d'agir sur un endroit précis du code comme le
montre l'exemple ci-dessous.
Exemple précis :
 

Bien maintenant que nous avons vus que les feuilles en cascade
permettait de cibler une zone précise de votre site internet, nous
allons pouvoir les lier. Pour cela dans la balise Head il suffit
d'ajouter une balise Link comme ci-dessous.
Lier une feuille css :
 
En ce qui concerne les divs nous les utiliserons par la suite de notre petit tutoriel.

Utiliser les "class" et les id :
Comme indiqué juste au dessus nous allons maintenant nous servir des classes et de l'identifiant Wink.
Pour récupérer une classe dans la feuille css, il suffit de mettre un
point devant le nom de votre bloc. De la même manière pour un
identifiant, il suffit de mettre un #.
Ceci est illustré ci-dessous.
Exemple de classe et d'id:
 

Liste de fonctions css possible :
Alors ceci devrait vous aider pour gérer vos pages. Toutes les fonctions
ne sont pas écrite, mais il y a déjà de quoi s'occuper Wink.
Liste :
 

Exercices :
Utiliser les positions flottantes pour écrire une page similaire :
 

Positionner deux images ou deux blocs comme cela :
 

Créer le même effet ombré. Pour centre votre image essayer "margin : 0px auto;" pour votre div:
 
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Initiation au HTML/CSS   

Revenir en haut Aller en bas
 
Initiation au HTML/CSS
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Initiation au HTML/CSS
» adresse HTML pour banniere scrapissimots
» Z-CENTURY GYRO 4CH - SILVERLIT - INITIATION.
» Comment une nulle peut monter son site en html
» Initiation à la peinture à l'huile

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
ShinysHunters :: Discussions (la vie sans Pokémon) :: Discussions Générales-
Sauter vers: