En esta pagina vas a
aprender a crear una Web, podrás escoger un servidor de pago o gratuito, en Internet hay muchos sitios gratis
además de subirlo a Internet, después podrás cambiar los colores y la
forma .El diseño de nuestra webs estará
basado en el código HTML y CSS.
También aprenderemos a
utilizar otros programas indispensables en el diseño de paginas Web como son
Adobe PhotoShop y Macromedia Flash .
Código HTML
Este código, hace
referencia al lenguaje marcado predominantemente para la elaboración de paginas Web que se
utilizan para describir y traducir la
estructura y la
Información en forma de
texto, así como para complementar al texto con objetos tales como imágenes. El HTML
se escribe en forma de etiquetas
rodeadas por corchetes angulares(<,>).HTML también puede incluir un
script(por ejemplo JavaScript), el cual puede afectar el comportamiento de
navegadores Web y otros procesadores de HTML.
Código HTML en una pagina Web.
Toda pagina Web comienza y termina con un código es este.
<html>
(todas empiezan con esto) </html> (todas terminan con esto otro)
La primera palabra <html> indica
que ahí empieza el código de la Web. La segunda </html> indica
que el código de la página Web a terminado. Se distinguen por la contrabarra / que
siempre indica que algo ha terminado.
Estructura del código
en la pagina Web.
<html>
<head>
</head>
<body>
</body>
</html>
<head>
</head>
<body>
</body>
</html>
Como
puedes ver todo comienza con <html>
y termina con </html> y e su extructura interior tenemos <head> </head> en medio de el cual
va todas aquellas cosas que no son visibles en nuestra Web como un
contador de visitas no visible y en <body> </body>
que es el cuerpo va todo lo que es visible
en al Web como nuestro texto , imágenes ,videos etc…
Volveremos a el codigo
HTML ,ahora vamos a conocer los Estilos
css
El codigo HTML es util
para insertar textos he imágenes o lo que queramos , pero los estilos Css nos permitirán
mantener el orden dentro de nuestra pagina , nos indicaran que tamaño deben
tener nuestro div o celdas , que color
etc..
además los estilos css tienen otras propiedades
como:
·
-
Ayudan a tener los códigos Html más limpios y por tanto nos será más sencillo
encontrar fallos o hacer modificaciones, pues veremos claramente dónde estamos.
·
- Las
páginas pesarán menos (ocuparán menos Kbytes) por lo que la carga general de la
Web será algo más rápida.
·
-
Permiten que las páginas se vean más o menos igual en cualquier Navegador.
·
-
Podemos introducir algunos efectos determinados fácilmente sin tener que
recurrir a códigos demasiado raros para los que empezamos en esto.
·
-
Estaremos a la "última" en diseño de Webs.
·
-
Podemos hacer modificaciones en el aspecto de toda la Web con solo unos ligeros
cambios de un solo documento.
·
- El
código resultante de la Web, lo que leen los robots de los buscadores, resulta
muy ligero y sencillito de leer por ellos, por lo que le ponemos más fácil el
trabajo y en definitiva aumenta las posibilidades de aparecer en mejores
puestos en Google y otros buscadores.
Lección 1
Relacionar la Hoja de Estilos CSS con la página Web
Como los estilos no son un
elemento que aparecerá en la página sino algo que indica cómo se han de mostrar
los elementos (color, tamaño, etc), parece fácil adivinar que los estilos (o la
llamada a la hoja de estilo) hay que indicarlos dentro de la cabecera o Head de
la página no? Pues vamos allá. La línea de código Html que tenemos que incluir
en la cabecera, es decir, entre <head> y </head> es esta:
<link rel="stylesheet"
href="estilos.css" type="text/css" media="all">
Estructura de una capa Divs
Dar forma a una
web es estructurarla ,darle forma para
luego poner en ella el menú, el
contenido etc. Para estructurar una web
podemos utilizar tablas que dividen el
espacio en celdas también podemos utilizar frames o marcos.
Pero el método mas profesional, limpio y cómodo es sin duda el
uso de capas o Divs
Los Divs no mas más que un
elemento rectangular dentro del cual podemos incluir lo que queramos, palabras,
párrafos, enlaces, imágenes, varias de estas cosas a la vez o incluso otras
capas o también tablas. Es un simple hueco. Lo bueno que tiene es que luego,
desde la Hoja de Estilos, podemos darle a todo su contenido propiedades como
color de fondo, tamaño de letra, dimensiones de ese recuadro, margenes, bordes,
etc, etc.
<div>Hola </div>
Escribe esa línea de
código en el archivo plantilla.html, a
modo de prueba por supuesto, entre <body> y </body> es algo que debe ser visible
Ahora que sabemos que es
un Divs comenzaremos con los Divs.
Un ancho fijo.
Nuestra Web puede ocupar
toda la pantalla o el 70% de esta o la
que quieras. Pero podemos darle un tamaño concreto para que aquellos que la
vean en una pantalla pequeña o grande no
tengan problemas .
Entones nuestro propósito
es centrarlo todo lo que haremos será encerrar toda la parte visible de la Web
en un div al que le definiremos en la Hoja de Estilo la propiedad de centrado,
pero de un modo algo especial para que funcione en todos los navegadores.
Llamaremos a esa capa.... "global". Como va a ser única, es decir,
solo va a haber un elemento "global" por página, en lugar de
definirlo con un punto delante y el class="global" en el
Html, lo haremos con la almohadilla y con id="global".
Ahora, en la hoja de
estilo definimos #global con las siguientes propiedades:
#global {width:800px;
margin:4px auto;}
Este código pégalo en la
hoja de estilos y lo guardas
Esto significa que la capa
global tendrá un ancho de 800 pixeles y aparece una propiedad que no hemos
visto antes, (margin: 4px auto) que define el margen a dejar entre el elemento
(en este caso el div global) y el resto de cosas a su alrededor. El 4px es
la cantidad de margen que vamos a dejar por encima y por debajo de la web,
mientras que auto es la cantidad de margen que dejaremos por cada
lado. Auto significa automático, por lo que se dejará todo lo que exceda de800px y
automáticamente, es decir, la mitad a la derecha y la otra mitad a la izquierda
y por tanto, centrado
Esto no funciona en todos
los navegadores a menos que definamos una caracteristica a Body en la Hoja de
Estilo estilo-general.css por lo tanto hay que agregar el siguiente codigo
en la hoja de estilos.(el orden en la hoja de estilos no inporta).
body {text-align:center;}
Body no es un nombre de un
estilo inventado por nosotros, como cabecera, pie, tal y cual, sino
que es una etiqueta de Html, y a las etiquetas de Html (como body, p, a, table,
div, etc..) no se les pone ni el punto delante ni la almohadilla (#).
No hay comentarios:
Publicar un comentario