Scribd
Cargar
6 vistas

HTML curso

HTML (HyperText Markup Language) es un lenguaje de marcado que utiliza etiquetas para estructurar contenido en documentos web. Un documento HTML se compone de una cabecera y un cuerpo, donde se definen elementos como títulos, párrafos, listas y enlaces. Además, permite la inclusión de imágenes y la creación de formularios para la interacción del usuario.

Cargado por

felipe2bola2os-1
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
6 vistas

HTML curso

HTML (HyperText Markup Language) es un lenguaje de marcado que utiliza etiquetas para estructurar contenido en documentos web. Un documento HTML se compone de una cabecera y un cuerpo, donde se definen elementos como títulos, párrafos, listas y enlaces. Además, permite la inclusión de imágenes y la creación de formularios para la interacción del usuario.

Cargado por

felipe2bola2os-1
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 55

HTML

HTML

 HTML (HyperText Markup Language) es un


lenguaje compuesto por un grupo de
etiquetas definidas con un nombre
rodeado de paréntesis angulares. Los
paréntesis angulares delimitan la etiqueta
y el nombre define el tipo de contenido
que representa.
ESTRUCTURA BÁSICA

 El principio esencial del lenguaje HTML es el uso de


las etiquetas (tags). Funcionan de la siguiente
manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.

Algunas de estas etiquetas son declaradas


individualmente (por ejemplo, <br>)
 Lo que haya entre ambas etiquetas estará afectado por
ellas. Por ejemplo, todo el documento HTML debe estar
entre las etiquetas <HTML> y </HTML>:
 <HTML> [Todo el documento] </HTML>

 Un documento HTML en sí está dividido en dos zonas


principales:

1) La cabecera, comprendida entre las etiquetas <HEAD> y


</HEAD>
2) El cuerpo, comprendido entre las etiquetas <BODY> y
</BODY>
 Dentro de la cabecera (HEAD) hay información del
documento, que no se ve en la pantalla principal del
navegador que es utilizado para visualizar el documento
HTML, principalmente la información encontrada en la
cabecera es el título del documento, comprendido entre las
etiquetas <TITLE> y </TITLE>. El título debe ser breve y
descriptivo de su contenido, pues será lo que vean los
demás cuando añadan nuestra página a su lista de favoritos
(o bookmark). Otros elementos son:
 Enlaces a CSS
 Enlaces para personalizar el favicon (Imagen o ícono)
 <meta autor> El nombre del autor del documento
 Código de verificación
 Código de seguimiento
 Dentro del cuerpo está todo lo que queremos que aparezca en
la pantalla principal (texto, imágenes, etc.)
 Por tanto, la estructura de un documento HTML queda de esta
manera:

 <HTML>
 <HEAD>
 <TITLE> Título de la página </TITLE>
 </HEAD>
 <BODY>
 [Aquí van las etiquetas que visualizan la página]
 </BODY>
 </HTML>
Formato para el texto

 Cuando escribimos en el documento un texto que


queremos que aparezca en la pantalla, éste se
acomoda a ella. Si queremos separar el texto en
distintos párrafos debemos usar las etiqueta <P>
y </P>.

 El texto puede tener unos encabezados,


comprendidas entre las etiquetas <H1> y </H1>,
<H2> y </H2>, etc. (hasta el número 6), siendo el
número indicativo del tamaño.
 La etiqueta de centrado <CENTER> y </CENTER>
(algunos navegadores no la soportan). Nos centra
todo lo que esté dentro de ella, ya sea texto,
imágenes, etc.

 También tenemos los separadores (horizontal rules),


que se consiguen con la etiqueta <HR> (no existe
la correspondiente de cierre). Con ella se obtiene
una raya horizontal tan ancha como la pantalla, y
con la apariencia de estar embutida sobre el fondo.
Ejemplo

