Etiquetas básicas HTML.

Aprende lo básico en poco tiempo.

En este post te explico más a detalle sobre las etiquetas HTML. y agrego algunos ejemplos que puedes copiar y pegar para ver como funcionan.

Una etiqueta HTML es un código que se incluye en los archivos creados con el lenguaje HTML para estructurar, dar formato y añadir significado al contenido de una pagina web, mismo que es interpretado por los navegadores de Internet.

La mayoría de la etiquetas llevan cierre o un fin que es definido por el signo /antes del nombre, ejemplo: <html> </html> aunque esto no aplica para todas las etiquetas como veremos más adelante.

Definición de etiquetas básicas HTML.

  • <html>: Indica el comienzo y fin del documento HTML.
  • <head>: Es la cabecera del documento HTML en ella se pone el nombre de la página dentro de <title> </title> pero también puede contener meta-etiquetas, que puedes ver aquí.
  • <body>: Es el cuerpo del documento y aqui es donde se inserta el contenido que se va a mostrar en la página.
  • <h1>, <h2>, etc: Se usan para los títulos o encabezados, el tamaño del texto cambia según la etiqueta se utilice, siendo <h1> el tamaño más grande y <h6> el tamaño más pequeño.
  • <a>: Es utilizado para insertar enlaces a otras paginas web, la etiqueta debe ir acompañada de href=»dirección/web», ejemplo: <a href=»https://www.google.com»> ir a otra página. </a>.
  • <table>: Con esta etiqueta se puede hacer una tabla para mostrar de manera más ordenada los elementos de la pagina web, esta etiqueta va acompañada de filas <tr> y columnas <td>.
  • <p>: El texto dentro de esta etiqueta formará un párrafo.
  • <img>: sirve para insertar una imagen en el documento (esta etiqueta no se cierra con /), al igual que la etiqueta <a>, está, viene acompañada de un comando, en este caso, src=»archivo.jpg», ejemplo:
    <img src=»buho.jpg»>
    src significa source o fuente en español, y es el lugar de donde se va a tomar tu imagen, puedes poner un vinculo de una imagen local o de Internet, la imagen local deberá estar en el mismo lugar que el documento html (esto si no sabes como poner la ruta local).
  • <ul> y <ol>: Sirve para crear listas, estas pueden ser ordenadas o no ordenadas, y se en listan los elementos con la etiqueta <li>.
  • <br>: Salto de linea (esta etiqueta no se cierra con /).
  • <hr>: Dibuja una linea que divide el documento de manera horizontal (esta etiqueta no se cierra con /).
  • <b> y <strong>: Resalta el texto.
  • <u>: Subrayado.
  • <i> y <em>: Cursiva.
  • <div>: Sirve para crear secciones o divisiones en el documento.

Ejemplos de etiquetas HTML.

A continuación te muestro un ejemplo de una página web.

<html>
	<head>
		<title>Mi primera página web. </title>
	</head>
	<body>

	</body>
</html>

Se suele dar un formato al código HTML para que se vea más ordenado y sea mucho más fácil identificar los elementos.

Copia y pega el siguiente código en tu bloc de notas o editor de texto favorito y empieza modificar el código, que no te asuste añadir o quitar cosas.

<html>
	<head>
		<title>Mi primera página web. </title>
	</head>
	<body>
		<h1>Hola mundo.</h1>
		<h2>Hola mundo.</h2>
		<h3>Hola mundo.</h3>
		<h4>Hola mundo.</h4>
		<h5>Hola mundo.</h5>
		<h6>Hola mundo.</h6>
		<br><br><hr>
		<a href="https://www.google.com"> Vinculo a otra web.</a>
		<br><hr>
		<table>
			<tr> <!--Fila 1-->
				<td>columna1. </td>
				<td>columna2. </td>
			</tr>
			<tr> <!--Fila 2-->
				<td>columna1. </td>
				<td>columna2. </td>
			</tr>
		</table>

		<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
		sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
		aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
		cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		
		<img src="buho.jpg">
		
		<ul>
			<li>LISTA </li>
			<li>NO </li>	
			<li>ORDENADA </li>
		</ul>
		<ol>
			<li>LISTA </li>
			<li>ORDENADA </li>	
			<li>-- </li>
		</ol>
		
		<b> Negritas </b> 			<br>
		<strong> Negritas </strong> <br>
		<u>Subrayado </u> 			<br>
		<i> Cursiva </i> 			<br>
		<em> Cursiva </em>
		
	</body>
</html>

También puedes combinar las etiquetas, intenta poner imágenes dentro de una tabla o añadir mas columnas y filas a la tabla, cambia el estilo de texto por negrita con cursiva o negrita y subrayado.

Espero que esta pequeña introducción a las etiquetas HTML te haya sido de ayuda, si tienes alguna duda puedes dejar tu comentario y con gusto estaré respondiendo.

Practica a diario y será más fácil recordar los nombres de las etiquetas y como se escriben, así podrás hacer tus paginas web mucho más rapido.

En el siguiente post, te explicare como funcionan las hojas de estilo CSS y aprenderás a usarlas para darle un estilo único a tu pagina web.

– Isaac G.

1 comentario

Añade el tuyo →

Howdy! This blog post could not be written any better!
Going through this post reminds me of my previous roommate!
He constantly kept preaching about this.
I am going to forward this post to him. Pretty
sure he’ll have a good read. Many thanks for sharing!

Responder

Deja una respuesta

Entradas relacionadas