Manual de html

Manual Básico 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>

• <HEAD>

• <TITLE>

• <META>

• </TITLE>

• </HEAD>

• <BODY>

• .

• .

• .

• </BODY>

• </HTML>

Inicio de la página Web

Inicio del Encabezado

Titulo de la ventana

Información sobre la pagina

Fin de la etiqueta del titulo

Fin de la cabecera

Inicio del cuerpo de la pagina

Sentencias

Fin del cuerpo de la pagina

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

CerradaNegrita, Cursiva,

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

página

LEFT, RIGHT,

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

DIRECTIONDirección en que se mueve

el contenido

LEFT

RIGHT

Up

Down

BEHAVIORCómo se mueve el

contenido del bloque.

SCROLL

SLIDE

ALTERNATE

SCROLLDELAY=nVelocidad del movimiento

(n indica el tiempo.)

Siguiente

Atributo Significado Posibles valores

BGCOLOR=color Donde color indica el

color de fondo del bloque

El color se indica

mediante su nombre en

inglés, o por su código.

ALIGN= Alineación del bloque en

la pantalla

CENTER

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

Atributo Significado Posibles valores

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

Ejemplo de <H#>• <BODY>







• </BODY>

Directiva <HR>• Se utiliza para separar secciones dentro de una

misma página es la regla horizontal.

• Atributos de la regla horizontal:Atributo Significado Posibles valores

alignalineación de la regla

dentro de la página

left (izquierda)

right (derecha)

center (centro)

width ancho de la regla

un número, acompañado

de % cuando se desee que

sea en porcentaje

size alto de la regla un número

noshadeeliminar el sombreado de

la reglano puede tomar valores

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

Education

Transcript of Manual de html