Pixelia

Votre forum de graphisme et d'entraide ~
 
AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  
Pixelia devient Pixels Paradise ! Le forum ferme ici ses portes mais en ouvre de nouvelles à cette adresse : http://www.pixels-paradise.com/ Nous espérons que vous serez nombreux à nous suivre dans cette nouvelle aventure !

Partagez | 
 

 Cours d'Uchiha [HTML / CSS]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Uchiha

Juge }
Masculin Team : Rainbow Smarties
Messages : 139
Age : 21
Date d'inscription : 22/07/2011
Système d'exploitation : Windows

MessageSujet: Cours d'Uchiha [HTML / CSS]   Lun 25 Juil 2011 - 4:09

Pseudo ; Uchiha
Niveau estimé CSS ; 0
Niveau estimé HTML ; Je dirais à peu près 2 ou 3, j'avais commencé à étudier le HTML seul. Je me suis rendu jusqu'aux cadres. Mais ça fait quand même un bail, donc j'ai sûrement oublié beaucoup. J'ai arrêté de comprendre après les cadres donc je n'ai même pas jeté un œil plus loin et surtout pas au CSS (Puisqu'on peut dire qu'il est un peu comme le complément du HTML).
Souhaitez-vous un professeur en particulier ; Je ne suis pas très difficile mais Nico' semble sympa. ^^
Avez-vous quelque chose en particulier que vous désirez apprendre ; Eh bien, en fait, puisque je pratique le rôle play et l'écriture, j'aimerais bien être capable d'améliorer l'esthétique de mes posts (Par exemple, faire une boîte de texte qui défile avec un fond personnalité fait avec son programme de graphisme *Dans mon cas, Gimp*). J'aimerais aussi faire de bonnes pages d'accueil puisque je pense à reprendre mon forum Naruto à zéro et donc tout modifier pour en faire un très bon forum. Comme tout forum voulant faire parti des meilleurs, il faut un sublime graphisme, une belle Mise en page et un staff sympathique.
Un mot de motivation ?
La plupart de mes motivations ont été citées au dessus. J'aimerais beaucoup comprendre l'étendue du HTML et du CSS puisqu'ils se complètent l'un et l'autre, comme le Yin et le Yan si vous voulez. Sans le HTML, le CSS n'est pas, alors je veux apprendre les deux. Merci d'avance à la personne qui me prendra sous son aile.

_______________
titre
~Cliquez sur ma signature pour voir ma galerie~


~GOÛTE L'ARC-EN-CIEL !~
Revenir en haut Aller en bas
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Lun 25 Juil 2011 - 9:10

Coucou Uchiha ^^
De toute façon, tu n'as pas grand choix car je suis pour l'instant la seule à donner des cours huhu xDD

J'aurais aimé quand même avoir des exemples visuels de ce que tu sais faire avant de complètement démarrer le cours et voir ce qu'il y a besoin de savoir =D


Valou vali O/

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
avatar
Uchiha

Juge }
Masculin Team : Rainbow Smarties
Messages : 139
Age : 21
Date d'inscription : 22/07/2011
Système d'exploitation : Windows

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Lun 25 Juil 2011 - 13:57

