Cum să creezi un site HTML simplu?


HTML sau Limbă de marcare HyperText este, după cum spune și numele său, un limbaj de marcare. Nu este considerat a fi un limbaj de programare în sensul tradițional. Este un limbaj în care creatorul poate crea documente și marca diferite părți folosind etichete HTML. HTML a fost inspirat de SGML, iar prima sa versiune a apărut în anul 1990 la CERN.

HTML a fost inițial conceput pentru documente statice simple, încă de pe vremea când World Wide Web a fost gândit ca un sistem de recuperare a documentelor. În prezent, aproape fiecare pagină web folosește HTML și a devenit limba Web. Ultima iterație este HTML5, care este susținută de toate browserele majore și vine ca o îmbunătățire a HTML 4 care a fost „standardizată” în 1997.

Acest articol va evidenția elementele de bază ale creării unui site HTML simplu, ceva ce oricine poate învăța, indiferent de profesia aleasă.

De ce ar trebui să înveți HTML?

S-ar putea susține că, cu tehnologia de astăzi, oricine poate crea un site web cu aspect rapid și drăguț, fără a fi necesară codificarea unei singure linii de HTML și, cu toate că acest lucru este cu siguranță, poate fi întotdeauna la îndemână să știi cum să-l modifici un pic.

De multe ori, oamenii vor adăuga pluginuri / module / extensii la un CMS precum WordPress, Drupal, Joomla, etc., pentru a-l extinde cu o funcție simplă, care ar fi putut fi realizată cu câteva linii de HTML. În timp ce pluginul ar putea fi mai simplu, acesta ar putea adăuga timpii de încărcare a paginii și este un alt lucru de care să vă faceți griji în ceea ce privește securitatea și actualizările..

Este destul de ușor să înveți HTML și poate fi foarte distractiv, deoarece vezi instantaneu rezultatele, spre deosebire de un limbaj de programare în care trebuie să compilezi codul pe care l-ai scris. Aveți deja toate instrumentele necesare pentru a începe învățarea HTMLului, aveți un browser Web și cu siguranță aveți un simplu editor de text precum blocul de notă. Aplicațiile precum Microsoft Word nu o vor face, veți avea nevoie de un editor de text simplu de bază: bloc de notițe, bloc de notițe ++. Există așa-numitele IDE (Integrated Development Environment), care vă vor ajuta să scrieți HTML cu funcții precum evidențierea sintaxei sau completarea automată.

Salut Lume!

Puteți apuca un editor de text gratuit precum Notepad ++ sau Sublime Text Editor și îl puteți porni. Salvați fișierul gol pe desktop sub forma „hello.html“. Acest lucru va schimba editorul în modul HTML, astfel încât să vă puteți bucura de avantajele unui IDE. Acum mergeți mai departe și introduceți textul următor:

Salut Lume!

Salut Lume!

Salvați fișierul, apoi deschideți-l cu browserul web. Nu a fost deloc așa de greu, nu? Puteți merge înainte și modifica fișierul, îl puteți salva și reîmprospăta pagina din browserul dvs. și veți vedea toate modificările pe care le-ați făcut. Nu trebuie să vă fie frică, nu există nicio modalitate prin care să vă puteți afecta sistemul de operare. Nu puteți șterge fișiere sau lucruri de aceeași natură. Și nu vă temeți de eșecuri, după cum se spune „Stăpânul a eșuat de mai multe ori decât a încercat începătorul.”

Bazele HTML și 101

Bazele html 101

