Informàtica 4ESO

Trabar en Internet els seguents conceptos:

Que es HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Etiquetes HTML

Les etiquetes bàsiques d'HTML, d'obligada presència en tot document són:

<!DOCTYPE>: És l'etiqueta que permet definir el tipus de document HTML que s'empra. Existeixen tres tipus bàsics: l'estricte (Strict), el transicional (Transitional) i el de marcs (Frameset).
<html>: És l'etiqueta arrel de qualsevol document HTML o XHTML.
<head>: Defineix la capçalera del document HTML. Permet declarar metainformació del document que no es mostra directament en el navegador. Aquesta informació és d'especial rellevància pels indexadors i cercadors automàtics.
<body>: Defineix el cos del document. Aquesta és la part del document HTML que es mostra en el navegador.

Dintre de la capçalera <HEAD> hi podem trobar:

<title>: Permet definir el títol de la pàgina. En navegadors gràfics el contingut del title apareix a la barra del títol a sobre de la finestra.
<meta>: Permet definir metainformacions del document tals com l'autor, la data de realització, la codificació del document (UTF, ISO, etc.), les paraules clau i la descripció del mateix
<LINK>: Permet definir metadades complementàries a les del meta tals com el document anterior, el següent, el capítol al qual pertany el document, la pàgina glossari, etc.

Dintre del cos <BODY> hi podem trobar:

<a>: Etiqueta àncora. Crea un enllaç a un altre document o a una altra zona del mateix, segons els atributs.
<h1>, <h2>,… <h6>: capçaleres o títols del document, acostumen a distingir-se per mida.
<div>: Divisió estructural de la pàgina.
<p>: Paràgraf.
<br>: Salt de línia.
<table>: Indica el començament d'una taula, després s'haurà de definir les files amb <tr> i les cel·les dintre de les files amb <td>.
<ul>: Llista desordenada (sense numerar). Els ítems es defineixen amb <li>.
<ol>: Llista ordenada (numerat). Els ítems es defineixen amb <li>.
<dl>: Llista de definició. Hi ha dos tipus d'ítem; el dt i el dd.
- <dt>: Terme a definir.
- <dd>: Definició del terme.

Excepte unes poques etiquetes, la majoria requereixen ser tancades escrivint la mateixa etiqueta precedida d'una barra "/". Exemple: <html>…</html>

Etiquetes HTML més utilitzades

Encabezados.

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>.

Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.

A continuación vamos a mostraros el código de los seis diferentes encabezados:

<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>

Contenedores

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>. Esta etiqueta puede incluir cualquiera de los atributos mencionados anteriormente.

Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.

La etiqueta <hr> se utiliza para insertar una línea horizontal.

Etiqueta	Atributo	Efecto visual
<br/>		Salto de línea
<p> y </p>		Párrafo
<hr size=5 width=20% align=left>	SIZE WIDTH ALIGN

Negrita

Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.

La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:

Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>

Este palabra la vamos a poner en negrita y esta otra también

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).

También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:

Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>

Este palabra la vamos a poner en cursiva y esta otra también

Subrayado

Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:

<u>Así subrayaríamos una frase importante</u>

Así subrayaríamos una frase importante

Lista numerada

Mediante la etiqueta <ol> podemos generar listas con elementos numerados y ordenar los elementos que queramos y/o necesitemos, pero necesitamos tambien del uso del tag <li> para cada opcion de nuestra lista, para generarlas nos podemos basar en el siguiente código como ejemplo de listas numeradas en HTML:

<ol type=”1” start=”10”>
<li> España </li>
<li> Francia </li>
<li> Italia </li>
<li> Portugal </li>
</ol>

Donde type es el tipo de lista que puede ser 1; numéricamente, a; letras minúsculas,
A ;letras mayúsculas, i; números romanos minúsculas y I; números romanos en mayúsculas, y start es el numero o valor donde comenzara nuestra lista.

Lista Numerada

Primera opción
Segunda opción
Tercera opción

Las listas no numeradas (no ordenadas, "unordered list") comienzan con <UL> y terminan con <UL>, y sus elementos estarán entre <LI> y </LI>.

Así, las dos listas anteriores se podrían haber creado con:

<html>

<body>

<p>Esto es una lista numerada:</p>

<ol>

<li>Primera opci&oacute;n</li>

<li>Segunda opci&oacute;n</li>

