kako Code Web stranica od nule! 5 jednostavnih koraka
Lucas Bennett
โก Pametni saลพetak
Kodiranje web stranice od nule znaฤi izgradnju njezinih stranica izravno pomoฤu HTML-a, CSS-a i ฤesto JavaSkripta i PHP, umjesto koriลกtenja alata za izradu. Obuhvaฤa HTML strukturu, CSS stiliziranje, ureฤivaฤe i kada je framework ili WordPress bolji izbor.
Koje su razliฤite vrste programskih jezika?
Programski jezici za web stranice spadaju u dvije glavne kategorije, naime Frontend i backend. Jezik koji se koristi za programiranje web stranice za suฤelje je HTML, CSS i JavaSkripta.
Frontend jezici ukljuฤuju
- Oznaฤni jezik HyperText (HTML) โ Ovaj se jezik koristi za formatiranje web stranica i organizaciju elemenata na web stranici. Sastoji se od otvarajuฤih i zatvarajuฤih oznaka od kojih svaka ima svoju zadaฤu. Na primjer, oznaka naslova koristi se za pisanje naslova web stranice u adresnu traku.
- Kaskadni listovi stilova (CSS) โ Kao ลกto naziv sugerira, CSS se koristi za stiliziranje web stranica. Na primjer, moลพete koristiti CSS za definiranje font web stranice, veliฤina fonta, boje itd. CSS se moลพe napisati u jednoj datoteci i uvijek iznova koristiti na brojnim elementima na web stranici.
- JavaSkripta (JS) - JavaSkripta se koristi kako bi web stranice bile interaktivnije. Recimo da ste kreirali gumb i ลพelite da prikaลพe poruku kada se klikne. Moลพete koristiti JavaSkripta za pisanje te funkcije.
Pozadinski jezici
Pozadina se moลพe kodirati na bilo kojem jeziku koji podrลพava web razvoj. Moลพete koristiti JavaSkripta na strani posluลพitelja koristeฤi NodeJS, Python, Ruby ili PHP. Jedan od najฤeลกฤe koriลกtenih programa za izradu web stranica je PHP. U ovom vodiฤu usredotoฤit ฤemo se na PHP kao skriptni jezik.
PHP:
PHP je kratica za Hypertext Preprocessor. Za razliku od frontend tehnologija koje se izvrลกavaju u web pregledniku, PHP se izvrลกava na web posluลพitelju. Obiฤno se koristi za izvoฤenje aktivnosti kao ลกto su registracija korisnika, autentifikacija korisnika, slanje e-poลกte itd.
kako Code Web stranica โ Potpuni vodiฤ za poฤetnike
U ovom opseลพnom vodiฤu nauฤit ฤemo vas kako napraviti web stranicu od nule i sami napisati sav kod ili moลพete koristiti postojeฤu platformu kao ลกto je WordPress ili Joomla itd.
U ovom cjelovitom vodiฤu obradit ฤemo sljedeฤe teme.
- Stvaranje od nule vs. pomoฤu sustava za upravljanje sadrลพajem
- Izrada web stranice od nule pomoฤu okvira (PHP MVC Framework)
- Izrada web stranice pomoฤu sustava za upravljanje sadrลพajem (WordPress)
Osnovni koncept HTML-a
HTML dokument je tekstualna datoteka koja sadrลพi HTML oznake i elemente i obiฤno zavrลกava datoteฤnim nastavkom .html.
HTML se takoฤer moลพe ugraditi u ekstenzije datoteka drugih skriptnih jezika kao ลกto su *.php, *.jsp ili *.asp.
Web preglednici analiziraju HTML dokumente za prikaz web stranica. U web pregledniku moลพete vidjeti HTML koji ฤini web stranicu.
Evo koraka koji ฤe vam pomoฤi da napravite web stranicu:
Korak 1) Kliknite desnom tipkom miลกa na web-stranicu za prikaz skoฤnog izbornika.
Korak 2) Odaberite Prikaลพi izvor stranice.
Korak 3) HTML kรดd bit ฤe prikazan u obiฤnom tekstu, a moลพete vidjeti HTML oznake i elemente koji ฤine stranicu.
Takoฤer moลพete vidjeti neke CSS i JavaSkripta je ili ugraฤena ili ukljuฤena kao zasebne vanjske datoteke.
Funkcija web preglednika je prevoฤenje HTML dokumenta u format ฤitljiv ljudima. Preglednik takoฤer obraฤuje JavaSkripta koja je ukljuฤena u web stranicu.
Razumijevanje strukture HTML dokumenta
Pretpostavimo da ste prije stvorili Word dokument. U tom sluฤaju, razumijevanje strukture HTML dokumenta bit ฤe vam priliฤno jednostavno. U Word dokumentu imat ฤete naslov dokumenta, sadrลพaj na koji se moลพe kliknuti, drugaฤije oblikovane odjeljke sadrลพaja i podnoลพje. Struktura HTML dokumenta manje-viลกe je ista kao Word dokument koji smo upravo opisali.
Svi HTML dokumenti su zatvoreni u HTML oznaku. Unutar HTML oznake imat ฤete druge oznake kao ลกto su glava i tijelo. Oznaka zaglavlja sadrลพi druge oznake, kao ลกto je naslov za prikaz naslova stranice. Takoฤer ukljuฤuje veze na vanjske datoteke za CSS stilove, JavaSkripta i metapodaci. Oznaka body sadrลพi elemente koji ฤine web stranicu. Elementi unutar oznake body mogu biti div, tablice, liste itd.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to create a website for beginners</title>
<meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
<meta name="author" content="Guru99">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h3>Welcome to my first webpage</h3>
</body>
</html>
Objaลกnjenje:
- definira tip dokumenta koji je HTML
- โฆ definira HTML oznaku s atributom jezika koji odreฤuje jezik web stranice.
- U ovom jednostavnom primjeru, jezik web stranice je engleski. Unutar otvorene i zavrลกne HTML oznake, imat ฤemo oznake kao ลกto su glava i tijelo, koje pak okruลพuju druge oznake i elemente.
- โฆ definira oznaku glave koja unutar sebe sadrลพi metapodatke.
- โฆ definira tijelo koje sadrลพi sadrลพaj web stranice.
Upoznajte CSS selektore
CSS selektori odabiru elemente na web stranici koje ลพelite oblikovati na temelju definiranih CSS pravila.
CSS selektori kategorizirani su u pet glavnih kategorija, naime:
- Jednostavni selektori: Ovi biraฤi se koriste za odabir elemenata na temelju atributa kao ลกto su id, naziv ili klasa.
- CSS kombinator: Kao ลกto naziv sugerira, ova vrsta selektora odabire element na temelju kombinacije povezanih elemenata. Na primjer, ovu metodu moลพete koristiti za odabir samo elemenata odlomaka koji se nalaze unutar div elemenata.
- CSS pseudo-klase: Ovi selektori rade na temelju stanja elementa. Na primjer, zadrลพite pokazivaฤ iznad hiperveze. Moลพete promijeniti njegovu boju pozadine kako biste korisniku pokazali gdje je trenutno usmjeren. Dakle, kada korisnik odmakne miลก od hiperveze, oblikovanje se automatski uklanja.
- CSS pseudoelementi: Ovaj biraฤ se koristi za odabir odreฤenih dijelova iz elementa. Na primjer, moลพete koristiti selektor pseudoelemenata da poveฤate prvo slovo prve rijeฤi u svakom odlomku i ostavite ostala slova netaknuta.
- CSS atribut: Ovaj selektor radi na temelju atributa primijenjenih na elemente ili specifiฤnih vrijednosti atributa. Na primjer, moลพete koristiti selektor CSS atributa za formatiranje svih HTML gumba u zelenu boju pozadine koja sadrลพi vrijednost atributa "poลกalji". To ฤe primijeniti zelena boja pozadine za gumbe koji imaju vrijednost atributa postavljenu za slanje.
Sastavite CSS stilsku tablicu
Ovaj odjeljak ฤe stvoriti jednostavan dokument u CSS stilu koji izvodi jednostavno stiliziranje definiranjem sljedeฤih pravila stiliziranja.
- Srediลกnji tekst na temelju srediลกta klase: Ovo pravilo ฤe centrirati tekst i promijeniti boju teksta u crvenu.
- Oblikujte tekst na temelju ID-a elementa: Napravit ฤemo stilsko pravilo za ID naslov koji ฤe promijeniti boju u naranฤastu, podebljati teลพinu fonta i promijeniti velika slova u tekstu.
- Oblikujte tekst na temelju elementa naslova broj 2: Ovo pravilo postavit ฤe boju teksta naslova na plavu i postaviti veliฤinu fonta od 60 piksela.
Sljedeฤi kod definira CSS dokument s gornjim pravilima.
.center {
text-align: center;
color: red;
}
#title {
color: orange;
text-transform: uppercase;
font-weight: bold;
}
h2 {
font-size: 60px;
color: blue;
}
Objaลกnjava:
- .center {โฆ} โ definira centar pravila klase koji poravnava tekst u sredini i mijenja boju fonta.
- #title {โฆ} โ definira pravilo naslova koje mijenja boju fonta, pretvara sva slova u velika slova i mijenja teลพinu fonta u podebljano.
- h2 {โฆ} โ definira pravila koja ฤe se primjenjivati โโna sve h3 elemente. Veliฤina fonta bit ฤe postavljena na 60 piksela, a boja fonta bit ฤe aลพurirana na plavu.
Preuzmi/instaliraj Bootstrap
Bootstrap je CSS framework koji dolazi s velikim brojem stilova koje moลพete odmah poฤeti koristiti. Sadrลพi stilove za rasporede i elemente oblikovanja.
Moลพete napisati svoje CSS stilove koji prilagoฤavaju zadane postavke bootstrap CSS okvira. Za to moลพete ili preuzeti Bootstrap izravno sa sluลพbene web stranice ili ga moลพete ukljuฤiti u svoj HTML dokument iz mreลพe za isporuku sadrลพaja (CDN).
Alternativno, za instalaciju moลพete koristiti alat za upravljanje paketima kao ลกto je Node Package Manager (NPM). Bootstrap, ali ovo je za napredne web programere. Za preuzimanje Bootstrap, moลพete kliknuti ovo povezati ovdje i koristite ga u svom projektu baลก kao i svaki drugi CSS i JavaDatoteka skripte.
Nauฤit ฤemo kako ga koristiti u odjeljku u nastavku kada budemo razmatrali izradu vaลกe prve web stranice.
Uloga HTML-a i CSS-a
Uloga HTML-a je pruลพiti strukturu web stranicama. Web preglednici koriste ovu strukturu za prikaz sadrลพaja koji se moลพe prezentirati korisnicima. Drugo, pauci traลพilice koriste HTML strukturu za navigaciju web stranicom i njeno indeksiranje.
Uloga CSS-a je pruลพiti sadrลพaju stil tako da bude vizualno privlaฤan korisnicima.
Razumijevanje uobiฤajenih HTML pojmova
Pogledajmo sada neke od uobiฤajenih HTML izraza s kojima biste trebali biti upoznati kao web programer.
| S / N | Termin | Description |
|---|---|---|
| 1 | Element | Elementi su kljuฤne rijeฤi koje se koriste za definiranje specifiฤnih struktura i sadrลพaja web stranice. Na primjer, element H3 koristi se za definiranje strukture naslova. Drugi primjeri elemenata ukljuฤuju odlomke (p), sidra (a) i spremnike (div) itd. |
| 2 | Pojam | Oznake su oznake koje oznaฤavaju poฤetak i kraj elementa. Oznake ukljuฤuju kljuฤne rijeฤi elemenata u uglastim zagradama. Na primjer, stavak je oznaka odlomka gdje je poฤetna oznaka i je zavrลกna oznaka. |
| 3 | Atribut | Atributi su svojstva elemenata koja pruลพaju dopunske informacije. Na primjer, moลพemo koristiti id atribut da damo jedinstveno ime elementu. ID se moลพe koristiti u CSS-u ili JavaSkripta. |
| 4 | Hyperlink | Hiperveza je poveznica na koju se moลพe kliknuti i koja otvara novu web stranicu. Moลพete ga izraditi pomoฤu elementa sidra. |
| 5 | Glava | Head tag sadrลพi informacije skrivene od korisnika, ali korisne za web preglednik i traลพilice. |
| 6 | Tijelo | Oznaka body sadrลพi informacije koje su vidljive korisniku u web pregledniku. |
| 7 | Footer | Oznaka podnoลพja sadrลพi informacije koje se prikazuju u odjeljku podnoลพja web stranice. |
| 8 | Komentar | Komentari se koriste za dokumentiranje i objaลกnjenje HTML koda, a preglednik ih zanemaruje prilikom analize HTML dokumenta. |
| 9 | div | Div je element spremnika koji se koristi za stvaranje izgleda. |
| 10 | Naslov | Oznaka naslova koristi se za stvaranje HTML naslova. |
| 11 | Prekid crte | Ovaj se element koristi za stvaranje novog prijeloma retka. |
| 12 | linkovi | Veze se koriste za ukljuฤivanje drugih datoteka kao ลกto su vanjske CSS datoteke u HTML dokumente. |
| 13 | Metadata | Oznaka metapodataka pruลพa dodatne informacije o web stranici koje su najkorisnije botovima traลพilice. |
| 14 | Popis | Oznaka liste koristi se za izradu liste. Popis moลพe biti sreฤen ili nesreฤen. |
| 15 | stav | Element odlomka koristi se za prikaz tekstualnih podataka u formatu odlomka |
| 16 | Stol | Ovaj element se koristi za izradu tablice |
| 17 | Naslov | Kao ลกto naslov sugerira, koristi se za postavljanje naslova web stranice. |
| 18 | Oblik | Oznaka obrasca koristi se za stvaranje obrazaca koje moลพemo koristiti za dobivanje unosa od korisnika. |
| 19 | Script | Oznaka skripte povezuje s vanjskim JavaSkripta ili inline JavaKod skripte unutar HTML dokumenta. |
| 20 | AJAX | AJAX je kratica za Asynchronous JavaSkripta i XML. To je tehnologija koja se koristi za aลพuriranje odreฤenih dijelova web stranice bez ponovnog uฤitavanja cijele stranice. |
Razumijevanje uobiฤajenih CSS pojmova
Slijede neki od uobiฤajenih CSS izraza s kojima morate biti upoznati.
| S / N | Termin | Description |
|---|---|---|
| 1 | Selektor | Ovo se odnosi na CSS odgovoran za odabir elemenata HTML dokumenta koje ลพelimo formatirati. |
| 2 | Nekretnine | Svojstva se odnose na atribut elementa za koji ลพelimo postaviti vrijednost. |
| 3 | Vrijednosti | Baลก kao ลกto naziv sugerira, mi dodjeljujemo vrijednost svojstvu u svrhu stiliziranja. |
| 4 | Komentar | Komentari se koriste za dokumentiranje i objaลกnjenje CSS koda |
| 5 | Skup pravila | Odnosi se na potpuni odjeljak CSS koda sastavljen od selektora, deklaracijske zagrade, svojstava i odgovarajuฤih vrijednosti. |
| 6 | izjava | Ovo se odnosi na jednu liniju koda unutar CSS dokumenta |
| 7 | Deklaracijski blok | Ovo se odnosi na odjeljak CSS-a koji definira stilska pravila. Nalazi se izmeฤu vitiฤastih zagrada. |
| 8 | Rijeฤ | Ovo je rezervirana rijeฤ koja ima posebno znaฤenje u CSS-u. Na primjer, rijeฤ auto ima posebno znaฤenje, stoga je kljuฤna rijeฤ |
| 9 | Odabir atributa | Selektor odabire element na temelju vrijednosti atributa. |
| 10 | Univerzalni selektor | Ovaj biraฤ se koristi za podudaranje bilo kojeg elementa unutar zadanog konteksta. Kontekst se obiฤno primjenjuje na roditeljski element poput popisa tako da sve stavke unutar popisa mogu naslijediti stil od roditelja |
| 11 | Id Selector | Ovaj selektor odabire na temelju ID-a elementa. |
| 12 | Selektor klase | Ovaj biraฤ vrลกi odabir na temelju vrijednosti ili vrijednosti atributa klase. |
| 13 | Biraฤ vrste elementa | Ovaj se biraฤ temelji na vrsti elementa koji se koristi u HTML dokumentu. |
HTML ureฤivaฤi
HTML editor je program koji se koristi za pisanje i ureฤivanje HTML koda. Moลพete koristiti bilo koji ureฤivaฤ teksta za pisanje HTML koda, ali HTML ureฤivaฤi dolaze s mnogim ugraฤenim znaฤajkama koje olakลกavaju pisanje koda.
Pogledajmo neke od popularnih izbora:
Visual Studio Code
Visual Studio Code je viลกeplatformski ureฤivaฤ koda koji je razvio Microsoft. Moลพete koristiti Visual Studio Code za ureฤivanje koda za mnoge jezike, ukljuฤujuฤi HTML, CSS, JavaSkripta i PHP. Visual Studio Code je besplatan i radi dalje Windows, Mac i Linux.
Sublime Text
Sublime Text je viลกeplatformski ureฤivaฤ koda koji se takoฤer moลพe koristiti za pisanje i ureฤivanje HTML-a, CSS-a, JavaSkripta i PHP kod. To je komercijalni proizvod i morate ga kupiti. Takoฤer ga moลพete besplatno koristiti u neregistriranom naฤinu rada.
Notepad++
Notepad++ je lagani ureฤivaฤ koda koji takoฤer podrลพava mnoge jezike. Za razliku od Visual Studio Code i Sublime Text, Notepad++ nije viลกeplatformski. Djeluje samo na Microsoft Windows platforma.
NetBeans IDE
NetBeans je integrirano razvojno okruลพenje (IDE) koje nudi viลกe moguฤnosti od obiฤnog ureฤivaฤa koda. NetBeans je besplatan i viลกeplatformski.
Izrada vaลกe prve web stranice
Kreirajmo sada jednostavnu web stranicu. Ovdje smo izradili jednostavan HTML dokument i primijenili neki stil koristeฤi Bootstrap CSS. Takoฤer ฤemo imati klikabilni gumb koji ฤe prikazati jednostavnu poruku pomoฤu JavaSkripta.
Evo koraka koji ฤe vam pomoฤi da nauฤite kako napraviti web stranicu od nule:
Korak 1) Otvorite svoj omiljeni ureฤivaฤ teksta.
Evo, otvaramo notepad.
Korak 2) Stvorite novu datoteku.
pod nazivom index.html.
Korak 3) Dodajte sljedeฤi kod,
u datoteku index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>My First Web Page</title>
<script>
function displayMessage() {
document.getElementById("message").innerHTML = "Greetings from JavaScript!";
}
</script>
</head>
<body>
<div class="container">
<h1>My Web App!</h1>
<p id="message">Your message will appear here.</p>
<button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
</div>
</body>
</html>
Objaลกnjenje:
- definira tip dokumenta.
- โฆ definira head tag koji sadrลพi metapodatke koji su nevidljivi korisnicima.
- Glava takoฤer sadrลพi oznaku skripte koja sadrลพi JavaKod skripte koji prikazuje pozdravnu poruku.
- Takoฤer utovarujemo Bootstrap CSS iz CDN mreลพe.
- โฆ definira sadrลพaj naลกe stranice: naslov, odlomak i gumb koji primjenjuje neki stil iz Bootstrap css.
Stvaranje od nule vs. pomoฤu sustava za upravljanje sadrลพajem
Izrada web stranice od nule zahtijeva vjeลกtine i odgovarajuฤe znanje. Takoฤer oduzima viลกe vremena i moลพe stajati mnogo novca.
S druge strane, ne morate biti vjeลกti programer da biste izradili svoju web stranicu pomoฤu sustava za upravljanje sadrลพajem kao ลกto je WordPress. Sustavi za upravljanje sadrลพajem sliฤni su aplikacijama poput Microsoft Word.
Sa sustavom za upravljanje sadrลพajem usredotoฤujete se na stvaranje stranica, pisanje sadrลพaja i objavljivanje sadrลพaja, baลก kao ลกto stvarate dokumente u rijeฤima i ispisujete ih na pisaฤ.
Sljedeฤa tablica usporeฤuje dvije popularne metode izrade web stranica.
| S / N | Za/Protiv | Stvaranje od nule | Koriลกtenje sustava za upravljanje sadrลพajem |
|---|---|---|---|
| 1 | Vrijeme | Zahtijeva puno vremena. | Potrebno je malo vremena. Moลพe se izraditi za manje od 24 sata. |
| 2 | Troลกak | Angaลพiranje vjeลกtog programera moลพe biti skupo. | Moลพete to uฤiniti sami ili unajmiti nekoga da vam ga izradi. |
| 4 | Vjeลกtine | Zahtijeva iskusnog i vjeลกtog programera | Zahtijeva manje vjeลกtina. Za to morate biti informatiฤki pismeni. |
| 5 | Sigurnost | Hakeri ne mogu lako pronaฤi slabosti u kodu kako bi ih iskoristili. | Hakeri mogu lako pronaฤi slabosti u kodu i iskoristiti ih. Redovita aลพuriranja vaลพna su iz sigurnosnih razloga. |
| 6 | Brzina | Imaju tendenciju da budu brลพi jer se samo znaฤajke koje su potrebne uฤitavaju tijekom izvoฤenja. | Obiฤno su sporiji jer Sustav za upravljanje sadrลพajem dolazi kao rjeลกenje opฤe namjene koje moลพe uฤitati znaฤajke koje vam nisu nuลพno potrebne. |
| 7 | odrลพavanje | Jednostavan za odrลพavanje jer se aลพuriranja vrลกe samo kada su potrebna | Zahtijeva viลกe posla jer morate redovito aลพurirati CMS zbog sigurnosnih razloga. |
| 8 | Optimizacija za traลพilice (SEO) | Zahtijeva viลกe posla, a programera treba podsjetiti jer veฤina programera nije SEO struฤnjak | Veฤina sustava za upravljanje sadrลพajem isporuฤuje se s SEO alatima odmah po otvaranju. Dodatne znaฤajke mogu se jednostavno dodati pomoฤu dodataka. |
Koriลกtenje okvira (PHP MVC okvir)
U ovom odjeljku ฤemo pogledati kako moลพemo izraditi naลกu web stranicu od nule. Svaka web stranica mora koristiti frontend tehnologije kao ลกto su HyperText Markup Language (HTML), JavaSkripta i Cascading Style Sheets (CSS).
Pozadina ima viลกe opcija za programske jezike. Moลพete koristiti PHP, Python, Ruby, JavaSkripta, itd. PHP je jedan od najฤeลกฤih. U ovom dijelu ฤemo govoriti o PHP tehnologijama.
Moลพete koristiti PHP jer je to spor proces, pa ฤak i programeri koji izraฤuju web stranice od nule moraju koristiti razvojni okvir. Najpopularniji je Model-View-Controller (MVC) okvir. Primjeri PHP MVC okvira ukljuฤuju Laravel, CodeIgniter, Cake PHP, Symfony, itd.
MVC okviri pruลพaju sljedeฤe znaฤajke:
- Ugraฤena povezivost baze podataka s bibliotekama: Ovo vam ลกtedi vrijeme za pisanje koda za sigurno povezivanje s bazom podataka za pisanje i dohvaฤanje podataka.
- Ugraฤeni moduli za provjeru autentiฤnosti: Ovo vam ลกtedi vrijeme za pisanje koda koji ฤe zahtijevati od korisnika da se prijave i odjave sa stranice ako je potrebno.
- Strukturirani kod: MVC dizajn uzorak odvaja poslovnu logiku od prezentacije. To olakลกava imati programera koji moลพe raditi na back endu i web dizajnera koji radi na Front end razvoju.
- paketi: To su zbirke knjiลพnica koje obavljaju vrlo specifiฤne zadatke. Na primjer, moลพete koristiti ili preuzeti paket za dodavanje znaฤajki kao ลกto su;
- Dodavanje znaฤajke komentiranja Disqusa na vaลกu stranicu
- Pozivanje API-ja
- Integracija pristupnika plaฤanja.
Moลพete koristiti MVC okvire da ubrzate vrijeme razvoja. Takoฤer moลพete koristiti HTML predloลกke da ubrzate razvoj Frontenda koriลกtenjem HTML predloลพaka otvorenog koda. Takoฤer moลพete kupiti komercijalni HTML predloลพak, a zatim ga prilagoditi svojim zahtjevima. Neki proizvoฤaฤi HTML predloลพaka ฤak stvaraju specifiฤne HTML predloลกke okvira MVC.
Na primjer, moลพete kupiti HTML predloลพak koji koristi blade predloลพak, mehanizam predloลพaka ugraฤen u okvir Laravel MVC.
Izrada web stranice pomoฤu sustava za upravljanje sadrลพajem (WordPress)
U ovom odjeljku ฤemo pogledati kako moลพete izraditi web stranicu koristeฤi WordPress:
Preuzimanje WordPressa
WordPress moลพete preuzeti sa sluลพbene web stranice i pokrenuti ga na svom lokalnom raฤunalu ako imate instaliran web posluลพitelj i PHP. Meฤutim, ako veฤ imate raฤun za hosting, moลพete instalirati WordPress izravno sa svog cPanela.
Poฤetak rada s WordPressom
Nakon ลกto ste instalirali WordPress, moลพete poฤeti s izradom svoje web stranice.
Web hosting:
Prije nego poฤnete, morate imati naziv domene i web hosting raฤun. Raฤun za web hosting trebao bi imati instaliran PHP i MySQL kao motor baze podataka. Moลพete preuzeti uslugu Bluehost, Godaddy ili moลพete hostirati s WP Engineom, koji je specijaliziran za pruลพanje upravljanog WordPress hostinga.
Ugradnja:
Veฤina pruลพatelja web hostinga ima posebne skripte u administrativnoj ploฤi koje vam omoguฤuju instalaciju WordPressa. Ako vaลก pruลพatelj usluga hostinga koristi cPanel, tada biste trebali moฤi instalirati WordPress klikom na ikonu WordPress kao ลกto je prikazano na slici ispod:
Nakon ลกto odaberete gornju opciju, prikazat ฤe vam se Windowovo sljedeฤe za dovrลกetak instalacije.
Postavke:
Odjeljak postavki omoguฤuje vam konfiguriranje stvari poput naziva web-mjesta, URL trajne poveznice, vremenska zona, moลพe li se itko registrirati na vaลกoj stranici itd.
predloลพak:
Predloลกci nam omoguฤuju da vidimo kako izgleda naลกa web stranica. WordPress dolazi s besplatnim ugraฤenim predloลกcima koje moลพete odmah koristiti. Takoฤer moลพete preuzeti predloลกke koje su izradili drugi. Osim besplatnih predloลพaka, moลพete kupiti i vrhunske predloลกke na trลพnicama kao ลกto je ThemeForest.
Dodaci:
Dodaci vam omoguฤuju da proลกirite funkcionalnost WordPressa. Na primjer, moลพete koristiti dodatak kako biste svojim klijentima omoguฤili da vam plaฤaju putem PayPala s vaลกe web stranice. Takoฤer moลพete koristiti dodatke kako biste prisilili korisnike da koriste sigurne veze (HTTPS) ili generirali karte web mjesta.
Graditelji web stranica:
Graditelji web stranica dolaze s mnogim znaฤajkama koje olakลกavaju izradu web stranica pomoฤu metoda povuci i ispusti. Alati za izradu web stranica obiฤno se instaliraju kao dodaci i dolaze s predloลกcima koje moลพete koristiti.
Pogledajmo neke od najpopularnijih web buildera:
Astra
Astra je brza, lagana i vrlo prilagodljiva WordPress tema. Dolazi s poฤetnim predloลกcima koje moลพete koristiti za brzo stvaranje svojih web stranica. Ima besplatne i vrhunske poฤetne predloลกke.
Elementor:
Elementor je alat za izradu web stranica povlaฤenjem i ispuลกtanjem za WordPress koji koristi viลกe od 5 milijuna korisnika. Elementor nudi i besplatne i premium znaฤajke.
Beaver Builder:
Beaver Builder jednostavan je alat za izradu web stranica povuci i ispusti za WordPress koji vam omoguฤuje brzu izradu web stranica profesionalnog izgleda.
WordPress alternative
WordPress nije jedini sustav za upravljanje sadrลพajem koji moลพete koristiti za izradu svoje web stranice. Takoฤer moลพete pogledati alternative kao ลกto su
- Joomla: Joomla je sustav za upravljanje sadrลพajem otvorenog koda koji se moลพe koristiti za objavljivanje sadrลพaja, forume za rasprave, aplikacije za e-trgovinu itd. Koristi PHP kao programski jezik i MySQL kao motor baze podataka.
- Drupal: To je sustav za upravljanje web sadrลพajem koji moลพe kreirati osobne blogove, korporativne web stranice ili upravljanje znanjem za poslovnu suradnju. Drupal je napisan u PHP-u i JavaSkripta.
- MODX: To je sustav za upravljanje sadrลพajem otvorenog koda koji je napisan u PHP-u. I koristi MySQL kao motor baze podataka. Moลพe se koristiti na webu kao i na intranetu.
- Konstantna Kontakt: Ovo je alat za izradu web stranica koji nudi znaฤajke povlaฤenja i ispuลกtanja. Moลพe se koristiti za izradu osnovnih web stranica i trgovina e-trgovinom.
