HTML-webbsidan är. Skapande av webbsidor. Att lära sig HTML-språket. Webbsideselement: header

Innan vi börjar vår resa genom handledningarna om att bygga webbplatser med HTML och CSS, är det viktigt att förstå skillnaderna mellan de två språken, syntaxen för varje språk och en del grundläggande terminologi.

Vad är HTML och CSS?

HTML (HyperText Markup Language) definierar innehållets struktur och dess betydelse genom att definiera sådant innehåll som till exempel rubriker, stycken eller bilder. CSS (Cascading Style Sheets) eller Cascading Style Sheets är ett presentationsspråk utformat för att utforma utseendet på innehåll med hjälp av till exempel teckensnitt eller färger.

Dessa två språk, HTML och CSS, är oberoende av varandra och bör förbli så. CSS ska inte skrivas inuti ett HTML-dokument och vice versa. Som en allmän regel kommer HTML alltid att representera innehållet och CSS kommer alltid att definiera dess stil.

Med denna förståelse för skillnaden mellan HTML och CSS, låt oss dyka in i HTML mer i detalj.

Grundläggande HTML-termer

Innan du börjar arbeta med HTML kommer du sannolikt att stöta på nya och ofta konstiga termer. Du kommer att lära känna dem alla mer i detalj med tiden, men för tillfället bör du börja med de tre grundläggande HTML-termerna - element, taggar och attribut.

Element

Element anger hur strukturen och innehållet för objekt på en sida definieras. Några av de ofta använda elementen inkluderar flera nivåer av rubriker (definierade som element med

innan

) och stycken (definieras som

); objekt kan läggas till i listan ,

, , Och och många andra.

Element identifieras med vinkelparenteser<>, som omger elementnamnet. Så elementet kommer att se ut så här:

taggar

Lägga till vinkelfästen< и >skapar vad som kallas en tagg runt ett element. Taggar förekommer oftast i par av öppnings- och stängningstaggar.

Starttaggen markerar starten på ett element. Den består av symbolen<, затем идёт имя элемента и завершается символом >; Till exempel,

.

Sluttaggen markerar slutet på ett element. Den består av symbolen< с последующей косой чертой и именем элемента и завершается символом >; Till exempel,

.

Innehållet mellan start- och sluttaggar är innehållet i det elementet. Länken kommer till exempel att ha en öppningstagg och avslutande tag. Det som finns mellan dessa två taggar kommer att vara innehållet i länken.

Så länktaggarna skulle se ut ungefär så här:

...

Attribut

Attribut är egenskaper som används för att tillhandahålla ytterligare information om elementet. De vanligaste attributen inkluderar id-attributet, som identifierar elementet; klassattributet, som klassificerar elementet; src-attributet, som anger källan till det inbäddade innehållet; och href-attributet, som anger en länk till den relaterade resursen.

Attribut definieras i öppningstaggen efter elementnamnet. I allmänhet inkluderar attribut ett namn och ett värde. Formatet för dessa attribut består av attributnamnet följt av ett likhetstecken, följt av attributets värde inom citattecken. Till exempel element med href-attributet skulle se ut så här:

Shay Howe

Demonstration av grundläggande HTML-villkor

Denna kod kommer att visa texten "Shay Howe" på en webbsida och när du klickar på den här texten tar den användaren till http://shayhowe.com. Länkelementet deklareras med en starttagg och avslutande tag omslutande text, samt attributet och värdet för adressen till länken som deklareras med href="http://shayhowe.com" i öppningstaggen.

Ris. 1.01. Schema HTML-syntax inkluderar element, attribut och tagg

Nu när du vet vad HTML-element, taggar och attribut är, låt oss ta en titt på vår första webbsida tillsammans. Om något ser nytt ut här, oroa dig inte - vi kommer att dechiffrera det allt eftersom.

Anpassa strukturen för ett HTML-dokument

HTML-dokument är vanliga textdokument som sparas med tillägget .html snarare än .txt. För att börja skriva HTML behöver du först textredigerare som är bekvämt för dig att använda. Tyvärr ingår inte detta Microsoft Word eller Sidor, eftersom de är komplexa redigerare. De två mest populära textredigerarna för att skriva HTML och CSS är Dreamweaver och Sublime Text. Gratis alternativ Se även Notepad++ för Windows och TextWrangler för Mac.

Alla HTML-dokument innehåller en obligatorisk struktur som inkluderar följande deklarationer och element: , , Och .

Dokumenttypsdeklaration ellerfinns i början av ett HTML-dokument och talar om för webbläsare vilken version av HTML som används. Eftersom vi kommer att använda senaste versionen HTML, vår dokumenttyp blir helt enkelt. Efter det kommer elementet anger början av dokumentet.

Inuti element definierar toppen av dokumentet, inklusive olika metadata (medföljande information om sidan). Innehåll inuti ett element visas inte på själva webbsidan. Istället kan det innehålla titeln på dokumentet (som visas i namnlisten i webbläsarfönstret), länkar till externa filer eller annan användbar metadata.

Allt synligt innehåll på webbsidan kommer att finnas i elementet . Strukturen för ett typiskt HTML-dokument ser ut så här:

Hej världen!

Hej världen!

Detta är en webbsida.



Demonstration av strukturen i ett HTML-dokument

