HTML - ELEMENTOS BASICOS

En esta sesión introducimos ejemplos de elementos básicos de HTML, incluyendo textos, listas, imágenes, enlaces y contenedores.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Texto, encabezados, párrafos
Listas
Imágenes
Enlaces
Contenedores (div, span)


-- 04-html-basico.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título del documento</title>
<meta charset="UTF-8">
<meta name="description" content="Un ejemplo básico de HTML">
<meta name="author" content="Homero J. Simpson">
</head>
<body>
<h1>Encabezado principal</h1>
<h2>Encabezado de segundo nivel</h2>
<p>Este texto es considerado parte de un párrafo.
Al igual que esta oración, hasta la etiqueta
de cierre.
</p>
<p>Muchas etiquetas pueden anidarse dentro de otras,
como <strong>en este caso para indicar un texto importante</strong>,
o para hacer <em>énfasis en un aspecto particular</em>.
</p>
<p>Podemos escribir listas <strong>sin indicar orden</strong>:</p>
<ul>
<li>Lisa</li>
<li>Bart</li>
<li>Maggie</li>
</ul>
<p>Y listas donde los ítems están <strong>ordenados</strong>:</p>
<ol>
<li>Springfield</li>
<li>Shelbyville</li>
</ol>
<p>Podemos incluir imágenes en diversas ubicaciones, como dentro
de un párrafo...
<img src="https://openclipart.org/image/100px/svg_to_png/217951/Isometric-Cube-Illusion-Shaded.png"
alt="Isometric Cube Illusion Shaded"
title="Isometric Cube Illusion Shaded by GDJ ( https://openclipart.org/user-detail/GDJ )"> ...
</p>
<p>... en listas:</p>
<h4>Comediantes sin diálogos:</h4>
<ul>
<li>Mr. Bean: <img src="https://openclipart.org/image/100px/svg_to_png/217808/Mr-Bean-color-by-Rones.png"
alt="Mr. Bean (color)"
title="Mr. Bean (color) by rones ( https://openclipart.org/user-detail/rones )">
</li>
<li>Chaplin: <img src="https://openclipart.org/image/100px/svg_to_png/137899/Charles-Chaplin.png"
alt="Charles 'Charlie' Chaplin"
title="Charles 'Charlie' Chaplin by pesasa ( https://openclipart.org/user-detail/pesasa )">
</li>
</ul>
<p>... Y uno de los usos más comunes, dentro de un enlace:
<a href="http://www.wikipedia.com" target="_blank">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Wikipedia-logo-v2-es.svg"
alt="Logo Wikipedia"
title="Ir a Wikipedia">
</a>
</p>
<p>Por último, tenemos los contenedores: <strong>div</strong> y <strong>span</strong>. Se utilizan para
identificar y/o delimitar secciones de contenido, grupos de otras etiquetas, etc. La etiqueta "div"
generalmente se usa como un contenedor <em>de bloque</em> (lo que ocasiona un salto visual), y "span"
se usa como contenedor <em>en línea</em>. Veamos:
</p>
Nótese la diferencia al agregar un <div id="contenedor1">contenedor "div"</div> y un <span id="contenedor2">contenedor span</span>.
<!-- También podemos agregar comentarios en el código HTML,
que serán ignorados al "renderizar" la página en el navegador -->
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.