1. ¿Qué es la Web?
Una colección de páginas web interconectadas
Accesible mediante un navegador web
Basada en el modelo cliente/servidor
Cada página web es un archivo HTML
2. Definición de HTML
HTML significa Lenguaje de Marcado de Hipertexto
Lenguaje de marcado
Permite dar estructura al contenido de una página
NO es un lenguaje de programación
3. HTML no es un lenguaje de programación
Sin variables
Sin condiciones (if)
Sin bucles (for, while)
HTML describe el contenido; no lo calcula
4. Herramientas necesarias
Un editor de texto: Notepad++, VS Code
Un navegador web: Chrome, Firefox, Edge
No se requiere conexión a internet
5. Reglas HTML importantes
Las etiquetas se abren y se cierran.
El contenido se coloca dentro de las etiquetas.
HTML no distingue entre mayúsculas y minúsculas.
Se toleran errores simples.
DJÁRDEL MICHAA 1
6. Antes de pasar al trabajo práctico
Crea un archivo [Link]
Escribe la estructura HTML completa
Pruébalo en el navegador
Corrige los errores según sea necesario
DJÁRDEL MICHAA 2
PRÁCTICA P1
[Link]ÓN DE LAS BALIZAS PRINCIPALES
<html>: página raíz
<head>: información del navegador
<title>: título de la página
<body>: contenido visible
2. TÍTULOS EN HTML
Las etiquetas <h1> a <h6> se utilizan para definir encabezados.
<h1>: título principal (recomendación: solo uno por página)
<h2> a <h6>: subtítulos jerárquicos. De mayor a menor.
Ejemplos:
o <h1>Application Hypermédia</h1>
o <h2>Introduction</h2>
o <h3>Définition de HTML</h3>
3. LOS PARRAFOS.
La etiqueta `<p>` define un párrafo.
Ejemplo:
<p>HTML est un langage de balisage.</p>
<p>Il permet de structurer le contenu.</p>
Cada párrafo comienza en una línea nueva.
`<br>` se utiliza para poner espacio entre dos de línea (evite su uso excesivo). Solo
pones <br> bajo la primera línea entre las dos quieres separar.
DJÁRDEL MICHAA 3
4. FORMATO DE TEXTO.
<strong>: texto importante
<em>: texto acentuado
<u>: texto subrayado (usar con moderación)
Se pueden usar dentro de p, que es el de los párrafos.
Ejemplo de formato:
<p><strong>Attention :</strong> HTML n’est pas un langage de
programmation.</p>
<p><em>Important</em> pour les débutants.</p>
5. LES 3 TYPES DE LISTES EN HTML
UL: Lista no ordenada (con puntos). Ejemplo: UL:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
OL: Lista ordenada (con numeros). Ejemplo: OL:
<ol>
<li>Installer VS Code</li>
<li>Créer [Link]</li>
<li>Tester dans le navigateur</li>
</ol>
DL: Lista descriptiva (término + definición). Exemple : DL
<dl>
<dt>HTML</dt>
<dd>Langage de structuration des pages web</dd>
<dt>CSS</dt>
DJÁRDEL MICHAA 4
<dd>Mise en forme du contenu</dd>
</dl>
Elige el tipo adecuado según tus necesidades
DJÁRDEL MICHAA 5
[Link] DE ENLACES :
• <a href="[Link]">Présentation</a>
• <a href="[Link] target="_blank">Site OFPPT</a>
• <a href="[Link] un email</a>
Siempre después de poner un enlace, debemos poner el texto que queremos que aparezca
en nuestra web.
1.1. Tipos de enlaces.
Enlace interno: a una página del mismo sitio
Enlace externo: a un sitio web
Enlace de correo electrónico: mailto:
Atributo de destino para abrir en una pestaña nueva
Ejemplo de menú principal:
<hr>
<p>
• <a href="[Link]">Accueil</a> |
• <a href="[Link]">Présentation</a> |
• <a href="[Link]">Contact</a>
</p>
<hr>
1.2. Abrir enlace en otro lugar.
<a target=”_blank” href="[Link] Telegram</a> |
1.3. Para agregar nuestro Fav-icon:
Solo escribes (link:favicon)el mismo programa completará el código y llevará el cursor donde
debes poner el enlace del icono.
Este código debe ser el primero para que HTML lo pueda leer.
DJÁRDEL MICHAA 6
[Link] EN HTML.
<img src="[Link]" alt="Photo de l'étudiant" height="500" width="300">
Para mejorar el tamaño :
Width : ancho
Height : alto
Title : un texto que aparece si llevan el raton a la imagen.
Alt : pones un texto por si el navegador la imagen.
2.1. Si la foto no está en la carpeta del archivo HTML:
Añadimos (../), seguido ponemos la ruta de la imagen:
<img src="../DELITO/ANA LUCIA/ANA LUCIA 0/[Link]" width="300" height="500"
title="comic DELITO"/>
2.2. Poner la imagen de otra web.
Solo copiamos la dirección o enlace de la imagen en el lugar donde ya la ruta de la imagen:
<img
src="[Link]
[Link]" height="500" width="500" title="es el objetivo"/>
DJÁRDEL MICHAA 7
1. ETIQUETAS PRINCIPALES.
<table>: tabla
o <tr>: fila de la tabla. Construye la fila de la tabla.
o <th>: encabezado, escritura en negrita
o <td>: escritura dentro de cada cuadro en la fila
TR solo inida fila, pero el numero de casillas en esa fila lo determinan la cantdad de “th” y
“td” que se ponga dentro del TR.
1.1. Mejores prácticas para la estructuración
Utilice `<thead>` para el encabezado.
Utilice `<tbody>` para el contenido.
Utilice `<caption>` para describir la tabla.
Ejemplo:
• <table border="1">
• <caption>Modules & progression</caption>
• <thead>
• <tr>
• <th>Module</th>
• <th>Compétence</th>
• <th>Etat</th>
• </tr>
• </thead>
• <tbody>
• <tr>
• <td>HTML</td>
• <td>Structure</td>
• <td>En cours</td>
DJÁRDEL MICHAA 8
• </tr>
• </tbody>
</table>
1.2. Combinar celdas (opcional)
colspan: columnas combinadas
rowspan: filas combinadas
Útil para encabezados de sección o agrupaciones
Ejemplo:
• <table border="1">
• <tr>
• <th colspan="2">Planning</th>
• </tr>
• <tr>
• <td rowspan="2">Lundi</td>
• <td>HTML</td>
• </tr>
• <tr>
• <td>TP</td>
• </tr>
</table>
Tabla = datos en filas/columnas
th para encabezado, td para datos
thead/tbody/caption = calidad profesional
DJÁRDEL MICHAA 9
Etiqueta principal: <form>
Todo lo que está abajo se debe hacer dentro de <form></form>, este es lo que designa a
un formulario.
1. ESTRUCTURA BÁSICA DE UN FORMULARIO.
• <form>
• <!-- champs du formulaire -->
• </form>
1.2. Los campos de entrada.
input type="text" : texte
input type="email" : email
input type="password" : mot de passe
input type="radio"
input type= “checkbox” : choix
button (solo decoración)
submit (envia datos)
color.
Range.
Nb: podemos poner (input:….tipo de) nos completa lo importante
Ejemplo:
• <input type="text" name="nom">
• <input type="email" name="email">
• <input type="password" name="mdp">
Name; sirve para identificar cada input, es como ponerle nombre a un input.
Id; es para asociarlo a la etiqueta <label For= “id”>””<>
Placeholder; se puede poner en lugar de value. Con value primero se debe borrar,
con placeholder no.
DJÁRDEL MICHAA 10
Size; es para cambiar el tamaño.
1.3. Área de texto y selección.
Select (muestra opciones)
Option (las opciones)
<textarea name="message"></textarea>
<select name="sujet">
<option>Stage</option>
<option>Projet</option>
</select>
2. LA ETIQUETA.
La etiqueta, asociado mediante for / id.
2.1. Etiqueta + entrada (input).
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
2.2. Atributos.
<input type="email" name="email" required placeholder="ex: nom@[Link]">
3. BOTONES.
• button type="submit" : enviar
• button type="reset" : reiniciar
DJÁRDEL MICHAA 11
Ejemplo:
• <button type="submit">Enviar</button>
• <button type="reset">Anular</button>
4. ¿Cuándo se debe utilizar un campo de selección?
Cuando la respuesta no es texto libre
Cuando se desea guiar al usuario
Cuando se desea limitar los errores de entrada
DJÁRDEL MICHAA 12
Utilice header, nav, main, section, footer.
1. PROBLEMA SIN HTML SEMÁNTICO:
Páginas difíciles de leer
Código difícil de entender
Problemas de accesibilidad
Mala organización
2. ¿QUÉ ES EL HTML SEMÁNTICO?
Etiquetas significativas
Estructura de página clara
Comprensible para humanos y máquinas
3. ETIQUETAS SEMÁNTICAS PRINCIPALES
header: encabezado: <header>...</header>
Contiene el título del sitio
Puede contener un logotipo o eslogan
No es obligatorio, debe ser único
nav: navegación: <nav>...</nav>
Enlaces de navegación
Menú principal
Facilita la navegación
main: contenido principal:
<main>
<section>...</section>
DJÁRDEL MICHAA 13
</main>
Un único elemento de contenido principal
Solo un elemento <main> por página
No contiene encabezado ni pie de página
section: sección de contenido: arriba
Agrupa el contenido organizado lógicamente.
Suele tener un título.
Se utiliza en el texto principal.
footer: pie de página: <footer>...</footer>
Información final
Copyright, contacto
Pie de página
Div:
div: sin sentido
Etiquetas semánticas: significativas
Código más legible
DJÁRDEL MICHAA 14
1. <fieldset>
Etiqueta HTML utilizada en un formulario
2. <legend>
Título del conjunto de campos. Es el que crea ese
cuadro superior como marcador de territorio.
<form>
<fieldset>
<legend>Informations personnelles</legend>
<label>Nom :</label>
<input type="text" name="nom">
</fieldset>
</form>
DJÁRDEL MICHAA 15
[Link]
<iframe> muestra una página dentro de otra página.
Ejemplos: vídeo de YouTube, Google Maps, sitio web interno.
Algunos sitios web bloquean la inserción de iframes.
• <iframe src="[Link]" width="600" height="350"></iframe>
1.1. Atributos importantes.
• title: accessibilité (important !)
• allowfullscreen: pantalla completa videos
<iframe
• width="560" height="315"
• src="[Link]
• title="Vidéo YouTube"
• allowfullscreen>
</iframe>
[Link].
<audio controls>
• <source src="assets/media/audio.mp3" type="audio/mpeg">
• Votre navigateur ne supporte pas l'audio.
</audio>
[Link].
<video controls width="560">
• <source src="assets/media/video.mp4" type="video/mp4">
• Votre navigateur ne supporte pas la vidéo.
</video>
DJÁRDEL MICHAA 16
[Link] FUENTES (SOURCES)
<video controls width="560">
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
</video>
DJÁRDEL MICHAA 17
1.<META>
Adapta la visualización para móviles (viewport)
Exemple complet de <head>
id: identificador único
class: reutilizable
title: información adicional
lang: idioma del documento
[Link]
DJÁRDEL MICHAA 18