A voir également:
- Forum html code
- Code ascii - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Editeur html - Télécharger - HTML
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à...
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/