Ett exempel på en HTML-sida och grunderna för att skapa

Många språk har uppfunnits, men HTML-språkettillhör ett antal speciella och mest krävda. Många andra viktiga initiativ i programmeringen är kopplade till det. Mycket blir tillgängligt när kunskapen om uppmärkningsspråket är närvarande i utvecklarens sinne - HyperText Markup Language (HTML).

I grund och botten finns det inget komplicerat och i HTMLnågra minuter någon, den mest avlägsna från programmering och Internetpersonen, kommer att skapa en HTML-sida i en anteckningsbok. Ett exempel som förtjänar uppmärksamhet är enkelhet, vilket är verkligen tillgängligt för alla.

Allmän beskrivning

HTML-fil - en sida webbplats, även om detta kan diskuteras, men det är en fil per sida, till att börja med är det klart.

HTML-filen börjar med DOCTYPE-rubriken, ivilket indikerar att typen av den här filen är HTML. Alla element på sidan (taggar) anges i vinklar. Varje par ("<" och ">") innehåller en HTML-tagg. Vanligtvis HTML-taggar är ihopkopplade, det vill säga för varje «tag» ha «/ tagg». Båda är inneslutna i vinkelbeslag. Det finns enstaka taggar, varav den mest populära "br /" är övergången till nästa rad.

Den största taggen i filen är HTML själv, isom endast innehåller två taggar: HEAD och BODY. I det första görs olika beskrivningar, länkar till andra sidor anges, PHP och JavaScript skript kan vara närvarande. I det andra registreras innehållet på sidan. Också i form av taggar och skript.

Enkel HTML-sida

Ett exempel på att skapa en sådan sida anges nedan i artikeln. Tänk på det noggrant.

Sektion HEAD

Huvudsyftet med HEAD-koden är en allmän beskrivning av sidan och vanliga skript, även om den senare är ett relativt relativt begrepp. Vanligtvis är det bara två saker som är viktiga här:

• sökord och beskrivning av sidan;
• länkar till andra filer (* .css och * .js).

För att visa sidinnehåll har innehållet i det här avsnittet endast en indirekt mening, eftersom den indikerar: någonstans i andra filer finns CSS-regler för taggar och skript på andra språk.

HTML-sidan har en titel (TITLE) somDen visas när besökaren lägger musen till fliken där sidan är öppen. Det här är en viktig punkt, eftersom det gör sidan mycket mer presentabel, lättare att säga, undertecknad med läsbar text.

META-taggar är viktiga för Internetprogrammering i allmänhet, men när du vill skapa en HTML-sida i en anteckningsbok är exemplet oönskade för att röra med redundanta konstruktioner.

Länkar LINK och SCRIPTuppmärksamhet. Den första pekar på den plats där CSS-stilarket finns, det andra till platsen för JavaScript-kodfilen. Det kan finnas många sådana referenser.

Om man ska närma sig skripten, när kunskapHTML kommer att stärkas, så bör kaskad stilark omedelbart uppmärksammas. I CSS-filerna är i synnerhet reglerna för utformning av HTML-taggar.

Avsnitt BODY

Egentligen är ett exempel på en HTML-sida dettaavsnitt BODY. Det är här som innehåller all information, hela innehållet på webbplatsen. All information presenteras i form av taggar och skript, till exempel sätta in JavaScript-kod eller bitar av PHP-program.

Det är viktigt att förstå att exemplet på en HTML-webbsida iwebbläsare och samma exempel i en textredigerare, särskilt anteckningsblock, är det inte samma sak. I det första fallet har vi den färdiga HTML-texten, där alla skript körs. PHP har till exempel arbetat med sin del och har genererat de nödvändiga taggarna istället för sin kod på rätt ställe. JavaScript uppfyllde också sitt uppdrag, även om det fortfarande finns en separat konversation om det.

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

JavaScript är i ett speciellt läge, det gäller att betjäna sidan inte bara vid lastning (överbelastning), men även när sidan är i besökarens webbläsare och användaren studerar den.

Ett enkelt exempel på HTML-sidkoden (endast avsnittet BODY) visas nedan.

Och i besökarens webbläsare ser det ut som den som visas nedan.

Koden anger inte hur man ska se utelement som webbläsaren visade. All synlig design finns i CSS-regler. I det här fallet i filen Mcss / scPhpWordRW.css, som refererades (se det första exemplet på en HTML-sida).

Till skillnad från HTML är CSS-temat enklare, därmycket prisvärda regler och deras antal är liten, när ett exempel på att skapa en HTML-sida inte kräver något annat än anteckningsblock. Allt är mycket tillgängligt för omedelbar mastering:

Detta visar hur en tagg enkelt beskrivsscLogo_vDoc, och den här beskrivningen är sådan att i normalt tillstånd taggen visar bilden vDoc-logo.png, och när musen är ovanför den visas vDoc-logo-h.png.

HTML Beskrivning Struktur

Språk innebär inte någon struktur ochbegreppet syntax är väldigt relativt. Det finns inga variabler, men det finns många möjligheter. Den grundläggande grunden för hypertext är att det finns ett element (tagg) som nödvändigtvis har ett namn.

Namnet på fallet taggparet, som består av egennamn (tagname) och fästvinklar ( «<» + tagname + «>»), om vi talar om i början av taggen, och «</» + tagname + «>» Om inspelad dess ände.

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

En tagg kan ha attribut, då placeras degenom ett mellanslag efter etikettnamnet till stängningsvinkelbeslaget ">". Attribut, om de har en tagg, skrivs bara i början av taggen. Innehållet i taggen är vad som ligger mellan början på taggen och dess slut.

Det allmänna innehållet i HTML-beskrivningarna

HTML kan du beskriva block och små bokstäverelement. Den första upptar ett visst område i webbläsarfönstret, kan placeras absolut, det vill säga på rätt plats i HTML-sidans visningsområde och har en viss storlek.

Linjeposter visas i allmänheten tråd, det vill säga som anges i sidfilen och visas. Visningen av det totala flödet kan påverkas när sidan laddas. Placeringen, synligheten och andra egenskaper hos blockelement kan påverkas när som helst med hjälp av JavaScript-kod.

Förutom enkla element erbjuder HTML beskrivningen av tabeller och formulär. Dessa element är mycket efterfrågade i "vardaglig byggnad".

Beskrivning av tabellen: taggar TABLE, TR, TD

Med tabellen TABLE kan du skapa ett bord,ange ett visst antal rader TR och i varje rad ett antal TD-celler. Till skillnad från den vanliga tabulära organisationen, på grund av egenskaperna hos HTML-märkning, är kalkylbladsorganisationen begränsad till denna deklaration, så om utvecklaren vill ha ett rektangulärt bord där antalet kolumner i alla rader är desamma måste han själv följa det.

Den grundläggande positionen för HTML: gör allt som anges, men inget som inte förstås. I vissa fall är det inte så viktigt att antalet kolumner i varje rad i tabellen, men om du vill göra en sammanslagnings celler horisontellt eller vertikalt, är det nödvändigt att räkna alla mycket noggrant.

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

Här är ett bord i storleken av tre rader per trekolumner, och i den första raden, istället för TD-taggen, användes TH-taggen - kolumnrubriken. Det finns inga speciella skillnader mellan dessa två taggar, men du kan använda den första som skiljer den första raden i tabellen, och i CSS till TH kan du bifoga din egen stil, vilket skiljer den från andra TD.

Formbeskrivning: FORM, INPUT-taggar

Blanketter är den mest efterfrågade delen av HTML-taggar. Med hjälp av formulär kan du överföra information. Egentligen är själva sidan utdata av information, men formuläret är dess ingång.

Exempel på en HTML-sida med en enkel formulärbeskrivning:

Användningen av formulär är mycket större, menDe viktigaste möjligheterna är följande. Du kan ange inmatningsfälten, tilldela dem design och hanterare för att analysera användarinmatningen. Du kan ange dolda fält och skicka bakgrundsinformation från sidan. Du kan ange knapparna för överföring av information, klicka på vilken initierar överföringen av information.

Använda HTML

Känna språket i hypertext är ett oumbärligt villkorarbeta på någon specialisering inom internetprogrammering, men om du behöver skriva program i PHP eller JavaScript, behöver du veta HTML + CSS perfekt.

PHP-språket angavs i föregående exempel. PHP körs på servern, eftersom sidan med detta formulär har flown från servern till webbläsaren med de fyllda fälten. I synnerhet fick funktionen TestOnBlur, som nämns i INPUT-taggen (onblur-händelsehanteraren), alla parametrar i form av textfält.

Webbläsaren kör JavaScript, och tillfungerat korrekt att skicka data tillbaka till servern nyckeln är att utformningen :. onclick = jQuery ( "# för att") val ( "vagn"), måste du ha en idé inte bara om vad jQuery, men vad #to, val , kundvagn. Mer exakt behöver du veta de viktigaste HTML-taggarna och de allmänna reglerna för tillämpning av CSS-format på dem.

Detta är tillräckligt för att snabbt höja sina kvalifikationer för någon specialisering inom internetprogrammering.