Está en la página 1de 7

Programacion Web

Practica 1: HTML

Diana Aurora Cruz Hernandez


Jose Luis Quiroz Fabian

1 Introduccion
1.1 Que es HTML?
Es un lenguaje de marcado estandar para crer paginas web:

1. Describe la estructura de paginas web por medio de marcas.


2. Los elementos de HTML son los bloques construidos de paginas HTML.
3. Elementos son representados por etiquetas.
4. Los navegadores no despliegan las etiquetas, pero las utilizan para ren-
derizar su contenido.

1.2 Primer ejemplo


1 <! DOCTYPE html>
2 < html>
3 <head>
4 <title> TITULO </title>
5 </head>
6 <body>
7
8 <h1>CABECERA< / h1>
9 <p>PARRAFO.< / p>
10
11 </body>
12 </ html>
Cada uno de los elementos anteriores define lo siguiente:
<!DOCT Y P Ehtml > indica que es un documento HTML5.
La etiqueta < html > es la raz de una pagina HTML.
La etiqueta < head > contiene la meta informacion del documento.
La etiqueta < title > define el titulo por para el documento.

1
La etiqueta < body > define los elementos visibles de la pagina
La etiqueta < h1 > define una cabecera
La etiqueta < p > define un parrafo.
Se debe observar en general que cada elemento del HTML5 basicamente
sigue la forma: < etiqueta > contenido... < /etiqueta >
La Figura 1 muestra la estructura general de un documento (pagina) HTML.

<html>
<head>
<title> </title>
</head>
<body>

<h1> </h1>

<p> </p>
<p> </p>

</body>
</html>

Figure 1: Estructura general de un documento HTML

EJERCICIO: COPIAR EL CODIGO EN UN EDITOR DE TEXTO, GUARDAR


CONN EXTENSION html Y ABRIR EL ARCHIVO CON CHROME.

2 Ejemplos
2.1 Ejemplo 1: Cabeceras
1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <h1>Cabecera 1 < / h1>
6 <h2>Cabecera 2 < / h2>
7 <h3>Cabecera 3 < / h3>
8 <h4>Cabecera 4 < / h4>
9 <h5>Cabecera 5 < / h5>
10 <h6>Cabecera 6 < / h6>
11

2
12 </body>
13 </ html>

2.2 Ejemplo 2: Parrafos


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <p>Un parrafo....< / p>
6 <p>Otro parrafo....< / p>
7
8 </body>
9 </ html>

2.3 Ejemplo 3: Imagen


Descargar una imagen, por ejemplo img.jpg, guardarla en la carpeta de su doc-
umento HTML y escribir el codigo.
1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <img src= " img.jpg " alt= " Investigar este atributo " width= "
104 " height= " 142 " >
6
7 </body>
8 </ html>

2.4 Ejemplo 4: Enlace


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <a href= " https: // pacifico.izt.uam.mx / moodle " >Ir al
moodle< / a>
6
7 </body>
8 </ html>

2.5 Ejemplo 5: Parrafos


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <p>
6 Mi parrafo.... .. .. .. ..

3
7 .. .. .. .. .. ..
8 < / p>
9
10 <p>
11 Mi parrafo.... .. .. .. ..
12 .. .. .. .. .. ..
13 < / p>
14
15 <p>
16 y otro mas.... .. .. .. .. ..
17 .. .. ..
18 < / p>
19
20 </body>
21 </ html>

2.6 Ejemplo 6: Parrafos ..y colores


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <p>I am normal< / p>
6 <p style= " color:red; " >Rojo< / p>
7 <p style= " color:blue; " >Azul< / p>
8 <p style= " font-size:36px; " >Texto grande< / p>
9
10 </body>
11 </ html>

2.7 Ejemplo 7: Parrafos ..y otros mas formatos...


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <p >< b>Negrita< / b >< / p>
6 <p >< i>Cursiva< / i >< / p>
7 <p>Es<sub> sun-indice< / sub> y <sup>super-indice< / sup >< / p>
8
9 </body>
10 </ html>

