Publicado el 9 de Mayo del 2018
1.093 visualizaciones desde el 9 de Mayo del 2018
7,5 MB
129 paginas
Creado hace 9a (07/10/2015)
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ático9
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
Comentarios de: Programación Web Estático (0)
No hay comentarios