HTML

Da Wikipedia, a enciclopedia libre.
Ir á navegación Ir á busca
HTML
Logotipo HTML5 e wordmark.svg
Extensión .html, .htm, .shtml, .shtm
Tipo MIME text/html
Desenvolvido por W3C
1a publicación Xuño 1993 [1]
Última versión 5.2 (14 de decembro de 2017 [2] )
Rapaz Linguaxe de marcado
Extensión de SGML
Estendido a XHTML
Estándar ISO / IEC 15445
¿Formato aberto ? Si
Páxina web html.spec.whatwg.org/

En informática, o HyperText Markup Language (tradución literal: linguaxe de marcador para hipertexto ), coñecido normalmente co acrónimo HTML , é unha linguaxe de marcado . Nado para o formato e o deseño de documentos de hipertexto dispoñibles na web 1.0 , hoxe en día úsase principalmente para o desacoplamento da estrutura lóxica dunha páxina web (definida precisamente polo marcado) e a súa representación, xestionada a través de estilos CSS para adaptarse á novas necesidades de comunicación e publicación en Internet [3] .

O HTML é unha linguaxe de dominio público , cuxa sintaxe está establecida polo World Wide Web Consortium (W3C). Deriva de SGML , unha metalingua dirixida a definir idiomas que se poden empregar para a redacción de documentos destinados á transmisión en formato electrónico. A versión actual, a quinta, foi lanzada polo W3C en outubro de 2014 .

A principal razón que motivou a W3C e os seus membros a desenvolver HTML5 foi a necesidade de proporcionar directamente funcionalidades que antes se podían usar a través de extensións propietarias fóra dos navegadores, como Adobe Flash e similares. Un segundo obxectivo que se fixaron os desenvolvedores era garantir unha maior compatibilidade entre os diferentes navegadores, independentemente da plataforma de software empregada, e dirixida principalmente á expansión de dispositivos móbiles . [3]

Historia

O HTML foi desenvolvido a principios dos noventa do século XX por Tim Berners-Lee no CERN de Xenebra ( Suíza ), xunto co protocolo HTTP dedicado á transferencia de documentos neste formato. En 1989 Berners-Lee propuxo un proxecto que incluía a publicación de hipertexto , coñecido como " world wide web ". Dentro deste proxecto naceron tanto o servidor web " httpd " (HyperText Transfer Protocol Daemon) como o cliente WorldWideWeb (o primeiro navegador da historia), cuxo desenvolvemento comezou en outubro de 1990 e cuxo uso foi exclusivamente interno do CERN ata a súa publicación en internet en 1991. Axudado polos seus colegas do instituto suízo, Berners-Lee contribuíu á definición da primeira versión de HTML, que se fixo pública oficialmente en xuño de 1993 , co-asinada con Daniel Connolly e apoiada pola Internet Engineering Task. Grupo de traballo Force (IETF) chamado Integration of Internet Information Resources , para propoñelo como estándar IETF. [1]

Exemplo de páxina HTML
Exemplo de páxina HTML

En 1994 a linguaxe tivo unha forte difusión tras os primeiros usos comerciais da web , polo que no mesmo ano nace o World Wide Web Consortium e, a partir dese momento, o desenvolvemento de HTML converterase na prerrogativa do W3C.

En 1995 o W3C definiu a versión 3.0 de HTML, que foi seguida da versión 3.2 en 1997 , e finalmente chegou a primeira especificación HTML4 en 1998 .

A versión 4.01, publicada o 24 de decembro de 1999 e a penúltima versión oficial, é o resultado das diversas expansións e melloras da década anterior, en particular na separación do nivel de presentación do formato, é dicir, o que describe o gráfico aspectos do documento, nunha entidade separada de HTML, follas de estilo en cascada ( CSS ), definidas no mesmo ano na súa primeira versión, nivel 1 [4] . Esta distinción, entre o contido e o aspecto final do documento, permite que diferentes navegadores e dispositivos representen o mesmo contido dun xeito adecuado ás diferentes capacidades e tamaños gráficos dispoñibles. Se por un lado isto require que os desenvolvedores web creen personalización de follas de estilo, por outro lado garantiu a máxima difusión da web e evitou que se converta nun medio de elite .

