Introduzione à HTML è CSS per i Designers

Una introduzione à HTML è CSS per i diseggiani.

Cum'è un disegnatore graficu, probabilmente sapete di a relazione sempre in evoluzione trà u disignu è a tecnulugia. Questu hè soprattuttu veru per quelli chì participanu à u web design. In questa industria, avemu bisognu di avè una cunniscenza basica di cumu i nostri layouts currettamente artighjanali diventanu pagine web viventi. Quandu avemu capitu i fundamenti di stu prucessu (è e so limitazioni), pudemu cumunicà accuratamente cù i sviluppatori è creà siti web cù perfetta pixel.

Questu ùn significa micca chì avete bisognu di sapè cumu codificà un situ web da u cima à u fondu (ancu se questu seria fantasticu!), significa solu chì avete bisognu di capisce i principii. In questu post, avemu da principià cù una introduzione assai basica à HTML. Ampararete cumu tagliate disinni web in Photoshop è formate HTML cù CSS. Introduzione à HTML è CSS per i Designers

Chì ghjè HTML?

Quasi tuttu ciò chì vede quandu navigate in u web hè un documentu HTML (Hypertext Markup Language). Ipertestu hè un testu chì riferenzi è riferenzi altri testu nantu à u vostru schermu, chì vi permettenu di accede à u cuntenutu cun un clicu simplice. Lingua di marcatura hè un inseme di tag chjusi in parentesi quadrate <>. Queste tag HTML sò generalmente in coppie:

<tag di partenza> : Hè cunnisciutu ancu u tag d'apertura.
: chjamatu ancu u tag di chjude è include una barra in avanti /

Quandu aghjunghje u cuntenutu trà sti dui tags, tuttu hè chjamatu elementu :

Questu hè un paràgrafu

Quandu sta lingua hè tradutta in Internet, i telespettatori ùn vedenu micca i tags - vederanu solu u cuntenutu trà elli.

HTML 5, a versione attuale di HTML, cuntene circa 100 tags cù attributi chì cambianu a so funzione o apparenza. Solu bisognu di sapè 30-40 di sti tag per cumincià à capiscenu è creà HTML. Fighjate à elli è nutate cumu sò raggruppati per funzione. Videmu questu in azzione.

Tagliate l'imaghjini in Photoshop.

Introduzione à HTML è CSS per i Designers

Prima di codificà, avemu bisognu di decide chì sezzioni di u situ web deve include l'imaghjini è chì ponu esse codificate. Aprovechemu strumentu Photoshop Slice (nascutu sottu sottu menu Strumenta di crop ) è mette in risaltu spazii cum'è una fotografia di un burrito è taco joan .

Avà avemu bisognu di esportà i nostri snippets - sceglite File> Salvà per u Web (Alt + Shift + Ctrl + S). Quandu un snippet specificu hè sceltu, pudete stabilisce e so opzioni d'esportazione à u latu drittu di a finestra (JPG, PNG, etc.). Se fate doppiu clicu in un fragmentu specificu, vi vede una finestra pop-up " Paràmetri di frammentu" - Stu permette à voi à nomu di schedari di frammenti specifichi.

Per automaticamente, tutte l'imaghjini sò posti in: / images / subdirectory. Se vulete esportà solu i frammenti chì create, selezziunate " Tutti i frammenti persunalizati" in a finestra "Salvà". Introduzione à HTML è CSS per i Designers

Crià un Documentu HTML Basic

Avemu i nostri slicers, creemu un documentu HTML basicu. Introduzione à HTML è CSS per i Designers

Linea 1 : Dichjara chì u dialettu HTML 5 hè a lingua di u documentu.

Linea 2 : elementu rapprisenta a radica di un documentu HTML. Il s'agit d'un récipient obligatoire qui délimite les limites de notre document.

3 : capitulu cuntene elementi di pagina invisibili cum'è meta infurmazione, titulu, etc.

Linea 4 : Questa hè a dichjarazione di codificazione di u documentu - utf-8 - scelta sicura - pudete leghje più nantu à e codificazioni di caratteri HTML ccà .

