Trabajo 2 - TIC

Universidad: UPTAI-REGION LOS ANDES Fecha: 5-Marzo-2024
Materia: Tecnología y Comunicación (TIC)

Especialidad: Administración
Secciones: S1D1EG1 - S1D1FG1 - S1D1GG1 - S1D1HG1
Prof. Nelson Zambrano Correo: [email protected] Celular: 0414-7373870
Trabajo-Investigar
EL BUEN USO EDUCATIVO DE LAS TIC
Contenido
Presentación
1. Principios sobre el buen uso de las TIC
1.1 Alumnado
1.2 Familia
1.3 Profesionales de la enseñanza
2. Riesgos en el uso de las TIC
2.1 Problemas psicológicos/académicos
2.2 Problemas sociales
2.3 Problemas de salud física
2.4 Consejos generales para evitar estos problemas
3. Otros problemas: Ciberdelitos
3.1 Violación del derecho a la imagen y a la intimidad.
Privacidad.
3.2 Ciberbullying (Ciberacoso)
3.3 Grooming (Acoso sexual)
3.4 Sexting (imágenes y vídeos pornográficos de menores)
3.5 Phishing (suplantación de identidad)
3.6 Correos falsos (hoax, bulos, cadenas, spam-[ son cadenas de
mensajes electrónicos que intentan hacer creer al que los recibe
algo que es totalmente falso])
3.7 Acceso a cuentas de correo, perfiles de redes sociales, etc
3.8 Virus, malware (programas maliciosos)
4. Fuentes consultada
5. 4.1 Libros
4.2 SITIOS WEB generalistas
4.3 SITIOS WEB de temas concretos
Nota: Elaborar el contenido en Diapositiva y agregarle imágenes.
Elaborado por: Nelson Zambrano

Aprendiendo HTML5
 Conceptos básicos de HTML.
 Normas elementales en HTML.
 Videotutoriales de HTML y HTML básico.
 Como hacer buenas páginas en HTML.
Conceptos básicos de HTML

HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato
a las diferentes partes de una página web.
Para toda persona interesada en crear páginas web es importante conocer al menos
nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas
las web, desarrollar sitios con más flexibilidad y mejor construidos.
Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en
negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir
imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea
importante para hacer páginas web, mejor dicho imprescindible.
Etiquetas básicas de HTML

 <html>: indica el comienzo del documento HTML.
 <head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>)
de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
 <body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web.
En el body van los textos, las imágenes y todos los contenidos de la web.
 <h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados
textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos
del resto del texto. Son importantes en el posicionamiento en buscadores.
 <a>: define los enlaces.
 <table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.
 <p>: el texto dentro de esta etiqueta forma un párrafo.
 <img>: imágenes.
 <ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso
de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos
listas ordenadas.
 <b> y <strong>: se utilizan para resaltar el texto.
 <u>: texto subrayado.
 <i> y <em>: texto en cursiva.
Introducción
Cada página HTML debe constar de dos secciones:

1. El HEAD o cabecera, donde está la información sobre la página web, como el título, una breve
descripción y algunas palabras clave. También puede contener información de estilos (CSS) y
librerías JavaScript.
2. El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su navegador.
Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:
 <html> significa el inicio (y final) del documento.

 <head> significa el inicio (y final) de la sección de cabecera del documento.
 <title> Es el título del documento. Esto se muestra por la mayoría de los navegadores como
título de la ventana, cuando agregas una web a favoritos, etc. Los motores de búsqueda
como Google suelen utilizarlo también como título en los resultados de búsqueda, por lo que
es muy importante para la optimización de la página web y el SEO en general. Por todo esto,
debes escoger muy bien el título de cada página de tu sitio web y procurar que todos sean
únicos y descriptivos.
 <body> significa el inicio (y final) del contenido visible del documento (lo que ve el usuario
final).
Estructura básica en HTML

Un ejemplo completo de un documento HTML sería (ojo, sólo la estructura básica):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título de ejemplo</title>
</head>
<body>
<p>¡Esta es mi web!</p>
</body>
</html>
Ejemplo de página básica

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Título de la página</title>
</head>

<body>
<h1>Encabezado de la página</h1>
<h2>Encabezado de menor tamaño</h2>
<p>Este es el texto de un párrafo.</p>

<p>Este es el texto de otro párrafo. Dentro de este
párrafo,
pueden ir palabras <strong>en negrita</strong>, <em>en
cursiva</em> o lo
que quieras.</p>
<p>También podemos poner listas como la siguiente:</p>