Bah, pour commencer, je sais la base des choses. Je sais que dans une page HTML, il y a un certain code qui ouvre la page HTML (Je doute que ce soit , puisque je suis certain que celui-là va après . Peut-être que c'est ou un truc du genre ?

Enfin bref, on va dire que je le connais pour montrer un exemple d'une page web. Je sais qu'il y aura peut-être des erreurs puisque ça fait un bail, mais ça ne coûte rien d'essayer. ^^
Code:
<html>

<head><b><center>Votre Titre apparaîtra en Gras au centre</center></b></head>

<body><justify><i><color=darkred> Avec ce code, votre texte sera "justifié", c'est à dire que chaque ligne arrivera au même endroit à la fin de la page, ce qui affichera un meilleur rendu. Il sera aussi en italique et de couleur rouge foncé. Ce texte apparaîtra sous la description et servira aussi de corps pour votre article. Vous pouvez y poster des photos si c'est un blog ou y mettre le lien d'un forum partenaire, bref, un peu comme la mise en page des forums si vous voulez, mais la différence, c'est que forumactif a déjà fait ce code pour vous (Mis à part les petits trucs que j'ai ajouté par moi-même), c'est pour cela que créer un forum n'est pas aussi énervant (Enfin, après, il reste faire son propre graph et créer ainsi que modifier plein de trucs, la suite demande beaucoup de travail de votre part.) Bref, en résumé, voilà tout.</color></i></justify></body>

</html>

Sinon, bah, je crois n'avoir rien oublié sur la structure html. Par contre, je sais comment faire des liens cliquables sous un nom. Par exemple :
Code:
<url=http://pixelia.graphforum.com/>~Bienvenue sur Pixelia, le forum de graphisme et d’entraide~</url>

Bref, sinon, il y a d'autres codes de base que j'ai oublié qui pourraient être très utiles, comme l'image cliquable dans ton post sur les bases. En tout cas, c'est à peu près tout ce dont je me souviens de ce que j'ai appris sur le html, donc disons que c'est assez peu pour le moment. ^^

_______________
titre
~Cliquez sur ma signature pour voir ma galerie~


~GOÛTE L'ARC-EN-CIEL !~
Revenir en haut Aller en bas
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Lun 25 Juil 2011 - 16:20

Hellow, hellow ^^

Je n'ai pas compris ce que tu voulais dire par 'il y a un code qui ouvre la page html' ^^"
Sinon, je vois que tu as deux trois restes notamment sur la construction basique d'une page html même s'il manque quelques détails. Voici en fait ce que doit contenir toute page html sur le net (je ne parle pas des pages html que FA héberge lui-même ^^ :

Code:
<!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" xml:lang="fr" >
  <head>
      <title>Bienvenue sur mon site !</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
  </body>
</html>
(source : site du zero)

Ensuite, ce qu'il faut savoir c'est que la page html est composée du contenu de ta page (le texte notamment). Les balises de mise en page, d'apparence (taille du texte, couleur, disposition...) se mettent toujours à part dans une feuille appelée CSS. Pour que la feuille de style s'applique à la page html, il faut intégrer ce lien dans la page html ^^ Voilà globalement mais ce n'est pas ce qu'on va voir en premier car y a plein de subtilités ^^

Pour un texte la balise html ce n'est pas elle. Là tu as mélangé avec le BBCode et remplacé les crochets par des <*>
Pour qu'un texte soit cliquable il doit être entouré des balises
Code:
<a href="lien de ce qu'on veut">texte</a>


Voilou voili ^^

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
avatar
Uchiha

Juge }
Masculin Team : Rainbow Smarties
Messages : 139
Age : 21
Date d'inscription : 22/07/2011
Système d'exploitation : Windows

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Lun 25 Juil 2011 - 18:30

Ce que je voulais dire par le "Code qui ouvre la page HTML", je parlais du au début de tout le travail et à la fin, un code essentiel si on veut créer son site par exemple. C'est à l'intérieur de ces balises qu'on met le contenu de la page. C'est ce que j'ai appris. Je sais aussi qu'on peut utiliser bloc notes pour tester et voir la page web qu'on a construit.

Pour le CSS, c'est beaucoup plus clair maintenant que tu m'as expliqué. En gros, le CSS et le HTML sont séparés, mais on les fusionne ensemble à la fin en quelque sorte ? Pour ce qui est de comment on arrive à intégrer du CSS dans une page HTML, j'ai pas trop compris. Enfin, c'est normal, puisque comme tu l'as dit, on en parlera plus tard puisqu'il y a plein de subtilités.

Pour le HTML, en effet, j'ai confondu avec le BBcode, ce qui veut dire que mettre les choses en gras, italique, justifier et tout est différent en HTML comparé au BBcode ? En tout cas, je crois que j'avais un peu couvert cette partie car je me souviens avoir vu
Code:
a href
auparavant, mais il serait bien de les couvrir aussi (Par exemple, l'utilisé du
Code:
<a href>
et le
Code:
</a>
niveau HTML. ^^

_______________
titre
~Cliquez sur ma signature pour voir ma galerie~


~GOÛTE L'ARC-EN-CIEL !~
Revenir en haut Aller en bas
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Lun 25 Juil 2011 - 19:26

Bah pour qu'un site soit sur Internet il faut l'héberger ^^ Tu veux donc parler des balises <*html> (sans étoile) qui permettent de définir qu'une page est en html.
Effectivement, le bloc notes permet de créer une page html que l'on peut admirer en local ^^


HTML et CSS sont différents mais se complètent car leurs fonctions sont différentes. Une feuille CSS n'a aucune signification toute seule mais une page HTML peut vivre sans le CSS (elle sera juste moche XD)
Ils ne fusionnent pas non ^^

Je te montre un exemple de CSS intégré :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.


Code:
<div style="text-align: right; font-size: 14px; font-family: Georgia,serif; text-shadow: 1px 1px 1px #000000; margin-right: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</div>

Comme tu le vois, j'ai mis mon texte en taille 14, en police Georgia. Je l'ai disposé à droite avec une marge de 10 pixels. Il dispose également d'une petite ombre x)


Les noms des balises sont en anglais donc ça change assez peu de choses, c'est juste qu'il faut respecter certaines normes ^^
La disposition (justifier / centrer / droite / gauche) se fait avec le CSS ; les bouts de texte en gras ou en italique peuvent être faits en balises html dans le texte. Mais quand c'est pour un paragraphe c'est dans la feuille de style qu'il faut signifier ce détail.

La valeur dans une balise html doit toujours être entre guillemets ^^. La valeur c'est ce que tu mets comme lien par exemple dans la balise qui te permet de rendre un mot cliquable.
Exemple :
Code:
 <a href="blabla.htm">Blabla</a>

La valeur c'est mon blabla.htm x)


Valou vali O/
Prochain cours on va voir les balises de base ^^

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
avatar
Uchiha

Juge }
Masculin Team : Rainbow Smarties
Messages : 139
Age : 21
Date d'inscription : 22/07/2011
Système d'exploitation : Windows

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Mer 27 Juil 2011 - 16:09

D'accord, je suis prêt. ^^

_______________
titre
~Cliquez sur ma signature pour voir ma galerie~


~GOÛTE L'ARC-EN-CIEL !~
Revenir en haut Aller en bas
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Mer 27 Juil 2011 - 19:32

Cool ^^
Je m'occupe de ton cours de Gimp demain et de celui-ci aussi O/

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Jeu 28 Juil 2011 - 19:33

Coucou me voici comme promis ! O/

Les balises html de base sont les suivantes :

Code:
<p></p>
Entre ces balises tu mets un paragraphe de texte. C'est utile de séparer ses textes en paragraphes de façon à ensuite pouvoir leur donner un style ^^

Code:
<br />
Voici la fameuse balise permettant de revenir à la ligne. Car dans une page html, le retour à la ligne doit être indiqué, il ne se fait pas naturellement avec le fait d'appuyer sur la touche entrée x) Comme tu le vois, cette balise est seule comparé aux autres.

Code:
<b></b> ou <strong></strong>
Ce sont les balises qui permettent de mettre en valeur un bout de texte ^^

Code:
<i></i> ou <em></em>
Et là tu as les balises permettant de mettre en quelque sorte en italique un bout de texte ^^

Code:
<img src="lien direct de ton image se terminant par l'extension" border="0" alt="titre alternatif" />
De là même manière que la balise permettant d'aller à la ligne, la balise permettant d'insérer une image est unique. Comme tu le vois, pour faire apparaître l'image il faut mettre entre les guillemets situés après src le lien direct de ton image. De même que la norme impose de toujours mettre un titre alternatif.

Code:
<a href="lien"></a>
Maintenant, ce sont les balises qui permettent d'ajouter un lien à un texte (et donc de faire plus jouli x) ). Tu peux mettre tous les liens que tu désires O/ Là encore écrire seulement le lien point barre ne le rendra pas cliquable. Pour simplement rendre un lien cliquable il suffit de le mettre entre ces balises-ci :
Code:
<a>lien</a>

Code:
<a href="lien où tu veux que ton image renvoie"><img src="lien direct de l'image" border="0" alt="titre alternatif"></a>
Là c'est le code HTML suprême ♥ Il te permet de rendre une image cliquable. Il s'agit donc de la combinaison des deux jeux de balises que je t'ai expliqués juste avant ;)

Ces balises et le code sont à apprendre par cœur ce qui évitera de toujours aller voir sur le net x) Mais bon à force de les utiliser on commence à les savoir x)