En xaneiro de 2000, XHTML 1.0 [5] publicouse como estándar, unha variante de HTML4 que utiliza XML 2.0 en lugar de SGML como marcaxe de metalinguaxe, para mellorar a súa interoperabilidade con outras linguaxes da familia como SVG e MathML [6]. ] O W3C decidiu reformular HTML4 e continuar o desenvolvemento só en XHTML [7] e en maio de 2011 XHTML 1.1 convértese nun estándar oficial [8] .

Ao longo do novo milenio, W3C comezou a traballar en dous novos proxectos, un destinado a ampliar XHTML e o outro destinado a definir unha nova linguaxe que non sería compatible con versións anteriores de HTML e XHTML, coñecidas como o nome de XHTML. 2 (este último proxecto declarouse oficialmente en bancarrota a finais de 2010, a favor dun enfoque menos ríxido).

En 2004 , tras un día de estudo, naceu un grupo de traballo alternativo ao consorcio: Apple , Mozilla Foundation , Opera Software e, máis tarde, tamén Google , xuntáronse no Grupo de traballo de tecnoloxía de aplicación de hipertexto web ( WHATWG ) e comezan o desenvolvemento dunha nova versión de HTML, preocupado pola falta de interese en HTML amosado polo consorcio [9] . No 2006 o W3C decidiu participar no desenvolvemento de HTML5 e no 2007 uniuse ao WHATWG , os dous grupos colaboran ata o 2011, cando se dan conta de que teñen obxectivos irreconciliables: o consorcio quería trazar unha liña e publicar unha nova versión das especificacións. estándar, mentres que o WHATWG quería un estándar en evolución [7] . O W3C publicou a quinta revisión da especificación o 28 de outubro de 2014 [2] .

Actualmente os documentos HTML poden incorporar moitas tecnoloxías, que ofrecen a posibilidade de engadir controis máis sofisticados na representación gráfica, interaccións dinámicas co usuario, animacións interactivas e contidos multimedia ao documento de hipertexto . Trátase de idiomas como CSS , JavaScript , XML , JSON ou outras aplicacións multimedia de animación vectorial ou transmisión de audio ou vídeo .

Hoxe en día moitos deseñadores web delegan a escritura do código HTML en aplicacións específicas, como os chamados editores WYSIWYG que permiten ao deseñador coidar o aspecto gráfico final da páxina mentres o código real se xera automaticamente. Os desenvolvedores puros, por outra banda, prefiren usar o código HTML directamente, para ter un maior control sobre o resultado final e a limpeza do código escrito, algo que os editores de WYSIWYG actuais, a pesar de estar cada vez máis avanzados, non sempre poden garantir , tamén para a representación diferente de navegadores en partes do código HTML.

Descrición

O HTML é unha linguaxe de formato que describe os métodos de paxinación ou visualización gráfica ( deseño ) do contido, textual ou non, dunha páxina web a través de etiquetas de formato . Aínda que HTML admite a inserción de scripts e obxectos externos como imaxes ou películas , non é unha linguaxe de programación : dado que non ofrece ningunha definición de variables , estruturas de datos , funcións ou estruturas de control que poidan implementar programas , o seu código é capaz só para estruturar e decorar datos textuais. [10] [11]

A linguaxe HTML, ou a súa variante XHTML , ten o propósito de xestionar os contidos asociando ou especificando ao mesmo tempo a estrutura gráfica ( deseño ) dentro da páxina web que se creará grazas ao uso de diferentes etiquetas . Cada etiqueta (como <h1> ou <p> ) especifica un rol de contido diferente que marca (polo que a etiqueta <h1> definirá maior importancia que a etiqueta <p> ). O formato consiste en inserir marcadores ou etiquetas no texto, chamadas etiquetas , que describen características como a función, a cor, o tamaño, a posición relativa dentro da páxina. Os navegadores que len o código mostran ao usuario o formato predefinido para cada etiqueta que atopan (polo que, por exemplo, o contido marcado coa etiqueta <h1> terá un carácter de 18 puntos e o contido marcado con <p> terá un carácter de 12 puntos ). Non obstante, este formato está completamente baixo o control do usuario, que pode cambialo na configuración do seu navegador.

Cando un documento de hipertexto escrito en HTML se almacena nun ficheiro a súa extensión normalmente é .html ou .htm .

Arquivo e manipulación

Os documentos HTML almacénanse nos discos duros das máquinas de procesamento ( ordenador - servidor ) conectados e conectados constantemente a Internet . Nestas máquinas está instalado un software específico ( servidor web ) que se encarga de producir e enviar documentos aos navegadores dos usuarios que os solicitan mediante o protocolo HTTP para a transferencia de datos.

