Beruflich Dokumente
Kultur Dokumente
Etiquetas
La unida bsica del lenguaje HTML son las etiquetas.
Una etiqueta es una cadena formada por los smbolos de menor y mayor y entre ellos una
cadena que determina el nombre de la etiqueta.
< Nombre_de_la_etiqueta >
Generalmente las etiquetas se utilizan como delimitadores, por lo cual una etiqueta esta
compuesta de una parte que indica el inicio u el complemento que indica la finalizacin.
Sintaxis: Etiqueta con inicio u fin
<Etiqueta_Inicio> Texto contenido < / Etiqueta_Fin>
Tambin existen etiquetas simples las cuales se componen solo de la parte de inicio.
Sintaxis: Etiqueta Simple
<Etiqueta_Inicio>
Saltos de lnea.
En un documento HTML, los saltos de lnea se generan en los siguientes casos:
1.
2.
Importante.
Como se puede observar esta etiqueta no cuenta con inicio y fin, pues es una solo (inicio)
AtributosAlgunos
de Body
atributos de body
El cuerpo principal de una pagina puede presentar diversos atributos como :
<body bgcolor="#0000FF">
<body bgcolor="blue">
<body background="fondo.gif">
<body background="imagenes/fondo.gif">
<body text="#FF0000">
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
Colores en hexadecimal
Paleta de Colores
Color
Hexadecimal
Nombre
#FFFFFF
white
#000000
black
#000080
navy
#0000FF
blue
#008000
green
#008080
teal
#00FF00
lime
#00FFFF
aqua
#800000
maroon
#800080
purple
#808000
olive
#808080
gray
#C0C0C0
silver
#FF0000
red
#FF00FF
fuchsia
#FFFF00
yellow
Atributos:
Atributo
Operacin
Valores
align
Alinea el prrafo
center
left
right
justify
Ejemplos.
<p>Es un discurso ciertamente muy interesante de un innovador que comenta su forma
de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros,
sujeto cada vez con mucha mayor frecuencia a ms cambios. </p>
Operacin
Valores
align
Alinea el encabezado
center
left
right
justify
donde:
Encabezados. Ejemplo2
Encabezado 1, tamao fuente: 6
Encabezado 2, tamao fuente: 5
Encabezado 3, tamao fuente: 4
Encabezados. Ejemplos 3
Por default:
Si no se indica una alineacin se
aplica alineacin a la izquierda
Tipo de letra.
2.
Color de la letra
3.
Tamao de la letra
Sintaxis.
Operacin
Valores
face
size
Determina el tamao de la
letra
{1, 2, 3, 4, 5, 6, 7}
color
Importante.
El conjunto de fuentes, es aquel que existe en el equipo donde ser reproducido el documento HTML.
Significado
Ejemplo
<b>
negrita
Mi Pagina HTML
<i>
cursiva
Mi Pagina HTML
<u>
subrayado
<s>
tachado
Mi Pagina HTML
<tt>
teletipo (mquina de
escribir)
Mi Pagina HTML
<big>
aumenta el tamao de
la fuente
Mi Pagina HTML
<small>
disminuye el tamao de
la fuente
Mi Pagina HTML
Mi Pagina HTML
Importante las fuentes se dividen principalmente en tres clases: serif (las fuentes
"con serifa" al estilo Times, Georgia...); sans-serif (las fuentes "sin serifa" al estilo
Arial, Helvetica, Geneva...); y mono que son las de anchura fija como Courier o
Monaco (ideales para cdigo fuente por ejemplo).
Ejemplo
Tamao de la letra.
Para determinar el tamao de la letra se utiliza el atributo size de la etiqueta <font>.
Configuracin del
tamao de la letra.
Configuracin de tipo y
tamao de la letra.
Texto en negritas.
La etiqueta <b> permite aplicar estilo negritas al texto del documento HTML.
Sintaxis.
<b>Texto para formatear</b>
Texto en Cursivas.
La etiqueta <i> permite aplicar estilo cursivas al texto del documento HTML.
Sintaxis.
<i>Texto para formatear</i>
Texto Subrayado.
La etiqueta <u> permite aplicar estilo subrayado al texto del documento HTML.
Sintaxis.
<u>Texto para formatear</u>
Separadores
La etiqueta <hr> permite agregar separadores verticales en un documento HTML.
Sintaxis.
<hr>
Atributos.
Atributo
Operacin
Valores
width
size
En pixeles
noshade
Ninguno
align
Ejemplo
Etiquetas anidadas.
Marquesinas
<marquee> y </marquee>.
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
Atributos:
behavior
direction
down
up
left
right
Listas
<ul> y </ul>.
Lista desordenada
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
Perro
Gato
Periquito
<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
vieta
circle (crculo), disc (disco) o square (cuadrado).
<ol> y </ol>.
Lista ordenada
type
1 (nmeros), a (letras minsculas), A (letras
maysculas), i (numeros romanos en minsculas)
o I (nmeros romanos en maysculas).
Ejemplo
Tipos de URL
ENLACES
hiperenlace, hipervnculo, o vnculo
<a> y </a>.
href
Enlaces
Destino del enlace
determina en qu ventana va a ser abierta la pgina vinculada
atributo target
define el ancla
lleva al ancla
enlaces
Correo electrnico:
<a href="mailto:hubelsolis@hotmail.com">mi e-mail </a>
<a href="mailto:jubelsolis@hotmail.com?subject=el asunto del mensaje">
mi e-mail </a>
Ejemplo
IMGENES
<img>
Ejemplo
TABLAS
<table> y </table>
<tr> y </tr>
<td> y </td>
columna o celda
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
..
</table>
inicio de tabla
inicio de fila 1
celda 1 de la fila 1
celda 2 de la fila 1
fin de la fila 1
inicio de fila 2
celda 1 de la fila 2
celda 2 de la fila 2
fin de la fila 2
fin de la tabla
Atributos de una
Tabla
Atributos
de una tabla:
Significado
Posibles valores
width
ancho de la tabla
height
altura de la tabla
cellpadding
un nmero
cellspacing
un nmero
border
un nmero
align
alineacin de la tabla
dentro de la pgina
left (izquierda)
right (derecha)
center (centro)
bgcolor
color de fondo
nmero hexadecimal
background
imagen de fondo
nmero hexadecimal
bordercolor
nmero hexadecimal
Atributo
de una celda:
Atributos de Atributos
las celdas
Significado
Posibles valores
width
ancho de la tabla
height
altura de la tabla
align
left (izquierda)
right (derecha)
center (centro)
valign
bgcolor
color de fondo
nmero hexadecimal
background
imagen de fondo
nmero hexadecimal
bordercolor
nmero hexadecimal
Atributo
Ejemplo
Ejemplo
nombre
FIESTA 3 DE JULIO
descripcin
POR EL
CENTENARIO DE
LA FACULTAD
GATITO
GRAFICO
EXTARIDO DEL
TUTORIAL
OTRO CUALQUIERA
PUEDE IR
CUALQUIER COSA
FOTOGRAFIA
aqui va texto,
imagenes, video
O SIMPLEMENTE
TEXTO
<table border="2">
<tr>
<td>nombre</td>
<td>descripocion</td>
<td>FOTOGRAFIA</td>
</tr>
<tr>
<td>FIESTA 3 DE JULIO</td>
<td>POR LOS 50 AOS DE LA FACULTAD</td>
<td>aqui va texto, imagenes, video</td>
</tr>
<tr>
<td>GATITO</td>
<td>GRAFICO EXTARIDO DEL TUTORIAL</td>
<td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td>
</tr>
<tr>
<td>OTRO CUALQUIERA</td>
<td>PUEDE IR CUALQUIER COSA</td>
<td>O SIMPLEMENTE TEXTO</td>
</tr>
</table>
Titulo de columna
<th> y </th>
Combinacin de celdas
colspan y rowspan
colspan especifica el nmero de columnas por las que se extender la celda
rowspan especifica el nmero de filas por las que se extender la celda
Atributos avanzados
Caso de Estudio
combinacin de 4 columnas
NOMBRE
DATOS
FECHA
NOTA 1
NOTA 2
JUAN CARLOS
10.75
12.97
16/AGOSTO/2007
LUISA
20.65
2.65
30/AGOSTO/2007
MARCOS (FRAME)
<frameset> y </frameset>Define el conjunto de marcos
no requiere las etiquetas <body> y
</body>
Atributo
Significado
Posibles valores
cols
rows
frameborde
r
aparece o no el borde
de los marcos
yes
no
framespaci
ng
un nmero
border
bordercolor
nmero hexadecimal
Atributos
deindica
unelMarco
<frame>
documento a cargar en el marco
Significado
Posibles valores
frameborder
yes o 1
no o 0
name
cualquier valor
noresize
marginwidth
marginheigh
t
scrolling
se mostrar o no la barra de
desplazamiento cuando la pgina del
marco no se pueda visualizar
completamente en l
yes
no
auto
src
Atributo
FORMULARIOS
Permite recoger datos introducidos por el usuario.
Un formulario est formado, entre otras cosas, por etiquetas,
campos de texto, mens desplegables, y botones
<form> y </form>
Ejemplo
ELEMENTOS DE UN FORMULARIO
<textarea> y </textarea>
rea de texto
elemento de entrada
atributo name indica el nombre del elemento de entrada
atributo type indica el tipo de elemento de entrada.
El atributo size indica el nmero de caracteres
El atributo maxlenght indica el nmero de caracteres
El atributo value indica el valor inicial del campo de texto
CONTRASEA
BOTON
CASILLA DE
VERIFICACION
BOTON DE OPCION
SELECION MULTIPLE
RESTABLECER
Ejemplo
Ejemplo
Ejemplo