<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>
Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:

En la parte superior del código siempre debemos tener una declaración para definir el
tipo de documento que estamos por desplegar, el doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Es muy común olvidar dar un Doctype a nuestros sitios, ya que al ser un factor técnico es
fácil de omitir, además sin un Doctype definido nuestra web sigue funcionando.
Entonces, ¿por qué ponerlo? porque si no lo haces el navegador no va a saber qué lenguaje
estás utilizado y es muy probable que interprete mal algunos usos, lo que va a provocar
errores en tu página y que no se visualice de manera correcta.
Aquí mostramos ciertos tipos de Doctype:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Después de definir el tipo de documento empieza la codificación del contenido.
En primer lugar utilizamos el elemento “html” para indicar el inicio de nuestra página web.
Es considerado el elemento raíz.
Es necesario especificar el idioma principal en el que escribiremos. Para eso usamos el

atributo “xml:lang” en elemento “html”. Su valor estará representado por la abreviación del
idioma que escogimos, si por ejemplo el idioma principal de nuestra página es el Español,
entonces el valor que recibirá el atributo será “es”, mientras que si es el inglés utilizaremos
“en”.

...
</html>
Después, dentro del elemento “html”, habrá otros dos que llevarán por nombre “head” y
“body”.
 El primer elemento contenido dentro de la etiqueta “html” es la llamada cabecera,

identificada por la etiqueta “head” y que se encarga de contener información relativa al
documento, tal es el caso de la etiqueta “title” que se coloca dentro de la cabecera
para mostrar el título de la página que se mostrará en la barra superior de la ventana
del navegador.
 Después de tener bien definida la estructura de “head”, pasamos a declarar al
elemento “body” el cual tendrá como función mostrar todo el contenido que es visible
por el usuario. Por ello dentro de él se pueden usar la mayoría de las etiquetas con las
que cuenta XHTML.


<head>
...
</head>
<body>

</body>
</html>
Normas elementales en HTML

Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya
que esto hace que sea más fácil seguir tu propio marcado y que sea más rápido de leer.
Además, en XHTML todas las etiquetas deben cerrarse, por lo que te será más fácil si
cambias de uno a otro.
Ejemplo:
<html>
...
</html>
Con frecuencia verás diseños HTML con código indentado como el que se muestra a
continuación, es decir, código tabulado con sangrías, de forma que los bloque de texto se
mueven hacia la derecha insertando espacios para separarlos del texto adyacente que forme
otras estructuras diferentes.
Esto hace que sea más fácil leerlo y comprobar qué etiquetas de cierre se refieren a qué
etiquetas. Por ejemplo, esto es claramente erróneo:
<p>
<strong>
texto en negrita
<em>texto en negrita y cursiva
texto sólo en cursiva
</em>
</p>

Sin embargo, esto es válido:
<p>
<strong>
texto en negrita
<em>
texto en negrita y cursiva
</em>
</strong>
<em>
texto solo en cursiva
</em>
</p>
Etiquetas, elementos y atributos HTML
Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la
mayoría de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una
representación interna de lo que leyó.
Esta representación interna se conoce como un elemento. Entonces, el navegador “decide”

cómo mostrar el elemento en la pantalla. Además, no todos los elementos se muestran en
pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no
los creaste en tu código fuente (como el HTML, HEAD o BODY).
Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede

aceptar el parámetro HREF, que lo convierte en un enlace. Estos parámetros son conocidos
como atributos, y se crean así:
<a href="nombre-de-archivo.html">Texto del enlace</a>
Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en
cualquier circunstancia.
Algunos diseñadores web tienden a utilizar mayúsculas para destacarlos en el código fuente,
otros escriben todo en minúsculas para hacerlos más fáciles de traducir a XHTML más tarde
si es necesario.
Mi consejo es que adoptes esta segunda opción, lo lógico es con el tiempo acabar creando
páginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.

Sintaxis de XHTML
HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado
en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan
información adicional através de atributos.
Por su parte XHTML es una versión mejorada de HTML, por lo que busca tener una
sintaxis más estricta que las versiones anteriores de este lenguaje de marcado y tiene menos
tolerancia ante errores de mal uso de etiquetas.
Si seguimos una correcta codificación no tendremos ningún problema y obtendremos todos