<li>Tercera opci&oacute;n</li>

</ol>

<p>y esto es una lista sin numerar:</p>

<ul>

<li>Primera opci&oacute;n</li>

<li>Segunda opci&oacute;n</li>

<li>Tercera opci&oacute;n</li>

</ul>

</body>

</html>

Estructura básica de una página web.

La estructura básica de una página web es la siguiente:

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código

<html>
<head>
<title>Esto es el título de la página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>

generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.

Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.

Que va crear la primera página WEB?

¿Cómo?

En la leccion 1 vimos qué se necesita para crear un sitio web: un navegador y el Bloc de notas (o un editor de texto similar). Puesto que estás leyendo esto, lo más probable es que ya tengas abierto el navegador. Lo único que necesitas es abrir otra ventana del navegador de forma que puedas leer este tutorial y veas cómo va quedando tu nuevo sitio web al mismo tiempo.
Abre también el Bloc de notas (que se encuentra en el menú de Inicio, Todos los programas, en la sección Accesorios):
Cómo localizar el Bloc de notas

¡Y ya estamos listos!

¿Y qué puedo hacer?

Empecemos con algo sencillo. Que te parece una página que diga: "¡Hurra! Esta es mi primera página web." Sigue leyendo y verás qué sencillo es.
HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo que debería aparecer en primer lugar en la página y termina con lo que debería ir en último lugar.
Lo primero que tienes que hacer es decirle al navegador que le "hablarás" usando el lenguaje HTML. Esto se consigue con la etiqueta <html> (sin sorpresas, ¿no?). Así que antes de hacer cualquier otra cosa, escribe "<html>" en la primera línea del documento creado con el Bloc de notas.
Como recordarás de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe "</html>" un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento.
Lo siguiente que necesita el documento es una "cabecera", que proporcionará información relativa a este mismo documento, y un "cuerpo" donde se incluirá el contenido del documento. Puesto que HTML es de lo más lógico, la cabecera (es decir, las etiquetas <head> y </head>) se encuentra encima del cuerpo (o sea, encima de las etiquetas <body> y </body>).
El documento debería presentar ahora este aspecto:


 <html>

   <head>
   </head>

   <body>
   </body>

 </html>

Presta atención a cómo hemos estructurado las etiquetas introduciendo nuevas líneas (usando la tecla Enter) al igual que hemos usado sangrado (utilizando la tecla Tab). En principio, da igual cómo estructures el documento HTML; sin embargo, para que te sirva de ayuda tanto para ti y como para otros a la hora de interpretar el código fuente, y con el fin tener una buena visión de conjunto, es recomendable estructurar el código HTML de una forma nítida, con saltos de línea y sangrados, como en el ejemplo anterior.
Si el documento se parece al del ejemplo anterior, ya has creado tu primer sitio web: un sitio web especialmente aburrido y en modo alguno parecido a lo que soñabas cuando empezaste este tutorial, pero, con todo y con eso, ya es algo que parece un sitio web. El código que acabas de crear te servirá como plantilla básica para todos tus futuros documentos HTML.

Hasta ahora todo va bien, pero ¿cómo añado contenido a mi sitio web?

Como aprendiste anteriormente, todo documento HTML tiene dos partes: un encabezado y un cuerpo. En la sección del encabezado se incluye información sobre la propia página, mientras que el cuerpo contiene la información que constituye la página en sí..
Por ejemplo, si quieres poner a la página un título que aparecerá en la barra de títulos del navegador, deberías hacerlo en la sección del encabezado, es decir dentro de las etiquetas "head". El elemento que se usa para el título es title, o sea, escribe el título de la página entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:

<title>Mi primer sitio web</title>

Ten en cuenta que este título no aparecerá en la página en sí. Cualquier cosa que quieras que aparezca en la página es contenido y debe, por la tanto, añadirse entre las etiquetas <body> y </body>.
Como lo prometido es deuda, vamos a conseguir que la página nos diga: "¡Hurra! Este es mi primer sitio web." Este es el texto que queremos transmitir, y, por lo tanto, pertenece a la sección del cuerpo. Así pues, en la sección del cuerpo, escribe lo siguiente:

<p>¡Hurra! Este es mi primer sitio web.</p>

