Vad är en webbsida? Det är ett dokument skrivet i Hypertext Markup Language (HTML) som kan visas med hjälp av en webbläsare. Webbsidan nås genom att ange URL:en.

En webbsida kan innehålla text, grafik och hyperlänkar till andra sidor och filer.

Hur man öppnar en webbsida

För att visa en webbsida krävs en webbläsare (t.ex. Internet Explorer, Edge, Safari, Firefox eller Chrome). I din webbläsare kan du öppna en webbsida genom att skriva adressfält URL. Om du till exempel skriver "https://www.computerhope.com/esd.htm" kommer ESD Computer Hope-sidan upp.

Om du inte känner till webbadressen till webbplatsen du vill besöka kan du använda sökmotor för att hitta en webbsida eller använda webbplatssökning.

När skapades den första webbsidan?

Den första webbsidan skapades på CERN av Tim Berners-Lee den 6 augusti 1991. Innan dess kan du besöka och se den första webbplatsen och den första webbsidan på http://info.cern.ch/.

Vad är skillnaden mellan en webbplats och en webbsida?

En webbplats är en plats som innehåller mer än en webbsida. Till exempel är vår resurs en webbplats som innehåller tusentals olika webbsidor, inklusive den du läser nu:

I URL-exemplet ovan är "url.htm" webbsidan, det är alltid den sista delen av URL:en. För webbadresser som inte slutar med .htm, .html, .php, .cgi, .pl eller annat filtillägg, laddar servern webbsidan index.htm som standard. Till exempel finns det ingen webbsida för kontaktsidans URL. I det här fallet laddas standardindexfilen från katalogen /contact.

Exempel på webbsidor

Vi har redan nämnt att webbläsare används för att visa webbsidor. En webbsida består av flera element, inklusive CSS, bilder och JavaScript. Brödtexten på webbsidan skapas med använder HTML. Den här koden kan skapas med hjälp av en HTML-redigerare, skriven av en människa eller genereras med skript på serversidan. Vanligtvis slutar en webbsida skapad av människor med tillägget .htm eller .html. Till exempel har den här sidan filnamnet "webpage.htm". Sidor som genereras av skriptet kan sluta på .cgi, .php, .pl, etc.

Vilka element innehåller en webbsida?

Nedan är en uppdelning av huvudelementen så att webbdesigners kan förstå vad den logiska strukturen på en webbsida är:

Webbplatsens titel, logotyp eller företagsnamn finns nästan alltid i det övre vänstra hörnet på varje webbsida. Det är också en bra idé att använda en slogan eller kort beskrivning sidor för att ge nya besökare en uppfattning om webbplatsen. Detta webbsideelement är vanligtvis en länk som leder till startsidan;

Sökfältet låter besökare snabbt hitta en webbsida. Det bör finnas på varje sida;

Navigeringsfältet eller menyn finns vanligtvis längst upp eller till vänster på varje webbsida. Den bör innehålla länkar till var och en av de viktigaste delarna av webbplatsen;

Bannerannonser kan visas på olika ställen på en webbsida. De visas vanligtvis överst, till vänster, till höger eller längst ner på en webbsida, eller ingår i huvudinnehållet;

Sociala knappar tillåter besökare att dela en länk till en webbsida på sociala nätverkssajter;

På skapade webbsidor hjälper brödsmulor besökaren att förstå var han är, samt att flytta till andra delar av webbplatsen;

Titeln ska finnas överst på varje webbsida. Den skapas med HTML-taggen.

Det inledande stycket är ett av de viktigaste delarna av en webbsida. Det bör intressera besökaren att läsa innehållet på webbsidan. Ett sätt att fånga besökarnas uppmärksamhet är att infoga en bild bredvid det inledande stycket;

Varje webbsida bör delas upp i rubriker på lägre nivå som gör att besökaren enkelt kan skanna innehållet och hitta det som är mest intressant för dem på sidan. När du skapar en webbsida kan detta göras med HTML-taggar...;

Det är en bra idé att ge besökarna en länk eller knapp som omdirigerar till formuläret. respons så att de kan berätta om det var användbart för dem denna webbsida eller inte;

Ytterligare information och verktyg, såsom en knapp för att skriva ut sidan, kan också vara användbara för användare;

Sidfoten ska innehålla Ytterligare information, vilket är viktigt för företaget eller webbplatsen. Samt länkar till andra webbsidor;

Upphovsrätt och eventuella juridiska eller konfidentiella meddelanden måste också publiceras på alla webbsidor. I grunderna för webbdesign kan detta element inte bara länka till relevant juridisk information. Det indikerar också att besökare har nått slutet av webbsidan;

En Top of Page-knapp kan hjälpa besökare att snabbt navigera tillbaka till toppen av en webbsida för att komma åt menylänkar.

