UNIVERSIDAD TECNOLÓGICA DE PANAMÁ

FACULTAD DE INGENIERÍA DE SISTEMAS COMPUTACIONALES

DESARROLLO DE SOFTWARE ORIENTADO A OBJETOS

Contenido
HTML ................................................................................................................................................... 1

Funcionamiento de Páginas Web.................................................................................................... 1

Características ............................................................................................................................. 1

Estructura .................................................................................................................................... 2

Qué es para nosotros una página web ........................................................................................ 2

Tipos de Páginas Web ..................................................................................................................... 2

Conceptos Básicos de HTML ........................................................................................................... 3

HTML ........................................................................................................................................... 3

HTTP ............................................................................................................................................ 3

El uso de HTML ............................................................................................................................ 4

Un documento HTML .................................................................................................................. 5

Qué son las etiquetas HTML........................................................................................................ 5

Herramientas............................................................................................................................... 5

HTML5 ............................................................................................................................................. 6

Estructura básica de un documento html ................................................................................... 6

Descripción de las primeras etiquetas ........................................................................................ 7

Estructura básica de HTML5 ........................................................................................................ 8

Otras Etiquetas .......................................................................................................................... 10

ii
HTML

Funcionamiento de Páginas Web

Una página web, o página electrónica, página

digital, o ciberpágina es un documento o
información electrónica capaz de contener
texto, sonido, video, programas, enlaces,
imágenes y muchas otras cosas, adaptada para
la llamada World Wide Web (WWW) y que
puede ser accedida mediante un navegador
web.

Esta información se encuentra generalmente en formato HTML, y puede proporcionar acceso a

otras páginas web mediante enlaces de hipertexto.

Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El
servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en
una Intranet Corporativa, o puede publicar las páginas en la World Wide Web.

El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el
protocolo de transferencia de hipertexto (HTTP).

Características
Una página web está compuesta principalmente por:
• Información de un tema factible (solo texto y/o módulos multimedia).
• Hiperenlaces.
• Puede contener o asociar hoja de estilo, datos de estilo para especificar cómo visualizarse.
• Puede tener aplicaciones embebidas para así permitir interacción.
1
Estructura

Algunos organismos, en especial el World Wide Web Consortium (W3C),

suele establecer directivas con la intención de normalizar el diseño, y
para así facilitar y simplificar la visualización e interpretación del
contenido

Qué es para nosotros una página web

Podemos decir que una página web es una tarjeta de presentación digital. Una forma de
comunicar ideas, pensamientos, conocimientos, información o teorías.

Tipos de Páginas Web

El contenido de una página web puede ser de los siguientes tipos:

• Estático
• Dinámico

Páginas estáticas
En el caso de las páginas estáticas, al acceder
el usuario, el servidor descarga simplemente
un simple fichero con un contenido codificado
en HTML que se visualiza a continuación en su
navegador.
El principal problema de estas páginas es que
no permiten la interacción con el usuario,
equivalente a una colección de documentos
invariables, como un libro, en la web.

2
Páginas dinámicas
Las páginas dinámicas que se generan al
momento de la visualización. No son un simple
documento HTML, sino que se están creadas
en algún lenguaje interpretado. Por ejemplo
utilizando PHP.

Conceptos Básicos de HTML

HTML

HTML corresponde a las siglas de “Hyper Text Markup Language”, es un lenguaje que pertenece al
grupo de los lenguajes de marcado y es utilizado para la elaboración de páginas web.

HTML no es un lenguaje de programación ya que no cuenta con funciones aritméticas, variables o

estructuras de control propias de los lenguajes de programación.

HTML genera páginas web estáticas. No obstante, podemos utilizar HTML con diversos lenguajes
de programación para generar páginas web dinámicas.

Por lo tanto, podemos definir HTML como un lenguaje de marcado que nos permite indicar la
estructura de nuestro documento mediante etiquetas. Este lenguaje nos ofrece una gran
adaptabilidad, una estructuración lógica y es fácil de interpretar tanto por humanos como por
máquinas.

HTTP

HTTP es un protocolo de servicio utilizado para entregar contenido. El comienzo de un URL en su

navegador Web (suponiendo que el navegador muestre el URL completo) muy probablemente

3
comenzará con http://. Esta parte del URL le dice al navegador qué tipo de protocolo usar cuando
esté haciendo la solicitud al servidor Web.

Cuando el servidor recibe una solicitud de documento, es probable que ese documento esté
escrito o sea convertido a HTML. El documento HTML es lo que se envía de regreso al navegador
que hace la solicitud.

HTTP y HTML

La combinación de HTTP y HTML ofrece una navegación rápida y fácil por el contenido en Internet,
al permitirle simplemente hacer clic en los enlaces de texto para navegar entre documentos.

EVOLUCIÓN DEL HTML

1997 1999 2001 2002 2008

Nace HTML4 Nace XHTML 1.0 Se publica la Se prepara un NaceHTML5
publicado por el que extiende nueva versión de borrador para como el sucesor
W3C como HTML4 XHTML, la 1.1 una nueva de HTML4 y
estándar de versión de XHTML 1.1
diseño web. XHTML

El Uso de HTML

HTML nos permite describir la estructura básica de una página y organizar la forma en que se
mostrará su contenido, también permite establecer enlaces (links) hacia otras páginas o
documentos.

HTML es un lenguaje de marcado descriptivo que se escribe en forma de etiquetas para definir la
estructura de una página web y su contenido como texto, imágenes, entre otros, de modo que
HTML es el encargado de describir (hasta cierto punto) la apariencia que tendrá la página web.

4
Un documento HTML

