Lenguaje HTML

TTULO DEL TEMA
Lenguaje HTML
ORIENTACIONES
En esta sesin aprender los conceptos
del Lenguaje HTML
Las marcas o instrucciones del Lenguaje
HTML
Uso del Lenguaje HTML en la plataforma
del ASP.Net
3
1. Una Pgina bsica
Principio esencial uso de ETIQUETAS (TAGS).
<XXX> inicio de una orden
</XXX> fin de la orden
Estructura de un documento en HTML
<HTML>
<HEAD>
Encabezamiento
</HEAD>

<BODY>
Cuerpo
</BODY>
</HTML>

4
Encabezamiento hay el titulo de la pgina
<TITLE>
Ttulo de la pgina
</TITLE>
Cuerpo del programa
Prrafos con una lnea en blanco
<p align=alineamiento>prrafo</p>
Left: izquierda Center: centrado Right: derecha J ustify:
justificado
Cabeceras o ttulos (los tamaos van entre 1 hasta 6)
<H1>texto </H1>
<H2>texto </H2>
<H3>texto </H3>
<H4>texto </H4>
<H5>texto </H5>
<H6>texto </H6>
Centrado de texto o prrafo
<CENTER>texto </CENTER>
Separadores o lnea horizontal
<HR>

5
2. Dando forma al texto
Separacin de prrafos sin una lnea en blanco o cambio de lnea
<BR>
Mltiples lneas en blanco
<BR><P>
<BR><P>
Negrita
<B>texto </B>
Cursiva
<I>texto </I>
Subrayado
<u>texto</u>
Para frmulas matemticas ndices y subndices
<SUP>texto </SUP>(ndices)m
2
m <SUP>2 </SUP>
<SUB>texto </SUB>(subndices)m
2
m <SUB>2 </SUB>

6
2. Dando forma al texto
Letras Pequeas
<small>texto</small>
Letras Grandes
<big>texto</big>
Letras de Monotipo o mquina de escribir
<tt>texto</tt>
Letras en Marquesina o letras con movimiento
<marquee behavior=alternate>Texto</marquee>
Formato de Fuentes
<font face=tipo de letra size=tamao color=color de letra>
texto </font>

7
Tamao de las fuentes
<FONT SIZE=5> Texto en tamao 5 </FONT>

Nota 1: Los tamaos del texto van, de menor a mayor, del 1 al 7. El tamao normal
Base es el de 3.
Nota 2: Se puede cambiar el tamao relativamente con respecto al tamao base de
la siguiente forma:
<FONT SIZE=+2> Texto en tamao 5 </FONT>
<FONT SIZE=-2> Texto en tamao 1 </FONT>
Tipos de fuentes
Con el atributo FACE se indican varios tipos de fuentes distintas.

<FONT FACE=TAHOMA, VERDANA, IMPACT> Tipo de Fuente tahoma </FONT>
Color de Fuente: se da usando el color en ingles o la funcin
RGB(rojo,verde,azul)
<FONT COLOR=COLOR FUENTE> texto </FONT>

