2

APUNTES DE: JULIO 2022

¿Qué es HTML?.....................................................................05
Creación de un archivo HTML………………………………05
Sintaxis de Etiquetas…………………………………………...06
Estructura de un archivo HTML……………………………...06
Tipos de Elementos en las Etiquetas……………………….07
Texto……………………………………………………………...08
Listas………………………………………………………………09
Enlaces…………………………………………………………..10
Multimedia………………………………………………………11
Metadatos………………………………………………………12
Tablas…………………………………………………………….13
Iconos de Página………………………………………………14
Poner CSS y JavaScript……………………………………….14
Maquetación de una Página……………………………….15
Formularios………………………………………………………16
Notas……………………………………………………………..21

3
4
HTML (HyperText Markup Language) es el componente más básico de la Web.
Define el significado y la estructura del contenido web.

Además de HTML, generalmente se utilizan otras tecnologías para describir la

apariencia/presentación de una página web (CSS) o la
funcionalidad/comportamiento (JavaScript).

index.html El primer archivo de una página que

será localizada por el servidor es el
archivo INDEX.

nombre formato

5
 <etiqueta atributo=””> </etiqueta>

Las etiquetas pueden ser de dos tipos:

“Etiquetas con contenido”: <h1> </h1>
“Etiquetas sin contenido”: <br>

6
Existen dos tipos de elementos en las etiquetas: etiqueta de línea y etiqueta de
bloque.

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario

en horizontal, y permite que otro elemento se coloque a su lado. En cambio,
una etiqueta de bloque , ocupa todo el ancho disponible y no permite que
otro elemento se coloque a su lado (aunque aparente tener lugar suficiente).

Además, existe un tipo de elemento

externo a estos elementos. Que sirve
para la estructuración de las páginas,
donde este contendrá información que
tenga escrita en su interior. Se trata de la
etiqueta <div>.

7
Existen varias etiquetas para redactar la información de la página web. Las
principales etiquetas de texto son:

<p> Sirve para escribir párrafos

<h1> Sirve para escribir títulos (su rango es desde h1 a h6)

<b> Se pondrá en negrita la información que contenga.

<i> Se pondrá en cursiva la información que contenga.

<del> Se pondrá en tachado la información que contenga.

<small> Se pondrá en pequeño la información que contenga.

En el siguiente ejemplo veremos como se usarían cada una de las etiquetas:

8
Las listas nos permiten crear
conjuntos de elementos en forma
de lista dentro de una página,
todos los cuales irán precedidos,
generalmente, por un guión o
número. Los tipos de listas son
los siguientes: Listas ordenadas
y Listas desordenadas

En los siguientes ejemplos

veremos cómo hacer una lista de
cada tipo:

También, se puede poner en una lista ordenada en su interior una lista

desordenada, y viceversa. Como en este ejemplo:

9
Los enlaces se marcan con la etiqueta <a> y el atributo principal
es href="" donde se escribe la ubicación del archivo de destino que puede
estar en la misma carpeta que el archivo que lo está llamando, en otra carpeta
del mismo sitio o en otro sitio web .

<a href=”ruta.html”> </a>

Existen dos tipos de rutas: rutas absolutas y rutas relativas.
Las rutas absolutas son las que definen la ubicación completa de un archivo en
la web, mientras que las rutas relativas, definen la ubicación del archivo de
destino en relación a la ubicación del archivo que lo está llamando.
En las rutas relativas, para acceder a un carpeta o archivo superior nuestra es
mediante (../). En este ejemplo de rutas relativas, donde nos situamos en
index.html, veremos cómo se interactuaría para acceder a los diferentes
archivos.

Para acceder a archivo2.html:

<a href=”archivo2.html”> </a>

Para acceder a archivo1.html:

<a href=”../carpeta2/archivo1.html”> </a>

Además, si queremos que al acceder a un enlace se nos abra en una venta

aparte, se pondría en la etiqueta el atributo target=”_BLANK”

10
En nuestra página web podemos poner recursos multimedia tales como:
imágenes, videos y audios.

IMÁGENES
<img src=”ruta.formato”>

VIDEOS
<video src=”ruta.formato” controls> </video>

AUDIOS
<audio src=”ruta.formato” controls> </audio>

Además están los atributos alt=”” y title=””. Donde alt, es muy

importante ponerlo, porque en caso de que ocurra un error al introducir el archivo
multimedia, saldrá la información que tenga contenido. Mientras que en title,
cuando pasemos el ratón por encima del archivo, se nos mostrará lo que tenga
contenido.

11
Los metadatos son “datos acerca de los datos” y sirven para suministrar
información sobre los datos producidos. Los meta se sitúan en el HEAD. Tipos
de meta:

El archivo está con la codificación alfanúmerica UFT-8.

<meta charset=”utf-8”>
El navegador buscará las palabras seleccionadas para aparecer más
arriba.

<meta name=”keyboards” content=”ob1,ob2,obX”>