Denna kod visar dokumentet, som börjar med deklarationen av dokumenttypen,, omedelbart följt av elementet . Inuti gå element Och . Element innehåller sidans kodning via taggen och dokumentets titel genom elementet . Element <body>inkluderar rubrik via element <h1>och ett stycke text igenom<р>. Eftersom både rubriken och stycket är kapslade i elementet <body>, de är synliga på webbsidan.</p><p>När ett element finns inuti ett annat element, även känt som ett kapslat element, är det en bra idé att lägga till utfyllnad för att hålla dokumentstrukturen välorganiserad och läsbar. I föregående kod, båda elementen <head>Och <body>kapslade och flyttas inuti elementet <html>. Vadderingsstrukturen för element fortsätter med nya tillagda element inuti <head>Och <body> .</p><h3>Självstängande element</h3><p>I föregående exempel, elementet <meta>var den enda taggen som inte innehöll en avslutande tagg. Oroa dig inte, detta gjordes med flit. Alla element består inte av öppnings- och stängningstaggar. Vissa element får helt enkelt innehåll eller beteende genom attribut inom samma tagg. <meta>är ett av dessa element. Elementinnehåll <meta>i exemplet tilldelas med hjälp av charset-attributet och -värdet. Andra typiska självstängande element inkluderar:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Den gjutna strukturen, gjord med en dokumenttypsdeklaration<!DOCTYPE html>och element <html> , <head>Och <body>, är ganska vanligt. Vi vill ha den här dokumentstrukturen till hands eftersom vi kommer att använda den ofta när vi skapar nya HTML-dokument.</p><h3>Kodvalidering</h3><p>Oavsett hur noggrant vi skriver vår kod är misstag oundvikliga. Lyckligtvis, när vi skriver HTML och CSS, har vi validatorer för att kontrollera vårt arbete. W3C erbjuder HTML- och CSS-validerare som skannar kod efter fel. Att validera vår kod hjälper oss inte bara att rendera korrekt i alla webbläsare, utan det hjälper oss också att lära oss bästa praxis när vi skriver kod.</p><h2>På praktik</h2><p>Som webbdesigners och frontend-utvecklare har vi lyxen att delta i ett antal fantastiska konferenser dedikerade till vårt hantverk. Vi kommer att organisera vår egen stilkonferens och skapa en hemsida för den under nästa lektion. Så här!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Låt oss byta lite, gå bort från HTML och ta en titt på CSS. Kom ihåg att HTML definierar innehållet och strukturen på våra webbsidor, medan CSS definierar deras visuella stil och utseende.</p><h2>Grundläggande CSS-villkor</h2><p>Förutom HTML-termer finns det några grundläggande CSS-termer som du måste bekanta dig med. Dessa termer inkluderar väljare, egenskaper och värden. Precis som med HTML-terminologi, ju mer du arbetar med CSS, desto mer blir dessa termer andra natur för dig.</p><h3>Väljare</h3><p>När du lägger till element på en webbsida kan de formateras med CSS. En väljare bestämmer vilket eller vilka element i HTML som ska riktas mot och tillämpa stilar (som färg, storlek och position) på dem. Väljare kan inkludera en kombination av olika mätvärden för att välja unika element, beroende på hur specifika vi vill vara. Till exempel vill vi markera varje stycke på en sida, eller bara välja ett särskilt stycke.</p><p>Väljare är vanligtvis associerade med ett attributvärde, som ett id- eller klassvärde, eller ett elementnamn, som t.ex. <h1>eller<р> .</p><p>I CSS paras väljare med krulliga klammerparenteser () som omsluter stilarna som tillämpas på det valda elementet. Denna väljare riktar in sig på alla element <span><p>P(...)</p><h3>Egenskaper</h3><p>När ett element har valts bestämmer egenskapen vilka stilar som kommer att tillämpas på det. Egenskapsnamnen kommer efter väljaren, innanför hängslen () och omedelbart före kolon. Det finns många egenskaper som vi kan använda som bakgrund, färg, teckenstorlek, höjd och bredd och andra ofta tillagda egenskaper. I följande kod definierar vi egenskaperna för färg och teckenstorlek som gäller för alla element <span><p>P ( färg: ...; teckenstorlek: ...; )</p><h3>Värderingar</h3><p>Hittills har vi bara valt elementet genom väljaren och bestämt vilken stil vi vill tillämpa på det genom egenskaperna. Nu kan vi ställa in beteendet för den här egenskapen genom ett värde. Värden kan anges som text mellan ett kolon och ett semikolon. Nedan väljer vi alla element <p >Och ställ in värdet för egenskapen color till orange och värdet för egenskapen font-size till 16 pixlar.</p><p>P (färg: orange; teckenstorlek: 16px; )</p><p>För att testa, i CSS börjar vår uppsättning regler med en väljare, omedelbart följt av hängslen. Inom dessa lockiga hängslen finns deklarationer som består av par av egenskaper och värden. Varje deklaration börjar med en egenskap, följt av ett kolon, värdet på egenskapen och slutligen ett semikolon.</p><p>En vanlig praxis är att flytta ett par egenskaper och värden inom lockiga hängslen. Precis som med HTML hjälper indrag att hålla vår kod organiserad och tydlig.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Ris. 1.03. CSS-syntaxstrukturen inkluderar väljare, egenskaper och värden</p><p>Att känna till några grundläggande termer och allmän CSS-syntax är en bra början, men vi har några fler punkter att lära oss innan vi hoppar in i djupet. I synnerhet måste vi titta närmare på hur väljare fungerar i CSS.</p><h2>Arbeta med väljare</h2><p>Väljare, som nämnts tidigare, indikerar vilka HTML-element som kommer att utformas. Det är viktigt att till fullo förstå hur man använder väljare och hur de fungerar. Det första steget bör vara att lära känna <a href="https://5visa.ru/sv/obrazovanie/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">olika typer</a> väljare. Vi börjar med de mest grundläggande väljare: typväljare, klasser och identifierare.</p><h3>Typväljare</h3><p>Typväljare riktar in element efter deras typ. Till exempel om vi vill rikta in oss på alla element <div>vi måste använda div-väljaren. Följande kod visar typväljaren för element <div>, samt motsvarande HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Klasser</h3><p>Klasser låter dig välja ett element baserat på värdet på klassattributet. Klassväljare är lite mer specifika än typväljare genom att de väljer en specifik grupp av element snarare än alla element av samma typ.</p><p>Klasser låter dig tillämpa samma stil på flera element samtidigt genom att använda samma klassattributvärde för flera element.</p><p>I CSS betecknas klasser med en inledande prick följt av värdet på klassattributet. Klassväljaren nedan väljer alla element som innehåller det fantastiska klassattributvärdet, inklusive element <div>Och <span><p>Grymt bra (...)</p><p> <div class="awesome">...</div> </p><h3>Identifierare</h3><p>Identifierare är ännu mer exakta än klasser eftersom de bara riktar sig mot ett unikt element åt gången. Precis som klassväljare använder värdet av klassattributet, använder identifierare värdet på id-attributet som väljare.</p><p>Oavsett vilken typ av element som renderas kan värdet på id-attributet endast användas en gång per sida. Om id:n finns, bör de reserveras för viktiga element.</p><p>I CSS betecknas identifierare med en hash-symbol framför, följt av värdet på id-attributet. Här väljer id endast det element som innehåller id-attributet med värdet shayhowe.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Ytterligare väljare</h3><p>Väljare är extremt kraftfulla och de som beskrivs ovan är bland de vanligaste väljare vi stöter på. Dessa väljare är bara början. Det finns många avancerade väljare och de är lättillgängliga. När du väl är bekväm med dem, var inte rädd för att titta på några av de mer avancerade också.</p><p>Okej, låt oss börja sätta ihop allt. Vi lägger till element på sidan i vår HTML, sedan kan vi välja dessa element och utforma dem med CSS. Låt oss nu koppla ihop punkterna mellan HTML och CSS så att de två språken fungerar tillsammans.</p><h2>CSS-anslutning</h2><p>För att få vår CSS att tala till vår HTML måste vi peka på CSS-filen från HTML. Det är bra att inkludera alla våra stilar i en extern fil som pekas på inuti elementet. <head>vårt HTML-dokument. Genom att använda en extern CSS kan vi tillämpa samma stilar på hela webbplatsen och snabbt göra ändringar i den.</p><h3>Andra alternativ för att lägga till CSS</h3><p>Andra alternativ för att inkludera CSS inkluderar att använda inline- och inline-stilar. Du kan se dessa alternativ i verkligheten, men de är i allmänhet ogillade eftersom de gör webbplatsuppdateringar besvärliga och besvärliga.</p><p>För att skapa vår externa stilmall vill vi återigen använda den valda textredigeraren för att skapa en ny. <a href="https://5visa.ru/sv/ustanovka-i-nastrojjka/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">textfil</a> med tillägget .css. Vår CSS-fil måste sparas i samma mapp eller undermapp som vår HTML-fil.</p><p>Inuti ett element <head>applicerat element <link>, som definierar förhållandet mellan HTML- och CSS-filer. Eftersom vi länkar till CSS använder vi attributet rel med stilmallsvärdet för att indikera deras relation. Dessutom används href-attributet för att ange platsen eller sökvägen till CSS-filen.</p><p>I följande exempel HTML-dokument, elementet <head>pekar på en extern stilfil.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>För att CSS ska renderas korrekt måste sökvägsvärdet för href-attributet direkt matcha där CSS-filen sparas. I föregående exempel lagras filen main.css på samma plats som HTML-filen, även känd som rotmappen.</p><p>Om CSS-filen finns i en undermapp, bör värdet på href-attributet motsvara den sökvägen. Till exempel, om vår main.css-fil sparades i en undermapp med namnet stylesheets, då skulle värdet på href-attributet vara stylesheets/main.css . Här används ett snedstreck (eller snedstreck) för att indikera en flyttning till en undermapp.</p><p>På <a href="https://5visa.ru/sv/proshivka/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">det här ögonblicket</a> våra sidor börjar vakna till liv, sakta men säkert. Vi har inte fördjupat oss så djupt i CSS ännu, men du kanske har märkt att vissa element har stilar som vi inte deklarerade i vår CSS. Det är webbläsaren som lägger sina egna föredragna stilar på dessa element. Lyckligtvis kan vi åsidosätta dessa stilar ganska enkelt, vilket vi kommer att göra härnäst med en CSS-återställning.</p><h2>Använder CSS Reset</h2><p>Varje webbläsare har sina egna standardstilar för <a href="https://5visa.ru/sv/problemy/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">olika element</a>. Hur <a href="https://5visa.ru/sv/navigatory/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> visar rubriker, stycken, listor och så vidare, kan skilja sig från hur det gör <a href="https://5visa.ru/sv/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">Internet Explorer</a>. CSS-återställning har blivit mycket använd för att säkerställa kompatibilitet över webbläsare.</p><p>Återställ CSS tar alla grundläggande HTML-element med en given stil och ger en konsekvent stil i alla webbläsare. Dessa återställningar inkluderar vanligtvis borttagning av storlekar, utfyllnad, marginaler eller ytterligare stilar för att sänka dessa värden. Eftersom CSS-cascading fungerar från topp till botten (mer om det snart) - bör vår återställning vara högst upp i vår stil. Detta säkerställer att dessa stilar läses först och det är allt. <a href="https://5visa.ru/sv/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">olika webbläsare</a> kommer att arbeta från en gemensam referenspunkt.</p><p>Det finns ett gäng olika CSS-återställningar tillgängliga att tillämpa, de har alla sina egna <a href="https://5visa.ru/sv/sovety/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">styrkor</a>. En av de mest populära av Eric Meyer, hans CSS-återställning är anpassad för att inkludera nya HTML5-element.</p><p>Om du känner dig lite äventyrlig finns även Normalize.css av Nicholas Gallagher. Normalize.css fokuserar inte på att använda en hård återställning på alla huvudelement, utan istället på att ställa in gemensamma stilar för dessa element. Detta kräver en djupare förståelse för CSS, samt att veta vad du vill ha av stilar.</p><h3>Crossbrowser-kompatibilitet och testning</h3><p>Som nämnts tidigare renderar olika webbläsare element olika. Det är viktigt att inse värdet av kompatibilitet och testning över webbläsare. Webbplatser behöver inte se exakt likadana ut i alla webbläsare, men bör vara nära. Vilka webbläsare du vill stödja och i vilken utsträckning är ett beslut du måste ta baserat på vad som är bäst för din sajt.</p><p>Det finns några saker att tänka på när du skriver CSS. Den goda nyheten är att det är genomförbart och kräver lite tålamod att bemästra.</p><h2>På praktik</h2><p>Låt oss gå tillbaka till där vi senast slutade på vår konferenssida och se hur vi kan lägga till lite CSS.</p><ol><li>Låt oss skapa en ny mapp som heter tillgångar i vår stil-konferensmapp. Det är här vi kommer att lagra alla tillgångar för vår webbplats som stilar, bilder, videor, etc. För våra stilar, låt oss gå vidare och lägga till ytterligare en stilmapp i tillgångsmappen.</li><li>Använd en textredigerare, skapa en ny fil som heter main.css och spara den i formatmappen vi just skapade.</li><p>Om vi ​​tittar på filen index.html i webbläsaren kan vi se att elementen <h1>Och <p>Innehåller redan standardstilen. I synnerhet har de en unik teckenstorlek och utrymme runt dem. Med hjälp av Eric Meyers återställning kan vi mjuka upp dessa stilar, så att var och en av dem kan börja från samma bas. För att göra detta, ta en titt på hans hemsida, kopiera koden och klistra in den överst i vår main.css-fil.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licens: ingen (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adress, stor, citera, kod, del, dfn, em, img, ins, kbd, q, s, samp, liten, strike, stark, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td, artikel, åt sidan, canvas, detaljer, bädda in, figur, figcaption, sidfot, sidhuvud, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video (marginal: 0; padding: 0; border: 0; font-size: 100%; font-size: 100%; font: herit; vertical-align: baseline ; ) /* HTML5 display-roll reset för äldre webbläsare */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( liststil: ingen; ) blockcitat, q ( citat: ingen; ) blockquote:before, block kollapsa:c falla samman; kantavstånd: 0; )</p><li>Vår main.css-fil börjar ta form, så låt oss inkludera den i vår index.html-fil. Öppna index.html i en textredigerare och lägg till ett element <link>V <head>, direkt efter elementet <title> .</li><li>Eftersom vi pekar stilar genom elementet <link>lägg till ett rel-attribut med värdet stilmall.</li><p>Vi kommer också att inkludera en länk till vår main.css-fil med hjälp av href-attributet. Kom ihåg att vår main.css-fil sparas i mappen stylesheets, som finns i tillgångsmappen. Så värdet på href-attributet, som är sökvägen till vår main.css-fil, bör vara assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Stilkonferens

