creación de paginas web con html 5
Post on 07-Apr-2017
132 Views
Preview:
TRANSCRIPT
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>.
CREACIÓN DE PAGINAS WEB
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)
CREACIÓN DE PAGINAS WEB
TITULO DE UN DOCUMENTO HTML5
GUARDE EL ARCHIVO Y VERIFIQUE
CREACIÓN DE PAGINAS WEB
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
CREACIÓN DE PAGINAS WEB
<H1 STYLE=”TEXT-ALIGN:CENTER;”>APRENDER Html 5<H1>
PARRAFOS EN UNA
PAGINA WEB DE UN
DOCUMENTO HTML 5
CREACIÓN DE PAGINAS WEB
PARA COLOCAR PARRAFOS Y SEPARARLOS SE DEBE USAR
<P></P>
CREACIÓN DE PAGINAS WEB
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
CREACIÓN DE PAGINAS WEB
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
CREACIÓN DE PAGINAS WEB
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>
CREACIÓN DE PAGINAS WEB
ATRIBUTO PARA LAS CELDAS
Le hemos dado a las celdas un atributo ESTILO DE LINEA
STYLE=”BORDER:1PX SOLID #666;”
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
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">
CREACIÓN DE PAGINAS WEB
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
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
Queda con este formato:
CREACIÓN DE PAGINAS WEB
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>
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
FORMATO DE LISTAS NUMERADAS
Se utiliza la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
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).
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
LINEA DE SEPARACIÓN
Para integrar una línea de separación se usa la etiqueta <hr>
(horizontal rule) sin etiqueta de cierre.
CREACIÓN DE PAGINAS WEB
CREACIÓN DE PAGINAS WEB
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>
top related