Un forum de discussions pour parler de tout et de rien, de vos études,de vos vacances,de vos loisirs et faire plein de connaissances
 

1 résultat trouvé pour 000000

AuteurMessage
Tag 000000 sur Ocean Home TO8Q2fVSujet: Cours #1 : Créer un bloc, mise en page d'un texte.
Arya

Réponses: 35
Vues: 1683

Rechercher dans: Tutoriaux   Tag 000000 sur Ocean Home EmptySujet: Cours #1 : Créer un bloc, mise en page d'un texte.    Tag 000000 sur Ocean Home EmptySam 4 Nov - 17:14


Langage : CSS&HTML
Niveau : Débutant
Temps : 15 minutes
Auteur : Arya
Créer un bloc et un texte

Aloha ~  :neko1: Alors ça fait pas mal de temps que j'avais envie de faire un tuto pour vous apprendre à coder, et puis je n'ai jamais eu le temps. :neko17:
Même là en fait je n'ai pas le temps mais j'ai décidé de séparer le cours en plusieurs parties afin que ce soit plus rapide pour moi de poster un tuto (je me mets au défi de faire un tuto en moins de 30 minutes si possible  :neko15: )



Nous allons apprendre à faire un bloc tout d'abord. C'est tout simple. La balise div vous permettra de créer un bloc et vous devriez lui attribuer plusieurs fonctions afin que le bloc prenne forme.
Code:
<div="1erAttribut;2èmeAttribut;3èmAttribut;"></div>

Le Html c'est tout ce qui est sous le forme de "<..>" Le CSS c'est tout ce qui est "1erAttribut;2èmeAttribut;3èmAttribut;". En bref le HTML forme le corps, le CSS forme les couleurs, les images, c'est le contenu. Il y a toujours des points virgules entre chaque attribut même s'il se trouve à la fin du CSS. Pensez également à bien referme le crochet en HTML. :neko5:

Déjà nous allons décider de la hauteur→height et de la largeur→width de notre bloc. Prenons par exemple 450*600px. On les insère ainsi.
Code:
<div style="width:450px;height:600px;"></div>

Simple non ?  :neko15:

Sauf que là nous avons créer une zone vide. Alors pour compléter ça, on peut soit choisir une image, soit une couleur. Nous allons commencer par simplement y mettre une couleur de fond→background-color. Votre couleur doit être en html code, il commence par # et comporte 6 chiffres. Exemple : #000000=noir et #FFFFFF=blanc
Pour chercher la couleur de votre choix je vous propose ce site :
https://html-color-codes.info/Codes-couleur-HTML/
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;"></div>


Mettons ensuite des bordures à ce bloc. Pour cela, nous utilisons border-right, border-left, border-top, border-bottom (droite, gauche, haut, bas). On les utilise ainsi : border: XXpx #000000 solid/dotted/dashed..etc Solid c'est pour faire une ligne continue, dotted une ligne en pointillée et dashed pour une ligne segmentée. Vous pouvez vous amuser à varier et faire comme vous voulez !
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;"></div>

RESULTAT 1 (ci-dessous)

Ajoutons-y un titre. Pour trouver une belle police je vous conseille de chercher ici :
https://fonts.google.com/
J'ai choisi Homemade Apple, mais faites comme vous voulez :neko5:
Google me donne donc deux choses :
Code:
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">

ça va aller juste avant votre titre, c'est du html
Code:
font-family: 'Homemade Apple', cursive;

ça va aller dans la div du titre car c'est du css
Créons une nouvelle div dans la div précédente et ajoutons un titre ainsi :
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div></div>

Le link vient de Google font, et le css inséré aussi. On applique une couleur avec color et on choisit une taille de police avec font-size.
RESULTAT 2 (ci-dessous)

Comme le titre dépasse en haut, on lui rajoute une marge inférieure → padding en haut → top ainsi :
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;padding-top:20px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div></div>


J'espère que je ne vous ai pas perdu :neko17:
Pour la suite c'est simple, c'est comme avant, on crée un bloc, mais dans le bloc d'avant et après le bloc du titre. On choisit les dimensions, un fond et petite nouveauté que j'apporte, on peut utiliser l'opacité→opacity pour nuancer, et faire un peu apparaître le fond (utile quand le fond est une image). De plus, on ajouter overflow:auto pour faire la scrollbar, ainsi on pourra y mettre un texte long sans qu'il ne dépasse du bloc.
Code:
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;padding-top:20px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div>

<div style="width:350px;height:150px;background-color:#3EB397;color:#ffffff;opacity:0.6;overflow:auto;padding:5px;"> Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée
 J'espère que ça ne vous gêne pas    
Je vous fais des bisous <3
Arya-sensei  
</div></div>

J'ai également ajouté des marges intérieures avec padding:5px; pour éviter que le texte colle aux bordures.
RESULTAT 3 (ci-dessous)

Ensuite vous pouvez varier avec les bordures, les couleurs et tout ce que vous voulez !  :neko9: Sur le résultat final, j'ai juste varier l'opacité  :neko15:

A retenir :
background-color:#000000;
height:XXpx;
width:XXpx;
color:#000000;
font-size:XXpx;
overflow:auto;
opacity:0.X;
padding:XXpx
border:XXpx #000000 solid/dotted/dashed...
Un petit merci ne vous coûte rien ! Montre-moi vos oeuvres !
Codage by Arya de Ocean Home





RESULTAT 1
Spoiler:


RESULTAT 2
Spoiler:


RESULTAT 3
Spoiler:



RESULTAT FINAL

Titre au choix

Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée Tag 000000 sur Ocean Home 610716569
J'espère que ça ne vous gêne pas  :neko17:  
Je vous fais des bisous <3
Arya-sensei  :kokoro:

Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée Tag 000000 sur Ocean Home 610716569
J'espère que ça ne vous gêne pas  :neko17:  
Je vous fais des bisous <3
Arya-sensei  :kokoro:

Aloha ~

J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée Tag 000000 sur Ocean Home 610716569
J'espère que ça ne vous gêne pas  :neko17:  
Je vous fais des bisous <3
Arya-sensei  :kokoro:
Si t'as survécu, commente  Tag 000000 sur Ocean Home 610716569



Voici un exercice à faire pour vous entraîne et voir si vous avez tout compris !
Postez vos résultats :kokoro:
Exercice 1
Aloha ~

Votre exercice est simple : reproduire cette div en entière !
Dimension : 300x200px
Couleur de fond :  #489D8B
Couleur des bordures : #17473D
Couleur de l'écriture : #85CFBE
Police d'écriture : Homemade Apple
Taille de l'écriture : 30px

Dimension de la div intérieure : 290x100px
Couleur de fond : blanc
Couleur de l'écriture : noir
Opacité : 0.4

Je vous fais des bisous <3
Arya-sensei  



Exercice 2 (libre) :
Faire une fiche de réponse "Mon océan" (ou une fiche de présentation)

Exercice 3 (libre) :
Faire une fiche RP de réponse

N'hésitez pas à y insérer des images !
Revenir en haut 
Page 1 sur 1
Sauter vers: