3p c9 Pagina web Completa


Crear una carpeta para guardar todos los archivos del ejercuicicio.


Abro un bloc de notas y escribo el codigo.

Código inicial escrito en HTML


Guardar en carpeta creada y correctamente mi pagina web en formato HTML. En nombre index.html. En tipo verificar que este todos los archivos.



Abro mi pagina web en la carpeta para ver si ya esta creada correctamente.


TODO EL CONTENIDO DE MI PAGINA VA DENTRO DEL CUERPO DEL PROGRAMA <body> 


Insertar imagen (Descarga 3 imagenes de internet, revisa el formato en el que se descargan)

<img src="nombreimagen.formatoimagen">

<img src="leon.jpg">

<img src="leon.png">

<img src="leon.gif">

Cambiar tamaño a mi imagen

<img src="leon.jpg" width="300" height="200">

Centrar imagen

<center><img src="leon.jpg" width="300" height="200">

Insertar Hipervínculo

<a href="paginaweb">Textovisible</a>

Ejemplo:

<a href="www.eltiempo.com">Haz clic para entrar a la pagina del tiempo</a>

Si no abre la pagina es por que le falta el World Wide Web(Se recomienda abrir la pagina y copiar la direccion desde la barra de direcciones)

<a href="https://www.eltiempo.com">Haz clic para entrar a la pagina del tiempo</a>

Insertar Hipervínculo a una imagen

<a href="https://www.eltiempo.com"><img src="leon.jpg" width="500" height="400"></a>

Fuentes de texto

<p>Hola este es un texto</p>

<p style="font-family: Arial">Este texto usará Arial</p>

<p style="font-family: Lucida Console;color:blue">Este texto usará Arial</p>

<p style="font-family: Lucida Console;color:blue;font-size: 32px">Este texto usará Arial</p>

<p style="font-family: Lucida Console;color:blue;font-size: 32px;background-color: blue">Este texto usará Arial</p>

Colores personalizados

Si quiero escoger colores personalizados, abro paginas en internet de colores Hexadecimal. Escojo tabla de colores y copio el hexadecimal del color que prefiera. 

Ejemplo:


y reemplazo el nombre del color por el código hexadecimal. blue por #9AE630

Ejercicio:

Crear 10 textos con diferente tipo de letra, diferente color, diferente fondo y diferente tamaño.

Fondo de pagina web

Busco y modifico el código:

<body style="background-color: red">

Cambiamos el color por un color en formato Hexadecimal.

MODIFICAR Y UNIFICAR TODO EL TEXTO DE MI PAGINA QUE ESTE DENTRO DE <P>

Escribo todo lo que esta dentro de la etiqueta <style>(frente al color rojo).


Tablas en HTML
Creo la tabla con <table>, las filas con <tr> y las columnas con<th> o <td>.

<table>

  <tr>

    <th>Encabezado 1</th>

    <th>Encabezado 2</th>

  </tr>

  <tr>

    <td>Dato 1</td>

    <td>Dato 2</td>

  </tr>

</table>

Para ponerle borde a mi tabla modifico:

<table border="3">

Ejercicio: Hacer una tabla con los siguientes números.


Color de celda

<td bgcolor="red">Dato 1</td>

Sabemos que podemos reemplazar el nombre del color, por código hexadecimal.

<td bgcolor="#FFF085">Dato 1</td>


Color de Fila

 <tr bgcolor="#FF8904">

    <td>Dato 3</td>

    <td>Dato 4</td>

    .................................

  </tr>


Combinar celdas en tablas
 colspan="2" esto nos indica que dos celdas de dos columnas se van a combinar.

Ejemplo: 

<tr>

    <th colspan="2"> 1</th>

    <td> 2</td>

  </tr>

rowspan="3" esto nos indica que tres celdas de tres filas se van a combinar.

 <tr>

    <td rowspan="3"> 3 </td>

   <td> 4 </td>

<td> 5 </td>

  </tr>

 <tr>

   <td> 6 </td>

<td> 7 </td>

  </tr>

 <tr>

   <td> 8 </td>

<td> 9 </td>

  </tr>

La tabla queda:



Ejercicio, hacer la siguiente tabla: 







Ahora Crearemos una pagina web completa con 4 paginas de interaccion, con botones y hipervinculos.


Abro PowerPoint para crear los botones de mi pagina web

Luego clic en menú Insertar, Formas e inserto Rectángulo: Esquinas Redondeadas


Luego clic derecho sobre la forma y clic en Editar Texto.


Luego Escribo el nombre del botón INICIO


Luego le doy estilo en Formato de Forma, Bisel, Redondo suave.



Luego copio ese botón 4 veces



Luego a cada botón le pongo un nombre, Inicio, Imágenes, Productos y Contáctenos.
Luego, clic derecho en la línea de cada botón y clic en la opción Guardar como Imagen.



Guardo los botones como imagen, en la carpeta donde tengo mi pagina web creada.
En Tipo: escojo guardar en formato PNG que es el formato sin fondo y en Nombre: le pongo el nombre de cada botón.




En mi carpeta se deben observar los botones guardados.



Luego empiezo a editar mi código fuente para poner los vínculos correspondientes que me lleven a cada una de las paginas que voy a copiar y que luego editar.


En esta imagen podemos observar que las dos imágenes se ven en la pagina, observo que las imágenes están en la carpeta con el formato PNG y por ultimo veo el código que programo para que los vínculos lleguen a las diferentes paginas.
NOTA: El código como siempre se digita debajo de el cuerpo del programa(body).



Donde el código explicado es para:

Escribo las 4 líneas de código, 1 para cada imagen con su vinculo.

Luego, de insertar el código, guardo y reviso que en mi pagina queden los botones y que al apuntarle a cada botón me muestre el vinculo al que se dirige.

Luego voy a la carpeta y copio la pagina web



Le hago 4 copias en la misma carpeta y le cambio los nombres de las paginas, los mismos nombres que puse en el código, en los vínculos.

Ahora si voy a poder navegar en los botones de mi pagina web, sin que se rompa ningún vinculo. Pero antes, debo cambiarle a cada pagina su información para identificarla.


Le podemos escribir una línea de código que la identifique y luego llenarla con la información correspondiente. Ejemplo:

<h1> Esta es mi pagina de imágenes</h1>

y listo, solo nos queda personalizar cada pagina con la información que corresponda  y navegar por ella..














No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios (Atom)

1p C10 Delitos en internet

  7ctfq36  Código de clase