Updated : Ene 26, 2020 in Desarrollo web

Curso basico de HTML #2 Encabezado, Enlace,imagen,Párrafos , negritas, subrayado ,cursiva y salto de linea

En la primera parte aprendimos que es y como empezar nuestro primeros pasos. Hoy solidificaremos esos concepto aplicando lo aprendido con diferente etiquetas.

Etiquetas de encabezado

Las etiquetas de encabezado son etiqueta que como bien indica su nombre van a almacenar un encabezado de un sitio web. Un ejemplo de ello es el titulo de una pagina web.

Sintaxis

<Encabezado> Mi sitio web </Encabezado>

Expresión dentro de un documento HTML

<h1> Mi pagina web </h1>

Esta misma etiqueta tiene diferente tamaño que varia del h1 a h6 mientras mas chico sea el numero mas pequeño se mostrara el encabezado.

<h1>Soy el tamaño mas grande </h1>
<h2>Soy el segundo mas grande </h2>
<h3>Soy el tercero mas grande </h3>
<h4>Soy el cuarto mas grande </h4>
<h5>Soy el quinto mas grande </h5>
<h6>Soy el mas pequeño :(</h6>

Etiqueta de enlace y imagen

En el anterior capitulo hablamos de esta etiqueta de enlace pero me pareció importante volverla a presentarla como corresponde. La etiqueta de enlace es la encargada de almacenar un enlace o hipervínculo hacia un sitio web puede ser dentro de la pagina o fuera hacia por ejemplo fb.com/owicron .

Sintaxis

<Enlace ir="Pagina"> Contenido </Enlace>

Expresión dentro de un documento HTML

<a href="http:\owicron.com"> Ir a mi sito oficial </a>

Algo muy importante de esta etiqueta es siempre anteponer el prefijo http o https dependiendo del sito web para que te indexe el navegador la pagina web.

Imagen

La etiqueta imagen lo permite mostrar en nuestro sitio web una determinada imagen que este subida a internet o se encuentre en el directorio de nuestro ordenador . Si bien en el primer capitulo vimos que la etiquetas siempre tiene una palabra de apertura y otra de cierre con el mismo nombre la etiqueta de imagen es especial ya que no necesita otra etiqueta del mismo nombre para cerrase.

Sintaxis

<imagen mostrar="http:\owicron.com\imagen.png"/>

Expresión dentro de un documento HTML

<img src="http:\owicron.com\imagen.png"/>

Párrafos , negritas, subrayado ,cursiva y salto de linea

La etiqueta de párrafos es solo una etiqueta que utilizaremos cuando quieras mostrar información de un articulo o en determinadas parte de un sitio web.

Sintaxis

<párrafo> Contenido </párrafo>

Expresión dentro de un documento HTML

<p>Hola bienvenido a este nuevo capitulo de html</p>

Negritas

La negrita solo sirve para marca por ejemplo determinada parte de un párrafo en un colo mas oscuro y fuerte asiendo resaltarlo de la vista.

Sintaxis

<negrita>contenido </negrita>

Expresión dentro de un documento HTML

<b> Me veo mas oscuro </b>

Otras etiqueta que podemos utilizar para lograr un efecto similar mas no igual es la etiqueta strong la única diferencia es que especifican que el texto adjunto debe ser «fuerte» o «enfatizado» al momento de mostrase pero si bien es verdad que no de distingue prácticamente a la vista mas si es importante para una persona con discapacidad visual.

<strong>Me veo oscuro pero ligera mente mas fuerte</strong>

Subrayado

Para subrayar un elemento contamos con la etiqueta <u> y su comportamiento es muy sencillo.

Sintaxis

<subrayar> estoy  subrayado </subrayar>

Expresión dentro de un documento HTML

<u>estoy subrayado</u>

Cursiva

Como bien indica el mismo nombre podremos poner una letra en cursiva o párrafo

Sintaxis

<Cursiva> me veo un poco mas inclinado :) </Cursiva> 

Expresión dentro de un documento HTML

<i> me veo un poco mas inclinado :)</i>
<!-- Otra variante es -->
<em>me veo un poco mas inclinado :)</em>

Salto de linea

El salto de linea es una etiqueta especial que permitirá crear un espaciado entre un elemento. Por ejemplo si queremos que todos los párrafos no estén a montonatos.

Sintaxis

<salto de linea/>

Expresión dentro de un documento HTML

<br/>
<!--ejemplo-->
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula augue non ante placerat dignissim. <br/> Curabitur bibendum massa id arcu venenatis.</p>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.