<HTML>
<HEAD>
<TITLE> Mi pagina en el Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera Pagina </CENTER>
</H1>
<HR>
Esta es mi primera pagina, aunque todavía es muy
sencilla. Como el lenguaje HTML no es difícil, pronto
estaré en condiciones de hacer cosas más interesantes.
<P> Aquí va un segundo párrafo
</BODY>
</HTML>
 Una etiqueta puede estar anidada dentro de otra.
En el ejemplo anterior lo está la etiqueta
<CENTER> dentro de la etiqueta <H1>.
 Si queremos separar los párrafos, o cualquier otra
cosa, pero sin dejar una línea en blanco, usamos
una etiqueta pensada para ello: <BR> (break, o
romper). No tiene etiqueta de cierre.
 Al escribir el texto, si ponemos más de un espacio en blanco
entre dos palabras observamos que el navegador sólo
reconoce uno de ellos. Si queremos forzarle a que lo haga,
debemos poner el código “&nbsp;" (no-breaking space).
 <B> y </B> para poner algo en negrita (bold).
 <I> y </I> para poner algo en cursiva (italic).
 <PRE> y </PRE>. El texto que se encuentre entre ella
estará pre-formateado, es decir que aparecerá como haya
sido escrito y con una fuente de espaciado fijo (tipo Courier).
Se respetarán los espacios en blanco y retornos del carro, tal
como estaban en nuestro documento HTML.
 La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se
utiliza para destacar una cita textual dentro del texto
general. Este párrafo está escrito entre ambas
etiquetas. Deja márgenes a ambos lados, por eso se
usa para poner sangrías.

 En las fórmulas matemáticas puede interesar poder


escribir índices y subíndices, que se consiguen con las
etiquetas
 <SUP> </SUP> y <SUB> </SUB> respectivamente.
Listas
 A menudo nos interesará presentar las cosas en
forma de listas. Podemos escoger entre tres tipos
distintos:

Listas desordenadas (no numeradas)


Listas ordenadas (numeradas)
Listas de definición.
Listas Desordenadas
 Las listas desordenadas (Unordered Lists) sirven para
presentar datos que, por no tener un orden
determinado, no necesitan ir precedidas por un número.
Su estructura es la siguiente:

<UL>
<LI> Un elemento
<LI> Otro elemento
<LI> Otro más
<LI> etc.
</UL>
 Toda la lista está dentro de la etiqueta <UL> y
</UL>, y luego cada elemento va precedida de la
etiqueta <LI> (list ítem).
 Es posible anidar una lista dentro de otra. Por
ejemplo:
<UL>
<LI> Mamíferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Listas ordenadas
 Las listas ordenadas (Ordered Lists) sirven para presentar
elementos en un orden determinado. Su estructura es
similar a la anterior. La diferencia estriba en que aparecerá
automáticamente un número correlativo para cada
elemento.
<OL>
<LI> Primer Elemento
<LI> Segundo Elemento
<LI> Tercer Elemento
<LI> etc.
</OL>

Al igual que las listas desordenadas, también se pueden


anidar las listas ordenadas.
Listas de definición
 El tercer tipo lo forman las listas de definiciones. Como su
nombre indica, son apropiadas para glosarios (o
definiciones de términos). Toda la lista debe ir englobada
entre las etiquetas <DL> y </DL>. Y a diferencia de las
dos que hemos visto, cada renglón de la lista tiene dos
partes:
 El nombre de la cosa a definir , que se consigue con la
etiqueta <DT> (definition term).
 La definición de dicha cosa, que se consigue con la
etiqueta <DD> (definition definition).
<DL>
<DT> Una cosa a definir
<DD> La definición de esta cosa
<DT> Otra cosa a definir
<DD> La definición de esta otra cosa
</DL>
Enlaces
 La característica que más ha influido en el espectacular