Para desarrollar una página web en HTML es necesario crear un documento HTML. Básicamente
un documento HTML es un archivo de texto que tienen la extensión .html. Un documento HTML se
puede generar con cualquier editor de textos simple como el bloc de notas de Windows o Gedit de
Linux.

En la actualidad contamos con varios editores de texto como lo son: Sublime Text, Notepad++,
etc.

Qué son las etiquetas HTML

Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que se utilizan
para escribir código HTML, en HTML existen etiquetas de apertura y etiquetas de cierre, tienen la
forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la
etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para
distintos usos.

Herramientas

En el mercado contamos varios editores que podemos utilizar al momento de realizar nuestras
páginas Web.

Listaremos los más utilizados al momento:

✓ Atom
✓ Notepad++
✓ Sublime Text
✓ Adobe Dreamweaver CC
✓ Visual Studio Code

5
HTML5

Es la quinta revisión importante del lenguaje HTML. Su principal objetivo es mejorar el lenguaje
añadiendo soporte para las últimas tecnologías multimedia, así como manteniendo el código leíble
al humano y entendible para la máquina y dispositivos (navegadores, etc.).

Estructura básica de un documento html

Un documento HTML posee una estructura básica que contiene una variedad de etiquetas que
definen la estructura de la página resultante, dichas etiquetas deben estar adecuadamente
estructuradas para que la pagina funcione sin problemas.

6
Descripción de las primeras etiquetas

<html> </html>
La etiqueta <html> sirve para indicar que el documento es un documento HTML y el
navegador lo interpretara como tal. Todo el contenido de nuestra página irá
ordenadamente dentro de la etiqueta <html> y de hecho, es lo primero que debemos
escribir en nuestro documento.

<head> </head>
El elemento HTML <head> provee información general (metadatos) acerca del documento,
incluyendo su título y enlaces a scripts y hojas de estilos.

<title> </title>
El elemento title provee un título o nombre para el documento. Este título debe
proporcionar una corta pero precisa descripción del contenido del documento o su
propósito.

<body> </body>
El elemento body es el contenedor para todos los aspectos representables de un
documento. Este es el lugar donde los autores arrojan todos los elementos y contenidos
que sus visitantes alcanzarán. El elemento body es parte de la estructura básica de un
documento.

7
Estructura básica de HTML5

<!DOCTYPE html>
En primer lugar, tenemos que indicar el tipo de documento que estamos creando.
En HTML5 esto es muy sencillo:

<!DOCTYPE html>

Esta línea deberá ser la primera línea del documento, sin espacios ni líneas previas. Esto es
una manera de activar el modo estándar y forzar a los navegadores a interpretar el HTML5
siempre que sea posible, o a ignorarlo cuando no lo sea.

8
Trabajando el body

<header> </header>
En la parte superior, descrito como header, se encuentra el espacio donde
usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web
o la página.

<nav> </nav>
Debajo del header, podemos ver la Barra de Navegación en la cual casi todos los
desarrolladores ofrecen un menú o lista de enlaces con el propósito de facilitar la
navegación a través del sitio.
Los usuarios son guiados desde esta barra hacia las diferentes páginas o
documentos, normalmente pertenecientes al mismo sitio web.

9
 <section> </section>
El contenido más relevante de una página web se encuentra, en casi todo diseño,
ubicado en su centro.
Esta sección presenta información y enlaces valiosos. La mayoría de las veces es
dividida en varias filas y columnas.

<aside> </aside>
En la Barra Lateral podría mostrar una lista de enlaces apuntando hacia cada uno
se esos ítems.

<footer> </footer>
En la base de un diseño web clásico siempre nos encontramos con una barra más
que aquí llamamos Footer o Barra Institucional.
Esta es el área en donde normalmente se muestra información acerca del sitio
web, el autor o la empresa, además de algunos enlaces con respecto a reglas,
términos y condiciones y toda información adicional que el desarrollador
considere importante compartir.

Otras Etiquetas

<p> </p>
El elemento p representa un párrafo. Se considera párrafo a un bloque de texto
compuesto de una o más oraciones que se refieren a un tema en particular y que
normalmente se separa de otros por un espacio en blanco.

<br>
El elemento br inserta un quiebre de línea, causando que el texto continúe en una línea
nueva.

<h1> </h1>
El elemento h1 representa un encabezado de nivel 1. Los encabezados los tenemos desde
h1 a h6 son títulos que definen secciones implícitas en el documento y organizan el
contenido en una estructura jerárquica.
10
<a> </a>
La etiqueta <a> es uno de los elementos más importantes del lenguaje HTML, esta
etiqueta sirve para convertir texto normal en hipertexto, es decir, sirve para crear enlaces
(links).
Con la etiqueta <a> pueden realizarse enlaces hacia documentos externos de cualquier
tipo, generalmente es usada para definir enlaces hacia otras páginas web pero su uso es
más amplio y no necesariamente se tiene que realizar un enlace hacia un documento
externo, pues la etiqueta <a> permite realizar enlaces internos dentro de un mismo
documento, es decir, enlazar un texto hacia una parte específica del mismo documento
que lo incluye y de este modo poder navegar dentro del documento.
Atributo: href
Descripción: Especifica la dirección destino del enlace.
Valor: URL o ubicación relativa.
Ejemplo:
Ir a la página de Youtube
<a href="http://www.youtube.com">Ir a youtube</a>

<hr>
Representa un cambio de tema entre párrafos.

<! -- Comentario -->

Los comentarios en HTML son muy fáciles de poner. Es como una etiqueta que tiene un
inicio y un fin. Todo el texto que pongas dentro está comentado, es decir, no aparecerá en
la página. Dentro de un comentario puedes meter texto o código HTML, como etiquetas.
El comentario empieza por <!-- y finaliza por --> Todo lo que pongas entre esas etiquetas
está comentado.

11