LABORATORIO DE

PROGRAMACIÓN WEB
Práctica 01
Investigación sobre HTML
Nombre: Jose Luis Vidaña Labrador
Matricula: 1523962
Carrera: Ingeniero Administrador de Sistemas
Plan de estudios: 401
Semestre: 6to
Hora Clase: Jueves N3
Brigada: 428
Maestra: M.A. Lilia Lizeth Santos López
Semestre: Enero-Junio 2022

1
Índice
Introducción……………………………………………………………………………3

¿Qué es HTML?………………………………………………………………………4

Anatomía de un elemento HTML ………………………………………………….5

Estructura de una página HTML………….…………………………………………6

Cabecera y Cuerpo……………………………………………………....................7

Etiquetas HTML básicas……………………………………………………….…….8

CSS (Hojas de estilos)……………………………………………………………….9

Conclusiones………………………………………………………………………….10

Referencias……………………………………………………………………………11

2
Introducción

Dentro de la programación existen diferentes formas y estilos de programar, desde

el hecho de programar una página simple y sencilla que muestre pequeños
mensajes de bienvenida, hasta diseñar una página altamente desarrollada y capaz
de gestionarse por sí misma y tener un uso 24/7 debido a su gran complejidad en el
lenguaje en el cual se programan. Si bien la programación web es un tema que es
bastante extenso, podemos iniciar en esta travesía hablando del lenguaje de
marcado que es HTML, ¿Cómo funciona?, ¿en qué ámbitos se utiliza?, ¿para qué
sirve?, su historia, el tipo de etiquetas que maneja este lenguaje de marcado, etc.
Entremos de lleno a este tema para ver qué cosas podemos descubrir.

3
¿Qué es HTML?

HTML es un lenguaje de marcado (etiquetado) de hipertexto o “HyperText Markup

Language” por el desarrollo de sus iniciales en inglés, básicamente este lenguaje
se escribe en su totalidad con elementos, estos elementos están constituidos por
etiquetas, contenido y atributos, que explicaremos de una manera más detallada en
algunas líneas más abajo.

HTML es un lenguaje que interpreta el navegador web para mostrar los sitios o
aplicaciones web tal y como estamos acostumbrados.

Antecedentes

La primera versión de HTML fue publicada por un científico de la computación

británico llamado Timohty John Berners-Lee en 1991 y contenía inicialmente pocos
elementos conocido como el padre de la web, es fundador de la W3C (World Wide
Web Consortium), creador del protocolo HTTP (HyperText Transfer Protocol),
creador de la URL (Uniform Resource Locator) y creador del primer navegador web.

Sobre la historia de HTML, en 1995 se publicó el estándar HTML 2.0, el primer

estándar oficial de HTML. En 1997 se publicó la versión HTML 3.2 y es la primera
especificación HTML publicada por la W3C.

En 1999 se publicó la versión HTML 4.1 y en el 2014 se publica la versión definitiva

de HTML 5. HTML es un lenguaje formado por elementos que nos ayudan a
estructurar y dar significado a las partes de un documento HTML, estos elementos
a su vez están conformados por contenido, etiquetas y atributos.

Las etiquetas nos sirven para delimitar el

inicio y el fin de un elemento, como en el
ejemplo, vemos un elemento que utiliza la
etiqueta de apertura para indicar el inicio
de un párrafo, y la etiqueta de cierre para
indicar el fin de un párrafo. El contenido de
un elemento pueden ser caracteres,
comentarios u otro elemento delimitado
dentro de las etiquetas de inicio y de cierre,
en el ejemplo pueden ver que el contenido
es: “Contenido del elemento p”.

Sobre los atributos de un elemento debes

saber que siempre se expresan en la etiqueta de inicio y tienen un nombre (Ej. id) y
un valor (Ej. parrafo), en el ejemplo vemos el uso del atributo id con su respectivo
valor.

4
Anatomía de un elemento HTML

Las partes principales del elemento son:

La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p),
encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde
comienza o empieza a tener efecto el elemento —en este caso, dónde es el
comienzo del párrafo—.

La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el
elemento —en este caso dónde termina el párrafo—.

El contenido: este es el contenido del elemento, que en este caso es sólo texto.

El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido

equivale al elemento.

Los elementos pueden también tener atributos, que se ven así:

Un atributo debe tener siempre:

Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento
ya posee uno o más atributos).

El nombre del atributo, seguido por un signo de igual (=).

Comillas de apertura y de cierre, encerrando el valor del atributo.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca

en la de cierre.

5
Estructura de una página HTML

Estructura básica

Cada página comienza con: < HTML > .

 A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
 Después, el comando < BODY >, que indica el comienzo del cuerpo de la
página. Las instrucciones HTML se escribirán a continuación, y finalizarán
con < /BODY >.
 La página acabará con < /HTML > .

Es decir:

<HTML>

<HEAD>

Definiciones de la cabecera

</HEAD>