los beneficios del lenguaje.
La regla básica para la estructuración de xHTML es saber utilizar de manera correcta cada
parte de un elemento, tener conocimiento de la función que cumple cada pedazo de código y
qué clase de contenido albergará.
Tomemos la siguiente línea para explicar esto:
<a href="https://www.lawebera.es">La Webera</a>
Lo que tenemos aquí es un elemento de anclaje que se encarga de definir un enlace hacia una
dirección. Esta línea de código está compuesta por varias partes, una etiqueta de apertura definida
por:
<a href="https://www.lawebera.es">
La cual tiene la función de iniciar el elemento, una etiqueta de clausura:
</a>
Cuya función es terminar dicho elemento, un atributo “href” que se encarga de establecer una
propiedad que en este caso es un link hacia la dirección que especificamos con la cadena
“https://www.lawebera.es”, que se convierte en el valor del atributo, y finalmente tenemos “La
Webera” que es a lo que llamaremos el contenido del elemento.
Reglas para manejar etiquetas
Existen reglas simples de seguir diseñadas para tener un manejo correcto de etiquetas con XHTML.
Debemos recordar que xHTML no es muy distinto a su predecesor, por lo que no tenemos que
olvidarnos de lo que ya sabemos, simplemente tenemos que omitir las malas prácticas a las que
el HTML no estricto nos acostumbró.
En primer lugar tenemos que definir que XHTML requiere que todas las etiquetas y atributos sean
escritos en minúsculas, por ejemplo si queremos declarar un elemento de tipo párrafo tenemos que
escribir su etiqueta de la siguiente manera:
<p>
Ya que si escribimos:
<P>
No cumple con esta regla y por lo tanto no puede ser considerado un correcto código
XHTML.
El segundo aspecto a considerar es que todas las etiquetas deben cerrarse, es decir
deben tener una contraparte compuesta por una diagonal antepuesta al nombre de la
etiqueta, siguiendo con el ejemplo del párrafo, una vez que introducimos el contenido
debemos cerrar la etiqueta de la siguiente manera:
</p>
Existen excepciones donde un elemento no tiene contenido, tal es el caso de los saltos de
línea “br” o algunos elementos de formulario como los “input”.
En estas situaciones no hay que incluir una etiqueta de cierra explícita, pero si se debe de
agregar la diagonal al final de la etiqueta de apertura de la siguiente manera:
<br />
La tercera regla nos indica que todos los atributos que agreguemos a un elemento deben
de tener siempre un valor y estos deben de ir entre comillas, por lo que quedaría una
línea como esta:
<a href="https://www.lawebera.es">La Webera</a>
En cuarto lugar tenemos que los elementos deben estar correctamente anidados, es
decir que los elementos incluidos dentro de otros se cierren correctamente antes de cerrar el
elemento padre. Podemos tener líneas como esta:
<p><a href="https://www.lawebera.es">La webera es un sitio

genial</a></p>
En este caso tenemos que cerrar primero el anclaje y después el párrafo pues de esta
manera respetamos la anidación y la jerarquía de elementos.

Atributos XHTML de uso común
Existe un grupo de atributos que se pueden utilizar en la gran mayoría de las etiquetas, éstos
son catalogados como de uso común y se pueden especificar aún más en base a su función,
por lo que encontraremos atributos básicos, de internacionalización y de eventos.
Atributos XHTML básicos

Los atributos básicos son aquellos que usamos prácticamente en todos lados para rastrear y
reconocer elementos, nos referimos a “class”, “id” y “title”, incluso “style” puede caer
dentro de esta categoría aunque preferimos mantener al margen dicho atributo ya que las
hojas de estilo cumplen mejor con esa función.
Los identificadores están relacionados con el atributo “id” y se utilizan para dar una
asociación única al elemento, lo que permitirá manipularlo ya sea con JavaScript o CSS.
Como ya se dijo, es único, por lo que no se debe repetir en otro elemento, en caso de que
queramos agrupar distintos elementos con una misma asociación entonces tendremos que
usar una clase.
Aquí tenemos un ejemplo de como utilizar identificadores para cada elemento de una lista:
<ul id="ciudades">
<li id="vlc">Valencia</li>
<li id="gdl">Guadalajara</li>
<li id="blb">Bilbao</li>
</ul>
Gracias a estos identificadores podemos en un futuro localizar cada elemento de la lista sin
necesidad de recorrerla.
Las clases por su parte están relacionadas con el atributo “class”, y nos sirven para cuando
hay más de un elemento que necesita una asociación.
Si usamos el ejemplo de la lista, podemos agregar una clase que sirva para asociar todos los
elementos a los que les agregamos un identificador.
<ul id="ciudades">
<li class="spain" id="vlc">Valencia</li>
<li class="spain" id="gdl">Guadalajara</li>
<li class="spain" id="blb">Bilbao</li>
</ul>
Lo que hicimos en el ejemplo es abarcar todos los componentes de la lista con una sola
clase a la que llamamos “spain”, ya que todas las ciudades listadas pertenecen a este país.

