HTML

HTML
utvecklaren
World Wide Web Consortium , Internet Engineering Working Group och Web Hypertext Application Technology Working Group
https://www.w3.org/html/ , https://html.spec.whatwg.org/multipage/ och https://w3c.github.io/html/
Allmän information
filtillägget	html och html
mim-typ	text/html
typ kod	TEXT
första release	1993
formattyp	märkningsspråk
förlängt från	SGML
förlängd till	XHTML
Standard(er)	ISO/IEC 15445 W3C HTML 4.01 W3C HTML5 W3C HTML5.1 W3C HTML5.2 W3C HTML5.3
öppet format	?

HTML , förkortning för HyperText Markup Language ('hypertext markup language'), syftar på märkningsspråket för webbsidautveckling . Det är en standard som fungerar som referens för mjukvaran som kopplar ihop med utvecklingen av webbsidor i dess olika versioner, definierar en grundläggande struktur och en kod (kallad HTML-kod) för definition av innehållet på en webbsida, som t.ex. text, bilder, videor. , spel, bland annat. Det är en standard som ansvarar för World Wide Web Consortium ( W3C ) eller WWW Consortium, en organisation som ägnar sig åt standardisering av nästan all teknik som är kopplad till webben, särskilt i förhållande till dess skrivning och tolkning. HTML anses vara det viktigaste webbspråket, dess uppfinning är avgörande för utseendet, utvecklingen och expansionen av World Wide Web (WWW). Det är standarden som har införts i visningen av webbsidor och är den som alla nuvarande webbläsare har anammat. ]

HTML-språket bygger sin utvecklingsfilosofi på differentiering. För att lägga till ett externt element på sidan (bild, video, skript , etc.) är det inte direkt inbäddat i sidkoden, utan en referens till platsen för nämnda element görs genom text. På så sätt innehåller webbsidan bara text medan det faller på webbläsaren (kodtolkaren) uppgiften att sammanfoga alla element och visa den sista sidan. Eftersom HTML är en standard strävar HTML efter att vara ett språk som gör att alla webbsidor som är skrivna i en viss version kan tolkas på samma sätt (standard) av alla uppdaterade webbläsare.

HTML är ett märkningsspråk som låter oss ange strukturen för vårt dokument genom taggar. Detta språk ger oss stor anpassningsförmåga, en logisk struktur och är lätt att tolka av både människor och maskiner.

Men genom de olika versionerna har olika funktioner införlivats och tagits bort för att göra det mer effektivt och underlätta utvecklingen av webbsidor som är kompatibla med olika webbläsare och plattformar (stationära datorer, bärbara datorer, smartphones , surfplattor ). , etc.) Men för att tolka en ny version av HTML korrekt måste webbläsarutvecklare införliva dessa ändringar och användaren måste kunna använda den nya versionen av webbläsaren med ändringarna inkluderade. Normalt tillämpas ändringarna med hjälp av automatiska uppdateringskorrigeringar ( Firefox , Chrome ) eller genom att erbjuda en ny version av webbläsaren med alla ändringar inkorporerade på en officiell nedladdningswebbplats ( Internet Explorer ). Därför kommer en föråldrad webbläsare inte att korrekt tolka en webbsida skriven i en högre version av HTML än vad den kan tolka, vilket ofta tvingar utvecklare att tillämpa tekniker och ändringar som tillåter korrigering av visningsproblem och till och med tolkning av HTML-kod. Likaså bör sidor skrivna i en äldre version av HTML uppdateras eller skrivas om, vilket inte alltid är fallet. Det är därför som vissa webbläsare fortfarande har möjligheten att tolka webbsidor från tidigare HTML-versioner. Av dessa skäl finns det fortfarande skillnader mellan olika webbläsare och versioner när man tolkar samma webbsida.

Tidiga HTML-specifikationer

