Pagina web |
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 |
Historia del HTML
Construcción. |
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>
- <HEAD>
- </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.
- <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
|
|
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
|
|
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
|