Moitas veces o documento HTML xérase total ou parcialmente a través dun código executable que reside no servidor de Internet (procesamento do lado do servidor ) capaz de interactuar con outras aplicacións do propio servidor, como unha base de datos , e despois enviar o resultado ao navegador. , creando as chamadas páxinas web dinámicas coas que un usuario pode realizar operacións interactivas avanzadas (por exemplo, filtrar elementos dentro dun catálogo en liña, enviar e gravar datos, iniciar sesión, etc.). É o caso dos documentos escritos en linguaxes como ASP , PHP , Perl ou Java . Noutros casos, algúns tipos de procesamento realízanse no lado do cliente con idiomas como JavaScript .

Sintaxe

O compoñente principal da sintaxe desta linguaxe é o elemento , destinado a ser unha estrutura básica á que se delega a función de formatear datos ou indicar información ao navegador .

Cada elemento está encerrado dentro de marcas chamadas etiquetas , consistentes nunha secuencia de caracteres encerrados entre dous corchetes ou ganchos (<>), é dicir, os signos menor e maior (por exemplo: <br /> ; a etiqueta deste exemplo serve para indicar unha volta de carroza).

Cando a etiqueta se debe aplicar a unha sección de texto ou código, o alcance debe delimitarse entre unha etiqueta de apertura e de peche (peche explícito), que coincide coa etiqueta de apertura precedida dunha barra inclinada ( / ) despois do soporte de ángulo aberto (Por exemplo: <b>testo testo testo</b> , neste caso, o navegador amosará o texto entre estas dúas etiquetas).

Algunhas etiquetas teñen unha aplicación específica, como a etiqueta <img> que se usa para inserir unha imaxe nun determinado punto da páxina e, como tal, non requiren a etiqueta de peche; neste caso falamos de etiquetas de peche implícitas . En XHTML , por outra banda, o peche implícito está prohibido e todas as etiquetas deben pecharse de xeito explícito mediante unha etiqueta de peche ou, no caso de etiquetas puntuais, usando o carácter '/' ao final da propia etiqueta ( por exemplo <br /> ). Por estas etiquetas, os navegadores poden aceptar ambos modos, por motivos de compatibilidade.

Estrutura dun documento HTML

Icona de lupa mgx2.svg O mesmo tema en detalle: elemento HTML .
Estrutura dun documento HTML xeral.

Un documento HTML comeza cunha declaración de tipo de documento, unha cadea curta que indica en que sintaxe e a súa versión está escrito, por exemplo HTML 4.0 Strict. Esta información é necesaria para que o navegador identifique as regras de interpretación e visualización adecuadas ao documento específico e é por este motivo que a declaración debe preceder ao documento real.

Cada versión da linguaxe HTML anterior á quinta, é dicir, ata HTML 4.01 ou XHTML 1.1, ten unha sintaxe definida formalmente por unha definición de tipo de documento (DTD) que, publicada na web polo W3C, indica, para cada versión, que elementos, atributos e entidades poden ou deben usarse e de que xeito; polo tanto, nestes casos a declaración do tipo de documento debe incluír (pode, no caso de variantes XML) incluír tamén a URL deste recurso. A quinta versión de HTML, por outra banda, non ten ningunha DTD, polo que nestes casos a declaración inicial indica a mera redacción "HTML".

Para declarar un documento que empregará o estándar HTML5, use a etiqueta <!DOCTYPE html> .

Despois da declaración do tipo de documento, o documento HTML presenta unha estrutura de árbore aniñada, composta por seccións delimitadas por etiquetas apropiadas que no seu interior conteñen subseccións máis pequenas, sempre delimitadas por etiquetas.

A estrutura máis externa é a que delimita todo o documento, agás o DTD, e inclúese entre as etiquetas <html> e </html> .

Dentro das etiquetas <html> , o estándar sempre prevé a definición de dúas seccións distintas dispostas nunha secuencia ordenada:

  • a cabeceira ou sección de cabeceira , delimitada entre as etiquetas <head> e </head> , que contén información de control que normalmente non mostra o navegador, a excepción dalgúns elementos
  • a sección do corpo ou corpo , delimitada entre as etiquetas <body> e </body> , que contén a parte de información real, é dicir, o texto, as imaxes e as ligazóns que compoñen a parte que mostra o navegador.