Por su parte, “title” se encarga de añadir un título a un elemento, es quizás menos
utilizado que los dos anteriores atributos pero aún así es importante ya que nos da una idea
muy general de lo que contiene el elemento.
Este atributo tiene la ventaja de ser identificado por los lectores de pantalla y motores de
búsqueda por lo que ayuda a mejorar la accesibilidad a la información.
Atributos XHTML de internacionalización

También existen atributos que son utilizados para atender asuntos de internacionalización, es
decir el lenguaje que estamos utilizando en la página y la manera en que se encuentra el
contenido.
Dentro de esta categoría encontramos a “dir” que se encarga de decirnos la dirección

que tendrá el contenido, es decir de izquierda a derecha para textos occidentales o de
derecha a izquierda para escritura árabe.
También encontramos a “xml:lang” que especifica el idioma del contenido, los valores
que puede tomar son la abreviación del idioma, como por ejemplo “es” para español o “en”
para inglés.
Atributos XHTML de eventos

Existe una clase de atributos utilizados para invocar funciones de JavaScript mediante el
manejo de eventos, durante mucho tiempo fueron la mejor alternativa para llevar a cabo esto,
pero actualmente su uso no se recomienda pues no cumplen con los estándares.
Entre dichos atributos encontramos a onclick, ondblclick, onmousedown, onmouseup,

onmouseover, onmousemove, onmouseout, etc.
El mal uso de etiquetas HTML

Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores
que aparecen una y otra vez, estos errores suelen ser producidos por los hábitos que
arrastramos de nuestros primeros días en el mundo de la maquetación web, o por
desconocimiento sobre la verdadera función de cada etiqueta.
Vamos a ver las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de
especificar en que fallamos y de que manera podemos usarlas correctamente.
Etiqueta “br”
Hasta la aparición de CSS, utilizar br era una de las alternativas para todo lo referente a
espacios entre dos bloques de elementos.

Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o
contenido, su función es únicamente dar un salto de línea en una oración.
Si lo que deseas es tener espacio entre un elemento y otro entonces es recomendable añadir
esos espacios mediante CSS, lo que nos permitirá determinar la distancia entre los
elementos.
Etiqueta “div”
Esta etiqueta se ha convertido en una de las más utilizadas en los últimos años.
La etiqueta “div” vino a cambiar la manera en que diseñábamos la estructura de nuestras

páginas, permitiendo establecer capas y niveles con los cuales, mediante el apoyo de CSS,
podíamos adaptar nuestro sitio.
Pero su implementación se fue haciendo más común y para situaciones donde realmente no
debería de usarse.
Hay sitios que basan prácticamente toda su estructura de elementos en “divs”, incluso para
mostrar elementos de texto o imagen, esto está totalmente mal.
No tenemos que rodear todos los elementos de un sitio con un “div”, ni mucho menos
utilizarlos en lugar de etiquetas cuya función especifica es la que estamos haciendo, como
mostrar una imagen.
Es perfectamente aceptable utilizar la etiqueta “div” para definir la estructura de la página,

pero siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los
elementos de tu página, etiquetas como el párrafo y las listas pueden ser una opción mucho
más semánticamente correcta.
Etiqueta “title”
Una etiqueta fundamental en cualquier estructura de código HTML es “title”, su función es
básica para el sitio ya que sin ella nuestra página no tendría un título que indique de que trata
el contenido que estamos por ver.
El problema es que su uso se ha venido degradando para convertirla en una etiqueta más de
“meta-data” y hoy en día el título se usa para mejorar el SEO. Esto no es un problema, el
problema es abusar.
Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos

nada importante en ella o la llenamos de información que realmente no tiene cabida.
Debemos evitar estos dos extremos y utilizar las etiquetas “meta description” para esta clase
de información más extensa.