<BODY>

Instrucciones HTML

</BODY>

</HTML>

6
Cabecera

La cabecera de un documento está delimitada por las etiquetas < HEAD > y
</HEAD > Sus componentes son opcionales. El más importante es <TITLE>, que
permite escribir el título del documento. El título no se muestra en la página, sino en
la parte superior de la ventana del visualizador, como identificador en
los bookmarks y en la history list. Se utiliza de la siguiente forma:

<HEAD>

<TITLE>Título del documento HTML</TITLE>

</HEAD>

Cuerpo

Es la parte delimitada por <BODY> y </BODY>. Puede llevar los siguientes

atributos:

BACKGROUND="imagen": define el fondo. Más adelante veremos más

sobre imágenes.

BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o

si ésta imagen no puede obtenerse.. Más adelante veremos más sobre colores. Por
ahora nos basta saber que para los colores básicos se puede utilizar su nombre en
inglés: white, blue, red, green ...

TEXT="######": color del texto. Por defecto será negro.

LINK="######": color de los links. Por defecto será azul.

VLINK="######": color de los links visitados. Por defecto será violeta.

7
Etiquetas HTML básicas

En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación

de varios elementos. A pesar de que algunos ordenadores nuevos ya no admiten
algunas de estas, es importante tener constancia de la existencia de ellas.

La mayoría de páginas web tienen varias páginas HTML diferentes. Los documentos
HTML son archivos que acaban con .html o .htm. Un navegador lee el archivo y
muestra su contenido para los internautas puedan verlo.

Hay una serie de etiquetas que son las más usadas para crear cualquier documento
HTML, a continuación las explicamos:

<body> para el contenido

<head> para información sobre el documento

<div> división dentro del contenido

<a> para enlaces

<strong> para poner el texto en negrita

<br> para saltos de línea

<H1>…<H6> para títulos dentro del contenido

<img> para añadir imágenes al documento

<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos
dentro de la lista

<p> para parágrafos

<span> para estilos de una parte del texto

8
CSS (Hojas de estilos)

CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en

cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de
un documento estructurado escrito en un lenguaje de marcado.

Es muy usado para establecer el diseño visual de los documentos web, e interfaces
de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a
cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Junto con
HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear
páginas visualmente atractivas, interfaces de usuario para aplicaciones
web y GUIs para muchas aplicaciones móviles (como Firefox OS).

CSS está diseñado principalmente para marcar la separación del contenido del
documento y la forma de presentación de este, características tales como las capas
o layouts, los colores y las fuentes.

Esta separación busca mejorar la accesibilidad del documento, proveer más

flexibilidad y control en la especificación de características presentacionales,
permitir que varios documentos HTML compartan un mismo estilo usando una sola
hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición
de código en la estructura del documento

9
Conclusiones

HTML sin duda es dinámico tanto en el diseño de páginas como en la comprensión

de su contenido al realizar este tipo de acciones, es un pilar dentro de cada página
web que nosotros vemos y/o navegamos día a día y aunque quizá no nos demos
cuenta, todas la paginas de la internet tienen detrás de lo que vemos todo estas
estructuras, etiquetas y terminologías para que puedan funcionar tal y como las
conocemos. No es de extrañarse que cada día haya más personas que se interesan
por aprender HTML, ya se para conocimiento académico, autodidacta e inclusive
para poder gestionar algún negocio y que requiera de una página web, tanto
alumnos como personas que les interese aprender pueden utilizar HTML como una
herramienta poderosa que les ayude a desarrollar habilidades de esta índole.
Conociendo ya un poco del gran mundo que es HTML, es factible considerar que
los próximos trabajos a realizar se hagan con una mayor comprensión y
entendimiento por el hecho de haber conocido un poco del cómo funciona HTML.

10
Referencias

Colaboradores de Wikipedia. (2022, 4 enero). CSS. Wikipedia, la enciclopedia libre.

Recuperado 11 de febrero de 2022, de https://es.wikipedia.org/wiki/CSS

Conceptos básicos de HTML - Aprende sobre desarrollo web | MDN. (2022, 11 febrero).

Developer. Recuperado 11 de febrero de 2022, de

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_

basics

Estructura de una página HTML. (s. f.). Fpsalmon. Recuperado 11 de febrero de 2022, de

http://fpsalmon.usc.es/genp/doc/cursos/html/estructura.html#:%7E:text=Estructura

%20b%C3%A1sica,finalizar%C3%A1n%20con%20.

Idevik, X. (2021, 25 octubre). ¿Qué es una etiqueta HTML y cuáles son las más

importantes? Thinking for Innovation. Recuperado 11 de febrero de 2022, de

https://www.iebschool.com/blog/que-es-etiqueta-html-analitica-usabilidad/

¿Qué es HTML? (2016, 6 mayo). DevCode Tutoriales. Recuperado 11 de febrero de 2022,

de https://devcode.la/blog/que-es-html/

11