HTML(Lenguaje
de Marca de Hipertexto)
Elementos META
De acuerdo
con la especificación de HTML 4, los elementos META se
utilizan para especificar información sobre el propio documento (de ahí su
nombre). La sintaxis del elemento META es la
siguiente:
<meta
name="nombre-propiedad" content="valor-propiedad"
scheme="esquema-datos" lang="idioma"
dir="dirección-del-texto">
o bien:
<meta
http-equiv="nombre-encabezado-http"
content="valor-encabezado">
Los
elementos META forman parte
del contenido del elemento HEAD del
documento.
Por ejemplo:
<meta
name="Author" content="Pedro Villar Martos"
lang="es">
Esta declaración dice
que el autor del documento es Pedro Villar Martos, e indica que el valor del
atributo content está en español.
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
Esta declaración dice
que el tipo de contenido del documento es text/html, y la codificación de caracteres utilizada
es la ISO-8859-1.
UTF-8
En el HTML
Para que nuestros textos estáticos muestren
caracteres especiales sin problemas, es necesario que dichos caracteres sean
escritos con su nombre HTML. Por ejemplo, las vocales minúsculas se escribirían
de la sgte manera:
Código :
á => á
é => é
í => í
ó => ó
ú => ú
W3C
El W3C, organización independiente y neutral,
desarrolla estándares relacionados con la Web también conocidos como
Recomendaciones, que sirven como referencia para construir una Web accesible,
interoperable y eficiente, en la que se puedan desarrollar aplicaciones cada
vez más robustas.
¿Qué es XML?
XML
es un lenguaje de marcas que ofrece un formato para la descripción de datos
estructurados, el cual conserva todas las propiedades importantes del antes
mencionado SGML. Es decir, XML es un metalenguaje, dado que con él podemos
definir nuestro propio lenguaje de presentación y, a diferencia del HTML, que
se centra en la representación de la información, XML se centra en la
información en si misma. La particularidad más importante del XML es que no
posee etiquetas prefijadas con anterioridad, ya que es el propio diseñador el
que las crea a su antojo, dependiendo del contenido del documento. De esta
forma, los documentos XML con información sobre libros deberían tener etiquetas
como <AUTOR>, <EDITORIAL>, <Nº_DE_PÁGINAS>, <PRECIO>,
etc., mientras que los documentos XML relacionados con educación incluyen
etiquetas del tipo de <ASIGNATURA>, <ALUMNO>, <CURSO>,
<NOTA>.
·
REPASO
La estructura básica de una página web es la siguiente:
<html>
<head></head>
<body>
</body>
</html>
|
Una estructura HTML se empieza con la etiqueta <html> y acaba con
</html>. Todo lo que esté en medio será la página web. Dentro de
<html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la página.
Aquí irán cierta información que no es directamente el contenido de la página.
Aquí se pone el título de la página, los metadatos, estilos, código javascript
(todo esto se estudiará en capítulos venideros). La primera que se suele
estudiar es <title></title>, que indica el título de la página (lo
que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente
el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo
con el ejemplo de la página
anterior, el siguiente código
<html>
<head>
<title>Esto es el título de la
página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
|
generará el siguiente resultado (abre la página en otra ventana,
dale al botón derecho => ver código fuente, y verás así el código HTML de la
página):
Observad el título en la parte superior izquierda de la página.
Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal
(púlsando la tecla Enter) no produce un salto de línea en el resultado. Es
necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner
una "i" con acento, es decir, "í". Esto se explicará en un
capítulo posterior.
·
¿Qué es html?
HTML, siglas
de HyperText Markup
Language («lenguaje de
marcas de hipertexto»), hace referencia al lenguaje
de marcado para
la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración
de páginas web en sus diferentes versiones, define una estructura básica y un
código (denominado código HTML) para la definición de contenido de una página
web, como texto, imágenes, etc.
·
¿Cómo ponerle titulo a
una paguina en HTML?
Para poner el titulo a un
documento html, havemos uso del tag <title> que debe de ir colocado
dentro del encabezado del documento, es decir, entre los tags <head>
Aquí el ejemplo:
<html>
<head>
<title> Titulo de la
paguina, es lo que se despliega en la parte superior izquierda
</title>
</head>
·
Cambiar atributos de texto
Los que
modifican texto entre dos etiquetas[editar]
Elemento b
(bold =
negrita) muestra el texto en negrita.
Sus etiquetas son: <b> y </b> (ambas obligatorias)
Elemento strong
(strong =
negrita) muestra el texto en negrita.
Sus etiquetas son: <strong> y </strong> (ambas
obligatorias)
Elemento i
(italic =
itálica) muestra el texto en cursiva.
Sus etiquetas son <i> y </i> (ambas obligatorias)
Elemento tt
Muestra
el texto con caracteres monoespaciados.
Sus etiquetas son <tt> y </tt> (ambas obligatorias)
Elemento big
(big =
grande) aumenta el tamaño del texto seleccionado.
Sus etiquetas son: <big> y </big> (ambas
obligatorias)
Elemento small
(small =
pequeño) reduce el tamaño del texto seleccionado.
Sus etiquetas son: <small> y </small> (ambas
obligatorias)
Elemento u
(underlined
= subrayado) Subraya el texto seleccionado.
Sus etiquetas son: <u> y </u> (ambas obligatorias)
Elemento sup
(sup =
super) Convierte el texto seleccionado en superíndice, por ejemplo: E=mc2.
Sus etiquetas son: <sup> y </sup> (ambas
obligatorias)
Elemento sub
(sub =
por debajo) Convierte el texto seleccionado en subíndice, por ejemplo:texto
normal, texto en subíndice.
Sus etiquetas son: <sub> y </sub> (ambas
obligatorias)
Elemento strike
(strike =
roto) Convierte el texto seleccionado en tachado, por ejemplo:Texto tachado.
Sus etiquetas son <strike> y </strike> (ambas
obligatorias)
·
Como insertar una imagen
<img src="imagenes/aulaclic.jpg" alt="visita
aulaclic" width="90" height="32" border="4">
Con este código estarás
asociando el enlace con la imagen aulaclic.jpg que se encuentra en la
directorio imagenes dentro de la carpeta animales (la
carpeta donde se encuentra el archivo inicio.htm.
Como poner una imagen en el fondo
de pantalla
Para poner una imagen de
fondo con HTML es necesario agregar el atributo background al tag y hacer
referencia a una imagen.
<html>
<body background=”fondo.jpg”>
<h3>Ejemplo de imagen
de fondo</h3>
<p>se pueden utilizar
archivos en formato jpg.gif o png.No es recomdables usar otro
formato.</p>
</body>
</html>
·
Tablas en html
Una tabla HTML puede ser considerada, de manera simple, como
un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no
alrevés). Las tablas, como toda estructura en los documentosHTML, son definidas
usando elementos. Entonces, una tabla simple puede ser insertada en un
documentoHTML usando tres elementos: el elemento HTML table (estructura contenedora
principal), el elementoHTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:
Código
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Vista
Celda 1
|
Celda 2
|
Celda 3
|
Celda 4
|
Celda 5
|
Celda 6
|
Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para
mejorar la visualización. Te recomiendo evitar el uso de atributos
presentacionales como "border" ya que son candidatos a ser
desaprobados en el futuro.
·
Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de
la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos
añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta
<li>, ésta se generará de forma automática. Pero si queremos definir
nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.
Así podemos hacer que la lista esté
definida por puntos negros (li type="disc"), por puntos con el fondo
blanco (li type="circle") o por cuadrados (li
type="square"). Aunque esta apariencia dependerá del navegador. Hay
algunos navegadores que dan otras apariencias a estos mismos atributos.
Vamos con un pequeño ejemplo en código:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
|
Cuyo resultado visual será el que
veremos a continuación:
- Esto
es un tipo de punto.
- Y
este es otro diferente.
|
· Formularios
Los formularios interactivos permiten a los autores de
páginas Web poner elementos interactivos en sus páginas, por ejemplo, para
recibir mensajes de sus lectores, de forma similar a las cartas de respuestas
que se encuentra en algunas revistas.
El lector escribe la información rellenando campos o
haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a
una dirección
URLque
se suele dirigir a una dirección de correo electrónico o a un script dinámico
Web como PHP, ASP o CGI.
