Como pueden observar he puesto 2 etiquetas nuevas en el head del documento html, meta y link, con meta en este caso le decimos al navegador el formato que queremos en cuanto a tipo de escritura, para que no aparezcan simbolos raros con acentos y demas; con link ponemos el enlace a la hoja CSS que dara formato a nuesta pagina.<!DOCTYPE html><html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>
<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
Por lo que para continuar, creamos en notepad ++ un archivo llamado hojadeestilo.css, que reproduzco bajo estas lineas:
*{En el codigo CSS ponemos la etiqueta seguida de corchetes y dentro de estos los atributos a modificar, en el codigo introduzco margenes, anchos, altos, alineaciones, tamaño de fuentes, colores de fondo y texto, etc.
margin:0 auto;
font-family:Arial;
background-color:yellow;
padding:5px;
}
body {
text-align:center;
}
nav ul li {
display:inline-block;
margin-right:20px;
color:red;
cursor:pointer;
padding:5px;
text-decoration:none;
}
nav ul li a:hover{
color:green;
border-radius:5px;
}
section {
width:79%;
background-color:black;
margin-bottom:10px;
text-align:left;
border-radius:20px;
padding:2px;
box-shadow:0px 0px 20px rgba(0,0,0,0.5);
float:left;
}
aside{
width:19%;
border-radius:10px;
margin-left:3px;
float:right;
}
footer{
clear:both;
width:100%;
height:120px;
margin-top:15px;
border-radius:20px;
padding:10px;
}
h1{
font-size:3em;
color:green;
font-family:'Russo One';
}
h2{
font-size:2m;
color:blue;
font-family:'Russo One';
}
p{
color:black;
}
La etiqueta "*" es un selector comodin o universal que pone todos los valores de la web como le indiquemos, para despues ir cambiando en cada etiqueta detalladamente.
No hay comentarios:
Publicar un comentario