PDF de programación - Programación Web Estático

Carlos Roberto Jaimez González

Programación de Web Estático

Carlos Roberto Jaimez González

Programación de Web Estático

Esta investigación fue dictaminada por pares académicos

Clasificación Dewey: 005.72 J35
Clasificación LC: QA76.76.H94 J35
Jaimez González, Carlos Roberto
Programación de web estático / Carlos Roberto Jaimez González -- México : UAM, Unidad Cuajimalpa, 2015. -- 1a ed.
128 p. : il. col. ; 24 cm. -- (Una década de la Unidad Cuajimalpa de la Universidad Autónoma Metropolitana)
ISBN de la Colección Una Década: 978-607-28-0452-4
ISBN de este libro: 978-607-28-0469-2
1. HTML (Lenguaje de marcado de hipertexto) – Libros de texto 2. Desarrollo de sitios web – Libros de texto 3. Lenguajes de
programación (Computadoras) – Libros de texto
4. Universidad Autónoma Metropolitana – Unidad Cuajimalpa – Planes de estudio 5. Planes de estudio universitario – México

UNIVERSIDAD AUTÓNOMA METROPOLITANA

Dr. Salvador Vega y León

Rector General

M. en C. Q. Norberto Manjarrez Álvarez

Secretario General

Dr. Eduardo Abel Peñalosa Castro
Rector de la Unidad Cuajimalpa

Dra. Caridad García Hernández

Secretaria de la Unidad

D.R. © 2015 UNIVERSIDAD AUTÓNOMA METROPOLITANA

Universidad Autónoma Metropolitana Unidad Cuajimalpa

.Avenida Vasco de Quiroga 4871,

Col. Santa Fe Cuajimalpa. Delegación Cuajimalpa de Morelos,

C.P. 05348, México D.F. ( Tel.: 5814 6500)

www.cua.uam.mx

ISBN de la ColeCCión Una déCada: 978-607-28-0452-4

iSBn de eSte liBro: 978-607-28-0469-2

Diseño de portada: Ricardo López Gómez.

Formación y edición: Juan Carlos Rosas Ramírez.

CONTENIDO

Agradecimientos

Introducción

Capítulo 1. Introducción a HTML

Documentos HTML
Encabezados
Párrafos, saltos de línea, reglas horizontales y comentarios
Resumen de etiquetas

Capítulo 2. Formato de texto y entidades
Texto en negritas, cursivas y subrayado
Texto grande, pequeño, subíndice y superíndice
Texto tachado, teletipo y preformateado
Entidades
Resumen de etiquetas

Capítulo 3. Tablas e imágenes

Tablas sencillas
Tablas con expansión
Imágenes
Resumen de etiquetas y atributos

Capítulo 4. Hipervínculos y anclas

Localizador uniforme de recursos
Hipervínculos
Anclas
Resumen de etiquetas y atributos

5

7

9
9
14
15
20

21
21
24
27
30
34

35
35
39
43
47

49
49
51
55
64

Capítulo 5. Listas

Listas no ordenadas
Listas ordenadas
Listas anidadas
Listas de definiciones
Resumen de etiquetas y atributos

Capítulo 6. Marcos

Conjunto de marcos en columnas y renglones
Conjunto de marcos mixtos
Resumen de etiquetas y atributos

Capítulo 7. Formularios

Delimitación de un formulario
Campo de texto
Campo de contraseña
Botón de selección
Casilla de verificación
Lista desplegable
Área de texto
Botón de envío de datos
Resumen de etiquetas y atributos

Capítulo 8. Mapas de imágenes

Mapa de imágenes
Resumen de etiquetas y atributos

Bibliografía de consulta y apoyo

Glosario

Índice de etiquetas

Acerca del autor

65
65
68
71
74
76

77
77
82
86

87
87
88
90
92
95
98
100
103
106

109
109
119

121

123

125

127

5

Agradecimientos

Agradezco a los revisores anónimos de este material por sus valiosos co-
mentarios y observaciones. También agradezco a Wulfrano Luna Ramírez
por sus sugerencias y comentarios, además de señalar puntualmente las
modificaciones pertinentes a este texto. Asimismo, expreso mi gratitud a
Betzabet García Mendoza por su valiosa opinión y sugerencias acerca del
texto en general, pero principalmente por su revisión a los ejemplos y ejer-
cicios contenidos en este material.

La oportunidad de ser profesor universitario me ha permitido crear ejem-
plos y ejercicios para complementar mis clases, algunos de estos se encuen-
tran en el presente texto. Muchas gracias a todos los alumnos con quienes
he compartido el salón de clases en la Universidad Autónoma Metropolita-
na, ustedes son la principal motivación para la creación de estos materiales.
Gracias a la colaboración de todos ustedes he podido mejorar la calidad

y presentación de este trabajo.

7

Introducción

El presente material didáctico tiene como objetivo apoyar la enseñanza de
la UEA Programación de Web Estático de la Licenciatura en Tecnologías y
Sistemas de Información de la Universidad Autónoma Metropolitana Unidad
Cuajimalpa. El contenido de este trabajo no solo es útil para los alumnos
de dicha UEA, sino también para las personas interesadas en un curso in-
troductorio sobre los principios del funcionamiento de las aplicaciones web
estáticas utilizando el lenguaje de marcado de hipertexto (HTML).

