Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creación de paginas web con html 5

141 views

Published on

empezando con html5

Published in: Education
  • Be the first to comment

  • Be the first to like this

Creación de paginas web con html 5

  1. 1. 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>.
  2. 2. 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)
  3. 3. CREACIÓN DE PAGINAS WEB TITULO DE UN DOCUMENTO HTML5 GUARDE EL ARCHIVO Y VERIFIQUE
  4. 4. 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
  5. 5. CREACIÓN DE PAGINAS WEB <H1 STYLE=”TEXT-ALIGN:CENTER;”>APRENDER Html 5<H1> PARRAFOS EN UNA PAGINA WEB DE UN DOCUMENTO HTML 5
  6. 6. CREACIÓN DE PAGINAS WEB PARA COLOCAR PARRAFOS Y SEPARARLOS SE DEBE USAR <P></P>
  7. 7. 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
  8. 8. 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
  9. 9. 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>
  10. 10. 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;”
  11. 11. CREACIÓN DE PAGINAS WEB
  12. 12. 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">
  13. 13. 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
  14. 14. CREACIÓN DE PAGINAS WEB
  15. 15. CREACIÓN DE PAGINAS WEB Queda con este formato:
  16. 16. 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>
  17. 17. CREACIÓN DE PAGINAS WEB
  18. 18. CREACIÓN DE PAGINAS WEB
  19. 19. CREACIÓN DE PAGINAS WEB FORMATO DE LISTAS NUMERADAS Se utiliza la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>
  20. 20. CREACIÓN DE PAGINAS WEB
  21. 21. 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).
  22. 22. CREACIÓN DE PAGINAS WEB
  23. 23. 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.
  24. 24. CREACIÓN DE PAGINAS WEB
  25. 25. 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:UsersMarcoDesktop 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>

×