Etiqueta “img”
No uses imágenes para casos donde realmente no se requiera, no tienes que convertir todo
en imágenes.
Recuerda que esto es malo para que la página pueda ser analizada por motores de
búsqueda, todo lo que sea contenido de texto, no debe ir en una imagen.
A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de
“alt”, cuya función es contener una descripción precisa de la imagen, sin embargo la mayor
parte del tiempo tiene texto irrelevante.
Consejos útiles para realizar un mejor código

Simplificar
Cuando se trata de diseñar una página web, debemos tener muy en cuenta al usuario de la
misma. Una página web debería tener solo aquello que es necesario.
Puede verse en muchas ocasiones, que los diseñadores terminan generando códigos
extremadamente confusos y largos, para diseños que pueden conseguirse de forma más
sencilla.
Un elemento clave para la generación de un código ordenado es la planificación del diseño.

Todo diseño debe ser elaborado de afuera hacia adentro, es decir, de los elementos
contenedores principales hacia los menores.
Esto quiere decir que cuando se inicia una página web, los primeros elementos que deben
ser determinados mediante el uso de HTML son los contenedores, como “body”.
A partir de allí, se debe generar las capas de cada sección de la estructura de la página
(cabecera, columnas, pie) para luego seguir con los detalles necesarios dentro de cada una
de ellas.
Tratar de no utilizar “hacks”

Los hacks son trucos mediante los cuales se pueden sortear algunos de los problemas
generados por las diferencias existentes en la interpretación del código por parte de los
navegadores.
En la mayoría de los casos no son necesarios. Si aprendemos a aceptar las diferencias

normales entre navegadores, en lugar de exigir que tu diseño se vea exactamente igual en
todos, produciremos un código más limpio y fácil de mantener.
Evitar el abuso de los posicionamientos absolutos

Una tendencia natural en los diseñadores recién iniciados, es al abuso de los
elementos posicionados de forma absoluta (position: absolute), debido a que con ello se
suele tener un mayor control de donde se pintan los elementos.
Las páginas generadas en forma exclusiva o casi exclusiva con posicionamiento absoluto,
tienen entre otros inconvenientes, la rigidez e inflexibilidad.
Esto hace prácticamente imposible pensar en una página con contenidos dinámicos,
como un blog, ya que la extensión de los contenidos será variable y originará diferentes
errores, como desbordamientos de capas y superposición de contenidos.
Evitar el abuso de los ‘div’

Otro de los errores frecuentes entre principiantes es el pretender resolver todo mediante
la utilización de capas.
No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos

casos existen los elementos semánticamente correctos dentro de HTML.
Muchos div’s pueden ser reemplazados por la utilización correcta de listas, párrafos, títulos,
etc.
Diseño flexible
En los últimos años se ha producido una explosión en la variedad de resoluciones de pantalla
existentes y dispositivos.
También se ha producido un incremento enorme en el acceso a internet con otros tipos de

dispositivos diferentes a los clásicos ordenadores.
Todo esto hace necesario que los diseños sean cada vez más flexibles, lo que se
llama responsive, de forma que puedan visualizarse de forma correcta independientemente
del dispositivo que se utilice para acceder a las páginas web.
Tenemos un artículo concreto que habla de esto, no dejes de leer como hacer un diseño
responsive.
Comprobaciones en
diferentes navegadores

Las conocidas diferencias existentes entre navegadores hace necesario que se utilice alguna
forma de comprobar la visualización de las páginas que se están diseñando en ellos.
Consulta nuestra guía para saber comprobar la compatibilidad de tu web con distintos
navegadores.
Escribir las etiquetas en minúsculas

A pesar de que en HTML se pueden escribir las etiquetas tanto en minúsculas como en
mayúsculas, debemos tener en cuenta que en XHTML esto no es correcto al igual que en
XML, por lo que si quieres evitar problemas futuros, es recomendable escribir siempre las
etiquetas con minúsculas.
Esto estaría mal:
<DIV><P>Hola Mundo</P></DIV>
Y esto bien:
<div><p>Hola Mundo</p></div>
No olvidar el cierre de las etiquetas

Algo que ya hemos explicado más arriba y representa un error, es olvidar el cierre de las
etiquetas.
Cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los
navegadores simplemente entienden que dicha etiqueta continúa abierta.
Además de producir dificultades y errores en la maquetación de la página, se trata de errores

en el uso del lenguaje, por lo que el código no pasará la validación.