éxito de la Web ha sido, aparte de su carácter
multimedia, la posibilidad de unir los distintos
documentos repartidos por todo el mundo por medio de
enlaces hipertexto.
 En general, los enlaces tienen la siguiente estructura:
 <A HREF="XXX"> YYY </A>
 Donde XXX es el destino del enlace (Observe las
comillas). YYY es el texto indicativo en la pantalla del
enlace (con un color especial y generalmente
subrayado)
Tipos de enlaces
 Enlaces dentro de la misma página
 A veces, nos puede interesar dar un salto desde una posición
a otra determinada dentro de la misma página. En este caso,
lo que antes hemos llamado XXX, es decir, el destino del
enlace, en este caso el sitio dentro de la página a donde
queremos saltar, se sustituye por #MARCA (la palabra
MARCA puede ser cualquier palabra que queramos). Lo que
hemos llamado antes YYY es la palabra (o palabras) que
aparecerán en la pantalla en color (en forma de hipertexto).
Su estructura es, entonces:
 <A HREF="#MARCA"> YYY </A>
 Y en el sitio exacto a donde queremos saltar, debemos poner
la siguiente etiqueta:

Enlaces con otra página nuestra
 Puede ser que tengamos una sola página. Pero lo
más frecuente es que tengamos varias páginas, una
inicial (o principal) y otras conectadas a ella, e
incluso entre ellas mismas.
 Supongamos que queremos enlazar con una
página2 creada anteriormente y que hemos llamado
pagina2.html. En este caso, simplemente
sustituimos lo que hemos llamado XXX (el destino
del enlace) por el nombre del archivo:
 <A HREF="mipag2.html"> Ejemplo de mi segunda
pagina </A>
En otra página y una sección
definida
 Si queremos que vaya a un sitio concreto de otra
página en vez de ir al principio de la página, tenemos
que colocar una marca
 Lo veremos con el siguiente ejemplo:
 <A NAME="MIMARCA"></A> es la marca que
colocaremos en nuestra página, a la que deseamos
acceder desde otra. entonces la etiqueta con la que
efectuaremos la llamada tiene que ser de esta
manera:
 <A HREF="mipag2.html#MIMARCA"> En mi otra
página </A>.
Enlaces a Otro directorio
 Para enlazar una página a otro dentro de otra
carpeta se debe escribir:
misubdir/mipag2.html
Si mi página esta fuera del directorio de la pagina 1:
../mipag2.html

 Ejemplos de enlace a otras páginas:


 <A HREF="http://www.netscape.com"> Netscape
</A>
 <BR>
 <A HREF="http://www.microsoft.com"> Microsoft
</A>
IMÁGENES
 La estructura de la etiqueta es:
<IMG SRC="imagen.gif">
 Con el comando IMG SRC (image source, fuente de
la imagen) se indica que se quiere cargar una
imagen llamada, como está indicado, imagen.gif (o
el nombre que tenga).
 Dentro de la etiqueta se pueden añadir otros
comandos, como ALT
 <IMG SRC="imagen.gif" ALT="descripción">
Posición de la imagen
 <IMG SRC="isla.gif" ALIGN="top"> Titular alineado arriba
 <IMG SRC="isla.gif" ALIGN="middle"> Titular alineado en
medio
 <IMG SRC="isla.gif" ALIGN="bottom"> Titular alineado abajo

 Se puede poner borde a la imagen con :


 BORDER=“3“ , dentro de la etiquete IMG
 Si se quiere rodear con textos los gráficos se puede
ALIGN junto con la etiqueta ya conocida
 <IMG SRC= "imagen.gif">. Donde quiera que se
desee que aparezca una imagen basta con insertar:

<IMG SRC="imagen.gif" ALIGN="left"> Alinea a la


izquierda de la página
<IMG SRC="imagen.gif" ALIGN="center"> Alinea al
centro de la página
<IMG SRC=imagen.gif" ALIGN="right"> Alinea a la
derecha de la página
FONDOS Y COLORES
 Se puede cambiar el fondo de dos maneras distintas:
 Con un color uniforme
 Con una imagen

 Fondos con un color uniforme

 Se consigue añadiendo el comando BGCOLOR a la etiqueta