Debaixo desta subdivisión xeral, a norma non prevé obrigacións particulares en canto á orde e ao posicionamento de outras subseccións dentro da cabeceira ou do corpo , ademais da indicación do cumprimento das anidacións correctas (as subseccións non deben superpoñerse, é dicir, cada subsección debe estar pechado antes de comezar a seguinte subsección), deixando así total liberdade ao desenvolvedor ou deseñador respecto da estruturación e organización posteriores.

Etiqueta de cabeza

As etiquetas empregadas na sección de cabeza adoitan ser dun tipo diferente ás usadas na sección de corpo , destinadas a diferentes fins. Normalmente o navegador non mostra as etiquetas empregadas na sección de cabeceira, pero serven como información de control e servizo como:

  • metadatos para transmitir información útil a aplicacións externas (por exemplo, motores de busca) ou ao navegador (por exemplo, codificación de caracteres, útil para ver alfabetos non latinos)
  • Metadatos http-equiv para controlar información adicional no protocolo HTTP
  • ligazóns a ficheiros de servizos externos ( CSS , scripts, iconas que aparecen na barra de enderezos do navegador)
  • inserindo scripts (código executable) empregados polo documento
  • información de estilo (CSS local)
  • o título asociado á páxina e amosado na xanela principal do navegador

Etiqueta corporal

Dentro da sección do corpo , que inclúe a parte visible do documento, úsanse as etiquetas específicas proporcionadas para o formato do contido accesible para o usuario final, é dicir, para o control de:

  • títulos (títulos de capítulos, títulos de parágrafos, etc.)
  • estruturas de texto (texto recuado, parágrafos, etc.)
  • aparencia de texto (negrita, cursiva, etc.)
  • listas e listas (numeradas, xenéricas, definición)
  • táboas
  • formularios electrónicos (campos que o usuario pode cubrir, campos seleccionables, menús despregables, botóns, etc.)
  • hipervínculos e áncoras
  • deseño xenérico do documento
  • inserindo imaxes
  • inserción de contidos multimedia ( audio , vídeo , animacións, etc.)
  • inserción de contidos interactivos ( scripts , aplicacións externas)

Entre os mencionados anteriormente, a etiqueta <a> ten un papel fundamental xa que describe unha ligazón (ou ligazón ) a outro documento de hipertexto que permite, cun clic do rato ou cunha operación de teclado , saír da páxina do sitio no que estás. visualizando e cargando o indicado pola ligazón, realizando así a función de navegación propia do uso de Internet.

Haml

Haml (HTML Abstraction Markup Language) é un sistema modelo deseñado para evitar escribir código incorporado nun documento web e facer máis limpa HTML. Haml ofrece a flexibilidade de ter contido HTML dinámico. Semellante a outras linguaxes web como PHP, ASP, JSP e sistemas de modelos como eRuby, Haml tamén incorpora algún código que se executa en tempo de execución e xera código HTML para proporcionar contido dinámico. Para executar o código Haml, os ficheiros deben ter unha extensión .haml . Estes ficheiros son similares aos ficheiros .erb ou eRuby; tamén axudan a incorporar código Ruby cando desenvolven unha aplicación web [12] .

Exemplo

Haml usa un recuado de espazo (dous espazos) para anidar e marcar o alcance que actúa como substituto de pares de etiquetas de punta aberta , facéndoo máis seco e limpo. O seguinte exemplo compara a sintaxe de Haml e eRuby (Ruby incrustado), xunto coa saída HTML.

Haml ERB HTML
 % div .category 
   % div .recetas 
       % h1 = receita. nome 
       % h3 = receita. categoría 
   % div 
       % h4 = receita. Descrición
<div class = "category"> 
    <div class = "receitas"> 
        <h1> <% = receita. nome%> </ h1> 
        <h3> <% = receita. categoría%> </ h3> 
    </ div> 
    <div> 
        <h4> <% = receita. descrición%> </ h4> 
    <
</ div>
<div class = "category"> 
    <div class = "receitas"> 
        <h1> Cookie </ h1> 
        <h3> Sobremesa </ h3> 
    </ div> 
    <div> 
        <h4> Baseado en pasta e azucre. Normalmente de forma circular e ten arredor de 400 calorías. </ h4> 
    </ div> 
</ div>

CodePen

Logotipo de CodePen
Logotipo de CodePen