8
Listas
Listas desordenadas (vietas): sirven para presentar cosas que, por
no tener un orden determinado, no necesitan ir precedidas por un
nmero.
<UL type=tipo>
<LI>Una cosa
<LI>Otra cosa
<LI>Otra ms
</UL>
Tipo puede ser: disc: circulo con fondo, circle=circulo sin fondo y
square: cuadrado
Listas ordenadas (numeracin): sirven para presentar cosas en un
orden determinado.
<OL type=tipo>
<LI>Primera cosa
<LI>Segunda cosa
<LI>Tercera cosa
</OL>
Tipo puede ser: 1: nmeros, I=nmeros romanos en maysculas, i:
nmeros romanos en minsculas, A: letras en maysculas a: letras
en minsculas
9
Listas anidadas:
Por ejemplo:
<UL>
<LI>AA
<LI>BB
<OL>
<LI>BB1
<LI>BB2
</OL>
<LI>CC
</UL>
Listas de Definicin: usadas para un
vocabulario o glosario de trminos
<DL>
<DT>Termino1 a definir
<DD>Definicin del Termino1
<DT>Termino1 a definir
<DD>Definicin del Termino1
..
</DL>
10
Ejemplo prctico
<html>
<head>
<title> Mi pgina Web- 2 </title>
</head>
<Body>
<center>
<h1> Mis aficiones </h1>
</center>
<hr>
Sin un orden particular, mis <b> aficiones </b> son las siguientes:
<ul>
<li>El cine
<li>El deporte
<ul>
<li>Natacin
<li>Baloncesto
</ul>
<li> la msica
</ul>
La msica que ms me gusta es <I> (en orden de preferencia): </I>
<ol>
<li> el Rock
<li> el jazz
<li> la msica clsica
</ol>
<Body>
</html>
11
3. Enlaces con otras pginas
Estructura general de un enlace
<A HREF=XXX> YYY </A>
XXX: destino del enlace (Nombre del archivo)
YYY: texto que indica el enlace
Tipos de enlaces:
1. Enlaces dentro de la misma pgina
2. Enlaces con otras pginas
3. Enlaces con una pgina fuera de nuestro sistema
4. Enlaces con una direccin e-mail

12
1. Enlaces dentro de la misma pgina
<A HREF=#marca> YYY </A>

#marca: Salta en el sitio de la pgina dnde hemos puesto la marca. Marca
puede ser cualquier nombre.

Cmo se pone una marca dentro de un documento?
<A NAME=marca> </A>
Por ejemplo: Si deseo ir al final de este documento

<A HREF=#FINAL1>Pulsa aqu para ir al final de la
primera pgina </A>
<A NAME=FINAL1> </A>
13
2. Enlaces con otra pgina nuestra
<A HREF=MIPAG1.HTML>Ejemplo 2 </A>

Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez
de ir al principio de la pgina (a donde va por defecto), es preciso
indicarlo mediante una marca:
<A HREF=MIPAG1.HTML#fin_pag>Ejemplo 2 </A>

En el archivo MIPAG1.HTML colocaremos la marca de final de
documento en el final de ste de la siguiente forma:
<A NAME=fin_pag> </A>

Observacin importante: es conveniente tener todos nuestros
archivos en el mismo directorio, de lo contrario tendr que especificarse
la ruta.

14
3. Enlaces con una pgina fuera de nuestro sistema

<A HREF=http://www.uib.es>Universidad de las Islas Baleares </A>

4. Enlaces con una direccin e-mail

En este caso, sustituimos lo que se ha llamado antes XXX (destino del
enlace) por mailto: seguido de la direccin e-mail.

<A HREF=mailto: direccin e-mail>texto del enlace </A>
15
Ejemplo
<html>
<head>
<title> Mi pgina web 3 </title>
</head>

<Body>
<center> <h1> Mis pginas favoritas </h1> </center>
<hr>
Estas son mis pginas favoritas:
<p> <a href=http://www.uib.es> UIB </a>
<br> <a href=http://www.microsoft.com> Microsoft </a>
<br> <a href=http://www.google.com> Buscador google </a>
</Body>
</html>

16
Prctica: Crear las siguientes pginas con el block de notas
Contenido de Tecnologa de la Informacin

Esta asignatura consta de los siguientes
temas:
1.Conceptos bsicos
2.Curso HTML
3.Curso Excel
4.Curso Acces (bsico)
5.Curso Word
6.Iniciacin a la programacin estructurada

Volver al inicio de la pgina
Web oficial de la Instituto Wiener
Buzn de sugerencias

Curso Conceptos bsicos

A. Qu es la informtica?
1. Definicin de la informtica
2. Aplicaciones
B. Estructura del ordenador
1. Definicin de ordenador
2. Cmo funciona un ordenador?
3. Partes que integran un ordenador
C. Sistemas de numeracin
1. Sistema Binario
2. Sistema octal
3. Sistema hexadecimal
D. Arquitectura de un PC
1. Estudio de las diferentes partes
que integran un PC
2. Prctica

