InicioHazlo Tu Mismote enseño html/css con gifs

te enseño html/css con gifs

Hazlo Tu Mismo8/24/2014


Este post me lo borraron por tener supuestamente "texto con mayusculas parcialmente en su título" cosa que me parece injusta no tenia tanto y me tome tiempo en hacer el post, edite el título y no podrán borrarmelo ya que cumple "con el protocolo..." hay mucho crap y no lo borran!! que vuelva la taringa de antes!!!!

Te presento lo básico de html y no morirás en el intento!!!








Lo único que utilizamos como archivo fue notepad++ es a libre elección pueden usar cualquier editor de texto (Sin ser Word)





Quiero que se utilize el menor texto (escrito) posible y se expongan los GIFS a modo de ejemplo, el que esté interesado realmente practica paso a paso cada GIF, en fin... sin mas preámbulos..

Creamos nuestro documento llamado index.html






Este código ni más ni menos indica que se está por comenzar a
escribir código html!!





Nuestro código estará siempre
dentro de las etiquetas HTML no puede ir fuera de ellas!!





Head forma parte de la estructura BÁSICA DE HTML... recuerdenlo.. ahi
podremos agregar atributos importantísimos que veremos mas adelante,
veamos como agregar el título...





Agregemos un título en nuestro head







En la etiqueta Body va tódo el contenido de nuestra página html.





Todo aquí es muy intuitivo recuerden manejar la sintaxis!! la práctica hace al maestro!!





Ejecutamos el archivo index.html y se vería algo así..





Se ve espantoso, para que se vea mejor (acepte los tíldes y otras cosas) aplicamos este código..





Luego de que agregamos eso si previsualizamos se vería asi:






Les presento a Párrafo.. mejor que se presente él






Los comentarios son una herramienta muy útil para organizar y hacer mas légible el código, nada más !!





La sintaxis de agregar imágenes siempre es la misma, <img src="TU url/link de imágen "> asi de fácil, recuerden cerrar la etiqueta!!





Agregar enlaces es fácil también <a href="Tu url/link"> "Tu texto" </a> !!!




Combinar enlaces con imágenes es múcho mejor, más visual, más atractivo, más descriptivo, es muy simple como aparece en el gif señores.





OK, hasta ahora han aprendido bastante, aquí agregamos listas ordenadas/numeradas, su sintaxis/estructura siempre es la misma !!





Esta es la lista no ordenada o no numerada como prefieran :-)





Combinar las listas ordenadas y las no ordenadas puede ser visto como un arte, la obra depende del artista !!!





Conozcamos algo de magia!!





Aplicando magia al párrafo.





JA!!! no era magia era CSS ("Cascading Style Sheet" = Modelo de hoja cascada en español) todo este tiempo, solo que nunca lo habían conocido, entonces son... "atributos que se aplican al párrafo y se pueden implementar de diferentes formas en diferentes circunstancias" !!





Depende de como marche este post, creare más post que irán más a fóndo sobre estos temas, se los estoy dando muy superficialmente para presentárselos.





Porqué aplicar el código CSS en un fichero aparte?? bueno es simple, ORGANIZACIÓN el código debe estar organizado, a medida que avanza su página web más código contendra y menos legible sera a la hora de reprogramarlo!!








Muy bíen, lo siguiente que tendrían que preguntarse es como voy a relacionar ambos documentos.. badum tss, simple!! hay una forma muy sencilla y es como aparece aquí!!






Cambiemos el estilo al encabezado!!







Les presento a ID y a CLASS son atributos que en este caso usamos para identificar a los diferentes elementos de la página web, en este caso les muestro un ejemplo con los párrafos.






Agregamos una tabla <table> luego le agregamos una fila <tr> y luego le agregamos una celda <td>





Para agregar una columna deberiamos agregar 2 filas con la misma cantidad de celdas, entienden?





Dentro de una celda podemos agregar enlaces además de texto simple.





Además de enlaces podemos agregar imágenes!!!





Nuestra tabla tiene 2 partes principales, la cabeza y el cuerpo, <thead> y <tbody> respectivamente!!






Aquí en <thead> le agregamos un título con la etiqueta <th>!! asi de facil!!!!!!!





Les presento a DIV sirve para dividir, se los presento muuuy superficialmente, es más si ven el codigo fuente de este post encontrarán varios div, un div puede ser un botón, puede ser muchas cosas, no quiero entrar mucho en detalle en este preciso post quiero que sepan que EXISTE!






Aquí les muestro algo breve con el DIV un par de propiedades lo transforman en cualquier cosa!!















Bueno amigos, espero que les haya gustado esta tanda de gifs, este es mi primer post aquí en Taringa, yo siempre entro pero nunca me anime a hacer un post jeee, salu2!!!


Datos archivados del Taringa! original
135puntos
0visitas
0comentarios
Actividad nueva en Posteamelo
0puntos
1visitas
0comentarios
Dar puntos:

Dejá tu comentario

0/2000

Autor del Post

G
Good_Tech🇦🇷
Usuario
Puntos0
Posts10
Ver perfil →
PosteameloArchivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.

CONTACTO

18 de Septiembre 455, Casilla 52

Chillán, Región de Ñuble, Chile

Solo correo postal

© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.

Contenido preservado con fines históricos y culturales.