Hej kära bloggläsare! Vi fortsätter avsnittet "Skapa en webbplats från grunden," och i synnerhet ämnet taggar... Och idag kommer vi att titta på taggarna som finns på alla webbsidor -, och. Det finns en tagg till som måste finnas i varje HTML-dokument och som jag redan skrivit om i en av de tidigare artiklarna – så den ska vi inte beröra.

I tidigare artiklar i det här avsnittet skrev jag om att skapa en tom fil i html-format. Faktum är att det användes i artikeln om (det var där titeltaggarna användes). Nu kommer vi att direkt redigera denna fil med fullständiga beskrivningar.

Och vi börjar artikeln med att redigera den skapade filen. Personligen döpte jag det till index.html, men namnet kan vara vad som helst. Öppna den med valfri textredigerare (det är bättre att använda Notepad++, eftersom det har kodmarkering och andra användbara prylar). Och vi kommer omedelbart att lägga till taggar till det, och exakt i den ordning som de är skrivna. Glöm inte att stänga dem, som visas på skärmdumpen. Dokumentet kommer att se ut så här:

Låt oss nu titta på betydelsen av varje tagg separat. Det är inte för inte som de finns i varje HTML-dokument.

Taggens funktioner Så, taggen är en behållare (). Den innehåller allt synligt och osynligt innehåll på en webbsida (inklusive taggar och ). Den inledande taggen kommer omedelbart efter Doctype-deklarationen, och den avslutande taggen kommer i slutet av dokumentet. Således gör det klart för webbläsaren var man ska börja bearbeta dokumentet och var man ska avsluta det.

Teoretiskt kan han själv förstå vad och hur. Trots allt ? Detta är en HTML-översättare och kommer sannolikt inte att börja bearbeta från mitten av dokumentet och avsluta det innan slutet. Frågan är förstås kontroversiell, men jag har alltid trott (och nu ger jag inte upp min åsikt) att det är obligatoriskt att skriva den här taggen.

Även om man tar hänsyn till det faktum att denna taggs funktion bara är att indikera innehållets gränser, har den sina egna attribut (som nu antingen inte används alls eller används extremt sällan). Olika källor anger olika attribut, så jag vågar inte lägga fram den korrekta versionen.

Det enda jag kan säga säkert är att de flesta attribut inte stöds av HTML 4.01 eller är oönskade. Även om jag ändå ska ge ett exempel. — ett verktygstips var som helst i dokumentet. Till exempel, när du håller musen över en bild kan du se text som dyker upp. Även i fallet med denna tagg:

Det här är vad du ser när du håller muspekaren över ett dokument med det här innehållet:

Det är att föredra att använda title-attributet inte i taggen, utan i andra specifika områden på sidan. För det första är det bekvämt, och för det andra kommer sökmotorer att behandla din webbplats bättre. Den här taggen påverkar inte resursoptimeringen direkt. Låt oss gå vidare.

Taggfunktion Och näst på tur är taggen. Den innehåller allt Teknisk information om en sida som tjänar till att hjälpa webbläsaren och sökmotorerna. Taggen är container och kommer omedelbart efter, bara till skillnad från den senare kommer den avslutande taggen inte i slutet av dokumentet, utan före den öppna taggen.

Vilken information kan ses i? Men ingen. Allt som finns inom denna tagg är tillgängligt för det mänskliga ögat endast genom att titta källkod sidor. Allt innehåll i denna tagg är avsett för sökmotorer och webbläsare. Det enda du på något sätt kan se är taggen, som är ansvarig för titeln på webbsidans fönster. Här är ett exempel:

Texten efter ikonen är innehållet i taggen. Låt oss nu titta på innehållet, som vi inte kan se, men som är en mycket viktig del av att skapa och marknadsföra en webbplats. Först och främst är detta linjen

