Sidmallskod. Med bred ram. Valfria taggar i HTML5

Lektionen "Hur man skapar en HTML-sida" ägnas åt layouten på en mycket enkel webbsida. Du kommer att lära dig hur du korrekt sparar en HTML-fil, ställer in nödvändig kodning för att korrekt visa en HTML-sida i en webbläsare och placerar texter, listor och bilder på en webbsida.

Efter att ha studerat den här lektionen kommer du redan att lära dig hur du skapar din första webbsida, som i figur 1.

Bild 1

1. HTML-dokumentstruktur

HTML-filer har tillägget .htm eller .html.

Taggar är vanligtvis parade: start- och sluttaggar. Inledande -<>, final, Till exempel

Och

En parad tagg kallas också behållare .

Vissa taggar har inte ett obligatoriskt taggpar, denna tagg kallas enda . En sådan tagg stängs genom att till exempel skriva ett höger snedstreck före den avslutande vinkelparentesen

Strukturen för HTML-dokumentet ser ut så här (Figur 2).

figur 2

Förklaringar till listningen i figur 2

På den första raden betyder DOCTYPE-konstruktionen en av webbsideslayoutstandarderna.

Mellan taggar Och innehåller rubrikdelen. Den innehåller en design </b> Och <b>. Detta namn visas i webbläsarens namnlist när ett dokument laddas (Figur 3).

Figur 3

Spela in betyder den kyrilliska kodningen så att bokstäverna visas korrekt i webbläsaren. Om kodningen inte är specificerad kan teckensnitt ibland visas enligt följande (Figur 4)

Figur 4

Samma sida efter att ha infogat kodningen (Figur 5)

Bild 5

Obs: istället för kodning charset="windows-1251" du kan använda kodning charset=" utf -8" , som låter dig skapa flerspråkiga webbplatser, eftersom alla karaktärer som finns i världen finns i den. I det här fallet, i Anteckningsblock++ är nödvändigt innan layout och sparahtml- välj fil från toppmenyn Kodningar - Koda till UTF -8 utan BOM (UTF-8 utan stycklista)

Denna information räcker för att skapa det första dokumentet.

Övning 1

1. Skapa en mapp, namnge den minhus. Namnen på alla mappar och filer måste skapas med latinska gemener, Ryska namn kan inte användas. Håll namn korta och meningsfulla.

Vi kommer att skriva webbsideskoden i Anteckningar. Det är bättre att inte använda anteckningsblocket som följer med Windows, utan ett mer "avancerat" sådant, till exempel Notepad++. Distribution Anteckningar++ finns i mappen CD/distr.

2. Öppna Notepad++. Se till att ANSI-kodningen är inställd, för att göra detta i menyn i objektet Kodningar, ställ in position Koda till ANSI.

3. Skriv in koden från listan i figur 2 i Notepad++.

Koden i listan i figur 2 kommer att fungera som en mall för oss i framtiden så att vi inte behöver skriva ut strukturen i HTML-dokumentet varje gång. Kopiera DOCTYPE-konstruktionen härifrån (du behöver inte memorera eller memorera den).

4. Spara filen som mall.html i mappen mitt hus, när du är på fältet Filtyp Installera Alla typer(Figur 6), annars öppnas inte din webbsida i webbläsaren.

Bild 6

5. Kör efter att du har sparat mall. html dubbelklicka. Som ett resultat kommer din fil att se ut så här (Figur 7).

Bild 7

Om du inte får resultatet som i figuren ovan betyder det att det med största sannolikhet finns ett fel i koden. Ett fel tecken räcker och webbsidan kommer inte att visas korrekt. Kontrollera koden igen med listan i figur 2.

6. Inuti mappen mitt hus skapa en mapp offentlig_ html. Detta namn är vanligtvis den mapp som webbplatsen lagras i när den är värd på riktig värd (denna mapp kan också kallas www).

7. Spara filen mall. html i mappen offentlig_ html under ett nytt namn huvud. html.

8. Från en mapp CD/ html_css_1öppna filen text_main.txt i Notepad++, och öppna även filen som sparats under namnet huvud. html

9. Kopiera all text från filen text_main.txt och klistra in den i filen huvud. html istället för frasen "Webbsidesinnehåll". I taggen skriv ordet "Hem". Så här <b><title>Hem.

10. Spara ändringarna och förhandsgranska filen huvud. html i webbläsaren. Du kommer att se oformaterad text. Webbläsaren gör inte ens radbrytningar som finns i källtexten (Figur 8).

Figur 8

2. Formateringwebb-sidor taggadeHTML

Denna handledning om hur man skapar en HTML-sida täcker de grundläggande taggar som används för att markera en webbsida.

Taggar är utformade för att formatera texten på en webbsida. Listan över taggar kan ses mer detaljerat i mappen CD/KatalogHTML i katalogen html401_en.chm(i det övre menyalternativet element).

Låt oss titta på några av taggarna.

Element h 1, h 2, h 3, h 4, h 5, h 6

Struktureringen av dokumentets brödtext görs inuti elementet < kropp> med hjälp av rubriker specificerade av elementen h1, h2, h3, h4, h5, h6.

Rubrikelement är ihopparade, så de måste ha en öppning < h1> och stängning h1> taggar.

HTML har sex rubriknivåer: h1 (överst), h2, h3, h4, h5 och h6 (längst ner). Funktionaliteten hos rubrikelement liknar vanliga rubrikstilar i textredigerare.

Effekterna av dessa sex taggar visas i figurerna nedan. På en bild källa(Figur 9), å andra sidan - vyn i webbläsaren (Figur 10).

Bild 9

Bild 10

Dela in text i stycken

Märka < sid> anger början av ett stycke och infogar ett mellanslag överst i stycket - ett indrag för att skilja det här stycket från det föregående.

Tvinga fram linjebrytning

Märka
låter dig radbryta den återstående texten i ett stycke till nästa rad. Detta är en oparad tagg och, till skillnad från paragraftaggen, ökar inte avståndet mellan raderna.

Övning 2

1. Formatera titeln "Katalog över arkitektoniska projekt" med taggar

Och

.

2. Formatera titeln "Projekt för ditt framtida hem" med taggar

Och

.

3. Formatera rubrikerna "Husprojekt" och "Husområden" med taggar

Och

.

4. Dela in huvudtexten i stycken med hjälp av en tagg

Inuti de två första styckena använder du taggen
att bryta en linje. Som ett resultat bör din kod se ut så här (Figur 11).

5. Se resultatet i en webbläsare.

Bild 11

Punktlista och numrerade listor

Med hjälp av HTML-verktyg kan du skapa vilka listor som helst: numrerade (numeriska och alfabetiska) och punktlista med olika typer markörer.

Märka < ul>…ul> genererar en punktlista.

Märka < ol>…ol> genererar en numrerad lista.

