Pagina Html

HTML y CSS

Facilitador:
MSE. Jaime Eduardo Gómez García

1

menú

salir

Introducción a HTML(1)
• De Arpanet a Internet
• World Wide Web Consortium (W3C)
• Modelo Cliente-Servidor
• URL (Universal Resource Locator):
Protocolo://Dirección del Servidor:puerto/Recurso
• HTML es el lenguaje de marcas de hipertexto usado en
la World Wide Web.

2

menú

salir

Introducción a HTML(2)

• SGML:Lenguaje de Marcas Generalizado Estándar. De
el deriva HTML
• HTTP, FTP, ...
• Clientes Web: Navegadores (Browsers)

3

menú

salir

Introducción a HTML(3)
• Consideraciones iniciales:
: Definicion de Tipo de Documento
(DTD)
Final/ /EN”>
Explorer 3.0 HTML/ /EN”>
– El lenguaje HTML se basa en lasintaxis SGML: Todo
estará encerrado entre dos etiquetas de esta
manera:
–

...
4

menú

salir

Introducción a HTML(4)
• Reglas generales:
– Los documentos HTML son documentos
estructurados (DTD).
– Los nombres de etiquetas y atributos no son
sensibles a mayúsculas.
– Los valores de los atributos pueden ser sensibles a
mayúsculas.
– Los nombres de etiquetas yatributos no pueden
contener espacios.
– Los valores de los atributos pueden contener
espacios si van entre comillas.
5

menú

salir

Introducción a HTML(5)
• Reglas generales:
– Los navegadores ignoran los caracteres de espacio
en HTML.
– Los documentos HTML pueden contener
comentarios:

– El orden de las etiquetas no debe alterarse.
• Incorrecto:

...

• Correcto:

...

6

menú

salir

Tipos Básicos(1): Colores

• Color:
–
–
–
–
–

#000000
#FF0000
#00FF00
#0000FF
#FFFFFF

Negro
Rojo
Verde
Azul
Blanco

7

menú

salir

Tipos Básicos(2): Caracteres
Extendidos

Código
á, Á,
é, É,...
ñ
¿
¡
º
ª
©
®
 

Código Resultado
á, Á, é, É, í, Í, ó, Ó, ú y Ú
ñ
¿
¡
º
ª
©
®
(espacio en blanco)8

menú

salir

Tipos Básicos(3): Caracteres de
Control

Código
<
>
&
"

Código Resultado
<
>
&
"

9

menú

salir

Estructura global de un
documento(1)
• HEAD (Encabezamiento)
• BODY (Cuerpo)
– Ejemplo:
–
• Zona del encabezamiento
• Zona del cuerpo
–

10

menú

salir

Estructura global de un
documento(2): HEAD
•
– EnHTML 3.2 el elemento por
documento.
– Se debe intentar que los títulos tengan relación con
el contenido de la pagina.

11

menú

salir

Estructura global de un
documento(3): HEAD
• META
– NAME
• AUTHOR
• GENERATOR
• CLASSIFICATION
• KEYWORDS
• DESCRIPTION
– HTTP-EQUIV
–CONTENT
• BASE (se usa con el atributo HREF)
• STYLE
• SCRIPT
12

menú

salir

Estructura global de un
documento(4): HEAD
•
Indica al navegador el nombre de la página y sus
contenidos principales.
•
Indica a los buscadores de Internet las palabras clave
para localizar esta página.
• de página">
Hace una breve descripción de la página: contenidos,
objetivos,...
13

menú

salir

Estructura global de un
documento(5): HEAD
• content = ”15;URL=http://www.microsoft.com">
“Refresca” la página cargando transcurridos 15
segundos la pagina Web de Microsoft.
• Establece la dirección base de nuestra página; si no se
especifica nada más, cada vez que accedamos a algún
recurso, este será buscado en dicha localización.

14

menú

salir

Estructura global de un
documento(6): HEAD
•
Establece el título de la página como “Mi Página
Personal”. Así es como el navegador conocerá a la
página. Si no indicamos ningún título, el navegador...