Post on 18-Feb-2018
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 1/19
Por : Beto Puma Huaman
INTRODUCCION
A
LENGUAJE HTML
UNIVERSIDAD ANDINA NESTOR CACERES VELASQUEZInstituto de Informática
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 2/19
HTML BÁSICOHTML = (Hyper Text Markup Lenguage)
¿Por qué se caracteriza?
Por el uso de Tags
(ETIQUETAS)
(lenguaje de marcación de hipertexto), es unlenguaje informático diseñado para estructurar
textos y presentarlos en forma de hipertexto, quees el formato estándar de las páginas web.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 3/19
<HTML>
<HEAD>****************</HEAD>
<BODY>
********************************</BODY>
</HTML>
INICIO Y FIN
DE UNA
PAGINA HTML
INICIO Y FIN
DE UN TITULO
en HTML
INICIO Y FIN
DE UN
CONTENIDO en
HTML
Tags
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 4/19
Etiquetas mas Usadas
en HTML1) <P>y</P>
= para separar texto en distintos párrafos.
2) <H1> y </H1>, <H2> y </H2>
= etc (hasta 6) sir para
colocar cabeceras.
3) <CENTER> y </CENTER>
= Centra cualquier texto.
4) <HR>
= (Horizontal Rule) (no tiene correspondiente
de cierre) realiza una línea horizontal.
5) <BR>
= (Break) ó romper = separa párrafos de texto
sin dejar una línea en blanco. “no tiene sierre”.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 5/19
Ejemplos:<html> <// .........inicio de una pagina HTML//>
<head> <// .........inicio del contenido del titulo//>
<title>MI PRIMER EJERCICIO......EN EL C.C.I.</title></head> <// .........fin del contenido del titulo//>
<body> <// .........inicio del contenido de la pagina (cuerpo)//><h1><center>MI PRIMERA PAGINA </center></h2><HR> <// .........traza una linea horizontal//>
Esta es mi primera pagina, aunque todavia es muy sencilla.....
Como el lenguaje HTML no es facil, pronto estare encondiciones de hacer cosas mas interesantes.
<p> Este es un segundo parrafo.........</p></body> <// .........fin del contenido de la pagina (cuerpo)//>
</html> <// .........Fin de una pagina HTML//>
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 6/19
<BR><P>
<BR><P>
<BR><P>
<BR><P><B> texto </B> = Coloca el texto en Negrita.<I> texto </I> = Coloca el texto en Cursiva.<PRE> y </PRE> = El texto que se encuentra en ellos estarápre-formateado, aparecera como escrita con una máquina deescribir (Curier). Además se resperán los espacios en blancoy retornos de carro.
<BLOCKQUOTE>y</BLOCKQUOTE> = Se utiliza paradestacar una cita textual dentro de un texto general.
<SUP>y</SUP> = se escribe : m <SUP>2</SUP> seobtendrá m2.<SUB>y</SUB> = se escribe : v <SUB>x</SUB> se
obtendrá vx
DANDO FORMA AL TEXTO
Si queremos obtener múltiples líneas
en blanco. Ejemplo (Tenemos 4 líneasen blanco)
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 7/19
USO DE LISTAS
• Corel Draw 12• PhotoShop 7.0• Flash MX 2004• DreamWeaver MX
1. LISTAS DESORDENADAS
(UNORDERED LISTS) = <UL> y </UL>LIST ITEM = <LI>
Ejemplo:<UL>
<LI> Corel Draw 12<LI> PhotoShop 7.0<LI> Flash MX 2004<LI> DreamWeaver MX
</UL>
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 8/19
2. LISTAS ORDENADAS
(ORDERED LISTS) = <OL> y </OL>Sirven para presentar listados en ordendeterminado.
Ejemplo:<OL>
<LI> Corel Draw 12
<LI> PhotoShop 7.0<LI> Flash MX 2004<LI> DreamWeaver MX
</OL>
1. Corel Draw 12
2. PhotoShop 7.03. Flash MX 20044. DreamWeaver MX
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 9/19
UNA COSA A DEFINIRLA DEFINICIÓN DE ESTA COSA.
OTRA COSA A DEFINIR.LA DEFINICIÓN DE ESTA OTRA COSA
3. LISTAS DE DEFINICIÓN
(DEFINITION LIST) = <DL> y </DL>
Son apropiadas para glosarios o definiciones de érminos debe ir englobada con los tags <DL> y </DL>, además cada renglón de la litatiene dos partes.
(DEFINITION TERM) = <DT> El nombre de la cosa adefinir .
(DEFINITION DEFINITION) = <DD> La definición dedicha cosa.
Ejemplo:<DL>
<DT> Una cosa a definir <DD> La Definición de esta cosa<DT> Otra cosa a definir
<DD> Definición de esta otra cosa</DL>
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 10/19
ESTRUCTURA:
<A HREF = “xxx”>yyy</A>Donde:
xxx = Es el destino del enlace
yyy = Es el texto o gráfico indicativo en la pantalla del enlace (Color y generalmente subrayado).
ENLACES o VINCULOS
Uso de la etiqueta <A>.-La etiqueta <A...>...</A> principalmente se usa para introducir dentro de ellasun texto o una imagen, que van a ser el elemento identificador de dónde va allevar el enlace.
* En el caso de un texto, la sintaxis es muy simple:<A HREF="ruta_pagina" PROPIEDAD="valor".....>texto del enlace</A>
Ejemplo:<a href="http://www.yahoo.es" target="_blank">Yahoo</a>
que nos da: Yahoo
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 11/19
1. ENLACES CON OTRA PÁGINA:1
Para realizar los enlaces con otra Páginadebemos de Guardar (o que estén) los archivosen la misma página.Debemos tener varias páginas y una inicial(Index.html) y otras mas.
<A HREF = “Ejemplo1.html”>Ejemplo1</A>
Nota:En lugar de XXX cambiamos por elnombre del archivo con su extensión.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 12/19
2.ENLACES CON UNA PAGINAFUERA DE NUESTRO SISTEMA:
<A HREF =“http://www.google.com”>Buscador </A>
Estará en un servidor distinto al que soportanuestra pagina. Es necesario conocer su URL
(Uniform Resource Locator). el URL puede ser unaPágina Web.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 13/19
3. ENLACES CON UNA DIRECCION DEE-MAIL:
1
Se sustituye a xxx (el destino del enlace) por mailto:Seguido de la Dirección e-mail, es:
<A HREF =“Mailto:tvrock@Hotmail.com”>Hotmail</A>
IMAGENES 1
La etiqueta que nos sirve para incluir imágenes en nuestraWeb:
<IMG SCR =“imagen.gif ”>NOTA Nº1El comando IMGsRC (Image Source, Fuente de la imagen)NOTA Nº2
Dentro de la etiqueta se puede añadir comando, tal como ALT<IMG SCR =“imagen.gif ” ALT= “descripcion”>
Con respecto a la localización del fichero de la imagen, sino se indica nadaespecial quiere decir que se encuentra en el mismo directorio.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 14/19
4.ENLACES EN LA MISMAPÁGINA:
1
<A HREF = “#marca”>yyy</A>Y en el sitio donde queremos saltar (o ir)debemos poner la siguiente etiqueta.
<A NAME = “marca”></A>Donde:
marca = Cualquier palabra.
yyy = Son palabras que apareceránen Hipertexto.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 15/19
Ejemplo: (enlaces o vinculos)Supongamos que una hoja html queremos ir de principio a fin de pagina o viceversa,digitaremos el siguiente código.
<A HREF = “#Final”>Pulsa para ir al final</A>Como resultado será:
Pulsa para ir al final
Y en final del documento HTML debe ir puesto estaotra etiqueta:
<A NAME = “Final”> </A>
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 16/19
UTILIZACIÓN DE TABLAS:
Las tablas se generan utilizandoprincipalmente:
<TABLE> (para definir la tabla)<TR> (para iniciar líneas)
<TD> (para delimitar el inicio de una celda)
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 17/19
M
P
L
<TABLE cellPadding = 5 border = 1 ><TR>
<TH> ALTURA</TH><TH>PESO</TH><TR>
<TD>1,87 metros</TD><TD>92 kilos</TD><TR>
<TD>1,79 metros</TD><TD>75kilos</TD></TR>
</TABLE></CENTER>
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 18/19
INSERTAR IMÁGENES Y GIFSLos vínculos con imágenes son sai igual que conlos textos, solo que aquí deberá tenerse unaimagen de tipo GIF, JPG, etc. En la mismacarpeta.
<img src=“xxxxx" width="800" height="600">
Donde:xxxx = Dirección o ubicación del archivo.
(file:///C|/nombre)width, height = Dimenciones del on palabras
que aparecerán en Hipertexto.
7/23/2019 01- Etiquetas
http://slidepdf.com/reader/full/01-etiquetas 19/19
Ejemplo:
<A HREF =“http://www.google.com”>
Buscador </A>