Petit probleme de comprehension

Fermé
jojo31170 Messages postés 1169 Date d'inscription vendredi 18 juillet 2008 Statut Membre Dernière intervention 18 novembre 2021 - 6 mars 2012 à 21:15
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 7 mars 2012 à 22:15
Bonjour,

Je lis actuellement des cour sur "le site du zéro".
Les cour porte sur le HTML et CSS.

Malgres la simplicité du sujet j'ai quelques passage que je peine a comprendre. Comme par exemple celui ci ou encore la.

Il y a aussi la parti sur le CSS ou par contre je ne comprend pas tout.
Je confond a peu près tout

Merci pour votre aide et réponses.


4 réponses

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
6 mars 2012 à 22:03
Salut,

Peux-tu nous dire quelles parties tu as de la peine à comprendre? Ré-expliquer deux chapitres sur le HTML + tout le tuto CSS serait... comment dire... un peu long.

As tu des questions plus ou moins ciblées?
0
jojo31170 Messages postés 1169 Date d'inscription vendredi 18 juillet 2008 Statut Membre Dernière intervention 18 novembre 2021 104
6 mars 2012 à 22:15
Salut prosthetiks et merci de prendre le temps de me répondre.

Au niveau du HTML j'ai assez bien compris sauf au niveau des liens entre les pages de mon site et les ancres.

Pour le CSS je me suis arrêter au milieu de la première partie vu que je m'y perd dans tout ces "codes".

J'aimerais juste savoir si il y a un moyens d'y voir plus clair pour le CSS.
Sinon pour ce que j'ai préciser plus haut au niveau du HTML un petite explication ira j'espère.

merci.
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
6 mars 2012 à 22:56
Re,

Les liens

Admettons que tu aies un dossier dans lequel figurent 2 fichiers:

- index.html
- page1.html

Dans index.html, tu places un lien:
<a href="page1.html">Le texte qui apparaitra a l'écran</a>


Une fois que l'utilisateur cliquera dessus, il sera dirigé vers la page dont l'adresse figure dans l'attribut href. Dans notre cas: page1.html.

Tu peux ainsi faire naviguer les visiteurs d'une page à l'autre. Pour qu'il puisse revenir à la page index.html, fait un lien dans la page "page1.html" de cette façon: <a href="index.html">Aller accéder à l'index</a>


Les ancres

Contrairement aux liens qui servent à naviguer entre des pages, les ancres servent à naviguer à l'intérieur des pages.

Elles ont leur utilité quand la hauteur de la page dépasse celle de l'écran.
Les ancres servent alors à naviguer dans la hauteur de la page lorsqu'un utilisateur clique sur un lien.

Pour t'expliquer son fonctionnement, il faut dans un premier temps revoir un notion: les id.

Id est un attribut qui peut s'appliquer à nimporte quel élément HTML. Il doit être unique au sein d'une même page.

Sa mise en place se fait de la façon suivante:

<[balise] id="[id-unique]">[Contenu]</[balise]>.

Pour être sur que tu suive, voici comment on assigne l'id "resume" à une balise div.

<div id="resume">...</div>


Maintenant qu'on peut identifier cette div grâce à son ID, on peut créer un lien qui le fera apparaitre lorsqu'on cliquera dessus.

Voici comment faire:

<a href="[page]#[ID_du_div_cible]">Voir la div</a>
ce qui donne dans notre cas:
<a href="index.html#resume">Voir la div</a>



Si tu ne comprends pas, je te ferai un exemple, ça sera peut-être plus parlant
0
jojo31170 Messages postés 1169 Date d'inscription vendredi 18 juillet 2008 Statut Membre Dernière intervention 18 novembre 2021 104
7 mars 2012 à 18:21
Merci je comprend un peu mieux, mais je ne suis pas contre un petit exemple ^^'

Pour le CSS mon problème se situe au niveau du fichier en .css que j'ai créer.
Je n'arrive pas a comprendre si par exemple:
J'ai 50 paragraphe, donc 50 paire de balise
<p> </p>
si je veux que le 24eme paragraphe soit de taille 14 et de couleur rouge.
Comment je vais devoir noter ça?
0
Bonsoir,

mais je ne suis pas contre un petit exemple ^^'
Bon ok mais il vous faut apprendre à trouver vous même et surtout pratiquer. N'importe quelle recherche sur internet avec lien html ou balise a vous fournira des exemples beaucoup plus détaillé et surtout à reproduire immédiatement pour comprendre.

Un paragraphe balise p(paragraph):

<p>Mon texte du paragraphe</p>

Un lien balise a(anchor, ancre en français)::

<a href="ailleurs.html">Cliquer ici pour aller ailleurs</a>

On remarque que la seule différence entre les deux balises est la présence dans la balise ouvrante d'un attribut de balise. L'attribut href(pour hypertext reference) va permettre d'indiquer quel élément doit être recherché lors d'un clic sur le lien.
Ainsi pour la balise a href="ailleurs.html" indique que l'on ouvre la page ailleurs.html situé dans le dossier racine du site(dans le même dossier que la page qui contient le lien).

L'attribut de balise est pas toujours utile mais il sert à indiquer d'autres informations sur la balise ainsi que pour le CSS.

