Inleiding tot HTML en CSS voor ontwerpers

Een inleiding tot HTML en CSS voor ontwerpers.

Als grafisch ontwerper bent u zich waarschijnlijk bewust van de steeds evoluerende relatie tussen design en technologie. Dit geldt vooral voor degenen die betrokken zijn bij webdesign. In deze branche moeten we een basiskennis hebben van hoe onze zorgvuldig ontworpen lay-outs levende webpagina's worden. Wanneer we de basisprincipes van dit proces (en de beperkingen ervan) begrijpen, kunnen we nauwkeurig met ontwikkelaars communiceren en creëren websites met perfect pixel.

Dit betekent niet dat je moet weten hoe je een website van boven naar beneden moet coderen (hoewel dat geweldig zou zijn!), Het betekent alleen dat je de basisprincipes moet begrijpen. In dit bericht beginnen we met een zeer eenvoudige introductie tot HTML. Je leert hoe je webontwerpen in Photoshop kunt opknippen en HTML kunt opmaken met CSS. Inleiding tot HTML en CSS voor ontwerpers

Wat is HTML?

Bijna alles wat u ziet wanneer u op internet surft, is een HTML-document (HyperText Markup Language). Hypertekst is tekst die verwijst naar en verwijst naar andere tekst op uw scherm, zodat u met een simpele klik toegang krijgt tot de inhoud. Opmaaktaal is een set tags tussen vierkante haakjes <>. Deze HTML-tags komen meestal in paren:

<starttag> : Ook bekend als de openingstag.
: ook wel de afsluitende tag genoemd en bevat een schuine streep /

Wanneer u inhoud tussen deze twee tags plaatst, wordt het geheel aangeroepen element :

Dit is een paragraaf

Wanneer deze taal op internet wordt vertaald, zien kijkers de tags niet; ze zien alleen de inhoud ertussen.

HTML 5, de huidige versie van HTML, bevat ongeveer 100 tags met attributen die hun functie of uiterlijk veranderen. U hoeft slechts 30 tot 40 van deze tags te kennen om HTML te begrijpen en te maken. Bekijk ze eens en merk op hoe ze zijn gegroepeerd op functie. Laten we dit in actie zien.

Afbeeldingen snijden in Photoshop.

Inleiding tot HTML en CSS voor ontwerpers

Voordat we coderen, moeten we beslissen welke delen van de website afbeeldingen moeten bevatten en welke kunnen worden gecodeerd. Laten we profiteren hulpmiddel Photoshop Plak (verborgen onder submenu Oogstgereedschap ) en markeer gebieden zoals een foto van een burrito en taco joan .

Nu moeten we onze fragmenten exporteren - kies Bestand > Opslaan voor web (Alt + Shift + Ctrl + S). Wanneer een specifiek fragment is geselecteerd, kunt u de exportopties aan de rechterkant van het venster instellen (JPG, PNG, enz.). Als u dubbelklikt op een specifiek fragment, ziet u een pop-upvenster " Fragmentparameters" - Hiermee kunt u specifieke fragmentbestanden een naam geven.

Standaard worden alle afbeeldingen geplaatst in: /images/ submap. Als u alleen de fragmenten die u maakt wilt exporteren, selecteert u ' Alle aangepaste fragmenten" in het venster "Opslaan". Inleiding tot HTML en CSS voor ontwerpers

Een eenvoudig HTML-document maken

We hebben onze slicers, laten we een eenvoudig HTML-document maken. Inleiding tot HTML en CSS voor ontwerpers

Lijn 1 : Verklaart dat het HTML 5-dialect de taal van het document is.

Lijn 2 : element vertegenwoordigt de hoofdmap van een HTML-document. Dit is een verplichte container die de grenzen van ons document aangeeft.

3 : hoofdstuk bevat onzichtbare pagina-elementen zoals meta-informatie, titel, enz.

Lijn 4 : Dit is de documentcoderingsdeclaratie − utf-8 - veilige keuze - u kunt meer lezen over HTML-tekencoderingen hier .

