Beruflich Dokumente
Kultur Dokumente
Lenguaje
HTML
Lenguaje de Marcas - HLC
2 SMR 15/16
Profesor Juan Carlos Moreno
IES NTRA. SRA. LOS REMEDIOS - UBRIQUE
1. INTRODUCCIN
A.
B.
C.
Cualquier ordenador y
sistema operativo.
Editores HTML:
Asistentes HotDog
Conversores Word
Editores WYSIWYG
Dreamweaver
Netbeans
Notepad ++
<Nombre_Etiqueta>
<Nombre_Etiqueta>Texto</Nombre_Etiqueta>
<HR>
<HR SIZE=1> con grosor 1
<HR SIZE=2>
.
Pgina: <HTML>
Cabecera <HEAD>
Ttulo <TITLE></TITLE>
Encabezados <H1><H1>
Lneas <HR>, <HR
SIZE=2>
<HTML>
<HEAD>
<TITLE>
<BODY>
<H1>
<HR>
10
2.2.1 <HTML>
Inicio <HTML>
Fin </HTML>
11
2.2.2 <HEAD>
Inicio cabecera:
<HEAD>
Fin de cabecera
</HEAD>
12
2.2.3 <TITLE>
13
2.2.4 <BODY>
En el cuerpo es donde se
escribe el resto del
cdigo de nuestra pgina.
14
15
Left
Right
Center
16
3. Prrafos en HTML
Espaciados
Saltos de lnea
Tabulados
17
<br>
<br>
<br>
18
19
20
<BLOCKQUOTE></ BLOCKQUOTE>
Permite establecer textos con sangra
Establece un margen por la izquierda y otro por la
derecha
21
En ingls significa
direccin
Se usa para incluir
informacin sobre:
Autor de la pgina
Fecha
Empresa
Siempre al final
<adress></adress>
22
23
4. Imgenes. <IMG>
Parmetros:
SRC=abispa.jpg
SRC=Imagenes/abispas.jpg
Ejemplo:
<IMG SRC=imagen.jpg ALT=Imagen de la Sierra
ALIGN=middle HSPACE=10 VSPACE=10>
24
25
26
5. Enlaces de Hipertexto
Parte especial de una pgina que al ser pulsado nos abre una
nueva pgina o cualquier otro documento.
Sinnimos:
Enlaces, Hipervnculo, Hiperenlaces, Hipertexto, Link, etc
Normalmente los links se utilizan con textos, pero tambin se
pueden usar con imgenes, sonidos, vdeos, y prcticamente
cualquier tipo de archivo.
Tipos de enlaces:
Internos:
Externo:
27
28
29
6. Color de Fondo
En la etiquete Body
se aade el siguiente
parmetro.
<body
bgcolor="#E0F8F7>
Cada color se
corresponde con una
cadena en
HEXADECIMAL:
#FFFFFF Blanco
#FF0000 - Rojo
Lenguaje
Aplicaciones
de Marcas
Web
- HLC
- 2 SMR
- 2 SMR
11/12
15/16
30
7. Mrgenes Pgina
<body
bgcolor="#E0F8F7"
leftmargin="150px"
topmargin="10px"
rightmargin="150px"
bottommargin="10px">
31
7. Anclas
<a name="nombreAncla">Texto</a>
<a href=Historia.html#nombreAncla">Texto</a>
Tema 2. Lenguaje HTML
32
<a
href="#Geografia">Geogr
afa</a>
<H2><a
name="Geografia">Ge
ografa</a></H2>
En este caso <H2> se
coloca slo para darle
caracter de ttuo al
texto
33
8. Formato de Texto y
Caracteres Especiales
34
Negrita: <B>..</B>
Cursiva: <I>..</I >
Teletipo: <TT>..</TT>
Texto Tachado:
<STRIKE>..</STRIKE >
Tamao Grande:
<BIG>..</BIG>
Tamao Pequeo:
<SMALL>..</SMALL>
Subndices:
<SUB>..</SUB>
Superndices:
<SUB>..</SUB>
Subrayados: <U>...</U>
35
Resaltar Texto:
<STRONG>...< /STRONG>
Enfatizar: <EM>...< /EM>:
Cdigo programacin:
<CODE>...< /CODE>:
Ejemplos: <SAMP>...<
/SAMP>:
Delimitacin texto escrito
por usuario: <VAR>.. <
/VAR>
Cita o Referencia:
<CITE>...< /CITE>
Definicin: <DFN>...<
/DFN>
36
Atributos:
Tamao
Color
Nombre de fuente o tipo de letra
FACE: "Comic Sans MS, Arial, MS
Sans Serif"
COLOR:
N Hexadecimal: #FF0011
Texto predefinido: black, white,
maroon, olive, navy, purple, red,
yellow, blue, teal, lime, aqua,
fuchsia, silver
SIZE:
N del 1 al 7
Incremento o decremento del 1 al
7. (+/-) 1 al (+/-) 7
Defecto 3
37
38
39
9. Listas en HTML
Numerada u ordenada
No ordenada
Listas de glosario o definicin
Anidamientos de listas
40
<UL>...</UL>: La lista
ha de estar delimitada
por estas dos
etiquetas.
TYPE=circle|square|disc
41
Type:1|a|A|I|i
Start: N
Value: N
42
43
44
45
Mejorar la apariencia
de una pgina web
Formas expresar color:
46
Ventajas:
Desventajas:
Fcil para el
programador
No todos los
navegadores lo
interpretan
N de colores a usar muy
limitado
47
Desventajas:
00 Mnima intensidad
FF Mxima intensidad
Ejemplos:
Ventajas:
#RRGGBB
Red
Green
Blue
48
Fondo de pantalla:
Texto:
<body text=#RRGGBB>
<font color=#RRGGBB>
<basefont
color=#RRGGBB>
<body
bgcolor=#RRGGBB>
<body link=#RRGGBB
vlink =#RRGGBB
alink=#RRGGBB>
49
Bordes adecuados.
<body background=imagen.jpg>
www.specialweb.com
www.dewa.com
www.teleport.com
50
Incluir imgenes
Manejarlas
Cambiar su apariencia
Controlar su disposicin respecto a los dems
elementos de la pgina.
51
52
top
middle
bottom
left
right
53
13.2.1 ALIGN=top
54
13.2.2 Align=middle
55
13.2.3 Align=bottom
56
13.2.4 Align=left
La imagen se alinea a
la izquierda y puede
estar rodeada de texto
por arriba, derecha y
parte inferior
57
13.2.5 Align=right
La imagen se sita a la
derecha de la pgina y
el texto la puede
bordear por arriba,
izquierda y abajo.
58
VSPACE: margen
vertical. N en pixels
HSPACE: margen
horizontal. N en pixels.
59
60
BORDER=0
BORDER=1
BORDER=10
61
Width: anchura
Height: altura
62
14. Tablas
Herramienta perfecta
para mostrar datos de
forma ordenada
Definir estructura o
maquetacin de las
pginas (escondiendo
los bordes)
63
64
65
Valores Align:
Valores:
66
67
68
69
15. Formularios
70
71
15.2 Controles
72
73
74
Campos de formulario
en los que el usuario
podr introducir varias
lneas de texto
Etiqueta <TEXTAREA>
Atributos:
NAME=texto. Nombre
del control
ROWS=n. Nmero de
lneas de la caja
COLS=n. Nmero de
columas de la caja
75
76
77
Listas Desplegables
Cuadros de Listas
Atributos:
NAME=nombre. Nombre de la
seleccin
SIZE=n. Nmero de opciones
que se pueden ver al mismo
tiempo. Permite crear los
Cuadros de Listas
<OPTION>. Permite definir un
valor de la lista DESPLEGABLE
<OPTION VALUE=Texto>.
Define un valor del cuadro de
lista
<SELECT NAME="color">
<OPTION>Verde
<OPTION SELECTED>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
78
Refresco
Enviar
79
80
Sintxis:
81
82
Autor:
Generador:
Distribucin:
Ultima actualizacin:
Lenguaje:
<META NAME="author"
CONTENT=Profesor del
Departamento Informtica IES LOS REMEDIOS">
83
84
Es otra cosa en la que se fijan mucho los motores de bsqueda al indexar una
pgina web. Si nuestra web lo permite, debemos colocar un primer prrafo que sirva
de introduccin a todo lo que podemos encontrarnos en la pgina o en la web.
Este primer prrafo, Deber estar colocado dentro del <BODY>, lo mas cerca
posible de este. Si es posible, evitaremos que entre la etiqueta y el primer prrafo
existan otras etiquetas, como imgenes.
Deber ser legible. Este texto se ver en la pgina, igual que cualquier prrafo, por
eso debe leerse bien.
Podramos poner en la pgina del mecnico este texto despus de la etiqueta
<BODY> <H1 align=center> Todo Auto</H1>
En Vallecas, situado en la carretera de Valencia a 3 km de Madrid, se
encuentra nuestro taller de reparacin de automviles y recambios.
Estaremos gustosos de atenderles y ofrecerles nuestros servicios de todo
tipo para su coche, como cambio de aceite, reparacin de lunetas termicas, y
otros.
De manera adicional, y sobretodo durante los primeros prrafos podemos utilizar
otras tcnicas, de ms dudosa utilidad.
Utilizar los encabezamientos (etiquetas <H1> y similares) para destacar los ttulos de las
pginas siempre que se pueda.
Definir los atributos ALT de las imgenes con palabras claves
Estas tcnicas han de usarse siempre con moderacin, evitando cualquier uso
excesivo que acabe perjudicando
la posicin del sitio.
Tema 2. Lenguaje HTML
Lenguaje de Marcas - HLC - 2 SMR 15/16
85