Detta är en metatagg som ansvarar för sidans innehållstyp (Content-Type). I I detta fall, Detta html-kod i UTF-8-kodning (content="text/html; charset=UTF-8"). Därefter kommer titeltaggen som beskrivs ovan. Sedan finns det rader som börjar med taggen. Det indikerar en länk till ett externt dokument. Till exempel linjen

indikerar att en (rel="stylesheet") fil med (type="text/css") är ansluten, som ligger på en sådan och en sådan adress (för att minska längden på raden bytte jag ut halva adressen med prickar) . Efter att webbläsaren har bearbetat den här strängen kommer den att avgöra varifrån de överlappande stilmallarna ska hämtas.

Generellt sett innehåller head-taggen mycket information som man kan prata om i det oändliga. Det sista som är värt att notera (speciellt när det gäller ) är närvaron av beskrivningstaggar, nyckelord och kanonisk. Jag använder plugin-programmet Allt i ett SEO Pack, vilket är anledningen till att de finns inom dem.

Hallå! Du kommer INTE att hitta något användbart i den här lektionen om du REDAN är bekant med uppbyggnaden av ett HTML-dokuments struktur. För de som INTE är bekanta kommer jag att visa den korrekta (giltiga) strukturen för ett HTML-webbdokument, inklusive för en WordPress-webbplats.

Allmän rätt struktur HTML-dokument

Först av allt, utan mycket ingress - allmän struktur alla HTML-dokument bör vara så här:

/*Indikerar aktuell DTD-dokumenttyp*/ /*Visar början av dokumentet*/ /*Visar början av titeln (rubrik)*/ Test/*Visar titeln*/ /*Visar början av titeln* / /*Visar början av huvuddelen av dokumentet (brödtext) */ /*Innehållet i dokumentet*/ /*Visar slutet av dokumentets huvuddel*/ /*Visar slutet av dokumentet* /

Om vi ​​tar bort förklaringarna som jag visade efter varje tagg, då enkel struktur HTML-koden för dokumentet ser ut så här

Testa

Aktuell DTD-dokumenttyp

Aktuell dokumenttyp ( Dokumenttypsdefinition, DTD) är nödvändigt för att webbläsaren ska förstå hur den aktuella webbsidan ska tolkas, eftersom HTML-språket finns i flera versioner.

Dessutom finns det andra märkningsspråk än HTML, som XHTML.

Obs: XHTML är EXtensible HyperText Markup Language, som översätts som utökat hypertextmarkeringsspråk.

XHTML liknar HTML, men syntaxen är annorlunda. För att förhindra att webbläsaren blir förvirrad mellan språk måste du visa den i den första raden kod, typen av det aktuella dokumentet är DOCTYPE.

Konceptet med en tagg i HTML

Har du märkt att hela strukturen i ett HTML-dokument är specificerad av vissa taggar - vissa ord inom vinkelparenteser.

Ordet inom vinkelparenteser i ett HTML-dokument kallas en tagg. Varje tagg har sin egen betydelse, bestäms av uppmärkningsregler.

• Tag betyder html-dokumentets titel. Head-taggar lagrar information för webbläsare och sökmotorer. Inklusive i form av metataggar;
• Taggen betyder huvudinnehållet i html-dokumentet. Nämligen text, bilder, Java Script-skript, etc.;
• Tagg [p] är blockelement, börjar alltid med ny linje. Det betyder huvudinnehållsstycket i ett HTML-dokument.

Viktig! Allt html-taggar Märkningar måste paras ihop. Det vill säga att öppningsbrickan måste stängas av en stängningsbricka, följt av ett snedstreck.

Rubrik och underrubrik taggar h1-h6

För att förbättra struktureringen av dokumenttext, samt förbättra SEO för webbsidor, finns det ytterligare body content-taggar. De kallas rubrik- och underrubriktaggar från h1 till h6, 6 totalt.

De, precis som [p]-paragraph-taggar, som låter dig markera semantiska avsnitt av texten, låter dig dela upp texten i semantiska delar, vilket ger varje avsnitt en egen titel.

Taggar h1 - h6 har ett underordnat beroende, den lägre nivån av denna underordning är ett stycke.

Det är viktigt att notera att en kränkning av det underordnade beroendet av h1 - h6 - p-taggarna inte kommer att bryta visningen och giltigheten av dokumentet, utan bara förvärra dess optimering för sökmotorer.

Ett exempel på en utvecklad HTML-dokumentstruktur

Låt mig ge dig ett akademiskt exempel på en mer utvecklad HTML-dokumentstruktur:

Test Huvudrubrik Huvudrubrik Första underrubrik Huvudrubrik Andra underrubrik Första mindre underrubrik

HTML 5-struktur

I HTML 5 bör dokumentstrukturen vara så här:

Detta är en deklaration som visar att detta dokument är HTML5;

detta är root HTML-element sidor;

Ett element med metataggar om dokumentet;

Detta element definierar titeln för dokumentet;

Detta element innehåller det synliga innehållet på sidan;

Elementet definierar en stor titel

Elementet definierar ett stycke.

H2 - h6-taggar fungerar i html5

Alla taggar är dubbla. Starttaggen kallas öppningstaggen, och sluttaggen kallas avslutningstaggen.

HTML-uppmärkning på en WordPress-webbplats

Trots att WordPress-skriptet är skrivet i PHP, har alla webbplatsfiler, eller snarare alla filer i webbplatsens arbetsmall, html-markering. Låt oss titta på exemplet i filen header.php i mallen Twenty Seventeen:

Det kan man se om allt WordPress funktioner placeras i klassisk HTML-uppmärkning. Det finns en dokumenttyp:

Parade taggar,

Öppnande tag.

Den avslutande taggen finns i filen footer.php.

Hur man visar HTML-koden för en WordPress-webbplatssida

Det du skriver i webbplatsredigeraren, skapar artiklar eller sidor, är bara en del av HTML-sidor webbplats. Detta är inte ens hela sidan.

För att se HTML-koden för en WordPress-webbplatssida, och detta behövs väldigt ofta, behöver du:

Öppna sidan i webbläsaren;

Byt till engelska tangentbordstypsnitt;

Tryck på följande knappar:

• Chrome: Ctrl+U
• Opera: Ctrl+U
• Mozilla: Ctrl+U

Kanske vet du ännu inte varför detta behövs. Tro mig, du kommer att behöva detta mer än en gång för att analysera din webbplats och eventuellt konkurrenters webbplatser.

Slutsats

Avslutningsvis ville jag dra en slutsats, men det enda jag tänker på är att artikeln visade sig vara helt för nybörjare. Vid första anblicken är det stor skillnad mellan artikelkodexemplet och exempel från riktiga sajter. Alla filer har dock samma HTML-dokumentstruktur och det är extremt viktigt att inte bryta mot denna struktur när man arbetar med sajten.

Beskrivning

Elementet är utformat för att lagra innehållet på en webbsida (innehåll) som visas i ett webbläsarfönster. Informationen som ska visas i dokumentet ska finnas inuti behållaren. Denna information inkluderar text, bilder, taggar, JavaScript, etc.

Taggen används också för att definiera färgerna på länkar och text på en webbsida. Denna praxis är utfasad i HTML 4 och anges istället färgschema Det rekommenderas att använda stilar genom att applicera dem på BODY-väljaren. De flesta attribut stöds dock fortfarande i alla webbläsare.

Ofta används en tagg för att hysa en händelsehanterare, till exempel, som körs efter att ett dokument har lästs in i det aktuella fönstret eller ramen.

Inledande och avslutande taggar på en webbsida är dock valfria bra stil de anses användas för att fastställa början och slutet av ett HTML-dokument.

Syntax... Attribut Anger färgen på den aktiva länken. Ställer in bakgrundsbilden på en webbsida. Webbsidans bakgrundsfärg. Avgör om bakgrunden ska rullas tillsammans med texten eller inte. Avståndet från nederkanten av webbläsarfönstret till innehållet. Det horisontella avståndet från webbläsarfönstrets vänstra kant till innehållet. Färgen på länkar på en webbsida. Avståndet från den högra kanten av webbläsarfönstret till innehållet. Ställer in om rullningslister ska visas eller inte. Färgen på texten i dokumentet. Indrag från överkant webbläsarfönster till innehåll. Färg på besökta länkar. Avslutande tagg

Öppnings- och stängningsbrickorna är valfria.

HTML5 IE Cr Op Sa Fx

Tagga BODY

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Resultatet av det aktuella exemplet visas i fig. 1. När du använder onload-händelsen för en tagg, ett skript inskrivet JavaScript, i det här fallet visar det ett meddelande om att dokumentet har laddats.

Ris. 1. Popup-fönster i ett dokument

BODY-taggattributär mycket viktiga för att skapa en HTML-sida, eftersom de påverkar allt innehåll.

BODY-taggattributär mycket viktiga för att skapa en HTML-sida, eftersom de påverkar allt innehåll. När du öppnar en sida tittar webbläsaren först på denna tagg och dess attribut. Vi måste dock komma ihåg att BODY-taggen inte används för att infoga någon video, bild eller text någonstans på sidan. Allt detta görs med andra taggar. Jag ska titta på det senare Cascading Style Sheets (CSS), med vilken du också kan placera eller ändra olika innehåll på en HTML-sida. Som jag redan sa, många läroböcker beskriver allt i rad, men jag kommer att göra det annorlunda. Jag kommer bara att beskriva det viktigaste med BODY-taggen. Jag kommer att visa dig huvudattributen för BODY-taggen, deras funktioner och fördelar.

Vilka är huvudattributen för BODY-taggen?

bgcolor— html-dokumentets bakgrundsfärg. Alla webbläsare fyller hela dokumentet med vitt som standard (i vissa kan du dock ställa in din egen standardfärg). Om du bestämmer dig för att göra sidans bakgrund grå, måste du skriva följande:

I HTML-språk färger kan representeras i olika former. Du kan skriva färgen på engelska eller i hexadecimalt (hex) värde. För enkelhetens skull kan du använda den så kallade webbpaletten, där allt är vackert och tydligt skrivet, vilken färg och hur det är skrivet. Om du använder exakt dessa färgvärden behöver du inte oroa dig för att färgen kommer att visas i annan webbläsare annorlunda. Alla färger på webbpaletten finns i motsvarande underavsnitt i applikationen. hex-värden fungerar enligt RGB-modellen, dvs. De två första siffrorna är nyansen av rött, de andra två siffrorna är nyansen av grönt och de två sista siffrorna är nyansen av blått. Förresten, om webbpaletten inte innehåller den färg du behöver kan du hitta den i det underbara programmet ColorT Final.

Och så, jag har skrivit allt med färger, nu kan vi prata om attributen för BODY-taggen:

bakgrund— ett attribut för BODY-taggen, med vilket du kan ställa in en bild som bakgrund för hela sidan. Det finns till exempel en bild fon..gif. För att göra den här bilden till bakgrunden i ett HTML-dokument måste du skriva det så här:

Det här exemplet var för det ordnade arrangemanget av filer på din webbplats om filen helt enkelt finns i roten på webbplatsen, kan du skriva det så här:

Om fon.gif finns i katalogens underkatalog med bilder i förhållande till sidan, kan du skriva det så här:

Jag råder dig att ta en liten och enkel bild för bakgrunden, eftersom du vill att den ska väga lite, och eftersom den fyller hela sidan skapar den en enda bakgrund. . Med ritningarna tror jag allt, låt oss gå vidare:

text— ställer in textfärgen på din HTML-sida. Låt oss säga att vi ville göra texten på sidan röd:

Följande attribut hjälper oss att anpassa visningen av länkar på vår sida:

Till exempel, du bestämmer dig för att göra färgen på länkar som ännu inte har klickats grön (#008000), men de som redan har klickats blå (#0000FF), då skriver vi det så här:

BODY-taggen har ganska många attribut, jag har fokuserat på de viktigaste för dig. Om du inte ställer in länkfärger har webbläsare standardfärger. För att konsolidera materialet, låt oss göra en sida med grå bakgrund, i blå text är oanvända länkar gula och besökta länkar gröna. Detta är vad vi slutar med:

Ringa given html koden kan vara i vilken som helst textredigerare och visuellt. Jag råder dig att skriva koden manuellt för att konsolidera dina kunskaper. glöm inte att infoga lite text mellan taggarna och och spara sedan den här filen under valfritt namn med html-tillägget. Du öppnar den resulterande filen i valfri webbläsare som passar dig och trivs med att arbeta :) .

Förutom personliga attribut (d.v.s. attribut som endast används i denna tagg), kan du skriva attribut för andra taggar i BODY-taggen ( denna regel gäller för många andra taggar). Jag kommer att skriva om detta i andra material i detta avsnitt. Det viktigaste är att experimentera och alltid lära sig något nytt.

Publiceringsdatum: 15 maj 2012

Elementet (från engelska "body" - "body") är utformat för att lagra innehållet på en webbsida (innehåll) som visas i webbläsarfönstret (text, länkar, bilder (bilder), tabeller, listor, etc.).

Obs! Ett elements öppningstagg kan utelämnas om inte det första elementet är ett blanksteg, en kommentar eller . Den avslutande taggen kan utelämnas om body-elementet har innehåll eller en starttagg och inte omedelbart följs av en kommentar.

Syntax ... Avslutande tagg

Inte nödvändig.

alink Attribut Utfasade i HTML5 Anger färgen på den aktiva länken. Använd fastigheten istället CSS-färg kombinerat med :active pseudo-klassen. bakgrund Utfasad i HTML5 Anger en bakgrundsbild på en webbsida. Använd den istället CSS-egenskap bakgrund. bgcolor Utfasad i HTML5 Bakgrundsfärgen på en webbsida. Använd egenskapen CSS bakgrundsfärg istället. bgproperties Utfasad i HTML5 Bestämmer om bakgrunden ska rullas längs med texten eller inte. Använd fastigheten istället CSS bakgrund-anknytning. Bottenmarginal Utfasad i HTML5 Marginal från nedre kanten av webbläsarfönstret till innehållet. Använd egenskapen CSS margin-bottom istället. vänstermarginal Utfasad i HTML5 Den horisontella marginalen från webbläsarfönstrets vänstra kant till innehållet. Använd egenskapen CSS margin-left istället. länk Utfasad i HTML5 Färgen på länkar på en webbsida. högermarginal Utfasad i HTML5 Marginalen från den högra kanten av webbläsarfönstret till innehållet. Använd egenskapen CSS margin-right istället. scroll Utfasad i HTML5 Anger om rullningslister ska visas eller inte. Använd egenskapen CSS overflow istället. text Utfasad i HTML5 Färgen på texten i dokumentet. Använd CSS-färgegenskapen istället. topmargin Utfasad i HTML5 Marginalen från den övre kanten av webbläsarfönstret till innehållet. Använd egenskapen CSS margin-top istället. vlink Utfasad i HTML5 Färg på besökta länkar. Använd CSS-färgegenskapen istället i kombination med pseudoklassen :visited.

Globala attribut och händelser är tillgängliga för detta element.

Standardstyling

De flesta webbläsare renderar elementet med följande CSS-standardvärden:

Kropp (display: block; marginal: 8px; ) body:focus (kontur: ingen; )

Skillnader mellan HTML 4.01 och HTML5

Alla tidigare använda attribut har tagits bort från HTML5.

Användningsexempel: Element Exempel HTML: Prova själv Dokumentrubrik Dokumentinnehåll... Specifikationer Specifikationsstatus

WHATWG HTML Living Standard (WHATWG)	Levnadsstandard
HTML 4.01 (W3C)	Rekommendation
HTML5 (W3C)	Rekommendation
HTML 5.1 (W3C)