Separar el código CSS del código HTML
La utilización de etiquetas como <font> o <u>, son cosa del pasado. En la actualidad está
casi desterrada la inclusión de etiquetas HTML pertenecientes a la presentación dentro del
código.
Se recomienda manejar los estilos CSS en un archivo por separado para mantener una
mejor organización del sitio. Usar archivos únicos y exclusivos para las hojas de estilo hace
que se facilite su edición y administración.
Entre los principales beneficios de utilizar un archivo externo para guardar nuestro código
CSS, se encuentra el hecho de que este archivo se puede utilizar para varios sitios y
páginas de manera simultánea, sin necesidad de repetir el código de un lado a otro.
De igual manera, el manejar un archivo CSS representa un ahorro de tiempo al momento de

la ejecución y despliegue de las páginas HTML. Al utilizar únicamente un archivo para todo el
sitio, este se guarda en el caché del navegador lo que conlleva a un tiempo menor de
respuesta y una carga más rápida.
Es importante recalcar el hecho de que las hojas de estilo deben incluirse dentro de las
etiquetas “head”, de la siguiente forma:
<head>
...
<link rel="stylesheet" type="text/css"
href="mi_estilo.css" />
</head>
Coloca los scripts al final del HTML

Antes se acostumbraba cargar los archivos relacionado a JavaScript entre las etiquetas
“head” del código.
Esto provocaba una demora en el tiempo de respuesta del sitio, ya que el navegador debe
cargar primero todos los scripts con sus funciones antes de empezar a pintar los elementos
en pantalla.
Es por esta razón que en la actualidad se recomienda agregar los scripts al final de
nuestro código HTML, justo antes del cierre de la etiqueta “body”:

<body>
...
<script type="text/javascript" src="mi_script.js" />
</body>
Con esto lograremos que la página se cargue más rápido ya que el navegador no tiene que esperar a
cargar los scripts y puede ir pintando elementos en pantalla, lo cual hace que el usuario obtenga una
respuesta casi inmediata.
Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el
comienzo de la página; <head>, que contiene información más descriptiva sobre el
sitio; y <body>, que conforma todos los elementos visibles de la página.
Como puedes notar, todas las etiquetas están constituidas al inicio y al

final por los signos < y >, que representan precisamente la apertura y el
cierre de cada elemento para que el lenguaje HTML pueda funcionar. En
este sentido, existen dos tipos de etiquetas HTML:
 Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las
que conoces: < >.
 Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.
En la siguiente imagen te mostramos un ejemplo de cómo se ve una

etiqueta básica de HTML con su apertura y cierre:

Los atributos se refieren a toda la propiedad adicional de las etiquetas
HTML. Esto significa que definen cualquier elemento de la página web; por
ejemplo, ancho, entrada, texto. Estos también ayudan a almacenar
información en metaetiquetas con la atribución de nombre, contenido y
tipo.
Ejemplo de una estructura HTML básica
Ya que conoces qué incluye la estructura HTML básica, te mostramos de

forma más desglosada un ejemplo que te servirá para visualizar mejor los
elementos previamente mencionados.
En la imagen siguiente puedes ver cómo se visualiza la estructura básica

en lenguaje HTML para formar una página web:

Cualquier página web debe contener al menos este código
para desarrollarse correctamente. Te explicamos al detalle el significado y
contenido de cada etiqueta a continuación.
 <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada
actualmente).
 <html> </html>: es el elemento raíz y es el más importante dentro de la estructura
HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página
web.
 <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no
se muestran al usuario, solo describen referencias de la página, por ejemplo, título o
página CSS.
 <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y
engloba datos desde textos hasta enlaces.
Dentro de la etiqueta <body> se desglosan más etiquetas y elementos

como:

 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.
 <p>: sirve para indicar la apertura y cierre de un párrafo.
 <div>: significa «división» y funciona para crear secciones o agrupar contenidos.
 <span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar
elementos en línea.
 <b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado,
correspondientemente.
 <a>: permite agregar un vínculo o enlace.
 <img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas
sirven para insertar una imagen, audio, video o incrustar un documento HTML.
 <form>: funciona para insertar un formulario.
 <label>: representa la etiqueta para un elemento en una interfaz de usuario.
 <input>: crea controles interactivos para formularios, con el fin de recibir datos del
usuario.
Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el

código marcará error y los cambios no se visualizarán correctamente en
la página web.
En la siguiente imagen te compartimos un ejemplo más elaborado de cómo

