Integrer une css dans un code html

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention -
ARMAND3 Messages postés 115 Date d'inscription Statut Membre Dernière intervention - 12 déc. 2015 à 16:41

Bonjour,
Depuis le Faso Natal, je m'aventure dans les langages de progammation (HTML, CSS, PHP) que j'aime découvrir et apprendre. J'ai appris gentillement HTML avec le site du zéro et bien d'autres tutoriels. Je comprends un peu. J'ai abordé CSS...J'ai telechargé notepad++ et j'ai pu codé et affiché ma première page web. Génial WAOUUH!!

Seulement avec des photos je ne peux pas les afficher, en lieu et place y a un petit carré avec ce (x) au milieu avec du texte tapé en ALT. J'ai besoin de vos aides:

-1 Où tirer l'adresse URL d'une photo (SRC où???) afin de l'importer sur mon éditeur notepad++ ??
-2 Est t il possible de le faire sans publier le site et comment publier un site fait avec notepad++???? par ftp? comment possible pour parametrer sur notepad???
Je signale que les photos sont sur mon pc ( exemple:D:\mes photos fin 2008\école..)
-3 comment faire des liens relatifs entre les pages sur notepad++??BESOIN DE VOS AIDES AH OUI ...

En plus selon bcp de tutoriels on utilise css pour mieux pésenter les contenus HTML...Voilà ce que j'ai codé sur ma page css entre les balises <head> et </head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1-0 strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> mon exploit css </title>
<link rel="stylesheet" style="text/css" href="styles_div.css" medias="all/>
div{text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#piedpage {
width:600px;
height:50px;
background-color:#33FF99;
}
</head>
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div>
</body>
</html>

Malgré tout tout ce blablabla je croyais avoir des bandeaux mais sur cette page je vois seulement ça:
Ceci est le bandeau
Ceci est le contenu
Ceci est le pied de page

Pouvez vous m'aider à trouver des solution à mes problèmes ou connaissez-vous des logiciels qui pouraient m'être utiles ???

Comment dois je procéder SVP!

Merci pour vos aides nombreuses et rapides

Bonne soirée!

Afficher la suite

A voir également:

Appeler fichier css dans html
Fichier bin - Guide
Fichier epub - Guide
Fichier rar - Guide
Comment réduire la taille d'un fichier - Guide
Fichier .dat - Guide

9 réponses

Réponse 1 / 9

Utilisateur anonyme

Il faut créé un fichier .css et tu mets dedans tous ce qui est css
Pour ftp, utilise Filezilla

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1

Hello pyl159,
Merci pour ta réponse si rapide mais je m'excuse peux tu m'approfondir ta réponse STP?
Pour créer ce fichier.css dont tu parles est ce qu'on doit taper des codes HTML sur Notepad++ et après on choisit css dans le menu langage?? Si oui j'ai procédé comme cela main en vain.. Pourrais tu me mettre une capture d'écran?? cela m'aiderait bien plus....

Est ce que tu peux aussi me guider sur le codage des photos via mon pc vers notepad++??

Merci de ton aide si précieuse

Bonne soirée!

Réponse 2 / 9

moroccovich Messages postés 97 Date d'inscription Statut Membre Dernière intervention 16

First:
choisi le chemin de fichier "CSS" :

<head>

<link rel="stylesheet" type="text/css" href="chemin"/>

</head>

puis : tu va mettre ton code css au sein de fichier "CSS"

Réponse 3 / 9

lewis34 Messages postés 2557 Date d'inscription Statut Membre Dernière intervention 352

le fichier css est un fichier comme les autres, sauf que tu n'a pas besoin de rajouter des balises html, head et body

tu met seulement ceci (par exemple)

div{text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#piedpage {
width:600px;
height:50px;
background-color:#33FF99;
}

et ensuite dans tes pages html pour l'appeler tu met cette ligne

<link rel="stylesheet" style="text/css" href="le_chemin_vers_ton_fichier_styles_div.css" medias="all/>

le code css n'est pas a proprement parler un langage, tu le tape comme tu taperais du html avec notepad
quelques precisions :
les elements commençant par # correspondent à des ID, ils doivent etre unique dans ta page

les elements commençant par . correspondent à des class, il peut y en avoir plusieurs

en ce qui concerne tes images verifie que le chemin que tu utilse est le bon,parfois il manque un ../ ou alors y'en a un en trop

