HEMSIDEDESIGN

Stadier för att skapa en webbplats

Att skapa en webbplats omfattar flera steg – från att komma på en idé till dess genomförande. För att skapa en riktigt intressant och användbar produkt måste du gå igenom följande steg.

Analys och design. Analys av styrkor och svagheter konkurrenter, informationsdesign av en webbplats, utveckling av dess koncept, bedömning av målgruppen.

Innehållsskrivande. Under innehåll hänvisar till informationsinnehållet på webbplatsen. Termen används för att referera till det ideologiska innehållet på en webbplats.

Kreativ. Kreativ- en term för att beteckna den visuella komponenten av en webbplats. Detta inkluderar utveckling av design, grafiska element, grafisk bearbetning och allt relaterat till det.

Skriver webbkod. Webbfil programmering, skriva den funktionella delen

Testning. I detta skede kontrolleras allt: enkel navigering, dataintegritet, korrekthet av länkar och stavning; dessutom tolkar inte alla webbläsare samma HTML-taggar på samma sätt.

Offentliggörande. Lägga ut en webbplats på Internet. De flesta internetleverantörer (ISP) tillhandahåller tjänsten att vara värd för hemwebbsidor gratis (denna tjänst kallas webbhotell). För att publicera kan du vara värd för din webbplats hos en leverantör eller använda andra alternativ.

Stöd. Det är nödvändigt att bestämma hur nya sektioner och material ska läggas till, och vad som ska hända med de gamla. Det kan bli nödvändigt att skapa ett nyhetsarkiv som kommer att innehålla nyheter som förlorat sin relevans. Det är ännu viktigare att regelbundet uppdatera informationen på webbplatsen för att säkerställa att den förblir attraktiv.

Terminologi för webbdesign

webbläsare- ett applikationsprogram utformat för att tolka HTML-dokumentkoder och visa ett hypertextdokument på en datorskärm. De mest använda webbläsarna - Internet Explorer,Opera, Mozilla Firefox, Google Chrome. Tillsammans med termen "webbläsare" används synonyma termer: "webbläsare" och "navigator".

Hemsida- en uppsättning sammankopplade webbsidor och filer med liknande betydelse. Varje webbplats har en webbsida som kallas hemsidan eller startsida. Alla besökare på webbplatsen landar först på den och kommer sedan, med hjälp av hyperlänkar, till andra sidor på webbplatsen.

webbsida (HTML-dokument) är en textfil på HTML-språk format *.htm eller *.html, publicerat på WWW. Förutom text kan en webbsida innehålla grafik, animationer, videoklipp, musik samt hypertextlänkar med vilka du kan navigera till och visa andra webbsidor.

Ett sätt att skapa webbsidor (eller HTML-dokument) är att använda textredigerare Anteckningsblock, inbyggt i Windows. I den här editorn skapas en webbsidesfil, som sparas med tillägget *.htm, och resultaten visas sedan i en webbläsare.

Skapa webbplatser med HTML-språk

Språk HTML(Hyper Text Markup Language) är ett uppmärkningsspråk för hypertextdokument som används för att skriva webbplatser.

HTML-språket låter dig:

‒ skapa och redigera webbplatser, inklusive en hemwebbsida, som sedan kan läggas ut på Internet;

- redigera HTML-dokument som tas emot från Internet så att alla objekt som är inbäddade i dokumentet (bilder, animationer, etc.) fungerar;

- skapa multimediapresentationer, bildspel, demoprojekt, tack vare hypertextlänkar och möjligheten att infoga ritningar, diagram, animationer, videoklipp, musik- och talackompanjemang, textspecialeffekter (till exempel krypande linje) i ett HTML-dokument.

GRUNDLÄGGANDE KONCEPT FÖR HTML-SPRÅK

Elementär en HTML-språkkonstruktion, eller behållare, som innehåller data.

webbsidaär en uppsättning element.

Märkaär start- och slutmarkörerna för elementet. Taggar definierar gränserna för elementens verkan och skiljer element från varandra. Taggar omges av vinkelparenteser, till exempel: . Sluttaggen, om språksyntaxen kräver det, föregås av ett snedstreck:.

Ram- ett område av ett hypertextdokument med sina egna rullningslister. Ramar låter dig dela upp sidor i rektangulära områden, som var och en visar sina egna egen sida. Du kan placera en eller flera ramar på en sida (denna sida kallas ramar sida eller ramuppsättning).

Form- ett område i ett hypertextdokument som är nödvändigt för att organisera respons med webbplatsbesökare.

Applet- ett litet applikationsprogram överfört till klientens dator i formuläret separat fil och startas när du tittar på en webbsida.

Manus- ett program som ingår i en webbsida för att utöka dess möjligheter.

Placering (Ladda upp)- kopiera ett dokument från klientens dator till webbservern - används när du skapar din egen webbsida (dvs när du publicerar den).

Pixel- den minsta färgpunkten på skärmen.

ALLMÄN STRUKTUR AV ETT ENKELT HTML-DOKUMENT