Dags att testa vårt arbete och se hur vår HTML och CSS passar ihop. Att öppna filen index.html (eller uppdatera sidan om den redan är öppen) i webbläsaren bör visa ett något annorlunda resultat än tidigare.

Ris. 1.04. Vår Styles Conference-webbplats med CSS-återställning

Demo och källkod

Nedan kan du se webbplatsen för Styles Conference i dess nuvarande tillstånd, samt ladda ner källa webbplats för tillfället.

Sammanfattning

Så, allt är bra! Vi har tagit några stora steg i den här handledningen.

Tänk bara, nu kan du grunderna i HTML och CSS. När vi fortsätter och du lägger mer tid på att skriva HTML och CSS kommer du att bli mycket mer bekväm med att arbeta med dessa två språk.

Kom ihåg att vi har övervägt följande:

  • Skillnaden mellan HTML och CSS.
  • Introduktion till HTML-element, taggar och attribut.
  • Ställa in strukturen för din första webbsida.
  • Introduktion till CSS-väljare, egenskaper och värden.
  • Arbeta med CSS-väljare
  • Pekare till CSS från HTML.
  • Vikten av CSS-återställning.

Låt oss nu titta närmare på HTML och lära känna semantiken lite.

Resurser och länkar

  • Vanliga HTML-termer via Scripting Master
  • CSS-villkor och definitioner via imponerande webbar
  • CSS-verktyg: Återställ CSS via Eric Meyer

