-
Notifications
You must be signed in to change notification settings - Fork 1
/
html.tex
407 lines (316 loc) · 13.8 KB
/
html.tex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
%Autor: Félix J. Marcelo Wirnitzer
%email: [email protected]
%chat: _ese en #gulic/irc.hispano.org
\chapter{El lenguaje HTML}
\label{html.tex}
\newcommand{\com}{``}
\newcommand{\elto}[1]{{\tt $<$#1$>$}}
Los orígenes de HTML se sitúan en la necesidad de proporcionar una
estructura a documentos que fueran accesibles a través de la red. Más
que definir la apariencia de un documento, HTML describe cómo debería
construirse. Con una metáfora visual, HTML le explica cómo se deben
encajar seis planchas de madera para crear un cubo, pero no dice nada
sobre si la madera debe ser de roble, pino o caoba, o si debe
barnizarse o pintarse.
A lo largo del tiempo, la demanda de los usuarios ha motivado
la inclusión de elementos relativos a la presentación en las
especificaciones de HTML, a pesar de que cada vez se veía más
claro que la idea original de HTML era definir estructuras y no
presentaciones. Tratemos de explicarlo mejor: la idea original es que
cuando hacemos una página web con HTML, deberíamos disponer de dos
ficheros: la propia página web con el contenido que nos interesa
mostrar y un fichero de estilos. Combinando estos dos ficheros
tendremos nuestra página web. Ahora bien, con el tiempo, se han
fundido estos dos ficheros en uno sólo creando un gran problema que es
de no seguir los estándares que inicialmente se crearon. Y ése es el
principal problema de ver páginas webs desde distintos navegadores
\footnote{No hay más que recordar cuando leemos ``Página optimizada
por Internet Explorer'' o lo mismo para el Nestcape}
\section{Definición de la estructura de un documento}
Todos los documentos HTML están formados por cuatro partes:
\begin{enumerate}
\item Una línea declarando qué versión de HTML se ha usado para crear
el documento. Esta parte es simplemente esta línea:
\begin{verbatim}
<!DOCTYPE HTML PUBLIC = "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3c.org/TR/REC-html40/loose.DTD">
\end{verbatim}
\item Un elemento HTML que describe el documento como un documento
HTML. Todos los contenidos de un documento HTML, con la excepción de
la declaración del tipo de do\-cu\-men\-to, \textbf{deben encerrarse
entre las etiquetas \elto{HTML} y \elto{/HTML}}. El resto del
documento se encontrará entre las etiquetas de apertura y cierre de
HTML.
\item Una sección que declara el encabezado, con las etiquetas
\elto{HEAD} y \elto{/HEAD}. Esta sección contendrá \textit{metadatos},
que son datos que describen otros datos e incluyen información
tal como palabras claves o descripciones cortas que usarán las
herramientas de búsqueda de la Red, autor del documento, información
del control de versiones y cualquier otro dato que no pueda ser
considerado como contenido del documento.
\item El cuerpo principal, donde se encuentra el contenido del
documento. Para ello se pueden utilizar las etiquetas \elto{BODY} o
\elto{FRAMESET}.
\end{enumerate}
Por tanto, un documento muy básico HTML que contuviera un encabezado
con un título tendría el siguiente aspecto:
\begin{verbatim}
<!DOCTYPE HTML PUBLIC = "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3c.org/TR/REC-html40/loose.DTD">
<HTML>
<TITLE>
Esto es un ejemplo en HTML.
</TITLE>
</HTML>
\end{verbatim}
\section{¿Qué hacemos con esto?}
Con este somero ejemplo lo que se debe hacer es guardarlo en un
fichero de texto con la extensión {\tt .htm} o {\tt .html} y desde un
navegador (Konqueror, Netscape o Galeon, según se prefiera) abrir el
fichero con el nombre con que lo hemos guardado.
Desde ese momento ya podemos ver resultados.
Cada vez que cambiemos algo, lo guardamos e indicamos al navegador que
refresque la información.
\section{El cuerpo del documento}
Como su propio nombre indica, en el cuerpo, del documento se sitúan
los contenidos del documento. Es lo que normalmente se considera como
el ``contenido" del propio documento o el texto de un libro sin
pensar en las cubiertas o tapas del libro.
Estos contenidos deben encerrarse entre las etiquetas \elto{BODY} y
\elto{/BODY}, que deben estar situados {\bf inmediatamente} después de
\elto{/HEAD}.
\begin{verbatim}
<!DOCTYPE HTML PUBLIC = "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3c.org/TR/REC-html40/loose.DTD">
<HTML>
<TITLE>
Esto es un ejemplo en HTML.
</TITLE>
<BODY>
Aquí ya estamos dentro del propio cuerpo.
</BODY>
</HTML>
\end{verbatim}
Cuando abrimos el cuerpo (\elto{BODY}), podemos establecer unos
atributos o propiedades, que pueden ser los siguientes:
\begin{description}
\item[ALINK] Especifica el color de un enlace cuando se activa.
\item[BACKGROUND="imagen"] Especifica un gráfico que se usará como
fondo a modo de mosaico para el documento.
\item[BGCOLOR="nombrecolor"] Especifica el color de fondo del
documento.
\item[LINK="nombrecolor"] Especifica el color de los enlaces del
documento.
\item[TEXT="nombrecolor"] Especifica el color del texto del documento.
\item[VLINK="nombrecolor"] Especifica el color de los enlaces del
documento que han sido visitados.
\end{description}
Los colores que se pueden usar son:
\begin{itemize}
\item Acqua (Agua)
\item Black (Negro)
\item Blue (Azul)
\item Fuchsia (Fucsia)
\item Grey (Gris)
\item Green (Verde)
\item Lime (Verde Lima)
\item Maroon (Marrón
\item Navy (Azul Marino)
\item Olive (Verde oliva)
\item Purple (Púrpura)
\item Red (Rojo)
\item Silver (Plata)
\item Teal (Azul Verdoso)
\item White (Blanco)
\item Yellow (Amarillo)
\end{itemize}
Por ejemplo,
\begin{verbatim}
<BODY BGCOLOR="Blue" Text="Yellow" >
Esto es una página web con letras amarillas y fondo azul.
</BODY>
\end{verbatim}
\section{Estructura del contenido de un documento con encabezados}
Casi todos los documentos pueden dividirse en distintos bloques de
texto o apoyarse con información adicional como ilustraciones o
fotografías. Incluso los documentos HTML más básicos presentarán este
comportamiento.
Por ejemplo, puede que su documento tenga dos párrafos, una imagen,
una cita y un párrafo final, por lo que podría decirse que su
documento consta de cinco bloques diferentes.
Para ello, echamos mano de los encabezados. Éstos constan de seis
niveles, desde \elto{H1} hasta \elto{H6}, es decir, de mayor a menor
importancia. Lo que entendemos por nivel de importancia no es más
que resaltar un texto variando su tamaño. Evidentemente, un texto
resaltará con un gran tamaño frente a otro de menor tamaño. Por tanto,
con \elto{H1} obtendremos el mayor tamaño y con \elto{H6} el menor.
\begin{verbatim}
<H1>
Resaltado de nivel 1
</H1>
<H2>
Resaltado de nivel 2
</H2>
\end{verbatim}
\dots
\begin{verbatim}
<H6>
Resaltado de nivel 6
</H6>
\end{verbatim}
\subsection{Formato de texto}
\subsubsection*{Párrafo}
El tipo más básico de formatos de texto es la agrupación de frases en
párrafos. Para ello se usa el elemento \elto{P}:
\begin{verbatim}
<P>El tipo más básico de formatos de texto es la agrupación de
frases en párrafos.</P>
\end{verbatim}
\subsubsection*{Énfasis}
En casi todos los bloques existe una parte que se le quiere dar una
mayor importancia que el resto del texto. HTML marca esta parte con
\elto{EM}:
\begin{verbatim}
Si te digo que no, es que quiero decir <EM>NO</EM>.
\end{verbatim}
\noindent
\subsubsection*{Énfasis fuerte}
Como todo en la vida, hay también grados de acentuar el énfasis en las
cosas. Esto lo hacemos con \elto{STRONG}:
\begin{verbatim}
Si te digo que no, es que quiero decir <STRONG>NO</STRONG>.
\end{verbatim}
\subsection{Listas}
Las listas en HTML se dividen en tres categorías básicas:
\begin{itemize}
\item \textit{Listas numeradas}
\item \textit{Listas no numeradas}
\item \textit{Listas de definición}
\end{itemize}
Las dos primeras son similares. Una \textit{lista numerada} usará los
elementos \elto{OL} y \elto{/OL} mientras que una \textit{lista no
numerada} hará uso de los elementos \elto{UL} y \elto{/UL}. Dentro de
estos elementos, para marcar cada miembro de la lista, se utiliza la
etiqueta común \elto{LI}.
\subsubsection*{Listas no numeradas}
Son aquéllas cuyos elementos no siguen un orden determinado, aunque se
muestran en el orden en el que se escriban en el archivo fuente.
Para crear una lista no numerada, se usa la etiqueta \elto{UL} seguido
de una colección de elementos con \elto{LI}:
\begin{verbatim}
<P>Coches que he tenido</P>
<UL>
<LI> 1993 - Seat Ronda </LI>
<LI> 1996 - Volkswagen </LI>
<LI> 1999 - Audi A4 </LI>
</UL>
\end{verbatim}
\subsubsection*{Listas numeradas}
Son aquéllas cuyos elementos deben seguir un orden determinado. Por
ejemplo, los pasos que deben seguir en una receta de cocina o las
instrucciones para montar en bicicleta.
Para crear una lista numerada, se usa la etiqueta \elto{OL} seguido de
una colección de elementos con \elto{LI}:
\begin{verbatim}
<P>Cosas que tengo que hacer hoy</P>
<UL>
<LI> Mirar el correo </LI>
<LI> Escribir un poco del libro </LI>
<LI> Dar una clase </LI>
</UL>
\end{verbatim}
\subsubsection*{Listas de definiciones}
Estas listas se diferencian de las anteriores en que cada entrada de
la lista consta de dos partes: el término definido, \elto{DT}, y la
propia descripción de la definición, \elto{DD}. La lista comienza con
la etiqueta de las listas de definiciones, \elto{DL}. Cada definición
debe tener obligatoriamente un término y una descripción, tal como se
ve en este ejemplo:
\begin{verbatim}
<DL>
<DT>RAM
<DD>Memoria de acceso aleatorio</DD>
</DT>
<DT>BIOS
<DD>Sistema de entrada y salida básico</DD>
</DT>
</DL>
\end{verbatim}
\subsection{Tablas}
Se utiliza la etiqueta \elto{TABLE}, que acepta siete atributos
principales:
\begin{description}
\item[SUMMARY:] Contiene un texto que describe el contenido y la
estructura de la tabla.
\item [WIDTH:] Valor que indica la anchura que se le quiere dar a la
tabla en proporción con la anchura total de la tabla del navegador (es
decir, una valor de 100 indica que la tabla debe ocupar todo el ancho
disponible de la ventana, lo cual no equivale al término de ``pantalla
completa").
\item [BORDER:] Determina la anchura del borde de la tabla, medido en
píxels. Un valor de 0 (cero) hace que no se ponga borde.
\item [FRAME:] También se posible colocar un marco alrededor de la
tabla. El valor predeterminado es `` \textit{void}" (vacío), lo que
significa que no existe ningún marco. Se admiten valores alternativos
para indicar cada uno de los lados o una combinación de los lados del
marco.
\item [RULES:] Son separadores visuales entre filas, columnas o grupos
de celdas en el interior de la tabla. De este modo se puede incluir un
separador vertical entre las columnas pero ninguno que separe las
filas entre sí. El valor predeterminado es ``\textit{none}" (ninguno),
que significa que no se mostrará ningún separador. Los separadores son
elementos visuales distintos a los bordes.
\item [CELLSPACING:] Espacio entre las celdas, de la tabla medido en
píxels, cuyo valor predeterminado es 0 (cero).
\item [CELLPADDING:] Espacio entre de la celda y su contenido, medido
también en píxels, cuyo valor predeterminado es 0 (cero).
\end{description}
Lo primero que hacemos es poner una tabla entre las etiquetas
\elto{TABLE} Y \elto{/TABLE}. Después se va de línea en línea con las
etiquetas \elto{TR} Y \elto{/TR}. Dentro de ellas, ya usamos las
etiquetas para cada celdas de estas líneas que son \elto{TD} y
\elto{/TD}, que serán tantas como columnas queramos:
%\newpage
\begin{verbatim}
<TABLE BORDER=1>
<TH> ;Si queremos poner una fila a modo de cabecera ...
<TD>Estamos en la primera celda de la cabecera</TD>
<TD>Estamos en la segunda celda de la cabecera</TD>
<TD>Estamos en la tercera celda de la cabecera</TD>
</TH>
<TR> ;Primera fila
<TD>Estamos en la primera celda de la primera fila</TD>
<TD>Estamos en la segunda celda de la primera fila</TD>
<TD>Estamos en la tercera celda de la primera fila</TD>
</TR>
<TR> ;Segunda fila
<TD>Estamos en la primera celda de la segunda fila</TD>
<TD>Estamos en la segunda celda de la segunda fila</TD>
<TD>Estamos en la tercera celda de la segunda fila</TD>
</TR>
;Y así sucesivamente ...
</TABLE>
\end{verbatim}
En caso de que no queramos rellenar nada en una celda, simplemente
ponemos \elto{TD}\elto{/TD}
\subsection{Enlaces}
Antes que nada, pasemos a definir lo que es un enlace. Todos hemos
visto que cuando navegamos por una página web, hay ciertas palabras o
gráficos que en el momento de pasar el puntero del ratón se convierte
en una mano indicándonos que si pinchamos ahí nos enviará a otra
página web. Pues bien, eso es un enlace y en el momento de crearlo
dentro de un documento HTML tendrá el siguiente aspecto:
\begin{verbatim}
<A HREF="http://www.google.com">Este enlace nos lleva a la página del
Google</A>
\end{verbatim}
Donde el texto que hemos escrito, "Este enlace..." es el área donde
debemos pinchar con el ratón para acceder a esa página. No sólo se
puede meter texto, sino también imágenes u otros objetos.
Con esto también podemos hacer un acceso a un correo electrónico:
\begin{verbatim}
<A HREF="mailto:[email protected]">Podemos probar a enviar un mensaje
a los autores de este libro</A>
\end{verbatim}
Con todo lo explicado en esta introducción podemos empezar a hacer
nuestros pinitos en el apasionante mundo del lenguaje HTML.