PDF de programación - HTML 4.01

Imágen de pdf HTML 4.01

HTML 4.01gráfica de visualizaciones

Publicado el 14 de Enero del 2017
433 visualizaciones desde el 14 de Enero del 2017
695,8 KB
23 paginas
Creado hace 16a (14/10/2003)
HTML 4.01

Daniel Morató

Area de Ingeniería Telemática

Departamento de Automática y Computación

Universidad Pública de Navarra

daniel.morato@unavarra.es

Laboratorio de Interfaces de Redes

http://www.tlm.unavarra.es/asignaturas/lir

HTML 4.01

(http://www.w3.org/TR/html401/)

• Conceptos básicos
• Estructura del documento HTML
• Tags de la cabecera
• Tags del cuerpo del documento

– Texto
– Listas
– Tablas
– Hyperlinks
– Objetos
– Formularios
– Frames

• Hojas de estilos

14 Oct

HTML 4.01

1/45

1

Conceptos básicos

• SGML es un estándar ISO para definir lenguajes de marcas. HTML es uno de ellos, es

una Aplicación SGML

<html>
<head>
<title>Titulo del documento</title>
</head>
<body>
<p>Contenido del documento
</body>
</html>

• En HTML existen “elementos” que representan párrafos, enlaces, listas...
• La sintaxis de los elementos viene definida en los DTDs (Document Type Definition)
• Cada elemento tiene tres partes: una marca (tag) de comienzo, el contenido y una

marca de final

<title>Titulo del documento</title>

• En algunos elementos se permite omitir el contenido, en otros la marca de final

y algunos no tienen ni contenido ni marca de final
• Las marcas de comienzo tienen “atributos” opcionales

• Las marcas no distinguen mayúsculas de minúsculas

<body background=“imagen.gif”>Contenido del documento</body>

14 Oct

HTML 4.01

2/45

HTML 4.01

(http://www.w3.org/TR/html401/)

• Conceptos básicos
• Estructura del documento HTML
• Tags de la cabecera
• Tags del cuerpo del documento

– Texto
– Listas
– Tablas
– Hyperlinks
– Objetos
– Formularios
– Frames

• Hojas de estilos

14 Oct

HTML 4.01

3/45

2

Estructura del documento HTML
• Tres secciones:
- Versión

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

- Cabecera

• <HEAD></HEAD>
• Contiene información sobre el documento, como el título o palabras clave empleables por buscadores
• No se suele mostrar como parte del contenido

- Cuerpo

• Contenido del documento
• <BODY></BODY>
• <FRAMESET></FRAMESET> para dividir el espacio de visualización en subespacios rectangulares

• Diferentes etiquetas en cada sección
• <HTML></HTML> engloba la cabecera y el cuerpo

14 Oct

HTML 4.01

4/45

Ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<h1>Pagina de ejemplo</h1>

<p>
Primera pagina de ejemplo<br>
Sin ningun contenido interesante
</body>
</html>

14 Oct

HTML 4.01

5/45

3

HTML 4.01

(http://www.w3.org/TR/html401/)

• Conceptos básicos
• Estructura del documento HTML
• Tags de la cabecera
• Tags del cuerpo del documento

– Texto
– Listas
– Tablas
– Hyperlinks
– Objetos
– Formularios
– Frames

• Hojas de estilos

14 Oct

HTML 4.01

6/45

Tags de la cabecera

• <TITLE></TITLE>

- Campo obligatorio

• <META>

<TITLE>Titulo del documento</TITLE>

- Permite incluir información sobre el documento (meta-datos)
- Se pueden incluir campos en la cabecera HTTP que se enviará con el documento
<META http-equiv=“Expires” content=“Fri, 15 Aug 2003 19:18:44 GMT”>

- Los metadatos suelen ser del tipo propiedad/valor
<META name=“propiedad” content=“valor”>

- Empleado para indicar palabras clave sobre el documento para buscadores

<META name=“keywords” content=“palabras clave”>

- Empleado también para describir el documento para aplicaciones de filtrado

(control parental) o indicar valores por defecto (codificación del documento)

• <BASE>

- Permite especificar el URI base para enlaces relativos

<BASE href=“http://www.miservidor.com/direc/midoc.html”>

14 Oct

HTML 4.01

7/45

4

HTML 4.01

(http://www.w3.org/TR/html401/)

• Conceptos básicos
• Estructura del documento HTML
• Tags de la cabecera
• Tags del cuerpo del documento

– Texto
– Listas
– Tablas
– Hyperlinks
– Objetos
– Formularios
– Frames

• Hojas de estilos

14 Oct

HTML 4.01

8/45

Tags del cuerpo del documento

(Texto)

EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,

• Encabezados:

H1, H2, H3, H4, H5, H6

• Texto estructurado:

ABBR, ACRONYM
BLOCKQUOTE, Q
SUB, SUP
B, I, TT

• Líneas y párrafos

P, BR

PRE

• Marcando cambios:

INS, DEL

14 Oct

HTML 4.01

9/45

5

Encabezados
• Para describir secciones del documento
• Hay seis niveles, desde <H1> el más importante hasta <H6>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict
.dtd">
<html>
<head>
<title>Encabezados</title>
</head>
<body>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
<h3>Encabezado H3</h3>
<h4>Encabezado H4</h4>
<h5>Encabezado H5</h5>
<h6>Encabezado H6</h6>
Texto normal
</body>
</html>

14 Oct

HTML 4.01

10/45

Texto estructurado

• Muchas veces la presentación asociada a estos tags depende de

la interpretación hecha por el agente del usuario (el
navegador)
• Algunos tags:

• EM
• STRONG
• CITE
• DFN
• CODE
• SAMP
• KBD
• VAR
• ABBR
• ACRONYM
• BLOCKQUOTE
• Q
• SUB
• SUP
• B
• I
• TT

Énfasis
Mayor énfasis
Cita o referencia
Una definición
Código fuente para computadora
Salida de ejemplo de un programa
Texto a ser introducido por el usuario
Una variable de un programa
Abreviatura
Acrónimo
Párrafo de texto citado
Texto breve citado
Subíndice
Superíndice
Negrita
Itálica
Texto con font no proporcional

14 Oct

HTML 4.01

11/45

6

Texto estructurado

(Ejemplo)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texto</title>
</head>
<body>
Texto normal, <em>con enfasis</em> o
<strong>con mucho enfasis</strong>
extraido de <cite>El libro de las frases
inutiles, Anonimo</cite>. Que se puede
entender como <dfn>algo cuya importancia
se desea destacar</dfn>.
<code>printf("Hola amigo\n");</code> Que
daria como resultado <samp>Hola</samp> Y
si defino una variable seria <var>int
mivariable;</var> El usuario escribiria
<kbd>Su texto</kbd>, o usaria el raton,
un lapiz, <abbr>etc.</abbr> Mientras lo
permita el estandar de
<acronym>HTML</acronym>.
<blockquote>Alea jacta est</blockquote>
O sea que <q>la suerte esta echada</q>
Sea X<sub>i</sub> o X<sup>i</sup>
</body>
</html>

14 Oct

HTML 4.01

12/45

Líneas y párrafos

• Un número de espacios en blanco consecutivos se muestra como uno solo
• Los fines de línea en el documento no se muestran
• <P>

Se emplea para iniciar un nuevo párrafo. No debería emplearse sin
contenido (es decir, no poner más de uno seguido)
Para añadir un fin de línea
Texto preformateado como en el documento: font no proporcional,
mantiene el número de espacios en blanco y desactiva que el texto
salte de línea automáticamente

• <BR>
• <PRE></PRE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texto</title>
</head>
<body>
Asi comienza el texto. <br>Y esto esta en
otra linea. <p>Pero esto en otro parrafo
<pre>
Y este es el aspecto
De un texto preformteado
</pre>
</body>
</html>

14 Oct

HTML 4.01

13/45

7

Marcando cambios
Marca secciones del texto que se han insertado
desde la versión anterior del documento
Marca secciones del texto que se han eliminado
desde la versión anterior del documento

• <INS>

• <DEL>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cambios</title>
</head>
<body>
Se puede hacer que texto normal parezca
<ins>resaltado como nuevo</ins> o como
<del>que ha sido eliminado</del>
</body>
</html>

14 Oct

HTML 4.01

14/45

HTML 4.01

(http://www.w3.org/TR/html401/)

• Conceptos básicos
• Estructura del documento HTML
• Tags de la cabecera
• Tags del cuerpo del documento

– Texto
– Listas
– Tablas
– Hyperlinks
– Objetos
– Formularios
– Frames

• Hojas de estilos

14 Oct

HTML 4.01

15/45

8

Tags del cuerpo del documento

(Listas)

• Listas:

UL, LI

• Listas ordenadas:

OL, LI

• Listas de definición:

DL, DT, DD

14 Oct

HTML 4.01

16/45

Listas
(Ejemplo)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listas</title>
</head>
<body>
<ul>
<li>Elemento de lista no numerada
<li>Segundo elemento
</ul>
<ol>
<li>Primer elemento de lista numerada
<li>Segundo elemento
</ol>
<dl>
<dt>DL<dd>Tag de comienzo de lista de definicion
<dt>DT<dd>Tag para elemento
<dt>DD<dd>Tag para la definicion
</dl>
<ol>
<li>Lista ordenada
<ol>
<li>Dentro de lista ordenada
<li>Otro elemento
</ol>
<li>Otra lista
<ol>
<li>Elemento dentro de la lista
</ol>
</ol>
</body>
</html>

14 Oct

HTML 4.01

17/45

9

HTML 4.01

(http://www.w3.org/TR/html401/)

• Conceptos básicos
• Estructura del documento HTML
• Tags de la cabecera
• Tags del cuerpo del documento

– Texto
– Listas
– Tablas
– Hyperlinks
– Objetos
– Formularios
– Frames

• Hojas de estilos

14 Oct

HTML 4.01

18/45

Tags del cuerpo del documento

(Tablas)

• Tag de comienzo/final <TABLE></TABLE> . Atributo border especifica el grosor

del borde de la tabla

• Marca de comienzo de una línea de la tabla <TR>
• Marca de comienzo de una celda

<TH> Celda de cabecera
<TD> Celda de datos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabla simple</title>
</head>
<body>
<table border="1">
<tr><th>Col 1<th>Col 2
<tr><td>Elemento (1,1)<td>(1,2)
<tr><td>(2,1)<td>(2,2)
<tr><td>(3,1)<td>(3,2)
</table>
</body>
</html>

14 Oct

HTML 4.01

19/45

10

Tablas avanzadas

• Para ponerle título (opcional) <CAPTION></CAPTION> debe ir justo detrás de <TABLE>
• Agrupar celdas:

• En la misma línea: con el atributo rowspan de <TH> o <TD>
• En la misma columna: con el atributo colspan de <TH> o <TD>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tablas</title>
</head>
<body>
<table border="1
  • Links de descarga
http://lwp-l.com/pdf864

Comentarios de: HTML 4.01 (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad