Conceptos Basicos de HTML

HTML Basico
Desarrollo de Aplicaciones Web
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>
Atributos de las etiquetas.

Las etiquetas contienen una serie de parmetros para poder personalizar la operacin que
deslizan.
Estos parmetros son llamadas Atributos de la etiqueta.
Los atributos son parmetros que se configuran en el momento de generar una etiqueta.
Sintaxis:
< Etiqueta atributo1= Valor atributo2=Valor > Texto Contenido </Etiqueta>
Notas:
1. El atributo se genera del par nombre = Valor
2. El valor del atributo siempre se escribe entre comillas.
3. Los atributos son denotados dentro de la etiqueta de inicio.
4. Los atributos se separan entre ellos a travs de espacios en blanco.
Estructura de un documentos HTML.

La estructura bsica de un documentos HTML esta compuesto por una secuencia de
etiquetas. A continuacin se muestra la estructura bsica de un documentos HTML.
<html>
<head>
Datos de configuracin del documento.
</head>
<body>
Cuerpo del documento.
</body>
</html>
1. La etiqueta <html> indica el inicio de un documento HTML.

2. La etiqueta <head> es util, para configurar datos acerca del documento
3. La etiqueta <body> agrupa a todo el contenido del documento
4. Los comentarios se pueden agregar con 
Saltos de lnea.
En un documento HTML, los saltos de lnea se generan en los siguientes casos:
1.
Despus de una etiqueta prrafo <p></p>
2.
Despus de una etiqueta de encabezado <hn></hn>
Para genera explcitamente un salto de lnea, se utiliza la etiqueta <br>

Sintaxis.
Lnea del documento <br>
<br> lnea del documento
<p>prrafo del documento</p>
<br><p>prrafo del documento</p>
<br><br><br>
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
Etiquetas para Prrafo.

Etiqueta para delimitar prrafo.
<p> Texto prrafo </p>
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>
<p align=center>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>
Etiqueta para Encabezados.

Para generar encabezados en un documento HTML, se utilizan las etiquetas de encabezado.
Las etiquetas de encabezado formatean el texto en estilo negritas y con un tamao de fuente
especifico.
Sintaxis:
<hn>Texto de encabezado del documento </hn>

Atributo
Operacin
Valores
align
Alinea el encabezado
center
left
right
justify
donde:
h. Indica que se esta generando un encabezado o titulo.

n. Es un numero entero que indica el tipo de encabezado
Valore posibles para n = {1, 2, 3, 4, 5, 6}
Al terminar la etiqueta de encabezado, se genera automticamente un salto de lnea.
Encabezados. Ejemplo2
Encabezado 1, tamao fuente: 6

Encabezados. Ejemplos 3
Por default:
Si no se indica una alineacin se
aplica alineacin a la izquierda
Formato del texto.

Cuando se requiere personalizar el formato del texto en documentos HTML, se utilizan varias etiquetas, una
de las mas importantes es la etiqueta <font>
La etiqueta font permite configurar:
1.
Tipo de letra.
2.
Color de la letra
3.
Tamao de la letra
Sintaxis.
<font>Texto para formatear</font>

Atributo
Operacin
Valores
face
Determina tipo de letra
Fuentes del sistema cliente
size
Determina el tamao de la
letra
{1, 2, 3, 4, 5, 6, 7}
color
Configura el color de la letra
Tabla de colores HTML
Importante.
El conjunto de fuentes, es aquel que existe en el equipo donde ser reproducido el documento HTML.
asociadas al tipo de letra:

Atributosetiquetas
para texto
Etiqueta
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
Configurando tipo de letra
Tipo: Arial black

Tipo: times New Roman
Tipo: symbol
Configurando tipo de letra

Se pueden configurar varios tipos de letras, as en caso que el equipo cliente no cuente con la primera
tendr la opcin de ejecutar alguna de la lista de configurada.
Fuente conocida por el diseador,

pero no conocida por el equipo
cliente
En este caso se muestra que el

tipo de letra: miFuente no
existe en el equipo cliente, pero
se ejecuta la configuracin de
una segunda fuente para el
texto
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.
Configuracin del Color de la letra.

Para determinar el color de la fuente se realiza mediante el atributo color de la etiqueta <font>. El valor
para el atributo se puede proporcionar con el nombre del color (en ingles) o con un valor hexadecimal.
Color mediante nombre del color.
Color mediante Cdigo Hexadecimal.
Texto en negritas.
La etiqueta <b> permite aplicar estilo negritas al texto del documento HTML.
Sintaxis.
<b>Texto para formatear</b>
Texto en estilo Normal
Texto en estilo Negritas
Texto en Cursivas.
La etiqueta <i> permite aplicar estilo cursivas al texto del documento HTML.
Sintaxis.
<i>Texto para formatear</i>
Texto estilo normal
Texto estilo Cursivas
Texto Subrayado.
La etiqueta <u> permite aplicar estilo subrayado al texto del documento HTML.
Sintaxis.
<u>Texto para formatear</u>
Texto estilo Normal.
Texto estilo Subrayado.
Separadores
La etiqueta <hr> permite agregar separadores verticales en un documento HTML.
Sintaxis.
<hr>
Atributos.
Atributo
Operacin
Valores
width
Determina el ancho (longitud

horizontal) del separador.
Valor entero en pixeles o en

