Introducció a HTML i CSS per a dissenyadors

Una introducció a HTML i CSS per a dissenyadors.

Com a dissenyador gràfic, probablement sou conscients de la relació en constant evolució entre disseny i tecnologia. Això és especialment cert per a aquells que participen en el disseny web. En aquesta indústria, hem de tenir una comprensió bàsica de com els nostres dissenys dissenyats amb cura es converteixen en pàgines web vives. Quan entenem els conceptes bàsics d'aquest procés (i les seves limitacions), podem comunicar-nos amb precisió amb els desenvolupadors i crear llocs web amb perfecte píxel.

Això no vol dir que hàgiu de saber codificar un lloc web de dalt a baix (tot i que això seria fantàstic!), només vol dir que heu d'entendre els fonaments bàsics. En aquesta entrada, començarem amb una introducció molt bàsica a HTML. Aprendràs a retallar dissenys web a Photoshop i formatar HTML amb CSS. Introducció a HTML i CSS per a dissenyadors

Què és HTML?

Gairebé tot el que veieu quan navegueu per la web és un document HTML (Hipertext Markup Language). Hipertext és un text que fa referència i fa referència a un altre text de la pantalla, la qual cosa us permet accedir al contingut amb un simple clic. Llenguatge de marques és un conjunt d'etiquetes entre claudàtors <>. Aquestes etiquetes HTML solen venir per parelles:

<etiqueta d'inici> : També coneguda com a etiqueta d'obertura.
: també s'anomena etiqueta de tancament i inclou una barra inclinada /

Quan afegiu contingut entre aquestes dues etiquetes, es diu tot element :

Aquest és un paràgraf

Quan aquest idioma es tradueix a Internet, els espectadors no veuran les etiquetes, només veuran el contingut entre elles.

HTML 5, la versió actual d'HTML, conté unes 100 etiquetes amb atributs que canvien la seva funció o aspecte. Només necessiteu saber entre 30 i 40 d'aquestes etiquetes per començar a entendre i crear HTML. Fes-hi una ullada i observeu com s'agrupen per funció. Vegem-ho en acció.

Retallar imatges amb Photoshop.

Introducció a HTML i CSS per a dissenyadors

Abans de codificar, hem de decidir quines seccions del lloc web han d'incloure imatges i quines es poden codificar. Aprofitem eina Photoshop Llesca (amagat al submenú Eina de retall ) i ressaltar àrees com ara una fotografia d'un burrito i taco joan .

Ara hem d'exportar els nostres fragments: trieu Fitxer > Desa per al web (Alt + Maj + Ctrl + S). Quan se selecciona un fragment específic, podeu definir les seves opcions d'exportació a la part dreta de la finestra (JPG, PNG, etc.). Si feu doble clic en un fragment específic, veureu una finestra emergent " Paràmetres de fragments" - Això us permet anomenar fitxers de fragments específics.

Per defecte, totes les imatges es col·loquen al subdirectori: /images/. Si voleu exportar només els fragments que creeu, seleccioneu " Tots els fragments personalitzats" a la finestra "Desa". Introducció a HTML i CSS per a dissenyadors

Creació d'un document HTML bàsic

Tenim els nostres slicers, creem un document HTML bàsic. Introducció a HTML i CSS per a dissenyadors

Línia 1 : Declara que el dialecte HTML 5 és l'idioma del document.

Línia 2 : element representa l'arrel d'un document HTML. Aquest és un contenidor obligatori que denota els límits del nostre document.

3 : capítol conté elements de pàgina invisibles com ara metainformació, títol, etc.

Línia 4 : Aquesta és la declaració de codificació del document − utf-8 - elecció segura: podeu llegir més informació sobre les codificacions de caràcters HTML aquí .

Línia 5 : Pàgina de mostra Aquest és el títol de la pàgina que apareix a la barra de títol del navegador.

6 : tanca l'etiqueta de la línia 3.

Línia 7 : Aquest element del cos contindrà tot el contingut visible de la pàgina.

Línia 8 : tanca l'etiqueta de la línia 2. Aquest element marca el final del document. Introducció a HTML i CSS per a dissenyadors

Hi ha altres maneres possibles de codificar el mateix disseny. Utilitzarem etiquetes semàntiques HTML 5 (capçalera, navegació, article, peu de pàgina) per crear l'estructura bàsica del document:

Aquest és el disseny traduït a HTML:

Unes quantes notes:

Línies 11 i 12 : Els elements són l'essència d'Internet ja que s'utilitzen per crear hiperenllaços . Estan vinculats a l'atribut HREF i han d'enllaçar l'objectiu URL .

Línies 18-20 : Aquestes són algunes etiquetes de format de text: denota un encapçalament de primer nivell; denota un paràgraf; significa salt de línia.

Format amb fulls d'estil en cascada (CSS).

Introducció a HTML i CSS per a dissenyadors

Quan obriu només el fitxer HTML en un navegador web, veureu que no té el format del nostre disseny anterior. Això es deu al fet que el codi HTML no és suficient; hem de formatar-lo Fulls d'estil en cascada (CSS) . CSS és un llenguatge de fulls d'estil que s'utilitza per formatar elements HTML.

Però, per què necessitem combinar HTML amb CCS? Fa un temps, el format es va aconseguir afegint atributs a les etiquetes HTML. Tanmateix, això va donar lloc a un codi illegible i inmantenible. La solució va ser separar el contingut del document (HTML) del format del document (CSS).

Anem a desglossar senzillament Regla CSS :.

Selector : Aquest és l'element HTML al qual voleu estilitzar. Per exemple: <article>

Anunci : Una regla CSS pot tenir una o més declaracions. Cada declaració consta d'una propietat i un valor i està separada per un punt i coma. Col·loqueu les declaracions entre claus {}. Introducció a HTML i CSS per a dissenyadors

Propietat : Això característica d'estil, que voleu canviar. Per exemple: color de fons, mida Font etc.

Valor : Cada propietat té un valor associat. Per exemple: #ffcc11 (per al color de fons), 16px (per a la mida de la lletra), etc.

Hi moltes propietats CSS, que es pot configurar per a cada element HTML, però no cal escriure'ls tots vosaltres mateixos. Podeu confiar en la configuració predeterminada del vostre navegador o utilitzar un full d'estil bàsic que restableixi el vostre navegador a una configuració raonable. De fet, a selectors d'escriptura fer-ho tu mateix requereix molts coneixements i experiència.

Vegem algunes regles CSS necessàries per formatar el nostre disseny senzill.

Propietats de posicionament CSS : existeix 4 mètodes diferents (estàtiques, fixes, relatius i absoluts) que ens permeten posicionar determinats elements en el nostre disseny. Després de configurar un d'aquests mètodes, podeu col·locar els elements amb les propietats superior, dreta, inferior i esquerra; funcionaran de manera diferent segons quin dels 4 mètodes que feu servir. En aquest cas ens agradaria posicionar-nos imatge_placa, utilitzant absolut posicionament.

Model de caixa CSS : aquest model és un marc que inclou tots els elements HTML, inclosos els marges, les vores, el farciment i el contingut. El marge és l'àrea invisible al voltant de la vora i el farciment entre la vora i el contingut.

Si realment voleu aprendre més sobre la codificació, fes un cop d'ull a aquest lloc fantàstic: Codecademy .