Manual de html

CONTENIDOS
• Que es HTML
• Editores
• Etiquetas
• Estructura de los documentos de HTML
• Primera Aplicación
• Directivas

Qué es HTML
• Es el lenguaje con el que se escriben
las páginas web.
• Es un lenguaje de hipertexto, permite
escribir texto de forma estructurada.

• Puede contener imágenes, sonido, vídeos, etc.
• Los navegadores se encargan de interpretar el
código HTML de los documentos, y de mostrar
a los usuarios las páginas web resultantes del
código interpretado.

Editores
• Un editor es un programa que nos permiten
redactar documentos
• Para crear páginas web escribiendo
directamente el código HTML puedes utilizar
la herramienta Wordpad o el Bloc de notas.

Etiquetas
Delimitan cada uno de los elementos que
componen un documento HTML.
• La etiqueta de comienzo está delimitada por los
caracteres < y >, esta a su vez puede contener
una serie de atributos.
• La etiqueta de final está delimitada por los
caracteres </ y >.

Estructura de los documentos de
HTML
• Empieza con la etiqueta <HTML>
• Contiene dos secciones: <HEAD> cabeza y
<BODY> cuerpo.
• La cabecera puede contener el titulo del
documento encerrado por el elemento
<TITLE>.
• En el cuerpo se encuentra todo el contenido del
documento, ya sea, texto, imágenes, sonidos,
hipervínculos, etc.

Ejemplo de una estructura
HTML
• <HTML> Inicio de la página Web
• <HEAD> Inicio del Encabezado
• <TITLE> Titulo de la ventana
• <META> Información sobre la pagina
• </TITLE> Fin de la etiqueta del titulo
• </HEAD> Fin de la cabecera
• <BODY> Inicio del cuerpo de la pagina
• .
• . Sentencias
• .
• </BODY> Fin del cuerpo de la pagina
• </HTML> Fin de la pagina Web

Empezando
• Para abrir el Bloc de Notas, le damos clic a
• Inicio
• >Todos los programas
• > Accesorios
• > Bloc de notas. Se abrirá una ventana como
ésta:

Mi primera aplicación
• Escribimos este código de prueba en Bloc de Notas.
• <HTML>
<HEAD>
<TITLE> EJERCICIO 1
</TITLE>
</HEAD>
<BODY>
Mi Primera pagina
</BODY>
</HTML>

Guardar Archivo
• Ahora tenemos que guardar nuestro documento.
Escribimos el nombre que deseemos y su
extensión .html
• También se podría guardar con la extensión .htm (el
resultado es exactamente el mismo).
• Le damos a Archivo > Guardar

Directiva Tipo Función

Abierta Salto de Línea

Cerrada Centrado

Cerrada Elabora Párrafos

Negrita, Cursiva,
Cerrada
Subrayado, Tachado.

Cerrada Movimiento

Cerrada Tamaño, color, tipo de letra

Directiva Tipo Función

Cerrada Tamaño de Titulo
Abierta Línea horizontal
Cerrada Lista Numeradas
Cerrada Listas no numeradas.
Abierta Insertar Imagen

Cerrada Imagen, color de fondo

Abierta Insertar Sonido
Abierta Insertar archivos.

Directiva 

• Para indicar un salto de línea se utiliza la
directiva , (deja una línea en blanco).

Ejemplo

Ejemplo de la directiva 
• <HTML>
• <HEAD>
• <TITLE>
• DIRECTIVA 
• </TITLE>
• </HEAD>
• <BODY>
• <CENTER> Primera Linea. 
• 
• Segunda Linea 
• Tercera Línea
• </BODY>
• </HTML>

Directiva <CENTER>
• Permite centrar tanto texto como
cualquier otro objeto.
• Si queremos que aparezca en el centro de
la página, escribimos delante del objeto la
etiqueta <center> y al final del mismo la
etiqueta de cierre </center>
•
Ejemplo

Ejemplo <CENTER>
• Escribimos dentro del BODY:
• <BODY>
• <center>Bienvenidos a mi pagina </center>
• </BODY>