Linea 5 : Pagina di mostra Questu hè u titulu di a pagina chì appare in a barra di titulu di u navigatore.

6 : chjude u tag da a linea 3.

Linea 7 : Stu elementu corpu cuntene tuttu u cuntenutu visibile di a pagina.

Linea 8 : chjude u tag da a linea 2. Questu elementu marca a fine di u documentu. Introduzione à HTML è CSS per i Designers

Ci sò altre manere pussibuli di codificà u listessu disignu. Adupremu tag semantichi HTML 5 (header, nav, article, footer) per creà a struttura basica di u documentu:

Questu hè u layout traduttu in HTML:

Uni pochi note:

Linee 11 è 12 : L'elementi sò l'essenza di l'Internet cumu sò usati per creà hyperlinks . Sò ligati à l'attributu HREF è deve ligà u target URL .

Linee 18-20 : Eccu alcuni tag di furmatu di testu: denota un intestazione di primu livellu; denota un paràgrafu; significa una rottura di linea.

Formating cù Cascading Style Sheets (CSS).

Introduzione à HTML è CSS per i Designers

Quandu avete apertu solu u schedariu HTML in un navigatore web, vi vede chì ùn hè micca furmatu cum'è u nostru disignu precedente. Questu hè chì u codice HTML ùn hè micca abbastanza - avemu bisognu di furmatu cù Fogli di stile in cascata (CSS) . CSS hè una lingua di foglia di stile chì hè utilizata per furmà elementi HTML.

Ma perchè esattamente avemu bisognu di cumminà HTML cù CCS? Qualchì tempu fà, u furmatu hè stata ottenuta aghjustendu attributi à e tag HTML. In ogni casu, questu risultatu in codice illegibile è inmantenibile. A suluzione era di separà u cuntenutu di u documentu (HTML) da u furmatu di documentu (CSS).

Facemu una scomposizione semplice regula CSS : .

Selettore : Questu hè l'elementu HTML chì vulete stilà. Per esempiu: <article>

Annunziu : Una regula CSS pò avè una o più dichjarazioni. Ogni dichjarazione hè custituita da una pruprietà è un valore è hè siparata da un puntu e virgola. Pone dichjarazioni in parentesi curly {}. Introduzione à HTML è CSS per i Designers

Pruprietà : què hè caratteristica di stile, chì vulete cambià. Per esempiu: culore di fondo, taglia font ecc.

valore : Ogni pruprietà hà un valore assuciatu cun ella. Per esempiu: #ffcc11 (per u culore di fondo), 16px (per a dimensione di font), etc.

Ci hè parechje proprietà CSS, chì pò esse stabilitu per ogni elementu HTML, ma ùn ci hè bisognu di scrive tutti voi stessu. Pudete confià nantu à i paràmetri predeterminati di u vostru navigatore, o utilizate un fogliu di stile di basa chì resetta u vostru navigatore à paràmetri ragiunate. In fatti, à i selettori di scrittura per fà ellu stessu richiede assai cunniscenze è sperienza.

Fighjemu alcune regule CSS necessarie per furmà u nostru disignu simplice.

Proprietà di Posizionamentu CSS : esiste 4 metudi diffirenti (static, fissu, relative è assulutu) chì ci permettenu di pusà certi elementi in u nostru disignu. Dopu avè stabilitu unu di sti metudi, pudete pusà elementi cù e proprietà superiore, destra, fondu è manca - anu da travaglià in modu diversu secondu quale di i 4 metudi chì utilizate. In questu casu, vulemu pusà immagine_piatta, aduprendu assolutu pusizziunamentu.

Modellu CSS Box : stu mudellu hè un quadru chì include tutti l'elementi HTML, cumpresi marghjini, cunfini, padding è cuntenutu. U marghjenu hè l'area invisibile intornu à u cunfini è u padding trà u cunfini è u cuntenutu.

Sè veramente vulete amparà di più nantu à a codificazione, fighjate à stu situ bellu: Codecademy .