Para iniciarnos debemos tener claro la plantilla básica de una página en HTML. (Para profundizar más os recomiendo visitar www.comocreartuweb.com y www.w3schools.com)<html>
<head>
<title>prueba html</title> <!-- Título de la web -->
</head>
<body>
<!-- Cuerpo de la web -->
</body>
</html>
<head>
En la cabecera <head> podemos, por ejemplo, indicar el título de la página web, llamar a la hoja de estilos, poner una descripción o las keywords (palabras claves).
En la cabecera <head> podemos, por ejemplo, indicar el título de la página web, llamar a la hoja de estilos, poner una descripción o las keywords (palabras claves).
Para llamar a la hoja de estilos debemos utilizar:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />Y para poder escribir con tildes en el documento se debe poner:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />* Si trabajamos con Notepad++ dar formato a UTF-8 (Formato > Codificar en UTF-8)
Para la descripción y las keywords:
<meta name="description" content="Diseño web y gráfico" />E incluso como poner el favicon:
<meta name="keywords" content="Diseño web, Diseño Gráfico, HTML, CSS, PHP, BLOGGER, JOOMLA, " />
<link type="image/x-icon" href="favicon.ico" rel="icon" /></head>
<body>
En el cuerpo de la página web <body> es donde pondremos toda la información que queremos mostrar, noticias, imágenes, etc... Pero para que se muestre de una forma ordenada debemos organizarla por capas <div></div> y estás capas tendrán unas características (Estilos de fuente, anchos, margenes, ...) indicado en la hoja de estilo style.css
Definimos unas pocas capas: (Se debe utilizar el inglés, pero para este ejemplo no importa indicar el nombre de las capas en castellano)
En el cuerpo de la página web <body> es donde pondremos toda la información que queremos mostrar, noticias, imágenes, etc... Pero para que se muestre de una forma ordenada debemos organizarla por capas <div></div> y estás capas tendrán unas características (Estilos de fuente, anchos, margenes, ...) indicado en la hoja de estilo style.css
Definimos unas pocas capas: (Se debe utilizar el inglés, pero para este ejemplo no importa indicar el nombre de las capas en castellano)
<body></body>
<div id="global"> // Global o Wrapper
<div id="cabecera"> //Cabecera o Header
</div>
<div id="contenido"> //Contenido o Content
</div>
<div id="pie"> //Pie o Footer
</div>
</div>
</body>
La hoja de estilo style.css define las características de las capas, una hoja de ejemplo podría ser así:
body {
background: url(images/bg.gif) repeat-x; //Elegimos una imagen de fondo e indicamos que se repita horizontalmente
font: 62.5% Verdana, Arial, Helvetica, sans-serif; //Indicamos el estilo de la fuente
}
#global {
width:900px; //Ancho de la capa
margin: 0px auto; //Indicamos que no queremos márgenes y que se centre en la página.
}
#cabecera {
color: #eee; //Indicamos el color del texto de la cabecera
height: 80px; //Altura de la cabecera
}
#contenido {
}
#pie {
}
No hay comentarios:
Publicar un comentario