en esperant t'avoir eclairé un peu

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1

Bonjour lewis34,

Merci pour ton eclaircissement, pour le moment je n'ai pas pu appliquer ce que tu m'as montré car j'étais en cours pour mon bachelor...Je crois que ce soir je vais le faire et je te tiendrai au courant de la suite.
Bonne journée!!!!!!!!

Réponse 4 / 9

moroccovich Messages postés 97 Date d'inscription Statut Membre Dernière intervention 16

pour plus d'informations sur le Cascading Style Sheets.
===> www.cssdebutant.com

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1

salut je tatonne toujours entre code html et css pour organiser le contenu de ma première page web. Klk1 m'a conseillé le cssdbutant que j'ai lu attententivement, on dit que des codes html comme les <html> <head> <body> sont importants. J'ai essayé mais en vain car je voudrais d'abord découper ma page en bloc ensuite ce code: <link rel="stylesheet" style="text/css href="style/sytle.css"/> après ce code commencer à écrire des codes css???

Est ce que qu'un aurait la volonté de débuter le codage pour avoir 4 bloc (entete, corps, menu, pied de page) pour moi SVP??

Merci bcp!
Je compte sur vous...

Réponse 6 / 9

lewis34 Messages postés 2557 Date d'inscription Statut Membre Dernière intervention 352

rien ne vaut la pratique, c'est en forgeant qu'on deviens forgeron

regarde ici
http://www.alsacreations.com/static/gabarits/liste.html

choisi toi un gabarit et retape les codes, ne fait pas un simple copier collé

pour t'aider

ta page doit etre struturée comme ça

<!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" lang="fr">
<!-- le doctype tres tres important-->
<head>
<!-- a partir de la entre <head> et </head> tu met  des fonctions javascript,  les liens vers ton ou tes feuilles de style et les balises meta-->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		LE TITRE DE TA PAGE
	</title>
	<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="meta/styles.css" media="screen" />
</head>

<body >

<!--le contenu de ta page proprement dit ou tu met tes div,tableaux, texte et images-->
</body>
</html>

Réponse 7 / 9

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1

Quels scripts JAVA faut il integrer entre les feuilles de styles pour faire des blocs svp!
Quelqu'un aurait la volonté de les me écrire?? Je n'y connais rien...

Merci de votre réponse si precieuse! Bon app

notobe

Des scripts java ???? Il doit y avoir une petite confusion de ta part là. Java n'a absolument rien à voir là dedans :-D

