Accentsconagua

Ghidul începătorului pentru Web Design Partea 1

Cod
Share

În cadrul acestei serii veți învăța cum să creați un site folosind cele mai recente tehnici de web design (HTML5 & CSS3). Această serie este destinată celor cu absolut zero cunoștințe anterioare de design web.

Disponibile și în această serie:

  1. Ghidul începătorului pentru Web Design: Partea 1
  2. Ghidul începătorului pentru Web Design: Partea 2
  3. Ghidul începătorului pentru Web Design: Partea 3

Web browser modern

Pe măsură ce vom crea paginile web folosind cele mai recente standarde (HTML5 și CSS3), avem nevoie de un browser web modern care să poată înțelege cele mai recente tehnologii web.

Versiunile browserului Microsoft Internet Explorer de mai jos IE8 pur și simplu nu o vor tăia. Dacă utilizați IE7 sau mai puțin, descărcați unul dintre browserele web de mai jos.

Dacă utilizați deja un browser web diferit, verificați dacă respectă cerințele minime de mai jos pentru o performanță optimă.

  • Mozilla Firefox 3+
  • Google Chrome
  • Apple Safari 4+
  • Opera 10+
  • Microsoft Internet Explorer 8

"De ce am nevoie de un anumit browser?" puteți întreba. Ei bine, deoarece HTML5 este relativ nou, browserele mai vechi nu înțeleg cum să citească codul și să îl transforme corect într-o pagină Web.

Editor text

Fișierele HTML sunt doar fișiere text cu extensie .html, deci nu aveți nevoie de niciun specialist sau de un software scump precum Dreamweaver pentru a le crea. De fapt, computerul dvs. este preinstalat cu software-ul pe care îl puteți scrie în "Notepad" pe Windows sau "TextEdit" (în modul "text simplu") pe Mac.

În timp ce software-ul este preinstalat pe computer se va face, este departe de cele mai bune. Vă recomandăm să descărcați Notepad ++ dacă sunteți pe Windows sau pe TextWrangler pe Mac. Ambele programe sunt complet gratuite și oferă o serie de caracteristici utile dezvoltatorilor web, cum ar fi evidențierea sintaxelor, editarea fișierelor cu fișiere și numerotarea liniilor.

Pentru utilizatorii de Mac, vă recomand să cumpărați fie TextMate, Coda sau Espresso. Utilizatorii de Windows, încercați E-TextEditor.



Introducere în HTML

Fiecare site de pe internet este scris în Hyper-Text Markup Language (HTML). Limba HTML a crescut și a fost extinsă de-a lungul anilor, pe măsură ce web-ul a devenit mai important, iar site-urile web se găsesc în noi caracteristici.

Limba HTML este menținută de Consorțiul World Wide Web (W3C), iar cea mai recentă specificație este în prezent HTML 5, care a adăugat o serie de noi caracteristici limbii și contribuie la deschiderea către pagini Web mai interactive și cu funcții bogate.

O pagină HTML simplă arată:

    Salut Lume!   
Bună ziua și bun venit pe site-ul meu.

Codul de mai sus va crea următorul site web când este deschis într-un browser web:


HTML este un limbaj foarte simplu de învățat. Pur și simplu introduceți "etichete" în conținutul dvs. care conturează modul în care fiecare bit de conținut ar trebui să fie afișat într-un browser web.
De exemplu, introduceți etichete în pagina dvs. în care doriți să înceapă paragrafe noi, pentru a face textul o rubrică în document, pentru a insera imagini, link-uri către alte pagini de pe site sau în altă parte pe Internet etc..

Etichetele HTML sunt înfășurate în interior < > paranteze unghiulare. Privind exemplul anterior, veți vedea că fiecare "etichetă" este o pereche. Noi avem în partea de sus, și în partea de jos.
informează browserul web că tot ce se află în perechea de etichete este codul HTML. eticheta spune browser-ului conținutul HTML sa încheiat. "Slash" din ultima etichetă indică acest lucru ca eticheta "închidere".

