TALLER NUMERO TRES HTML APRENDIENDO DE LA MANO CON ALEX…
1. DIGITE
<html>
<body>
<title> ESTE ES MI COLEGIO</title>
<center>
<head>PRACTICAMDO MAS</head>
</center>
</body>
</html>
2.GUARDE en mis documentos, hasta aquí con el nombre de practica.html
3. AHORA ubiquémonos en el body e ingresemos un fondo cualquiera asi
<body bgcolor=#******>
4. GUARDE y abra nuevamente la página y tendremos un fondo.
5. SEGUIDAMENTE vamos a practicar insertando las imágenes, primero debemos tener la imagen guardada en el disco local (C),
Con el nombre en minúscula, sin espacios y con la respectiva extensión ( gif, jpg, o jpeg)
Ejemplo de imagen guardada:
gato.jpg
7. PRACTIQUEMOS INSERTAR IMAGEN:
<img src=/gato.jpg>
8. modifiquemos el tamaño, para ello se utilizan dos comandos:
Widht = ancho
Height= alto
Si modificamos el alto el ancho, el alto cambiara automáticamente, con un porcentaje o un número.
9.Modifiquemos el ancho así:
<img src=/gato.jpg widht=50%>
O también
<img src=/gato.jpg widht=200>
10. Modifiquemos el alto así:
<img src=/gato.jpg height=30%>
O también
<img src=/gato.jpg height=120>
11. También podemos modificar ambos, valores así:
<img src=/gato.jpg widht=30 height=50 >
12. inserte 5 imágenes.
13. INGRESEMOS AHORA LISTAS
NUMERADAS:
Para ello utilizamos el comando
<ol>, y debe cerrarse</ol>.
14. Para que la lista nos salga numerada (1.2.3.4.5), ingresamos el comando asi:
<ol>
<li>LA
<li>PRIMERA
<li>LISTA
<li>SALE
<li>NUMERADA
</ol>
15.VEAMOS LA SEGUNDA LISTA:
<ol type=A>
<li>LA
<li>SEGUNDA
<li>LISTA
<li>SALE
<li>CON MAYUSCULAS
</ol>
16.VEAMOS LA TERCERA LISTA:
<ol type=a>
<li>LA
<li>TERCERA
<li>LISTA
<li>SALE
<li>CON MINUSCULAS
</ol>
17.VEAMOS LA CUARTA LISTA:
<ol type=I>
<li>LA
<li>TERCERA
<li>LISTA
<li>SALE
<li>CON NUMEROS ROMANOS
</ol>
18. . INGRESEMOS AHORA LISTAS
CON VIÑETAS :
Para ello utilizamos el comando
<UL>, y debe cerrarse </UL>,
<ul type=circle>
<li>LA
<li>CUARTA
<li>LISTA
<li>SALE
<li>CON PUNTOS
</ul>
19.AHORA ingresemos tablas:
Una tabla es un conjunto organizado de datos, en forma horizontal, y vertical, en html, se reconocen filas no columnas.
Toda tabla empieza con <table> y al final se cierra </table>
.
Las filas van con <tr> y se cierran</tr>
Las celdas van con <td> y se cierran</td>
20.PRACTIQUEMOS TABLAS
<table border=5>
<tr>
<td>lunes</td>
<td>martes</td>
<td>miercoles</td>
<td>jueves</td>
<td>viernes</td>
</tr>
<tr>
<td>matematticas</td>
<td>español</td>
<td>ciencias</td>
<td>sociales</td>
<td>religion</td>
</tr>
<tr>
<td>ingles</td>
<td>fisica</td>
<td>filosofia</td>
<td>etica</td>
<td>naturales</td>
</tr>
</table>
21. PRACTIQUEMOS ENLACES
Son los vínculos que nos pueden llevar a otra pagina.
-Debes realizar una pagina principal, con un menú asi:
-Guárdala como pagina principal.html
(Todas las paginas guárdalas en (c),o disco local)
22.Ahora debes realizar cada pagina por separado, con la estructura básica y con cada una de las palabras.
<html>
<body>
<title> practicando enlaces</title>
<center>
<head>ENLACES Y MAS</head>
</center>
</body>
</html>
23. Guárdela como practica.html.
24.Haga lo mismo con cien y con palabras asi
<html>
<body>
<title> practicando enlaces</title>
<center>
<head>ENLACES Y MAS</head>
</center>
</body>
</html>
25. Guárdela como cien.html.
<html>
<body>
<title> practicando enlaces</title>
<center>
<head>ENLACES Y MAS</head>
</center>
</body>
</html>
26. Guárdela como palabras.html.
27.Regrese al pagina principal e ingrese la ruta del enlace asi:
<a href=/practica.html>PRACTICA</a>
<a href=/cien.html>CIEN</a>
<a href=/palabras.html>PALABRAS</a>
26. GUARDE Y ACTUALICE LA PAGINA, y ya podrás ver funcionando los respectivos enlaces.
¡ FELICITACIONES YA PUDES PEDIR EL TEMA PÁRA El PROYECTO FINAL EN HTML !
