Transpas/html.tex at master · CursosWeb/Transpas · GitHub

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
% $Id$
%


\section{HTML: HyperText Markup Language}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Basic structure of a document}

\begin{verbatim}
<!DOCTYPE html>
<html>
 <head>
  <title> Tittle </title>
 </head>
 <body>
  <p>This is a paragraph</p>
 </body>
</html>
\end{verbatim}

\textbf{Ejercicio:} Escribe una página HTML simple, y mírala en el navegador.

\end{frame}


%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Basic structure of a document (2)}

[Nota: en general, se describirá HTML5]

\begin{itemize}
\item \verb|<!DOCTYPE html>| es la marca de HTML5
\item En HTML 4.x era más complicado...
\item En general, cada elemento se abre y se cierra
\item La estructura de un documento es un árbol \\
  (cada elemento va dentro de otro)
\item Elemento raíz: HTML
\item Elementos bajo HTML: HEAD (indicaciones) y BODY (contenidos)
\end{itemize}

\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Sintaxis básica}

Sintaxis similar a la de XML:

\begin{itemize}
\item Etiquetas (elementos, marcas):
\begin{verbatim}
<p> ... </p>
<p/>
\end{verbatim}

\item Atributos:
\begin{verbatim}
<p id="abstract">
\end{verbatim}
\item Las etiquetas han de estar ``encapsuladas'': \\
  se cierran en orden inverso al que se abrieron \\
  (esto es, van siempre ``unas dentro de otras'', son contenedores)
\item Las etiquetas son nodos en el árbol, \\
  los atributos anotaciones de los nodos
\item Caracteres ``escapados'': \verb|&lt;| ($<$) \verb|&gt;| ($>$)
\end{itemize}

\textbf{Ejercicio:} Escribe una página HTML con cabecera (que tenga al menos un título) y cuerpo, con las dos sintaxis de etiquetas, y con elementos que tengan atributos.

\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Elemento HTML}

\begin{itemize}
\item Sintaxis básica:

\begin{verbatim}
<html lang="es">
\end{verbatim}

\item ``lang'' es el idioma (primario) del texto

\item Contiene un elemento HEAD y un elemento BODY
\end{itemize}

\begin{flushright}
Language tags in HTML and XML: \\
\url{http://www.w3.org/International/articles/language-tags/} \\
\end{flushright}
\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Elemento HEAD}

Información para el navegador y para bots.

Ejemplo:

\begin{verbatim}
<head>
  <meta charset="utf-8" />
  <title>El titulo</title>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="alternate" type="application/atom+xml"
                        title="Canal RSS"
                        href="canal.rss" />
  <link rel="shortcut icon" href="/favicon.ico" />
</head>
\end{verbatim}

\end{frame}

\begin{frame}[fragile]
\frametitle{Elemento HEAD (2)}

\begin{itemize}
\item META:
  \begin{itemize}
  \item juego de caracteres \\
    (simplifica versiones pre-HTML5, \verb|http-equiv|)
  \item  description
  \end{itemize}
\item LINK puede apuntar a complementos para la página
  \begin{itemize}
  \item rel="stylesheet": hoja de estilo CSS
  \end{itemize}
\item LINK puede apuntar a otros recursos relacionados
  \begin{itemize}
  \item \verb|rel="alternate"|: contenido equivalente de otros tipos (type) \\
    o en otros idiomas (hreflang)
  \item \verb|rel="author"|: autor
  \item \verb|rel="next"|, \verb|rel="prev"|: anterior, posterior
  \item \verb|rel="shortcut icon"|: icono de la página
  \item Otros: license, nofollow, search, tag, etc.
  \end{itemize}
\item Otros: STYLE, SCRIPT (CSS o JavaScript embebidos)
\end{itemize}

\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Elementos en BODY}

\begin{itemize}
\item H1 - H6: cabeceras (headings)
\item P: parrafos de texto
\item A: ancla (anchor) (absoluto a url, absoluto a recurso, relativo)
\begin{verbatim}
<a href="http://linkedsite/url.html">Documento</a>
<a href="/url.html">Documento en mismo sitio</a>
<a href="url.html">Documento en mismo sitio y "dir"</a>
\end{verbatim}

\item UL, OL, DL: listas (sin ordenar, ordenadas, de definiciones)
\begin{verbatim}
<ul>
  <li>Un elemento</li>
  <li>Otro elemento</li>
</ul>
\end{verbatim}

\end{itemize}

\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Elementos en BODY (2)}

\begin{itemize}
\item Tabla
\begin{verbatim}
<table>
 <tr>
  <td>Primera fila, primera columna</td>
  <td>Primera fila, segunda columna</td>
 </tr>
 <tr>
  <td>Segunda fila, primera columna</td>
  <td>Segunda fila, segunda columna</td>
 </tr>
</table>
\end{verbatim}

\end{itemize}

\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Elementos en BODY (3)}

\begin{itemize}
\item DIV: contenedor genérico (referncias para CSS)
\item HEADER, FOOTER, NAV, ARTICLE, SECTION, ASIDE: \\
  elementos de sección
\item IMG: imágenes
\begin{verbatim}
<img src="gsyc-bg.png" alt="Logo de GSyC">
<img src="gsyc-bg.png" alt="Logo de GSyC" width="300" height="240">
\end{verbatim}

\item MAP, AREA: mapa de imagen en el lado del cliente
\end{itemize}

\end{frame}

%%---------------------------------------------------------------

\begin{frame}[fragile]
\frametitle{Elementos en BODY (4)}

\begin{itemize}
\item FORM, FIELDSET, LABEL, INPUT

\begin{verbatim}
<form action="recurso" method="post">
  <fieldset>
    <legend>Formulario</legend>

    <label>Nombre</label>
    <input type="text" name="nombre"><br />

    <label>Apellido</label>
    <input type="text" name="apellido"><br />

    <input type="submit" name="persona">
 </fieldset>
</form>
\end{verbatim}

\end{itemize}
\end{frame}

%%---------------------------------------------------------------

\begin{frame}
\frametitle{Material complementario}

\begin{itemize}
\item HyperText Markup Language (Wikibook): \\
  \url{http://en.wikibooks.org/wiki/HTML_Programming}
\item HTML5: A tutorial for beginners: \\
  \url{http://www.html-5-tutorial.com/}
\item Dive into HTML5: \\
  \url{http://diveintohtml5.info}
\item HTML5 (Wikipedia): \\
  \url{http://en.wikipedia.org/wiki/HTML5}
\item Web Fundametals (Code Academy): \\
  \url{http://www.codecademy.com/tracks/web}
\end{itemize}


\end{frame}