Enstaka listobjekt som i

    , och i
      bildas med hjälp av en tagg < li> .

      Övning 3

      1. Skapa en numrerad lista under rubriken "Husprojekt."

      2. Skapa en punktlista under rubriken "Husområden." Din kod kommer att se ut så här (Figur 12).

      Bild 12

      3. Visa sidan i en webbläsare.

      Listor kan kapslas inuti varandra med hjälp av olika markörer.

      Ett exempel på en kapslad lista visas i fig. 13

      Övning 4

      1. Implementera koden som visas i figur 13 i en ny fil.
      2. Spara filen i en mapp mitt hus under namnet spisok_ vlozh. html. Resultatet i fig. 13

      Figur 13. Exempel på en kapslad lista

      Teckensnittsstilar

      Märka - låter dig visa text i fet stil.

      Märka - låter dig visa text i kursiv stil.

      Märka - visar understruken text.

      Till exempel:

      I detta fall kommer texten att visas fet kursiv stil , men inte understruken.

      Och i det här fallet kommer texten att skrivas fet understruken kursiv stil .

      Nedskrevna och upphöjda

      Märka < sub> Och sub> låter dig sänka text en halv rad under normal text.

      Märka < supera> Och supera> låter dig höja texten en halv rad över normal text. Text placerad mellan dessa taggar kommer att visas i ett mindre teckensnitt än vanlig text.

      Övning 5

      1. Formatera namnet myhouse.ru i fetstil i första stycket (Figur 14).

      Bild 14

      2. Formatera frasen "Mer än 95 % av projekten" med understruken kursiv stil i andra stycket (Figur 15).

      Bild 15

      3. Formatera upphöjda texter där kvadratmeter används (Figur 16).

      Bild 16

      4. Spara filen. Visa via webbläsare. Webbsidan ska se ut så här (Figur 17).

      Bild 17

      3. Infoga bilder

      I artikeln Hur man skapar en HTML-sida kommer vi att titta på hur man placerar bilder på en webbsida.

      Taggen används för att infoga bilder . Det obligatoriska attributet för denna tagg är src(från engelska SouRCe - källa). Det bestämmer vägen till grafisk fil, vars bild ska visas på webbsidan.

      För att infoga en bild, använd kommandot

      Till exempel: " bild1.jpg" alt="Bild" /> !}

      Alt-attributet är nödvändigt så att när du tittar på en webbsida i inaktiverat bildläge, i stället för den saknade bilden kommer det att finnas en inskription som är skriven i alt-attributet. Det rekommenderas också att alltid använda alt-texter, eftersom sökmotorer analyserar dem som nyckelord när de söker efter bilder.

      Grafikfiler kan vara i formatet jpg, gif, png och alltid i färgmodellenRGB.

      Övning 6

      1. Efter listan över husområden, infoga bilder av stugprojekt på webbsidan projekt_1.jpg Och projekt_2.jpg från mappen CD/html_css_1 . För att göra detta, kopiera först dessa två bilder till mappen där main.html-filen finns. Bildinsättningskoden kommer att se ut så här (Figur 18).

      Bild 18

      2. Se resultatet i webbläsaren (Figur 19).

      Bild 19

      I grund och botten principen att använda taggarHTMLbör vara tydlig. De används enligt samma princip: om taggen är behållare, så finns det en öppnings- och stängningsetikett. Om taggen är singel finns det ingen avslutande tagg, i det här fallet skrivs det högra snedstrecket före den avslutande vinkelparentesen, till exempel< br/>. Oavsett om taggen är container eller singel kan du alltid titta i specifikationenhtml401_ru.chm i avsnittet "element".

      4. Adressering inom webbplatsen

      I vår första lektion, Hur man skapar en HTML-sida, kommer vi att utforska koncepten för adressering i HTML.

      Låt oss överväga att adressera alternativ när du behöver placera bilder i en html-fil som kan finnas i olika mappar på webbplatsen.

      Det finns två typer av adressering:

      • absolut;
      • relativ.

      Absolut tilltalande (med namn på datorenheter) inte använd(Figur 20)

      Bild 20

      Begagnade relativ adressering - adressering i ett dokument eller en uppsättning dokument på en server. För att referera till en fil på en webbplats måste du tala om för webbläsaren vilken väg den ska ta för att komma till önskad fil.

      Exempel 1

      Bilden finns i samma mapp som HTML-dokumentet (Figur 21). Det vill säga att bilden och HTML-filen är på samma nivå i filsystem och HTML-dokumentet kan omedelbart bifoga bilden. I det här fallet kommer att infoga en bild på en webbsida se ut så här.

      / >

      Bild 21

      Praktisk uppgift7

      Implementera exempel 1 (skapa en mapp, en doc.html-fil, ta vilken bild som helst). Bild

      Exempel 2

      Bild bild. jpg finns i mappen mapp_1 . HTML-dokumentet finns utanför folder_1. De där. I webbplatsens filsystem är HTML-dokumentet placerat en nivå högre än bilden (Figur 22). Du måste ange mappen folder_1 och sedan bifoga bilden

      Bild 22

      Praktisk uppgift8

      Implementera exempel 2 (skapa en mapp, en doc.html-fil, ta valfri bild). Bilden måste infogas på webbsidan doc.html.

      Exempel 3

      Bild bild. jpg finns i mappen mapp_1 , som i sin tur ligger i mappen mapp_2 . HTML-dokumentet finns utanför dessa mappar (Figur 23). HTML-dokumentet är alltså två nivåer högre än bilden. Nödvändig:

      • ange mappen folder_2,
      • ange sedan mappen folder_1,
      • bifoga sedan bilden.

      Bild 23

      Praktisk uppgift9

      Implementera exempel 3 (skapa mappar, doc.html-fil, ta valfri bild). Bilden måste infogas på webbsidan doc.html.

      Exempel 4

      mapp_1 . Bilden finns utanför folder_1. De där. HTML-dokumentet är placerat en nivå lägre än bilden (Figur 24). Du måste avsluta folder_1 och sedan bifoga bilden. Att lämna en mapp indikeras av konstruktionen ../ (två punkter och ett snedstreck till höger).

      / >

      Bild 24

      Praktisk uppgift10

      Implementera exempel 4 (skapa en mapp, en doc.html-fil, ta vilken bild som helst). Bilden måste infogas på webbsidan doc.html.

      Exempel 5

      HTML-dokumentet finns i mappen mapp_1 , som i sin tur finns i mappen mapp_2 . Bilden är utanför dessa mappar. Således är HTML-dokumentet placerat två nivåer lägre än bilden (Figur 25). Nödvändig:

      • avsluta mapp mapp_1,
      • avsluta mapp mapp_2,
      • bifoga en bild.

      Eftersom du måste avsluta två gånger, designen ../ upprepas två gånger.

      / >

      Bild 25

      Övning 11

      Implementera exempel 5 (skapa mappar, doc.html-fil, ta valfri bild). Bilden måste infogas på webbsidan doc.html.

      Exempel 6 (Figur 26)

      Nödvändig:

      • avsluta mapp mapp_1,
      • avsluta mapp mapp_2,
      • gå till mappen folder_3,
      • gå till mappen folder_4,
      • bifoga bild pic.jpg

      Bild 26

      Övning 12

      Implementera exempel 6 (skapa mappar, doc.html-fil, ta valfri bild). Bild

      måste infogas på webbsidan doc.html.

      Exempel 7 (Figur 27)

      Nödvändig:

      • avsluta mapp mapp_1,
      • avsluta mapp mapp_2,
      • avsluta mapp mapp_3,
      • ange mappen folder_4,
      • bifoga bild pic.jpg.

      Eftersom du måste avsluta tre gånger, designen ../ upprepas tre gånger.

      Bild 27

      Övning 13

      Implementera exempel 7 (skapa mappar, doc.html-fil, ta valfri bild). Bild

      måste infogas på webbsidan doc.html.

      Således, oavsett hur många gånger du behöver gå ut, lägger vi konstruktionen ../ så många gånger, och om vi går in, listar vi namnen på de mappar som stött på längs vägen.

      Övning 14

      1. Skapa ett html-dokument och infoga en bild i det så att sökvägen till bilden blir som följer.

      " ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

      2. Utveckla ett eget exempel på att infoga en bild i ett html-dokument så att den innehåller och utgång från mappar och ingång i mappar. Exemplet bör skilja sig från alla exemplen ovan.

      Som ett resultat av att slutföra det här ämnet bör du skapa följande filer:

      • mall.html
      • main.html
      • spisok_vlozh.html
      • inuti mappenmitt husdet borde finnas en mappoffentlig_ htmlmed filer från den framtida webbplatsen
      • sju exempel på relativ adressering och två exempel som kontroll från praktisk uppgift 14

      Många språk har uppfunnits, men HTML är ett av de speciella och mest populära språken. Många andra nyckelutvecklingar inom programmering är förknippade med det. Mycket blir möjligt när utvecklarens sinne har kunskap om märkningsspråket - HyperText Markup Language (HTML).

      I grund och botten är det inget komplicerat i HTML, och på några minuter kommer alla som är långt ifrån programmering och Internet att kunna skapa en HTML-sida i Anteckningar. Ett exempel värt att uppmärksammas, enkelhet som verkligen är tillgänglig för alla.

      allmän beskrivning

      En HTML-fil är en sida på sajten, även om detta kan argumenteras, men det faktum att en fil utgör en sida är klart till att börja med.

      En HTML-fil börjar med ett DOCTYPE-huvud, vilket indikerar att filtypen är HTML. Alla sidelement (taggar) anges inom vinkelparenteser. Varje par ("<» и «>") innehåller en HTML-tagg. Vanligtvis kommer HTML-taggar i par, det vill säga för varje "tagg" finns det en "/tag". Båda är inneslutna i vinkelfästen. Det finns enstaka taggar, varav den mest populära är "br/" - övergång till nästa rad.

      Den största taggen i filen är själva HTML-koden, som bara innehåller två taggar: HEAD och BODY. I den första görs olika beskrivningar, länkar till andra filer som behövs på sidan anges, vilka kan finnas PHP-skript och JavaScript. Den andra registrerar sidans innehåll. Även i form av taggar och skript.

      Enkel HTML-sida

      Ett exempel på att skapa en sådan sida ges nedan i artikeln. Låt oss titta noga på det.

      HUVUDSektion

      Huvudsyfte - allmän beskrivning sidor och allmänna manus, även om det senare är ett ganska relativt begrepp. Vanligtvis är det bara två saker som ges stor betydelse här:

      • nyckelord och sidbeskrivning;
      • länkar till andra filer (*.css och *.js).

      För att visa sidinnehåll är innehållet i detta avsnitt endast indirekt viktigt, eftersom det indikerar: någonstans i andra filer finns det CSS-regler för taggar och skript på andra språk.

      En HTML-sida har en som visas när besökaren flyttar musen till fliken där sidan är öppen. Detta viktig poäng, eftersom det gör sidan betydligt mer presentabel, lättare att säga, signerad med läsbar text.

      META-taggar är viktiga i internetprogrammering i allmänhet, men när du behöver skapa en HTML-sida i Notepad är det inte tillrådligt att belamra exemplet med onödiga konstruktioner.

      Om scripting bör närma sig när kunskap om HTML är etablerad, bör Cascading Style Sheets åtgärdas omedelbart. CSS-filer innehåller i synnerhet designregler HTML-taggar.

      KROPP sektion

      I själva verket är HTML-exemplet BODY-sektionen. Det är här all information, allt innehåll på webbplatsens sida finns. All information presenteras i form av taggar och skript, till exempel att infoga JavaScript-kod eller delar av PHP-program.

      Det är viktigt att förstå att ett exempel på en HTML-webbsida i en webbläsare och samma exempel i en textredigerare, i synnerhet Anteckningar, inte är samma sak. I det första fallet har vi en färdig HTML-text där alla skript exekveras. PHP fungerade till exempel och bildade de nödvändiga taggarna på rätt ställen istället för sin kod. JavaScript har också uppfyllt sitt uppdrag, även om det återstår att diskutera separat.

      HTML är taggar, inte skript. I slutändan visas bara innehållet på sidan i webbläsaren, bara dess taggar. Det finns ingen PHP-kod där.

      JavaScript är i en speciell position, dess angelägenhet är att betjäna sidan inte bara vid laddningsögonblicket (överbelastning), utan också i de ögonblick då sidan är i besökarens webbläsare och han studerar den.

      Ett enkelt exempel (endast BODY-sektionen) visas nedan.

      Och i besökarens webbläsare ser det ut så här:

      Koden specificerade inte hur elementen som webbläsaren skulle visa skulle se ut. All synlig styling finns i CSS-reglerna. I det här fallet, i filen Mcss/scPhpWordRW.css som länkades (se det allra första exemplet på HTML-sidan).

      Till skillnad från HTML är CSS-temat enklare, det finns mycket tillgängliga regler och deras antal är litet, när exemplet med att skapa en HTML-sida inte kräver något annat än anteckningsblock. Allt är mycket tillgängligt för omedelbar behärskning:

      Detta visar hur enkelt scLogo_vDoc-taggen beskrivs, och denna beskrivning är sådan att taggen i sitt normala tillstånd visar bilden vDoc-logo.png, och när musen är över den visas vDoc-logo-h.png.

      Struktur för HTML-beskrivningar

      Språket innebär ingen struktur och syntaxbegreppet är här väldigt relativt. Det finns inga variabler, men det finns gott om möjligheter. Den grundläggande grunden för hypertext är att det finns ett element (tagg) som nödvändigtvis har ett namn.

      Namnet, i fallet med en parad tagg, består av själva namnet (tagName) och vinkelparenteser ("<» + tagName +«>"), Om vi pratar om om början av taggen och ""om dess slut registreras.

      Ett exempel på HTML-sida som beskriver attributen finns nedan i texten.

      En tagg kan ha attribut, i vilket fall de placeras med ett mellanslag efter taggnamnet före den avslutande vinkelparentesen ">". Attribut, om en tagg har dem, skrivs endast i början av taggen. Innehållet i en tagg anses vara det som finns mellan början av taggen och dess slut.

      HTML låter dig beskriva block och inline-element. De förra upptar ett visst område i webbläsarfönstret, kan placeras absolut, det vill säga på önskad plats i HTML-sidans visningsområde, och har en specifik storlek.

      Inline-element visas vanligtvis i en tråd, det vill säga, eftersom de specificerades i sidfilen, visas de på skärmen. Visningen av det övergripande flödet kan påverkas när sidan laddas. Placering, synlighet och andra egenskaper för blockelement kan påverkas när som helst genom JavaScript-kod.

      Förutom enkla element erbjuder HTML beskrivning av tabeller och formulär. Dessa element är mycket efterfrågade i "vardagligt webbplatsbyggande".

      Tabellbeskrivning: taggar TABLE, TR, TD

      Med hjälp av TABLE-taggen kan du skapa en tabell, ange ett visst antal TR-rader och ett visst antal TD-celler i varje rad. Till skillnad från den vanliga tabellorganisationen, på grund av särdragen med HTML-uppmärkning, är tabellorganisationen begränsad till denna deklaration, därför, om utvecklaren vill ha en rektangulär tabell där antalet kolumner i alla rader är detsamma, måste han övervaka detta själv.

      Huvudpositionen för HTML är att göra allt som är specificerat, men inget som inte förstås. I vissa fall är antalet kolumner i varje rad i tabellen inte så viktigt, men om du behöver slå samman celler vertikalt eller horisontellt måste du räkna allt mycket noggrant.

      Ett exempel på en HTML-sida som beskriver en enkel tabell visas tydligt i artikeln.

      Här visas en tabell med tre rader med tre kolumner, och i den första raden, istället för TD-taggen, användes TH-taggen - kolumnrubriken. Dessa två taggar är inte särskilt olika, men det är fullt möjligt att använda den första för att särskilja den första raden i tabellen, och i CSS kan du koppla din egen stil till TH, vilket skiljer den från andra TD:er.

      Formulärbeskrivning: taggar FORM, INPUT

      Formulär är den mest populära delen av HTML-taggar. Med hjälp av formulär kan du överföra information. Egentligen är själva sidan utdata av information, men formen är dess input.

      Exempel på HTML-sida som beskriver ett enkelt formulär:

      Det finns många fler alternativ för att använda formulär, men dessa är huvudmöjligheterna. Du kan specificera inmatningsfält, tilldela dem en design och hanterare för att analysera data som användaren matat in. Du kan ange dolda fält och överföra bakgrundsinformation från sidan. Du kan ange knappar för att överföra information, klicka på som initierar processen för att överföra information.

      Använder HTML

      Att kunna hypertextspråket är ett jobb inom vilken specialisering som helst inom området internetprogrammering, men om du behöver skriva program i PHP eller JavaScript, måste du kunna HTML + CSS perfekt.

      PHP-språket angavs i föregående exempel. PHP körs på servern, så sidan med detta formulär flög från servern till webbläsaren med fälten ifyllda. Speciellt TestOnBlur-funktionen som nämns i INPUT-taggen (onblur-händelsehanteraren) fick alla parametrar som textfält.

      JavaScript körs i webbläsaren och för att knappen för att skicka tillbaka data till servern ska fungera korrekt, det vill säga konstruktionen: onclick=jQuery("#to").val("cart") måste du ha en idé inte bara om vad jQuery är, utan också vad som är #to, val, cart. Mer exakt måste du känna till de grundläggande HTML-taggarna och generella regler tillämpa CSS-stilar på dem.

      Detta är tillräckligt för att snabbt förbättra dina kvalifikationer inom alla specialiseringar inom internetprogrammering.

      Hej kära bloggläsare. Med den här artikeln börjar vi lära oss grunderna HTML-språk.

      Du vet förmodligen redan att huvudspråket på Internet är hypertext markup language HTML (HyperText Markup Language). I den här artikeln kommer vi att lära oss de grundläggande begreppen HTML och lära oss hur man skapar enkla WEB-sidor.

      Låt oss börja med det viktigaste, låt oss titta på hur det fungerar World Wide Web— Internet. För att producera webbsidor skapar du filer skrivna i HTML och placerar dem på en webbserver. Efter detta kan alla webbläsare som är installerade på en enhet med internetåtkomst, oavsett om det är en dator, telefon eller surfplatta, hitta dina webbsidor.

      webbserver- det här är en vanlig dator med en speciell programvara med tillgång till internet. Den lyssnar kontinuerligt efter förfrågningar från webbläsare om webbsidor, bilder, ljud- och videofiler. Efter att ha fått en begäran om en av dessa resurser letar servern efter den och skickar den till webbläsaren.

      Webbläsare- Det här specialprogram, avsedd för att surfa på webbplatser, till exempel Internet Explorer. Med hjälp av en webbläsare surfar du på webbplatser genom att klicka på länkar. Varje sådant klick gör att webbläsaren gör en begäran om HTML-sidan till webbservern, får ett svar och visar sidan i sitt fönster. Det är när sidan visas som HTML-språket börjar fungera, det berättar för webbläsaren allt om webbsidans struktur och innehåll. Använda kommandon - taggar, HTML talar om för webbläsaren var textstycken börjar, vilken del av texten som är en rubrik och var man ska infoga tabeller och till och med bilder. Och taggar är till exempel ord inom vinkelparenteser

      ,

      , .

      Du behöver akut en onlinebutik, men du har inte tid att lära dig HTML, CSS, PHP och andra tekniker. Då kan du helt enkelt hyra en webbutik med fullt implementerad funktionalitet och optimering för sökmotorer.

      HTML-språk och dess taggar

      Den första versionen av HTML-språket dök upp redan 1992. Vid tiden för 2013 är specifikationen under utveckling ny version HTML nummer 5. Utvecklingen av denna specifikation utförs av World Wide Web Consortium, eller W3C för kort. W3C-organisationen utvecklar andra webbstandarder. Du kan bekanta dig med dessa standarder på deras hemsida www.w3.org. Förresten, många webbläsare stöder redan vissa HTML 5-funktioner.

      Jag föreslår att du börjar lära dig HTML direkt med ett exempel. Så låt oss skapa vår första webbsida. Alla textredigerare är lämpliga för att skapa WEB-sidor. Jag föreslår att du först använder det inbyggda Windows Anteckningsblock(i allmänhet rekommenderar jag i framtiden att du använder för att redigera html-kod). Du hittar det: "Start->Alla program->Tillbehör->Anteckningar". Låt oss skapa en sida om bilar. Så öppna Anteckningar och skriv följande text i den:





      Exempel webbsida


      Hemsida om bilar.


      Välkommen till vår fordonswebbplats. Här hittar du många intressanta och användbara artiklar om bilar. Webbplatsen innehåller beskrivningar av många importerade och inhemska bilar.





      Spara sedan den skapade webbsidan till en fil med namnet index.html. I det här fallet, i dialogrutan för filsparande, måste du ställa in kodningen till UTF-8 och omge filnamnet inom citattecken, annars kommer Notepad att lägga till txt-tillägget till den, och vår fil kommer att heta index.htm.txt:

      Nu återstår bara att öppna den skapade filen i webbläsaren och titta på resultatet. För att göra detta kan du använda den medföljande Windows webbläsare Microsoft Internet Explorer, eller någon annan webbläsare installerad på din dator, genom att dubbelklicka på filen index.html eller dra filen till webbläsarikonen. Öppna den och se något så här:

      Således skapade vi en webbsida i Anteckningar, om än lite obeskrivlig, men som redan innehåller en stor rubrik och ett stycke text som automatiskt delas upp i rader och innehåller ett fragment i fet stil.

      Vad är en tagg?

      Låt oss nu prata mer om sidstrukturen. Låt oss titta på fragmentet:

      Hemsida om bilar

      . Här ser vi texten som dyker upp på sidan som en rubrik, innesluten i taggar

      Och

      . Vad är en tagg i HTML?

      HTML-taggär vanliga ord och symboler inom vinkelparenteser, till exempel

      ,

      , . Så tagga

      är öppningstaggen, tag

      avslutande tagg, och texten mellan dem kallas innehållet i taggen. Tagga också

      och tagga

      kallas parade taggar. Tillsammans bildar den inledande taggen plus innehållet plus den avslutande taggen ett HTML-dokumentelement. Det finns också element som består av en öppningstagg:

      Så parad tagg

      definierar ett huvudelement på första nivån. Det finns sex nivåer av rubriker totalt, dessa är elementen

      .

      Element kan vara block eller inline (text). Blockelement utföra strukturell formatering av sidan. Blockelement visas alltid på en ny rad på sidan och dras in från intilliggande element. Inline-element utföra direkt textformatering eller logisk formatering. Element

      är ett blockelement.

      Det var allt för mig!!! Vi ses i nästa inlägg!

      : HTML - hypertext markup language (eller hypertext markup language).

      Så låt oss lära känna honom bättre.

      Skapa först en fil på din dator med valfritt namn och extension.html (namnet måste stå på engelska språket - till exempel index.html). För att skapa en sådan fil, skapa en vanlig fil Textdokument ("Start" - "Alla program" - "Tillbehör" - "Anteckningar") och spara ("Arkiv" - "Spara som") den var som helst genom att ange namn och tillägg (det händer att när du introducerar en tillägg, anteckningar fortfarande sparar den som textfil, och vi behöver en webbfil. För att göra detta, innan du sparar, välj filtypen - "Alla filer (*.*)").

      Detta är inte en förutsättning (eftersom du kan ändra namnet på den första sidan i serverinställningarna), utan en regel för gott uppförande. Namnet på den första sidan är företrädesvis index (index.html), eftersom servern, när den kommer åt den, producerar en fil med samma namn - index.

      När den har sparats korrekt bör filikonen ändras till webbläsarikonen (Internet Explorer som standard).

      Öppna nu den här filen med Notepad och kopiera följande kod dit.

      Detta är den första webbsidan!

      Spara och öppna i en webbläsare.

      Grattis, du har precis skapat din första webbsida.

      Text "Detta är den första webbsidan!" Du kan ändra den till vilken som helst annan, till exempel "Detta är min första webbsida!!!" spara, uppdatera webbläsaren och beundra resultatet.

      Men vår sida har ingen titel.

      Vi måste åtgärda detta - vi korrigerar koden lite, eller snarare lägger vi till ett "Site Head" till den med taggar Och .</p><p> <html> <head> <title>Första sidan Detta är min första webbsida!!!

      Spara, uppdatera, beundra. Vår sida har nu en titel.

      Beskrivning av taggar.

      Den allra första taggen är (denna tagg är parad, d.v.s. den avslutande taggen krävs) - den används som en behållare i vilken allt innehåll på sidan (text, bilder, etc.) finns. Även om denna tagg ( Och) är valfritt, men dess användning tyder på gott uppförande. Därför råder jag dig att använda den.

      Nästa tagg - . Detta är också en parad tagg ( Och). Den här taggen visas inte på sidan (förutom i rubriken), men den måste indikera ytterligare parametrar sidor - sidbeskrivning (används av sökmotorer), nyckelord (används av sökmotorer), stilar, skript, titel, etc.

      Märka </b>- parad tagg ( <title>Och), krävs för att ange sidtiteln. Dessutom får denna tagg endast placeras inuti taggen !

      Och den sista taggen i vår kod är - . Även en parad tagg ( Och

      ), inuti vilken är hela den synliga delen av webbplatsen, dvs. texter, bilder, länkar, in allmän information som du vill placera på webbplatsen.

      I nästa lektion kommer vi att prata om typerna av taggar och reglerna för att skriva dem.



       Topp