4 Html

Un poco de historia El nacimiento de Internet suele fijarse como fecha de referencia en 1969, año en que entró en funcionamiento la red ARPANET. Esta era una red experimental patrocinada por la Agencia de Investigación de Proyectos Avanzados (ARPA) de Estados Unidos. El objetivo de esta red era experimentar sistemas de conexión entre centros dispersos geográficamente, acercando a los investigadores de distintos puntos del mundo la información almacenada en bases de datos y otros recursos. Un papel destacado en la investigación de este tipo de sistemas lo protagonizó Paul Baram. En 1.962 Baran comenzó a hablar por primera vez de redes de ordenadores descentralizadas.

Un Poco de historia En 1.972 ARPANET ya tenía 40 hosts y un ingeniero llamado Ray Tomlinson cambió para siempre el modo de comunicarse en la red: inventó el correo electrónico. World Wide Web En 1.989 Tim Berners-Lee lo inventó como una simplificación de un proyecto en el que había estado trabajando para compartir información entre los ingenieros del CERN (laboratorio de física de partículas europeo). Actualmente Tim dirige el World Wide Web Consortium, organismo que se ocupa del desarrollo de los estándares de lenguaje en Internet.

Un poco de historia El Web se puede dividir en dos facetas: los servidores y los navegadores. Los servidores son sistemas de ordenadores que almacenan documentos. Los navegadores nos permiten recuperar remotamente dichos documentos y presentarlos en pantalla. Muy simple. Pero nadie conocía el Web hasta que unos estudiantes de la universidad de Illinois (Estados Unidos) escribieron una pequeña aplicación llamada Mosaic. Mosaic fue el primer navegador gráfico. Con él se accedía a los enlaces mediante un simple click de ratón. Esto impulsó definitivamente el Web hasta convertirse hoy en el protocolo que más tráfico genera en la red, por delante del correo electrónico, FTP (transferencia de ficheros) y todos los demás.

HTML No es un lenguaje de programación. El acrónimo HTML proviene del inglés: HyperText Markup Language (Lenguaje de marcas de hipertexto). HTML define un conjunto de etiquetas o marcas (tags en inglés) mediante las cuales se indica al navegador la forma en que los textos y resto de elementos serán mostrados en pantalla, y cómo se puede pasar del documento actual a otros.

HTML ¿Como son las etiquetas HTML? Cuando un Web Browser muestra una página lo que hace es interpretar un archivo de texto, buscando etiquetas que vienen marcadas por los signos < y > . El formato general de una etiqueta HTML es el siguiente: <nombre_etiqueta>cadena de texto</nombre_etiqueta> Como ejemplo una etiqueta de encabezado del tipo: <h3>¿Qué son las etiquetas HTML?</h3> Fíjate que todas las etiquetas se abren y se cierran <nombre_etiqueta> abre la etiqueta </nombre_etiqueta> cierra la etiqueta con la indicación /

Creando un documento HTML ¿Qué vamos a necesitar para crear un documento HTML? Un procesador de textos para escribir y editar el código HTML. Este podrá ser cualquiera que no formatee el texto. Si usamos un procesador como el Word, tendremos que guardar el documento como "sólo texto". Lo más sencillo es utilizar el bloc de notas del ordenados. Un navegador Web como el Explorer que se encargará del interpretar el código HTML de nuestro documento. La secuencia de trabajo para crear nuestro documento es: 1. Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos -a excepción de la extensión, que deberá ser necesariamente .htm ó .html . 2. Para visualizar nuestro documento HTML abriremos el documento con el programa navegador.

Estructura de un documento HTML Un documento HTML contiene dos partes distintas: la cabecera (o Head) y el cuerpo (o Body). La cabecera (Head) contiene información acerca del documento que no será visualizada en pantalla. El cuerpo (Body) contiene todo lo demás que será visualizado en pantalla.

La estructura básica de cualquier página HTML es : <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> Indica el inicio del documento <HEAD> Indica el inicio de la cabecera <TITLE> Título del documento</TITLE> </HEAD> Final de la cabecera <BODY> Inicio del cuerpo del documento  Instrucciones HTML </BODY> Final del cuerpo del documento </HTML> Final del documento

Primera línea <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN"> Técnicamente, no se requiere, pero es código que le dice al navegador con qué versión de HTML se ha escrito dicha página - para más información ver las especificaciones de referencia de W3C-. Segunda línea <HTML> … .. </HTML> Elemento raíz que engloba a todo el resto de elementos del documento.

Cabecera del documento En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el título de la página que aparecerá en la parte superior de la ventana del navegador. Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento. Todas la etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta <TITLE> correspondiente al título del documento y que aparecerá en la ventana de nuestro navegador. Lo normal y recomendable es que el título guarde relación con el contenido de nuestro documento, ya que por ejemplo es utilizado por algunos servidores de búsqueda para poder intuir el contenido de nuestro documento.

