2°.
semestre
P5
FORMACIÓN FUNDAMENTAL
LECTURA
ESTRUCTURA BÁSICA DE UNA PÁGINA WEB
y Cada página comienza con: < HTML >
y A continuación, viene la cabecera, delimitada por < HEAD > < /HEAD >
y Después, el comando < BODY >, que indica el comienzo del cuerpo de la página.
y Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >
y La página acabará con < /HTML >
Las etiquetas pueden estar escritas en minúsculas o mayúsculas y no marca error por eso, pero sí
sería un error no escribirlas correctamente, lo que ocasionaría que no se mostrara correctamente
nuestra página web. Sin embargo, es recomendable que adoptemos un solo formato al escribirlas,
es decir o todas las etiquetas las escribimos sólo con minúsculas o todas las escribimos con
mayúsculas, esto para evitar que, al momento de subir las páginas al servidor, los enlaces generen
error.
Estructura:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>Encabezado de la página </head>
<body>
Colegio de Bachilleres del Estado de Baja California
</body>
</html>
61
Cultura Digital II
Etiquetas
Etiqueta: <title> </title>
Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define
en su contenido el título de la página web, misma que aparecerá en la parte superior izquierda de
la pantalla de tu navegador y en el caso de los navegadores más modernos como nombre de la
pestaña.
Sin cerrar nuestro navegador de Internet, volvemos al editor de código e incluimos el campo <title>
entre las etiquetas de apertura y cierre del encabezado (head).
Etiqueta <body> </body>
Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas:
<body>
Instrucciones HTML
</body >
Puede llevar los siguientes atributos:
Bgcolor Define el color de fondo de la página.
Text Define el color del texto de la página.
Link Define el color de los vínculos en la página.
Background Define el archivo gráfico que será desplegado como fondo.
Bgcolor Define el color de fondo de la página.
Uso de colores en una página Web
En RGB se pueden llegar a tener 16 millones de colores en una página web. Existen dos formas
para aplicar colores:
1. Se especifica el color deseado directamente con el nombre del color en inglés: Ejemplo: blue,
green, yellow.
2. Se especifica el color deseado mediante números hexadecimales. Ejemplo: #RRVVAA.
Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el color
deseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la base
normal utilizada es base 10 o decimal del 0 al 9. En este caso los números validos serán del 0
al 9 añadiendo desde la A a la F. Por tanto, el número 0F será el 15, 0E será 14.
En la especificación del color utilizaremos para definir la proporción de cada color un número del 0
al FF (255), 0 indica nada de ese color y FF la mayor proporción del color.
Ejemplos de colores:
62 PROGRESIÓN 5
2°. semestre
P5
FORMACIÓN FUNDAMENTAL
Código Color Código color
#FFFFFF Blanco #000000 Negro
#FF0000 Rojo #00FF00 Verde
#0000FF Azul #FF00FF Magenta
#4F2F4F Violeta #A62A2A Café
Etiqueta <br>
La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento HTML.
La etiqueta <br> tiene el mismo efecto que un retorno de carro en una máquina de escribir. Es una
etiqueta especial, pues no precisa de etiqueta de cierre.
Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente,
con una apariencia de tercera dimensión. Esta etiqueta especial, como no necesita de cierre se vale
de los siguientes atributos:
Establece que la regla se alinee a la izquierda, centro o derecha. LEFT, CENTER
ALIGN
o RIGHT.
NOSHADE Quita el sombreado predeterminado de la regla.
WIDTH Permite especificar el ancho de la regla (en pixeles o porcentaje).
SIZE Permite especificar el alto de la regla (en pixeles).
Etiqueta <h> (ENCABEZADOS)
Los títulos o encabezados se emplean al comienzo de una sección y ofrecen distintos tamaños
predeterminados.
Ejemplos: <h1> Título 1</h1>, <h2> Título 2 </h2> , <h3> Título 3 </h3>, <h4> Título 4 </h4>, <h5>
Título 5 </h5> y <h6> Título 6 </h6>
Párrafos (CCM BENCHMARK, 2019)
HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo posible para
adaptar el contenido de los párrafos a la ventana, a menos que los atributos NOWRAP o NOBR
estén explícitamente especificados. Dentro de un párrafo, todos los espacios, tabuladores y saltos
de línea cuentan como un espacio simple. Para colocar textos en bloques, se utiliza el par de
etiquetas <p> y </p>. Se puede utilizar el atributo align para alinear el párrafo.
Ejemplo de uso:
<p align=”center”>Este es un párrafo centrado</p>
Etiquetas para el texto
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado
de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto
los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las
denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será
un archivo texto con etiquetas que variarán la forma de su presentación.
63
Cultura Digital II
Etiqueta <font> </font>
Presenta atributos que nos permiten modificar el tamaño y color del texto incluido entre la etiqueta
de inicio y fin.
Etiqueta <img>
En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos
gráficos: GIF, JPEG o XBM. El formato más extendido y práctico es el GIF, todos los navegadores
gráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento
de gráficos que permiten grabar los gráficos o convertir gráficos a GIF.
Este formato, así mismo, utiliza algoritmos de compresión que hacen que sus archivos sean en
cuanto a sus tamaños apropiados para su transmisión por la red.
El formato GIF es más recomendado para íconos, gráficas, y el formato JPEG es más útil para
imágenes reales como paisajes y personas.
Inclusión de imágenes
La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:
<IMG SRC=”URL de la Imagen” ALT=”Texto alternativo a la imagen”>
Ejemplo de uso:
<img src=”[Link]” ALT=”Foto 1”>
Tamaño de la imagen
Es posible cambiar el tamaño de la imagen de forma que pueda ajustarse como se desee, pudiendo
ampliar o disminuir este.
El atributo HEIGHT determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla
(pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor
o menor se escalará a este tamaño.
El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También
se expresará en pixeles o en tanto por ciento.
Ejemplo de uso:
<img src=”[Link]” WIDTH=100 HEIGHT=25>
64 PROGRESIÓN 5
2°. semestre
P5
FORMACIÓN FUNDAMENTAL
Etiqueta <A> </A>
La etiqueta <A> que viene de “ancla”, denota el inicio y el final de una instrucción que contiene alguna
forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra ubicación dentro
del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrónico.
Atributos:
Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También
que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, no obstan-
te, es válido no incluir texto alguno.
Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo
a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la
dirección completa de la página incluido, por ejemplo:
<a href=”[Link] a la página web COBACHBC</a>.
En el hipervínculo distinguimos las siguientes partes:
• Las etiquetas de apertura y cierre del hipervínculo <a> y </a>
• El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el
hipervínculo dentro de las comillas.
• Un texto que es el que ve el usuario como link.
• Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la
misma ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir, en otra
ventana. Esto es útil por ejemplo si queremos abrir una página externa a nuestro sitio, pero
sin que el visitante pierda la nuestra.
Para ello utilizaremos el atributo target con alguna de las siguientes opciones más habituales:
• _blank: Abre el documento vinculado en una ventana nueva del navegador.
• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo
marco o ventana que el vínculo.
Tablas
En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:
65
Cultura Digital II
Etiqueta <table></table>
Señala el inicio y final de una tabla. Sus atributos son:
Etiqueta <th> </th>
Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una
tabla. Atributos principales:
Etiqueta <tr> </tr>
Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la
etiqueta que define filas.
66 PROGRESIÓN 5
2°. semestre
P5
FORMACIÓN FUNDAMENTAL
Etiqueta <td> </td>
La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una
tabla. Atributos principales:
Ejemplo de uso de tablas para diseñar una agenda:
<!DOCTYPE html>
<head><title>agenda</title></head>
<body background=”imagen_de_fondo.jpg”>
<h1 align=”center”><font face=”arial”>Agenda</font></h1>
<hr width=”95%” align=”center” color=”black”>
<br>
<table align=”center” border=”2” width=”80%” bordercolor=”black” bgcolor=”white”>
<tr align=”center”>
<td colspan=”6”>agenda de Valeria Mendez</td>
</tr>
<tr align=”center”>
<td>Nombre</td>
<td>Foto</td>
<td>Correo Electrónico</td>
<td>Número Telefónico</td>
</tr>
67
Cultura Digital II
<tr align=”center”>
<td> Pablo Ramírez</td>
<td><img src=”foto_pablo.jpg” width=”200px” height=”200px”></td>
<td><a href=”[Link] clic aquí para ir al correo</a></td>
<td><a href=”[Link] 661 319 1241” >llamar</td>
</tr>
<tr align=”center”>
<td> Jesús Brito</td>
<td><img src=”foto_jesus.jpeg” width=”200px” height=”200px”> </td>
<td><a href=”[Link] clic aquí para ir al correo</a></td>
<td><a href=”[Link] 686 768 3012” target=”_blank”> llamar</td>
</tr>
<tr align=”center”>
<td> Cristina Diaz</td>
<td><img src=”foto_cris.jpeg” width=”200px” height=”200px”> </td>
<td><a href=”[Link] clic aquí para ir al correo</a></td>
<td><a href=”[Link] 664 540 2724” target=”_blank”> llamar</td>
</tr>
</table>
</font>
</body>
</html>
68 PROGRESIÓN 5
2°. semestre
P5
FORMACIÓN FUNDAMENTAL
2 ACTIVIDAD Funciones de las etiquetas
Instrucciones: Después de haber revisado los ejemplos de etiquetas, llena la
siguiente tabla, explicando la función que realiza cada una de las siguientes etiquetas:
ETIQUETA FUNCIÓN
<img src="[Link]>
<img src="[Link] width=250 height=300>
<table width=80% align=center border=3></
table>
<tr> </tr>
<tr align=center></tr>
<td width=40% bgcolor="#C0C0C0">
Plantel></td>
<font size=8 face=Arial color=red>
<body bgcolor=" " text=" ">
<p align=center> </p>
<hr align=left width=100% size=10>
69