El navegador buscará la descripción seleccionada para aparecer más
arriba.

<meta name=”description” content=”Una descripción”>

El archivo muestra el autor.

<meta name=”author” content=”nombre Autor”>

El archivo muestra el copyright.

<meta name=”copyright” content=”Facebook”>

El archivo considera el ancho completo de la página (sigue ancho del
dispositivo que se encuentra el usuario).

<meta name=”viewport” content=”width=device-width,initial-

scale=1.0”>

12
Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas.
Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de
datos que indiquen algún tipo de conexión. Las etiquetas básicas de las tablas
son: <table>,<tr>,<th> Y <td>.

Un ejemplo de una tabla sería el siguiente (el atributo de la etiqueta “table”,

sería mejor hacerlo mediante CSS).

13
Los iconos en las páginas web es algo importante para que de una manera u
otra se pueda identificar nuestra página web. De normal, se nos mostraría así:

Nos situaremos en el <head>. Y escribiremos lo siguiente:

<link rel=”icon” href=”ruta.ico”>

(“Es muy importante que el formato del icono esté en formato .ico”)
De ejemplo, pondremos el icono de HTML en nuestra página de la siguiente
manera:

Hecho esto, el resultado sería el siguiente:

e:

Como decíamos anteriormente una página consta principalmente de HTML, CSS

y JavaScript. Para vincular cada uno de estos a HTML, sería de esta forma:

Para poner un archivo CSS.

<link href=”archivo.css” rel=”stylesheet” type=”text/css”>

Para poner un archivo JavaScript.

<script src=”archivo.js”> </script>

14
Las páginas web constan de varios elementos, para que así exista una correcta
estructura en la página. Los elementos que nos podemos encontrar son:

<header> Se trata del encabezado de la página.

<nav> Se trata de la zona de búsqueda o navegación

(menú), suele estar junto al header.

<article> Se muestra la información de la página.

<section> Son las distintas secciones que tendría el article.

<aside> Sería la contraparte del article, donde se mostraría

información secundaria.

<footer> Se trata del pie de página, de la página web.

Un ejemplo visual de como podría ser una maquetación de una página web:

15
Un formulario se podría considera la pieza importante en HTML, es un conjunto
de controles (botones, cajas de texto, casillas de verificación, botones radio, etc)
que permiten al usuario introducir datos y enviarlos al servidor web para su
procesamiento.

La etiqueta que delimita un formulario es la etiqueta <form>, que estos

pueden tener los atributos action (contiene el nombre del agente que procesará
los datos remitidos al servido) y method (que define la manera de enviar los
datos al servidor).
Las etiquetas que crean controles en los formularios más importantes son:
<input> y <button>.
Algunos de los atributos comunes de los controles son: type (indica tipo de
control), name (identifica el control), value (establece un valor inicial al control),
size (establece longitud de los controles), maxlength y minlength (establece
longitud máxima y mínima), y finalmente el atributo alt, que se mencionó
anteriormente.
El atributo TYPE puede albergar demasiados tipos de control como:
SUBMIT: Envía los datos al servidor.

RESET: Reestablece los valores iniciales del formulario

16
 TEXT: Permite escribir texto.

PASSWORD: Permite escribir texto en forma de contraseña.

NUMBER: Solo permite escribir específicamente números. Se les puede

asignar los atributos min o max, para establecer que tiene que ser un número
mínimo o máximo al indicado. El atributo step sirve para establecer que ese
número tiene que ser múltiplo del indicado.

DATE: Permite poner una fecha (días, meses, años).

17
 TIME: Permite poner una hora (horas, minutos).

CHECKBOX: Estas casillas sólo se envían si se han marcado. El atributo

value contiene el valor que envía el formulario si está marcado. Si ponemos el
atributo checked, la casilla estará marcada ya inicialmente.

RADIO: Los botones radio que tienen el mismo atributo name forman un grupo,
es decir, qué si se marca uno de ellos, se desmarcan automáticamente el resto.

18
 COLOR: Permite elegir un color. Si se quiere especificar un color inicial, se
pondrá en el atributo value en formato hexadecimal (#ff0000).

RANGE: Permite crear un rango entre dos valores que cada uno es un mínimo
y un máximo. Tiene los mismos atributos del TYPE NUMBER (min, max y step)

Como decíamos existen varías etiquetas para los formularios como el input y
el button. Otra etiqueta que podemos encontrar es el <textarea>.
Las cajas de texto de varias líneas se crean mediante la etiqueta. Los atributos
obligatorios rows y cols establecen el número de filas y columnas iniciales de
la caja, aunque los navegadores permiten modificarlo arrastrando la esquina
inferior derecha.

19
Para crear un menú o una lista desplegable es mediante la etiquta
<select> que este contendrá las diferentes opciones <option>.

Existe los atributos value (manda el valor deseado) y el atributo selected (que
es la opción seleccionada predeterminadamente).

20
21
22
23
24