Este documento presenta un tutorial de 7 pasos para crear una página web simple utilizando HTML y CSS. Explica cómo agregar color de fondo, tipos de letra, una barra de navegación y estilos a los enlaces. El último paso muestra cómo separar el código CSS en un archivo externo para facilitar la creación y modificación del contenido y estilo de la página.
3. 1. Escribir el código HTML
Comenzamosporañadirla sintaxisdel esqueletode nuestrapáginawebennuestroeditor,eneste
caso el Blogde notasuna vezrealizadoeste procesodeberemosguardarel archivoagregándole
siempre el ´´.Html´´para podervisualizarlodesde el navegador:
Damos clicen[Guardar como:] y seleccionamosel formatode archivoenque se deseaguardar
que puede ser[*txt.U todoslos archivos]
4. Damos doble clicsobre el documentoloque nosllevaraaunsitioenel navegador
El archivoHTML deberíaabrirse entu navegadorpredeterminado.(Si nose abre el documento,
abre el navegadory arrastra el archivosobre él).
Comopuedesver,lapáginatiene unaspectobastante aburrido...
2.- Añadir algunos colores
5. Ahora podemosnotarlasimplezade nuestra páginaestablecidaenunfondoblancoy con letras
normalesencolornegropor loque añadiremos5 líneasenformatoCss a la ventanadel editor
Las cualescolocaremos dentrode lasetiquetas <head></head>,estole daindicaciones anuestra
página la primeralíneadice que esoesuna hojade estiloyque estáescritaenCSS ("text/css").La
segundalíneaindicaque hemosañadidoestiloal elemento"body".Laterceralíneaestablece el
colordel textocomomorado y lasiguiente línealoque hace esdarle al fondouna especie de
amarilloverdoso.
Lo cual hará que nuestrapáginase vea así:
6. 3.- Añadir diferentes tipos de letra:
Otra cosa sencillade haceresestablecerdiferentestiposde letraanuestrositiosolohace falta
agregar lassiguiente líneasanuestrasintaxis
Y así se verá desde el navegador:
7. 4.- Agregar una barra de navegación a nuestro sitio
Colocaremosestavezalgoque se seráútil y le dará cierta presentaciónalapáginaya que esmuy
comúnver estoendiferentesespacios. Tenemosque moverlalistaala izquierdaycolocarel resto
del textounpoco máshacia la derecha,paradejarespaciopara el menú.Las propiedadesde CSS
que vamosa utilizarson'padding-left'(paramoverel textodel elementobody)y'position'(para
moverel menú)
Agregandolaslíneassiguientes:
8. Si guardas otra vezel archivoy lo actualizasenel navegador,deberíastenerlalistade enlacesala
izquierdadel textoprincipal.Ahorael resultadoparece muchomásinteresante¿verdad?
5.- Dar estilo a los enlaces:
El menúde navegacióntodavíaparece unalistaenlugar de un menú.Vamosa cambiarsu aspecto.
Quitaremoslospuntosque indicanlosdiferenteselementosde lalistaymoveremosloselementos
a la izquierda,donde estabananteslospuntos.Tambiénle daremosacada elementounfondo
blancoy un cuadradonegro.
No hemosespecificadoel colorde losenlaces,vamosaañadirlotambién:utilizaremosel azul para
aquellosenlacesque el usuarionohavisitadotodavía,ymoradopara losenlacesque yaha
visitado:
9. Se podrán verreflejadosloscambioscuandohayasactualizado,notarasque losenlacescambian
de color una vezloshayasvisitadoestoesposible graciasalaspropiedadesyaestablecidas
anteriormente
6.- Añadir una línea horizontal:
El últimoelementoaañadirenlahoja de estiloesunareglahorizontal parasepararel textode la
firmaque se encuentraal final.De modoque otros sitioswebpuedanusartambiéneste estilo
Utilizaremos'border-top'paraañadiruna líneapunteadaencimadel elemento<address>:
10. 7.- Poner la hoja de estilo en un archivo separado:
Ahoralo que haremosserásepararel formato HTML del de Css,esto no afectaraa lapáginasi no
que ayudara a crear nuevocontenido,loque hayque haceresenuna páginade nuestroeditor
copar todo loque este contenidoen <style>[procuranocopiar estasetiquetas]
Elige “Guardar como:” y ponle el nombre de “miestilo.css”
11. Vuelve alaventanaque muestrael códigoHTML. Borra todolo que haydesde laetiqueta <style>
hasta </style>,ambasinclusive,yreemplázaloporun elemento<link>de lasiguiente forma:
12. De estaforma,se le indicaráal navegadorque lahojade estilose encuentraenel archivollamado
"miestilo.css".Al noespecificarse ningúndirectorio,el navegadormiraráenel mismodirectorioen
el que se encuentrael archivoHTML.
Si has guardadoel archivo HTML y lohas actualizadoenel navegador,nodeberíasapreciarningún
cambioenel aspectode lapágina.Ésta sigue guardandoel mismoestilo,peroahoraviene
establecidoporel archivoexterno.
Resultadofinal.
