TECNOLOGÍA LOLA
Grado:10°
Tema: HTML
Competencia:Reconoce Html como programa para diseñar páginas web a partir de código.
Material de Estudio:
HTML (Hyper Text Markup Language) es el lenguaje con el que se define el contenido de una página web; con él se escribe texto de forma estructurada a partir de etiquetas que delimitan el inicio y fin de un elemento en el documento; dado que dicho documento no sólo se compone de texto (también hay imágenes, vídeos, sonidos, entre otros) el resultado final se denomina como un documento multimedia.
Para la construcción de páginas web se trabaja en Editores de Texto en este caso usaremos Bloc de notas (no es Blog) en el cual guardaremos con extensión .html o .htm, con el fin de que el navegador pueda interpretar el código HTML y permita visualizar la página web.
Conceptos
Etiqueta:
También conocida como marca, son usadas con el fin de delimitar cada elemento que compone el documento, estas se conforman por los signos “< >” y entre ellos el nombre o identificador de la etiqueta.
<title>
Se clasifican en: etiquetas de comienzo y etiquetas de fin o cierre.
Para cerrar una etiqueta, el identificador de la misma es antecedido por “/”, es decir, “</identificador>”; generalmente toda etiqueta que se abre se debe cerrar, con el desarrollo de las clases verán que existen algunas etiquetas que no necesitan cerrarse.
Ejemplo:
<title>
</title>
Código HTML Básico De Una Página Web Sin Información:
<html>
<head>
<title> El Título de la Página </title>
</head>
<body bgcolor = "#adf098">
</body>
</html>
El Bloc de notas, es el archivo que se debe guardar con alguna de las 2 extensiones mencionadas anteriormente y en el lugar donde se indique que quedará el documento se visualizará un archivo así:
Al abrirlo se ejecutará en el navegador que se tenga predeterminado o en el que usted le indique y se verá la siguiente página:
Definiciones
A continuación se definirá cada una de las etiquetas:
<Html></Html>:
Son las etiquetas en las que estará comprendida toda la estructura del código, siempre serán la primera y la última etiqueta de todo del documento.
<Head></Head>:
Es la cabecera o el encabezado de la página web, usada para agrupar información como lo son el título, estilos y otras etiquetas que no utilizaremos; su etiqueta de inicio está justo debajo de “<html>” y se cierra enseguida.
<Title></Title>:
Pertenece al encabezado de la web, es decir, sus etiquetas tanto de apertura como de cierre deben estar dentro del head; esta hace referencia al título que aparece en la pestaña del navegador cuando se ha cargado.
<Body></Body>:
Como su nombre lo indica es el cuerpo del documento, aquí se debe encontrar toda la información que queremos que el usuario visualice (textos, imágenes, vídeos, etc.), dicha información debe estar entre las etiquetas de inicio y cierre de "body", y estas se deben ubicar justo debajo de la etiqueta de cierre del encabezado.
Atributos:
Pertenecen a las etiquetas, se definen como valores adicionales que configuran o ajustan el comportamiento de las etiquetas de diversas formas de acuerdo a los requerimientos del usuario; siempre se definen en la etiqueta de apertura o inicio de la siguiente forma:
<nombre_etiqueta nombre_atributo=”valor_atributo”>
Ejemplo:
<body bgcolor = "#123adb">
Código Hexadecimal:
Son números que se encuentra en base 16, a diferencia de un número decimal en donde solo se toman en cuenta valores del 0 al 9, en este sistema se tienen en cuenta 16 valores distintos que van del 0 al 9 y de la A a la F, tomándose A como número 10 y F como 15, es decir, se toman en cuenta valores del 0 al 15.
En HTML, el código hexadecimal se usa para representar un color, se hace a través de un grupo de seis dígitos que pueden contener números del o al 9 y letras de la A a la F antecedidos por el signo “#”.
Ejemplo:
"#012abc"
Para la web existen 216 colores seguros que se muestran a continuación:
Estos se pueden personalizar al modificar alguno de los dígitos.
Atributos y Etiquetas para el contenido de la web:
Para el fondo de la página web, este puede ser o un color o una imagen, para cada caso se pueden usar:
Bgcolor: Es un atributo que aplica color de fondo a la página web, el color a utilizar se selecciona según la especificación del sistema hexadecimal.
Ejemplo:
<body bgcolor=”#999adf”>
Background: Es un atributo que cumple la misma funcionalidad que el bgcolor, simplemente que con este asignamos una imagen de fondo, esto de la misma forma que cuando se inserta una imagen, solo utilizamos el nombre y la extensión de la imagen siempre y cuando se encuentre en la misma carpeta que el documento.
Ejemplo:
<body background=”fondo.png”>
.gif
.jpg
.jpeg
<P></P>:
Define un párrafo, el navegador coloca automáticamente un espacio antes y después de cada elemento <p>.
<Br>:
Inserta un salto de línea, esta es una etiqueta vacía, es decir, no tiene etiqueta de cierre o fin.
<Font></Font>:
Referencia la fuente con la que se va a trabajar un determinado texto, tanto la etiqueta de inicio como la de fin son obligatorias y para efectos de personalización usaremos los siguientes atributos:
-
Size: Permite modificar el tamaño de la fuente con valores que varían entre 1 y 7.
-
Color: Permite modificar el color de la fuente de acuerdo a la especificación de manejo de colores con el sistema hexadecimal.
-
Face: Permite especificar el tipo de fuente que se va a utilizar, es importante saber que solo se pueden usar fuentes que se encuentren instaladas el equipo donde se esté diseñando la página web.
Es importante saber que si estos atributos no se especifican, el navegador los asignará por defecto.
<I></I>: Aplica cursiva al texto.
<B></B>: Aplica negrita al texto.
<U></U>: Aplica subrayado al texto.
Ejemplo:
<font face=”arial” size=”4” color=”#000adf”><i><u><b>…texto…</i></u></b></font>
Repaso:
Practicar creando 3 páginas: una con color de fondo, otra con imagen de fondo y otra con un Gif de fondo. Además, agregarle un corto texto a las 3 páginas y aplicarle los atributos de la etiqueta font: face, size y color. Aplicar negrita(b), cursiva(i) y subrayado(u).
SOLO ES PARA PRACTICAR.