Introduktion til HTML og CSS for designere

En introduktion til HTML og CSS for designere.

Som grafisk designer er du sikkert klar over det evigt udviklende forhold mellem design og teknologi. Dette gælder især for dem, der er involveret i webdesign. I denne branche skal vi have en grundlæggende forståelse af, hvordan vores omhyggeligt udformede layout bliver til levende websider. Når vi forstår det grundlæggende i denne proces (og dens begrænsninger), kan vi præcist kommunikere med udviklere og skabe websteder med perfekt pixel.

Dette betyder ikke, at du behøver at vide, hvordan du koder et websted fra top til bund (selvom det ville være fantastisk!), det betyder bare, at du skal forstå det grundlæggende. I dette indlæg starter vi med en meget grundlæggende introduktion til HTML. Du lærer, hvordan du skærer webdesign op i Photoshop og formaterer HTML ved hjælp af CSS. Introduktion til HTML og CSS for designere

Hvad er HTML?

Næsten alt, hvad du ser, når du surfer på nettet, er et HTML-dokument (Hypertext Markup Language). Hypertekst er tekst, der refererer til og refererer til anden tekst på din skærm, så du kan få adgang til indholdet med et enkelt klik. Markup sprog er et sæt tags omgivet af firkantede parenteser <>. Disse HTML-tags kommer normalt i par:

<start tag> : Også kendt som åbningsmærket.
: kaldes også det afsluttende tag og inkluderer en skråstreg /

Når du omslutter indhold mellem disse to tags, kaldes det hele element :

Dette er et afsnit

Når dette sprog er oversat til internettet, vil seerne ikke se tags – de vil kun se indholdet mellem dem.

HTML 5, den nuværende version af HTML, indeholder omkring 100 tags med attributter, der ændrer deres funktion eller udseende. Du behøver kun at kende 30-40 af disse tags for at begynde at forstå og skabe HTML. Tag et kig på dem og læg mærke til, hvordan de er grupperet efter funktion. Lad os se dette i aktion.

Skær billeder i Photoshop.

Introduktion til HTML og CSS for designere

Før kodning skal vi beslutte, hvilke dele af hjemmesiden der skal indeholde billeder, og hvilke der kan kodes. Lad os drage fordel værktøj Photoshop Slice (skjult under undermenuen Beskæringsværktøj ) og fremhæve områder såsom et fotografi af en burrito og taco joan .

Nu skal vi eksportere vores uddrag - vælg Filer > Gem til web (Alt + Shift + Ctrl + S). Når et specifikt uddrag er valgt, kan du indstille dets eksportmuligheder i højre side af vinduet (JPG, PNG osv.). Hvis du dobbeltklikker på et specifikt fragment, vil du se et pop op-vindue " Fragment parametre" - Dette giver dig mulighed for at navngive specifikke fragmentfiler.

Som standard placeres alle billeder i: /images/ undermappe. Hvis du kun vil eksportere de uddrag, du opretter, skal du vælge " Alle brugerdefinerede fragmenter" i vinduet "Gem". Introduktion til HTML og CSS for designere

Oprettelse af et grundlæggende HTML-dokument

Vi har vores udskæringsmaskiner, lad os oprette et grundlæggende HTML-dokument. Introduktion til HTML og CSS for designere

Linje 1 : Erklærer, at HTML 5-dialekten er dokumentets sprog.

Linje 2 : element repræsenterer roden af et HTML-dokument. Dette er en obligatorisk beholder, der angiver grænserne for vores dokument.

3 : kapitel indeholder usynlige sideelementer såsom metainformation, titel osv.

Linje 4 : Dette er dokumentkodningserklæringen − utf-8 - sikkert valg - du kan læse mere om HTML-tegnkodninger her .

Linje 5 : Eksempel side Dette er sidetitlen, der vises i browserens titellinje.

6 : lukker mærket fra linje 3.

Linje 7 : Dette body-element vil indeholde alt det synlige indhold på siden.

Linje 8 : lukker mærket fra linje 2. Dette element markerer slutningen af dokumentet. Introduktion til HTML og CSS for designere

Der er andre mulige måder at kode det samme design på. Vi vil bruge HTML 5 semantiske tags (header, nav, artikel, footer) til at skabe den grundlæggende struktur i dokumentet:

Dette er layoutet oversat til HTML:

Et par bemærkninger:

Linje 11 og 12 : Elementer er essensen af internettet, som de bruges til at skabe hyperlinks . De er bundet til HREF-attributten og skal binde målet URL .

Linje 18–20 : Dette er nogle tekstformateringsmærker: betegner en overskrift på første niveau; betegner et afsnit; betyder linjeskift.

Formatering med Cascading Style Sheets (CSS).

Introduktion til HTML og CSS for designere

Når du kun åbner HTML-filen i en webbrowser, vil du se, at den ikke er formateret som vores tidligere design. Det er fordi HTML-kode ikke er nok – vi skal formatere den med Cascading Style Sheets (CSS) . CSS er et stilarkssprog, der bruges til at formatere HTML-elementer.

Men hvorfor lige præcis skal vi kombinere HTML med CCS? For nogen tid siden blev formatering opnået ved at tilføje attributter til HTML-tags. Dette resulterede dog i ulæselig og uvedligeholdelig kode. Løsningen var at adskille dokumentindholdet (HTML) fra dokumentformateringen (CSS).

Lad os opdele enkelt CSS regel :.

Vælger : Dette er HTML-elementet, du vil style. For eksempel: <artikel>

Ad : En CSS-regel kan have en eller flere erklæringer. Hver erklæring består af en egenskab og en værdi og er adskilt af et semikolon. Du placerer erklæringer i krøllede klammeparenteser {}. Introduktion til HTML og CSS for designere

Ejendom : det her stilkarakteristik, som du vil ændre. For eksempel: baggrundsfarve, størrelse skrifttype etc.

Value : Hver ejendom har en værdi tilknyttet. For eksempel: #ffcc11 (til baggrundsfarve), 16px (til skriftstørrelse) osv.

Der er mange CSS-egenskaber, som kan indstilles for hvert HTML-element, men der er ingen grund til at skrive dem alle selv. Du kan stole på din browsers standardindstillinger eller bruge et grundlæggende typografiark, der nulstiller din browser til rimelige indstillinger. Faktisk til skrive vælgere at gøre det selv kræver en masse viden og erfaring.

Lad os se på nogle CSS-regler, der er nødvendige for at formatere vores enkle design.

CSS-positioneringsegenskaber : eksisterer 4 forskellige metoder (statisk, fast, relativ og absolut), som giver os mulighed for at placere visse elementer i vores design. Efter at have indstillet en af disse metoder, kan du placere elementer ved at bruge egenskaberne for top, højre, bund og venstre - de vil fungere forskelligt afhængigt af hvilken af de 4 metoder du bruger. I dette tilfælde vil vi gerne positionere plate_image, ved brug af absolut positionering.

CSS Box Model : denne model er en ramme, der omslutter alle HTML-elementer, inklusive marginer, kanter, udfyldning og indhold. Marginen er det usynlige område omkring kanten og polstringen mellem kanten og indholdet.

Hvis du VIRKELIG vil lære mere om kodning, tage et kig til denne fede side: Codecademy .