tutorial de css y html
TRANSCRIPT
Nombre: Sarahi Beatriz Hernández MartínezGrado: 4to grupo; DmMateria: Desarrolla Aplicaciones WebTrabajo: Tutorial de CSSComenzando con HTML + CSSMaestro: Everardo Juárez PredazaEspecialidad: ProgramaciónEscuela: CETis 109Aula: 14
TUTORIAL DE CSSCOMENZANDO CON HTML + CSS
1. Escribir el código HTML
Comenzamos por añadir la sintaxis del esqueleto de nuestra página web en nuestro editor, en este caso el Blog de notas una vez realizado este proceso deberemos guardar el archivo agregándole siempre el ´´.Html´´ para poder visualizarlo desde el navegador:
Damos clic en [Guardar como:] y seleccionamos el formato de archivo en que se desea guardar que puede ser [*txt. U todos los archivos]
Damos doble clic sobre el documento lo que nos llevara a un sitio en el navegador
El archivo HTML debería abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre él).
Como puedes ver, la página tiene un aspecto bastante aburrido...
2.- Añadir algunos colores
Ahora podemos notar la simpleza de nuestra página establecida en un fondo blanco y con letras normales en color negro por lo que añadiremos 5 líneas en formato Css a la ventana del editor
Las cuales colocaremos dentro de las etiquetas <head> </head>, esto le da indicaciones a nuestra página la primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.
Lo cual hará que nuestra página se vea así:
3.- Añadir diferentes tipos de letra:
Otra cosa sencilla de hacer es establecer diferentes tipos de letra a nuestro sitio solo hace falta agregar las siguiente líneas a nuestra sintaxis
Y así se verá desde el navegador:
4.- Agregar una barra de navegación a nuestro sitio
Colocaremos esta vez algo que se será útil y le dará cierta presentación a la página ya que es muy común ver esto en diferentes espacios. Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú)
Agregando las líneas siguientes:
Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de enlaces a la izquierda del texto principal. Ahora el resultado parece mucho más interesante ¿verdad?
5.- Dar estilo a los enlaces:
El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un cuadrado negro.
No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el azul para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha visitado:
Se podrán ver reflejados los cambios cuando hayas actualizado, notaras que los enlaces cambian de color una vez los hayas visitado esto es posible gracias a las propiedades ya establecidas anteriormente
6.- Añadir una línea horizontal:
El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. De modo que otros sitios web puedan usar también este estilo
Utilizaremos 'border-top' para añadir una línea punteada encima del elemento <address>:
7.- Poner la hoja de estilo en un archivo separado:
Ahora lo que haremos será separar el formato HTML del de Css, esto no afectara a la página si no que ayudara a crear nuevo contenido, lo que hay que hacer es en una página de nuestro editor copar todo lo que este contenido en <style> [procura no copiar estas etiquetas]
Elige “Guardar como:” y ponle el nombre de “miestilo.css”
Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:
De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.
Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.
Resultado final.