<img> Etiqueta para «pintar» una imagen en la página web.
<iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal.
<embed> Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML.
<object> </object> Utilizada llamar a un recurso externo de la web. Este recurso será tratado como una imagen, o un recurso externo para ser procesado por un plugin.
<video> </video> Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
<audio> </audio> Usada para cargar un archivo de audio o stream de audio.
<source> Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o <audio>
<svg> </svg> Se usa para llamar a una imagen vectorizada.
ETIQUETAS PARA LA CREACIÓN DE TABLAS
<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
<caption> </caption> Usada para indicar el título de la tabla.
<colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas de una tabla.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
<tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de una tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda
ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS
<form> </form> Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario.
<fieldset> </fieldset> Etiqueta que representa un conjunto o agrupación de elementos de un formulario. «Pinta» un recuadro alrededor de las etiquetas que estén contenidas dentro del <fieldset>
<legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
<label> </label> Se usa para definir el nombre o título de un control del formulario.
<input> Pinta un campo de introducción de datos para el usuario. Es de las principales etiquetas de un formulario.
<button> </button> Etiqueta utilizada para representar un botón en el formulario.
<select> </select> Input que permite una selección entre un conjunto de opciones.
<option> </option> Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
<textarea> </textarea> Añade un campo al usuario para que pueda introducir texto en unas líneas máximas de texto que el desarrollador puede definir.
<body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la página web debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este contenido será el que se muestre en la web.
<nav> </nav> Usadas para definir el contenido que será la sección de navegación de la web.
<main> </main> Se usa para definir el contenido principal del documento. Solamente puede existir uno por documento.
<section> </section> Define una sección del documento
<article> </article> Define contenido independiente de la web.
<aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido relacionado con la web pero de poca importancia
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que irá a continuación.
<header> </header> Se usan para definir la cabecera la página web. Suele contener el logotipo, menú de navegación, etc.
<footer> </footer> Usadas para definir el pie de página.
ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO
<p> </p> Etiqueta usada para escribir párrafos de texto.
<hr> Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
<pre> </pre> Usada para pegar texto manteniendo el pre formato propio del texto.
<blockquote> </blockquote> Se usan para indicar que el contenido es texto citado.
<ol> </ol> Etiquetas para crear una lista ordenada
<ul> </ul> Etiquetas para crear una lista des-ordenada
<li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
<dl> </dl> Usada para crear una lista de definiciones.
<dt> </dt> Representa un término definido por la siguiente etiqueta <dd>
<dd> </dd> Se usa para definir los términos listados antes que él.
<figure> </figure> Indica una figura ilustrada como parte del documento HTML5.
<figcaption> </figcaption> Utilizada para definir la leyenda de una figura.
<div> </div> Etiqueta común utilizada para crear un contenedor genérico.
ETIQUETAS SEMÁNTICAS PARA TEXTO
<a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML
<strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como importantes. Tiene una fuerte importancia en el SEO de la página.
<small> </small> Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autoría, u otros textos que no son esenciales para la comprensión del documento.
<cite> </cite> Para indicar el título de una obra
<sub> </sub> y <sup> </sup> Etiquetas utilizadas para representar un subíndice o superíndice.
<mark> </mark> Usada para resaltar texto
<span> </span> Etiqueta HTML sin ningún significado específico. Se usa conjuntamente con los atributos «class» o «id» para atribuirle ciertas características.
<br> Etiqueta utilizada para crear un salto de línea
El Modelo OSI (de las siglas en inglés: Open Systems Interconnection, o sea, “Interconexión de Sistemas Abiertos”), es un modelo de referencia para los protocolos de comunicación de las redes informáticas o redes de computadores. Fue creado en la década de 1980 por la Organización Internacional de Normalización (ISO).
El Modelo OSI es fundamentalmente una herramienta conceptual, de organización de las telecomunicaciones. Universaliza la manera en que la información es compartida entre redes informáticas o sistemas computarizados, independientemente de su origen geográfico, empresarial u otras condiciones que podrían dificultar la comunicación de los datos.
El Modelo OSI no es una topología de red, ni un modelo de red en sí mismo, ni una especificación de protocolos; simplemente es una herramienta que define la funcionalidad de los protocolos, para conseguir un estándar de comunicación, o sea, lograr que todos los sistemas hablen el mismo idioma. Sin él, una red tan vasta y variopinta como Internet sería prácticamente imposible.
Capas del modelo OSI
Cada capa tiene funciones específicas para garantizar la comunicación.
“HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto”.
¿QUÉ ES UNA ETIQUETA HTML?
Las etiquetas HTML son pequeños bloques de código, que indican al navegador como debe interpretar el contenido recogido entre dichas etiquetas. Todas las etiquetas HTML están compuestas por una etiqueta de apertura < >, y una etiqueta de cierre </ >. Aunque hay excepciones, como por ejemplo la etiqueta para cargar una imagen que son llamadas etiquetas huérfanas, ya que solo tienen etiqueta de apertura.
ETIQUETAS INICIALES O DE RAÍZ
<!DOCTYPE html> Indica al navegador que el documento está basado en el estándar HTML5
<html> </html> Representa la raíz de un documento HTML. Todos los demás elementos de la estructura HTML deben ser recogidos dentro de estas etiquetas.
METADATOS DEL DOCUMENTO
<head> </head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de metadatos, irán recogidas dentro de las etiquetas de apertura y cierre del head. Importante explicar que estos metadatos del documento, es información para el navegador y no contenido que será visible en la página web. A excepción de la etiqueta <title> que veremos a continuación.
<title> </title> Etiqueta usada para definir el título de la página web.
<link> Se usa para enlazar recursos externos al documento HTML. El ejemplo más común son las hojas de estilos CSS.
<meta> Etiqueta usada para definir otros metadatos que no se pueden definir con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio, o la descripción del mismo.
<style> </style> Etiquetas usadas para introducir código CSS en línea, es decir, en el propio documento HTML.
LOS COMPONENTES ELECTRÓNICOS SON MUY DELICADOS Y PODEMOS DAÑARLOS
SIN QUERER, A MENOS QUE TOMEMOS ALGUNAS SENCILLAS PRECAUCIONES CUANDO LOS MANIPULEMOS.
ELECTRICIDAD ESTÁTICA
Se produce por la acumulación de energía eléctrica. Al entrar en contacto con un material conductor, esta se descarga.
Puede causar daños a los Componentes de una PC, por lo que se deben tomar medidas para descargar la electricidad estática que pudieran haber adquirido.
LA PULSERA ANTIESTÁTICA
Una pulsera antiestática es un brazalete que colocamos alrededor de nuestra muñeca, provisto de un cable con una pinza que podemos fijar a tierra (por ejemplo, a una caja metálica) con el fin de mantenernos descargados y evitar que los componentes se dañen. Esta pulsera es un elemento indispensable en el taller del técnico y es recomendable utilizarla, ya que el menor descuido puede resultar perjudicial para el equipo que estamos reparando.
Digamos que estamos sentados frente a nuestra computadora y queremos ver algún vídeo. Tecleamos la dirección de la página que buscamos y “mágicamente” la página que buscamos aparece en nuestra pantalla.
Bueno pues en realidad no fue magia, lo que ocurrió fue lo siguiente:
El navegador genera una conexión a un servidor web, le hace la solicitud de la página que desea abrir y el servidor le entrega la página al navegador. Explicándolo de una manera más profunda ocurrió lo siguiente:
El navegador divide la URL (la dirección que escribes en el navegador) en 3 partes: Protocolo, Nombre del servidor y la Ruta. Por ejemplo en la URL “https://yosoy.dev/files/material/web/” el protocolo es “http“, el nombre del servidor es “yosoy.dev” y la ruta es “/files/material/web/“.
El navegador se comunica con otro servidor que traduce el nombre (“yosoy.dev“) a una dirección IP para que se pueda conectar a la máquina destino. A esto se le llama DNS.
Entonces el navegador crea una conexión al servidor de dicha dirección IP.
El navegador envía la solicitud de la pagina que buscamos utilizando la Ruta.
Y finalmente el servidor nos regresa la página que deseamos abrir, cuando la página viene en un formato, por ejemplo HTML, el navegador lee los comandos del archivo y muestra la página en la pantalla.
Podemos ver entonces como la web funciona en base a un modelo Cliente-Servidor, donde el cliente es nuestro navegador que envía las solicitudes al servidor Web.