NOTĂ: line trebuie să fie inclus în partea de sus a oricărui HTML5 pentru ca acesta să fie considerat cod "valid". Această linie afișează browserului web Tipul de document al restului paginii - cu alte cuvinte, ce versiune a documentului HTML este marcată în așa fel încât browserul să poată reda corect.

... secțiunea imediat următoare este locul în care plasați informații despre pagina web care nu va fi afișată în pagina principală însăși, dar conține metadatele despre pagina dvs. pentru browser.

În interiorul secțiunea, avem textul "Bună ziua, lumea!" înfășurat înăuntru ... Etichete.
conține literalmente titlul paginii web actuale, care este utilizat de browserul web pentru a numi fereastra / fila:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Urmărind <head> secțiune, avem <body>. Acesta este locul în care este plasat conținutul real al paginii dvs. web. În corpul nostru avem <p> etichetați cu un text binevenit în interior.<br><p> marchează un paragraf pe pagina dvs. De exemplu:</p> <pre> <p>Odată, într-un pământ departe, departe, trăia o prințesă care a trăit fericită după aceea.</p> <p>sfarsit.</p></pre> <p>Marchează două paragrafe din text. Dacă am vedea acest lucru într-un browser, vom vedea următoarele:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>S-ar putea să te întrebi de ce avem nevoie de ele <p> și </p> pentru a afișa un paragraf. Ei bine, dacă nu am făcut-o, și am scris pagina web astfel:</p> <pre> Odată, într-un pământ departe, departe, trăia o prințesă care a trăit fericită după aceea. sfarsit.</pre> <p>Pagina va arăta astfel într-un browser:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>După cum puteți vedea, browserul ignoră orice formatare pe care o facem în fișier. S-ar putea să scriem exemplul nostru de pagină web după cum urmează și va afișa același lucru în browser:</p> <pre> <!doctype html><html><head><title>Salut Lume!

Bună ziua și bun venit pe site-ul meu

Browserul este interesat doar de ceea ce etichetele HTML îi spun să facă. Acesta va ignora orice spații libere pe care le includeți în document (spații suplimentare, file, linii noi etc.)

Crearea unei pagini web simple


Acum înțelegeți foarte multe lucruri de bază ale HTML, să facem prima noastră pagină Web! Imaginea de mai sus este ceea ce va arăta în cele din urmă în această pagină.

Creați un nou dosar undeva pe computer și numiți-l "html-from-zero". Utilizând editorul de text preferat, creați un nou fișier gol și salvați-l în acest director ca "my-first-webpage.html".
Introduceți următoarele în fișier:

    HTML de la zero

Cele de mai sus reprezintă un aspect de bază al fișierului HTML 5. Am declarat tipul de document pe prima linie, ne-am deschis și tag-uri și setați "HTML From Scratch" ca titlu pentru pagină. Apoi închidem capul și deschidem corpul.

Pe linia 7 am inclus un comentariu. Utilizați comentariile pentru a lăsa informații suplimentare în codul dvs. care nu vor fi afișate în pagina dvs. Web. Marcați un comentariu prin împachetarea textului înăuntru Etichete.

În cele din urmă, închidem corpul deschis și etichetele html pentru a termina documentul.

Antet

Scoateți line din codul sursă și tastați următoarele:

  
HTML de la zero

tag este un element nou introdus în HTML5 care există pentru marcarea și structura secțiunii "header" a unei pagini web. Antetul este secțiunea de sus a unei pagini Web, de obicei unde este numele site-ului.

Înainte de HTML5 am folosit

și
(sau ceva similar), dar nu voi intra în detalii despre specificațiile mai vechi ale HTML, deoarece învățăm cel mai recent standard.

IMPORTANT: nu trebuie confundat cu . Sunt ambele etichete complet diferite.

În interiorul antetului nostru includeți a

etichetă. H1 este utilizat pentru a marca poziția principală a paginii dvs. (în acest caz, numele site-ului nostru). HTML conține etichete antet de la 1-6, cu

fiind cel mai mare, cel mai important titlu de pe pagina de jos

.


Navigare

Apoi, vom marca meniul de navigare pentru site. După închidere , introduceți următoarele:

Această bucată de cod poate părea puțin înfricoșătoare, dar haideți să o rupem. Blocul de mai sus marchează o zonă de navigare (