Hej, idag kommer vi att titta på ett mycket nödvändigt ämne som att strukturera text i HTML och efter att ha läst den här artikeln kommer vi att kunna strukturera texten som finns på sidan på vår webbplats korrekt och vackert. I artikeln kommer jag att berätta och, naturligtvis, visa dig med exempel hur du skapar stycken för sidor, skapar rubriker på olika nivåer och även lägger till flera typer av listor. Låt oss nu gå ner till processen att strukturera själva texten.
Utan stycketaggar kommer vår text på sidan att se ut som ett stort stycke text som inte är bekvämt för besökaren att läsa, så en tagg skapades som skapar stycke i html och tack vare detta kan du dela upp stor text i logiska delar. Den här taggen ser ut så här: mellan dessa två taggar ska det finnas text, som sedan kommer att separeras från huvudtexten.
Låt oss titta på stycketaggen med ett exempel. Jag har redan förberett ett stort stycke text för detta, som vi ska strukturera. Öppna dokumentet i ett redigeringsprogram, du kan använda notepad eller notepad++. Vi öppnar dokumentet och ser att vi bara har en stor bit text, utan någon uppdelning.
Låt oss nu lägga in vår tagg i dokumentet var fjärde till femte rad text.
Och låt oss nu spara filen och öppna den i valfri webbläsare.
Nu ser vi att vår text är uppdelad i många logiska delar och texten har nu blivit mycket mer bekväm att läsa. Jag hoppas att du förstår hur du kan dela upp texten i logiska delar (stycken) och att det blir mycket bekvämare för dina besökare att läsa artiklarna.
Varje text klarar sig inte utan rubriker och underrubriker, som skiljer sig i betydelse och betydelse. Taggen h1-h6 ansvarar för rubriker i html och beroende på numret bestäms storleken på rubriken, alla rubriker är markerade med fet text. Låt oss titta på användningen av rubriker med ett exempel.
Alla dessa rubriker på webbplatsen kommer att se ut så här:
För att optimera sidor på en webbplats måste du använda rubriker mycket noggrant, särskilt h1- och h2-taggar. Det ska bara finnas en h1-rubrik på sidan, detta ska vara huvudrubriken på sidan och resten är underrubriker. Använd h2 en eller två gånger, inte oftare, och du kan använda alla andra rubriker i genomsnitt fem till sex gånger och det kan ha en positiv effekt på optimeringen.
Listor i HTML.
I HTML kan vi också skapa listor på en sida, listor är till stor hjälp för att ge information på en webbplats. Listor är också mycket användbara när du skapar webbplatsmallar, och vi kommer in på allt det här lite senare. Nåväl, nu ska vi gå vidare för att överväga alla listalternativ som en numrerad lista, en punktlista.
Numrerad lista i HTML.
Vi kommer att börja vår diskussion om ämnet listor i HTML med en numrerad lista i HTML och nu kan vi säkert börja studera. Det allra första vi ska göra är att förbereda en lista för att visa kapaciteten hos en numrerad lista i HTML. Låt oss ta ett exempel från livet och skriva en lista för att gå till snabbköpet.
Ketchup
Majonnäs
Salt
Peppar
Dill
Äggplanta
Tomater
Nu är listan sammanställd och vi börjar formatera den. Numrerad lista i HTML specificeras med en parad tagg och nu, med hjälp av ett exempel, kommer vi att titta på processen att skapa en numrerad lista.
Först måste vi omsluta alla listobjekt i en tagg.
Hej kära bloggläsare! Denna artikel kommer att prata om textformateringstaggar. Bra exempel är att göra text fet eller kursiv. Vi kommer också att titta på effekten av vissa taggar på intern webbplatsoptimering och reglerna för att skriva dem. Du kan läsa om det i den givna artikeln. Förresten, du kan hitta liknande textdesignelement i många textredigerare, till exempel i Word.
Taggar är indelade i 2 typer: block och inline. När du använder det förra kan du ändra innehållet i en del av texten (rader, enskilda fragment eller ord), och de senare är . Formateringstaggarna vi kommer att titta på i den här artikeln är huvudsakligen gemener.
Regler och ordning för att skriva taggar
Du vet redan vad öppnings- och stängningstaggar är. Om inte, läs artikeln som ges i början av detta material. Kort sagt, det finns två typer av taggar: singel (till exempel ny rad) och behållare (i par). Så alla textformateringstaggar är det parat. Det betyder att alla element har en öppnings- och stängningsetikett, och markeringen måste placeras mellan dem. Till exempel skulle det korrekta valet av en fras se ut så här: Valt fragment
När webbläsaren bearbetar detta fragment kommer du att se följande text: Valt fragment. Förresten, alla taggar visas inte i RSS-flödet ().
Det viktigaste när du skriver taggar är att komma ihåg att stänga dem. Annars kommer all text på sidan att markeras i fetstil (i exemplet med taggen ). Men det finns fall då du behöver markera ett visst fragment i både fet stil och kursiv stil samtidigt. Men det finns ingen tagg som utför denna åtgärd. Det finns bara en väg ut ur denna situation: använd två taggar samtidigt. Det spelar ingen roll i vilken ordning du använder dem. Skriv därför text med taggar så här:
Valt fragment
eller så här:
Valt fragment
Du kommer fortfarande att få Valt fragment kursiv och fet på samma gång. Det är dock att föredra att använda det första alternativet, eftersom det från början var det enda och korrekta. Glöm inte heller att varje webbläsare kan behandla taggar på olika sätt (), beroende på inställningarna. Låt oss nu gå vidare till själva formateringstaggarna.
Fet och kursiv text - taggar , , Och
De mest populära textformateringstaggarna - markera den djärv Och kursiv. De används vanligtvis för att ge vikt åt ett fragment. Det första fallet tjänar till att markera ett fragment som innehåller användbar information eller nyckelord. Kursiv stil tjänar samma syfte som fet text, men informationen är mindre viktig eftersom kursiv stil är mindre märkbar i bakgrunden av brödtexten än fet text.Låt oss överväga först gör text fet. Det finns två taggar som används för denna åtgärd − Och . Det är ingen skillnad i utseende. Med tanke på att varje webbläsare kan tolka varje element på olika sätt kan du dock se eventuella skillnader. Så här ser texten i taggar ut Och i ett formulär som redan bearbetats av webbläsaren:
Text i taggar stark
Text i b-taggar
Och så här ser dessa två rader ut i sidans källkod:
Text i taggar stark Text i b-taggar
Vi kan observera samma situation i fallet med kursiv etikett Och . Försök att hitta skillnaderna mellan de två exemplen:
Text i em-taggar
Text i taggar I
Och här är källkoden:
Text i em-taggar Text i taggar I
Så de betraktade feta och kursiverade taggarna är faktiskt inte annorlunda, men varför behöver vi då, till exempel, taggen om det ? När allt kommer omkring innehåller den sistnämnda bara ett tecken (räknade inte parenteser) och är därför lättare att skriva. Och hela poängen är att taggar Och inflytande . Om du omger sökord med dessa taggar kommer detta att ha en gynnsam effekt på webbplatsens marknadsföring. Det viktigaste är att inte överdriva det - texten bör innehålla max 5% fet text i taggen , och samma mängd kursiv stil i taggen .
Om du bara vill markera någon punkt i texten, använd taggen eller . Generellt tror jag att sökmotorer också anser texten i dessa taggar som viktigare, men intern optimering de har fortfarande mindre inflytande än Och .
Taggar för att markera text med en linje - , Och
Låt oss nu titta på några taggar som använder ett bindestreck i textdesign. Den mest kända textredigeraren du känner är märka
eller understreck. Den här taggen har ingen inverkan på rankningen (såvitt jag vet), men att markera lite text och fokusera uppmärksamheten på det kommer att hjälpa. Jag gav ett exempel på att använda denna tagg precis ovan. Ytterligare två taggar med liknande syfte - Och . Båda utför funktionen att stryka text. Du kan använda den här taggen i alla situationer: om du uppdaterar ett dokument (eller snarare en del av det), kan du stryka över det gamla och lägga till ett nytt; om du ska skriva något som avviker från materialets ämne; något som inte motsvarar moraliska och etiska normer.
Skillnaderna mellan dessa två taggar finns bara i deras skrift, som ett resultat av vilket det är att föredra att använda den första, eftersom För det första är det bekvämare att skriva, och för det andra kommer din sida att innehålla mindre HTML-kod, och sökmotorer älskar detta.
Märka och attribut - parametrar för textteckensnitt
Tänk nu på en tagg som inte används utan attribut. Med den kan du ställa in parametrar för en specifik text. I allmänhet är det nu att föredra att använda (cascading style sheets), eftersom... genom att använda dem kan du avsevärt minska hela HTML-koden på sidan. Så låt oss titta på samma tagg . Allt finns för honom tre attribut:
- ansikte- själva teckensnittet. Till exempel Arial, Courier eller Verdana. Du kan lista flera, eftersom inte alla användare har en omfattande uppsättning teckensnitt, och genom att skriva flera i ansiktsattributet kommer webbläsaren att kunna välja vilket som ska användas, eller snarare vilket som finns i systemet;
- storlek— ett attribut som anger textstorleken. Kan uttryckas både i konventionella enheter och i pixlar;
- Färg- text färg. Detta attribut kan användas både i HTML-färgkoder och i ord ettor. De första har formen #FFFFFF (där F är valfri siffra eller bokstav från A till F), och de andra skrivs med enkla ord (till exempel rött).
Så här ser texten i taggen ut använder varje attribut:
Denna text är 6px
Denna text är röd Denna text är i Arial-font Denna text är röd och storlek 5pxOch det här är vad du kommer att se efter att ha bearbetat den skrivna koden: 
Blocktextdesignelement - rubriker -, paragraf
, paragraf
Slutligen ska vi titta på blockelement, som används i nästan alla dokument. Dessa är rubrik- och stycketaggar. Låt oss överväga det första. Det finns 6 typer av rubriker och var och en har sin egen tagg. Varje typ har bara sitt eget serienummer och registreras med taggar
, ,..., . Så här ser alla rubriker ut när de bearbetas:
. Så här ser alla rubriker ut när de bearbetas:
Siffran efter ordet titel motsvarar numret i taggen
Låt oss nu prata om styckemarkeringstaggen
Funktionen av denna tagg är att separera text mellan en annan identisk text och en tom rad. Om du tittar på källkoden för ett dokument kan du se följande:
Gröna rektanglar innehåller ett stycke, röda rektanglar innehåller ett annat. Och så här ser den här koden ut efter bearbetning av webbläsaren (pilen pekar på en tom rad):
Som ett resultat får vi en ganska märkbar separation av ett stycke från ett annat, vilket är fördelaktigt - läsning blir bekvämare.
Detta är slutet på artikeln om dokumentformateringstaggar. Det finns många fler av dem än jag beskrev i det här materialet. Det är bara det att mycket behöver sägas om några av dem, som ett resultat av vilka separata artiklar med en fullständig recension kommer att ägnas åt dem!
– i processen att skapa en webbplats måste vi arbeta mycket med textblock, eller textfraser. En dag behövde jag lägga till en textfras på ett sådant sätt att det före denna textfras finns några indrag text från edge html block där denna text lades till.
Så den första metoden är den mest naturliga och enkla. För att dra in texten, lägg till en html-mellanslagskod före texten - Du kan lägga till en html-mellanslagskod i vilken html-redigerare som helst.
Här är ett exempel på arbetskod för att ställa in indrag för text med mellanslagskoden:
HTML vänster textindrag, använd mellanslagskod
I det här exemplet, före texten vi har valt, är mellanslagskoden läggs till fyra gånger, som ett resultat får vi det indrag vi behöver.
Vi vet att mellanslagskoden bearbetas av vilken webbläsare som helst. Därför, genom att lägga till det antal blanksteg som krävs före texten, kan du få önskad indrag för texten.
Denna metod är bra eftersom den garanterat kommer att bearbetas av vilken webbläsare som helst.
Men denna metod har en betydande nackdel. För att dra in texten tillräckligt länge i html-koden måste du lägga till ett stort antal mellanslagstecken före texten, vilket kanske inte ser vackert, krångligt och oprofessionellt ut.
En lösning på detta problem är följande metod för att ställa in indraget.
HTML-textindrag, metod två - denna metod är baserad på egenskaperna för blockquote-taggen. Den här taggen ställer in ett indrag på cirka 40 pixlar till vänster och höger för texten som placeras i den. Dessutom anges indragningen upptill och nedtill. Ett exempel på html-kod för att använda denna metod ges nedan:
till vänster, använd taggen Block citat
Som du kan se är denna metod för att ställa in indrag för text mycket lätt att använda, men den här metoden har också en betydande nackdel. Indraget som taggen sätter Block citatär fast och är alltid lika med samma värde – 40px.
För att korrigera situationen, och när du lägger till html indrag och för text för att kunna ställa in valfritt värde kommer vi att använda den tredje metoden.
HTML-textindrag, metod tre.
Här kommer vi att använda egenskapen text-indent för CSS Cascading Style Sheets.
Om vi öppnar CSS-referensboken, på sidan med en beskrivning av egenskaperna för text-indent, kommer vi att se att med text-indent kan vi ställa in indragsvärdet för den första raden eller första stycket, eller vilket textblock som helst .
Vi överväger ett exempel med ett kort textblock, så textindragsegenskaperna är ganska lämpliga för vårt fall.
Nedan finns html-koden som drar in text med text-indent. Exemplet visar att genom att ställa in text-indent till olika argumentvärden kan vi ändra mängden textindrag:
HTMLindragtext, CSS-stil fungerar - text-indrag
Enligt min åsikt är den här metoden att ställa in ett indrag för text den mest optimala, men låt oss ändå överväga ett annat sätt att ställa in ett indrag, med hjälp av bilder.
HTML-textindrag, fjärde metoden - här kommer vi att använda en bild för att ställa in indraget.
Som ett fungerande exempel, låt oss omedelbart titta på html-koden som visar hur denna metod fungerar:
till vänster, använd bilden
Från exemplet ovan framgår det tydligt att genom att ändra bildens bredd kan vi ändra textens position, det vill säga ställa in önskat indrag för texten.
Som bild kan du använda en bild vars bredd och höjd är lika med en pixel. För att förhindra att bilden vi använder syns på sidan kommer vi att ställa in dess färg exakt samma som bakgrunden på sidan.
Enligt min åsikt är ovanstående metoder för att ställa in indrag för text tillräckligt för att organisera indraget du behöver i alla situationer när du lägger till innehåll på sidan på dina webbplatser.
Som regel är textblock åtskilda av stycken (stycken). Som standard finns det ett litet vertikalt mellanrum mellan stycken, så kallat mellanslag. Syntaxen för att skapa stycken är följande.
Paragraf 1
Punkt 2
Varje stycke börjar med en tagg
Och avslutas med en valfri avslutande tagg
.I alla böcker används den första radens indrag, även kallad "röd linje", för att markera nästa stycke. Detta gör att läsaren enkelt kan leta efter en ny rad och därmed ökar textens läsbarhet. På en webbsida används vanligtvis inte denna teknik, men utfyllnad används för att separera stycken.
Exempel 7.1 visar användningen av stycken för att skapa indrag mellan rader.
Exempel 7.1. Använda stycken
På vissa ställen är det fortfarande februari, på andra är det redan april.
Tiden går, evig räkning: år efter år, sekel efter århundrade...
I allt - hans okastade tempo, hans becksvarta löpning.
Det är tjugofem veckor av glädje och sorg på ett år.
Jag är tjugofem veckor in i februari och tjugofem veckor in i april.
Under tjugofem veckor går århundraden in i dimman.
Min klangfulla fars flyger någonstans mot molnen.
M. Shcherbakov
Resultatet av detta exempel visas i fig. 7.1.
Ris. 7.1. Indrag på en webbsida vid användning av stycken
Som framgår av figuren, när du använder taggen
Det finns för många mellanslag mellan stycken. Du kan bli av med dem om du lägger till en tagg vid radbrytningar:
. Till skillnad från ett stycke, en radbrytningstagg
skapar inte ytterligare vertikala mellanrum mellan raderna och kan användas i nästan vilken text som helst.
Således kommer texten i exempel 7.1, med hänsyn till radbrytningar, att transformeras enligt följande (exempel 7.2).
Exempel 7.2. Märka
Mandelträd blommar i vissa trädgårdar, medan snöstormar blåser i andra.
På vissa ställen är det fortfarande februari, på andra är det redan april.
Tiden går, evig räkning: år efter år, sekel efter århundrade...
I allt - hans okastade tempo, hans becksvarta löpning.
Det är tjugofem veckor av glädje och sorg på ett år.
Jag är tjugofem veckor in i februari och tjugofem veckor in i april.
Under tjugofem veckor går århundraden in i dimman.
Min klangfulla fars flyger någonstans mot molnen.
M. Shcherbakov
Resultatet av exemplet visas i fig. 7.2. Det kan ses att avståndet mellan textraderna har minskat och det har fått ett mer kompakt utseende.
listar bilder länkar tabeller former video ljud HTML-referens CSS-referens WebbplatslayoutVi introducerades delvis till sidrubriken H1 och stycke P i den första lektionen om strukturen i ett HTML-dokument. Låt oss nu titta på logiska uppmärkningstaggar: rubriker, stycken, listor, synliga element i Body-elementet och fysiska formateringstaggar i mer detalj. För att göra detta, låt oss ändra vår exempelsida något eller skriva den igen:
I vår tränings-html-sida lade vi till (markerad med pilar, en gång): en rubrik på andra nivån - en H2-tagg, två rubriker på tredje nivån - en H3-tagg, ett annat stycke - en P-tagg, en punktlista - Ul och flera fysiska formateringstaggar . Låt oss öppna sidan i webbläsaren:
Taggar H1-H3 indikerar rubriker på olika nivåer - det finns sex av dem totalt. Rubriken för den lägsta nivån är H6. Rubriker måste användas logiskt och H1-rubriken på högsta nivån bör endast visas en gång på sidan. H1-rubriken visas i stort teckensnitt av webbläsare, och teckensnittsstorleken i rubrikerna på nästa nivå minskas i enlighet med detta.
Sökrobotar lägger stor vikt vid innehållet i rubriker på toppnivå. Och det är lättare för användare att navigera på en sida med logiskt korrekt konstruerade rubriker.
Taggar för fysisk formatering
Det finns en horisontell stapel synlig på sidan efter andra stycket - den skapas av Hr-elementet, som inte har en avslutande tagg. Br-taggen betyder en ny rad, den är inte heller parad - utan en avslutande tagg. När du formaterar text kan du använda flera Br-element i rad - varje nästa kommer att lägga till en ny tom rad.
Låt oss nu uppmärksamma ordet "kropp" i andra stycket, inneslutet i en parad B-tagg, vilket gör ordet fet. Och frasen "format text" visas i kursiv stil - detta uppnås med I-taggen. U-taggen sätter understrykningen (det är inte i vårt exempel).
Utöver dessa taggar som markerar textfragment finns det även en Strong-tagg i HTML – den framhäver ett fragment som har betydelse (fet). Och Em-taggen är lite mindre viktig (kursiv). Sökrobotar är mer uppmärksamma på dessa två taggar, som indikerar fraser som är viktiga i sin logiska betydelse. Det är lämpligt att inkludera nyckelord i dem, men du bör inte överdriva det. Detsamma gäller rubriker.
Här är några fler fysiska textformateringstaggar: Q - Markerar ett citat på en rad. Blockcitat blockelement - denna tagg kan innehålla flera stycken.
Kodtaggen används för att markera kodfragment, den måste användas med Br-radbrytningar och icke-brytande mellanslag: speciella symboler används för att beteckna dem. symbol (första tecknet - et-tecken: tangent 7 med Shift nedtryckt i den engelska layouten). Men Pre-taggen visar programkoden som den är, med mellanslag och så många rader som det finns i koden.
Dessa är de vanligaste textformateringselementen; för andra formateringstaggar och specialtecken, se HTML-referensen, som finns på samma webbplats - den har enkel alfabetisk navigering.
Skapa html-listor
Det återstår att överväga skapandet av listor, vi har det markerat och specificerat av den parade taggen Ul, och dess element, eller objekt, av taggen Li (första skärmbilden). Genom att använda typattributet, för både Ul- och Li-taggarna, kan vi ändra typen av markör. Som standard, dvs. om attributet inte är specificerat är dess värde "disk" - en cirkel. Du kan ställa in typattributet med värdet "cirkel" - cirkel. Eller så här:
- – vi kommer att få en lista med fyrkantiga markörer.
Egentligen kommer jag inte att fokusera på andra taggattribut än de obligatoriska och ett par exempel för allmän förståelse. För att ställa in stilar är det bättre att använda CSS-egenskaper - vi kommer till dem, och du hittar attributen i referensboken.
Utöver punktlistor finns det numrerade listor, som anges med Ol-taggen, och listelement, som punktlistor, med Li-taggen. Dessutom kan du skapa för båda typerna av listor kapslade listor. Låt oss komplicera uppgiften och ändra vår lista på exempelsidan till följande:
Låt oss öppna sidan i webbläsaren och vi kan tydligt se: en numrerad lista med en punktlista kapslad i den, för vilken "kvadrat"-värdet för typattributet anger fyrkantiga markörer.