2.8 Ejemplo 8: Agregando colores de fondo y texto


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <h2 style= " background-color:red " >

4
6 Fondo rojo
7 < / h2>
8
9 <h2 style= " ba c kg r ou nd - co l or :o r an g e " >
10 Fondo naranja
11 < / h2>
12
13 <h2 style= " ba c kg r ou nd - co l or :y e ll o w " >
14 Fondo amarillo
15 < / h2>
16
17 <h2 style= " b a c k g r o u n d - c o l o r : b l u e ; c o l o r : w h i t e " >
18 Fondo azul y letras blancas
19 < / h2>
20
21 <h2 style= " b ackg round -col or:c yan " >
22 Fondo cian
23 < / h2>
24
25 </body>
26 </ html>

2.9 Ejemplo 9: Una tabla


1 <! DOCTYPE html>
2 < html>
3 <head>
4 </head>
5 <body>
6
7 <table>
8 <tr>
9 <th>A< / th>
10 <th>B< / th>
11 <th>C< / th>
12 < / tr>
13 <tr>
14 <td>1.1< / td>
15 <td>1.2< / td>
16 <td>1.3< / td>
17 < / tr>
18 <tr>
19 <td>2.1< / td>
20 <td>2.2< / td>
21 <td>2.3< / td>
22 < / tr>
23 <tr>
24 <td>3.1< / td>
25 <td>3.2< / td>
26 <td>3.3< / td>

5
27 < / tr>
28 <tr>
29 <td>4.1< / td>
30 <td>4.2< / td>
31 <td>4.3< / td>
32 < / tr>
33 < / table>
34
35 </body>
36 </ html>

2.10 Ejemplo 10: Listas


1 <! DOCTYPE html>
2 < html>
3 <body>
4
5 <h2>Lista no ordenada< / h2>
6
7 <ul>
8 <li>c< / li>
9 <li>a< / li>
10 <li>b< / li>
11 < / ul>
12
13 <h2>Lista ordenanda< / h2>
14
15 <ol>
16 <li>c< / li>
17 <li>a< / li>
18 <li>b< / li>
19 < / ol>
20
21 </body>
22 </ html>

2.11 Ejemplo 11: Bloques


Un elemento especial es el < di >. El elemento < div > esta hecho para poder
contener a otros elementos.
1
2 <! DOCTYPE html>
3 < html>
4 <body>
5
6 <div style= " b a c k g r o u n d - c o l o r : b l a c k ; c o l o r : w h i t e ; " >
7 <h2>DIV< / h2>
8 <p>La etiqueta div se emplea para definir un bloque de
contenido o seccion de la pagina , para poder

6
aplicarle diferentes estilos e incluso para
realizar operaciones sobre ese bloque especifico.
9 < / p>
10 <p>El uso de la etiqueta div es sencillo como se
muestra en este ejemplo.
11 < / p>
12 < / div>
13
14 </body>
15 </ html>

2.12 Ejemplo 12: Video


Ingresar a la pagina http : //www.sample videos.com/ y descargar unos de
los vdeos en formato mp4, guardarlo como video.mp4.
1
2 <! DOCTYPE html>
3 < html>
4 <body>
5
6 <video width= " 400 " controls>
7 <source src= " video.mp4 " type= " video / mp4 " >
8
9 < / video>
10
11 </body>
12 </ html>
INVESTIGAR QUE FORMATOS DE VIDEOS SE SOPORTAN EN HTML5.

3 Ejercicio
Seleccionar un tema a investigar relacionado con computacion y elaborar un
documento donde integre cada uno de los elementos visto.

4 Siguiente practica
En la siguiente practica exploraremos los elementos en la version actual de
HTML, HTML5. Los elementos mas interesantes de esta nueva version son:

1. Nuevos elementos de semantica header, footer, article, y section.


2. Nuevos atributos date, time, calendar,y range.
3. Elementos graficos: svg y canvas.
4. Elementos de video: audio y video.