Elementos, sintaxis y texto en HTML

Desarrollo de Aplicaciones Web

Elementos, sintaxis y texto en HTML

Contenido:


  1. Elementos en HTML
  2. Sintaxis
  3. Texto

Elementos en HTML

Elementos en HTML

HTML define el término elemento para referirse a las partes que componen los documentos HTML. Está formado por:


  • Una etiqueta de apertura


  • Cero o más atributos


  • Texto encerrado por la etiqueta


  • Una etiqueta de cierre


  • Elementos en HTML

    Esquema etiqueta HTML

    Elementos en HTML

    HTML clasifica a los elementos en dos grupos: elementos en línea (inline) y elementos de bloque (block):


  • Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el fin


  • Los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos


  • Elementos en HTML

    Esquema elementos HTML

    Sintaxis

    Sintaxis de las etiquetas

    El lenguaje HTML es muy permisivo en su sintaxis:


  • Mezcla de mayúsculas y minúsculas


  • Omisión de comillas


  • Indiferente el orden de abrir y cerrar etiquetas


  • Consecuencia: páginas con un código HTML desordenado, difícil de mantener y muy poco profesional

    Sintaxis de las etiquetas

    Restricciones básicas que introduce XHTML respecto a HTML:


  • Las etiquetas se tienen que cerrar de acuerdo a como se abren


  • El valor de los atributos siempre se encierra con comillas


  • Los atributos no se pueden comprimir


  • Todas las etiquetas deben cerrarse siempre (hay excepciones)


  • Texto

    Texto

    La mayor parte de una web es texto

    HTML define etiquetas para estructurar el contenido en secciones y párrafos y define otras etiquetas para marcar elementos importantes dentro del texto

    Texto en HTML Texto en HTML

    Texto. Estructuración

  • Párrafos:


    <p> </p>

  • Secciones (títulos):


    <h1> ... <h6>

  • Texto. Marcado básico

  • Texto importante: <strong>


  • Modificación: <ins> (admite cite = "url" y datetime = "fecha")


  • Marcar como borrado: <del> (admite cite = "url" y datetime = "fecha")


  • Cita textual: <blockquote> (admite cite = "url")


  • Texto. Marcado avanzado

  • Abreviaturas de un texto: <abbr> (admite title = "texto")


  • Siglas o acrónimos de un texto: <acronym> (admite title = "texto")


  • Definiciones: <dfn> (admite title = "texto")


  • Marca el autor de una cita: <cite>


  • Marca genérica de texto: <span>


  • Texto. Otras etiquetas:

  • Nueva línea (retorno de carro):<br>


  • Espacio en blanco: < >


  • Texto preformateado: <pre>


  • Código fuente: <code>


  • Texto. Codificación de caracteres:

    Entidad Carácter Descripción
    < < menor que
    >. > mayor que
    & & ampersand
    " " comillas
      espacio en blanco
    ' ' apóstrofo

    Texto. Codificación de caracteres:

    Entidad Carácter Descripción
    &ntilde; ñ eñe
    &Ntilde; Ñ eñe mayúscula
    &aacute; á a con acento agudo
    &eacute; é e con acento agudo
    &iacute; í i acute
    &oacute; ó o con acento agudo
    &uacute; ú u acute
    &Aacute; Á A con acento agudo
    &Eacute; É E acute
    &Iacute; Í I acute
    &Oacute; Ó O con acento agudo
    &Uacute; Ú U con acento agudo
    &euro; euro

    Texto. Codificación de caracteres:

    Entidad Carácter Descripción
    < < menor que
    > > mayor que
    & & ampersand
    " " comillas
      espacio en blanco
    ' ' apóstrofo