Inicio > Desarrollo Web > HTML

HTML

https://www.librosweb.es/xhtml/capitulo_6.html LINK PARA CONSULTA LEER...¡¡¡¡

1. Historia del html:

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.

Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group).

La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.

De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).

XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.

Definicion: El HTML (Hyper Text Markup Language) es el lenguaje de programación con el que se escriben las páginas web. Es un lenguaje muy sencillo que permite confeccionar archivos de texto mostrándolo de forma estructurada y atractiva, con enlaces (hyperlinks) que hacen referencia a otros documentos o fuentes de información relacionada, y que permite incorporar archivos multimedia como gráficos, sonidos, imágenes, videos, etc.

2. estructura de una página en html:

Estructura básica

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 > .

Es decir:

<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.

https://fpsalmon.usc.es/genp/doc/cursos/html/estructura.html

3. que es una tiqueta y cual es su sintáxis para su manejo en html:

Etiquetas

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

<B>	Letra Negrita, del inglés Bold (negrita).
<TABLE>	Definirá una tabla.
<IMG>	Inclusión de una IMaGen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Por ejemplo, con la etiqueta siguiente:

<B>Texto que será en negrita</B>.

Obtendremos:

Texto que será en negrita

Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.

El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.

4. etiquetas básicas que maneja html con ejemplos:

HTML es el lenguaje por el cual construimos una página web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una página web.

* <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.

* <BR>: salto de línea.

* <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>: texto en cursiva.

Ejemplo de página básica

<html>

<head>

<title>Título de la página</title>

</head>

<body>

<h1>Encabezado de la página</h2>

<h3>Encabezado de menor tamaño</h3>

<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 <b>en negrita</b>, <i>en cursiva</i> 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>

Consejo de Atributos

bgcolor=?> <body

Establece el color de fondo, usando nombres o valores hex

text=?> <body

Establece el color del texto, usando nombres o valores hex

link=?> <body

Establece el color de los enlaces, usando nombres o valores hex

vlink=?> <body

Establece el color de los enlaces, usando nombres o valores hex

alink=?> <body

Establece el color de los enlaces con un clic

Etiquetas de texto

Crea texto preformateado

Crea un título grande

Crea un título pequeño

Crea texto en negrita

Crea texto en cursiva

Crea, o máquina de escribir estilo de texto-teletipo

Crea una cita, por lo general en cursiva

Hace hincapié en la palabra (con cursiva o negrita)

Hace hincapié en la palabra (con cursiva o negrita)

size=?> <font </ font>

Ajusta tamaño del fuente, de 1 a 7)

color=?> <font </ font>

Juegos de color de la fuente, usando nombres o valores hex

Enlaces

Crea un hipervínculo

Crea un enlace de correo

Crea una ubicación de destino dentro de un documento

Enlaces a ese lugar de destino en otra parte del documento

Formato

<p></p>

Crea un nuevo párrafo

align=?> <p

Alinea un párrafo a la izquierda, derecha o al centro

<br>

Inserta un salto de línea

Sangría de texto de ambos lados

Crea una lista de definiciones

<dt>

Precede cada definición de término

<dd>

Precede cada definición

Crea una lista numerada

Precede a cada elemento de la lista, y añade un número

Crea una lista con viñetas

align=?> <div

Un tag genérico utilizado para grandes bloques de formato de HTML, también se utiliza para hojas de estilo

Elementos gráficos

Agrega una imagen

Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo

Ajusta tamaño del borde alrededor de una imagen

<hr>

Inserta una regla horizontal

size=?> <hr

Establece el tamaño (altura) de la regla

width=?> <hr

Establece la anchura de la regla, en porcentaje o valor absoluto

noshade> <hr

Crea una regla sin una sombra

Tablas

Crea una tabla

marcha cada fila en una tabla

Pone en marcha cada celda de una fila

Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)

Atributos de la tabla

border=#> <table

Establece el ancho de borde alrededor de celdas de la tabla

cellspacing=#> <table

Ajusta la cantidad de espacio entre las celdas de la tabla

cellpadding=#> <table

Ajusta la cantidad de espacio entre el borde de una celda y su contenido

width=# <table o %>

Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento

align=?> <tr o align=?> <td

Establece la alineación de la celda (s) (a la izquierda, centro o derecha)

valign=?> <tr o valign=?> <td

Establece la alineación vertical de la celda (s) (, superior, media o inferior)

Establece el número de columnas de una celda debe abarcar

Establece el número de filas de una célula debe abarcar (por defecto = 1)

Evita las líneas dentro de una célula se rompa para adaptarse a

Frames Marcos

etiquetas en un documento marco, también se pueden anidar en otros conjuntos de marcos

rows="value,value"> <frameset

Define las filas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de w

cols="value,value"> <frameset

Define las columnas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de

<frame>

Define un marco único - o región - dentro de un conjunto de marcos

Define lo que aparecerá en navegadores que no soporten marcos

Marcos Atributos

src="URL"> <frame

Especifica que el documento HTML se debe mostrar

name="name"> <frame

Nombres de la estructura, o de la región, por lo que puede ser objetivo de otros marcos

marginwidth=#> <frame

Define los márgenes izquierdo y derecho del marco, debe ser igual o superior a 1

marginheight=#> <frame

Define los márgenes superior e inferior del marco, debe ser igual o superior a 1

scrolling=VALUE> <frame

Establece si el marco tiene una barra de desplazamiento, puede ser igual a "sí", "no", o "auto. Valor" El valor por defecto, como en los documentos ordinarios, es automático.

noresize> <frame

Impide que el usuario cambiar el tamaño de un marco

Formularios

Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la apariencia de un formulario.

Crea todas las formas

</select> <select name="nombre" múltiples size=?> </ select>

Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse.

Pone en marcha cada elemento de menú

Crea un menú desplegable

Pone en marcha cada elemento de menú

Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.

Crea una casilla de verificación. Texto siguiente etiqueta.

Crea un botón de radio. Texto sigue etiquetas

. Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.

Crea un botón Enviar

<input type="image" border=0 name="NAME" src="name.gif"> type="image"

Crea un botón Enviar con una imagen

type="reset"> <input

Crea un botón de reinicio

https://www.taringa.net/posts/ciencia-educacion/11833897/Etiquetas-basicas-de-html.html

Menú

Contacto

HTML

Estructura básica

Cabecera

Cuerpo