Curso de HTML (aplicado a Steemit)

Curso de HTML (aplicado a Steemit) - Tutoriales

*Les doy la bienvenida ... Acompáñenme en esta increíble nueva historia ... Soy Gerardo Méndez y estoy a punto de llevarlos, a un lugar donde absolutamente todo ... Todo ... Es posible ...*

Curso Básico de HTML (aplicado a Steemit)

En este curso aprenderás como insertar código HTML a tus publicaciones. Para la justificación de tus textos, imágenes y videos, así como también, a aumentar y reducir el tamaño de mismos. Esto te ayudará a tener publicaciones con un estilo profesional, y aumentarás el número de visitas a tu Blog por consecuencia. Además reducirás el tiempo de edición de tus publicaciones.

Lista de códigos HTML permitidos en Steemit:

Alinear a la izquierda

Acción	Código
Colocar texto, imagen o video a la izquierda	`<div class="pull-left">Texto, imagen o video</div>`
Colocar texto, imagen o video a la izquierda	`<div class="text-left">Texto deseado</div>`

Ejemplo:

Alineado a la izquierda

Alinear a la derecha

Acción	Código
Colocar texto, imagen o video a la derecha	`<div class="pull-right">Texto, imagen o video</div>`
Colocar texto, imagen o video a la derecha	`<div class="text-right">Texto deseado</div>`

Ejemplo:

Alineado a la derecha

Alinear al centro:

Acción	Código
Colocar texto, imagen o video en el centro	`<center>Texto, imagen o video</center>`
Colocar texto, imagen o video en el centro	`<div class="text-center">Texto deseado</div>`

Ejemplo:

Alineado en el Centro

Justificar texto:

Acción	Código
Justificar texto	`<div class="text-justify">Texto deseado</div>`

Ejemplo

Si tuviera las vestiduras bordadas del cielo, entretejidas de luz dorada y color plata,las azules, las opacas, las oscuras vestiduras de la noche y la luz y la penumbra, tendería a tus pies las vestiduras ... Pero, yo siendo pobre ... Sólo tengo mis sueños; He esparcido mis sueños bajo tus pies, camina suave, porque pisas mis sueños.

William B. Yeats

Texto en Negritas

Acción	Código	Ejemplo
Texto en Negritas	`<strong>Texto deseado</strong>`	Texto deseado

Texto tachado

Acción	Código	Ejemplo
Texto tachado	`<strike>Texto tachado html</strike>`	~~Texto tachado html~~

Cambiar el texto a color
Rojo

Acción	Código	Ejemplo
Cambiar a color rojo el texto	`<div class="phishy">Texto deseado</div>`	Texto deseado

Texto que se escribe de derecha a izquierda

Acción	Código
Texto que se escribe de derecha a izquierda	`<div class="text-rtl">Texto deseado</div>`

Ejemplo

Texto que se escribe de derecha a izquierda

Tamaño de los títulos

Acción	Código	Ejemplo
Tamaño de títulos	`<h6>Texto deseado</h6>`	Texto deseado
Tamaño de títulos	`<h5>Texto deseado</h5>`	Texto deseado
Tamaño de títulos	`<h4>Texto deseado</h4>`	Texto deseado
Tamaño de títulos	`<h3>Texto deseado</h3>`	Texto deseado
Tamaño de títulos	`<h2>Texto deseado</h2>`	Texto deseado
Tamaño de títulos	`<h1>Texto deseado</h1>`	Texto deseado

Reducir Texto y alinear en la parte superior

Acción	Código
Reducir Texto y alinear en la parte superior	`<sup>Texto deseado</sup>`

Ejemplo

^{Reducir y alínear en parte superior.} La diferencia es notable.

Reducir Texto y alinear en la parte inferior

Acción	Código
Reducir Texto y alinear en la parte inferior	`<sub>Texto deseado</sub>`

Ejemplo

_{Reducir y alínear en parte inferior.} La diferencia es notable.

Crear hipervínculo, link o enlace, escondiendo la dirección HTTP

Acción	Código
Crear hipervínculo o link escondiendo la dirección http	`<a href="link entre comillas"><strong>Texto deseado</strong><a/>`

Ejemplo

Perfil de AbyssalSaint

Crear hipervínculo, link o enlace usando "Tittle"

Acción	Código
Crear hipervínculo, link o enlace, escondiendo la dirección HTTP, usando el atributo "Tittle	`<a href="link entre comillas" title="Title">Texto deseado</a>`

Ejemplo

Perfil de AbyssalSaint

Tamaño grande de visualización de Videos (Steemit solo soporta Youtube, Vimeo y Soundcloud.)

Acción	Código
Video en tamaño grande	`div class="videoWraper">Acá podemos escribir cuanto queramos ... Link de Video deseado</div>`

Ejemplo

Extra: Reducir o aumentar el tamaño de videos e imágenes modificando la cantidad de píxeles (Tiene un límite)

Acción	Código
Reducir o aumentar tamaño de imágenes y videos	`https://cdn.steemitimages.com/200x200/link de la imagen`

Copiamos lo siguiente: https://cdn.steemitimages.com/200x200/ Y lo pegamos acá:pegamos detrás del link de la imagen y nos aseguramos que no quede espacio entre el último "/" y el link de la imagen Entonces para modificar el número de píxeles, escribimos la altura y alto donde dice "200x200". Nota: Hay limitaciones para modificar este atributo, así que hagan lo que puedan.

Ejemplo

Crear un banner (Imagen que al tocar nos redirige a una página)

Acción	Código
Crear un banner (Imagen que al tocar nos redirige a una página)	`<a href="link al que dirige la página"><img title="Titulo de la imagen" alt="" src="https://cdn.steemitimages.com/400x400/link de la imagen"></a>`

Al tocar la siguiente imagen, el usuario será redirigido al link que hayamos asignado dentro de nuestro código HTML

Cat Leap en el Parque del Este - Caracas

Esto es ideal para colocar los íconos de nuestras Redes Sociales.

Eso fué todo por ahora, pronto haré más guías sobre diferentes temas. Espero que le saquen el máximo provecho a esta.

Sin más que decir por ahora ... Espero encontrarlos pronto dentro de estas líneas que escribo a altas horas de la noche, sin ganas de dormir ... Con muchas ganas de soñar ... Y de volar muy alto ... Un fuerte abrazo para todos!