La p de <p> es la abreviatura de "párrafo", que es exactamente lo que es: un párrafo de texto.
El documento HTML debería tener ahora este aspecto:


 <html>

   <head>
   <title>Mi primer sitio web</title>
   </head>

   <body>
   <p>¡Hurra! Este es mi sitio web.</p>
   </body>

 </html>

¡Hecho! ¡Acabas de crear ahora mismo tu primer sitio web de verdad!
Lo siguiente que hay que hacer es guardarlo en el disco duro y luego abrirlo en el navegador:

En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal.
Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.
Ahora guarda el documento como "pagina1.htm" (la terminación ".htm" indica que es un documento HTML; con la terminación ".html" se consigue el mismo resultado. Personalmente, siempre uso ".htm"; tú puedes elegir cualquiera de las dos extensiones, según prefieras). Da igual dónde guardes el documento en el disco duro, siempre que recuerdes dónde lo hiciste para poder recuperarlo con posterioridad.

Ahora pasamos al navegador:

En el menú principal elige "Abrir" del menú "Archivo".
Haz clic en el botón "Examinar" de la caja que aparece.
Ahora localiza el documento HTML y haz clic en "Abrir".

En el navegador debería poder leerse ahora: "¡Hurra! Este es mi primer sitio web." ¡Enhorabuena!

ADSL son las siglas de Asymmetric Digital Subscriber Line ("Línea de Abonado Digital Asimétrica"). ADSL es un tipo de línea DSL. Consiste en una transmisión analógica de datos digitales apoyada en el par simétrico de cobre que lleva la línea telefónica convencional o línea de abonado,^[1] siempre y cuando la longitud de línea no supere los 5,5 km medidos desde la Central Telefónica, o no haya otros servicios por el mismo cable que puedan interferir.

Frecuencias usadas en ADSL. El área roja es el área usada por la voz en telefonía normal, el verde es el upstream o subida de datos y el azul es para el downstream o descarga de datos.

Es una tecnología de acceso a Internet de banda ancha, lo que implica una velocidad superior a una conexión tradicional por módem en la transferencia de datos, ya que el módem utiliza la banda de voz y por tanto impide el servicio de voz mientras se use y viceversa. Esto se consigue mediante una modulación de las señales de datos en una banda de frecuencias más alta que la utilizada en las conversaciones telefónicas convencionales (300-3400 Hz), función que realiza el Router ADSL. Para evitar distorsiones en las señales transmitidas, es necesaria la instalación de un filtro (llamado splitter o discriminador) que se encarga de separar la señal telefónica convencional de las señales moduladas de la conexión mediante ADSL.
Esta tecnología se denomina asimétrica debido a que la capacidad de descarga (desde la Red hasta el usuario) y de subida de datos (en sentido inverso) no coinciden. La tecnología ADSL está diseñada para que la capacidad de bajada (descarga) sea mayor que la de subida, lo cual se corresponde con el uso de internet por parte de la mayoría de usuarios finales, que reciben más información de la que envían (o descargan más de lo que suben).
En una línea ADSL se establecen tres canales de comunicación, que son el de envío de datos, el de recepción de datos y el de servicio telefónico normal.
Actualmente, en diversos países (como España) las empresas de telefonía están implantando versiones mejoradas de esta tecnología como ADSL2 y ADSL2+ con capacidad de suministro de televisión y video de alta calidad por el par telefónico, lo cual supone una dura competencia entre los operadores telefónicos y los de cable, y la aparición de ofertas integradas de voz, datos y televisión, a partir de una misma línea y dentro de una sola empresa, que ofrezca estos tres servicios de comunicación. El uso de un mayor ancho de banda para estos servicios limita aún más la distancia a la que pueden funcionar, por el par de hilos. ADSL2 y ADSL2+ incorporan mecanismos de modulado y gestión de los recursos físicos avanzados, de modo que no sólo aumentan la capacidad del ADSL convencional de 8 mbps a 12 y 24 mbps respectivamente, sino que introducen mejoras para evitar las interferencias o ruido y disminuir los efectos de la atenuación de ahí que se alcancen distancias de hasta 9 Km.
El ADSL es una tecnología que utiliza el par de cobre y tiene menos ancho de banda que otras tecnologías como cable o metroethernet, cuyo cableado urbano está compuesto por hilos de fibra óptica en lugar del par de cobre implementado en su mayor parte en las décadas de 1950 y 1960.