HTML
1. Historia del HTML
EL HTML es un lenguaje de programación para la elaboración de páginas web, basado en el uso de etiquetas encerradas por corchetes angulares (<>) el cual se utiliza para traducir la estructura y la información en forma de texto, con la posibilidad de agregar objetos como imágenes, videos etc. En la actualidad el HTML es complementado por otras tecnologías como las Hojas de Estilo en Cascada (CSS), el JavaScript entre otras.
Creador del HTML
El origen del lenguaje HTML se remonta al físico Tim Berners-Lee, un trabajador del CERN (Organización Europea para la Investigación Nuclear) quien a finales de 1989 propuso el lenguaje HTML junto con el protocolo HTTP, cuya finalidad era crear un medio para poder compartir información entre diversos “grandes” físicos de la época que trabajaban por todo el mundo.
Orígenes del HTML
El primer documento que se publicó de manera formal, sobre la estructura del HTML se publicó en el año de 1991 con el nombre de: “HTML Tags“, simplemente texto en donde se explican las etiquetas que se usan en HTML. Este documento aun se encuentra disponible para su consulta en la web: HTML Tags.
Tal y como explica el documento, en HTML se utilizan etiquetas de apertura y de cierre (solo en algunas excepciones no) en donde se abre con los corchetes angulares y se cierra de igual manera con los corchetes pero anteponiendo un (/).
Es decir: <Title></Title>
Versiones de HTML
El primero en salir fue el HTML 1, sin embargo no fue considerado un estándar, por lo que muchas veces se considera al HTML 2 como la primera versión del HTML.
HTML 2: Presentado en el año de 1995, el HTML 2 es considerado la primera versión del HTML, el cual no soportaba tablas y donde la declaración explícita de los elementos body, html y head es opcional.
HTML 3.2: Esta versión se lanzó en el año de 1997 gracias al organismo de estandarización llamado W3C (World Wide Web Consortium). El cual incorporó los últimos avances de las páginas web como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0: Lanzada en 1998. 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.
HTML 4.01: salió a la luz en 1999 como una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.
HTML 5: quinta revisión importante del lenguaje básico de la World Wide Web, el cual especifica dos variantes de sintaxis para HTML: el clásico HTML (text/html), y la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5. Este nuevo estándar aun no es tan utilizado pero su potencial es mucho mayor a las versiones anteriores, el cual incluye interesantes mejoras como nuevos elementos y etiquetas
2. Estructura de una tabla en HTML
Para definir una tabla deberán utilizarse y combinarse 3 etiquetas: , (table row) y aparecen antes que las etiquetas
| (table data cell).
Como recomendación , es aconsejable analizar en primer lugar las filas de que estará compuesta y a continuación las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas
|
||||||||||||||||
| .
EL TAG
La etiqueta
En el caso que se quisiera crear una tabla de 3 filas y 4 columnas, visualmente quedaría de la siguiente forma.
El código correcto quedaría de la siguiente manera (una correcta indentación del código permitirá una lectura cómoda y rápida):
3. Que es una etiqueta y cual es su sintaxis para su manejo en HTML Una etiqueta o marca HTML es un código que se incluye en los archivos creados con el lenguaje HTML para estructurar, añadir significado o formato al contenido a una página web. El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:
<b>Esto esta en negrita</b>
El resultado Será:
Esto esta en negrita
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:
<p>Hola, estamos en el párrafo 1</p> <p>Ahora hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos en el párrafo 1
Ahora hemos cambiado de párrafo 4. Etiquetas básicas para HTML con ejemplos
* <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
<pre> </ pre>
Crea texto preformateado
<h1> </ h1>
Crea un título grande
<h6> </ h6>
Crea un título pequeño
<b> </ b>
Crea texto en negrita
<i> </ i>
Crea texto en cursiva
<tt> </ tt>
Crea, o máquina de escribir estilo de texto-teletipo
<cite> </ cite>
Crea una cita, por lo general en cursiva
<em> </ em>
Hace hincapié en la palabra (con cursiva o negrita)
<strong> </ strong>
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
<a href="URL"> </ a>
Crea un hipervínculo
<a href="mailto:EMAIL"> </ a>
Crea un enlace de correo
<a name="NAME"> </ a>
Crea una ubicación de destino dentro de un documento
<a href="#NAME"> </ a>
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
<blockquote> </ Span>
Sangría de texto de ambos lados
<dl> </ dl>
Crea una lista de definiciones
<dt>
Precede cada definición de término
<dd>
Precede cada definición
<ol> </ ol>
Crea una lista numerada
<li> </ li>
Precede a cada elemento de la lista, y añade un número
<ul> </ ul>
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
<img src="name">
Agrega una imagen
<img src="name" align=?>
Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo
<img src="name" border=?>
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
<table> </ table>
Crea una tabla
<tr> </ tr>
marcha cada fila en una tabla
<td> </ td>
Pone en marcha cada celda de una fila
<th> </ th>
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)
<td colspan=#>
Establece el número de columnas de una celda debe abarcar
<td rowspan=#>
Establece el número de filas de una célula debe abarcar (por defecto = 1)
<td nowrap>
Evita las líneas dentro de una célula se rompa para adaptarse a
Frames Marcos
<frameset> </ frameset>
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
<NOFRAMES> </ noframes>
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.
<form> </ form>
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.
<option>
Pone en marcha cada elemento de menú
<select name="NAME"> </ select>
Crea un menú desplegable
<option>
Pone en marcha cada elemento de menú
<textarea name="nombre" cols=40 rows=8> </ textarea>
Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.
<input type="checkbox" name="NAME">
Crea una casilla de verificación. Texto siguiente etiqueta.
<input type="radio" name="nombre" value="x">
Crea un botón de radio. Texto sigue etiquetas
<input type=text name="foo" size=20>
. Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.
<input type="submit" value="NAME">
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
Fuentes: https://www.webadictos.com.mx/2012/12/30/breve-historia-del-html/ https://www.luiscanada.com/manualHTML/tablas-estructura.php https://www.desarrolloweb.com/articulos/535.php https://www.desarrolloweb.com/wiki/etiquetas-html.html |