La définition de blocs se fait en css, et t'a déjà donné plein de liens pour aller apprendre ce langage et comment l'intégrer à ta page html.
Alsacréations cité plus haut est très bon pour ça (si ce n'est le meilleur).

Sinon, tu as aussi CSS débutant dont ce tutoriel explique comment faire des blocs http://css.mammouthland.net/mise-en-page-sans-tableau.php#aveccss et comment on enregistre les styles pour des pages html http://css.mammouthland.net/feuille-de-style-css-debutant.php#record

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1 > notobe

Bonsoir merci pr ta note, j'ai vraiment de sérieux problème de compréhension.
Ecoute STP tu peux verifier mes codes??? Je l'ai ecrit dans notepad++ et enregistré d'abord sous le langage html. Voilà ce que le navigateur me présente:
body {
background-color:white;
margin:0px 0px 0px 0px;
} h1 {
font-family:verdana, sans-serif;
font-size:100%; color:black;
background-color:transparent;
text-align:left;
} h2 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
} h3 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:100%; color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
li {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
table {
border-color:white;
border-style:solid;
border-width:1px;
}
td {
font-family:verdana, sans-serif;
font-size:100%;
color:black; text-align:left;
background-color:transparent;
border-color:white;
border-style:solid;
border-width:1px;
}

Alors si je l'enregistre sous le langage css, je tente voir sur le navigateur ça me présente un nsimple bloc-note avec du codage toujours comme cela:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=charset=UTF-8"/>
<title>ccs test</title>
<link rel="stylesheet" type="text/css" href="styles/base.css" media="all"/>
<link rel="stylesheet" type="text/css" href="meta/styles.css" media="screen"/>
body {
background-color:white;
margin:0px 0px 0px 0px;
} h1 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
} h2 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
} h3 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
li {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
table {
border-color:white;
border-style:solid;
border-width:1px;
}
td {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
text-align:left;
background-color:transparent;
border-color:white;
border-style:solid;
border-width:1px;
}
</head>
</body>
</html>
...Je ne sais plus comment procéder...bien que j'ai parcouru attentivement le cssdébutant...Je suis au bord de l'abandon toutes les 2 présentations sont identiques
Si tu peux m'aiguiser encore plus...
Merci d'avance!! Bonne nuit!

notobe > mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention

C'est pas banal ça... c'est pourtant bien expliqué, mais tu n'appliques pas ce qui est indiqué...
C'est sûr que de la façon dont t'y prends, ça ne peut pas fonctionner.

Alors, on va y aller pour une feuille de style interne pour l'instant, on verra l'externalisation plus tard (car là, tu mélanges les 2, mais pas de façon correcte.)

Tes styles internes doivent être dans les balises style :

<style type="text/css">
[...]
</style>

Et ça, c'est à placer dans les balises <head></head>

Petite remarque : pas la peine de répéter à chaque fois la font de caractère utilisée puisque c'est tjs la même. Tu la déclares dans le body, et par héritage, tous les autres éléments vont en bénéficier. Par contre, si tu déclares tout en noir (color:black), ça va être un peu tristounet, et tu ne vas pas voir l'intérêt de déclarer des styles...

Et dans le code html, et bien tu mets du code html ! S'il n'y a rien, aucun des styles ne peuvent être appliqués !

Donc, on résume, tu colles tout ce code dans une nouvelle page (j'ai modifié quelques couleurs, tu changeras après à ta convenance :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=charset=UTF-8" />
<title>CSS test</title>
<style type="text/css">
body {
background-color:white;
margin:0px 0px 0px 0px;
font-family:verdana, sans-serif;
font-size:100%;
color:black;
}
 h1 {
background-color:transparent;
text-align:left;
color:red;
} 
h2 {
color:black;
background-color:transparent;
text-align:left;
color:blue;
} 
h3 {
background-color:transparent;
text-align:left;
color:green;
}
p
{
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
li 
{
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
background-color:transparent;
text-decoration:underline;
}
a:visited {
background-color:transparent;
text-decoration:underline;
}
a:hover {
background-color:transparent;
text-decoration:underline;
}
table {
border-color:white;
border-style:solid;
border-width:1px;
}
td {
text-align:left;
background-color:transparent;
border-color:white;
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>

<h1>Ma page de test</h1>
<h2>Sous titre</h2>
<p>Ceci est un paragraphe</p>
<ul> 
 <li>item 1</li>
 <li>item 2</li>
</ul>
<h3>Sous-sous titre</h3>
<p>youpi ça marche !</p>

</body>
</html>

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1 > notobe

Bonsoir,
Merci pour ton aide qui m'a bcp eclairé, j'ai mis du texte et j'ai changé quelques valeurs donc j'ai pu constaté vraiment le changement.
Par contre je ne m'ensors toujours pas avec les bordures que j'ai envi de faire avec css. J'ose encore solliciter tes bons services STP?
Merci d'avance

notobe > mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention

Bonsoir,

Pour faire des bordures, le principe est le suivant :

1. Tu encadres l'ensemble de ton bloc à encadrer par un div (dans le code html) dont on peut attribuer une classe. Exemple :

<div class="encadre">
<h2>Sous titre</h2>
<p>Le sous titre te ce paragraphe sont à encadrer d'une bordure de couleur rouge, sous forme d'un trait solide fin de 1 pixel</p>
</div>

2. Tu rajoutes dans la CSS :

div.encadre {
border : 1px solid red;
}

le "div.encadre" de la CSS fait appel au <div class="encadre"> du code html.

Réponse 8 / 9

ARMAND3 Messages postés 115 Date d'inscription Statut Membre Dernière intervention 4

pour creer un fichier css, tu va au menu fichier de notpad++ tu creer un nouveau fichier avec l'extension fichier.css que tu enregistre dans le meme dossier que ton fichier html pour un depart, ensuite tu specifie le chemin comme explique plus haut sur ton fichier html

Réponse 9 / 9

mitbkieta Messages postés 55 Date d'inscription Statut Membre Dernière intervention 1

Ce fichier .css m'embrouille trop. où le trouver même dans tous ces codes excuse moi de cette question mais je suis vraiment perdu.
Tu peux m'aiguiser plus que cela??

Merci d'avance

Votre réponse