porcentaje
size
Determina la altura o espesor del

separador.
En pixeles
noshade
Si se aparece este atributo se

elimina la sombra del separador
Ninguno
align
Alineacin del separador
Alinea el separador (solo si no

esta al 100% de ancho)
Ejemplo
Etiquetas anidadas.
Secuencia de apertura: <b> <i> <u>
secuencia de cierre: </u> </i> </b>

3
Esto aplica para todas las etiquetas de

formato de texto.
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
alternate scroll slide
direction
down
up
left
right
Las marquesinas presentaron una de las principales formas de animacin en

los principios de HTML
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).
Listas anidadas: combinacin de las anteriores.
Ejemplo
Caso de EstudioUn avance

1. Crear una pagina de inicio en blanco
2. Colocar un titulo centrado y subrayado (mi pagina personal)
3. Insertar una marquesina (con fondo rojo, tamao de letra 5,
y comportamiento continuo.
4. Insertar un prrafo de texto con sangra a la izquierda y
alineacin a la izquierda.
5. Crear una divisin horizontal .
6. Escribir un texto ( prrafo) centrado que indica una frase
arbitraria.
7. Insertar una divisin horizontal.
8. Insertar un texto preformateado que introduce a nuestras
ocupaciones principales (centrado).
9. Crear una lista que muestra las reas de inters de
informacin.
10.Insertar listas anidadas a cada item.
URL Localizador Universal de Recursos
Tipos de URL
ENLACES
hiperenlace, hipervnculo, o vnculo
<a> y </a>.
href
especifica la pgina a la que est asociado el enlace
Referencia absoluta: Conduce a una ubicacin externa al sitio
<a href="http://www.mipagina.com">Visita www.mipagina.com</a>

Referencia relativa al sitio: Conduce a un documento situado
dentro del mismo sitio
<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>

<a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>
<a href="//D:/diplomado/tutoriales/www.mipagina.es/html/index.htm">navegar
por el tutorial</a>
Enlaces
Destino del enlace
determina en qu ventana va a ser abierta la pgina vinculada
atributo target
_blank Abre el documento vinculado en una

ventana nueva del navegador.
_self
Abre el documento vinculado en el
mismo marco o ventana que el vnculo
<a href="inicio1.html" target="_blank">

cambiar a otro documento "ref. relativa"</a> <br>
Anclas o puntos de fijacin

permite ir directamente al apartado deseado en un documento extenso
<a name="miancla"></a>Texto con ancla
define el ancla
<a href="#miancla">Enlace al ancla</a>
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>
Vnculo a ficheros para descarga:

<a href="sib1.doc" tarjet=_blank >
haz clic aquí para descargarte el fichero
</a>
Ejemplo
IMGENES
<img>
Ejemplo
TABLAS
<table> y </table>
INICO Y FIN DE TABLA
<tr> y </tr>
Inicio y fin de fila
<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
fin de la fila 1
inicio de 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
un nmero, acompaado de % cuando se

desee que sea en porcentaje
height
altura de la tabla

cellpadding
espacio entre el contenido

de las celdas y el borde
un nmero
cellspacing
espacio entre celdas
un nmero
border
grosor del borde
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
color del borde
nmero hexadecimal
Atributo
<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="green" bgcolor="blue">
de una celda:
Atributos de Atributos
las celdas
Significado
Posibles valores
width
ancho de la tabla

height
altura de la tabla

align
alineacin horizontal del

contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineacin vertical del

contenido de la celda
baseline (lnea de base)

bottom (inferior)
middle (medio)
top (superior)
bgcolor
color de fondo
nmero hexadecimal
background
imagen de fondo
nmero hexadecimal
bordercolor
color del borde
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>
<tr align="center" bgcolor="yellow">
Para toda la fila la alineacin es

Centrado y el fondo amarillo
<td bgcolor="purple">GATITO</td> Solo para la celda el fondo es prpura
Titulo de columna
<th> y </th>
idntico a td pero centrado y negrilla
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
Ejemplo con mas atributos
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
tamao de cada una de

las columnas en que se
divide el documento
un nmero (acompaado de % cuando se

desee que sea en porcentaje) por cada
columna, separados por comas.
rows
tamao de cada una de

las columnas en que se
divide el documento
un nmero (acompaado de % cuando se

desee que sea en porcentaje) por cada fila,
separados por comas.
frameborde
r
aparece o no el borde
de los marcos
yes
no
framespaci
ng
separacin entre los

marcos
un nmero
border
grosor del borde

bordercolor
color del borde
nmero hexadecimal
Atributos
deindica
unelMarco
<frame>
documento a cargar en el marco
Significado
Posibles valores
frameborder
aparece o no el borde del marco
yes o 1
no o 0
name
nombre del marco
cualquier valor
noresize
si aparece, el usuario no podr

redimensionar el tamao de este marco
no puede tomar valores
marginwidth
anchura del margen con respecto a los

bordes del marco
un nmero, acompaado de % cuando

se desee que sea en porcentaje
marginheigh
t
altura del margen con respecto a los

bordes del marco
un nmero, acompaado de % cuando

se desee que sea en porcentaje
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
documento que se cargar en el marco
ruta y nombre del documento
Atributo
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue">

<frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red">
<frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize>
<frame src="inicio.html" name="marcoderecho">
</frameset>
</frameset>
Destino de los enlaces de un marco

Los nombres de los marcos pueden constituirse en el destino
De un documento
En la pgina del marco izquierdo (menu.html) crear el siguiente enlace:
<a href="inicio1.html" target="marcoderecho">matematicas</a>
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>
indican el inicio y fin de un formulario
El atributo action indica una direccin de correo electrnico o la direccin

del programa que se encargar de procesar el contenido del formulario.
El atributo method indica el metodo mediante el que se transfieren
las variables del formulario. Su valor puede ser get o post
Ejemplo
ELEMENTOS DE UN FORMULARIO
<textarea> y </textarea>
rea de texto
<textarea name=area1" cols="30" rows="3">

Aqu se escribe el texto</textarea>
<input>
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
Elementos para type:

Elementos
para Type
TEXTO
<input name="campo" type="text" value="Campo de texto"

size="20" maxlength="15">
CONTRASEA
<input name="contra" type="password"

value="contrasea" size="20" maxlength="15">
BOTON
<input name="boton" type="submit"

value="Enviar">
CASILLA DE
VERIFICACION
<input name="casilla" type="checkbox"

value="acepto" checked>
BOTON DE OPCION
<input name="prefiere" type="radio"

value="estudiar" checked>
<input name="prefiere" type="radio"
value="trabajar">
SELECION MULTIPLE
RESTABLECER
<select name="animal" size="3" multiple>

<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>
<input name="borrar" type="reset" id="borrar"

value="borrar">
Ejemplo
Ejemplo
Ejemplo

Conceptos Basicos de HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Conceptos Basicos de HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Basico

Desarrollo de Aplicaciones Web

Atributos de las etiquetas.

Estructura de un documentos HTML.

1. La etiqueta <html> indica el inicio de un documento HTML.

Despus de una etiqueta prrafo <p></p>

Despus de una etiqueta de encabezado <hn></hn>

Para genera explcitamente un salto de lnea, se utiliza la etiqueta <br>

Etiquetas para Prrafo.

<p> Texto prrafo </p>

<p align=center>Es un discurso ciertamente muy interesante de un innovador que

Etiqueta para Encabezados.

<hn>Texto de encabezado del documento </hn>

h. Indica que se esta generando un encabezado o titulo.

Encabezado 4, tamao fuente: 3

Formato del texto.

<font>Texto para formatear</font>

Determina tipo de letra

Fuentes del sistema cliente

Configura el color de la letra

Tabla de colores HTML

asociadas al tipo de letra:

Configurando tipo de letra

Tipo: Arial black

Configurando tipo de letra

Fuente conocida por el diseador,

En este caso se muestra que el

Configuracin del Color de la letra.

Color mediante nombre del color.

Color mediante Cdigo Hexadecimal.

Texto en estilo Normal

Texto en estilo Negritas

Texto estilo normal

Texto estilo Cursivas

Texto estilo Normal.

Texto estilo Subrayado.

Determina el ancho (longitud

Valor entero en pixeles o en

Determina la altura o espesor del

Si se aparece este atributo se

Alineacin del separador

Alinea el separador (solo si no

Secuencia de apertura: <b> <i> <u>

secuencia de cierre: </u> </i> </b>

Esto aplica para todas las etiquetas de

alternate scroll slide

Las marquesinas presentaron una de las principales formas de animacin en

Listas anidadas: combinacin de las anteriores.

Caso de EstudioUn avance

URL Localizador Universal de Recursos

especifica la pgina a la que est asociado el enlace

Referencia absoluta: Conduce a una ubicacin externa al sitio

<a href="http://www.mipagina.com">Visita www.mipagina.com</a>

<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>

_blank Abre el documento vinculado en una

<a href="inicio1.html" target="_blank">

Anclas o puntos de fijacin

<a href="#miancla">Enlace al ancla</a>

Vnculo a ficheros para descarga:

INICO Y FIN DE TABLA

Inicio y fin de fila

un nmero, acompaado de % cuando se