Tema 3 - Introducción a HTML
24
INTRODUCCIÓN A HTML
-
Upload
pamela-rodriguez -
Category
Documents
-
view
593 -
download
3
Transcript of Tema 3 - Introducción a HTML
INTRODUCCIÓN A HTML
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
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
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
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
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.
La etiqueta <HEAD>
<title>Título de la página</title>
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" />
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
Un poco de terminología
<img src="guitarra.png" alt="Imagen de guitarra" />
Etiqueta
Atributos
Símbolos más comúnes
Á, á Á á
É, é É é
Í, í Í í
Ó, ó Ó ó
Ú, ú Ú ú
Ñ, ñ Ñ ñ
¿ ¿
¡ ¡
(espacio)
Otros símbolos
Copyright ©
& &
< <
> >
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>
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>
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>
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>
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>
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>
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
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
<html>
<head> <body>
<meta> <title>
<html>
<head> <body>
<div><form>
<p> <ul>
<em><strong> <a> <li>
<h1> </h1> <p>
</p>
<title> </title>
<strong> </strong>
<body>
</body>
<head>
</head>
<html>
</html>
