Creación de paginas web con html 5

CREACIÓN DE PAGINAS WEB

SESIÓN 1

Introducción al HTML

HTML (HyperText Markup Language) o "Lenguaje para Marcado de

Hipertexto". HTML es el lenguaje que te permite describir y dar forma a

tú páginas Web. Publica tus propias páginas con fotos, listas, tablas,

etc.

Obtén información de los visitantes de tu sitio. Diseña los formularios

que te permitirán contactar tus futuros clientes. Crea un sitio para

vender tú productos o servicios. Incluye video clips, música, sonidos, y

otras aplicaciones que darán vida a tú páginas Web

Los archivos HTML

Los archivos HTML deben tener una extensión htm o html (ej.

misitio.htm o misitio.html). Para crear un archivo HTML solo hace falta

un editor de texto. Un archivo HTML está compuesto por etiquetas.

Las etiquetas le dicen al navegador(Ej.: Internet Explorer, Firefox,

Google Chrome, Opera, Safari, etc.) como mostrar la página Web.

Las etiquetas

Las etiquetas(en inglés: tags) son marcas insertadas en un documento

HTML para proporcionar información sobre una unidad o contenido.

Reglas básicas

Las etiquetas están encerradas entre los signos "<" y ">".

Generalmente vienen en pares <p> y <⁄p>.

La primera es de apertura y la segunda de cierre.

El texto que se encuentra entre dos etiquetas es el contenido del

elemento.

Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea

<b> es lo mismo que <B>.


PRACTICA DIRIGIDA PAGINA WEB CON HTML 5.0

TITULO DE LA PAGINA WEB

GUARDE EL ARCHIVO CON EL NOMBRE:

INDEX.HTML (REVISE EL ESCRITORIO Y ABRA LA PAGINA)


TITULO DE UN DOCUMENTO HTML5

GUARDE EL ARCHIVO Y VERIFIQUE


TAMAÑO DE SUBTITULO

La directiva que introducen los títulos en una página es de varios

niveles: <H1><H2><H3><H4><H5>

VAMOS A USAR UNA DE ELLAS. DIGITE LO SIGUIENTE:

CENTRAR EL TITULO

A UNA ETIQUETA SE LE PUEDE DAR UN ATRIBUTO SOLO SE LE

ENCIERRA EN SU PARTE INQUIERDA EL ATRIBUTO


<H1 STYLE=”TEXT-ALIGN:CENTER;”>APRENDER Html 5<H1>

PARRAFOS EN UNA

PAGINA WEB DE UN

DOCUMENTO HTML 5


PARA COLOCAR PARRAFOS Y SEPARARLOS SE DEBE USAR

<P></P>


HIPERVINCULOS DESDE NUESTRA PAGINA WEB

HABLAMOS DE UN ENLACE QUE AL SER PULSADO DESDE

NUESTRA PAGINA NOS LLEVA A UN SITIO WEB.

PARA ELLO USAMOS LA DIRECTIVA <A>

<A HREF=”DIRECCION WEB”>

INSERTAR IMÁGENES EN UN DOCUMENTO HTML 5


PARA INSERTAR IMÁGENES USAMOS LA DIRECTIVA <IMG> QUE

INTRODUCE EN UN DOCUMENTO HTML CUALQUIER TIPO DE

IMAGEN. REQUIERE DE UN ATRIBUTO LLAMADO “SRC” PARA

INDICAR DE DONDE PROVIENE LA IMAGEN.

<IMG SRC=”DIRECCIÓN DE LA IMAGEN”/>

LISTAS Y TABLAS EN UN DOCUMENTO HTML 5.0


Al conjunto de una tabla se le construye con las directivas

<TABLE>…</TABLE> que en realidad son tablas.

Cada tabla tendrá filas y celdas. Para filas se usa <TR> Para

celdas<TD>


ATRIBUTO PARA LAS CELDAS

Le hemos dado a las celdas un atributo ESTILO DE LINEA

STYLE=”BORDER:1PX SOLID #666;”


FORMATO PARA COLOR DE FONDO EN PAGINA WEB

Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la

etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se

denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal

que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo,

verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.

<BODY BGCOLOR="RED">


FORMATO PARA DARLE COLOR A LOS TEXTOS

Para cambiar el color del texto empleamos la etiqueta <font> con su

atributo color. Vamos a cambiar el color negro del texto, al color

blanco.

Advertencia respecto a colores hay códigos de colores que se puede

bajar por internet

http://usuarios.sion.com/pauluk/coloreshtml.htm

Se usa la etiqueta <SPAN STYLE="COLOR:#80BFFF">

Procedamos a cambiar el color del título de la hoja

http://usuarios.sion.com/pauluk/coloreshtml.htm


Queda con este formato:


FORMATO PARA CONSTRUIR LISTAS NO NUMERADAS

COMO ESTAS:

MESA

SILLA

MANTEL

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 ítem) sin etiqueta de cierre.

<UL>

<LI>MESA

<LI>SILLA

<LI>MANTEL

</UL>


FORMATO DE LISTAS NUMERADAS

Se utiliza la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>


FORMATO NEGRITA, CURSIVA Y RAYADO

Para remarcar una cadena de caracteres empleamos las etiquetas

<b></b>

Para hacer que un texto se muestre en cursiva: <i></i> (italic).

Para subrayar empleamos <u></u> (underlined).


LINEA DE SEPARACIÓN

Para integrar una línea de separación se usa la etiqueta <hr>

(horizontal rule) sin etiqueta de cierre.


INSERTANDO AUDIO MP3 O WAV

Debe utilizar la etiqueta <EMBED></EMBED>

Escriba lo siguiente en su bloc de notas

<EMBED SRC= “AQUÍ PEGUE LA RUTA DE SU ARCHIVO DE

SONIDO/AQUÍ PEGUE EL NOMBRE.MP3” AUTOSTART=”FALSE”

LOOP=”TRUE”></EMBED>

PUEDE USAR EL SIGUIENTE TRUCO. ENTRE A PROPIEDADES DE

LA CANCION Y COPIE LA UBICACIÓN

C:\Users\Marco\Desktop

CAMBIE LA DIRECCIÓN DE LOS SLASH Y INCLUYA OTRO AL

FINAL

C:/Users/Marco/Desktop/

DE PROPIEDADES COPIE EL NOMBRE INCLUYA .MP3

Chopin Polonaise.mp3

FINALMENTE DEBE QUEDAR ASÍ:

<EMBED SRC=“C:/Users/Marco/Desktop/Chopin Polonaise.mp3”

AUTOSTART=”FALSE” LOOP=”TRUE”></EMBED>

Creación de paginas web con html 5

Education

Transcript of Creación de paginas web con html 5