Det mesta av innehållet på Internet är webbsidor. Detta är historiskt sett den allra första typen av dokument avsedda för placering i det virtuella nätverksutrymmet, men behåller fortfarande sin relevans och har praktiskt taget inga konkurrerande format. Hur är strukturen på webbsidor? Vilka webbutvecklingsverktyg används för att skapa dem?

Vad är en webbsida?

"Lista de grundläggande delarna av en webbsida", säger en examinator till oss i en datavetenskapslektion. Vad kan vi säga till honom som svar? Först och främst, låt oss prata om vad en webbsida är i princip.

Enligt den definition som allmänt accepteras bland IT-specialister är detta ett dokument som är avsett att öppnas i ett specialiserat program - en webbläsare, och som innehåller data för att visa olika användbart innehåll på en datorskärm med hjälp av lämplig typ av programvara - texter, länkar, grafik, videor, musik etc. etc. En webbsida är ett textdokument. Den relevanta informationen för webbläsaren är bokstäver, siffror och Särskilda symboler, används som markup language element - HTML. Det är med hjälp av det som skaparen av webbsidan "förklarar" för webbläsaren hur man visar detta eller det innehållet på skärmen.

Webbsidors plats och roll i webbplatsens struktur

Kan vi säga att en webbsida är huvudkomponenten i en webbplats? Detta är delvis sant. Men som vi noterade ovan är en webbsida bara ett textdokument. Webbplatsen innehåller som regel även bilder, videor och andra multimediaelement. En webbsida kan inte innehålla dem, men i sin struktur kan den innehålla länkar till dem. Således kan en webbsida kallas huvudkomponenten på webbplatsen när det gäller den ledande rollen för att visa virtuellt innehåll för användare.