Este material de apoyo cubre todos los temas que se abordan en el conte-
nido sintético de la UEA Programación de Web Estático, donde se establece
como objetivo general que, al final del curso, el alumno haya conocido y sea
capaz de utilizar los principios básicos del funcionamiento de las aplicacio-
nes web estáticas, así como las tecnologías disponibles para su desarrollo.

La información que se proporciona en este material ayudará al estudiante
a entender el funcionamiento y desarrollar sus propios sitios web estáticos
con HTML. Este material también le permitirá adquirir los conocimientos y
habilidades necesarias para después incursionar en el desarrollo de aplica-
ciones web dinámicas.

La organización de este título se distribuyó en ocho capítulos, bibliografía
de consulta y apoyo, más un glosario de términos. En cada uno de los capí-
tulos se brinda una explicación de los temas que serán cubiertos, ejemplos
con los documentos HTML completos y explicados detalladamente, figuras
de las páginas web como serán visualizadas en un navegador web, así como
ejercicios para reforzar lo aprendido.

A su vez, los capítulos se subdividen de la siguiente manera. En el capítulo
uno se presenta una introducción al Lenguaje de Marcado de Hipertexto, la
estructura básica de un documento HTML, además de algunas etiquetas. El
capítulo dos describe las etiquetas para dar formato de texto y las entidades

8

HTML para sustituir caracteres especiales en una página web. El capítulo
tres describe cómo insertar imágenes y tablas con renglones y celdas en un
documento HTML. Los hipervínculos y las anclas son los temas del capítulo
cuatro. Las listas ordenadas, no ordenadas, anidadas y de definiciones se
presentan en el capítulo cinco. El capítulo seis explica la manera de crear
conjuntos de marcos en renglones y columnas para organizar una página
web. Los formularios para capturar información de un usuario y sus diferen-
tes elementos de captura se dan a conocer en el capítulo siete. Finalmente,
en el capítulo ocho se describen los mapas de imágenes.

Programación de web estático9

Capítulo 1. Introducción a HTML

En este capítulo se presenta una introducción al Lenguaje de Marcado de
Hipertexto (Hypertext Markup Language, HTML, por sus siglas en inglés),
mismo que utiliza marcas o etiquetas para describir la estructura y contenido
de un documento. Asimismo, se proporciona una explicación de la estructu-
ra básica de un documento HTML, así como de las etiquetas que delimitan
las dos secciones principales: cabecera y cuerpo. También se proporcionan
ejemplos del uso de etiquetas que se pueden introducir en un documento
HTML, tales como encabezados, párrafos, saltos de línea, reglas horizonta-
les y comentarios.

Los objetivos que deben cumplirse al final de este capítulo son:

• Conocer la estructura básica de un documento HTML para identificar sus

•

partes.
Identificar etiquetas con etiqueta inicial y etiqueta final, además de eti-
quetas vacías, para escribir documentos HTML correctamente.

• Utilizar las etiquetas correspondientes para crear encabezados en una

página web.

• Utilizar las etiquetas correspondientes para crear párrafos, saltos de lí-

nea, reglas horizontales y comentarios en una página web.

Documentos HtmL

HTML no es un lenguaje de programación, es un lenguaje de marcado
para crear páginas web, que a su vez permite crear sitios web visualizados a
través de un navegador web. Los documentos creados con HTML son do-
cumentos HTML o páginas web. Estos documentos son archivos en texto

10

plano, sin formato, que se almacenan con la extensión .html y pueden ser
vistos en un navegador web como Mozilla Firefox, Google Chrome, Opera,
Safari, Internet Explorer, entre otros. Para crear un documento HTML se pue-
de utilizar cualquier editor de texto, no es necesario un editor o herramienta
especializada.

HTML utiliza un conjunto de etiquetas, los cuales son palabras reservadas
que están rodeadas por los símbolos < y >. Algunas etiquetas en HTML
son: <html>, <head>, <body>, <h1>, <p>, <b>, <i>, <sub>,
<table>, <tr>, <td>, <div>, <img>, <a>, <select>, <input>, etc.
Las etiquetas HTML normalmente se escriben en pares, las cuales se de-
nominan: etiqueta inicial y etiqueta final. La figura 1.1 muestra un ejemplo
del uso de la etiqueta <b>, con sus respectivas etiqueta inicial y etiqueta
final, en donde se observa que la etiqueta final contiene una diagonal adi-
cional al nombre de la etiqueta.

Figura 1.1. Ejemplo de etiqueta inicial y etiqueta final

<b>UAM Unidad Cuajimalpa</b>

etiqueta inicial etiqueta final

←

←

También hay algunas etiquetas HTML que solo tienen una etiqueta inicial,
es decir que carecen de la etiqueta final. Estas etiquetas se llaman etiquetas
vacías. La figura 1.2 muestra la etiqueta vacía <img>. Las etiquetas vacías
tienen una diagonal antes del símbolo >, como se observa en la siguiente
figura.

Figura 1.2. Ejemplo de etiqueta vacía

<img src= "imagen1.jpg" />

etiqueta vacía diagonal

←

←

La estructura básica de un documento HTML se muestra en la figura 1.3.
La etiqueta <html> representa el elemento raíz de un documento HTML.
Todas las demás etiquetas en el doc