HTML este format din etichete și text. O etichetă HTML are o semnificație specială pentru browser, practic aceasta este metoda de marcare a documentului. Unele etichete pot conține alte etichete în el, cum ar fi de exemplu eticheta de listă neordonată

    poate conține elemente din listă
  • în ea. O etichetă de paragraf

    poate conține o etichetă linie nouă
    , o etichetă de ancoră , îndrăzneţ , cursiv , etichete etc..

    În exemplul nostru, eticheta HTML principală conține o etichetă de cap și o etichetă de corp. În eticheta antet, putem specifica titlul documentului, care va fi afișat în titlul filei browserului. În corp, avem o etichetă H1 sau o etichetă de la rubrica 1.

    Etichetele HTML pot avea atribute care pot modifica comportamentul etichetei, de exemplu, putem adăuga un atribut „stil” la H1-ul nostru pentru a specifica stilul său. Dacă adăugăm stil = ”color: red”, astfel devine

    Salut Lume!

    îi putem schimba culoarea de la negru implicit la roșu. Desigur, într-o pagină web mai mare, stilul elementelor noastre, unul câte unul, poate deveni problematic și va înghesui HTML-ul nostru. O metodă mai bună ar fi să dea elementului un atribut de clasă sau un id, și apoi să specifici stilul său după acea clasă sau id.

    Aici sunt o multime Tutoriale HTML și resurse pe internet, puteți viziona tutoriale pe YouTube sau The Great Curses Plus sau puteți citi unul dintre mii de articole de pe internet despre HTML.

    Un lucru de care trebuie să țineți cont este că, oricât de mult ați citit sau vizionat, va trebui să vă murdăriți mâinile și să începeți să scrieți HTML. Este singurul mod în care veți învăța, deoarece în momentul în care începeți să scrieți, veți avea mai multe întrebări și aceste întrebări vor duce la și mai multe întrebări, până când veți deveni încrezător și fluent în HTML.

    Stilare și Scripturi

    O pagină web pură HTML este statică. Aceasta înseamnă că nu poate conține piese care se schimbă dinamic, de exemplu, „Ultimele noastre știri”. Dacă creați un site web care conține o secțiune de știri, care este actualizată în mod constant, atunci pur și simplu crearea articolelor și actualizarea referințelor la acesta poate deveni o sarcină destul de mare.

    Pe de altă parte, dacă creați o carte de vizită sau despre mine tipul de site web în HTML, care nu se schimbă adesea, poate o dată sau de două ori pe lună, atunci un site HTML static este perfect. Deoarece nu are părți „în mișcare”, cum ar fi baza de date, procesarea laterală a serverului (PHP, Python, Ruby, etc.), există mai puține lucruri care să meargă greșit și, de asemenea, este rapid rapid.

    Puteți face o pagină statică dinamică adăugând JavaScript (Script ECMA a fi precis) la ea, care este un limbaj de programare pentru scripturi. Cu JavaScript, puteți răspunde la intrarea utilizatorului prin ascunderea sau afișarea unor părți ale HTML-ului, puteți modifica, de asemenea, aspectul paginii web. Cu AJAX, puteți solicita resurse suplimentare de pe site-ul dvs. web, cum ar fi subpaginile, formularul de contact sau cele mai recente Tweet-uri și le puteți încorpora în site-ul dvs..

    Stilurile HTML implicite sunt destul de plictisitoare, este text negru pe fundal alb. Puteți schimba stilul oricărui element HTML cu CSS (Cascading Style Foets). În HTML, nu dețineți controlul asupra modului în care va fi redat documentul dvs., este o caracteristică a HTMLului, nu o deficiență. Cu CSS, puteți încerca să fiți un pic mai precis, dar nu veți avea totuși un control 100%. Unele browsere vor face lucrurile un pic diferit decât altele. Versiunea CSS actuală, care este acceptată de toate browserele principale este CSS3, și are o mulțime de caracteristici utile, care le-a lipsit standardul anterior.

    Pentru a înțelege CSS, ar trebui să începeți cu modelul de casetă, vă va salva multă confuzie la început și este important pentru dvs. să înțelegeți diferența dintre graniță, umplutură, margini etc. CSS este destul de ușor de învățat și ca în cazul HTMLului, veți vedea instantaneu modificările pe care le-ați făcut. Așa cum am menționat deja, puteți adăuga un ID sau un element de clasă la orice etichetă HTML și puteți scrie reguli CSS pentru acele ID-uri și clase. Pentru a reveni la exemplul nostru, în secțiunea din cap, dacă scriem următorul text,

    corp {

    Culoare de fundal: albastru;

    }

    acesta va schimba culoarea implicită a documentului alb pe albastru.

    Un lucru de care trebuie să țineți cont de CSS este că există o mulțime de etichete specifice browserului, deci asigurați-vă că vă testați site-ul dvs. utilizând diferite browsere sau cel puțin Google Chrome, Mozilla Firefox, Internet Explorer 11 și Edge. Nu va fi rău să aruncați o privire rapidă și asupra unor browsere mobile, în special Safari IOS.

    Concluzie

    Învățarea HTML și CSS este mai ușoară decât majoritatea limbajelor de programare și poate fi o experiență foarte plină de satisfacții. Cu HTML, veți putea crea pagini web exact cum doriți să fie, fără compromisuri ca în cazurile CMS. Construirea de site-uri HTML vă va permite să le găzduiți oriunde și vor fi extrem de rapide de încărcare și de buna.

    Chiar și odată cu apariția tuturor tipurilor de construitori de site-uri DIY drag and drop, HTML nu poate fi considerat depășit. Acesta stă la baza fiecărui site web și chiar cu instrumente puternice CMS și creatoare de site-uri, care vă permit să construiți un site web cu aspect profesional, fără cunoștințe de codare, este posibil să doriți să faceți câteva modificări pe site-ul dvs. pentru a obține lucrurile exact așa cum vă doresc să fie. Învățarea unor HTML vă va permite să faceți asta.

    Cunoașterea elementelor de bază ale HTML-ului poate fi o abilitate la îndemână pentru a obține pentru oricine, nu doar pentru cei care planifică o carieră în IT. Cei care lucrează cu conținut web, marketing online, traducere și oricine necesită prezență online vor beneficia de un curs de crash în HTML.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map