Did you know that in hive you have the opportunity to organize and improve the structure of your content through the use of Html (HyperTextMarkupLanguage) elements or tags, which is the standard language for making web pages, consisting of a series of elements, which you use to enclose different parts of your content so that they are displayed or act in a certain way.
These can make a word or an image a hyperlink to another site, justify, center, align left or right, convert words into italics, bold, enlarge and reduce fonts, shade text, create tables, lists and many other things I bring you in this guide that will be very useful when making your publications.
FIRST I AM GOING TO EXPLAIN YOU BRIEFLY WHAT ARE AND HOW DO THE HTML TAGS WORK
An HTML tag is what we see between angle brackets: the tags usually come in pairs for example: and , where the first is the opening and the second that carries the slash / is closing.
Almost all the tags must "close" the content to which it affects, although they are not 100% of the cases, as for example: (Line break) this only tag is used.
The HTML elements are structures that make up an HTML document, which are made up of an opening tag, zero or more attributes, the content enclosed between the tags and the closing tag.
STRUCTURE OF AN HTML ELEMENT:
You can also place elements within other elements. In the following image I show an example where I use tags to justify, set paragraphs, bold, italics and strikethrough.
The elements must be opened and closed in an orderly, so that the content that acts in the way you prefer is clearly inside or outside of each other.
HERE I SHOW YOU THE GUIDE WITH THE HTML ELEMENTS IN HIVE:
Here I show you the html elements that can be applied in the writing of publications in HIVE.
If you are going to copy it directly from the page for your use just delete inside the tag the space between the symbol < and the other part of the tag.
SET PARAGRAPHS:
Paragraph is a block of text composed of one or more sentences that refer to a particular topic and are usually separated from others by a blank space.
< p >write here< /p >
JUSTIFIED TEXT:
< div class="text-justify">
PLACE ALL THE CONTENT YOU WANT JUSTIFIED HERE < /div>
BOLD: It can be in these two ways:
< b>place your text here< /b>
place your text here< /strong>
Result: place your text here
CURSIVE:
< i> put your text here < /i>
Place your text here< /em>
Result: place your text here
TEXT CLEARED:
< del>place your text here< /del>
Result: place your text here
CENTER:
- Texts:
< center> place your text here< /center>
- Images:
< center> place the image link here< /center>
TO CREATE HYPERLINKS:
When you click on the keyword, you will be directed to the page of the link you have placed.
<ahref="page link">keyword< /strong>< /a>
NAME USERS IN HIVE:
<ahref="user page link HIVE">
Hive account@username< /a>
FOR IMAGES WITH LINK:
When you click on the image you are directed to the page with the link you placed.
[](link from page here)
PLACE FONT FOR IMAGES OR QUOTES:
Use it to refer to the page of the author or owner of the image or text you used in your publication.
Source](reference link here)
If you want it centered:
< center> [Source](reference link here)< /center>
PLACE BUTTONS THAT DIRECT YOU TO A SPECIFIC PAGE:
< a href="PAGE LINK TO WHICH THE BUTTON WILL REDIRE"><imgsrc="PAGE LINK TO THE BUTTON">< /a>
EXAMPLE:
SOMETHING APPOINTMENTS:
With this you highlight a text or a quotation that you require in your publication.
place your text here
Result: >place your text here
WRITE IN TWO COLUMNS:
< div class=pull-left>place your text here< /div>
< div class=pull-right>place your text here< /div>
Result
place your text here
place your text here
TO PLACE BOARDS:
Result:
Header 1 Header 2 Header 3 Header 4
TEXT TEXT TEXT
TEXT TEXT TEXT
TEXT TEXT TEXT
- With images:
Header 1 Header 2 Header 3 Header 4
image link image link image link image link
image link image link image link image link
image link image link image link image link
ANOTHER WAY OF PLACING BOARDS:
These elements can be edited at will depending on the number of columns and rows you need. The rows are defined from
< /tr> and to add a new column we only have to add a | < /td> where we need it. |
| Content 1
| Content 2
Content 3
|
| subcontent a
| subcontent x
| subcontent 3-a
|
| subcontent b
| subcontent y
| subcontent 3-b
|
| subcontent c
| subcontent z
| subcontent 3-c
LINE TO SEPARATE PARAGRAPHS:
Place three dashes between the paragraphs or images to be separated.
LINE BREAK:
You only have to put a # in an empty line to generate an empty space (you can't accumulate several consecutive blank lines):
ANOTHER WAY TO PLACE LINE BREAK:
Place your text here
Place your text here
DIFFERENT SIZES OF LETTERS:
< h1> BIG < /h1>
< h2>LARGE< /h2>
< h3>MEDIUM< /h3>
< h4>REGULAR< /h4>
< h5>Small >> /h5>
SUPER SMALL
< h6>SUPER SMALL < /h6>
LIST:
ENUMERED:
< p>Place the statement here< /p>
TEXT 1
TEXT 2
TEXT 3
TEXT 4
NOT NUMBERED:
< p> Place the statement here < /p>
TEXT
TEXT
TEXT
TEXT
RESULT:
< p> Place the statement here < /p>
ALIGN IMAGES:
With this you can place an image on the left or right to place a text or an image next to it.
- ALIGNED ON THE RIGHT:
< div class="pull-right">
<imgsrc="here is the link to the image"/>
< /div>
- ALIGNED ON THE LEFT:
< div class="pull-left">
<imgsrc="here is the link to the image"/>
< /div>
- ALIGN TWO IMAGES TO THE LEFT OR RIGHT:
RIGHT:
< div class="pull-right">
< div class="pull-right">
< center> image link< /center>
< div>
< div class="pull-right">
< center>link from image< /center>
< /div >
LEFT:
< div class="pull-right">
< div class="pull-left">
< center> image link< /center>
< /div>
< div class="pull-left">
< center>link from image< /center>
< /div >
PLACE SUPERSCRIPT:
TEXT superscript text< /sup>
RESULT: TEXT SUPERINDEX
Place sub-index:
TEXT< sub> text sub-index< /sub>
RESULT: TEXTsubindice
Como mejorar el estilo de tu contenido en hive
Sabias que en hive tienes la oportunidad de realizar tus publicaciones más vistosas y prolijas mediante el uso de elementos o etiquetas Html (HyperTextMarkupLanguage), el cual es el lenguaje estándar para la realización de páginas web, que consiste en una serie de elementos, que usas para encerrar diferentes partes de tu contenido para que éstos se muestren o actúen de cierta manera.
Estos pueden hacer de una palabra o una imagen un hipervínculo hacia otro sitio, justificar textos, centrar, alinear a la izquierda o derecha, pueden convertir palabras en cursivas, negrillas, agrandar y achicar las fuentes, sombrear texto, crear tablas, listas y muchas cosas más que te traigo en esta guía que te van resultar muy útiles a la hora de realizar tus publicaciones.
PRIMERO TE VOY A EXPLICAR BREVEMENTE QUE SON Y COMO FUNCIONAN LAS ETIQUETAS HTML
Una etiqueta HTML es aquello que vemos entre corchetes angulares:
Las etiquetas generalmente vienen en pares por ejemplo: y , donde La primera es de apertura y la segunda que lleva el slash / es de cierre. Casi todas las etiquetas deben “encerrar” el contenido al que afecta, aunque no son el 100% de los casos, como por ejemplo: (Salto de línea) se utiliza esta única etiqueta.
Los elementos HTML son estructuras que componen un documento HTML, los cuales están conformados por una etiqueta de apertura, cero o mas atributos, el contenido encerrado entre las etiquetas y la etiqueta de cierre.
ESTRUCTURA DE UN ELEMENTO HTML
Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que el contenido que actúe de la manera que prefieras se encuentre claramente dentro o fuera el uno del otro.
Puedes también colocar elementos dentro de otros elementos, esto se llama anidamiento.
En la siguiente imagen muestro un ejemplo donde utilice etiquetas para justificar, establecer párrafos, negrita, cursiva y tachado.
AQUI LES MUESTRO COMO APLICAR LOS ELEMENTOS HTML EN HIVE:
A continuación les muestro los elementos html que se pueden aplicar en la redacción de publicaciones en HIVE.
Si lo vas a copiar directo de la pagina para tu uso solo tienes que borrar dentro de la etiqueta el espacio entre el símbolo< y la otra parte de la etiqueta.
Al final del post voy a dejar un link de descarga de la guía en formato word para que siempre la tengas a tu disposición a la hora de redactar y solo tengas que copiar y pegar los elementos en tu publicación.
ESTABLECER PÁRRAFOS:
Párrafo es un bloque de texto compuesto de una o más oraciones que se refieren a un tema en particular y que normalmente se separan de otros por un espacio en blanco.
< p >escribe aquí< /p >
TEXTO JUSTIFICADO:
< div class="text-justify">
COLOCA TODO EL CONTENIDO QUE QUIERAS JUSTIFICADO AQUI < /div>
NEGRITA: Puede ser de estas dos formas:
< b>coloca tu texto aquí< /b>
coloca tu texto aquí< /strong>
Resultado:coloca tu texto aquí
CURSIVA:
< i> coloca tu texto aquí < /i>
coloca tu texto aquí< /em>
Resultado: coloca tu texto aquí
TEXTO TACHADO:
< del>coloca tu texto aquí< /del>
Resultado:
CENTRAR:
• Textos:
< center> coloca tu texto aquí< /center>
• Imágenes:
< center> coloca el link de la imagen aquí< /center>
PARA CREAR HIPERVINCULOS:
Con esto al hacer click sobre la palabra clave te direcciona al la pagina del link que coloques.
<ahref="link de la página">palabra clave< /strong>< /a>
NOMBRAR USUARIOS EN HIVE:
<ahref="link de la pagina del usuario HIVE "> Hive account@nombredelusuario< /a>
PARA IMÁGENES CON LINK:
Con esto al hacer click sobre la imagen te direcciona a la página del link que colocaste.
[](link de la página aquí)
COLOCAR FUENTE PARA IMÁGENES O CITAS:
Se usa para hacer referencia a la página del autor o propietario de la imagen o el texto que utilizaste en tu publicación.
[Fuente](link de referencia aquí)
Si la quieres centrada:
< center> [Fuente](link de referencia aquí)< /center>
COLOCAR BOTONES QUE TE DIRECCIONEN A UNA PÁGINA ESPECÍFICA:
< a href="LINK DE LA PAGINA A LA QUE TE REDIRECCIONARA EL BOTON"><imgsrc="LINK DE LA PAGINA DE EL BOTON">< /a>
EJEMPLO:
CITAS DE ALGO:
Con esto resaltas un texto o una cita que requieras en tu publicación.
Coloca tu texto aquí
Resultado: >coloca tu texto aquí
ESCRIBIR EN DOS COLUMNAS:
< div class=pull-left>coloca tu texto aquí< /div>
< div class=pull-right>coloca tu texto aquí< /div>
Resultado
coloca tu texto aquí
coloca tu texto aquí
COLOCAR TABLAS:
• Con texto:
Resultado:
Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4
TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO
• Con imágenes:
Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4
link de la imagen link de la imagen link de la imagen link de la imagen
link de la imagen link de la imagen link de la imagen link de la imagen
link de la imagen link de la imagen link de la imagen link de la imagen
OTRA FORMA DE COLOCAR TABLAS:
Estos elementos pueden ser editados a su antojo dependiendo del número de columnas y filas que ustedes necesiten. Las filas se definen a partir de < /tr> y para agregar una nueva columna solo debemos agregar un | < /td> donde lo necesitemos. |
| Contenido 1
| Contenido 2
Contenido 3
|
| subcontenido a
| subcontenido x
| subcontenido 3-a
|
| subcontenido b
| subcontenido y
| subcontenido 3-b
|
| subcontenido c
| subcontenido z
| subcontenido 3-c
LÍNEA PARA SEPARAR PÁRRAFOS:
Coloca tres guiones entre los párrafos o imágenes a separar.
SALTO DE LÍNEA:
Solo tienes que poner un # en una línea vacía para generar un espacio vació (no se pueden acumular varias líneas en blanco consecutivas):
OTRA FORMA DE COLOCAR SALTO DE LINEA:
Coloca tu texto aquí
Coloca tu texto aquí
DIFERENTES TAMAÑOS DE LETRAS:
• EXTRA GRANDE
< h1>EXTRA GRANDE < /h1>
• GRANDE
< h2>GRANDE< /h2>
• MEDIANA
< h3>MEDIANA< /h3>
• REGULAR
< h4>REGULAR< /h4>
• PEQUEÑA
< h5>PEQUEÑA< /h5>
• SUPER PEQUEÑA
< h6>SUPER PEQUEÑA < /h6>
LISTAS:
ENUMERADAS:
< p>Coloca el enunciado aquí< /p>
TEXTO 1
TEXTO 2
TEXTO 3
TEXTO 4
NO ENUMERADAS:
Coloca el enunciado aquí
TEXTO
TEXTO
TEXTO
TEXTO
RESULTADO:
Coloca el enunciado aquí
• TEXTO
• TEXTO
• TEXTO
• TEXTO
ALINEAR IMÁGENES:
Con esto puedes ubicar una imagen a la izquierda o la derecha para colocar un texto o una imagen al lado de esta.
• ALINEADA A LA DERECHA:
< div class="pull-right">
<imgsrc="aqui va el link de la imagen"/>
< /div>
• ALINEADA A LA IZQUIERDA:
< div class="pull-left">
<imgsrc="aqui va el link de la imagen"/>
< /div>
Here you have a download link of the guide in word format so that you always have it at your disposal when writing and you only have to copy and paste the elements in your post.
Aqui tienes un link de descarga de la guía en formato word para que siempre la tengas a tu disposición a la hora de redactar y solo tengas que copiar y pegar los elementos en tu publicación.
| |
