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

Innan vi börjar vår resa genom HTML och CSS webbplatsbyggande lektioner ä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 och definierar innehåll som rubriker, stycken eller bilder. CSS (Cascading Style Sheets) är ett presentationsspråk skapat för att stila utseendet på innehåll, med 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 stilen.

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-villkor

Innan du börjar arbeta med HTML kommer du sannolikt att stöta på några nya och ofta konstiga termer. Du kommer att bli mer bekant med dem alla med tiden, men för nu 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

); Du kan inkludera element 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 elementet. Taggar förekommer oftast i par av öppnings- och stängningstaggar.

Den öppna taggen markerar början av elementet. Den består av en symbol<, затем идёт имя элемента и завершается символом >; Till exempel,

.

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

.

Innehållet som visas mellan inledande och avslutande taggar ä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 kommer att 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 ett href-attribut, som anger en länk till den associerade 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 attributvärdet inom citattecken. Till exempel element med href-attributet kommer att se ut så här:

Shay Howe

Demonstration av grundläggande HTML-termer

Denna kod kommer att visa texten "Shay Howe" på en webbsida och när den klickas på den här texten kommer användaren till http://shayhowe.com. Länkelementet deklareras med en öppningstagg och avslutande tag som täcker texten, såväl som attributet och värdet för länkadressen som deklareras via href="http://shayhowe.com" i öppningstaggen.

Ris. 1.01. HTML-syntax i dispositionsform 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. Om något ser nytt ut här, oroa dig inte - vi bryter ner det allt eftersom.

Anpassa HTML-dokumentstrukturen

HTML-dokument är enkla textdokument som sparas med tillägget .html snarare än .txt. För att börja skriva HTML behöver du först en textredigerare som du är bekväm med att använda. Tyvärr ingår inte detta Microsoft Word eller Sidor, eftersom dessa är komplexa redigerare. De två mest populära textredigerarna för att skriva HTML och CSS är Dreamweaver och Sublime Text. Gratis alternativä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 kommer att vara enkel. Efter detta kommer elementet anger början av ett dokument.

Inuti element definierar toppen av dokumentet, inklusive olika metadata (medföljande information om sidan). Innehåll i ett element visas inte på själva webbsidan. Istället kan den 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 HTML-dokumentstruktur

