Introducción a HTML
•
0 recomendaciones•18,302 vistas
El documento introduce los conceptos básicos de HTML, incluyendo su estructura, etiquetas y sintaxis. Explica que HTML es un lenguaje de marcado usado para definir la estructura y el contenido de una página web, además de proporcionar ejemplos de etiquetas comunes como <p>, <h1>, <ul> y <img>.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Introducción a HTML
Similar a Introducción a HTML (20)
Más de Jorge Llanten
Más de Jorge Llanten (20)
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 <!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html> Estándar de tipo de documento Define inicio y fin de documento HTML
- 5. Estructura básica de un HTML <!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html> Información de encabezado e importación de librerías Todo el contenido visible dentro de la página
- 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> Etiquetas de apertura Etiquetas de cierre Símbolo Esto es un elemento común
- 11. Un poco de terminología <img src="guitarra.png" alt="Imagen de guitarra" /> Etiqueta Atributos
- 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> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul> • Primer elemento • Segundo elemento • Tercer elemento
- 21. Etiquetas de HTML básico <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol> 1. Primer elemento 2. Segundo elemento 3. Tercer elemento
- 24. <h1> </h1> <p> </p> <title> </title> <strong> </strong> <body> </body> <head> </head> <html> </html>