El documento explica cómo el lenguaje HTML permite crear páginas web mediante etiquetas que describen el formato y contenido. HTML es un lenguaje de marcado que usa etiquetas para estructurar texto, imágenes y otros contenidos en la página. Al escribir código HTML y abrirlo en un navegador, este interpreta las etiquetas y muestra la página formateada.

1. EXPLICACIÓN DE EL USO DEL CÓDIGO HTML
PÁGINAS
WEB/SEXTO
SEMESTRE/EMS
AD #33 “LA
ESMERALDA”

2.  El lenguaje HTML es lo que lee un navegador para
mostrarte algo en el Internet.
 Por ejemplo, prendes tu celular, abres tu navegador
(por ejemplo, Google Chrome):

3.  y tecleas en la barra de dirección la siguiente
dirección:
en.wikipedia.org

4.  Tú ves lo siguiente en el navegador:

5. PERO ESO NO OCURRE
MÁGICAMENTE

6. El navegador es un programa que interpreta
documentos como este:

7.  Para que tu veas esto:

8.  Tú ves esto:

9.  Cuando el navegador puede interpreter este documento

10. LENGUAJE HTML
 HTML es un lenguaje que se utiliza fundamentalmente en el desarrollo de páginas web.
 HTML es la sigla de HiperText Markup Language (Lenguaje de Marcación de Hipertexto) es un
lenguaje es se utiliza para establecer el acomodo y contenido de un sitio web, tanto de texto, objetos e
imágenes. Los archivos desarrollados en HTML usan la extensión .htm o .html.
 El lenguaje de HTML funciona por medio de "etiquetas" que describen la apariencia o función del texto
enmarcado.
 La funcionalidad del HTML es tan sencilla que puede ser creado y editado en cualquier editor de textos
básicos, como el Bloc de Notas típico del sistema operativo Windows. También puede editarse en
procesadores de textos, software de diseño web o aplicaciones web directamente, como lo más
convencionales programas de administración de contenido como WordPress.

11.  Si tu abres el bloc de notas:

12.  Escribes lo siguiente:

13.  Lo guardas como archivo
HTML:

14. Y lo abres en un navegador,
verías lo siguiente:

16.  Ahora quieres que esté en negritas el texto, modificas el código
HTML introduciendo las etiquetas <b></b> encerrando el texto
en el lugar correcto

18.  Ahora quieres saludar a los compañeros, modificas el código y
ahora se ve así:

20.  Ahora quieres poner una imagen de un caballo en tu página Web,
cambias el código a que diga lo siguiente:

21.  Y ahora se ve así:

22.  La imagen es muy grande, modifica el código para cambiar el tamaño:

23.  Y termina así:

24.  POR ESO, EL CONOCER EL CÓDIGO HTML NOS PERMITE CREAR PÁGINAS WEB A NUESTRO ANTOJO

25. MAQUETACIÓN WEB
 En HTML, la maquetación web básicamente significa de proveer de estilo y acomodo a los elementos de
nuestra página web para que estos se vean lo más atractivo posible según sean los objetivos, esto
implica un proceso creativo, en el que se definen colores, tamaños, márgenes, rellenos, bordes, hasta
efectos especiales y mucho más.

26. ACTIVIDAD PRÁCTICA
 Como actividad, le pondremos un estilo a un elemento HTML y a un párrafo. ¿Cómo lo haremos?

27. ACTIVIDAD PRÁCTICA
 Escribe el siguiente código en un documento de texto (como WORD o BLOC DE NOTAS) en la
computadora de la escuela (en equipos):

29. ACTIVIDAD PRÁCTICA
 Copia el código en el recuadro inferior de esta página: https://www.aulaclic.org/paginas-
web/b_1_3_4.htm
 Pega el código

30.  Si el código fue correcto, envía el código HTML en WORD o documento de BLOC DE NOTAS al siguiente
correo:
 felipe.morales@cecytec.edu.mx

31. ETIQUETAS HTML MAS
COMUNES Y USADAS

32. ACTIVIDAD PRÁCTICA
 Escribe los siguientes códigos HTML en Word o Bloc de Notas en las computadoras de la escuela, de
preferencia en equipos
1

33. CÓDIGO 1
2

34. CÓDIGO 2
3

35. CÓDIGO 3
4

36. CÓDIGO 4
5

37. CODIGO 5
6

38. COMPROBACIÓN DE ACTIVIDAD PRÁCTICA
 Comprueba que el código HTML es funcional entrando a la siguiente página, desde la computadora de
la escuela (en equipos)
https://www.aulaclic.org/paginas-web/b_1_3_4.htm
Observa el siguiente cuadro en la página enlazada:
7

39. COMPROBACIÓN DE ACTIVIDAD PRÁCTICA
 Pega el primer código en ese primer recuadro:
8

40. COMPROBACIÓN DE ACTIVIDAD PRÁCTICA
 Da clic en el botón “Visualizar el código escrito”:
9

41. COMPROBACIÓN DE ACTIVIDAD PRÁCTICA
 Si lo hiciste correctamente, deberías ver lo siguiente:
10

42. COMPROBACIÓN DE ACTIVIDAD PRÁCTICA
 Repite el proceso anterior con los 4 códigos HTML restantes
 En caso de que los cinco códigos se visualicen correctamente, guarda tu archivo WORD original, y
envíalo al siguiente correo:
felipe.morales@cecytec.edu.mx
Anotando los nombres de los integrantes del equipo
11