Tim Berners-Lee (TBL) 1991 ​ beskriver 18 element som inkluderar den initiala och relativt enkla layouten av HTML. Tretton av dessa element finns fortfarande i HTML 4. ]

Berners-Lee ansåg HTML vara en förlängning av SGML , men det erkändes inte formellt som sådan förrän i mitten av 1993, av IETF (på spanska: Internet Engineering Task Force), av ett första förslag till en HTML-specifikation. HTML: Berners-Lee och Dan Connollys Hypertext Markup Language draft , som inkluderade en SGML Document Type Definition för att definiera grammatiken. Utkastet gick ut efter sex månader, men var anmärkningsvärt för sitt erkännande av Mosaic -webbläsarens egen tagg som användes för att infoga bilder utan radbrytningar, vilket återspeglade IETF:s filosofi att framgångsrikt skapa prototypstandarder. På samma sätt föreslog Dave Raggetts konkurrerande utkast till HTML+ (Hypertext Markup Format) från slutet av 1993 att standardisera redan implementerade funktioner, såsom tabeller. ]

HTML-uppmärkning

HTML skrivs i form av "taggar", omgiven av vinkelparenteser (<,>,/). HTML kan också i viss mån beskriva utseendet på ett dokument och kan inkludera eller hänvisa till en typ av program som kallas ett skript , vilket kan påverka beteendet hos webbläsare och andra HTML-processorer. ]

HTML används också för att referera till innehåll av MIME-typen text/html eller ännu mer allmänt som en generisk term för HTML, antingen i form som härstammar från XML (som XHTML 1.0 och senare) eller direkt härstammande från SGML (som HTML 4.01 ) och tidigare). HTML består av flera viktiga komponenter, inklusive element och deras attribut , datatyper och dokumenttypsdeklarationen .

Element

HTML-elementinnehållskategorier

Element är den grundläggande strukturen i HTML. Element har två grundläggande egenskaper: attribut och innehåll. Varje attribut och innehåll har vissa begränsningar för att HTML-dokumentet ska anses giltigt. Ett element har vanligtvis en starttagg (till exempel <nombre-de-elemento>) och en sluttagg (till exempel </nombre-de-elemento>). Elementets attribut finns i starttaggen och innehållet finns mellan de två taggarna (till exempel <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Vissa element, till exempel <br>, har inget innehåll och ingen avslutande tagg. Nedan listas de olika typerna av uppmärkningselement som används i HTML.

Allmän struktur för en kodrad i HTML-kodspråket.

Strukturell uppmärkning beskriver syftet med texten. Ange till exempel <h2>Golf</h2>"Golf" som en rubrik på andra nivån, som skulle visas i en webbläsare på ett sätt som liknar rubriken "HTML Bookmark" i början av det här avsnittet. Strukturell uppmärkning definierar inte hur elementet kommer att se ut, men de flesta webbläsare har standardiserat formateringen av element. Specifik formatering kan tillämpas på text med hjälp av överlappande stilmallar .

Presentationsmarkering beskriver hur texten ser ut, oavsett dess funktion. Det står till exempel <b>negrita</b>att visuella webbläsare ska visa text i fet stil , men det står inte vad webbläsare som visar innehåll på olika sätt (till exempel de som läser upp text) ska göra. I fallet med <b>negrita</b>e <i>itálica</i>finns det element som ser likadana ut men är mer semantiska till sin natur: <strong>énfasis fuerte</strong>och <em>énfasis</em>. Det är lätt att se hur en skärmläsare ska tolka dessa två element. Men de motsvarar deras motsvarande presentationselement: en skärmläsare ska inte säga namnet på en bok högre, även om namnet står ut med kursiv stil på en skärm. Det mesta av presentationsmarkeringen har föråldrats sedan version 4.01, till förmån för kaskadformatmallar.

Hypertextmarkering används för att länka delar av dokumentet till andra dokument eller till andra delar av samma dokument. För att skapa en länk måste du använda ankartaggen <a>tillsammans med attributet href, som kommer att ställa in webbadressen som länken pekar på. Till exempel kan en länk som visar adresstexten och går till vår Wikipedia vara av formen <a href=”https://www.wikipedia.org”>https://www.wikipedia.org</a>. Länkar kan också skapas på andra objekt, till exempel bilder <a href=”enlace”><img src=”imagen” /></a>.

Attribut

Se även: HTML-attribut

De flesta av attributen för ett element är namn-värdepar, åtskilda av ett likhetstecken "=" och skrivna i starttaggen för ett element, efter elementnamnet. Värdet kan omges av enkla eller dubbla citattecken, även om vissa typer av värden kan vara ociterade i HTML (men inte i XHTML). ​ Att lämna värden utan citattecken anses dock vara osäkert. ​ I motsats till element-namnpar finns det vissa attribut som påverkar elementet helt enkelt genom sin närvaro ​ (som attributet ismapför element img). ]