Den här koden visar dokumentet, som börjar med dokumenttypsdeklarationen,, sedan kommer omedelbart elementet . Inuti element kommer Och . Element innehåller sidans kodning via taggen och dokumentets titel genom elementet . Element <body>inkluderar titeln genom elementet <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 är inuti ett annat element, även känt som kapslat, är det en bra idé att dra in det för att hålla dokumentstrukturen välorganiserad och läsbar. I föregående kod båda elementen <head>Och <body>kapslade och skiftade inom elementet <html>. Indragningsstrukturen för element fortsätter med nya element inuti <head>Och <body> .</p><h3>Självstängande element</h3><p>I föregående exempel, elementet <meta>var den enda tagg som inte innehöll en avslutande tagg. Oroa dig inte, detta gjordes avsiktligt. Alla element består inte av öppnings- och stängningstaggar. Vissa element får helt enkelt innehåll eller beteende genom attribut inom en enda tagg. <meta>är ett av dessa element. Elementinnehåll <meta>i exemplet tilldelas den med hjälp av charset-attributet och ett värde. 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>Minskad struktur gjord med hjälp av en dokumenttypsdeklaration<!DOCTYPE html>och element <html> , <head>Och <body>, är ganska vanligt. Vi vill behålla den här dokumentstrukturen bekväm 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 fel 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 granska vår kod hjälper den inte bara att renderas korrekt i alla webbläsare, utan hjälper också till att lära ut bästa praxis när du 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 webbplats för den under de kommande lektionerna. 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 växla lite 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 en andra natur.</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å. 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 specifikt 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 kombineras väljare med krulliga klammerparenteser (), som omsluter de stilar 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. Egenskapens namn kommer efter väljaren, innanför hängslen () och strax före kolon. Det finns många egenskaper som vi kan använda, såsom bakgrund, färg, teckenstorlek, höjd och bredd och andra vanliga 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 ett element genom en väljare och bestämt vilken stil vi vill tillämpa på det genom egenskaper. Nu kan vi ställa in beteendet för den här egenskapen via 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 färgegenskapsvärdet till orange och egenskapsvärdet för teckenstorlek till 16 pixlar.</p><p>P (färg: orange; teckenstorlek: 16px; )</p><p>För att testa detta, i CSS börjar vår regeluppsättning med en väljare, följt omedelbart av lockiga hängslen. Dessa lockiga hängslen innehåller 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 par av egenskaper och värden inuti 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 ta upp innan vi dyker ner 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/installation-and-configuration/kak-postavit-otpechatok-palca-na-meizu-5c-obzor-meizu-m5c-dostupnyi.html">olika typer</a> väljare. Vi börjar med de mest grundläggande väljare: typ, klass och identifierare.</p><h3>Typväljare</h3><p>Typväljare riktar in sig på element efter deras typ. Till exempel om vi vill rikta in oss på alla element <div>vi måste använda div selector. 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 eftersom de väljer en specifik grupp av element snarare än alla element av samma typ.</p><p>Klasser låter dig tillämpa samma stilar på olika element samtidigt genom att använda samma klassattributvärde för flera element.</p><p>I CSS representeras klasser av en ledande prick följt av värdet på klassattributet. Klassväljaren nedan väljer alla element som innehåller värdet av det fantastiska klassattributet, 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 elementtyp som visas kan id-attributvärdet endast användas en gång på en sida. Om id finns, bör de reserveras för viktiga element.</p><p>I CSS representeras identifierare av en hash-symbol framför, följt av värdet för id-attributet. Här kommer id bara att välja 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 saker 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 tillgängliga och de är lätt tillgängliga. När du är bekväm med dem, var inte rädd för att kolla in några av de mer avancerade.</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 för att få de två språken att fungera tillsammans.</p><h2>Ansluter CSS</h2><p>För att få vår CSS att prata med vår HTML måste vi peka på CSS-filen från HTML. En bra praxis är att inkludera alla våra stilar i en extern fil, som pekas på i elementet <head>vårt HTML-dokument. Genom att använda en extern CSS kan vi tillämpa samma stilar på hela webbplatsen och göra ändringar i den snabbt.</p><h3>Andra alternativ för att lägga till CSS</h3><p>Andra alternativ för att införliva CSS inkluderar att använda interna och inline-stilar. Du kan stöta på dessa alternativ i verkligheten, men de är i allmänhet ogillade eftersom de gör uppdateringssidor besvärliga och krångliga.</p><p>För att skapa vår externa stilmall vill vi återigen använda vår valda textredigerare för att skapa en ny <a href="https://5visa.ru/sv/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">textfil</a> med tillägget .css. Vår CSS-fil bör sparas i samma mapp eller undermapp som vår HTML-fil.</p><p>Inuti ett element <head>element tillämpas <link>, som definierar förhållandet mellan HTML- och CSS-filer. Eftersom vi länkar till CSS använder vi attributet rel med ett stilmallsvärde 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 lagras. 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 måste 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, så skulle värdet på href-attributet vara stylesheets/main.css. Detta använder ett snedstreck (eller snedstreck) för att indikera att du flyttar till en undermapp.</p><p>På <a href="https://5visa.ru/sv/firmware/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 skriva om dessa stilar ganska enkelt, vilket är vad vi kommer att göra härnäst med en CSS-återställning.</p><h2>Använder CSS-återställning</h2><p>Varje webbläsare har sina egna standardstilar för <a href="https://5visa.ru/sv/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">olika element</a>. Hur <a href="https://5visa.ru/sv/installation-and-configuration/ispolzovanie-rasshireniya-chrome-to-mobile-dlya-otpravki-stranicy-na-mobilnoe.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>. För att säkerställa kompatibilitet över webbläsare har CSS-återställning blivit allmänt använd.</p><p>En CSS-återställning tar alla grundläggande HTML-element med en given stil och ger en konsekvent stil i alla webbläsare. Dessa återställningar innebär vanligtvis att dimensioner, utfyllnad, marginaler eller ytterligare stilar som sänker dessa värden tas bort. Eftersom CSS-cascading fungerar från topp till botten (du kommer att lära dig 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/program/sohranenie-parolya-vkontakte-v-raznyh-brauzerah-kak-sohranit-stranicu-v.html">olika webbläsare</a> kommer att börja 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/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">styrkor</a>. En av de mest populära från 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 skapad av Nicholas Gallagher. Normalize.css fokuserar inte på att använda en hård återställning för alla kärnelement, 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 kunskap om vad du skulle vilja uppnå av stilarna.</p><h3>Kompatibilitet och testning över webbläsare</h3><p>Som nämnts tidigare renderar olika webbläsare element olika. Det är viktigt att inse vikten av kompatibilitet och testning över webbläsare. Webbplatser bör inte se exakt likadana ut i alla webbläsare, utan bör vara nära. Vilka webbläsare du vill stödja och i vilken utsträckning är ett beslut du måste fatta baserat på vad som är bäst för din webbplats.</p><p>Det finns flera saker att tänka på när du skriver CSS. Den goda nyheten är att du kan göra allt och det krävs bara lite tålamod för att bemästra det.</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 resurser för vår webbplats, så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>Med hjälp av en textredigerare, låt oss 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. Genom att använda 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: kollapsa; kantavstånd: 0; )</p><li>Vår main.css-fil börjar ta form, så låt oss koppla den till filen index.html. Öppna index.html i en textredigerare och lägg till ett element <link>V <head>, omedelbart efter elementet <title> .</li><li>Eftersom vi pekar på stilar genom elementet <link>lägg till ett rel-attribut med värdeformatmallen.</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 kolla vårt arbete och se hur vår HTML och CSS fungerar tillsammans. 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 stilkonferenssida med CSS-återställning

