HTML
INTERNET Y CÓMO SE
TRANSMITE LA INFORMACIÓN
http protocolo de transmisión de datos
¿QUÉ ES Y PARA QUÉ SIRVE HTML?
CONTENIDO DE LA PÁGINA WEB ETIQUETAS
<html>
<body>
<p>Esto es un párrafo. Bienvenidos a esta página web.</p>
</body>
</html>
HISTORIA DEL HTML
HTML nació públicamente en un documento
llamado HTML Tags (Etiquetas HTML),
publicado por primera vez en Internet por
Tim Berners-Lee en 1991. En esta
publicación se describen 22 etiquetas.
HTML ¿un lenguaje de
programación? Lenguaje Código Salida por pantalla
HTML 1
2
public class MuestraDelUnoAlDiez {
3
public static void main (String[] args) {
NO es un for(int i=1; i <= 10; i++) {
4
lenguaje de Java [Link](i);
5
6
}
programación }
7
8
}
9
10
<html>
<body>
lenguaje de <p>1</p> 1
maquetación <p>2</p> 2
<p>3</p> 3
web <p>4</p> 4
HTML <p>5</p> 5
o lenguaje de <p>6</p> 6
etiquetas <p>7</p> 7
<p>8</p> 8
(crear <p>9</p> 9
estructuras de <p>10</p> 10
</body>
documentos </html>
HTML)
¿CUÁLES SON LAS VERSIONES DE
HTML? En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el
primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar. HTML
HTML 2.0 2.0 no soportaba tablas.
Se simplificaba al máximo la estructura del documento para agilizar su edición, donde
la declaración explícita de los elementos body, html y head es opcional.
La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML
HTML 3.2 publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos
avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto
que fluye alrededor de las imágenes.
La última especificación oficial de HTML se publicó en diciembre de 1999 y se
denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el
desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple,
Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y
HTML 4.01 decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext
Application Technology Working Group) que comenzó el desarrollo del HTML 5, cuyo
primer borrador oficial se publicó en enero de 2008. Debido a la fuerza de las
empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML
5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML,
dentro del cual decidió integrar el XHTML.
El consorcio internacional W3C, después de una evolución de varios años, liberó el
HTML 5 como estándar oficial a finales de octubre de 2014. HTML 5 incorpora nuevos
HTML 5, elementos no contemplandos en HTML 4.01. Hay diversos cambios respecto a HTML
HTML 5.1, 4.01. Hay nuevas etiquetas, se introduce la posibilidad de introducir audio y video de
forma directa en la web sin necesidad de plugins o complementos en los navegadores,
HTML 5.2 y otras novedades. El W3C irá lanzando progresivamente nuevas evoluciones del
HTML 5.
¿CUÁLES SON LAS VERSIONES DE
HTML?
archivo HTML indicar versión de HTML
estamos usando.
poner una línea al principio de la página
web (en todos nuestros documentos)
Para HTML 5 escribiríamos:
<!DOCTYPE html>
<!DOCTYPE html">
<html>
<body>
<p>Esto es una prueba de web creada con HTML 5</p>
</body>
</html>
CREACIÓN Y VISUALIZACIÓN DE DOCUMENTOS
HTML
1. Creamos un archivo con un editor de texto
(bloc de notas, Notepad++, Word, …). También
con editores de código online (Glitch) o
entornos IDE (Visual Studio Code)
2. Lo guardamos con la extensión .html o .htm
(como una página web)
[Link]
3. Hacemos doble clic en el archivo y se nos abre
con el navegador predeterminado
Ideas para crear buenas
páginas web
Tomar ideas (no copiar)
No uses toda la gama de
colores en tu página web
Se ve mejor si cabe en la pantalla
Ideas para crear buenas
páginas web
Administra tus imágenes (ni muchas ni
pocas)
Haz que tu
sitio sea fácil
de navegar
Mantén tu sitio actualizado
Editor de código online
(GLITCH)
[Link]
Sign in with Google
Correo electrónico de
gmail
ESTRUCTURA BÁSICA DE UNA
PÁGINA HTML
<!DOCTYPE html>
<html>
<head>
<title>Título de la página
web</title>
...
</head>
<body>
Cuerpo de la página web
</body>
</html>
HEAD
Etiqueta en cabecera Función ¿Es obligatoria?
<title> Da un título al Sí
documento HTML
<base> Define ruta de acceso No
<link> Define archivos No
vinculados
Define metadatos como
<meta> descripción y palabras No
clave
<script> Delimita scripts No
incluidos
<style> Delimita definición de No
estilos
BODY
<body> …
</body>
Todo el contenido de nuestra
página: texto, imágenes,
tablas, enlaces, etc.
Formatos de texto HTML: negrita, cursiva,
tachado, subrayado, superíndice, subíndice y strong
ETIQUETA USO OBSERVACIONES
<b>…</b> Poner texto en negrita Puede ser sustituido por CSS.
<strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS.
<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS.
<em>…</em> Poner texto en cursiva Puede ser sustituido por CSS.
<u>…</u> Poner texto subrayado Deprecated. Sustituir por CSS.
<small>…</small> Poner texto más pequeño Puede ser sustituido por CSS.
<big>…</big> Poner texto más grande Puede ser sustituido por CSS.
<sub>…</sub> Poner texto subíndice Puede ser sustituido por CSS.
<sup>…</sup> Poner texto superíndice Puede ser sustituido por CSS.
Formato de texto
(Ejemplo)
<p>Gracias a estas etiquetas podemos
escribir cualquier expresión con símbolos
matemáticos como esta: H<sub>2</sub>O o
números elevados a potencias
7<sup>3</sup></p>
Gracias a estas etiquetas podemos escribir cualquier
expresión con símbolos matemáticos como esta: H2O o
números elevados a potencias 73
Formato de texto
(Ejemplo)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 01 del curso HTML - [Link]</title>
</head>
<body text="green" bgcolor="white">
<pre>
Ejemplo básico: uso de etiquetas de formato y atributos básicos para la etiqueta body.
<strong>negrita</strong>
<em>Cursiva</em>
<del>Subrayado</del>
<big>Grande</big>
<small>pequeño</small>
Esto es un<sub>subíndice</sub>
Y esto un<sup>superíndice</sup>
</pre>
</body>
</html>
Resultado en el navegador
IMÁGENES. img. src, alt. width,
height. Deprecated: border, align
ATRIBUTO USO OBSERVACIONES
Este atributo indica el nombre del archivo Atributo obligatorio. Si no se
src de imagen (entre comillas) o la URL desde incluye no se mostrará imagen
la que se va a obtener la imagen. alguna.
Permite controlar la alineación de una
imagen con respecto a una línea de texto
align adyacente o a otras imágenes en esa línea. Atributo obsoleto (deprecated).
Sustituir por CSS.
Los valores posibles son los ya conocidos
left, right, middle, top, bottom.
Entre comillas podremos escribir un texto
que se mostrará si la imagen no llega a Atributo requerido, se recomienda
alt cargar, mientras se carga o, cuando incluirlo aunque si no se hace la
visualizando ya la imagen, pasamos el ratón imagen se mostrará.
por encima.
Este atributo podemos ponerlo para
especificar al navegador que muestre la
width imagen con un tamaño específico. Significa
“ancho de la imagen” que vamos a
Opcional. Indicar valor en pixeles.
También se puede indicar con CSS.
representar. Si no se escribe, se carga la
imagen con el tamaño original.
height Al igual que el atributo width, es opcional.
Este atributo indica el alto de la imagen.
Opcional. Indicar valor en pixeles.
También se puede indicar con CSS.
Con border especificamos el ancho del
border borde que rodea la imagen. Si se indica 0 Atributo obsoleto (deprecated).
Sustituir por CSS.
equivale a “sin borde”.
IMÁGENES (ejemplo)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de imágenes - [Link]</title>
</head>
<body>
<img src="[Link]
[Link]" alt="Logotipo APR2">
<img src="[Link]
[Link]" alt="Logotipo APR2" width="50%">
<img src="[Link]
[Link]" alt="Logotipo APR2" width="200px">
<img src="[Link]
[Link]" alt="Logotipo APR2" width="200px" border="5">
</body>
</html>
Resultado en el navegador
Encabezados HTML h1 a h6
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de encabezados -
[Link]</title>
</head>
<body>
<h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
</body>
</html>
Resultado en el navegador
Párrafos. Aplicar estilos
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de párrafos -
[Link]</title>
</head>
<body>
<p style="text-align: center;">Este texto se alineará al
centro</p>
<p style="text-align: right;">Este texto se alineará a la
derecha</p>
<p style="text-align: left;">Este texto se alineará a la
izquierda</p>
</body>
Resultado en el navegador
LA ETIQUETA <PRE> (texto
preformateado)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> -
[Link]</title>
</head>
<body>
Escribo esta línea así
Ejemplo sin
Dejo dos líneas de separación etiqueta <PRE>
y escribo tres más.
</body>
</html>
Resultado en el navegador
LA ETIQUETA <PRE> (texto
preformateado)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de etiqueta <pre> -
[Link]</title>
</head>
<body>
<pre>
Escribo esta línea así
Dejo dos líneas de separación
Ejemplo con
etiqueta <PRE>
y escribo tres más.
</pre>
</body>
</html>
Resultado en el navegador
Comentarios en HTML
<!-- … --> Lo que ponga
<!-- Esto es un comentario --> aquí lo ignora el
navegador
Veamos algunos ejemplos prácticos de comentarios:
<!-- Aquí comienza el cuerpo de la página -->
<!-- Cambiar este párrafo para que se entienda
mejor -->
<!-- Debería añadir más enlaces en esta página -->
Hipervínculos, links o enlaces HTML.
Etiqueta <a>. Atributos href, target y title
Pueden ser internos o externos
Hay que hacer dos
operaciones: Nos llevan a:
•Establecer marcadores otra página web, una
(anclas) donde queremos imagen, un archivo
saltar multimedia, un
•Poner enlaces que salten documento de Microsoft
a los marcadores. Office, un documento PDF,
una dirección de correo
electrónico o un programa
Hipervínculo (Ejemplo)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de marcadores -
[Link]</title>
</head>
<body>
<a href=”[Link]
title=”Esto es un [Link]”>Ir a
[Link]</a>.
</body>
</html>
Hipervínculo (resultado del
ejemplo)
Más etiquetas
Listas. Listas no ordenadas ul, ordenadas ol, de
definiciones. Tag li. Etiquetas dl, dt, dd
Tablas <table>. colspan y rowspan. Unir celdas: horizontal
y vertical. tr, td, th.
Formularios <form>, label. name, value, id. Checkbox,
option button, combobox
Formas de envío de datos en formulario. get y post HTML:
method.
Pedir datos en formularios. input HTML, type y value.
Multilínea textarea. text, password.
checkbox y radio en form HTML. select, option y optgroup.
multiple. Listas desplegables (opciones)
Formularios HTML. Botones: envío submit,
Restablecimiento reset, imagen y contenido (button).
Capas o contenedores. div y span HTML tags. Maquetar
estructura de páginas web