se vería la estructura HTML ya conformada con mayor contenido. Recuerda
que esta solo representa elementos muy básicos.
De esta manera puedes estructurar tu página web con tantos elementos y

etiquetas que consideres necesarios. Si has cometido algún error en la
apertura o cierre de alguna etiqueta podrás darte cuenta al visualizar una

página de error, que el navegador se quede en blanco o simplemente al no
ver configurado ningún cambio.
Para hacer una estructura HTML es necesario crear un documento HTML

con la extensión .html. Hacerlo es más simple de lo que crees, pues solo
debes abrir algún desarrollador de texto, como lo puede ser el bloc de
notas de tu sistema y comenzar a escribir el texto y las etiquetas
necesarias para desarrollar tu página web. También puedes hacer uso de
otras herramientas en línea como Tryit Editor de W3Schools.
La estructura HTML puede ser tan extensa como lo necesites. Sin

embargo, con los elementos básicos que te compartimos en esta
publicación puedes comenzar a explorar y crear algunos aspectos de
diseño de tu página web. Si bien, el lenguaje HTML puede ser un poco
complejo, con un algo de práctica puedes llegar a dominarlo hasta
construir un sitio completo con los atributos y cualidades que deseas

Trabajo 2 - TIC

Cargado por

Copyright:

Formatos disponibles

Trabajo 2 - TIC

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Trabajo 2 - TIC

Cargado por

Copyright:

Formatos disponibles

Universidad: UPTAI-REGION LOS ANDES Fecha: 5-Marzo-2024

Materia: Tecnología y Comunicación (TIC)

Elaborado por: Nelson Zambrano

Conceptos básicos de HTML

Etiquetas básicas de HTML

Elaborado por: Nelson Zambrano

 <html> significa el inicio (y final) del documento.

Estructura básica en HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Ejemplo de página básica

Elaborado por: Nelson Zambrano

<p>Este es el texto de un párrafo.</p>

<p>También podemos poner listas como la siguiente:</p>

Elaborado por: Nelson Zambrano

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Aquí mostramos ciertos tipos de Doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

Después de definir el tipo de documento empieza la codificación del contenido.

Es necesario especificar el idioma principal en el que escribiremos. Para eso usamos el

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

 El primer elemento contenido dentro de la etiqueta “html” es la llamada cabecera,

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

Normas elementales en HTML

Elaborado por: Nelson Zambrano

Etiquetas, elementos y atributos HTML

Esta representación interna se conoce como un elemento. Entonces, el navegador “decide”

Algunos elementos aceptan parámetros adicionales. Por ejemplo, el elemento A puede

<a href="nombre-de-archivo.html">Texto del enlace</a>

Elaborado por: Nelson Zambrano

Si seguimos una correcta codificación no tendremos ningún problema y obtendremos todos

Tomemos la siguiente línea para explicar esto:

<a href="https://www.lawebera.es">La Webera</a>

La cual tiene la función de iniciar el elemento, una etiqueta de clausura:

Reglas para manejar etiquetas

<a href="https://www.lawebera.es">La Webera</a>

<p><a href="https://www.lawebera.es">La webera es un sitio

Elaborado por: Nelson Zambrano

Atributos XHTML básicos

Elaborado por: Nelson Zambrano

Atributos XHTML de internacionalización

Dentro de esta categoría encontramos a “dir” que se encarga de decirnos la dirección

Atributos XHTML de eventos

Entre dichos atributos encontramos a onclick, ondblclick, onmousedown, onmouseup,

El mal uso de etiquetas HTML

Elaborado por: Nelson Zambrano

La etiqueta “div” vino a cambiar la manera en que diseñábamos la estructura de nuestras

Es perfectamente aceptable utilizar la etiqueta “div” para definir la estructura de la página,

Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos

Elaborado por: Nelson Zambrano

Consejos útiles para realizar un mejor código

Un elemento clave para la generación de un código ordenado es la planificación del diseño.

Tratar de no utilizar “hacks”

En la mayoría de los casos no son necesarios. Si aprendemos a aceptar las diferencias

Evitar el abuso de los posicionamientos absolutos

Elaborado por: Nelson Zambrano

Evitar el abuso de los ‘div’

No siempre es necesaria la utilización de capas para generar elementos, ya que en muchos

También se ha producido un incremento enorme en el acceso a internet con otros tipos de

Elaborado por: Nelson Zambrano