I sällsynta fall kommer naturligtvis dokumentet i fråga att vara den enda komponenten på webbplatsen - om det av någon anledning inte tillhandahåller visning av grafik, video och andra multimediaelement. I synnerhet de allra första webbplatserna - när märkningsspråken på webbsidor först dök upp - inkluderade inte motsvarande innehåll. För användarens ögon fanns bara text och länkar.

Principen att använda hypertext

Så en webbsida är ett dokument som upprättats i HTML-språk, som används för att markera hypertext. Men vad är detta fenomen? Vad är hypertext? Utan att fördjupa oss i teorin konstaterar vi att detta är en text som på ett eller annat sätt låter dig få snabb åtkomst till en annan genom länkar. I en vanlig bok är detta omöjligt - det finns "vanlig text". För att få tillgång till den önskade sidan måste läsaren göra flera vändningar efter att ha läst innehållet eller fotnoterna tidigare. I "hypertext"-läget görs huvuddelen av arbetet av datorn - på grund av informationen som återspeglas i HTML-elementen på sidan.

Om en lärare i datavetenskap säger till oss, "Lista huvudelementen på en webbsida", så kan vi korrekt börja prata om komponenterna i motsvarande dokument, som skapas med HTML-markeringsspråket. Låt oss därför till att börja med titta på några teoretiska punkter angående HTML.

HTML-språkstruktur: taggar

Hur läser en webbläsare nödvändig information om en webbsida från ett HTML-dokument? Väldigt enkelt.

Väsentliga element givet språkär taggar. I de flesta fall är de parade - det finns en öppning och det finns en avslutande. De förra betecknas med endast vinkelparenteser. De andra liknar varandra, men den andra parentesen föregås av ett snedstreck - symbolen /. Webbläsaren kan känna igen dem och visar därför innehållet på webbsidor utan problem i enlighet med de algoritmer som skapats av dokumentutvecklaren.

Den inledande taggen skrivs vanligtvis med versaler, den avslutande taggen skrivs med små bokstäver. Detta är en standard som har etablerat sig bland IT-proffs. Webbläsaren kommer säkert att känna igen HTML-kommandot i alla bokstäver, men webbutvecklare rekommenderas fortfarande att hålla sig till det markerade taggskrivschemat. Detta kommer till exempel att underlätta färdigställandet av en webbsida av andra specialister.

Attribut

Andra viktiga delar av HTML-språket är attribut. Med deras hjälp kan skaparen av en webbsida ställa in innehållsegenskaper - till exempel teckensnittshöjd, färg, position i förhållande till sidan. Detsamma gäller bilder, videor och andra multimediakomponenter. Attribut skrivs i öppningstaggen.

Innehåll

Mellan inledande och avslutande taggar finns nästa nyckelkomponent på en webbsida, innehållet. Detta är i själva verket själva innehållet som ska visas framför användaren på skärmen. Det kan vara text, länk, bild, video eller annat multimediaelement.

Element på webbsidan

