Code source
Fermé
Etienne
-
10 févr. 2014 à 21:34
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 10 févr. 2014 à 22:11
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 10 févr. 2014 à 22:11
A voir également:
- Forum html code
- Code asci - Guide
- Code puk bloqué - Guide
- Editeur html - Télécharger - HTML
- Code telephone oublié - Guide
- Code activation windows 10 - Guide
2 réponses
Salut, apprenez HTML pour intégrer le contenu et CSS pour faire la mise en page... pas de secret mais du travail
Et HTML est très simple, CSS assez évident. Ce dernier permet d'indiquer au balises HTML des propriétés allant du positionnement, à la taille , couleur, images de fond, formes et épaisseur des contours etc...
Je ne sait pas d'où vous tirez cette image:
http://muprof.com/wp-content/uploads/2014/02/page-web-simple.jpg
Mais s'il s'agit d'une maquette ce que vous appelez le code source est simplement d'écrire les balises HTML et le CSS.
En l'occurrence (pour la maquette graphique que vous indiquez) c'est plutôt basique et simple et vous verrez qu'avec HTML + CSS vous pourrez facilement faire beaucoup mieux que cette mise en page de 3 colonnes aux menus et couleurs plus que douteux.
ps: "j'aime bien le tout droit réservé" indiquant que vous ne pouvez utiliser le travail que vous montrez pour le copier comme vous voulez le faire. Il ne s'agirait pas d'un truc aussi simple qu'un gamin de 12 ans peut faire en révisant une semaine le HTML ça prendrait du sens mais là...
Et HTML est très simple, CSS assez évident. Ce dernier permet d'indiquer au balises HTML des propriétés allant du positionnement, à la taille , couleur, images de fond, formes et épaisseur des contours etc...
Je ne sait pas d'où vous tirez cette image:
http://muprof.com/wp-content/uploads/2014/02/page-web-simple.jpg
Mais s'il s'agit d'une maquette ce que vous appelez le code source est simplement d'écrire les balises HTML et le CSS.
En l'occurrence (pour la maquette graphique que vous indiquez) c'est plutôt basique et simple et vous verrez qu'avec HTML + CSS vous pourrez facilement faire beaucoup mieux que cette mise en page de 3 colonnes aux menus et couleurs plus que douteux.
ps: "j'aime bien le tout droit réservé" indiquant que vous ne pouvez utiliser le travail que vous montrez pour le copier comme vous voulez le faire. Il ne s'agirait pas d'un truc aussi simple qu'un gamin de 12 ans peut faire en révisant une semaine le HTML ça prendrait du sens mais là...
barale61
Messages postés
1208
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
4 novembre 2024
110
10 févr. 2014 à 22:11
10 févr. 2014 à 22:11
Avec des colonnes simples et sans le formulaire on en est pas loin:
Le menu ressemblant à:
Avec un style ressemblant à:
</code>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
display: block;
}
p {
text-align: left;
margin: 0px;
padding: 0px;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background-color: #FFF;
}
h1 {
color: #000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: normal;
line-height: 26px;
margin-bottom: 15px;
letter-spacing: -1px;
}
a, a:link {
color: #003399;
font-weight: normal;
text-decoration: underline;
}
a:visited {
color: #003399;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:focus {
color: #003399;
outline: none;
}
a:active {
color: #003399;
outline: none;
}
#header {
margin: 0px auto;
padding: 0px;
width: 920px;
text-align: left;
height: 117px;
}
#nav {
float: right;
margin-top: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 8px;
padding-left: 8px;
text-align: center;
color: #5A5B70;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 30px;
font-weight: bold;
}
#nav ul li a:hover {
text-decoration: none;
color: #2E2E36;
background-image: url(../images/topnav-hover.gif);
background-repeat: repeat-x;
background-position: center top;
}
#colgauche {
float: left;
padding: 20px 0px 10px 10px;
width: 195px;
line-height: 16px;
}
#Wrapper {
float: left;
padding: 20px 10px 10px 0px;
width: 195px;
line-height: 16px;
}
#coldroite {
float: right;
padding: 20px 0px 10px 10px;
width: 195px;
line-height: 16px;
}
</code>
Il faudrait déjà tester et mettre des bordures aux classes pour y voir plus claire...
http://www.tutoriels-extensions-dreamweaver.fr/
<!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>
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><img src="img/logo.png" alt="Logo du site"border="0"/></h1>
<?php include('menu.php')?>
</div><!-- #header -->
<h1>INDEX DU SITE
</h1>
<p>Contenu</p>
</div><!-- #wrapper -->
<div id="footer">
<p>Tous droits réservés</p>
</div><!-- #footer -->
</body>
</html>
Le menu ressemblant à:
<ul id="nav">
<li><a style="text-decoration:none" href="1.php">Accueil</a></li>
<li><a style="text-decoration:none" href="2.php">Actualités</a></li>
<li><a style="text-decoration:none" href="3.php">Culture</a></li>
<li><a style="text-decoration:none" href="4.php">Divertissement</a></li>
<li><a style="text-decoration:none" href="5.php">A propos</a></li>
<li><a style="text-decoration:none" href="6.php">Aide</a></li>
</ul>
Avec un style ressemblant à:
</code>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
display: block;
}
p {
text-align: left;
margin: 0px;
padding: 0px;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background-color: #FFF;
}
h1 {
color: #000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: normal;
line-height: 26px;
margin-bottom: 15px;
letter-spacing: -1px;
}
a, a:link {
color: #003399;
font-weight: normal;
text-decoration: underline;
}
a:visited {
color: #003399;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:focus {
color: #003399;
outline: none;
}
a:active {
color: #003399;
outline: none;
}
#header {
margin: 0px auto;
padding: 0px;
width: 920px;
text-align: left;
height: 117px;
}
#nav {
float: right;
margin-top: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 8px;
padding-left: 8px;
text-align: center;
color: #5A5B70;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 30px;
font-weight: bold;
}
#nav ul li a:hover {
text-decoration: none;
color: #2E2E36;
background-image: url(../images/topnav-hover.gif);
background-repeat: repeat-x;
background-position: center top;
}
#colgauche {
float: left;
padding: 20px 0px 10px 10px;
width: 195px;
line-height: 16px;
}
#Wrapper {
float: left;
padding: 20px 10px 10px 0px;
width: 195px;
line-height: 16px;
}
#coldroite {
float: right;
padding: 20px 0px 10px 10px;
width: 195px;
line-height: 16px;
}
</code>
Il faudrait déjà tester et mettre des bordures aux classes pour y voir plus claire...
http://www.tutoriels-extensions-dreamweaver.fr/