Volver a la pgina principal
Contenidos.html Concep_Basic.html
sugerencias@wienergroup.com
17
4. Imgenes
Los archivos de imgenes a usar en HTML pueden ser: archivos JPG,
archivos GIF, archivos PNG, Archivos BMP y archivos de iconos *.ICO
Etiqueta general
<IMG SRC=nombre_imagen.gif>
Si se desea que salga una descripcin de la imagen para que en el caso
de que no se carge LA IMAGEN se disponga de una breve descripcin,
se aadira el comando ALT de la siguiente forma:

<IMG SRC=nombre_imagen.gif alt=descripcin>
Posicin del ttulo de la imagen

Ttulo arriba
Ttulo en medio
Ttulo abajo
<IMG SRC=IMG1.gif Align=TOP>
<IMG SRC=IMG1.gif Align=MIDDLE>
<IMG SRC=IMG1.gif Align=BOTTOM>
18
Imagen como enlace a otra pgina
<A HREF=PAG.HTML><IMG SRC=IMG.GIF> </A>
Borde de la imagen: Si no se desea que aparezca el rectngulo que
rodea la imagen para resaltar el vnculo, hay que incluir dentro de
la etiqueta de la imagen al atributo BORDER=0.
<A HREF=PAG.HTML><IMG SRC=IMG.GIF BORDER=0> </A>
Imagen que enlaza con otra imagen
<A HREF=IMG1.GIF><IMG SRC=IMG2.GIF> </A>

Texto para enlazar con una imagen
<A HREF=IMG.GIF> Ver la imagen IMG </A>
Una imagen se puede usar como fondo de la pagina
<body background=imagen.ext> ejemplo: <body background=gokufondo.jpg>

Img2.gif
Img1.gif
19
<HTML>
<HEAD>
<TITLE> Mi pgina del web 4 </TITLE>
</HEAD>
<BODY>
<CENTER> <H1> Mi pgina del web </H1> </CENTER>
<HR>
Esta es mi pgina del web. No es muy extensa, pero tiene todos los
elementos bsicos. Espero que os guste. Poco a poco le ir aadiendo ms
cosas interesantes.
<P> <A HREF=MIPAG2.HTML><IMG SRC=hombre.jpg></A> Mis aficiones
<P> <A HREF=MIPAG3.HTML><IMG SRC=Casa.jpg></A> Mis pginas
favoritas
<CENTER> <H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC=Isla.jpg ALT=isla>
</CENTER>
</BODY>
</HTML>
Ejemplo: Copia el siguiente documento y guarda en tu carpeta de trabajo
dos imgenes con los siguientes nombres hombre.jpg, isla. jpg y casa.
jpg.
20
Prctica
Tecnologa de la Informacin

Conceptos de Tecnologas de la Informacin

Instituto Norbert Wiener

Las tecnologas de la informacin y la
comunicacin no son ninguna panacea ni
frmula mgica, pero pueden mejorar la vida de
todos los habitantes del planeta. Se disponen
de herramientas para llegar a los Objetivos de
Desarrollo del Milenio, de instrumentos que
harn avanzar la causa de la libertad y la
democracia, y de los medios necesarios para
propagar los conocimientos y facilitar la
comprensin mutua"

Ir a pagina principal
Presentacin
Objetivos
del curso
Contenido
Contenidos.html
TecInf.html
Presentacion.html
Presentacion.html
21
6. Los estndares del HTML
La mayora de las etiquetas son estndar para todos los
navegadores.

Etiqueta no estndar: el parpadeo
<BLINK> Este texto parpadea </BLINK>

Separador horizontal
<HR WIDTH=75%> Ocupar un 75% de su anchura normal
<HR WIDTH=300> Tiene una anchura de 300 pixels
<HR WIDTH=75% ALIGN=LEFT> Anchura del 75% con respecto a
la anchura normal y alineado a la
izquierda
<HR WIDTH=75% ALIGN=RIGHT> Anchura del 75% con respecto
a la anchura normal y alineado a la
derecha
<HR SIZE=4> Varia el espesor del separador
<HR color=color en ingles> Dar color a lnea separadora