Grundläggande HTML-taggar

Ett exempel på HTML-kod med syntaxfärgning .

• <html>: definierar början av HTML-dokumentet, talar om för webbläsaren att det som följer ska tolkas som HTML-kod. Detta är så de facto , eftersom det som i teorin definierar dokumenttypen är DOCTYPE , vilket betyder ordet precis efter DOCTYPE i root-taggen.
• <script>: bädda in ett skript i en webb, eller ring ett med src="url del script". Det rekommenderas att inkludera MIME-typen i attributet type, när det gäller JavaScript text/javascript .
• <head>: definierar rubriken för HTML-dokumentet; denna rubrik innehåller vanligtvis information om dokumentet som inte visas direkt för användaren , till exempel titeln på webbläsarfönstret. Inuti rubriken <head>är det möjligt att hitta:
  • <title>: definierar sidans titel. Titeln visas vanligtvis i namnlisten ovanför fönstret.
  • <link>: för att länka webbplatsen till stilmallar eller ikoner. Till exempel: <link rel="stylesheet" href="/style.css" type="text/css">.
  • <style>: för att placera sidans interna stil; antingen med CSS eller andra liknande språk. Det är inte nödvändigt att placera det om det ska länkas till en extern fil med hjälp av <link>.
  • <meta>: för metadata som författarskap eller licens, även för att indikera http-parametrar (med hjälp av http-equiv="") när de inte kan ändras på grund av att konfigurationen inte är tillgänglig eller på grund av svårigheter med skriptning på serversidan.
• <body>: definierar huvudinnehållet eller huvuddelen av dokumentet. Detta är den del av html-dokumentet som visas i webbläsaren; Inom denna tagg kan egenskaper som är gemensamma för hela sidan definieras, såsom bakgrundsfärg och marginaler. Inuti kroppen <body>är det möjligt att hitta många etiketter. Här är några som exempel:
  • <article>: Representerar en fristående komposition i ett dokument, en sida, en applikation eller på webbplatsen, som är avsedd att distribueras oberoende eller återanvändbar.
  • <h1>a <h6>: rubriker eller rubriker på dokumentet med olika relevans.
  • <table>: definierar en tabell.
    • <tr>: rad i en tabell.
    • <td>: tabellcell (måste vara inom en rad).
  • <footer> : representerar sidfoten i ett dokument eller avsnitt. Den information som vanligtvis läggs till i detta block är författaren till dokumentet, länkar till relaterat innehåll, upphovsrättsinformation, juridiska meddelanden, etc.
  • <a>: hyperlänk eller länk, inom eller utanför webbplatsen . Passparametern måste definieras via href- attributet . Till exempel: <a href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a>Representeras som ett exempel. ]
  • <div>: sidindelning. Det rekommenderas, tillsammans med css, istället för <table>när du vill justera innehåll.
  • <img>: bild. Det kräver attributet src , som anger sökvägen där bilden finns. Till exempel: <img src="./imágenes/mifoto.jpg" />. Det är bekvämt, för tillgängligheten, att sätta ett attribut alt="texto alternativo".
  • <ol>: etikett för beställda listor.
  • <ul>: tagg för oordnade listor.
  • <li>: taggar objekt i en lista.
  • <b>: fet text ( taggen utfasad. Taggen rekommenderas<strong> ).
  • <i>: text i kursiv stil ( taggen utfasad. Det rekommenderas att använda taggen<em> ).
  • <s>: genomstruken text ( taggen utfasad. Taggen rekommenderas<del> ).
  • <u>: Före understruken text. Från och med HTML 5 definierar den delar av text som är särskiljande eller markerad från resten, för att indikera korrigeringar, till exempel (taggen utfasad i HTML 4.01 och omdefinierad i HTML 5). ]
  • <main>: strukturell uppdelning av sidan som omfattar dess huvudinnehåll. Inom den här taggen hittar vi till exempel <article>.
  • <span>: Används för att skilja en text från en annan.
  • <br>: Används för att orsaka radbrytning. Den här taggen är inte stängd.
  • <details> : Används för att skapa en rullgardinsdel
  • <summary> : Används för att skapa rubriken för rullgardinsmenyn

