Introduksjon til HTML og CSS for designere

En introduksjon til HTML og CSS for designere.

Som grafisk designer er du sannsynligvis klar over forholdet mellom design og teknologi i stadig utvikling. Dette gjelder spesielt for de som er involvert i webdesign. I denne bransjen må vi ha en grunnleggende forståelse av hvordan våre nøye utformede layouter blir levende nettsider. Når vi forstår det grunnleggende i denne prosessen (og dens begrensninger), kan vi kommunisere nøyaktig med utviklere og lage nettsteder med perfekt piksel.

Dette betyr ikke at du trenger å vite hvordan du koder et nettsted fra topp til bunn (selv om det ville vært flott!), det betyr bare at du må forstå det grunnleggende. I dette innlegget starter vi med en veldig grunnleggende introduksjon til HTML. Du lærer hvordan du klipper opp webdesign i Photoshop og formaterer HTML ved hjelp av CSS. Introduksjon til HTML og CSS for designere

Hva er HTML?

Nesten alt du ser når du surfer på nettet er et HTML-dokument (Hypertext Markup Language). Hypertekst er tekst som refererer til og refererer til annen tekst på skjermen, slik at du får tilgang til innholdet med et enkelt klikk. Markup language er et sett med tagger omsluttet av firkantede parenteser <>. Disse HTML-taggene kommer vanligvis i par:

<starttag> : Også kjent som åpningstaggen.
: også kalt den avsluttende taggen og inkluderer en skråstrek /

Når du omslutter innhold mellom disse to taggene, kalles det hele element :

Dette er et avsnitt

Når dette språket er oversatt til Internett, vil ikke seerne se taggene – de vil bare se innholdet mellom dem.

HTML 5, den nåværende versjonen av HTML, inneholder omtrent 100 tagger med attributter som endrer funksjon eller utseende. Du trenger bare å kunne 30-40 av disse kodene for å begynne å forstå og lage HTML. Ta en titt på dem og legg merke til hvordan de er gruppert etter funksjon. La oss se dette i aksjon.

Klipp ut bilder i Photoshop.

Introduksjon til HTML og CSS for designere

Før koding må vi bestemme hvilke deler av nettstedet som skal inneholde bilder og hvilke som kan kodes. La oss dra nytte verktøy Photoshop Slice (skjult under undermenyen Beskjæringsverktøy ) og fremhev områder som et fotografi av en burrito og taco joan .

Nå må vi eksportere utdragene våre - velg Fil > Lagre for web (Alt + Shift + Ctrl + S). Når en bestemt kodebit er valgt, kan du angi eksportalternativene på høyre side av vinduet (JPG, PNG, etc.). Hvis du dobbeltklikker på et spesifikt fragment, vil du se et popup-vindu " Fragment parametere" - Dette lar deg navngi spesifikke fragmentfiler.

Som standard er alle bilder plassert i: /images/ underkatalog. Hvis du bare vil eksportere tekstutdragene du oppretter, velger du " Alle tilpassede fragmenter" i "Lagre"-vinduet. Introduksjon til HTML og CSS for designere

Opprette et grunnleggende HTML-dokument

Vi har våre slicers, la oss lage et grunnleggende HTML-dokument. Introduksjon til HTML og CSS for designere

Linje 1 : Erklærer at HTML 5-dialekten er språket i dokumentet.

Linje 2 : element representerer roten til et HTML-dokument. Dette er en obligatorisk beholder som angir grensene for dokumentet vårt.

3 : kapittel inneholder usynlige sideelementer som metainformasjon, tittel osv.

Linje 4 : Dette er dokumentkodingserklæringen − utf-8 - trygt valg - du kan lese mer om HTML-tegnkodinger her .

Linje 5 : Eksempelside Dette er sidetittelen som vises i nettleserens tittellinje.

6 : lukker taggen fra linje 3.

Linje 7 : Dette body-elementet vil inneholde alt det synlige innholdet på siden.

Linje 8 : lukker taggen fra linje 2. Dette elementet markerer slutten av dokumentet. Introduksjon til HTML og CSS for designere

Det er andre mulige måter å kode det samme designet på. Vi vil bruke HTML 5 semantiske koder (topptekst, nav, artikkel, bunntekst) for å lage den grunnleggende strukturen til dokumentet:

Dette er oppsettet oversatt til HTML:

Noen få merknader:

Linje 11 og 12 : Elementer er essensen av Internett slik de brukes til å lage hyperkoblinger . De er bundet til HREF-attributtet og må binde målet URL .

Linje 18–20 : Dette er noen tekstformateringskoder: betegner en overskrift på første nivå; betegner et avsnitt; betyr linjeskift.

Formatering med Cascading Style Sheets (CSS).

Introduksjon til HTML og CSS for designere

Når du åpner bare HTML-filen i en nettleser, vil du se at den ikke er formatert som vårt tidligere design. Dette er fordi HTML-kode ikke er nok - vi må formatere den med Cascading Style Sheets (CSS) . CSS er et stilarkspråk som brukes til å formatere HTML-elementer.

Men hvorfor trenger vi å kombinere HTML med CCS? For en tid siden ble formatering oppnådd ved å legge til attributter til HTML-tagger. Dette resulterte imidlertid i uleselig og uopprettholdbar kode. Løsningen var å skille dokumentinnholdet (HTML) fra dokumentformateringen (CSS).

La oss nedbryte enkelt CSS-regel : .

Velger : Dette er HTML-elementet du vil style. For eksempel: <artikkel>

annonse : En CSS-regel kan ha en eller flere erklæringer. Hver erklæring består av en egenskap og en verdi og er atskilt med semikolon. Du plasserer erklæringer i krøllete klammeparenteser {}. Introduksjon til HTML og CSS for designere

Eiendom : dette er stilkarakteristikk, som du vil endre. For eksempel: bakgrunnsfarge, størrelse font etc.

Verdi : Hver egenskap har en verdi knyttet til seg. For eksempel: #ffcc11 (for bakgrunnsfarge), 16px (for skriftstørrelse), etc.

Det mange CSS-egenskaper, som kan settes for hvert HTML-element, men det er ikke nødvendig å skrive dem alle selv. Du kan stole på nettleserens standardinnstillinger, eller bruke et grunnleggende stilark som tilbakestiller nettleseren til rimelige innstillinger. Faktisk til skrive velgere å gjøre det selv krever mye kunnskap og erfaring.

La oss se på noen CSS-regler som trengs for å formatere vårt enkle design.

CSS-posisjoneringsegenskaper : finnes 4 forskjellige metoder (statisk, fast, relativ og absolutt) som lar oss plassere visse elementer i designet vårt. Etter å ha angitt en av disse metodene, kan du plassere elementer ved å bruke egenskapene topp, høyre, bunn og venstre - de vil fungere forskjellig avhengig av hvilken av de 4 metodene du bruker. I dette tilfellet ønsker vi å posisjonere plate_image, ved hjelp av absolutt posisjonering.

CSS-boksmodell : denne modellen er en ramme som omslutter alle HTML-elementer, inkludert marger, kantlinjer, utfylling og innhold. Margen er det usynlige området rundt kanten og polstringen mellom kanten og innholdet.

Hvis du VIRKELIG vil lære mer om koding, ta en titt til denne kule siden: Codecademy .