22
7. Fondos
Fondo con un color uniforme
<BODY BGCOLOR=#XXYYZZ>
XX es un nmero indicativo de la cantidad de rojo
YY es un nmero indicativo de la cantidad de verde
ZZ es un nmero indicativo de la cantidad de azul
Numeracin en Hexadecimal={0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F}
MENOR MAYOR

Colores primarios
Rojo #FF0000
Verde #00FF00
Azul #0000FF
Otros colores
Blanco #FFFFFF
Negro #000000
Amarillo #FFFF00
Rojo oscuro #AA0000
Rosa # FF7070
23
Colores del texto y de los enlaces
TEXT color del texto
LINK color de los enlaces
VLINK color de los enlaces visitados

<BODY BGCOLOR=#XXYYZZ TEXT =#XXYYZZ LINK=#XXYYZZ VLINK
=#XXYYZZ >

Cambio del color de una parte del texto

<FONT COLOR=#XXYYZZ> Texto </FONT>

Recuerda que
<FONT FACE=Arial SIZE=4 COLOR=#XXYYZZ> Texto </FONT>

Fondos con una imagen

<BODY BACKGROUND=IMAGEN.GIF>
24
8. Alineacin y dimensionado de las
imgenes
Alineacin a la izquierda o a la derecha de una imagen en la
pgina

<IMG SRC=ordenador.gif ALIGN=LEFT>
Un ordenador llamado tambin computadora, es la mquina
que hace una serie de operaciones simples (sumas, restas,
multiplicaciones, divisiones, lecturas, impresiones, etc.) es un
tiempo mnimo y con la mxima seguridad.

La aplicacin de la informtica comercial cada da llega a ms
reas de la sociedad, desde la automatizacin de ciertos
electrodomsticos hasta los grandes ordenadores de ciertas
empresas.

<IMG SRC=ordenador.gif ALIGN=RIGHT>
25
Los perifricos corresponden a los elementos que proporcionan la informacin al
ordenador y a los elementos por los cuales el ordenador suministra los resultados del
proceso.
Los datos de entrada suministran la informacin necesaria al ordenador para que pueda resolver un
problema.
<BR CLEAR=LEFT>
Los perifricos corresponden a los elementos que proporcionan la informacin al
ordenador y a los elementos por los cuales el ordenador suministra los resultados
del proceso.
Los datos de entrada suministran la informacin necesaria al ordenador para que pueda resolver un
problema.
<BR CLEAR=RIGHT>
Ejemplo 2:
Interrumpir el proceso de rellenado del texto a los lados de la imagen
<BR CLEAR=LEFT> Busca el primer margen libre a la izquierda
<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha
<BR CLEAR=ALL> Busca el primer margen libre a ambos
lados
Ejemplo 1:
26
Dimensionado de una imagen

WIDTH: ancho
HEIGHT: alto
<IMG SRC=IMAGEN.GIF WIDTH=50 HEIGHT=50>

<IMG SRC=boton.gif WIDTH=50 HEIGHT=25>
27
Prctica
Objetivos del curso

En general, los objetivos que se consideran
fundamentales en esta y todas las asignaturas
son:

Cmo llevar a cabo
estos objetivos?
Expresin y comprensin de
mensajes. Para ello se incidir en la
utilizacin correcta de los conceptos y
terminologa especifica del mundo de la
informtica.
Tratamiento de la informacin.
Organizando adecuadamente la
informacin utilizando para ello las
herramientas oportunas.
Resolucin de problemas. Resolver
problemas de una cierta dificultad
utilizando programas de calculo
Actitudes bsicas como la
constancia y regularidad.
ObjetivosI.html
Muchas ganas de aprender
Inters
Ilusin
Curiosidad
Constancia

