Introduktion till HTML och CSS för designers

En introduktion till HTML och CSS för designers.

Som grafisk designer är du förmodligen medveten om det ständigt föränderliga förhållandet mellan design och teknik. Detta gäller särskilt för dem som arbetar med webbdesign. I den här branschen behöver vi ha en grundläggande förståelse för hur våra noggrant utformade layouter blir levande webbsidor. När vi förstår grunderna i denna process (och dess begränsningar) kan vi kommunicera korrekt med utvecklare och skapa webbplatser med perfekt pixel.

Detta betyder inte att du behöver veta hur man kodar en webbplats från topp till botten (även om det skulle vara bra!), det betyder bara att du måste förstå grunderna. I det här inlägget börjar vi med en mycket grundläggande introduktion till HTML. Du kommer att lära dig hur du skär upp webbdesign i Photoshop och formaterar HTML med CSS. Introduktion till HTML och CSS för designers

Vad är HTML?

Nästan allt du ser när du surfar på webben är ett HTML-dokument (Hypertext Markup Language). Hypertext är text som refererar till och refererar till annan text på din skärm, vilket gör att du kan komma åt innehållet med ett enkelt klick. Markup language är en uppsättning taggar inom hakparenteser <>. Dessa HTML-taggar kommer vanligtvis i par:

<starttagg> : Även känd som öppningstaggen.
: även kallad den avslutande taggen och inkluderar ett snedstreck /

När du omsluter innehåll mellan dessa två taggar kallas det hela element :

Detta är ett stycke

När det här språket översätts till Internet kommer tittarna inte att se taggarna – de ser bara innehållet mellan dem.

HTML 5, den nuvarande versionen av HTML, innehåller cirka 100 taggar med attribut som ändrar deras funktion eller utseende. Du behöver bara känna till 30-40 av dessa taggar för att börja förstå och skapa HTML. Ta en titt på dem och lägg märke till hur de är grupperade efter funktion. Låt oss se detta i aktion.

Skär bilder i Photoshop.

Introduktion till HTML och CSS för designers

Innan vi kodar måste vi bestämma vilka delar av webbplatsen som ska innehålla bilder och vilka som kan kodas. Låt oss dra fördel verktyg Photoshop Skiva (dold under undermenyn Beskärningsverktyg ) och markera områden som ett fotografi av en burrito och taco joan .

Nu måste vi exportera våra utdrag - välj Arkiv > Spara för webben (Alt + Shift + Ctrl + S). När ett specifikt utdrag har valts kan du ställa in dess exportalternativ på höger sida av fönstret (JPG, PNG, etc.). Om du dubbelklickar på ett specifikt fragment kommer du att se ett popup-fönster " Fragmentparametrar" - Detta låter dig namnge specifika fragmentfiler.

Som standard placeras alla bilder i: /images/ underkatalog. Om du bara vill exportera utdragen du skapar väljer du " Alla anpassade fragment" i fönstret "Spara". Introduktion till HTML och CSS för designers

Skapa ett grundläggande HTML-dokument

Vi har våra slicers, låt oss skapa ett grundläggande HTML-dokument. Introduktion till HTML och CSS för designers

Linje 1 : Deklarerar att HTML 5-dialekten är dokumentets språk.

Linje 2 : element representerar roten till ett HTML-dokument. Detta är en obligatorisk behållare som anger gränserna för vårt dokument.

3 : kapitel innehåller osynliga sidelement som metainformation, titel osv.

Linje 4 : Detta är dokumentkodningsdeklarationen − utf-8 - säkert val - du kan läsa mer om HTML-teckenkodningar här .

Linje 5 : Exempelsida Detta är sidtiteln som visas i webbläsarens namnlist.

6 : stänger taggen från rad 3.

Linje 7 : Detta body-element kommer att innehålla allt synligt innehåll på sidan.

Linje 8 : stänger taggen från rad 2. Detta element markerar slutet på dokumentet. Introduktion till HTML och CSS för designers

Det finns andra möjliga sätt att koda samma design. Vi kommer att använda HTML 5 semantiska taggar (sidhuvud, nav, artikel, sidfot) för att skapa den grundläggande strukturen för dokumentet:

Detta är layouten översatt till HTML:

Några anteckningar:

Rad 11 och 12 : Element är essensen av Internet eftersom de används för att skapa hyperlänkar . De är bundna till HREF-attributet och måste binda målet URL .

Rad 18–20 : Det här är några textformateringstaggar: betecknar en rubrik på första nivån; betecknar ett stycke; betyder radbrytning.

Formatering med Cascading Style Sheets (CSS).

Introduktion till HTML och CSS för designers

När du bara öppnar HTML-filen i en webbläsare ser du att den inte är formaterad som vår tidigare design. Detta beror på att HTML-kod inte räcker – vi måste formatera den med Cascading Style Sheets (CSS) . CSS är ett stilmallsspråk som används för att formatera HTML-element.

Men varför behöver vi kombinera HTML med CCS? För en tid sedan uppnåddes formatering genom att lägga till attribut till HTML-taggar. Detta resulterade dock i oläsbar och ounderhållbar kod. Lösningen var att separera dokumentinnehållet (HTML) från dokumentformateringen (CSS).

Let's Breakdown Simple CSS-regel :.

Väljare : Det här är HTML-elementet du vill formatera. Till exempel: <artikel>

Ad : En CSS-regel kan ha en eller flera deklarationer. Varje deklaration består av en egenskap och ett värde och separeras med semikolon. Du placerar deklarationer med hängslen {}. Introduktion till HTML och CSS för designers

Fast egendom : detta är stilkaraktär, som du vill ändra. Till exempel: bakgrundsfärg, storlek font etc.

Värde : Varje egenskap har ett värde kopplat till sig. Till exempel: #ffcc11 (för bakgrundsfärg), 16px (för teckenstorlek), etc.

Det många CSS-egenskaper, som kan ställas in för varje HTML-element, men det finns ingen anledning att skriva alla själv. Du kan lita på din webbläsares standardinställningar eller använda en grundläggande stilmall som återställer din webbläsare till rimliga inställningar. Faktum är att skriva väljare att göra det själv kräver mycket kunskap och erfarenhet.

Låt oss titta på några CSS-regler som behövs för att formatera vår enkla design.

CSS-positioneringsegenskaper : existerar 4 olika metoder (statisk, fix, relativ och absolut) som gör att vi kan placera vissa element i vår design. Efter att ha ställt in en av dessa metoder kan du placera element med hjälp av egenskaperna för topp, höger, botten och vänster - de kommer att fungera olika beroende på vilken av de 4 metoderna du använder. I det här fallet skulle vi vilja positionera plate_image, använder sig av absolut positionering.

CSS Box modell : den här modellen är en ram som omsluter alla HTML-element, inklusive marginaler, ramar, utfyllnad och innehåll. Marginalen är det osynliga området runt bården och stoppningen mellan bården och innehållet.

Om du VERKLIGEN vill lära dig mer om kodning, ta en titt till denna coola sida: Codecademy .