As-tu des questions, jusque là ? ^^

_______________



Spoiler:
 


Dernière édition par Nico' le Mer 24 Aoû 2011 - 19:03, édité 4 fois
Revenir en haut Aller en bas
http://ici.lol
avatar
Uchiha

Juge }
Masculin Team : Rainbow Smarties
Messages : 139
Age : 21
Date d'inscription : 22/07/2011
Système d'exploitation : Windows

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Ven 29 Juil 2011 - 4:07

Non, c'est bon. Pour le moment, tout est bon. ^^

_______________
titre
~Cliquez sur ma signature pour voir ma galerie~


~GOÛTE L'ARC-EN-CIEL !~
Revenir en haut Aller en bas
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Ven 29 Juil 2011 - 9:09

Bon tant mieux ^^
Dans ce cas, pourquoi ne pas voir les balises plus compliquées : celles pour les tableaux O/

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
avatar
Uchiha

Juge }
Masculin Team : Rainbow Smarties
Messages : 139
Age : 21
Date d'inscription : 22/07/2011
Système d'exploitation : Windows

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Ven 29 Juil 2011 - 14:20

Pourquoi pas ? ^^

_______________
titre
~Cliquez sur ma signature pour voir ma galerie~


~GOÛTE L'ARC-EN-CIEL !~
Revenir en haut Aller en bas
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Ven 29 Juil 2011 - 17:12

