Introducción al html

•

Artes

Ana Mayer

25/5/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Diseño Web

2549 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

HTML
No es un lenguaje de programación
Lenguaje marcado (markup language), etiquetado de textos y contenidos 
Existe una estructura básica para que un archivo o documento HTML pueda ser reconocido por todos los navegadores
Compuesto de texto principalmente, puede incluir listas, tablas, enlaces, gráficos, imágenes, sonidos, vídeos, animaciones, etc.
Cada uno de estos contenidos se define mediante una etiqueta para decirle al navegador qué es cada cosa. “Esto es una imagen”, “Esto es un encabezado”, “Esto es un párrafo”, etc. 
¿Qué es HTML?
También denominados marcas, tags o directivas,
Palabras en inglés escritas entre el signo mayor que < y el signo menor que >
Existen dos tipos de etiquetas:
Etiquetas delimitadoras o de contenido: 
Tienen un inicio y un final, establecen dónde inicia y dónde termina su contenido
<etiqueta> contenido </etiqueta> 
Diagonal antes del nombre de la etiqueta que cierra
Etiquetas abiertas: 
Se escriben una vez (no abren y cierran). <etiqueta>
Por ejemplo, para poner una línea horizontal como separador <hr> 
Etiquetas básicas del html
html
head
body
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Untitled Document</title>
</head>
<body>
Todo tu contenido
</body>
</html>
Estructura
Estructura
1. Declaración del tipo de documento 
También llamado doctype (DTD), manifiesta la versión de lenguaje de marcado que se aplicará a todo el documento (no solo aplica para los documentos html)
2. Apertura de la etiqueta <html>
esta etiqueta indica que todo lo que hay dentro de la misma estará escrito en lenguaje html.
3. Encabezado <head>
en el encabezado se coloca información de gran utilidad y se pueden incluir etiquetas que aportan, de manera ordenada, información sobre el documento. Las principales etiquetas que se incluyen en este bloque son las siguientes:
 
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Untitled Document</title>
</head>
<body>
Todo tu contenido
</body>
</html>
<title> Barra del título en el navegador, obligatoria
<base> Referenciar los contenidos del documento
<link> Relacionar o vincular con otros elementos como hojas de estilos
<meta> Para brindar información extra al documento
4. Cuerpo del documento <body>
dentro de esta etiqueta se llevará todo el contenido visual (textos, referencia a imágenes y a otros contenidos relacionados)
 
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>Untitled Document</title>
</head>
<body>
Todo tu contenido
</body>
</html>
Etiquetas de títulos (encabezados)
Etiquetas para edición de texto 
Listas ordenadas 
Listas desordenadas 
Tablas 
Enlaces
Imágenes
Algunas etiquetas para el cuerpo del documento
Quinta versión del lenguaje html
Nuevos estándares y nuevas etiquetas
Simplifica la forma de escribir el código
También se pueden usar las etiquetas básicas
Dos grupos de etiquetas:
Etiquetas que extienden a las actuales: 
Añaden nuevas funcionalidades, se controlan desde JavaScript
Etiquetas que componen la web Semántica: 
No proponen nuevas funcionalidades, pero sirven para estructurar sitios web
 
HTML5
HTML4 (XHTML)
HTML5
Algunas etiquetas de html5
Referencias
Garro, A. (2014). Html5. Recuperado de https://www.arkaitzgarro.com/html5/index.html
Beati, H. (2015). HTML5 y CSS3 para diseñadores. Argentina: alfaomega grupo editor.
Terán, A. (2010). Manual de introducción al lenguaje html. Formación para el empleo. Recuperado de https://bit.Ly/2gbxpea
W3Schools. https://www.w3schools.com/html/default.asp