"Så lista de grundläggande delarna av en webbsida, äntligen!" - upprepar läraren. "Med nöje", svarar vi honom. Vad ingår i strukturen för den typ av dokument som övervägs? Låt oss komma överens om att vi kommer att överväga denna aspekt i sammanhanget med HTML-elementen på webbsidan. Det vill säga att deras visning i webbläsaren - vad användaren ser på skärmen - kommer att intressera oss i mindre utsträckning. Faktum är att motsvarande HTML-algoritmer, på grundval av vilka programmet visar innehåll på samma sätt, kan vara olika. Och detta är särdraget med HTML-språket: den önskade bilden på webbsidan kan visas olika sätt. Samtidigt kan de antingen vara likvärdiga när det gäller arbetskostnaderna för skaparen av webbsidan, eller så kan de innebära en annan mängd ansträngning och tid för implementeringen.

Webbsideselement: header

Standardelementen på en webbsida, hur överraskande det än kan låta, finns i mycket små antal. Faktum är att det bara finns två av dem - rubriken och brödtexten i dokumentet. Men var och en av dem kan ha en ganska komplex struktur.

Vad är specifikationerna för rubriken? Den finns högst upp på webbsidan. HTML-koden som genererar rubriken utgår vanligtvis från att endast texten är "krypterad", men vid behov kan även små grafiska inlägg placeras i motsvarande element. Och detta är faktiskt allt som kan sägas om titeln. Det verkar som om dess roll i strukturen för motsvarande dokument är obetydlig. Men det är inte. Webbsidestitlar är mycket viktiga när det gäller att indexera webbplatser i sökmotorer - Yandex, Google. Detta element måste vara helt relevant för innehållet på webbsidan, såväl som de tematiska detaljerna för webbplatsen.

Hur fångas titeln på en webbsida med HTML? Väldigt enkelt. Först skrivs öppningstaggen, som alltid ser ut som HEAD med vinkelparenteser, sedan rubrikens innehåll, därefter den avslutande taggen. De skrivs förstås högst upp i webbdokumentet.

Titeln på ett webbdokument kan innehålla ett antal ytterligare element. Ibland kan formatet på en webbsida kräva att text visas i en viss kodning. Hur säkerställer man att webbdokumentet uppfyller detta kriterium? Väldigt enkelt. Dokumenthuvudstrukturen bör innehålla HTML-algoritmer som instruerar webbläsaren att använda en specifik språkkodning - till exempel kyrilliska. Motsvarande kommandon placeras i META-taggen, som, liksom andra, kan öppna och stänga.

Huvuddelen av webbsidan

Huvuddelen av ett webbdokument öppnas med BODY-taggen och stängs med motsvarande element, som inkluderar ett snedstreck. Samtidigt kan det finnas ett stort antal ytterligare kommandon för hypertextmarkeringsspråket mellan öppnings- och stängningstaggar. Detta beror på det faktum att huvuddelen av webbsidan innehåller dess användbara innehåll - texter, länkar, grafik, videor, olika formulär att fylla i.

Var och en av de respektive innehållstyperna har sina egna taggar. Strukturen i huvuddelen av ett webbdokument kan innehålla HTML-kommandon som också kan användas för att formatera text, till exempel för att ge teckensnittet en specifik färg, storlek och andra egenskaper.

Låt oss ta en titt på detaljerna för några vanliga HTML-taggar. Egentligen utgör de också huvudelementen på webbsidan.

Grundläggande HTML-taggar

Så, för att studera i detalj vad elementen i en webbsida är, låt oss studera essensen av grundläggande HTML-taggar mer i detalj. Vi har redan listat några av dem ovan - särskilt de med vilka webbläsaren läser webbsidornas rubriker och bestämmer var huvuddelen av dokumentet finns.

P-taggen är ganska vanlig. Den, liksom andra liknande element i hypertextmarkeringsspråket, kan öppna och stänga. Den här taggen låter dig formatera ett enda stycke i ett dokument. Du kan till exempel ställa in en specifik typsnittstyp eller färg för den. Detta görs dock med hjälp av en extra tagg - FONT. Samtidigt kommer det att placeras inuti den som anger gränserna för stycket - detta gör att du inte kan distribuera HTML-kommandot som återspeglar den föredragna teckensnittstypen till andra delar av webbsidan.

Tabeller skapas med TABLE-taggen. Med hjälp av motsvarande attribut kan du bestämma det erforderliga antalet kolumner och rader, ställa in deras bredd, detaljerna för gränserna, storleken och färgen på textteckensnittet i tabellen.

Ansvarig för att bearbeta bilder av webbläsaren. Du kan också placera olika attribut i den som reglerar bildens storlek, dess position på sidan.

Länkar till andra webbdokument eller filer anges med taggen A. Som regel finns attribut inuti den som indikerar att webbsidans struktur är en hyperlänk. Detta indikerar dokumentet, filen eller platsen som det leder till.

En vanlig tagg är FRAMESET. Med den kan du dela upp utrymmet på en webbsida i flera områden - ramar. I var och en av dem är det möjligt att separera webbdokument. Det vill säga, ramar låter dig placera två eller flera sidor korrekt på samma skärm samtidigt.

