Estructura HTML básica para publicar en Steemit.com y/o Busy.org

in #spanish7 years ago

Estructura HTML básica para publicar en Steemit.com y/o Busy.org

@kevalec

Mejora la presentación de tus publicaciones con etiquetado .html


1. Estructura básica inicial


  1. Titulo principal >> no necesita etiquetarse, recuadro dedicado para ello en Steemit.com
  2. Campo de creación html >> uso de etiquetas como sigue:
    • < div class="text-justify"> para justificar todos los párrafos.
    • < p> para escribir y separar párrafos e imágenes < /p>
    • < p>< img src="urlimagen.png"> para insertar una imagen < /p>
    • < p>< a href="urlfuente1.com"> para enlazar la imagen o texto < /a>< /p>
    • < p>< center> para centrar lo que este entre estas etiquetas < /center>< /p>
    • < /div> cierra la etiqueta de apertura.
  3. Etiquetas >> Son un máximo de 5 palabras clave que se relacionen con la publicación, son separadas por un espacio.


2. Campo de creación: algunos detalles


  1. Para justificar el texto

    < div class="text-justify">
  2. div: Etiqueta inicial con mando para justificar todos los párrafos de la publicación. cierra al final de todo con /div

  3. Para los párrafos

    < p> Aquí se introduce texto < /p>
  4. p: Cada párrafo o línea de texto se introduce entre estas etiquetas para que sean separados adecuadamente.

  5. Para los títulos y subtítulos

    < h1> Títulos y subtítulos < /h1>
  6. h1,2,3,4,5,6: si la publicación incluye títulos y subtítulos pueden ser utilizadas estas etiquetas. Muestra:

    H Uno

    H Dos

    H Tres

    H Cuatro

    H Cinco
    H Seis
  7. Para imágenes y centrado

    < p>< center>< img src="urlimagen.png">< /center>< /p>
  8. Para incluir imágenes solo basta escribir: > img src="url" < no necesita cierre, además muestro el uso de la etiqueta para centrar, puede ser utilizado para cualquier cosa, y siempre dentro de la etiqueta p para que se cree una separación adecuada entre el texto y las imágenes.

    Ahora bien, como se recomienda citar la fuente de las imágenes o fotografías se utiliza la siguiente etiqueta:

  9. Para enlazar texto e imágenes

    < p>< img src="urlimagen.png">< a href="urlfuente1.com">Texto enlazado< /a>< /p>
  10. Se puede colocar la etiqueta > a < antes o después de la imagen. Ejemplo:

    Texto enlazado en a

    Texto enlazado en a

    Si lo que se desea además en enlazar la imagen, es decir, que al pulsar sobre ella se abra alguna página se coloca la imagen en el entre las etiquetas > a <, en el ejemplo anterior donde dice texto enlazado. Por ejemplo:

    < p>< center>< a href="urlfuente1.com">< img src="urlimagen.png">< /a>< /center>< /p>. Se vería así, permitiendo también, pulsar en la imagen a diferencia de la anterior:

    Nota: la etiqueta > a < puede ser incluida en cualquier parte del texto que se desee enlazar. Por ejemplo:

    < p> líneas del párrafo < a href="urlfuente1.com"> palabra o frase del párrafo enlazada < /a> siguen las líneas del párrafo...< /p>

  11. Para poner la línea divisoria

    < hr>
  12. Basta poner la etiqueta hr donde desea que aparezca la línea divisoria como la ven en la presente publicación.

  13. Para hacerlo mejor

    bueno pues, si desea mejorar la presentación de sus publicaciones, se puede aventurar al aprendizaje de otras etiquetas y códigos html. El lenguaje de marcado Markdown puede parecer más sencillo y practico en un principio, pero para lograr mejores presentaciones creo necesario manejar hmtl. No se limiten, hay mucho por descubrir, como se puede apreciar, una vida no basta, por eso hay tantas.

  14. 3. Uso de etiquetas


    Como ha de saber la mayoría la página permite un máximo de 5 etiquetas separadas por un espacio, las cuales deben estar relacionadas con el tema tratado en la publicación, organizadas en orden consecutivo de acuerdo a su relevancia, en esta ocasión he utilizado las siguientes:

    #Spanish #Steemit #busy #cervantes #html

    No nos lamentemos ni nos preocupemos, vamos a ocuparnos.

    Feliz día.

    Atentamente, Kevin Chavez Castillo.

Sort:  

Super útil, me hacía falta jajaja te encontré en mosqueteros en discord, saludos!

Hola Yveana, me da gusto, esperaba que asi fuera. Saludos :D

Información siempre valiosa, la hubieses puesto en el HT de introduceyourself para que los nuevos lo pudieran ver.
Saludos

Hola Oriana, en el sentido que lo dices serviría, pero el tema en si no es referente a ello. Gracias 🙂