Demo och källkod

Nedan kan du se webbplatsen för Styles Conference i dess nuvarande skick, och även ladda ner källa webbplats för tillfället.

Sammanfattning

Så, allt är bra! Vi tog 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.

För att sammanfatta täckte vi 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 bekanta oss lite med semantiken.

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

Huvuddelen av innehållet som presenteras på Internet är webbsidor. Detta är historiskt sett den allra första typen av dokument avsett för placering i ett virtuellt nätverksutrymme, men det är fortfarande relevant och har praktiskt taget inga konkurrerande format. Hur är strukturen på webbsidor? Vilka webbutvecklingsverktyg används de för att skapa?

Vad är en webbsida?

"Lista de viktigaste delarna av en webbsida", säger examinatorn till oss i en datavetenskapslektion. Vad kan vi säga till honom som svar? Först och främst ska vi prata om vad en webbsida är i princip.

Enligt den allmänt accepterade definitionen 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 visning på datorskärmen med hjälp av lämplig typ av programvara med olika användbart innehåll - texter , länkar, grafik, videor, musik och etc. En webbsida är Textdokument. Motsvarande data 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.

Webbsidornas plats och roll i webbplatsernas 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 den kan innehålla länkar till dem i sin struktur. Således kan webbsidan kallas webbplatsens huvudkomponent när det gäller dess dominerande roll i att visa virtuellt innehåll inför användarna.

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 webbsidors märkningsspråk först dök upp - innehöll inte relevant innehåll. Framför användarens ögon fanns bara text och länkar.

Principen att använda hypertext

Så, en webbsida är ett dokument sammanställt på 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. Detta är omöjligt i en vanlig bok - det finns "enkel text". För att komma åt den önskade sidan måste läsaren göra flera vändningar, först läsa innehållsförteckningen eller fotnoterna. I hypertextläge görs det mesta av arbetet av datorn, med hjälp av information som återspeglas i HTML-elementen på sidan.

Om en lärare i datavetenskap säger till oss: "Lista de viktigaste delarna av en webbsida", så kan vi helt korrekt börja prata om komponenterna i motsvarande dokument som skapas med HTML-markeringsspråket. Låt oss därför först 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 av detta språk- det här är taggar. I de flesta fall är de parade - det finns en öppning och det finns en avslutande. De förstnämnda indikeras med endast vinkelparenteser. De andra liknar varandra, men före den andra parentesen finns 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 med små bokstäver. Detta är en standard som har etablerat sig bland IT-specialister. Webbläsaren kommer naturligtvis att känna igen HTML-kommandot i alla bokstäver, men webbutvecklare rekommenderas fortfarande att följa det markerade taggskrivschemat. Detta kommer att göra det lättare för till exempel andra specialister att förbättra webbsidan.