Vad kan användare göra på en webbsida?

De flesta webbsidor har intressanta hyperlänkar som du klickar på för att hitta mer information. Du kan också lyssna på musik, titta på videor, göra köp, chatta och mycket mer.

Innan vi börjar vår resa genom HTML- och CSS-webbplatsbyggnadslektioner ä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) eller cascading style sheets är ett presentationsspråk skapat för design utseende 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 från till ) och stycken (definierade som

); Du kan inkludera element i listan . . . 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 symbolen ; 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 ge ytterligare information om ett element. 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 Sublim text. Gratis alternativ inkluderar ä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 .

Dokumenttypsdeklarationen eller finns 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 den senaste versionen av HTML blir vår dokumenttyp helt enkelt . Efter detta kommer ett element som indikerar början av dokumentet.

Inuti elementet definierar övre del dokument, inklusive olika metadata (medföljande information om sidan). Innehållet inuti elementet 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 HTML-dokumentstruktur

Denna kod visar dokumentet, som börjar med dokumenttypsdeklarationen, , sedan omedelbart följt av . Inuti finns element och . Elementet innehåller sidans kodning genom taggen och dokumentets titel genom elementet. Ett element inkluderar en titel genom elementet och ett stycke med text genom . Eftersom både rubriken och stycket är kapslade i elementet är de synliga på webbsidan.

När ett element är inuti ett annat element, även känt som kapslade, är det en bra idé att dra in det för att hålla dokumentstrukturen välorganiserad och läsbar. I den föregående koden är båda elementen både kapslade och förskjutna inom . Indragningsstrukturen för element fortsätter med nya element inuti och .

Självstängande element

I det föregående exemplet var elementet den enda taggen 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. är ett av dessa element. Innehållet i elementet i exemplet tilldelas med hjälp av charset-attributet och ett värde. Andra typiska självstängande element inkluderar:

• 
  

Följande struktur, gjord med hjälp av en dokumenttypsdeklaration och elementen , och , är ganska vanlig. 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.

Kodvalidering

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å praktik

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!

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.

Grundläggande CSS-villkor

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.

Väljare

När du lägger till element på en webbsida kan de stylas med använder 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.

Väljare är vanligtvis associerade med ett attributvärde, till exempel ett id- eller klassvärde, eller ett elementnamn, som eller .

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

P(...)

Egenskaper

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

P ( färg: ...; teckenstorlek: ...; )

Värderingar

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

Och ställ in färgegenskapsvärdet till orange och egenskapsvärdet för teckenstorlek till 16 pixlar.

P (färg: orange; teckenstorlek: 16px; )

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.

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.

Ris. 1.03. CSS-syntaxstrukturen inkluderar väljare, egenskaper och värden

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.

Arbeta med väljare

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 olika typer väljare. Vi börjar med de mest grundläggande väljare: typ, klass och identifierare.

Typväljare

Typväljare riktar in sig på element efter deras typ. Till exempel, om vi vill rikta in oss på alla element bör vi använda div-väljaren. Följande kod visar typväljaren för elementen, såväl som motsvarande HTML.

Div(...)

... ...

Klasser

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.

Klasser låter dig tillämpa samma stilar på olika element samtidigt genom att använda samma klassattributvärde för flera element.

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 och

Grymt bra(...)

...

Identifierare

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.

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.

I CSS representeras identifierare av en hash-symbol framför, följt av värdet på id-attributet. Här kommer id bara att välja det element som innehåller id-attributet med värdet shayhowe.

#shayhowe (...)

...

Ytterligare väljare

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.

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.

Ansluter CSS

För att få vår CSS att prata med vår HTML måste vi peka på CSS-filen från HTML. En god praxis är att inkludera alla våra stilar i en extern fil, pekad på i ett element i 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.

Andra alternativ för att lägga till CSS

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.

För att skapa vår externa stilmall vill vi återigen använda vår valda textredigerare för att skapa en ny textfil med tillägget .css. Vår CSS-fil bör sparas i samma mapp eller undermapp som vår HTML-fil.

Inuti elementet används elementet, vilket 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.

I följande exempel på HTML-dokument pekar elementet på en extern stilmall.

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.

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å det här ögonblicket 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.

Använder CSS-återställning

Varje webbläsare har sina egna standardstilar för olika element. Hur Google Chrome visar rubriker, stycken, listor och så vidare, kan skilja sig från hur Internet Explorer gör det. För att säkerställa kompatibilitet över webbläsare har CSS-återställning blivit allmänt använd.

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. olika webbläsare kommer att börja arbeta från en gemensam referenspunkt.

Det finns ett gäng olika CSS-återställningar tillgängliga att tillämpa, de har alla sina egna styrkor. En av de mest populära från Eric Meyer, hans CSS-återställning är anpassad för att inkludera nya HTML5-element.

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.