Lijn 5 : Voorbeeld pagina Dit is de paginatitel die in de titelbalk van de browser verschijnt.

6 : sluit de tag vanaf lijn 3.

Lijn 7 : Dit body-element bevat alle zichtbare inhoud van de pagina.

Lijn 8 : sluit de tag vanaf regel 2. Dit element markeert het einde van het document. Inleiding tot HTML en CSS voor ontwerpers

Er zijn andere mogelijke manieren om hetzelfde ontwerp te coderen. We zullen HTML 5 semantische tags (koptekst, nav, artikel, voettekst) gebruiken om de basisstructuur van het document te creëren:

Dit is de lay-out vertaald in HTML:

Een paar opmerkingen:

Lijnen 11 en 12 : Elementen vormen de essentie van internet zoals ze worden gebruikt om te creëren hyperlinks . Ze zijn gebonden aan het HREF-attribuut en moeten het doel binden URL .

Lijnen 18–20 : Dit zijn enkele tekstopmaaktags: geeft een kop op het eerste niveau aan; geeft een paragraaf aan; betekent lijnbreuk.

Opmaak met Cascading Style Sheets (CSS).

Inleiding tot HTML en CSS voor ontwerpers

Wanneer u alleen het HTML-bestand in een webbrowser opent, zult u zien dat het niet is opgemaakt zoals ons vorige ontwerp. Dit komt omdat HTML-code niet voldoende is: we moeten deze formatteren Trapsgewijze stijlbladen (CSS) . CSS is een stijlbladtaal die wordt gebruikt om HTML-elementen op te maken.

Maar waarom moeten we HTML precies combineren met CCS? Enige tijd geleden werd de opmaak bereikt door attributen aan HTML-tags toe te voegen. Dit resulteerde echter in onleesbare en niet-onderhoudbare code. De oplossing was om de documentinhoud (HTML) te scheiden van de documentopmaak (CSS).

Laten we het eenvoudig opsplitsen CSS-regel : .

kiezer : Dit is het HTML-element dat u wilt opmaken. Bijvoorbeeld: <artikel>

Объявление : Een CSS-regel kan een of meer declaraties bevatten. Elke declaratie bestaat uit een eigenschap en een waarde en wordt gescheiden door een puntkomma. Declaraties plaats je tussen accolades {}. Inleiding tot HTML en CSS voor ontwerpers

Eigendom : dit stijl karakteristiek, die u wilt wijzigen. Bijvoorbeeld: achtergrondkleur, grootte lettertype enzovoort.

Waarde : Aan elke eigenschap is een waarde gekoppeld. Bijvoorbeeld: #ffcc11 (voor achtergrondkleur), 16px (voor lettergrootte), etc.

Er is veel CSS-eigenschappen, die voor elk HTML-element kunnen worden ingesteld, maar het is niet nodig om ze allemaal zelf te schrijven. U kunt vertrouwen op de standaardinstellingen van uw browser, of u kunt een basisstijlblad gebruiken dat uw browser terugzet naar redelijke instellingen. Sterker nog, naar selectoren schrijven zelf doen vergt veel kennis en ervaring.

Laten we eens kijken naar enkele CSS-regels die nodig zijn om ons eenvoudige ontwerp op te maken.

CSS-positioneringseigenschappen : bestaat 4 verschillende methodes (statisch, vast, relatief en absoluut) waarmee we bepaalde elementen in ons ontwerp kunnen positioneren. Nadat u een van deze methoden hebt ingesteld, kunt u elementen positioneren met behulp van de eigenschappen boven, rechts, onder en links. Deze zullen anders werken, afhankelijk van welke van de vier methoden u gebruikt. In dit geval willen we graag positioneren plaat_afbeelding, gebruik makend van absoluut positionering.

CSS Box-model : dit model is een frame dat alle HTML-elementen omsluit, inclusief marges, randen, opvulling en inhoud. De marge is het onzichtbare gebied rond de rand en de opvulling tussen de rand en de inhoud.

Als je ECHT meer wilt leren over coderen, kijk eens naar deze coole site: Codecademy .