Attribut

Andra viktiga delar av HTML-språket är attribut. Med deras hjälp kan skaparen av en webbsida ställa in egenskaperna för innehållet - till exempel teckensnittshöjd, dess 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 ligger 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, en länk, en bild, en video eller annat multimediaelement.

Element på webbsidan

"Så lista de viktigaste delarna av en webbsida, äntligen!" - upprepar läraren. "Med glädje", 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 en funktion i HTML-språket: den önskade bilden på en webbsida kan visas olika sätt. Samtidigt kan de antingen vara likvärdiga när det gäller arbetskostnaderna för webbsidans skapare, eller kräva en annan mängd ansträngning och tid för implementeringen.

Webbsideselement: Header

Standardelement på en webbsida, hur överraskande det än kan låta, presenteras i mycket små kvantiteter. Faktum är att det bara finns två av dem - titeln och huvuddelen av dokumentet. Samtidigt kan var och en av dem ha en ganska komplex struktur.

Vad är specifikationerna för titeln? Den finns högst upp på webbsidan. HTML-koden som utgör rubriken är vanligtvis avsedd att "kryptera" endast texten, men vid behov kan även små grafiska inlägg placeras i motsvarande element. Och det ä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 sant. Webbsidestitlar är mycket viktiga ur synvinkeln av webbplatsindexering 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 rubrikinnehållet, sedan 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 specifik kodning. Hur kan du säkerställa att ditt webbdokument uppfyller detta kriterium? Väldigt enkelt. HTML-algoritmer måste placeras i dokumenthuvudstrukturen och instruera 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 webbdokumentet öppnas med BODY-taggen och stängs med motsvarande element, inklusive ett snedstreck. Mellan öppnings- och stängningstaggarna kan det dessutom finnas ett stort antal ytterligare kommandon för hypertextmarkeringsspråk. 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 motsvarande typer av innehåll har sina egna taggar. Strukturen i huvuddelen av ett webbdokument kan innehålla HTML-kommandon, som också används för att formatera texten - till exempel för att ge typsnittet en viss färg, storlek och andra egenskaper.

Låt oss titta på detaljerna för några vanliga HTML-taggar. Faktum är att de utgör huvudelementen på en webbsida.

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 gett några av dem ovan - särskilt de med hjälp av vilka webbläsaren läser rubrikerna på webbsidor 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 en extra tagg - FONT. I det här fallet kommer det att placeras inuti den som markerar gränserna för stycket - detta kommer att förhindra att HTML-kommandot som återspeglar typen av föredraget teckensnitt distribueras 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, specifika gränser, storlek och teckenfärg för texten i tabellen.

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

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

En vanlig tagg är FRAMESET. Med dess hjälp kan du dela upp utrymmet på en webbsida i flera områden - ramar. I var och en av dem kan du använda separata webbdokument. Det vill säga, ramar låter dig placera två eller flera sidor korrekt på en skärm samtidigt.

En berättelse om nyckelelementen på webbsidor och en efterföljande berättelse om hur man formaterar dem med HTML-språket - ungefär detta kommer att vara algoritmen för vårt svar på frågan som examinatorn ställde oss. Om han kom till oss och sa "lista huvudelementen på en webbsida", 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 för ett webbdokument, eller typerna av innehåll - text, bilder, tabeller, ramar, länkar som webbmastern genererar med hjälp av ett verktyg som HTML-språket .

Specifikt för webbutvecklingsverktyg

Utöver det som har sagts kan vi förklara att det finns ett stort antal taggar och attribut som tillhandahålls av HTML-standarder. Utöver HTML kan webbutvecklare använda ytterligare formateringsverktyg för hypertextdokument. Till exempel med använder 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. Utmaningarna som moderna utvecklare står inför kan vara ganska komplexa. Till exempel är det ibland nödvändigt att översätta webbsidor skrivna på ryska till engelska. I det här fallet kommer utvecklarens verktyg att vara mycket olika.

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

