HTML
Hyper Lenguaje de marcado de
hipertexto.
Text Compuesto de ETIQUETAS y
ATRIBUTOS quienes a su vez
forma ELEMENTOS.
Markup
Language
Sintaxis de una Etiqueta
<h1> ... </h1>
Etiqueta de Etiqueta de
Apertura Clausura o cierre
Etiqueta = Parte de código que permite generar un
elemento visual en el browser.
Sintaxis de una Etiqueta
<h1 align=”center”> ... </h1>
Atributo Valor
Atributo = característica que deseamos modificar de una
etiqueta. Suele tener varios valores.
Valor = definición de la característica que vamos a
modificar.
Sintaxis de una Etiqueta
<h1 align=”center”>
Hola Mundo
</h1>
Elemento = Es el conjunto de etiqueta (con
atributos o no) y su contenido interno.
Estructura básica de un documento HTML
<!DOCTYPE html>
<html>
<head>
<title>PROGRAMACION WEB</title>
</head>
<body>
Este es mi primer código.
</body>
</html>
Estructura básica de un documento HTML
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>_
<title>PROGRAMACION WEB</title>
</head>
<body>
Este es mi primer código.
</body>
</html>
<meta charset=”utf-8”>
El charset permite definir la codificación de caracteres
a utilizar. Aunque no es obligatorio, se debería incluir en
cualquier documento html por dos razones principales:
. Para evitar un visionado incorrecto en algunos navegadores.
. Para seguir las convenciones y estándares de la W3C.
Tags HTML
Encabezados
Encabezado: tag semántico que
<h1>Título principal</h1>
permite generar título y subtítulos.
<h2>Subtítulo</h2> Son muy importantes para el
posicionamiento en buscadores.
<h3>Subtítulo 2</h3>
<h4>Subtítulo 3</h4> ATENCIÓN
El tag <h1>, por recomendación de
<h5>Subtítulo 4</h5> la W3C, sólo debe ser utilizado una
vez por documento HTML.
<h6>Subtítulo 5</h6>
Párrafos
<p>Este es un párrafo pero les dije que no
tengo imaginación para escribir.</p>
Párrafo: Tag que permite generar bloques de texto destinados a ser
párrafos. Podemos usar cuantos necesitemos.
Listas Ordenadas Listas Desordenadas
<ul>
<ol>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
</ul>
</ol>
Lista Ordenada: Tag para listar ítems de manera Lista Desordenada: Tag para listar ítems.
consecutiva. Por defecto genera una viñeta Por defecto genera una viñeta tipo
numérica que inicia en 1. “bolita”. Esta viñeta se puede cambiar.
Esta viñeta se puede cambiar.
Listas
<ol type=”1”>...</ol>
<ul type=”disc”>...</ul>
<ol type=”A”>...</ol>
<ul type=”circle”>...</ul>
<ol type=”I”>...</ol>
<ul type=”square”>...</ul>
<ol start=”20”>...</ol>
Atributos: type = permite cambiar el tipo de viñeta de cada lista .
start = permite definir en qué número deseamos iniciar la lista.
Listas Anidadas
<ul>
<li>
Ítem de lista con lista anidada
<ol>
<li>Ítem de lista anidada</li>
<li>Ítem de lista anidada</li>
</ol>
</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
</ul>
Las listas anidadas nos permiten crear varios niveles de jerarquía y organización. Las
podemos anidar como deseemos y generar los niveles que queramos.
Imágenes
<img src=" img-wiki.jpg " alt=" " >
src = Coloco la ruta donde está guardada mi imagen
alt = Se utiliza para darle una descripción de la imagen al
navegador. Nosotros no la vemos pero el navegador va a saber
interpretarla.
Nota: Esta etiqueta no lleva cierre. Debo verificar donde se
encuentra mi imagen almacenada para poder llamarla
correctamente.
