Más contenido relacionado
La actualidad más candente
Similar a Tutorial de css y Html
Similar a Tutorial de css y Html (20)
Último
Último (20)
Tutorial de css y Html
- 1. Nombre: Sarahi Beatriz Hernández Martínez Grado: 4to grupo; Dm Materia: Desarrolla Aplicaciones Web Trabajo: Tutorial de CSS Comenzando con HTML + CSS Maestro: Everardo Juárez Predaza Especialidad: Programación Escuela: CETis 109 Aula: 14
- 2. TUTORIAL DE CSS COMENZANDO CON HTML + CSS
- 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.