Html basico1
0 recomendaciones405 vistas
Este documento proporciona una introducción a los conceptos básicos de HTML. Explica el protocolo HTTP, el lenguaje HTML, las URLs, los servidores web, las páginas y el hipertexto. Luego describe elementos básicos de HTML como párrafos, títulos, formato, listas y ligas. También cubre el uso de tablas, imágenes, sonido y video.
Html basico1
- 3. Conceptos básicos • HTTP • Protocolo simple de transferencia de documentos e információn del Web • Se realiza la conexión • El cliente solicita un documento • Nombre • Directorio • El servidor localiza el documento y lo envía al cliente • Se cierra la comunicación
- 4. Conceptos básicos • HTTP CLIENTE Solicita página Recibe página Interpreta página Despliega página SERVIDOR Recibe solicitud Busca documento Detecta formato Envía página
- 5. Conceptos básicos • HTML • Lenguaje de descripción de documento hipertexto • Permite la definición de ligas que conducen a otros documentos • Locales • Remotos • Permite la inclusión de elementos de formato y multimedia
- 6. Conceptos básicos • Localizador Universal de Recursos URL • Los documentos en el Web son recursos • Páginas • Imágenes • Sonidos • Pueden estar en diferentes: • Directorios • Computadoras • Redes locales • Dominios • Países • El URL establece una referencia completa
- 8. Conceptos básicos • Servidor de Web • Programa que corre en una computadora conectada en la red que soporta el protocolo HTTP para entregar páginas a los clientes • Prácticamente cualquier computadora que se pueda conectar a la red puede contener un servidor
- 9. Conceptos básicos • Página • Archivo escrito en HTML para presentar información • Puede contener ligas a otras páginas, o en general, a cualquier URL • Puede ser ubicado en un servido, y tener un URL asociado para ser referenciado desde cualquier parte de la Internet
- 10. Conceptos básicos • Hipertexto • Sistema contenedor de documentos de texto que incluyen referencias que conducen a otros textos relacionados con el texto indicado en la referencia • Hipermedia=hipertexto+multimedia • Sistema hipertexto con soporte a diversos medios, como imágenes, video, animaciones y sonidos
- 11. HTML
- 12. HTML: páginas básicas • Marcas • Delimitadoras <nombre_marca>contenido</nombre_marca> • Puntuales <nombre_marca> • Puntuales tipo XHTML <nombre_marca/> • Con argumentos <nombre_marca dato="valor"> <nombre_marca dato="valor"> contenido </nombre_marca">
- 13. HTML: páginas básicas • Páginas bien formadas • No se traslapan • <b><em>texto</b>con formato</em> • Las marcas están completas • <nombre_marca>contenido</nombre_marca> • Hay una marca global • <html>todo el contenido</html> • Todo contenido pertenece a alguna marca que lo define • <p>Texto</p>
- 14. HTML: páginas básicas • Versión, marca global, encabezado y cuerpo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>contenido del encabezado</head> <body>contenido del cuerpo</body> </html> • Encabezado <title>nombre_ventana</title>
- 15. HTML: páginas básicas • Párrafos y jerarquía de títulos <h1>Título principal</h1> <p>Texto introductorio</p> <h2>Primer tema</h2> <p>Texto sobre el primer tema</p> <h2>Segundo tema</h2> <p>Texto sobre el segundo tema</p> Titulo principal Texto introductorio Primer tema Texto sobre el primer tema Segundo tema Texto sobre el segundo tema
- 16. HTML: páginas básicas • Separadores y formato básico • Separador <hr> • Salto de línea <br> • Negritas <b></b> • Cursivo <em></em> • Centrado • <center></center> Línea siguiente linea Negritas Cursivo Centrado
- 17. HTML: páginas básicas • ¡Es preferible usar CSS! • Colores y fondo <body background="url de imagen" bgcolor="color" text="color" link="color" vlink="color" alink="color">
- 18. HTML: páginas básicas • Código de color • Por nombre • black • white • Blue • Por valor (hexadecimal) • #rrggbb • Cada valor va desde 00 hasta ff
- 19. HTML: páginas básicas • Listas • Numeradas <ol> <li>primer elemento</li> <li>segundo elemento</li> </ol> • No numeradas <ul> <li>primer elemento</li> <li>segundo elemento</li> </ul> 1. primer elemento 2. segundo elemento • primer elemento • segundo elemento
- 20. HTML: páginas ligadas • Mismo documento <a name="pato"></a> <a href="#pato">mensaje liga</a> • Mismo servidor <a href="otro.html">mensaje liga</a> <a href="directorio/otro.html">mensaje liga</a> • Diferente servidor <a href="http://www.utm.mx/aves/pato.html"> <a href="http://www.utm.mx/aves/pato.html#cuac">
- 21. HTML: páginas con diferentes medios • Imágenes: gif, jpg y png (y svg) <img src="url de imagen" alt="texto alterno"> • Sonidos: wav, ra y mp3 <a href="sonido.wav"> • Video: avi, mov y qt <a href="video1.avi">
- 22. HTML: botones • <a href="url"><img src="foto.jpg"></a>
- 23. HTML: tablas Tablas: permiten la definición de estructuras rectangulares <table border="1"> <tr> <td>uno</td><td>dos</td> </tr> <tr> <td>tres</td><td>cuatro</td> </tr> </table> uno dos tres cuatro
- 24. HTML: tablas, colspan <table border="1"> <tr> <td colspan="2">uno</td> </tr> <tr> <td>tres</td><td>cuatro</td> </tr> </table> uno tres cuatro
- 25. HTML: tablas, rowspan <table border="1"> <tr> <td rowspan="2">uno</td><td>dos</td> </tr> <tr> <td>cuatro</td> </tr> </table> uno dos cuatro
- 26. HTML: tablas, encabezados <table border="1"> <tr> <th>uno</th><th>dos</th> </tr> <tr> <td>tres</td><td>cuatro</td> </tr> </table> uno dos tres cuatro
- 27. HTML: tablas, bordes y espacios ¡Usar CSS! <table> <table border="4"> cellpadding="10" cellspacing="10" uno dos tres cuatro uno dos tres cuatro
- 28. HTML: tablas, textos y alineación ¡Usar CSS! <td>Hola,<br>que tal</td> <tr align="center"> <td align="right"> <td valign="top"> <td valign="middle"> <td valign="bottom">
- 29. HTML: tablas anidadas <table border="1"> <tr> <td>uno</td><td>dos</td> </tr> <tr> <td>tres</td> <td> <table border="1"> <tr><td>uno</td><td>dos</td></tr> <tr><td>tres</td><td>cuatro</td></tr> </table> </td> </tr> </table> uno dos tres uno dos tres cuatro
- 30. HTML: tablas con ancho fijo <table border="1" width="50%"> <table border="1" width="200"> <td width="80%">
- 31. HTML: tablas con encabezados <table border="1"> <caption align="top">Titulo</caption> <tr> <td>uno</td><td>dos</td> </tr> <tr> <td>tres</td><td>cuatro</td> </tr> </table>
- 32. HTML: tablas con bordes • frame= • void: Sin lados (default) • above: Lado superior • below: Lado inferior. • hsides: Lados superior e inferior • vsides: Lados derecho e izquierdo • lhs: A mano izquierda únicamente • rhs: A mano derecha únicamente • box: Los cuatro lados externos • border: Los cuatro lados externos
- 33. HTML: tablas con reglas • rules= • none: Sin reglas (default) • rows: Las reglas aparecerán entre los renglones • cols: Las reglas aparecerán entre las columnas • all: Las reglas aparecerán entre las columnas y los renglones
- 34. GRACIAS