Grado 11º - Periodo 3

Lunes, agosto 30 de 2021

CLASE 7

REPASO DE HTML

Para adicionar el contenido de la cabecera podemos usas dos métodos:

El primero es este:

En este podemos copiar encima de la imagen que pusimos como fondo de la tabla.

El segundo método no nos permite escribir sobre la imagen, por lo tanto ya debes haber puesto el texto sobre ella, usando programas para editar imágenes. y lo haríamos así:

____________________________

Lunes, agosto 23 de 2021

CLASE 6

REPASO DE HTML

Para iniciar el repaso de html vamos a ejecutar lo siguiente:

1. Crear una nueva carpeta llamada pagina2 (En D, E o en tu USB).

2. Ingresa a NotePad ++

3. Cierra las pestañas que estén abiertas de clases anteriores.

4. En una nueva pestaña vamos a crear el código HTML necesario para que nos quede algo como lo que vez en la siguiente imagen.

Cada opción debe recibir el nombre que tú quieras dependiendo del tema que vas a tratar. Esas opciones son el menú que nos va a permitir navegar en el sitio.

5. Guardar el documento HTML con el nombre index.html dentro de la carpeta pagina2 que creamos en el paso 1.

Revisión al final de la clase.

__________________________________

Lunes, agosto 9 de 2021

CLASE 5

Ejercicio con la etiqueta <table>…</table> que permite insertar tablas dentro de un documento HTML

Su forma de uso es:

__________________________________

Lunes, agosto 2 de 2021

CLASE 4

ETIQUETA <img src="ruta/nombre de la imagen">

Permite insertar imágenes

ATRIBUTOS

width: Definir el ancho
height: Definir alto
border: Ponerle borde a la imagen
alt: Poner una frase que sale al poner el puntero sobre la imagen.

ETIQUETA <table>…</table>

Permite insertar tablas

Forma de uso:

<table>
       <tr>
         <td>...</td> <td>…</td> <td>…</td>
       </tr>
       <tr>
           <td>...</td> <td>…</td> <td>…</td>
       </tr>
</table>

Cada bloque <tr></tr> es una fila
Cada bloque <td>…</td> es una columna o división de la fila.

ATRIBUTOS

Border: Coloca contorno en las celdas de la tabla

Width: ’# or %’ Ancho de la tabla, en pixeles o porcentaje del ancho de la página

Align: Alinea la tabla

Bordercolor: Cambia el color del borde de la tabla

Bgcolor: Asignar color de fondo a la tabla

Nota: Para que las celdas vacías de una tabla queden expandidas introduzco el parámetro   dentro del <td> </td>.

______________________________________

Lunes, julio 26 de 2021

CLASE 3

ETIQUETA <a href="URL o Ruta">texto</a>

Inserta un hipervínculo o liga.

PROPIEDADES

Target: Este atributo se usa para indicar donde se abrirá el documento HTML.

Las opciones son:

"_new" o _"_blank" la abre en una nueva pestaña.

"_self" Abre el documento en la misma pestaña, es la que está por defecto si no definimos la propiedad.

Title: Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional.

title='Texto'

Ejercicio de clase

_____________________________

Lunes, julio 19 de 2021

CLASE 2

CREAR DOCUMENTOS HTML (Repaso)

Lo de la clase anterior:

<html>

<title>

</title>

<head>

</head>

<font face="tahoma" size="12" color="red">Este es un ensayo</font>

</body>

</html>

PONER COMENTARIOS

Los comentarios en HMTL comienzan con el símbolo de "menor que", una admiración y dos guiones, y terminan con dos guiones y el símbolo de "mayor que". O más sencillo: es una etiqueta HTML que empieza con una admiración y dos guiones y termina con dos guiones:

<p>Esto es un párrafo HTML</p>

Lo podemos usar, por ejemplo, para destacar dónde empieza y acaba una sección del contenido:

<header>Aquí metemos el contenido de la cabecera de</header>

ETIQUETA <b></b> Pone negrilla.

ETIQUETA <u></u> Pone subrayado.

ETIQUETA <i></i> Pone Cursiva

FORMATO DE PÁRRAFOS

ETIQUETA <p></p> Define el inicio y el final de un párrafo.

Propiedades de la etiqueta <p></p>

align 'alineación'

left – Izquierda
center – Centrado
right – Derecha
Justify - Justificado

Ejemplo: <p align=’left’>hola</p>

Alinea el texto al lado izquierdo

ETIQUETA <br> Inserta un salto de línea.

ETIQUETA <a href="URL"></a> Inserta un hipervínculo o liga.

Propiedades

Target: Este atributo se usa para indicar donde se abrirá el documento HTML.

Las opciones son:

"_new" o _"_blank" la abre en una nueva pestaña.

"_self" Abre el documento en la misma pestaña, es la que está por defecto si no definimos la propiedad.

title='Texto'

________________________________

Lunes, julio 12 de 2021

CLASE 1

CREAR DOCUMENTOS HTML (Repaso)

Crear una carpeta llamada pagina en Disco local C:
Crear en la carpeta pagina otra carpeta llamada imagenes

Estructura Html

<html>

<head>

</head>

<title>

</title>

<body>

</body>

</html>

Propiedades de body:

bgcolor: Poner fondo de color al documento.

background: Poner imagen como fondo del documento.

Etiquetas para formato de texto:

<h1>texto...</h1>

Permite poner la palabra HOLA con tamaños diferentes.

<font>contenido...</font>

Se usa para otorgar propiedades de fuente a los textos.

Propiedades

face: Tipo de fuente

size: Tamaño de fuente

color: Color de fuente

___________________________________