Cuerpo del Documento En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en sí de nuestra página Web: textos, imágenes, enlaces a otras páginas, etc. Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo de nuestro documento. Una serie de argumentos nos van a permitir variar las características del documento en su conjunto, como por ejemplo el color del texto o el color de fondo de nuestra página Web.

Espaciado y saltos de línea En HTML sólo se admite un único espacio en blanco separando cualquier elemento o texto, el resto de espacios serán ignorados por el navegador, al igual que las tabulaciones, retornos de carro, etc. Inclusión de espacios en blanco:   Nos permitirá la inclusión de más de un espacio en blanco entre dos textos consecutivos, de forma que estos espacios se muestren de forma efectiva en el navegador. Tendremos que incluir tantas expresiones   como espacios en blanco se deseen incluir. Salto de línea: <BR/> {BR: Break} Nos permite dar un salto a la línea siguiente en el punto donde la etiqueta sea insertada. Cambio de párrafo: <P> {P: Paragraph} Permite definir un párrafo, introduciendo normalmente un espacio de separación de dos líneas con el texto siguiente al punto donde hayamos insertado la etiqueta <P> . Tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el párrafo. El formato sería el siguiente: <P align=left/right/center/justify>Texto contenido en el párrafo</P>

Línea Horizontal: <HR/> {HR: Horizontal Rule} Nos permite insertar una línea horizontal, cuyo tamaño podremos determinar a través de sus atributos. Si no especificamos ningún atributo dibujará una línea que ocupe el ancho de la pantalla del navegador. Su utilidad es la de permitirnos dividir nuestra página en distintas secciones. No será necesaria la etiqueta de fin </HR> . El formato de la etiqueta con sus posibles atributos son: <HR align=left/right/center noshade size=n width=n> align=left/right/center . Permite establecer la alineación de la línea a la izquierda, a la derecha o centrarla. noshade . No muestra la sombra de la línea, evitando el efecto de tres dimensiones. size=n . Indica el grosor de la línea en pixels. width=n ó n% . Especificará el ancho de la línea, este se podrá especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n%). Este es un ejemplo de etiqueta vacía

Cabeceras H En un documento HTML podemos incluir seis tipos distintos de cabeceras, que van a constituir normalmente el título y los distintos subapartados que forman el documento, aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto. Estas cabeceras son definidas por las etiquetas <H1><H2><H3><H4><H5> y <H6> . El texto que componga cada cabecera deberá estar incluido entre las etiquetas de inicio (<Hn>) y fin ( / Hn) correspondiente. La cabecera <H1> será la que muestre el texto de mayor tamaño. Este tamaño irá disminuyendo hasta llegar a la cabecera </H6> . Para alinear las cabeceras utilizamos el atributo align .

Atributos de Texto Al texto de nuestro documento HTML le podemos aplicar distintos atributos (negrita, cursiva , subrayado, etc.), al igual que hacemos cuando trabajamos con el procesador de textos en la edición de nuestros documentos. Negrita <B></B> Cursiva <I></I> Teletype <TT></TT> Subrayado <U></U> Tachado <S></S> Superíndice <SUP></SUP> Subíndice <SUB></SUB> Centrado <CENTER></CENTER>

Atributos de Texto Si queremos aplicar efectos más espectaculares a nuestro documento HTML, debemos variar el tamaño, el color y el tipo de letra del texto. La etiqueta que Los permite todo esto es <FONT> ... </FONT> , por medio de sus atributos size , color y face : <FONT size="n" ó "+/- n" color="# rrggbb ó name" face="nombre de font"> size="n" ó "+/- n" . El atributo size nos permite especificar un tamaño determinado para la fuente del texto incluido entre las etiquetas de inicio y fin, el cual puede estar entre 1 y 7. El texto de tamaño normal equivale a la fuente de tamaño 3 (fuente base). Por tanto, si especificamos size=+2 , el tamaño de la fuente será 5. Y si especificamos size= -1 el tamaño será 2. color="#rrggbb ó name" . Nos va a permitir definir el color que tendrá el texto incluido entre las etiquetas. face="nombre de font" . Nos va a permitir escribir texto con el tipo de letra que le especifiquemos. En el caso de que el tipo de letra que le hayamos especificado no esté cargada en el ordenador que lee la página, se usará el font por defecto del navegador.