Kompatibilitet och testning över webbläsare

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.

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å praktik

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.

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.

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.

Genom att titta på filen index.html i webbläsaren kan vi se att elementen och

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.

/* 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; )

Vår main.css-fil börjar ta form, så låt oss koppla den till filen index.html. Öppna index.html i textredigerare och lägg till elementet till , direkt efter elementet.

Eftersom vi pekar på stilar genom elementet, lägg till ett rel-attribut med value stylesheet .

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.

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 Styles Conference i dess nuvarande tillstånd, samt ladda ner webbplatsens aktuella källkod.

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

Syfte med arbetet: att 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 och förvärv av 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 överfört till klientdatorn i formuläret 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 attribut specificera teckensnittsfärg och storlek, textstyckejustering, etc. Om elementet innehåller en bild kan attributen specificera bildens storlek, närvaron och storleken på en ram runt bilden, etc.

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:

Några användbar information måste vara 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 med ny linje. Dra in kapslade element (tab). Detta är återigen inte nödvändigt, men det kommer att göra ditt jobb mycket lättare.

När du laddar ner ett dokument från WWW, visas dess text i ditt webbläsarfönster i en perfekt formaterad form som är lätt att se. Det betyder att WEB-sidor inte är vanlig text, utan även innehåller en del hjälpinformation för att styra presentationen av dokumentet i ditt webbläsarfönster. Eftersom det vid utveckling av ett dokument inte är klart på vilken typ av dator användaren kommer att se det, kan WEB-sidor inte förberedas och lagras i ett format utvecklat för en specifik datorplattform, till exempel i Microsoft Word-formatet för Windows XP. För att en användare som arbetar på vilken typ av dator som helst ska se ett dokument formaterat därefter, används HTML-språket som utvecklats speciellt för detta ändamål.

Vad är HTML egentligen?

Om du arbetar med en webbläsare väljer du menykommandot Visa - Visa HTML-kod (Visa - Källa). Ett fönster visas på displayen med den första koden för denna sida i HTML.

Tryck antingen på CTRL+U

Utseendet på webbsidor på Internet förändras ofta. Men för oss i nuläget är detta inte signifikant.

HTML - HyperText Markup Language

HTML - HyperText Markup Language är en ganska vanlig uppsättning kommandon som beskriver strukturen i ett dokument. Detta uppmärkningsspråk låter dig markera enskilda logiska delar i ett dokument - rubriker, stycken, tabeller, listor etc., men specificerar inte specifika formateringsattribut. Den specifika typen av formatering bestäms av webbläsaren själv när du läser ett dokument, och webbläsaren tillhandahåller det specifikt bättre skärm WEB-dokument på din skärm.

Som tidigare nämnts kan du skapa WEB-sidor med hjälp av speciella redigeringsprogram som automatiskt genererar HTML-kod, som inte kräver kunskap om märkningsspråk. Men dessa program är ofta begränsade i sina möjligheter, innehåller fel och producerar ofta dålig HTML-kod som inte fungerar på alla plattformar. Därför, om du på allvar vill behärska WEB-design och förstå principerna för att skapa WEB-dokument, kan du inte göra utan att känna till grunderna i HTML-språket, särskilt eftersom det inte alls är svårt att skapa WEB-sidor på det. Kanske är det till och med enklare än att behärska ett program för att skapa HTML-sidor.

HTML-språk

HTML-språket finns i flera varianter eller specifikationer. Precis som programvaruversioner är specifikationerna numrerade: 2.0, 3.0, 3.2, 4.0. Varje efterföljande specifikation representerar en förlängning och tillägg till den föregående. Vi kommer att använda den senares konstruktioner HTML-specifikationer 4.0 som stöds senaste versionerna vanligaste webbläsarna.

Dokumentet i HTML-kodfönstret är ett textdokument i ett speciellt format. Alla filer i detta format har HTML-tillägg(.html) eller HTM (.htm). Ett HTML-dokument blandar vanlig text med markeringselement inom vinkelparenteser< и >, Till exempel, , , , . Dessa uppmärkningselement kallas taggar. Taggar kan vara enkla, öppna och stänga och bestå av efterföljande delar i en viss ordning:

• vänster vinkelfäste.

Sålunda består öppningstaggen, som visas i början av HTML-dokumentet och markerar dess början, av HTML-namnet och två vinkelparenteser< >, och taggen som finns i slutet av WEB-dokumentet, förutom de angivna delarna, innehåller också ett snedstreck / tecken, vilket betyder en avslutande tagg och indikerar slutet på dokumentet. Taggen betyder början på koden för skriptprogrammet som är integrerat i dokumentet. Denna tagg innehåller, förutom skriptnamnet, ett språkattribut med värdet "vbscript", vilket betyder att skriptet är skrivet på vbscript-språket.

Endast latinska tecken kan användas i taggar, och alla tecken kan användas i attributvärden. Om till exempel kyrilliska tecken används som attributvärden måste de omges av citattecken, till exempel namn="Sektion 1".

HTML-språket skiljer inte mellan stora och små bokstäver, så taggarna och är likvärdiga. Men 2010 rådde w3c-konsortiet, som tog på sig ansvaret att ställa saker och ting i ordning inom området för HTML-språkspecifikationen, i sin senaste version obevekligt att skriva taggar med små tecken, och med andra ord betydande villkor. Därför kommer vi vidare att använda skrivtaggar med små bokstäver.

Taggar som html-bas

De flesta taggar är parade: den inledande taggen följs av en motsvarande avslutande tagg, och mellan dem innehåller text eller andra taggar, till exempel:

Online bokhandel Three Steps

I sådana fall bildar två taggar och den del av dokumentet som är innesluten mellan dem ett block som kallas HTML-element. Vissa taggar är till exempel singel och har ingen avslutande tagg. Sådana taggar är i sig HTML-element.

De flesta taggar kan ha ett eller flera attribut – egenskaper som ger ytterligare information om hur webbläsaren ska behandla den aktuella taggen. Men det kanske inte finns några attribut alls. Ett taggattribut består av ett namn, till exempel, align, ett likhetstecken = och ett värde, som anges av en teckensträng, till exempel "center": align="center". Attributvärden är vanligtvis omgivna av citattecken. Men om dessa värden bara använder latinska tecken, siffror och bindestreck, kan citattecken utelämnas, till exempel: align=center. Men att utelämna citattecken rekommenderas absolut inte på grund av ett antal omständigheter relaterade till den kommande integrationen av HTML med JavaScript och språk. Utveckla därför vanan att omedelbart skriva attribut inom citattecken.

HTML-dokumentstruktur

Varje HTML-dokument har en specifik struktur, som ser ut så här:

…

Strukturen i ett HTML-dokument innehåller följande väsentliga element:

• taggar och , som markerar början och slutet av dokumentet;
• rubrik avgränsad av och ;
• kropp avgränsad av taggar...

Titeln, avgränsad av taggarna och, använder taggarna ... för att definiera titeln på dokumentet, som ska beskriva dess innehåll och vanligtvis innehåller mindre än 5-6 ord. Den här titeln visas av webbläsare i titelraden i programmets arbetsfönster, och botar som sammanställer index för sökmotorer identifierar dokumentet med dess titel.

Utöver elementet ... kan rubriken innehålla element ..., till exempel för att ange information om dokumentet. Den inledande taggen innehåller namn=värde-par som beskriver dokumentets egenskaper, till exempel typen av dokument, dess kryptering, författarskap, sökordslista etc. Dessa data används även av sökmotorer vid indexering av dokument.

HTML (HyperText Markup Language) är ett speciellt formateringsspråk textdokument(det kallas även dokumentmarkeringsspråk - WWW document viewer). HTML är en ganska enkel uppsättning kommandon som beskriver strukturen i ett dokument. HTML låter dig markera enskilda logiska delar i texten (rubriker, stycken, listor etc.), placera ett separat förberett fotografi eller bild på en webbsida och organisera länkar på sidan för kommunikation med andra dokument.

HTML specificerar inte specifika och exakta dokumentformateringsattribut som till exempel Microsoft Word gör. Den specifika typen av dokument bestäms i slutändan endast av programmet - webbläsare på din dator. Behovet av just ett sådant tillvägagångssätt är förknippat med heterogeniteten hos hårdvara och programvara datorer anslutna till Internet. HTML är inte heller ett programmeringsspråk, men webbsidor kan innehålla inbäddade program - skript på Javascript-språk Och Visual Basic Skript och program- applets på Java-språk.

Ur synvinkel Windows-användare, En webbsida är helt enkelt en *.htm- eller *.html-fil som finns på en internetserver, i lokalt nätverk eller på din maskins hårddisk.

Kom ihåg att HTML inte är ett programmeringsspråk, det är endast avsett för att markera dokument. De där. i huvudsak skapande HTML-sida, du redigerar helt enkelt text med taggar på ungefär samma sätt som i en vanlig textredigerare. Varje tagg har sin egen egenskap, men de är alla inneslutna mellan vinkelparenteser "", till exempel, , .

Alla taggar i HTML är uppdelade i två typer - parade och oparade. Parade taggar är de vars öppningstagg kräver en avslutande tagg. Avslutande taggar i HTML betecknas med ett snedstreck och skrivs så här. Oparade taggar kräver ingen avslutande tagg. Ett exempel på sådana taggar är tagg för brytning till nästa rad
. Det finns också obligatoriska taggar, som måste användas på alla sidor, och valfria taggar, som används efter önskemål.