Diseño Gráfico por Computación

Cátedra Ocampo - UBA, FADU

Carreras: Diseño Gráfico / Imagen y Sonido [cite: 1, 30]

¿Qué es HTML?

Hyper Text Markup Language es el lenguaje de marcado de hipertexto[cite: 3].

Está compuesto por etiquetas y atributos que junto al contenido forman los elementos HTML[cite: 3].

Sintaxis HTML

Anatomía de un elemento

Etiqueta de apertura: Indica el comienzo. Inicia con < y termina con >[cite: 4].

Etiqueta de cierre: Indica el final. Incluye una barra diagonal </[cite: 5, 6].

Atributos: Configuraciones adicionales en la apertura que modifican el elemento (ej: class="titulo")[cite: 7, 10].

Valores: Definen los atributos, van entre comillas después del signo igual[cite: 8, 9].

Estructura Básica

<!DOCTYPE html> <html> <head> <meta charset="utf-8">
    <title>Título</title>
  </head>
  <body> ...
  </body>
</html>
            

Dentro del <body> se utilizan etiquetas semánticas como <header>, <main>, <aside> y <footer>[cite: 18].

Elementos para Texto

Encabezados (h1 a h6)

Definen la jerarquía del contenido[cite: 25]. El <h1> es el principal y solo debe haber uno[cite: 25].

Párrafos

Se definen con <p>. Los navegadores agregan espacio vertical automáticamente entre ellos[cite: 26].

Listas

Ordenadas (ol): Enumeran ítems consecutivamente, iniciando en 1 por defecto[cite: 26, 27, 28].

Sin orden (ul): Utilizan viñetas tipo "disco" por defecto[cite: 26, 28, 29].

Anidadas: Permiten crear niveles de jerarquía (ej: una lista dentro de otra)[cite: 29].

Estructura Semántica