¿ Qué es HTML?
•Significa HyperText Markup Language (Lenguaje de Etiquetas
de Hipertexto). Es el lenguaje utilizado para la creación de sitios y
páginas Web y el que permite presentar la información en
Internet.
•Se usa para describir la estructura y el contenido en forma de
texto, al que se le agregan imágenes audio o video, así como
enlaces a otras páginas y sitios Web, archivos, o direcciones de
correo.
•El lenguaje HTML utiliza “etiquetas” o tags rodeadas por
corchetes de mayor y menor (<,>).
•La presentación final del lenguaje HTML es realizado por un
navegador (en inglés browser) –como Internet Explorer o Firefox-
que interpreta dicho lenguaje para ser visualizado de manera
comprensible para cualquier usuario. En Ver --> Codigo fuente
de tu navegador podrás ver el lenguaje HTML de cualquier página
Web.
¿Cómo crear una página Web con el lenguaje
HTML?
Para crear una página Web si se conoce el lenguaje HTML y sus
etiquetas solo se necesita el bloc de notas. Luego el navegador se
encargará de interpretarlo. Sin embargo existen varios programas
que nos dan la posibilidad de diseñar un sitio Web sin necesidad de
escribir dicho lenguaje puesto que al introducir un texto o imagen u
otro objeto este ingresa automáticamente las etiquetas HTML
necesarias. Sin embargo su conocimiento nos da autonomía de
diseño.
Para crear una página Web se debe cumplir con una
estructura básica.
La estructura básica de una página Web desde HTML se vería
así:
Vista en HTML Vista en Web
<html>
<head>
<title>about:blank </title>
</head>
<body>
</body>
</html>
Estructura básica de una página WEB desde
HTML
En otras palabras cualquier documento en HTML comienza con
la etiqueta <html>, y termina con </html>. Dentro del
documento (entre las etiquetas de principio y fin de html), hay
dos zonas bien diferenciadas:
a) Encabezado: Delimitado por <head> y </head>, La única
utilidad del encabezamiento en la que nos detendremos es la
directiva <title>, que permite especificar el título de un
documento HTML. Este título no forma parte del documento en
sí, sino que suele servir como título de la ventana del programa
que nos la muestra.
b) Cuerpo: Se escribe dentro de las etiquetas <body> y
</body>, y es donde reside la información del documento
(texto, imágenes, videos, enlaces).
<title>about:blank</title>
Esta pagina esta en blanco.
<body>Esta pagina está
en blanco</body>
Algunas etiquetas
a) Títulos Casi todas las
etiquetas se abren
<h1>Mucha importancia</h1> y se cierran en orden
Mucha importancia
<h2>Menos importancia</h2>
Menos importancia
<h3>Mucha menos importancia</h3>
Mucha menos importancia
…. Y así sucesivamente hasta <h7>
b) Atributos de texto:
<p> para marcar un fin de párrafo.
<br> para un único retorno del cursor una linea más
abajo a la izquierda.
C) Otros atributos
<strong>: Indica texto en negrita
<em>: Indica texto en cursiva
<u>: Indica texto subrayado
<center>: Esto es centrado de cualquier tipo de datos.
<div align=“left”>: Texto alineado a la izquierda.
<div align=“right”>: Texto alineado a la derecha.
<div align=“center”>: Texto alineado al centro.
<strong>Esto en negrita</strong>
Esto en negrita
<em>Esto en cursiva</em>
Esto en cursiva
<u>Esto es subrayado</u>
Esto es subrayado
<center> Esto esta centrado</center>
Esto esta centrado
<div align=“left”>Alineado a la izquierda
</div>
Alineado a la izquierda
<div align=“right”>Alineado a la derecha
</div>
Alineado a la derecha
<div align=“center”>Alineado al centro
</div>
Alineado al centro
Vista en HTML Vista en Web
<html>
<head>
<title>about:blank </title>
</head>
<body>
<strong>Esto en negrita</strong>
<br> Esto es negrita
<em>Esto en cursiva</em> <br> Esto es cursiva
<u>Esto es subrayado</u> <br> Esto es subrayado
<center> Esto esta centrado Esto esta centrado
</center> <p>
<div align=“left”> Alineado a la izquierda
Alineado a la izquierda </div><p> Alineado a la derecha
<div align=“right”>
Alineado a la derecha </div> <p> Alineado al centro
<div align=“center”>
Alineado al centro </div>
</body>
</html>
Tabla con las funciones de las principales etiquetas HTML
Puesta en forma de los caracteres
<B>...</B> Texto en negrita
<EM>...</EM> Texto en itálico
<FONT color="#XXXXXX"> Texto en color donde
...</FONT> XXXXXX es un valor hexadecimal del color
Tamaño de los caracteres donde
<FONT size=X>...</FONT>
X es un valor de 1 a 7
<I>...</I> Texto en itálico
<SMALL>...</SMALL> Reducción del tamaño de los caracteres
<STRONG>...</STRONG> Puesta en negrita del texto
<SUP>...</SUP> Texto en exponente
<U>...</U> Texto subrayado
Puesta en forma del texto
<!--...--> Comentarios ignorado por el navegador
<BR> Salto de línea
<BLOCKQUOTE>...
Introduce una sangría en el texto
</BLOCKQUOTE>
Centra cada palabra de un texto
<CENTER>...</CENTER>
comprendida en la etiqueta
<DIV align=center> ...</DIV> Centra todo el texto
<DIV align=left> ...</DIV> Alinea el elemento a la izquierda
<DIV align=right> ...</DIV> Alinea el elemento a la derecha
<Hx>...</Hx> Título o x tiene un valor de 1 à 7
<Hx align=center>...</Hx> Título centrado
<Hx align=left>...</Hx> Título alineado a la izquierda
<Hx align=right>...</Hx> Titulo alineado a la derecha
<P>...</P> Nuevo párrafo
<P align=center>...</P> Párrafo centrado
<P align=left>...</P> Párrafo alineado a la izquierda
<P align=right>...</P> Párrafo alineado a la derecha
Listas
<UL>
Lista no numerada
<LI>
Elemento de lista
</UL>
<OL>
Lista numerada
<LI>
Elemento de lista
</OL>
Rayas
<HR> Línea de separación. Raya horizontal
<HR width="x%"> Anchura de la raya en %
<HR width=x> Anchura de la raya en pixeles
<HR size=x> Altura de la raya en pixeles
<HR align=center> Raya centrada
<HR align=left> Raya alineada a la izquierda
<HR align=right> Raya alineada a la derecha
<HR noshade> Raya sin efecto de sombreado
Enlaces
<A href="[Link] Enlace hacia una página Web
<A href="[Link] Enlace hacia una dirección Email
Enlace hacia la página [Link]
<A href="[Link]">...</A>
situada en la misma carpeta.
Enlace hacia un archivo en la misma
<A href= “[Link]”>…</A>
carpeta.
Imágenes
Inserción de una imagen al formato Gif o
<IMG src="[Link]">
Jpg
<IMG src="[Link]>
(ver enlaces para la dirección)
<IMG ... width=x height=y> Puesta a la escala de la imagen en pixeles
Definición del borde de una imagen con un
<IMG ... border=x>
enlace
<IMG ... align=bottom>
Alinea la imagen abajo
<IMG ... align=middle>
Alinea la imagen en el medio
<IMG ... align=top>
Alinea la imagen arriba
<IMG ... align=left>
Alinea la imagen a la izquierda
<IMG ... align=right>
Alinea la imagen a la derecha
Tablas
<TABLE>...</TABLE> Definición de una tabla
<TABLE width="x%"> Anchura de la tabla en %
<TABLE width=x> Anchura de la tabla en pixeles
<TABLE border=x> Anchura del borde
<TABLE cellpadding=x> Espacio entre el borde y el texto
<TABLE cellspacing=x> Espesor de la raya entre las celdas
<TR>...</TR> Línea de la tabla
<TD>...</TD> Celda de la tabla
<TD bgcolor="#XXXXXX"> Color de una celda de la tabla
<TD width="x%"> Anchura de columna en %
<TD width=x> Anchura de columna en pixeles
<TD align=center> Texto centrado en la celda
<TD align=left> Texto alineado a la izquierda en la celda
<TD align=right> Texto alineado a la derecha en la celda
<TD valign=bottom> Alineación hacia arriba del contenido de la celda
<TD valign=middle> Centrado vertical del contenido de una celda
<TD valign=top> Alineación hacia el bajo del contenido de la celda
<TD colspan=x> Numero de celdas para fusionar horizontalmente
<TD rowspan=x> Numero de celdas para fusionar verticalmente
Body
<body bgcolor="#XXXXXX"> Color del fondo (en hexadecimal)
<body background="[Link]"> Imagen del fondo
Efectos de transición
Atención¡¡¡: Estas etiquetas van en el Head
Efecto de entrada:
< meta http-equiv="Page-Enter" content="revealTrans(Duration=1, Transition=0)" >
Efecto de salida:
< meta http-equiv="Page-Exit" content="revealTrans(Duration=1, Transition=0)" >
Lo único que hay que hacer es cambiar " Duration " por el tiempo que deseen que dure
el efecto de transición, y cambiar " Transition ", que es el efecto que va a realizar, cada
efecto corresponde a un número de la siguiente lista:
0 - Cuadro de fuera a dentro.
1 - Cuadro de dentro a fuera.
2 - Circulo de fuera a dentro.
3 - Circulo de dentro a fuera.
4 - Cortina de abajo a arriba.
5 - Cortina de arriba a abajo.
6 - Cortina de izquierda a derecha.
7 - Cortina de derecha a izquierda.
8 - Cortinillas de izquierda a derecha.
9 - Cortinillas de arriba a abajo.
10 - Cuadritos que crecen de derecha a izquierda.
11 - Cuadritos que crecen de arriba a abajo.
12 - Puntos aleatorios.
13 - Doble cortina de lados al centro.
14 - Doble cortina del centro a los lados.
15 - Doble cortina de arriba y abajo al centro.
16 - Doble cortina del centro a arriba y abajo.
17 - Cortina diagonal de arriba derecha a abajo izquierda.
18 - Cortina diagonal de abajo derecha a arriba izquierda.
19 - Cortina diagonal de arriba izquierda a abajo derecha.
20 - Cortina diagonal de abajo derecha a arriba izquierda.
21 - Líneas horizontales aleatorias.
22 - Líneas verticales aleatorias.
23 - Aleatorio (cualquiera de los anteriores).