Alors pour réaliser un tableau tout simple ^^
Il faut savoir que les balises
Code:
<tr></tr>
représentent les lignes. Tandis que les
Code:
<td></td>
représentent les colonnes.

Le tableau doit commencer par les balises
Code:
<table><tbody>
et s'achève par les balises
Code:
</tbody></table>

Le tableau se construit horizontalement, c'est-à-dire que ce sont les balises de lignes qui encadrent les balises de colonnes. Dans une ligne, tu peux créer plusieurs colonnes.

Ainsi un tableau de deux lignes et trois colonnes se construira comme ci-dessous. On retrouvera trois paires de balises de colonnes dans chaque paire de balises de lignes :

Code:
<table><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

123
456

Un tableau comme celui-ci n'aura aucune bordure. Pour créer une bordure, il faut rajouter ceci : border="1"

Code:
<table border="1"><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table>

123
456

Perso, je trouve ça moche xDD

Tu peux ensuite régler la taille du tableau soit en pourcentage soit en pixels en rajoutant la propriété width="valeur en px ou en %" :

Code:
<table width="75%"><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table>

123
456


Tu peux aussi régler la taille des colonnes en ajoutant la même propriété mais dans la balise td ^^

Code:
<table><tbody><tr><td width="150px">1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table>

123
456

Est-ce que pour le moment ça va ? ^^

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
avatar
Nico'

Grande Prêtresse.#
Féminin Messages : 9476
Age : 28
Localisation : With Him <3
Humeur : Fine <3
Date d'inscription : 04/05/2008
Système d'exploitation : Vista et 7

MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   Ven 28 Oct 2011 - 14:40

Hello, hello ^^
Je viens aux nouvelles ;)

_______________



Spoiler:
 
Revenir en haut Aller en bas
http://ici.lol
Contenu sponsorisé


MessageSujet: Re: Cours d'Uchiha [HTML / CSS]   

Revenir en haut Aller en bas
 

Cours d'Uchiha [HTML / CSS]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Pixelia :: Travaux encadrés-
Sauter vers: