Descargar para leer sin conexión
![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]](https://image.slidesharecdn.com/tutorialdecss-160529162639/75/Tutorial-de-css-y-Html-3-2048.jpg)
![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”](https://image.slidesharecdn.com/tutorialdecss-160529162639/75/Tutorial-de-css-y-Html-10-2048.jpg)
Tutorial de css y Html
- 1. Nombre: Sarahi BeatrizHerná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 COMENZANDOCON HTML + CSS
- 3. 1. Escribir elcó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 clicsobreel 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 nuestrapá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 diferentestipos de letra: Otra cosa sencillade haceresestablecerdiferentestiposde letraanuestrositiosolohace falta agregar lassiguiente líneasanuestrasintaxis Y así se verá desde el navegador:
- 7. 4.- Agregar unabarra 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 otravezel 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,notarasquelosenlacescambian 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 lahoja 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 muestraelcódigoHTML. Borra todolo que haydesde laetiqueta <style> hasta </style>,ambasinclusive,yreemplázaloporun elemento<link>de lasiguiente forma:
- 12. De estaforma,se leindicará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.