<BODY>
<BODY BGCOLOR="#XXYYZZ">
XX Es un número indicativo de la cantidad de color rojo
YY Es un número indicativo de la cantidad de color verde
ZZ Es un número indicativo de la cantidad de color azul
Códig color Código color Código color
o
#FF00 Rojo #FFFFF Blanco #FF00F Magent
00 F F a
#00FF Verde #00000 Negro #00FFF Celeste
00 0 F
#0000 Azul #FFFF0 Amarill #CCCC Gris
FF 0 o CC
Colores para los textos

<FONT COLOR="#XXYYZZ"> Este texto es de color XXYYZZ


</FONT>
Fondos con una imagen
 El fondo de una página puede ser también una
imagen, ya sea en formato GIF o JPG. Esta imagen se
repite por toda la página, como un mosaico. La
estructura de la etiqueta puede ser:

 <BODY BACKGROUND="imagen.gif">

 No todos los navegadores soportan este formato.


TABLAS
 Estructura

<TABLE>
[resto de las etiquetas]
</TABLE>

<TABLE BORDER="n">  Para poner un borde a la


tabla
<TABLE>
<TH>
[etiquetas de las distintas celdas de la primera
fila],
Encabezado de la tabla
</TH>
<TR>
[etiquetas de las distintas filas de la tabla]
</TR>

<TD>
[contenido de cada celda (imágenes, texto, etc.)]
</TD>
<TABLE>
<TR>
<TH> </TH>
<TH> </TH>
…..
</TR>
<TR>
<TD> </TD>
<TD> </TD>
…..
</TR>
<TR>
<TD> </TD>
<TD> </TD>
…..
</TR>
</TABLE>
Posicionamiento del contenido
dentro de la celda
 <TD ALIGN="center"> Al centro </TD>
 <TD ALIGN="right"> A la derecha </TD>
 <TH ALIGN="left"> A la izquierda </TH>

 <TD VALIGN="top"> Arriba </TD>


 <TD VALIGN="bottom"> Abajo </TD>
Celdas que abarcan a otras
varias
 Una celda que abarca 2 columnas
<TR>
<TD COLSPAN="2"> Celda sobre 2 columnas
</TD>
<TR>
 Una celda que abarca 2 filas
<TR>
<TD ROWSPAN="2"> Celda junto a 2 filas </TD>
</TR>
 Construir la siguiente tabla u poner en cada una de
ellas las imágenes que desee

Ejemplo de diseño de tablas en HTML

Diseñado por :
Juan Pérez Pérez
Formularios
 Losformularios permiten que los demás nos
envíen la información directamente a
nosotros o bien a nuestro servidor, en donde
hemos instalado un programa que procese
esta información. Por ejemplo, vamos a
suponer que queremos crear una lista de
correo. Los usuarios pueden introducir sus
nombres y direcciones de e-mail y pulsar un
botón de envío.
La estructura general de un
formulario
 Etiqueta de inicio:
<FORM ACTION="mailto:email"
METHOD="POST"
ENCTYPE="TEXT/PLAIN">
 Cuerpo del formulario
(Elementos para introducir los datos).
 Botones de envío y de borrado.
 Etiqueta de cierre
</FORM>
 El atributo ACTION indica la acción que se debe efectuar,
en este caso, los datos seran enviados por e-mail a la
dirección indicada.
 El atributo METHOD="POST" indica que los datos sean
inmediatamente enviados por correo a la dirección de
correo electrónico, nada más pulsar el usuario el botón
de envío.
 Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que
las respuestas las recibamos como un archivo de texto,
perfectamente legible y sin codificar.
Cuerpo del Formulario
 La introducción de los datos se consigue por medio de la
etiqueta:
<INPUT TYPE="XXX" NAME="YYY" VALUE="ZZZ">
 XXX  Es la palabra que indica el tipo de datos a introducir.
 YYY  Es el nombre que le asignamos
 ZZZ  Es la palabra asociada a un elemento (Valor)

 Los vamos a dividir en tres clases:


 Introducción por medio de texto
 Introducción por medio de menús
 Introducción por medio de botones