De flesta taggar bör stängas när de öppnas, men med ett snedstreck ( / ) som visas i följande exempel:

• <table><tr><td>Contenido de una celda</td></tr></table>.
• <script>Código de un script integrado en la página</script>.
• <header>División estructural en la parte del contenido.</header>

Grundläggande HTML

HTML-språket kan skapas och redigeras med vilken grundläggande textredigerare som helst , såsom Gedit på GNU/Linux , Notepad på Windows, eller någon annan redigerare som stöder vanlig text såsom GNU Emacs , Microsoft Wordpad , TextPad , Vim , Notepad++ , bland annat .

Det finns också andra redigerare för att skapa webbplatser med WYSIWYG- funktioner ( What You See Is What You Get , eller på spanska: «what you see is what you get»). Dessa redigerare låter dig se resultatet av det som redigeras i realtid, allt eftersom dokumentet utvecklas. Nu betyder det inte ett annat sätt att göra webbplatser utan snarare ett något enklare sätt, eftersom dessa program, förutom att ha möjlighet att arbeta med förhandsgranskningen, har en egen HTML-sektion, som genererar all kod medan du arbetar . Några exempel på WYSIWYG-redigerare är KompoZer , Microsoft FrontPage eller Adobe Dreamweaver .

Att kombinera dessa två metoder är mycket intressant, eftersom de på något sätt hjälper varandra. Till exempel, om allt är redigerat i HTML och utvecklaren glömmer någon kod eller tagg, gå bara till den visuella eller WYSIWYG-redigeraren och fortsätt redigera där eller vice versa, eftersom det finns fall där det är snabbare och lättare att skriva koden direkt av någon funktion som användaren vill lägga till på webbplatsen än att leta efter alternativet i själva programmet.

Det finns en annan typ av HTML-redigerare som kallas WYSIWYM som lägger större vikt vid innehåll och mening än till visuellt utseende. Bland målen som dessa redaktörer har är separationen av innehåll och presentation, grundläggande i webbdesign.

HTML använder taggar eller uppmärkning, som består av korta inlednings- och slutinstruktioner, genom vilka du bestämmer hur text, såväl som bilder och andra element, ska visas på din datorskärm i din webbläsare .

Varje tagg identifieras eftersom den är innesluten i mindre än och större än-tecken ( <>), och en del har attribut som kan ha ett visst värde. I allmänhet kommer etiketterna att appliceras på två speciella sätt:

• De öppnas och stängs, till exempel: <b>fet</b>, som skulle ses i din webbläsare som fetstilt .
• De kan inte öppnas och stängas, som <hr />, som skulle ses i din webbläsare som en horisontell linje.
• Andra som kan öppnas och stängas, till exempel <p>.
• De grundläggande eller minimala etiketterna är:

<!DOCTYPE HTML> 
< html > 
  < head > 
    < meta  charset = "utf-8"  /> 
    < title > Exempel1 </ title > 
  </ head > 
  < body > 
    < p > Exempelstycke </ p > 
  </ body > 
</ html >

Textredigerare

För webbutveckling använder programmerare en textredigerare. Dessa är normalt gjorda för att underlätta programmeringen. Det finns för närvarande många, som dessa: Notepad++ , Adobe Dreamweaver , Sublime text , bland annat.

Lär dig HTML genom att analysera riktiga sidor

Genom att välja alternativet "visa källa" i webbläsaren kan du faktiskt se vilken information webbläsaren tar emot och hur den tolkar den.

Skärmdump av Firefox-sidainspektören.

Till exempel: i Internet Explorer måste du helt enkelt dra ner menyn "Visa" och sedan välja "källkod", medan du i Chrome och Firefox trycker på Ctrl + U . På så sätt öppnas en flik med källkoden för sidan som för närvarande visas i webbläsaren. Ett annat snabbare sätt är att högerklicka var som helst i området där webbläsaren visar webbsidan och välja "Visa sidkälla".

Förutom att kunna se HTML-källkoden för en webbsida med alternativen som beskrivs ovan, innehåller Internet Explorer, Firefox och Google Chrome också verktyg som kallas sidinspektörer som kan aktiveras med F12 .

Med dessa verktyg är det möjligt att visualisera en webbsida och inom den välja ett specifikt element som vi vill veta vad HTML-koden är med vilken den är gjord genom att peka på elementet i fråga helt enkelt med musen. Genom att göra detta kommer koden att visas i ett speciellt område i webbläsaren där användaren kommer att kunna se HTML-koden i fråga (se bild), samt de CSS- regler som gäller för just den HTML-koden. Denna typ av analys är mycket lärorik för att lära sig att utveckla i HTML.

Skärmdump av Firefox 95 Page Inspector

För webbläsaren Firefox finns det även Firebug- plugin som ett alternativ till det inbyggda verktyget , mycket likt det verktyg som Firefox innehåller som standard.

Standardens historia

1989 fanns det två tekniker som gjorde det möjligt att länka elektroniska dokument, å ena sidan hyperlänkar eller länkar ( hyperlänkar eller länkar ) och å andra sidan ett kraftfullt märkningsspråk som kallas SGML . Vid den tiden meddelade Tim Berners-Lee , som arbetade vid European Centre for Nuclear Research CERN , för pressen att han arbetade på ett system som skulle ge tillgång till onlinefiler som fungerade på datornätverk eller elektroniska maskiner baserade på TCP. /IP-protokoll . Det utvecklades ursprungligen så att information enkelt kunde delas mellan forskare från olika universitet och forskningsinstitut runt om i världen. ]

I början av 1990 - talet definierade han äntligen HTML som en delmängd av den välkända SGML och skapar något ännu mer värdefullt, World Wide Web .

Tim Berners-Lee skapade World Wide Web- projektet , samt ett system som underlättade läsningen av information, genom ett navigeringsprogram. Det skulle vara den första webbläsaren, kallad WorldWideWeb, och utvecklad under andra halvan av år 1990; Döptes senare om till Nexus, för att undvika förvirring på grund av dess namn, som var samma som tekniken den representerade. Två andra webbläsare följde: Line Mode Browser och ViolaWWW . Den senare, som utvecklades 1992, var den första webbläsaren som blev populär bland de tidiga användarna av World Wide Web. ]

Pei-Yuan Wei presenterade ViolaWWW , som skulle fungera i textläge och på ett UNIX - operativsystem .