Berättelsen om nyckelelementen på webbsidor och den efterföljande berättelsen om sättet att formatera dem med HTML-språket - något i stil med detta kommer att vara algoritmen för vårt svar på frågan som examinatorn ställde oss. Om han kontaktade oss och sa "lista huvudelementen på webbsidan", så kommer vi, med hjälp av lämplig metod, att ha alla möjligheter att avslöja ämnet. Det vill säga, med termen "element" kan vi förstå nyckelkomponenterna i strukturen av ett webbdokument, eller innehållstyper - text, bilder, tabeller, ramar, länkar som webbmastern skapar med hjälp av ett verktyg som HTML-språket.

Specifikationer för webbutvecklingsverktyg

Utöver det som har sagts kan vi klargöra att det finns ett stort antal taggar och attribut som tillhandahålls av HTML-standarderna. Utöver HTML kan webbutvecklare använda ytterligare formateringsverktyg för hypertextdokument. Till exempel med JavaScript du kan skapa dynamiska webbsidor - det vill säga de där innehållet ständigt uppdateras (både på grund av användarens handlingar och i enlighet med algoritmer som är förskrivna i skript).

Det skulle vara användbart att tillägga att en webbutvecklare kan använda fullfjädrade programmeringsspråk i sitt arbete, som till exempel Perl, PHP, Java, Python, med hjälp av vilka möjligheterna att arbeta med hypertextdokument blir ännu bredare. Behovet av detta kan bero på att webbteknologiernas tillämpningsområde idag är väldigt olika. Uppgifterna som moderna utvecklare står inför kan vara ganska komplexa. Till exempel, ibland krävs det att webbsidor skrivna på ryska översätts till engelska. I det här fallet kommer utvecklarens verktygslåda att vara den mest varierande.

Målet med arbetet: bekantskap med eleverna med de grundläggande begreppen i HTML-språket, strukturen i ett HTML-dokument, obligatoriska taggar, kommentarer, textformateringsmetoder, fysiska och logiska stilar och förvärv av färdigheter i att skapa enkla statiska webbdokument.

I labbet kommer vi att använda textredigeraren Anteckningar för att förbereda HTML-filer, och webbläsaren Internet Explorer som ett verktyg för att övervaka vad som har gjorts.

Teoretisk information

Grundläggande koncept

Hypertext- en informationsstruktur som gör att du kan etablera semantiska relationer mellan textelement på en datorskärm på ett sådant sätt att du enkelt kan göra övergångar från ett element till ett annat. I praktiken, i hypertext, markeras vissa ord genom att understryka eller färglägga en annan färg (hyperlänkar). Att markera ett ord indikerar närvaron av en koppling av detta ord med något dokument där ämnet som är associerat med det markerade ordet övervägs mer i detalj. Ett enda HTML-dokument kallas:

HTML-dokument;

Webbdokument

Webbsida.

Sådana sidor är vanligtvis i HTM- eller HTML-format.

En grupp webbsidor som tillhör en författare eller en IEDI och sammankopplade med vanliga hyperlänkar bildar en struktur som kallas en webbplats eller webbplats. Varje HTML-sida har sin egen unika URL - adsidec på internet.

Ram (ram) är en term med två betydelser. Det första värdet är dokumentområdet med dess rullningslister. Den andra är en 0DNN0H-bild i den animerade grafikfilen (ram).

Applet (applet) - ett program som överförs till klientdatorn som en separat fil och startas när en webbsida visas.

Skript (Manus) , eller script, är ett program som ingår i en webbsida för att förbättra dess möjligheter. Webbläsaren Internet Explorer i vissa situationer visar meddelandet: "Tillåt skript på sidan?". I det här fallet menas skript.

CGI (Allmänning Inkörsport Gränssnitt) - det allmänna namnet på program som, som arbetar på servern, låter dig utöka funktionerna på webbsidor. Utan sådana program är det omöjligt att skapa interaktiva webbsidor.

Webbläsare (Webbläsare) - ett program för visning av webbsidor.

Element- konstruktionen av HTML-språket. Du kan se det som en behållare som innehåller data och låter dig formatera den på ett visst sätt. Varje webbsida är en uppsättning element. En av huvudidéerna med hypertext är förmågan att kapsla element. Till exempel:

<Начало элемента>Innehållet i elementet, de data som elementet formaterar

Märka(på engelska tag - label, descriptor, label) - start- eller slutmarkören för ett element. Taggar definierar omfattningen av element och separerar element från varandra. I texten på en webbsida är taggar omgivna av vinkelparenteser.< >, och sluttaggen följs alltid av ett snedstreck. Text som inte står mellan dessa parenteser (< >) är synlig i sin helhet när den visas i en webbläsare. Till exempel:

<Начальный тег>Innehållet i elementet, data som

formaterar elementet

<Р>Denna text kommer att finnas i ett separat stycke

Varje webbsida är en uppsättning element. En av de grundläggande principerna för HTML är förmågan att kapsla ett element i ett annat.

Attribut- parameter eller egenskap hos elementet. Attribut finns inuti starttaggen och är separerade från varandra med mellanslag. Om cementen innehåller text, kan attributen ställa in teckensnittets färg och storlek, justering textstycke och så vidare. Om elementet innehåller en bild kan attributen ställa in storleken på bilden, närvaron och storleken på ramen runt bilden, etc.

<Р align="center">Denna text kommer att justeras mot mitten av skärmen

I det här exemplet finns det återigen en tagg som definierar början och slutet av ett stycke. Starttaggen innehåller dock attributet align, som ställer in textjusteringen till mitten av skärmen.

