| 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.
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
Acá podemos escriblir lo que nos apetesca, y como pueden ver el tamaño del video es grande.
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!
Haz click sobre las imágenes y sígueme en mis redes sociales |
|---|
muy bueno y muy útil... excelente.