Arbetet med att skapa en efterföljare till HTML, kallad HTML+ , började i slutet av 1993 . HTML+ designades ursprungligen för att vara en superset av HTML som gradvis skulle utvecklas från det tidigare HTML-formatet. Den första formella HTML+-specifikationen fick därför versionsnummer 2 för att skilja den från tidigare inofficiella förslag. Arbetet med HTML+ fortsatte, men det blev aldrig en standard, trots att den låg formellt närmast den sammansättningsaspekten av nuvarande specifikationer.

HTML 3.0 - standarden föreslogs av det nybildade W3C i mars 1995 . Med det introducerades många nya funktioner; till exempel faciliteter för att skapa tabeller, få text att flyta runt figurer och visa komplexa matematiska element. Även om den designades för att vara kompatibel med HTML 2.0 , var den för komplex för att implementeras med dåtidens teknik, och när utkastet till standarden gick ut i september 1995 övergavs den på grund av bristande stöd från webbläsartillverkare . HTML 3.1 föreslogs aldrig officiellt, och nästa standard var HTML 3.2 , som tog bort de flesta av de nya funktionerna i HTML 3.0 och istället antog många element som ursprungligen utvecklades av webbläsarna Netscape och Mosaic . Möjligheten att arbeta med matematiska formler som hade föreslagits i HTML 3.0 integrerades i en annan standard kallad MathML .

1997 publicerades HTML 4.0 som en W3C- rekommendation . HTML 4.0 antog många specifika element som ursprungligen utvecklades för en viss webbläsare, men började samtidigt rensa upp HTML genom att markera några av dem som "utfasade " .

HTML 4.0 implementerar funktioner som XForms 1.0 som inte behöver implementera navigeringsmotorer som var inkompatibla med vissa HTML-webbsidor. 2004 återupptog W3C debatten om utvecklingen av HTML, och grunderna för HTML5- versionen släpptes . Detta arbete avvisades dock av W3C- medlemmarna och XML-utveckling skulle prioriteras.

Apple , Mozilla och Opera har meddelat att de är intresserade av att fortsätta arbeta med projektet under namnet WHATWG , som är baserat på bakåtkompatibilitet.

2006 blev W3C intresserad av utvecklingen av HTML5 och 2007 gick man med i WHATWG- arbetsgruppen för att ena projektet.

Webbtillgänglighet

Designen i HTML måste, förutom att överensstämma med specifikationerna för språket, respektera vissa webbtillgänglighetskriterier , enligt riktlinjer eller gällande förordningar och lagar i de länder där detta koncept regleras. Den är tillgänglig och utvecklad av W3C genom Web Content Accessibility Guidelines 1.0 WCAG (nyligen uppdaterad med 2.0-specifikationen), även om många länder har sina egna specifikationer, vilket är fallet med Spanien med UNE-standarden 139803. ]

HTML-enheter

Många specialtecken, bokstäver med accent, omljud eller språkskriptsymboler kan representeras i ett HTML-dokument antingen av sig själva eller genom en referens till en enhet. Bland fördelarna med att använda en enhetsreferens är att man kan representera Unicode-tecken med en annan teckenkodning eller att kompensera för saknade tecken på tangentbordet som används.

Se även

• Bilaga: HTML-element
• HTML-färger
• Cascading Style Sheets eller CSS
• javascript

Bibliografi

• Sergio Lujan Mora (2001). Programmering på Internet: Web Clients (fullständig gratis pdf -bok ) (1:a upplagan). Publisher University Club. 
• Sergio Lujan Mora (2002). Webbapplikationsprogrammering: Historia, grundläggande principer och webbklienter (gratis PDF -helbok ) (1:a upplagan). Publisher University Club. 

Externa länkar

• Wikimedia Commons är värd för en multimediakategori om HTML .
• Wikibooks är värd för en bok eller manual om HTML-språk .
• HTML-huvudwebbsida — W3C html - standard
• Aktuellt utkast till HTML-specifikationer i version 5 .