Directiva 
• Se la utiliza para un cambio de párrafo. Se
usa como directiva "cerrada" 
indicando de esta manera los atributos de un
párrafo en concreto.
Atributo Significado Valor posible.

align Alineación dentro de la LEFT, RIGHT,
página CENTER Y JUSTIFY

Ejemplo

Ejemplo de 
• <BODY>
• Este es un ejemplo de un
parrafo de texto justificado a la derecha.
• </BODY>

Directivas: , , , <S>
• . Permite poner negrita a la letra.
• . Permite poner cursiva a la letra.
• . Permite poner Subrayado a la letra.
• <S>. Permite poner Tachado a la letra.

Ejemplo

Ejemplo de las directivas: ,
, , <S>
• <BODY>
• Este texto esta en negrita. 
• Este texto esta en Cursiva. 
• Este texto esta con Subrayado. 
• <S> Este texto esta con Tachado. 
• </BODY>

Directiva <MARQUEE>
• Sirve para hacer que el contenido de un
bloque se desplace. Además de texto el
bloque puede contener también imágenes.
Atributo Significado Posibles valores
LEFT
Dirección en que se mueve RIGHT
DIRECTION
el contenido Up
Down
SCROLL
Cómo se mueve el
BEHAVIOR SLIDE
contenido del bloque.
ALTERNATE
Velocidad del movimiento
SCROLLDELAY=n
(n indica el tiempo.)

Siguiente


BGCOLOR=color Donde color indica el El color se indica
color de fondo del bloque mediante su nombre en
inglés, o por su código.
ALIGN= Alineación del bloque en CENTER
la pantalla LEFT
RIGHT

Ejemplo

Ejemplo de <MARQUEE>
• <BODY>
• <MARQUEE direction=right scrollamount=10> <CENTER> 
DATOS PERSONALES </CENTER></MARQUEE>
• NOMBRE: 
• CURSO: 
• <marquee scrollamount=20> <CENTER> 2 012
</CENTER> </marquee>
• </BODY>

Directiva 
• Permite modificar a la letra
Color= Cambia el color. Escribir el color en ingles

Face= Cambia el tipo de letra. Escribir un tipo de letra.

Size= Cambia el tamaño. Valor desde 1 hasta 8

Ejemplo

Ejemplo de la directiva 
• <BODY>
• 
• Este texto esta en negrita. 
• 
• Este texto esta en Cursiva. 
• Este texto esta con Subrayado. 
• <S> Este texto esta con Tachado. 
• </BODY>

Directiva <H#>
• Donde # es un número que puede variar
entre 1 y 6, siendo 1 el tamaño mayor.
• Se escribirán así:
• <H1> Texto de prueba (H1)</H1>.
• <H2> Texto de prueba (H2)</H2>
Ejemplo

• <BODY>
Ejemplo de <H#>
• </BODY>

Directiva <HR>
• Se utiliza para separar secciones dentro de una
misma página es la regla horizontal.
• Atributos de la regla horizontal:
left (izquierda)
alineación de la regla
align right (derecha)
dentro de la página
center (centro)
un número, acompañado
width ancho de la regla de % cuando se desee que
sea en porcentaje
size alto de la regla un número
eliminar el sombreado de
noshade no puede tomar valores
la regla

Ejemplo <HR>
• Habría que escribir dentro del body:
• Inicio<hr align="left" width="300%" size
="5" noshade>Bienvenidos a mi
página.
• Este es el resultado:

Directiva <OL>
• Comienza el listado con la
etiqueta <ol> (ordered list) y su final con la
etiqueta </ol>. Cada objeto que forma la
lista va precedido, igual que en las
anteriores de la etiqueta <li> sin cierre.
• Si no queremos números ordinales podemos
cambiar el tipo utilizando lo siguiente:
Atributo Significado.
<ol type=I> Números Romanos Mayúscula
<ol type=i> Números Romanos Minúscula
<ol type=A> Orden alfabético Mayúscula
<ol type=a> Orden alfabético Minúscula