Listas Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad. Estas listas podrán incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas, es decir, listas dentro de listas. HTML nos permite crear tres tipos distintos de listas: Listas no numeradas: <UL> {UL: Unordered List} Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado, precedidos de una marca o viñeta que nosotros mismos podemos definir. Para la definición de los límites de la lista utilizaremos la etiqueta <UL> ... </UL> , y para determinar cada uno de los elementos que la componen usaremos la etiqueta <LI>...</LI> .

<UL type="disk" ó "circle" ó "square"> <LH>Título de la lista</LH> <LI>Elemento 1 <LI>Elemento 2 ... <LI>Elemento n </UL> {LH: List Head} {LI: List Item} Con el atributo type vamos a especificar el tipo de marca o viñeta que antecederá a cada uno de los elementos de la lista. Estas marcas podrán ser: un disco (disk), un círculo (circle) o un cuadrado (square). La etiqueta <LH> nos va a servir para especificar un posible título de la lista, siendo esta opcional.

Listas numeradas: <OL> {OL: Ordered List} El formato es el siguiente: <OL start="n" type="Tipo de lista"> <LH>Título de la lista</LH> <LI>Elemento 1</LI> <LI>Elemento 2</LI> .... <LI>Elemento n</LI> </OL> Con el atributo start vamos a especificar el número por el que va a empezar la lista. Si no indicamos este argumento la lista empezará a numerarse a partir del 1. Con el atributo type vamos a especificar el tipo de lista numerada. Sus posibles valores aparecen a continuación: A: Letras mayúsculas (A, B, C, ...) a: Letras minúsculas (a, b, c, ...) I: Números romanos en mayúsculas (I, II, III, IV, ...) i: Números romanos en minúsculas (i, ii, iii, iv, ...) 1: Numéricamente (1, 2, 3, 4, ....) (es la numeración por defecto y por tanto no habría que indicarla).

Hiperenlaces: A {A: Anchor} Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicación, o a otras zonas dentro de nuestro propio documento. Enlaces a otras páginas: <A href=...> Con este tipo de hiperenlaces vamos a poder acceder a otras páginas. El formato de este tipo de hiperenlaces es: <A href="URL a la que se accede">Texto descripción del hiperenlace</A> Con el atributo href vamos a especificar la URL del documento al que se pretende acceder. El texto de descripción aparecerá resaltada normalmente en azul y subrayado. En la mayoría de los navegadores esta descripción del hiperenlace es sensible, por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicándolo. Igualmente podríamos acceder al hiperenlace por medio de una imagen. El formato correspondiente sería: <A href="URL a la que se accede"><IMG src="Imagen"> y también texto</A>

Enlaces dentro de la misma página: <A name=...> Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas. Una buena utilidad de este tipo de enlaces radica en la creación de índices para documentos largos, de forma que si pinchamos en el hiperenlace correspondiente al título de un capítulo determinado, el navegador saltará automáticamente hasta el comienzo de dicho capítulo. Para la creación de estos hiperenlaces, debemos seguir dos pasos: 1. Marcar las distintas zonas o secciones del documento. Esto lo haremos con el parámetro name : <A name="Identificador de sección">Texto de la sección</A> A cada sección le asignaremos un identificador distinto, para poder referenciarlas posteriormente de manera inequívoca. 2. Especificar un enlace a cada una de las secciones que hayamos definido. <A href="#Identificador de sección">Texto del enlace a la sección</A>

Imágenes Podremos dar un aspecto mucho más vistoso a nuestros documentos HTML con la inclusión de imágenes. Los formatos de imagen que todos los navegadores reconocen son: jpg, png y gif . Si queremos insertar una imagen en otro formato, el visor debería disponer del programa externo que permita su visualización. De todas formas, una buena solución es utilizar algún programa de tratamiento de imágenes que nos convierta la imagen a uno de los formatos mencionados anteriormente. El formato gif es más recomendado para la inclusión de iconos, gráficas y el formato jpg o png para el caso de insertar fotografías en nuestras páginas. La etiqueta que nos va a permitir la inserción de imágenes es <IMG> . La imagen se insertará justo en el punto del documento donde coloquemos dicha etiqueta, pudiendo insertar imágenes dentro de listas, tablas o formularios. El formato de la etiqueta, con sus posibles argumentos, es el siguiente: <IMG src="URL de la imagen" alt="Texto alternativo" align="top/middle/botton/left/rigth" border="Tamaño" height="Tamaño" width="Tamaño" hspace="margen" vspace="margen">

Tablas <table> border width <tr> para indicar una fila y dentro de la fila <td> para indicar el contenido de la celda CELLPADDING: establece la distancia mínima en píxeles entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1. CELLSPACING: establece la anchura en píxeles de los bordes de cada celda.

4 Html

Más contenido relacionado

La actualidad más candente (19)

Destacado (20)

Similar a 4 Html (20)

Más de Ergoclicks (15)

Último (20)

4 Html