Ejemplos básicos

En este capítulo mostraremos algunos ejemplos básicos con código HTML básico. No te preocupes si usamos etiquetas que aún no conoces.

Documentos HTML

Todos los documentos HTML deben comenzar por el tipo de declaración <!DOCTYPE html>. El documento html comienza con la etiqueta <html> y finaliza con la etiqueta </html>. La parte visible del documento la encontraremos entre las etiquetas <body> y </body>.

Ejm

<!DOCTYPE html>
<html>
<body>

<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo</h1>

</body>
</html>

Encabezados HTML

Los encabezados HTML los vamos a definir con las etiquetas <h1><h6>. <h1> define la más importante cabecera, y <h6> la menos importante.

Ejm

<h1>Esto es un encabezado</h1>
<h2>Esto es un encabezado </h2>
<h3>Esto es un encabezado</h3>

Párrafos HTML

Los párrafos HTML se definen con la etiqueta <p>.

Ejm

<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>

HTML Links

Los links (enlaces) HTML se definen con la etiqueta <a>.

Ejm

<a href="https://websarrolladores">Esto es un link (enlace)</a>

El destino del enlace se especifica con el atributo href. Los atributos son usados para proveer información adicional a los elementos HTML.

Imágenes HTML

Las imágenes HTML se especifican mediante la etiqueta <img>. El archivo fuente (src), el texto alternativo (alt), width y height se proporcionan como atributos.

Ejm

<img src="webs.jpg" alt="webs.com" width="104" height="142">

Botones HTML

Los botones HTML son definidos con la etiqueta <button>.

Ejm

<button>Haz clic</button>

Listas HTML

Las listas HTML se definen con la etiqueta <ul> (lista desordenada / con viñetas) o <ol> (lista ordenada / numerada), seguidas de etiquetas <li> (elementos de la lista).

Ejm

<ul>
  <li>Café</li>
  <li></li>
  <li>Leche</li>
</ul>

<ol>
  <li>Café</li>
  <li></li>
  <li>Leche</li>
</ol>