Curso de HTML (aplicado a Steemit) - Tutoriales

in #spanish6 years ago
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ónCó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ónCó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ónCó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ónCó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ónCódigoEjemplo
Texto en Negritas<strong>Texto deseado</strong>Texto deseado

Texto tachado

AcciónCódigoEjemplo
Texto tachado<strike>Texto tachado html</strike>Texto tachado html

Cambiar el texto a color
Rojo

AcciónCódigoEjemplo
Cambiar a color rojo el texto<div class="phishy">Texto deseado</div>
Texto deseado

Texto que se escribe de derecha a izquierda

AcciónCó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ónCódigoEjemplo
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ónCó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ónCó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ónCó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ónCó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ónCódigo
Video en tamaño grandediv 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ónCódigo
Reducir o aumentar tamaño de imágenes y videoshttps://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ónCó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
Facebook

Sort:  

muy bueno y muy útil... excelente.

XAvier steemit 2.jpg