I laborationer 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 upprätta semantiska kopplingar mellan textelement på en datorskärm på ett sådant sätt att du enkelt kan övergå från ett element till ett annat. I praktiken, i hypertext, markeras vissa ord genom att understryka eller färglägga dem i en annan färg (hyperlänkar). Att markera ett ord indikerar en koppling mellan detta ord och något dokument där ämnet som är associerat med det markerade ordet diskuteras mer i detalj. Ett separat dokument, skrivet i HTML-format, kallas:

HTML-dokument;

Webbdokument;

Webbsida.

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

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

Ram (Ram) - en term som har två betydelser. Det första värdet är dokumentområdet med sina egna rullningslister. Den andra är en 0DNN0H-bild i en animerad grafikfil (ram).

Applet (Applet) - ett program som överförs till klientdatorn som en separat fil och startas när du tittar på en webbsida.

Skript (Manus) , eller script, är ett program som ingår i en webbsida för att utöka dess möjligheter. I vissa situationer visar webbläsaren Internet Explorer meddelandet: "Tillåt körning av skript på sidan?" I det här fallet menar vi skript.

CGI (Allmänning Inkörsport Gränssnitt) - ett allmänt namn för program som, som arbetar på en server, 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- HTML-språkdesign. 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 möjligheten att bygga in 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 gränserna för elementens verkan och skiljer element från varandra. I texten på en webbsida är taggar omgivna av vinkelparenteser< >, och sluttaggen följs alltid av ett snedstreck. Text inte mellan dessa parenteser (< >), är helt synlig när den visas i en webbläsare. Till exempel:

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

formaterar ett element

<Р>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 ett element. 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 specificera bildens storlek, närvaron och storleken på en ram runt bilden, etc.

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

Det här exemplet använder återigen en tagg som definierar början och slutet av ett stycke. Starttaggen innehåller dock ett align-attribut, 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. Dra in kapslade element (tab). Detta är återigen inte nödvändigt, men det kommer att göra ditt jobb mycket lättare.

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 (från engelska. hemsida: webb- "webb, nätverk" och webbplats- "plats", bokstavligen "plats, segment, del av nätverket") - en samling elektroniska dokument(filer) av en individ eller organisation i datornätverk, förenade 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. Ett protokoll utvecklades speciellt för direktåtkomst av klienter till webbplatser på servrar HTTP .

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

Programmet som visar en webbsida kallas en webbläsare.

Webbplatser skapas med hjälp av märkningsspråket HTML för hypertextdokument. HTML-tekniken består av att infoga kontrolltecken (taggar) 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 taggar.

HTML låter dig:

· formatera text;

· inkludera bilder och multimedia i dokumentet;

· Med detta språk skapas hypertextlänkar till andra webbsidor.

HTML används för att skapa filinformationsinnehåll 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 inkluderar kontrolltecken för textformatering i det skapade dokumentet. Som en sådan editor i Windows kan du använda standardapplikation"Anteckningsbok".

Vanligtvis har en webbsidesfil filändelsen .html eller .htm.

Dessutom finns det många tekniker där de grundläggande stegen för att skapa webbplatser redan är automatiserade; allt som återstår är att göra ändringar i enlighet med ditt ämne.

För att visa en HTML-sida anger du bara dess URL i adressfältet i din webbläsare och följer sedan hyperlänkarna. Men detta är just huvudproblemet - hur får man reda på sidadressen? 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- det här är en vanlig sida på startsida som innehåller länkar till andra webbplatser, indelade i kategorier ("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

En webbplats (engelsk webbplats, från webb - webb och webbplats - "plats") är en samling dokument från en privatperson eller organisation som är förenad 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 utvecklat för att klienter ska få direkt åtkomst till webbplatser på servrar. Webbplatser kallas annars 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 webbplats. 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 - färdiggjord mjukvarupaket för att lösa webbplatsproblem. 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. Exakt 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änds flera domäner av 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å fall där separata domäner allokeras för olika länder eller språk. Till exempel är google.ru och google.fr logiskt sett Google-webbplatser 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 innehåller adressen en tilde och webbplatsens namn efter värden: example.com/~my-site-name/.




Topp