L'attribut (ou les attributs) de balise est toujours dans la balise ouvrante d'une balise double entre les crochets et après son nom, comme ceci:

<p ATTRIBUT="VALEUR">Mon Texte</p>
ou comme ceci
<p ATTRIBUT="VALEUR" ATTRIBUT2="AUTRE VALEUR" >Mon Texte</p>

ATTRIBUT écrit en gros est juste pour l'exemple, la balise p ayant peu d'attribut possible depuis l'apparition du CSS. Nous allons donc prendre un autre exemple:


La balise img est une balise dite auto fermante et ne contient pas de balises ouvrante ni fermante, elle ne peut contenir(imbriquer d'autres balises comme c'est le cas pour une balise de paragraphe).

<img /> Pour une image sauf que nous ne savons pas quelle image. On va à nouveau utiliser l'attribut un attribut pour indiquer l'image à charger dans la page:

<img src='mon_image.jpg' />
Charges l'image mon_image.jpg dans le même dossier que la page(src= source). Pour ranger nos images et pas les mélanger avec nos pages HTML on va créer un dossier images situé à la racine du site(toujours le même dossier):
La syntaxe suivante:
<img src="images/mon_image.jpg" />
Charges l'image mon_image.jpg du dossier images

J'ai indiqué que l'on pouvait avoir autant d'attributs qu'il était nécessaire, voici un attribut qui n'est plus utilisé(déprécié pour de nombreuses raisons) depuis l'invention du CSS.

<img src="images/mon_image.jpg" WIDTH="240" />
width signifie largeur en anglais(j'ai mis en majuscule l'attribut rajouté mais ce n'est pas la peine, le html peut s'écrire indifférement en minuscule ou majuscule, le résultat sera identique).
L'attribut width donc va indiquer que l'image aura 240 pixels de large.


J'ai 50 paragraphe, donc 50 paire de balise
<p> </p>
si je veux que le 24eme paragraphe soit de taille 14 et de couleur rouge.
Comment je vais devoir noter ça?


Soyez au point avec le HTML (en allant voir d'autres sites que le site du zéro par exemple et qui vous permettront de compléter vos connaissances et de pratiquer des exemples pour débutant) avant d'entreprendre le CSS.

Le CSS peut s'écrire de 3 façons différentes utilisant les attributs de balise(globalement, il existe des exceptions)
_Avec l'attribut style la balise est directement concerné par le CSS, cela peut être pratique pour apprendre mais son utilisation ne doit pas être une habitude car elle nous fait perdre l'une des qualités du CSS, pouvoir changer simplement sa mise en page. Ce ne sera pas le cas avec l'attribut style.

_En indiquant le css dans la page. Pratique aussi mais dès que l'on fait plusieurs pages même défaut que pour l'attribut style.

_La seule façon propre de faire: Avec une feuille de style externe chargée dans chaque page qui en aura besoin.

Je vais prendre la 2ème possibilité à titre d'exemple(CSS dans la page).


<html> 
<head> 
<style type='text/css' rel='stylesheet'> 
<!----------ENTRE LES BALISES STYLE QUI SONT DANS LE HEADER ON INDIQUE LES STYLES --> 
p.exemple{ 
color:#ff0000; 
font-size:14pt; 
} 
<!-----------ICI LE STYLE exemple EST UNE CLASSE(symbolisé par le "." s'appliquant uniquement aux balises p( p.exemple ) --> 
<!---------Les proprièrtés COLOR et FONT-SIZE vont agir sur la couleur du texte et sa taille 
---------------> 
</style> 
</head> 
<body> 

<p> 
Sans Style 
</p> 
<!-------- pour indiquer que l'on utilise une classe il faut simplement écrire l'attribut CLASS et le nom de cette classe comme valeur pour cet attribut----> 
<p class="exemple"> 
Le style avec la classe 
</p> 

</body> 
</html>



Avant le CSS qui est complémentaire au html vous devez maîtriser parfaitement ce dernier. Faites des essais avec dans vos pages des liens, des ancres nommés(lien interne à la page) , des tableau et des images. Essayez même de reproduire une mise en page simple(même à l'aide de tableau pour vous aider). Vous saurez tout sur le html mais plus encore vous aurez l'habitude de l'écrire et plus besoin de réfléchir ou chercher pour faire telle ou telle mise en page ou quelle balise il vous faut.
Le css c'est tout ce que vous aurez r^vé de faire avec HTML et qui ne peut pas se faire(couleurs, positionnement, images au survol, jolis cadres, texte en majuscules, marges, lettrines etc...)
0
A noter que l'unité de taille de police de caractère recommandé pour les pages du world wide web est le quadratin(symbole em) et surtout pas le pixel(px). Le quadratin(em) à l'avantage par rapport au point typographique(pt) d'être proportionnel et donc de s'adapter en fonction de la taille des éléments de la page quelle que soient les dimensions de l'écran et de l'affichage(résolution) de l'utilisateur du site. C'est un peu vicieux à comprendre mais vaut le coup. 1em étant la hauteur d'une ligne de texte normale pour agrandir le texte d 20% il faut indiquer 1.2em(la virgule des chiffres en informatique et dans la culture anglo-saxonnes est indiqué par un . et non une , comme en français).

Bon HTML.
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
7 mars 2012 à 22:15
Tcheu le roman xD
0