Making a Simple Post a Little Classier 1: English y Español

jamerussell(62)

Published in

#heyhaveyamet

Words

1860

Reading

9 min

Listen

Play

I would like to share how to make a really nice post by using simple HTML language. It is fun and it really adds class to one's post.

In this short tutorial we are going to be using:

<center>text or image\</center>
<div class=text-justify>\</div>(div means division)
<br> (br means break)

Photos or Images

So we will begin by putting an image at the top of our post. We will mark out where it will go with <center><img src="URL"></center>so the image will be in the center of our post.

When choosing a photo or image to use for your post try to use a photo that is wider than it is tall. We have seen Steemians install a photo only to find it on it's side because it flipped on them. I have pointed that out to someone that it happened to, and they just replied they didn't want to hassle with trying to correct it meaning they just didn't care or did not know how. But it can be very simple. Simply open MS Paint and paste it, then right-click and rotate. Easy peasy!

A quick way to use a photo that is taller than it is wide is to screen shot it with your keyboard and open MS Paint (if you do not have an art program or an image manipulation program) and set it to cut a rectangle, then cut it out with excess space on the sides, and when you insert it into your post, it will be wider than it is tall.

Of course we cannot forget the proper attribution or sourcing of the photo or image, and if it is ours, we are going to so state that the image was created by us. This way we remove all doubt that we did not steal or plagiarize it from someone else with the intent of making money off of it without proper acknowledgement. This statement can be made under the photo or image, or a blanket statement at the end of the post that says to the effect that "all images are my own and taken by me".

It was during a learning session that it was pointed out to me that the writing when using superscripture was really small on mobile, so it is really up to the author if he/she wants to use it or not. Thank you

@bliss11! So although I could use it, I will leave it off and did not include it in this post for now and hope that those who use mobile exclusively will be able to read it.

This image was taken by me on the stated date

If we use someone elses image, then we ought to provide the original author's name if we know what it is, or can find it. That way they get the proper recognition that they deserve, because after all, if it was yours would you not want the recognition that you were the author and therefore your name and work are out there for exposure and recognition?

In the event that we have an image from a creative commons license, then we would want to install a link to the credit that will take the reader straight to the photo where it resides, and preferably with the original author's name.

These three sites are just a few of the free ones that are available, and it should be noted that Google.com is not good for a credit, as the idea is to find the original author or artist to give credit to, and Google is more of an image finder when you're looking for a certain image. However, much better to use these sources first to see if you can find the one you want, and sourcing is made easy. I believe there are about 17 to 19 of these free websites for images floating around the internet:

https://Pixabay.com
https://Unsplash.com
https://Pexels.com

Now if we are going to install a link into the credit or attribution, we shall set <a href="IMAGE URL">name</a> in our code, and it will look like this:
Image Credit: <a href="https://pixabay.com/photos/wagon-wheel-western-barn-old-4596669"> BA Babcock from Pixabay.com</a> (in our example) or what ever the actual author's name is and that credit will be our link. After we install it, it should look like this under the photo or image:

Image by: BA Babcock from Pixabay

Paragraphs

We will add a <div class=text-justify>to the beginning of a paragraph, and end the paragraph with </div> and our paragraph will be all nice and squared and even.

<div class=text-justify>
Now we will formulate a little paragraph or two on what our photo was about, what camera it was taken with or where it came from, or some other helpful information about it that someone might ask. When was it taken? Most photos or images do not have the dates attached with them, and so we ought to provide a rough time when it was taken. The next thing is where was it taken? In this case my photo was taken from the Mathilda Avenue overpass over Central Expressway in Sunnyvale California in the united States of America.
</div>

<div class=text-justify>
My photo was taken with a Canon A395 digital camera that I just happen to have had the time stamp on, which is very convenient. A good percentage of the Steemians may not even remember details about a picture they took a long time ago, and just as it is in my photo, turned out to be a convenience.
</div>

<div class=text-justify>
Just for the sake of questions that some of you may have, to be brief this was the day that this plane was "shuttling the Shuttle" around the country for a tour before it was to go to it's permanent home, it had just been retired.
</div>

If anyone is raising questions like, "Oh wow, I wonder what ever happened to that thing?" you can learn some of it in this video and on this page by EarthSky:
https://earthsky.org/space/video-final-flight-of-space-shuttle-endeavour.

<div class=text-justify>
It is a very interesting story, and when I decided to do this post, I thought I should get a photo to use, and it all started when I just flipped through a few of my photos and saw this one and thought, "that's perfect for this project!"
</div>

Español

Me gustaría compartir cómo hacer un Post realmente bonito usando lenguaje HTML simplemente. Es realmente divertido y aporta bastante clase a nuestro Post.

En este pequeño tutorial vamos a usar lo siguiente:

<center> text or image </center>
<div class=text-justify> </div> (div significa division)
<br> (br significa “nueva línea”)

Fotos