a) Introducción por medio de texto (1 línea)
 Escribe tu apellido:
<BR><INPUT TYPE="TEXT" NAME="Apellido">

Se puede variar el tamaño incluyendo en la etiqueta el


atributo SIZE="número"

Se puede limitar el número de caracteres, incluyendo el


atributo MAXLENGTH="número".

<INPUT TYPE="text" NAME="Apellido" SIZE="10"


MAXLENGTH="12">
Pruebe con INPUT TYPE="password".
Introducción por medio de texto (múltiples
líneas)

 Cuando el texto a introducir puede alcanzar una gran


longitud, por ejemplo un comentario, es conveniente
utilizar un formulario de texto de múltiples líneas.
 Esto se consigue con:

<TEXTAREA NAME="YYY" ROWS="número"


COLS="número">
</TEXTAREA>
b) Introducción por medio de menús

 Si queremos que el usuario, en vez de introducir un


texto, escoja entre varias opciones que le presentamos
nosotros, haremos uso de un formulario en forma de
menú.
 Se consigue con la etiqueta
<SELECT NAME="YYY">
<OPTION>
</SELECT>
<BR>Cuál es tu color preferido?<BR>
<SELECT NAME="ColorPreferido">
<OPTION SELECTED>
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT>
Pruebe con:
<SELECT NAME="ColorPreferido" MULTIPLE SIZE="2">
c) Introducción por medio de botones

Caja de confirmación (checkbox)


 Siqueremos que el usuario confirme una
opción determinada, podemos hacer uso de
un formulario de confirmación, o checkbox,
que se consigue con la etiqueta:
<INPUT TYPE="CHECKBOX" NAME="YYY">
 Ejemplo: Solicitamos al usuario que confirme su
inclusión en una lista
<FORM ACTION= "mailto:email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
<INPUT TYPE="checkbox" NAME="Lista">
Sí, deseo ser incluido en la lista de correo.
</FORM>
 Si queremos que el formulario aparezca
inicialmente como, basta con añadir el atributo
CHECKED dentro de la etiqueta. En el ejemplo
anterior sustituimos la etiqueta equivalente por:

 <INPUTTYPE="CHECKBOX" NAME="Lista"
CHECKED>
Botones de radio
 Cuando queremos que el usuario elija una única opción
entre varias, podemos hace uso de los botones de radio,
que se consiguen con la etiqueta:

<INPUT TYPE="RADIO" NAME="YYY" VALUE="ZZZ">


<FORM ACTION="mailto:email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
Cuál es tu sistema operativo preferido?<BR>
<INPUT TYPE="radio" NAME="Sistema" VALUE="Linux">Linux
<INPUT TYPE="radio" NAME="Sistema" VALUE="MacOS"
>MacOS
<INPUT TYPE="radio" NAME="Sistema" VALUE="OS/2">OS/2
<INPUT TYPE="radio" NAME="Sistema" VALUE="Unix">Unix
<INPUT TYPE="radio" NAME="Sistema"
VALUE="Windows">Windows
</FORM>
3 Botones de envío y de borrado
 Solo falta un elemento esencial en el cualquier
formulario, y es el botón de envío de los datos, que
se consigue con la etiqueta:

<INPUT TYPE= "submit" VALUE= "ZZZ">


En donde ZZZ es el texto que queremos que aparezca
en el botón.
<FORM ….>
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
---
<P><INPUT TYPE="submit" VALUE="Enviar
datos">
</FORM>
 Otro botón necesario, es el de borrado de datos
introducidos. Es muy similar al de envío, pues se
consigue con la etiqueta:

<INPUT TYPE="RESET" VALUE="ZZZ">

En donde ZZZ es el texto que queremos que aparezca


en el botón.

<P><INPUT TYPE="reset" VALUE="Borrar datos">

También podría gustarte