Notera:

All användbar information måste finnas mellan start- och sluttaggar som anger dess format;

Alla attribut finns i starttaggen;

För enkelhetens skull kan du skriva starttaggen med en stor (versal) bokstav (P), och sluttaggen med en liten (små) bokstav (/p), även om detta inte är nödvändigt;

Alla element kräver inte en slut (avslutande) tagg;

Börja skriva varje nytt element på en ny rad. Kapslade element är indragna (tab). Återigen, detta är inte nödvändigt, men det kommer att göra ditt jobb mycket enklare.

En webbsida är ett speciellt formaterat dokument som kan innehålla text, grafik, hyperlänkar, ljud, animationer och video.

Flera webbsidor som delar ett gemensamt tema, design och länkar, och som vanligtvis finns på samma webbserver, bildar en webbplats.

Webbplats ait (från engelska. hemsida: webb- "webb, nätverk" och webbplats- "placera", bokstavligen "placera, segmentera, del i nätverket") - en uppsättning elektroniska dokument(filer) av en individ eller organisation i datornätverk, kombinerat under en adress (domännamn eller IP-adress).

Alla sajter tillsammans utgörworld wide web, där kommunikation (webb) förenar informationssegment från världssamfundet till en enda helhet - en databas och kommunikation i planetarisk skala. För direktåtkomst av klienter till webbplatser på servrar utvecklades ett protokoll speciellt http .

En webbplats är uppbyggd som en tidning som innehåller information om ett ämne eller nummer. Precis som en tidning består av tryckta sidor, är en webbplats uppbyggd av datorgenererade webbsidor.

Programmet som visar en webbsida kallas en webbläsare.

Skapandet av webbplatser implementeras med hjälp av märkningsspråket för hypertextdokument HTML. HTML-teknik är att kontrolltecken (taggar) infogas i ett vanligt textdokument och som ett resultat får vi en webbsida. När webbläsaren laddar en webbsida, presenterar den på skärmen i den form som anges av taggarna.

HTML tillåter:

Formatera text

inkludera bilder, multimedia i dokumentet;

Detta språk skapar hypertextlänkar till andra webbsidor.

HTML används för att skapa informationsinnehållet i en fil och för att definiera strukturen och formatet på webbsidor. Eftersom HTML-filer är vanliga textfiler kan en sådan fil skickas till praktiskt taget vilken dator som helst.

För att skapa webbsidor används enkla textredigerare som inte innehåller kontrolltecken för textformatering i dokumentet som skapas. Som en sådan redigerare i Windows kan du använda standardapplikation"Anteckningsbok".

Vanligtvis har en webbsida fil tillägget .html eller .htm.

Dessutom finns det många tekniker där huvudstegen för att skapa webbplatser redan är automatiserade, det återstår bara att göra ändringar i enlighet med deras ämne.

Att visa en HTML-sida är lika enkelt som att skriva dess URL i webbläsarens adressfält och sedan följa hyperlänkarna. Men detta är just huvudproblemet - hur får man reda på adressen till sidan? Oftast händer det att du vet vad du behöver hitta, men du vet inte exakt var du ska leta. För att lösa detta problem finns det speciella sökmotorer. Ur användarens synvinkel, söksystemär en normal sida startsida som innehåller länkar till andra webbplatser uppdelade efter rubriker ("Sport", "Företag", "Datorer", etc.). Dessutom tillåter sökmotorn användaren att ange flera nyckelord och returnerar länkar till sidor som innehåller dessa nyckelord.

Hemsida

Webbplats (eng. Webbplats, från webb - webb och webbplats - "plats") - en uppsättning dokument från en privatperson eller organisation förenade under en adress i ett datornätverk. Som standard antas det att sidan finns på Internet. Alla Internetwebbplatser utgör tillsammans World Wide Web. HTTP-protokollet är speciellt utformat för direkt klientåtkomst till webbplatser på servrar. Webbplatser är annars kända som Internetrepresentation av en person eller organisation. När de säger "din egen sida på Internet" betyder det en hel webbplats eller en personlig sida som en del av någon annans sida. Förutom webbsidor på Internet finns även WAP-sidor för mobiltelefoner.

Till en början var webbplatser samlingar av statiska dokument. För närvarande kännetecknas de flesta av dynamik och interaktivitet. För sådana fall använder experter termen webbapplikation - redo mjukvarupaket för att lösa problemen med webbplatsen. En webbapplikation är en del av en webbplats, men en webbapplikation utan data är bara tekniskt sett en webbplats.

I de flesta fall på Internet motsvarar en webbplats ett domännamn. Precis enligt domännamn platser identifieras i globalt nätverk. Andra alternativ är möjliga: en webbplats på flera domäner eller flera webbplatser under en domän. Vanligtvis använder flera domäner stora webbplatser (webbportaler) för att logiskt separera olika typer av tillhandahållna tjänster (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Det finns också frekventa fall av tilldelning av separata domäner för olika länder eller språk. Till exempel är google.ru och google.fr logiskt sett en Google-webbplats på olika språk, men tekniskt sett är de olika webbplatser. Att kombinera flera webbplatser under en domän är typiskt för gratis hosting. För att identifiera webbplatser i adressen, efter att ha angett värden, finns det en tilde och webbplatsens namn: example.com/~my-site-name/.




Topp