Den allmänna strukturen för ett enkelt HTML-dokument är:

<СОММЕNT> En kommentar

HTML är inte skiftlägeskänsligt, så exemplet ovan kan se ut så här:

Sluttaggen ser likadan ut som starttaggen och skiljer sig från den genom ett snedstreck före texten inom vinkelparenteser. I i detta exempel märka - om kompletteringen av titeltexten.

Vissa taggar som t.ex

(tagg som definierar ett stycke) kräver ingen sluttagg, men dess användning ger dokumentets källtext förbättrad läsbarhet och struktur.

När en webbläsare tar emot ett dokument bestämmer den hur dokumentet ska tolkas. Den allra första taggen som visas i dokumentet måste vara taggen . Den här taggen talar om för webbläsaren att ditt dokument är skrivet med HTML. Ett minimalt HTML-dokument skulle se ut så här:

...dokumentets brödtext...

Dokumenthuvud

Dokumenthuvudtaggen ska användas omedelbart efter taggen och ingen annanstans i dokumentets brödtext. Den här taggen är allmän beskrivning dokumentera. Undvik att placera någon text inuti taggen . Starta tag placeras omedelbart före taggen Dokument titel , belägen inuti -taggar, som visas i exemplet ovan. Dokumenttiteln visas inte när själva dokumentet visas i fönstret.

Kommentarer

Liksom alla språk låter HTML dig infoga kommentarer i ett dokuments brödtext, som sparas när dokumentet överförs över nätverket, men som inte visas av webbläsaren. Kommentarsyntax:

Kommentarer kan visas var som helst i ett dokument och i vilken mängd som helst.

Dokumenttexttaggar identifierar komponenterna i HTML-dokumentet som visas i fönstret. Brödtexten i dokumentet kan innehålla länkar till andra dokument, text och annan formaterad information.

Dokumentets brödtext

Dokumentets brödtext måste vara mellan taggarna Och. Detta är den del av dokumentet som visas som text och grafisk (semantisk) information om ditt dokument.

Stycketag

Till skillnad från de flesta ordbehandlare ignoreras vagnreturer i allmänhet i ett HTML-dokument. En fysisk styckebrytning kan placeras var som helst i dokumentets källtext (för att göra det lättare att läsa). Men webbläsaren separerar bara stycken om det finns en tagg

Om du inte separerar stycken med taggen

Ditt dokument kommer att visas som ett stort stycke.

Hypertextlänkar är en nyckelkomponent som gör webben attraktiv för användare. Genom att lägga till hypertextlänkar (hädanefter kallade länkar) gör du en uppsättning dokument sammankopplade och strukturerade, vilket gör att användaren kan få den information han behöver så snabbt och bekvämt som möjligt.

Länkar har ett standardformat, vilket gör att webbläsaren kan tolka dem och utföra de nödvändiga funktionerna (anropsmetoder) beroende på typen av länk. Länkar kan peka till ett annat dokument, en specifik plats i det dokumentet, eller utföra andra funktioner, som att begära en fil via FTP för webbläsaren att visa. En URL kan peka på en specifik plats i en absolut sökväg, eller den kan peka på ett dokument i den aktuella sökvägen, som ofta används när man organiserar stora strukturerade WEB-webbplatser. Återgå till föregående länk om rörelsen inträffade i dokumentet. Om du använder länkar i ett dokument och sedan trycker på Tillbaka-tangenten kommer du inte att gå till föregående länk, utan återgå till den del av dokumentet som du tittade på tidigare.

En av de mest attraktiva jäkla webben- Möjligheten att inkludera länkar till grafik och andra typer av data i ett HTML-dokument. Detta görs med hjälp av en tagg . Att använda denna tagg kan avsevärt förbättra utseendet och funktionaliteten hos dokument.

Det finns två sätt att använda grafik i HTML-dokument. Den första är inbäddningen av grafiska bilder i dokumentet, vilket gör att användaren kan se bilderna direkt i sammanhanget med andra delar av dokumentet.

Detta är den mest använda tekniken inom dokumentdesign, ibland kallad "inline image".

Vissa webbläsare tillåter användaren att, genom att fylla i ett speciellt formulär som returnerar det resulterande värdet, utföra vissa åtgärder på din WWW-server. När formuläret tolkas av en webbläsare skapas speciella GUI-skärmelement, såsom inmatningsfält, kryssrutor, radioknappar, rullgardinsmenyer, rullningsbara listor, knappar, etc. När en användare fyller i ett formulär och klickar på "Skicka"-knappen (Skicka är en speciell typ av knapp som anges när man beskriver ett dokument), skickas informationen som användaren anger i formuläret till HTTP-servern för bearbetning och överföring till andra program som körs under servern, i enlighet med CGI-gränssnittet (Common Gateway Interface).

När du beskriver ett formulär har varje datainmatningselement en tagg . När en användare placerar data i ett formulärelement placeras informationen i VALUE-sektionen för det elementet. En av de mest attraktiva funktionerna på webben är möjligheten att inkludera länkar till grafik och andra typer av data i ett HTML-dokument.

