¿Que es una pagina web?

Pagina web

Una página web es un documento de texto con marcas. Las marcas permiten modificar la presentación del documento, incluir elementos no contenidos en el texto (por ejemplo, imágenes), crear hiperenlaces, añadir significado al texto (todavía de forma limitada), etc. A las marcas se les llaman también etiquetas.

Las páginas web están pensadas para ser vistas mediante los programas llamados navegadores web. Los navegadores son capaces de interpretar las marcas y presentar el documento tal y como lo diseñó el autor.

Las marcas se escriben entre desigualdades (<p>, <h1>, <div>, etc.) y suelen ir por parejas, rodeando porciones de texto. La marca de apertura contiene como mínimo el nombre de la marca y la marca de cierre empieza por el carácter barra (/) y contiene únicamente el nombre de la marca (</p>, </h1>, </div>, etc.).

Algunas marcas (imágenes, saltos de líneas, separadores, etc.) no necesitan marca de cierre y sólo es necesario escribir la marca de apertura. A estas marcas se las llama marcas vacías (void). Las marcas vacías de HTML son <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y <wbr>.

En general, los navegadores modifican el aspecto visual del texto en función de las marcas existentes, aunque hay marcas que no tienen ningún estilo predeterminado asociado.
Los saltos de línea, espacios en blanco y tabuladores no son en general significativos. Es decir, el navegador no tiene en cuenta los saltos de línea ni la cantidad de espacios en blanco ni los tabuladores a la hora de mostrar la página web, simplemente los convierten en un espacio en blanco.

Atributos

Las marcas de apertura pueden contener uno o varios atributos. Los atributos especifican alguna característica de la marca. Algunos atributos pueden incluirse en casi todas las marcas, pero otros son específicos de cada marca. Los atributos pueden a su vez tener valores (uno o varios valores, separados por espacios). <etiqueta atributo="valor_de_atributo" atributo2="valor_de_atributo">

Comentarios

Una página web puede contener comentarios, que el navegador no muestra (salvo cuando muestra el código fuente de la página). La etiqueta de comentario es <!-- .... -->.

¿ Que es HTML ?

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto


Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard Generalized Markup Language). Concepto traducido generalmente como “Estándar de Lenguaje de Marcado Generalizado” y que se entiende como un sistema que permite ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas que se utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un sistema de formato abierto.

Forma del lenguaje

EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías, animaciones, etc). Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los documentos. El texto en él se crea a partir de etiquetas, también llamadas tags, que permiten interconectar diversos conceptos y formatos. Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos). Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como scripts, los cuales brindan instrucciones específicas a los navegadores que se encargan de procesar el lenguaje. Entre los scripts que pueden agregarse, los más conocidos y utilizados son JavaScript y PHP. El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se verá el elemento. El marcado presentacional, por su parte, es el que se encarga de señalar cómo se verá el texto más allá de su función. Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver código fuente en nuestro navegador (como Internet Explorer o Mozilla Firefox). Al elegir esta opción, se abrirá el editor de texto con el código HTML de la página que se está visualizando.

Historia del HTML

Construcción.

Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN) en el año 1945 con la finalidad de desarrollar un sistema de almacenamiento donde las cosas no se perdieran, que pudieran ser conectadas a través de hipervínculos. Primeramente crearon un dispositivo llamado “memex”, el cual era considerado como un suplemento para la memoria.

Estructura básica de HTML

• Cada página comienza con: < HTML > .
• A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
• Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
• La página acabará con < /HTML > .

Ejemplo:

<HTML>

<HEAD>

Definiciones de la cabecera

</HEAD>

<BODY>

Instrucciones HTML

</BODY>

</HTML>

Cabecera

La cabecera de un documento está delimitada por las etiquetas <HEAD > y </HEAD > Sus componentes son opcionales. El más importante es <TITLE> , que permite escribir el título del documento. El título no se muestra en la página, sino en la parte superior de la ventana del visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma:

<HEAD>

<TITLE>Título del documento HTML</TITLE>

</HEAD>

Cuerpo

Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes atributos:

• BACKGROUND="imagen": define el fondo. Más adelante veremos más sobre imágenes.

• BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si ésta imagen no puede obtenerse.. Más adelante veremos más sobre colores. Por ahora nos basta saber que para los colores básicos se puede utilizar su nombre en inglés: white, blue, red, green ...

• TEXT="######": color del texto. Por defecto será negro.

• LINK="######": color de los links. Por defecto será azul.

• VLINK="######": color de los links visitados. Por defecto será violeta.

Etiquetas 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 navegadores.
• <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.

Listas de HTML

Nombre de la lista	Definición		Código	Ejemplo
Listas no ordenadas.		Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados.	Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.	En html: <html> <head> kevin garizabalo </head> <body> <br> <Tittle> listas no  ordenadas </tittle>  <ul> <li type="circle"> Perro.</li> <li type="square"> Gato.</li> <li type="disc">Conejo.</li>  </ul> </body> </html> En la página: kevin garizabalo Listas no ordenadas Perro. Gato. Conejo.
Listas ordenadas	Las listas ordenadas son casi idénticas a las   listas no   ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se   realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice.		Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos. En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente   por orden, partiendo de ese número.	En html: <html> <head> kevin garizabalo </head> <body> <br> <Tittle> listas ordenadas </tittle> <ol> <li value="1.">Amarillo. </li> <li>Rojo. </li> <li> Azul. </li> </ol> </body> </html> En la página: kevin garizabalo Listas ordenadas Amarrillo. Rojo. Azul.
Listas de  definiciones	Las listas de definición sirven para hacer un conjunto de elementos con pares concepto-descripción. Es decir, se especificarán varios términos   por su nombre y se escribirá una definición para cada uno. Cada elemento es presentado junto con su definición, uno detrás de otro.		Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes: La etiqueta <dl> viene de los términos ingleses “Definition list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una   definición. La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición. La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición. Si escribimos varios listados de definición, éstas se separarán automáticamente   entre ellas para facilitar su diferenciación.	En html: <html> <head> Definitions kevin g </head> <body> <br> <Tittle> listas de definiciones</tittle>  <dl> <dt> Perro</dt> <dd>El perro, ​​​ llamado perro doméstico o can, ​ y coloquial mente chucho​ o tuso, ​ y también choco;​ es un mamífero carnívoro de la familia de los cánidos, que constituye una subespecie del lobo.</dd> </dl> <dl> <dt>Gato</dt> <dd>El gato doméstico​​, llamado simplemente gato, minino, ​ michino, ​ micho, ​ mizo, ​ miz, ​ morroño​ o morrongo​, entre otros nombres coloquiales, es un mamífero carnívoro de la familia Felidae. </dd> </dl> </body> </html> En La página: Definiciones kevin g Listas de definiciones  Perro El perro, ​​​ llamado perro doméstico o can, ​ y coloquial mente chucho​ o tuso, ​ y también choco;​ es un mamífero carnívoro de la familia de los cánidos, que constituye una subespecie del lobo. Gato El gato doméstico​​, llamado simplemente gato, minino, ​ michino, ​ micho, ​ mizo, ​ miz, ​ morroño​ o morrongo​, entre otros nombres coloquiales, es un mamífero carnívoro de la familia Felidae