Download - Introduccion al HTML
![Page 1: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/1.jpg)
INTRODUCCIÓN A HTML
![Page 2: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/2.jpg)
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
![Page 3: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/3.jpg)
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
![Page 4: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/4.jpg)
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
![Page 5: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/5.jpg)
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
![Page 6: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/6.jpg)
![Page 7: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/7.jpg)
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.
![Page 8: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/8.jpg)
La etiqueta <HEAD>
<title>Título de la página</title>
![Page 9: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/9.jpg)
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" />
![Page 10: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/10.jpg)
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
![Page 11: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/11.jpg)
Un poco de terminología
<img src="guitarra.png" alt="Imagen de guitarra" />
Etiqueta
Atributos
![Page 12: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/12.jpg)
Símbolos más comúnes
Á, á Á á
É, é É é
Í, í Í í
Ó, ó Ó ó
Ú, ú Ú ú
Ñ, ñ Ñ ñ
¿ ¿
¡ ¡
(espacio)
![Page 13: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/13.jpg)
Otros símbolos
Copyright ©
& &
< <
> >
![Page 14: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/14.jpg)
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>
![Page 15: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/15.jpg)
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>
![Page 16: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/16.jpg)
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>
![Page 17: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/17.jpg)
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>
![Page 18: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/18.jpg)
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>
![Page 19: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/19.jpg)
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>
![Page 20: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/20.jpg)
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
![Page 21: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/21.jpg)
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
![Page 22: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/22.jpg)
<html>
<head> <body>
<meta> <title>
![Page 23: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/23.jpg)
<html>
<head> <body>
<div><form>
<p> <ul>
<em><strong> <a> <li>
![Page 24: Introduccion al HTML](https://reader033.vdocuments.site/reader033/viewer/2022051208/546d9515af79596c298b53da/html5/thumbnails/24.jpg)
<h1> </h1> <p>
</p>
<title> </title>
<strong> </strong>
<body>
</body>
<head>
</head>
<html>
</html>