01- Etiquetas

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


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


<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


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


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


<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


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


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


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


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


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


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


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:[email protected]”>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


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


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


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


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


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


Ejemplo:

<A HREF =“http://www.google.com”>

Buscador </A>

01- Etiquetas

Documents

Transcript of 01- Etiquetas