- Un Editor de texto plano (Sublime Text, Notepad++, etc).
- Un Navegador que soporte etiquetas html5 (Chrome, Opera, Firefox, Safari, etc).
EMPEZAR
1.- Creamos una carpeta con el nombre "MiPrimeraEstructuraWeb".
2.- Dentro de la carpeta "MiPrimeraEstructuraWeb" creamos los siguientes archivos:
MiPrimeraPaginaWeb/ ├── css/ │ └── style.css │ ├── img/ │ ├── imagen1.png │ └── imagen2.jpg │ ├── index.html ├── servicios.html └── contactenos.html
3.- Abrir el archivo "index.html" y escribir el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8">
<title>Mi Primera Estructura Web</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- cabecera -->
<header>
<group>
<h1>Stark Code</h1>
<h5>Codigo Robusto</h5>
</group>
<nav>
<ul>
<li>
<a href="index.html">
Inicio
</a>
</li>
<li>
<a href="servicios.html">
Servicios
</a>
</li>
<li>
<a href="contactenos.html">
Contactenos
</a>
</li>
</ul>
</nav>
</header>
<!-- fin cabecera -->
<!-- cuerpo -->
<section>
<article>
<h2>CONTACTENOS</h2>
Aqui va articulos
</article>
<figure>
</figure>
<aside>
</aside>
</section>
<!-- fin cuerpo -->
<!-- pie -->
<footer>
<a href="http://starkcode.blogspot.com">
Stark Code
</a>
©2013.Todo Los Derechos Reservados
</footer>
<!-- fin pie -->
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8">
<title>Mi Primera Estructura Web</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- cabecera -->
<header>
<group>
<h1>Stark Code</h1>
<h5>Codigo Robusto</h5>
</group>
<nav>
<ul>
<li>
<a href="index.html">
Inicio
</a>
</li>
<li>
<a href="servicios.html">
Servicios
</a>
</li>
<li>
<a href="contactenos.html">
Contactenos
</a>
</li>
</ul>
</nav>
</header>
<!-- fin cabecera -->
<!-- cuerpo -->
<section>
<article>
<h2>SERVICIOS</h2>
Aqui va articulos
</article>
<figure>
</figure>
<aside>
</aside>
</section>
<!-- fin cuerpo -->
<!-- pie -->
<footer>
<a href="http://starkcode.blogspot.com">
Stark Code
</a>
©2013.Todo Los Derechos Reservados
</footer>
<!-- fin pie -->
</body>
</html>
5.- Abrir el archivo "contactenos.html" y escribir el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8">
<title>Mi Primera Estructura Web</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- cabecera -->
<header>
<group>
<h1>Stark Code</h1>
<h5>Codigo Robusto</h5>
</group>
<nav>
<ul>
<li>
<a href="index.html">
Inicio
</a>
</li>
<li>
<a href="servicios.html">
Servicios
</a>
</li>
<li>
<a href="contactenos.html">
CONTACTENOS
</a>
</li>
</ul>
</nav>
</header>
<!-- fin cabecera -->
<!-- cuerpo -->
<section>
<article>
<h2>CONTACTENOS</h2>
Aqui va articulos
</article>
<figure>
</figure>
<aside>
</aside>
</section>
<!-- fin cuerpo -->
<!-- pie -->
<footer>
<a href="http://starkcode.blogspot.com">
Stark Code
</a>
©2013.Todo Los Derechos Reservados
</footer>
<!-- fin pie -->
</body>
</html>
6.- Abrir el archivo "style.css" y escribir el siguiente código.
/* # cabecera
============================================*/
body {
font-family: arial;
font-size: 14px;
background-color: #ccc;
}
body,ul,li {
margin: 0px;
padding: 0px;
}
header {
width: 900px;
margin: auto;
background-color: green;
overflow: hidden;
}
header > nav > ul > li {
float: left;
list-style: none;
padding:10px;
}
header > nav > ul > li:hover {
background-color: yellow;
}
header > nav > ul > li > a {
text-decoration: none;
}
/* # cuerpo
============================================*/
section {
width: 900px;
margin: auto;
background-color: yellow;
overflow: hidden;
}
section > article {
float: left;
width: 330px;
background-color: blue;
margin: 10px;
padding: 10px;
height: 300px;
}
section > figure {
float: left;
background-image: url(../img/imagen1.png);
height: 450px;
width: 450px;
}
section > aside {
float: left;
background-image: url(../img/imagen2.jpg);
background-size: 100%;
height: 40px;
width: 40px;
}
/* # pie
============================================*/
footer {
width: 890px;
margin: auto;
background-color: red;
overflow: hidden;
padding: 5px;
}
7.- Abrir el archivo "index.html" en un navegador.
8.- Descargar el Archivo de ejemplo (MiPrimeraEstructuraWeb.rar) para probarlo.
9.- Listo!!.
1 comentarios:
Casino & Hotel, Las Vegas, Nevada, United States
Casino & Hotel, 용인 출장안마 Las Vegas. Las 창원 출장마사지 Vegas, Nevada, United 울산광역 출장샵 States. MapQuest is a free services company. 양주 출장안마 The Hotel is located just east of the US 화성 출장샵 on the Las Vegas Strip,
Publicar un comentario