Tema 3 - Introducción a HTML
0 recomendaciones268 vistas
El documento presenta una introducción a HTML, incluyendo la estructura básica de un documento HTML, etiquetas comunes como <p>, <h1>, <strong>, <em>, y elementos de lista <ul> y <ol>. También explica algunos símbolos especiales y atributos usados en HTML.
Tema 3 - Introducción a HTML
- 2. Recomendaciones antes de empezar • Se hacen pruebas con Google Chrome, Firefox, Opera o Safari • Recordatorio: Todos los problemas de un desarrollador web empiezan con I y terminan con E. • Edición de código en Dreamweaver o Webocton Scriptly • Los guerreros pueden usar Notepad
- 3. El lenguaje del contenido • Lenguaje de etiquetas • Se definen estructuras • Se coloca el contenido en su formato puro • NO SE DEFINEN ESTILOS EN HTML • Dos apartados estructurales principales
- 4. Estructura básica de un HTML Estándar de tipo de documento <!DOCTYPE html> <html lang="es"> <head> </head> Define inicio y fin de <body> documento HTML </body> </html>
- 5. Estructura básica de un HTML Información de <!DOCTYPE html> encabezado e <html lang="es"> importación de librerías <head> </head> <body> Todo el contenido visible dentro de la </body> página </html>
- 7. Reglas generales de HTML • Toda etiqueta que se abre tiene que cerrarse. • Mantener una indentación correcta no es vanidad, es apoyo al mantenimiento del código. • Los caracteres especiales que forman parte del contenido se colocan con código, no directamente con teclado.
- 8. La etiqueta <HEAD> <title>Título de la página</title>
- 9. La etiqueta <HEAD> <meta name="description" content="Práctica de Programación" /> <meta name="keywords" content="HTML,Programación,Web" /> <meta name="author" content="Pamela Rodríguez" />
- 10. Un poco de terminología <p>Esto es un <strong>elemento</strong> común</p> Símbolo Etiquetas de apertura Etiquetas de cierre Esto es un elemento común
- 11. Un poco de terminología <img src="guitarra.png" alt="Imagen de guitarra" /> Atributos Etiqueta
- 12. Símbolos más comúnes Á, á Á á É, é É é Í, í Í í Ó, ó Ó ó Ú, ú Ú ú Ñ, ñ Ñ ñ ¿ ¿ ¡ ¡ (espacio)
- 13. Otros símbolos Copyright © & & < < > >
- 14. Etiquetas de HTML básico <h1>Título 1</h1> <h2>Título 2</h2> <h3>Título 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut diam eget sem euismod molestie. In varius urna vel erat feugiat iaculis tincidunt dui luctus. Nulla non nulla dolor. Vestibulum semper pellentesque ligula, in rhoncus justo lacinia quis. Maecenas quis elit vel risus sodales rhoncus. Nulla vulputate, enim a dapibus sagittis, leo libero semper leo, id scelerisque eros lacus sed leo. Praesent laoreet ipsum nec dui sollicitudin vel placerat sem interdum. Nam imperdiet tristique lectus, ut varius sapien tincidunt id.</p>
- 15. Etiquetas de HTML básico <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut diam eget sem euismod molestie. In varius urna vel erat feugiat iaculis tincidunt dui luctus. Nulla non nulla dolor. Vestibulum semper pellentesque ligula, in rhoncus justo lacinia quis. Maecenas quis elit vel risus sodales rhoncus. Nulla vulputate, enim a dapibus sagittis, leo libero semper leo, id scelerisque eros lacus sed leo. Praesent laoreet ipsum nec dui sollicitudin vel placerat sem interdum. Nam imperdiet tristique lectus, ut varius sapien tincidunt id.</p>
- 16. Etiquetas de HTML básico <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut diam eget sem euismod molestie. In varius urna vel erat feugiat iaculis tincidunt dui luctus. Nulla non nulla dolor. Vestibulum semper pellentesque ligula, in rhoncus justo lacinia quis.</p><p> Maecenas quis elit vel risus sodales rhoncus. Nulla vulputate, enim a dapibus sagittis, leo libero semper leo, id scelerisque eros lacus sed leo. Praesent laoreet ipsum nec dui sollicitudin vel placerat sem interdum. Nam imperdiet tristique lectus, ut varius sapien tincidunt id.</p>
- 17. Etiquetas de HTML básico <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Cras ut diam eget sem euismod molestie. In varius urna vel erat feugiat iaculis tincidunt dui luctus. Nulla non nulla dolor. Vestibulum semper pellentesque ligula, in rhoncus justo lacinia quis.</p><p> Maecenas quis elit vel risus sodales rhoncus. Nulla vulputate, enim a dapibus sagittis, leo libero semper leo, id scelerisque eros lacus sed leo. Praesent laoreet ipsum nec dui sollicitudin vel placerat sem interdum. Nam imperdiet tristique lectus, ut varius sapien tincidunt id.</p>
- 18. Etiquetas de HTML básico <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Cras ut diam eget sem euismod molestie. In varius urna vel erat feugiat iaculis tincidunt dui luctus. <strong>Nulla non</strong> nulla dolor. Vestibulum semper pellentesque ligula, in rhoncus justo lacinia quis.</p><p> Maecenas quis elit vel risus sodales rhoncus. Nulla vulputate, enim a dapibus sagittis, leo libero semper leo, id scelerisque eros lacus sed leo. Praesent laoreet ipsum nec dui sollicitudin vel placerat sem interdum. Nam imperdiet tristique lectus, ut varius sapien tincidunt id.</p>
- 19. Etiquetas de HTML básico <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Cras ut diam eget sem euismod molestie. In varius urna vel erat feugiat iaculis tincidunt dui luctus. <strong>Nulla non</strong> nulla dolor. Vestibulum semper pellentesque ligula, in rhoncus justo lacinia quis.</p><p> Maecenas quis elit vel risus sodales rhoncus. Nulla vulputate, enim a dapibus sagittis, leo libero semper leo, id scelerisque eros lacus sed leo. <em>Praesent laoreet</em> ipsum nec dui sollicitudin vel placerat sem interdum. Nam imperdiet tristique lectus, ut varius sapien tincidunt id.</p>
- 20. Etiquetas de HTML básico <ul> <li>Primer elemento</li> • Primer elemento <li>Segundo elemento</li> • Segundo elemento <li>Tercer elemento</li> • Tercer elemento </ul>
- 21. Etiquetas de HTML básico <ol> <li>Primer elemento</li> 1. Primer elemento <li>Segundo elemento</li> 2. Segundo elemento <li>Tercer elemento</li> 3. Tercer elemento </ol>
- 22. <html> <head> <body> <meta> <title>
- 23. <html> <head> <body> <form> <div> <p> <ul> <strong> <em> <a> <li>
- 24. <html> <head> <title> </title> </head> <body> <h1> </h1> <p> <strong> </strong> </p> </body> </html>