Ejemplo de la directiva <OL>
• <BODY>
• Mis preferencias:
• <ol>
• <li> Viajar.
• <li> Salir con mis amigos.
• <li> Dormir.
• </ol>
• </BODY>

Directiva <UL>
• Comienza el listado con la
etiqueta <ul> (unordered list) y su final con la
etiqueta de cierre </ul>.
• Cada objeto que forma la lista va precedido
de la etiqueta<li> (list item) sin etiqueta de
cierre.
• Podemos utilizar los atributos:
Atributo Significado.
<ul type=circle> Numeración en círculos
<ul type=square> Numeración en cuadrados

Ejemplo <UL>
• <BODY>
• Mis aficiones:
• <ul>
• <li> El cine.
• <li> La montaña.
• <li> La música.
• </ul>
• </BODY>

Directiva <IMG>
• La etiqueta para introducir una imagen es <img
src="nombre.gif"> (src es el origen de la imagen), el
nombre que tiene la imagen y su formato.
• La etiqueta funcionará siempre y cuando la imagen
esté en la misma carpeta que la página web, caso
contrario habrá que darle la ruta. De esta manera
<img src="imag/nombre.gif">, “imag “ carpeta
contenedora de la imagen

Parámetro Significado
WIDTH Y HEIGHT. Medidas de la imagen
ALT Texto alternativo

Ejemplo de <IMG>
• <BODY>
• <img src="ejemplo.jpg" width="80" height="50"> 
• <img src="ejemplo1.jpg" width="80" height="50">
 
• <img src="ejemplo2.jpg" width="80" height="50"
alt="YIN"> 
• </BODY>

Directiva <Body background bgcolor >

• <Body background> Tenemos que colocar dentro
de la etiqueta <body> el atributo background con
el nombre y/o dirección de la imagen.
• <Body bgcolor > Los colores se pueden escribir
en código hexadecimal, o bien, con la palabra
inglesa que corresponde al color.

Ejemplo de imagen de fondo
• <HTML>
• <HEAD>
• <TITLE>
• DIRECTIVA <Fondo>
• </TITLE>
• </HEAD>
• <BODY background=uce.jpg>

• </BODY>
• </HTML>

Ejemplo de color de fondo
• <HTML>
• <HEAD>
• <TITLE>
• DIRECTIVA <color>
• </TITLE>
• </HEAD>
• <BODY bgcolor="blue">

• </BODY>
• </HTML>

Directiva <BG SOUND>
• Los formatos de sonido más habituales son el WAV,
el MP3 y en algunas ocasiones el MIDI, aunque existen
otros formatos.
• Se puede utilizar la etiqueta <bgsound>, que se utiliza
para incluir sonido de fondo.
• A través del atributo src hay que especificar la ruta y el
nombre del archivo de audio.
• Con el atributo loop indicamos el número de veces que
se tienen que reproducir el sonido, si se desea que el
archivo de audio se reproduzca continuamente en un
bucle, habrá que asignarle el valor infinite.

Ejemplo de la directiva <bg sound>
• <HTML>
• <HEAD>
• <TITLE>
• DIRECTIVA <bgsound>
• </TITLE>
• </HEAD>
• <BODY>
• <img src="uce.jpg">
• <bgsound src="DISCO MEGAMIX.mp3">
• </BODY>
• </HTML>

Directiva <EMBED>
• Se utiliza para insertar archivos de vídeo.
• Los formatos de vídeo que suelen utilizarse en Internet
son el AVI, el MPEG y el MOV.
• A través del atributo src hay que especificar la ruta y el
nombre del archivo de vídeo
• Puede utilizar los atributos autostart y loop.
• autostart indica si el archivo se reproducirá
automáticamente al cargarse la página, y puede tomar
los valores true o false.
• loop indica si el archivo se reproducirá continuamente
en un bucle, y puede tomar los valores true o false.
• width y height sirven para especificar el tamaño de la
consola de control de vídeo.

Ejemplo de la directiva <embed>
• <BODY>
• <embed src="PAKITO
YOU WANNA
ROCK.wmv"
autostart="false"
loop="true" with=300
height=300>
• </BODY>

Manual de html

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Manual de html

Último

Manual de html