CodePen é unha comunidade en liña para probar e amosar fragmentos de código HTML, CSS e JavaScript creados polo usuario. Funciona como editor de código en liña e contorno de aprendizaxe de código aberto , onde os desenvolvedores poden crear fragmentos de código, chamados "bolígrafos", e probalos. Foi fundada en 2012 polos desenvolvedores de pila completa Alex Vázquez e Tim Sabat e o deseñador frontal Chris Coyier [13] . Os seus empregados traballan a distancia, poucas veces todos se reúnen en persoa. CodePen é unha das maiores comunidades de deseñadores e desenvolvedores de web que amosan as súas habilidades de programación [14] , cunha estimación de 330.000 usuarios rexistrados en 2015 [15] e 14,16 millóns de visitantes mensuais en 2019 [16] .

HTML Ordenado

Icona de lupa mgx2.svg O mesmo tema en detalle: HTML Tidy .

HTML Tidy é unha ferramenta deseñada por Dave Raggett para evitar cometer erros ao escribir código HTML.

De feito, Tidy encárgase de corrixir todos os erros máis típicos atopados durante o desenvolvemento do código web. Tamén se encarga de facer lexible o código xerado polo editor HTML e de indicarlle ao usuario onde debe prestar máis atención. Pode recoñecer unha gran variedade de erros, sinalándoos como AVISOS , que están flanqueados por números de filas e columnas.

Nota

  1. ^ a b ( EN ) Tim Berners-Lee e Daniel Connolly, Hypertext Markup Language (HTML) - A Representation of Textual Information and MetaInformation for Retrieval and Interchange ( TXT ), World Wide Web Consortium , 1993.
  2. ^ a b https://html.spec.whatwg.org/multipage/
  3. ^ a b Daniele Bochiccio e Stefano Mostarda, HTML5 con CSS e JavaScript , Hoepli, 2015, p. 20.
  4. ^ (EN) Follas de estilo en cascada, nivel 1 , no World Wide Web Consortium.
  5. ^ (EN) XHTML 1.0: The Extensible HyperText Markup Language - A Reformulation of HTML 4 in XML 1.0 - W3C Recomendación , no World Wide Web Consortium, 26 de xaneiro de 2000.
  6. ^ (EN) §1.1 , en Por que a necesidade de XHTML? , Especificación XHTML 1.0 , World Wide Web Consortium, 26 de xaneiro de 2000.
  7. ^ a b ( EN ) §1.4 , en Historia , HTML5: vocabulario e API asociadas para HTML e XHTML - Recomendación W3C , World Wide Web Consortium, 28 de outubro de 2014.
  8. ^ (EN) XHTML 1.1 - Recomendación baseada en módulos XHTML - W3C , no World Wide Web Consortium, 31 de maio de 2001.
  9. ^ (EN) Que é o WHATWG? , en wiki.whatwg.org . Consultado o 19 de xaneiro de 2017 .
  10. ^ (EN) Thomas Powell,HTML e XHTML: a referencia completa , McGraw-Hill, 2003, p. 25 , ISBN 0-07-222942-X .
    " HTML non é unha linguaxe de programación " .
  11. ^ (EN) Niederst Jennifer Robbins, Learning Web Design , O'Reilly, 2007, p. 4 , ISBN 978-0-596-52752-5 .
    « HTML non é unha linguaxe de programación; é unha linguaxe de marcado " .
  12. ^ Haml , en haml.info . Consultado o 4 de febreiro de 2021 .
  13. ^ CodePen "About page" , Codepen.io , 17 de marzo de 2016.
  14. ^ Thiago Pontes e Maxwell Da Silva "Construíndo unha experiencia de vídeo de 360 ​​graos en varias plataformas en The New York Times" , The New York Times , 11 de novembro de 2016.
  15. ^ Kelly Kearsley, # 50startups Update: How CodePen Raised $ 1 Million (in Five Minutes) . Startupbend . 14 de setembro de 2015.
  16. ^ (EN) codepen.io Estatísticas de tráfico , en SimilarWeb. Consultado o 16 de novembro de 2019 .

Bibliografía

Elementos relacionados

Outros proxectos

Ligazóns externas

Controllo di autorità LCCN ( EN ) sh95002791 · GND ( DE ) 4373477-7 · BNF ( FR ) cb12493600c (data) · BNE ( ES ) XX539726 (data)