ObjetivosII.html
28
10. Tablas
Estructura de una tabla
<table border=2>
<tr>
<td> Text1 </td>
<td> Text2 </td>
<td> Text3 </td>
</tr>
<tr>
<td> aa </td>
<td> bb </td>
<td> cc </td>
</tr>
<tr>
<td> dd </td>
<td> ee </td>
<td> ff </td>
</tr>
<tr>
<td> gg </td>
<td> hh </td>
<td> ii</td>
</tr>
</table>

Text1 Text2 Text3
aa bb cc
dd ee ff
gg hh ii
<table>
etiquetas
</table>
29
Filas con desigual nmeros de
celdas

<table border=2>
<tr>
<td> Text1 </td>
<td> Text2 </td>
<td> Text3 </td>
</tr>
<tr>
<td> aa </td>
<td> bb </td>
<td> cc </td>
</tr>
<tr>
<td> dd </td>
<td> ee </td>
</tr>
</table>

Titular de la tabla

<caption> Ttulo de la tabla
</caption>
Text1 Text2 Text3
aa bb cc
dd ee
Text1 Text2 Text3
aa bb cc
dd ee
Ttulo de la tabla
Celdas de cabecera

En lugar de <TD> texto </TD> escribir
<TH> texto </TH> y pondr en negrita
y centrado las celdas cabecera.

Text1 Text2 Text3
aa bb cc
dd ee
30
Contenido de las celdas
Imgenes y Enlaces
<table>
<tr>
<td><img src=img1.jpg></td>
<td valign=TOP>Texto1</td>
</tr>
<tr>
<td align=RIGHT><A href=mipag1.html>Enlace
</a></td>
<td>Texto2</td>
</tr>
<tr>
<td> Texto3</td>
<td>Texto4</td>
</tr>
</table>

Texto 1
Enlace Texto 2
Texto 3 Texto 4
31
Posicionamiento del contenido dentro de la celda
<table>
<tr>
<td><img src=img1.jpg></td>
<td valign=Bottom>Texto1</td>
</tr>
<tr>
<td align=Center><A href=mipag1.html>Enlace
</a></td>
<td>Texto2</td>
</tr>
<tr>
<td> Texto3</td>
<td>Texto4</td>
</tr>
</table>

Texto 1
Enlace Texto 2
Texto3 Texto 4
32
Dimensiones de la tabla
Ancho <table Width=N%>
Alto <table Height=N%>

Combinar celdas: Filas y Columnas
<table border=2>
<tr>
<td colspan=2> Text1 </td>
<td> Text2 </td>
</tr>
<tr>
<td rowspan=3> aa </td>
<td> bb </td>
<td> cc </td>
</tr>
<tr>
<td> ee </td>
<td> ff </td>
</tr>
<tr>
<td> hh </td>
<td> ii</td>
</tr>
</table>

Text1 Text2

aa

bb cc
ee ff
hh ii
33
Color de fondo en las tablas
Color en la totalidad de la tabla
<table bgcolor=#XXYYZZ>
Color en una celda determinada
<td bgcolor=#XXYYZZ> texto </td>

Imgenes de fondo en las tablas
<table background=img.jpg>

Separacin entre las celdas de una tabla
<table border cellspacing=20>

Separacin entre el borde y el contenido dentro de las celdas
<table border cellpadding=20>

34
Prcticas: Crea las siguientes tablas utilizando el lenguaje HTML

T1 T2 T3
A B C
D E F
G H I
Titulo 1

Txt1

Txt2
Txt3

Txt4
Enlace Txt5

T1
T2
AA BB CC

DD
FF GG
HH

T1

T2

A

B
C D
Tabla 1 Tabla 2 Tabla 3
Tabla 4
Tabla 5
T1 T2
AA BB CC
DD EE FF GG
HH II
JJ KK LL MM
GRACIAS

Lenguaje HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lenguaje HTML

Enviado por

Direitos autorais:

Formatos disponíveis

TTULO DEL TEMA

Você também pode gostar