Así pues comenzaremos poniendo una imagen al comienzo de nuestro post. La posicionaremos con el siguiente código: <center><img src=“URL”></center>de esta manera la imagen quedará centrada en nuestro post.

A la hora de elegir una foto o imagen para nuestro post debemos intentar buscar una foto o imagen que sea más ancha que alta.Hemos visto steemians con fotos o imágenes que se muestran volteadas. Al indicarles el error, algunos a los que les ha ocurrido a veces me responden que no quieren molestarse en hacerlo, bien porque no les preocupa bien porque no saben cómo hacerlo.Sin embargo puede resultar bastante sencillo: abrimos Microsoft Paint y la pegamos, hacemos clic derecho sobre la imagen y la rotamos. Pan comido!

Una forma rápida de usar una foto que sea más alta que ancha es tomar una captura de pantalla con el teclado y abrir MS Paint (si no tiene un programa de dibujo o un programa de manipulació de imágenes) y configurarlo para cortar un rectángulo, luego se debe cortar con un exceso de espacio en los lados y cuando lo inserte en su publicación,será más ancho que alto.

Fué durante una sesión de aprendizaje cuando me comentaron que al usar superíndices o subíndices resultan muy pequeños en el móvil por lo que depende del usted si quiere usarla o no. Gracias

@bliss11! Así pues, aunque podría usarlo, no lo incluiré en esta publicación para que aquellos que usan el móvil exclusivamente puedan leerlo.

Esta imagen fue tomada por mí en la fecha indicada.

Si usamos la imagen de otra persona, deberíamos proporcionar el nombre del autor original si sabemos quién es o si podemos encontrarlo. De esa forma obtienen el reconocimiento adecuado que merecen porque, después de todo, si fuera suya, ¿no querría que su nombre y su trabajo fuesen debidamente reconocidos?

En el caso de que tengamos una imagen con licencia Creative Commons, debemos colocar un enlace al autor que llevará al lector directamente a la foto original y preferiblemente con el nombre del autor original.

Estos tres que cito a continuación son sólo algunos de los gratuitos que están disponibles y debe tenerse en cuenta que Google.com no es recomendable como referencia (link de autoría) ya que la idea es encontrar el autor o artista original gracias a nuestro link. Google no es más que un buscador de imágenes. Sin embargo, es conveniente usar estos sitios web que citaré para ver si puede encontrar la que desea de forma rápida y fácil de usar. Creo que hay entre 17 y 19 de estos sitios web gratuitos para imágenes disponibles en Internet:

https://Pixabay.com
https://Unsplash.com
https://Pexels.com

Ahora, si vamos a crear un enlace de crédito o atribución, insertaremos <a href="IMAGE URL"> name </a> en nuestro código y se verá así:
Origen de la imagen: <a href="https://pixabay.com/photos/wagon-wheel-western-barn-old-4596669"> BA Babcock de Pixabay.com </a> (en nuestro ejemplo) o cualquiera que sea el nombre real del autor. Ese crédito será nuestro enlace. Después de insertarlo debería verse así debajo de la foto o imagen:

Origen de la imagen: BA Babcock from Pixabay

Los párrafos

Agregaremos un <div class = text-justify> al principio y terminaremos el párrafo con </div> y nuestro párrafo quedará bonito y equilibrado.

<div class=text-justify>
Ahora formularemos un pequeño párrafo o dos acerca de qué se trataba nuestra foto, con qué cámara fue capturada o cuál es su origen así como cualquier otra información útil que alguien pudiera preguntar. ¿Cuándo fue tomada? La mayoría de las fotos o imágenes no tienen las fechas adjuntas, por lo que debemos proporcionar el momento detallado cuando fué capturada.Lo siguiente es ¿dónde se capturó la foto? En este caso, mi foto fue tomada desde el paso elevado de Mathilda Avenue sobre Central Expressway en Sunnyvale California en los Estados Unidos de América.
</div>

<div class=text-justify>
Mi foto fue tomada con una cámara digital Canon A395 en la que tengo la marca de tiempo, lo cual es muy conveniente. Es posible que un buen porcentaje de los Steemians ni siquiera recuerde detalles sobre una foto que tomaron hace mucho tiempo pero gracias a la marca de tiempo en mi foto el problema queda resuelto.
</div>

<div class=text-justify>
Por si alguien tuviera dudas, para ser breves, éste fue el día en que el avión estaba "completando su ruta" por todo el país para una gira antes de ir a su hogar permanente para su retiro definitivo.
</div>

<div class=text-justify>
Si alguien se está haciendo preguntas como "Oh, wow, me pregunto qué pasó con ese avión ". Puede obtener más información en este video y en esta página de EarthSky: https://earthsky.org/space/video-final-flight-of-space-shuttle-endeavour.
</div>

<div class=text-justify>
Es una historia muy interesante y cuando decidí hacer esta publicación pensé que debería obtener una foto que usar así que todo comenzó cuando hojeé algunas de mis fotos y ví ésta y pensé, “es perfecta para este proyecto!"
</div>
<br>
<br>