Även om webbsidor visas formaterade på en datorskärm, är HTML inte avsedd för att formatera dokument eftersom den stela designen och exakta placeringen av textelement på en sida leder till begränsningar som är oacceptabla på Internet.

Så till exempel när vi formaterar text med ordbehandlare Ord, vi definitivt bestämma hur denna text ska se ut när den skrivs ut en mycket specifik skrivare och på papper specificerat format. När ett dokument läggs ut på Internet är det omöjligt att förutsäga vilken dator som kommer att användas för att visa det, eller om den datorn ens kommer att ha en bildskärm.

Kanske kommer texten att visas på skärmen på en dator som körs in Windows-system i fönstret i en av de moderna webbläsarna. Kanske kommer det att vara en textwebbläsare (som inte kan visa grafik) som körs på MS-DOS. Kanske kommer texten i dokumentet inte att visas på skärmen alls, utan spelas upp högt med hjälp av en talsyntes. För en blind användare kan dokumentet visas på en speciell enhet i punktskrift.

På grund av behovet av att förbereda dokument för en sådan mängd olika enheter, är HTML inte avsett att beskriva dokumentformatet. Den tjänar till funktionell dokumentuppmärkning, det vill säga det låter dig bestämma utnämning fragment av text.

Till exempel, om det finns en rubrik i texten, så indikerar HTML-koden helt enkelt att motsvarande fragment är en rubrik. Efter att ha fått en sådan kod "bestämmer" tittarprogrammet (webbläsaren) själv vad som ska göras med titeln. Kanske kommer hon att visa det mer stort tryck, eller kanske justera den mot mitten av skärmen. Det är möjligt att talsyntesen som återger texten i dokumentet använder rubrikkoden för att öka volymen och göra den nödvändiga intonationspausen.

HTML-språket har fortfarande några formateringskommandon, men den allmänna kursen är att separera innehåll och utförandet av dokumentet upprätthålls strikt. I senaste versionen HTML (4.0) formateringskommandon rekommenderas i allmänhet inte.

HTML-språkkoderna som används för att markera källtexten kallas taggar. En tagg är en uppsättning tecken. Alla taggar börjar med en mindre än-symbol ( < ) och slutar med en större än-symbol ( > ). Dessa symbolpar kallas ibland vinkelfästen. Efter öppningsvinkelfästet kommer nyckelord, definierande tagg.

Varje tagg i HTML har ett speciellt syfte. Bokstäverna i taggnamn spelar ingen roll – antingen gemener eller versaler kan användas, även om det är vanligt att använda versaler för att skilja taggar från den vanliga texten i dokumentet.

Som regel en HTML-tagg påverkar endast en del av dokumentet, till exempel ett stycke. I sådana fall används parade taggar: öppning Och stängning. Den öppnande taggen skapar effekten, och den avslutande taggen avslutar effekten. Avslutande taggar börjar med ett snedstreck ( / ).

Vissa taggar ger en engångseffekt där de visas. I det här fallet finns det inget behov av en stängningsbricka och den används inte.

Om en tagg av misstag innehåller ett nyckelord som inte finns i HTML, ignoreras taggen helt.

När ett dokument visas i en webbläsare visas inte själva taggarna, men de påverkar hur dokumentet visas.

Tag attribut

Öppningstaggar kan ofta innehålla attribut, påverka effekten som skapas av taggen. Attribut är ytterligare sökord som separeras från nyckelord tagga och separerade från varandra med mellanslag.

Vissa attribut kräver specifikation attributvärden. Detta värde separeras från nyckelordet med ett likhetstecken ( = ). Attributvärdet måste stå inom citattecken, men i många fall kan citattecken utelämnas utan skada.

Avslutande taggar innehåller aldrig attribut.

Kommentarer

I programmeringsspråk är det vanligt att använda kommentarer – textrader som inte ingår i programmet, utan tjänar som förklaring. HTML-språket har också denna förmåga.

Kommentarer i HTML börjar med en speciell tagg . En kommentar kan innehålla alla tecken utom tecknet större än ( > ), och kan därför inte inkludera taggar.

Exempel på HTML-taggar:

, mellan vilken dokumentets "officiella" titel är placerad. De flesta webbläsare som körs på Windows använder den här titeln för att fylla namnlisten i webbläsarfönstret.

3. Texten i själva dokumentet finns i dokumentets brödtext. Dokumentets brödtext är placerad mellan taggarna Och .

De fyra parade taggarna som anges definierar den grundläggande strukturen för ett HTML-dokument. De visas (eller är underförstådda) i alla HTML-dokument.

I praktiken är det möjligt att fastställa platsen för dessa strukturella huvudetiketter även om de saknas. Därför, om taggarna , Och , liksom deras motsvarande avslutande taggar utelämnas, då kan webbläsarprogrammet självt bestämma platsen där de skulle ha varit placerade. Märka