Kako kodirati web mjesto

Kako kodirati web mjestoŽelite naučiti kako stvoriti web mjesto s HTML-om i CSS-om?


Na pravom ste mjestu. U ovom smo vodiču prikazali sve korake za prelazak s praznog zaslona na radnu web stranicu koja je optimizirana i istovremeno dobro izgleda..

Ali prvo, što je HTML i CSS?

Pa, samo biste mogli potražiti oba izraza u Wikipediji, ali te definicije nisu baš čitljive. Pojednostavimo stvari malo:

  • HTML (Hypertext Markup Language) definira strukturu i sadržaj web stranice – gdje stvari idu, kako oni su položeni i što je na stranici
  • CSS (Kaskadne tablice stilova) definira stil / prezentacija web stranice i elemente na njoj

Ne možete jedno bez drugoga – dvoje zajedno rade na konačnoj web stranici, njenom dizajnu i sadržaju koji je na njoj.

Bilješka; kad kažemo “web stranica”, to znači da je jedan HTML dokument – jedna stranica koja je dio vaše web stranice. Dok je “web stranica” cjelovita stvar – cijela vaša web stranica sa svim njenim pojedinačnim web stranicama.

Kako stvoriti web mjesto pomoću HTML-a i CSS-a (sadržaj):

  1. Naučite osnove HTML-a
  2. Shvatite strukturu HTML dokumenta
  3. Upoznajte CSS birače
  4. Sastavite tablicu CSS stilova
  5. Nabavite Bootstrap
  6. Odaberite dizajn
  7. Prilagodite svoju web lokaciju HTML i CSS
  8. Dodajte sadržaj i slike
  9. Fino podešavanje boja i fontova
  10. Stvorite dodatne stranice

Ukupno vrijeme za izradu web stranice: 4-5 sati
Razina vještine: srednji

Ako mislite da je to previše komplicirano, preporučujemo vam izradu web stranice pomoću WordPress-a ili odabir jednog od graditelja web mjesta. Možete provjeriti i popis odabranih najboljih IDE-a za web razvoj. 

Contents

Prije nego što započnete, skupite svoje resurse:

Dakle, prvo što vam je potrebno čak i prije stvaranja web stranice s HTML-om i CSS-om je web poslužitelj (hosting). Ne brinite se, međutim; ne morate kupiti svoj stroj. Mnoge web hosting tvrtke prodati će vam jednostavnu uslugu hostinga na svojim računalima. Samo google za “web hosting” i odaberite nešto što nije preskupo.

Uz razvrstavanje poslužitelja, sljedeće što vam treba je naziv domene. Naziv domene je ono što je web mjesto identificirano na webu. Na primjer, ime domene ove web lokacije je websitesetup.org.

Kad imate i ime domene i poslužitelj, možete ih povezati zajedno.

Potpuno otkrivanje: Proviziju zarađujemo ako na kraju kupite Bluehost kroz naše preporuke u ovom vodiču. To nam pomaže da održavamo i pokrećemo i ažuriramo WebsiteSetup. Hvala na podršci.

Da biste to riješili bez ikakvih bolova, preporučujemo da se prijavite s nekom tvrtkom Bluehost.

Oni će podnijeti sve postavke za vas. Znači da će: (A) postavi račun za hosting, (B) registrirajte ime domene u svoje ime, (C) konfigurirajte sve da rade zajedno i (D) pružiti vam pristup nadzornoj ploči koja se jednostavno koristi.

Samo naprijed i prijavite se Bluehost, čekat ćemo Kad se vratite i konfigurirate svoj web poslužitelj, pomaknite se na sljedeći korak.

p.s. Ako samo želite eksperimentirati s HTML web stranicom na računalu, i ne namjeravate ga iznositi u javnosti, koristite lokalni softver za web-poslužitelj. Ona koja preporučamo i volimo koristiti zove se XAMPP. Ima verzije i za Mac i za PC te je jednostavan za korištenje. Evo vodič o tome kako ga instalirati na računalo.

1. Naučite osnove HTML-a

Glavni element HTML strukture je HTML označiti.

Na primjer, oznaka izgleda ovako:

NEŠTO

Ovdje imamo posla s označiti. Ovaj će odvažan dio teksta koji se nalazi između početne oznake () i završnu oznaku (). U ovom slučaju je taj tekst NEŠTO.

Postoje i druge oznake, samo nekoliko imena:

  • ... kurziv će italicirati tekst između oznaka otvaranja i zatvaranja
  • ... podcrtat će ga
  • ...

    je odlomak teksta


  • ...

    je glavno zaglavlje na stranici

Osim tih jednostavnih oznaka, postoje i složenije oznake. Na primjer, ako želite sastaviti popis na sljedeći način:

  • Točka 1
  • Točka 2
  • Točka 3

… To možete učiniti sa sljedećim HTML kodom:

  • Točka 1
  • Točka 2
  • Točka 3

Ili, ako želite dodati vezu do druge stranice, poput ove:

Ovo je veza do naše početne stranice

… to možete učiniti s ovim dijelom koda:

Ovo je veza na moju početnu stranicu

Pročitajte ovo da biste dobili puni popis HTML oznaka. Pomoći će vam prilikom izrade web mjesta s HTML-om i CSS-om.

2. Shvatite strukturu HTML dokumenta

Zamislite svoju HTML stranicu kao da je izgrađena od Legosa. Stavite različite cigle jednu na drugu da biste dobili veću strukturu.

Ali umjesto Lego cigli, dobivate HTML oznake …

Evo najjednostavnije strukture dokumenta HTML-a:





Pozdrav svijete!


Pozdrav svijete!

Moja prva web stranica.

Možete uzeti gornji kôd, kopirati ga i zalijepiti u novu datoteku, spremiti dokument kao index.html, i to će biti savršeno valjana HTML stranica.

Objasnimo pojedine dijelove ovog koda:

  • – početna deklaracija dokumenta
  • – druga deklaracija; kaže da slijedi HTML dokument napisan na engleskom jeziku
  • – označava početak glava odjeljak; glava odjeljak je mjesto gdje idu svi osnovni parametri stranice; većina njih neće se prikazivati ​​na ekranu; oni samo definiraju što se događa ispod haube
  • – definira koji se skup znakova koristi za pisanje dokumenta; nema potrebe trošiti previše vremena na ovo; samo iskoristite ovu izjavu kakva je
  • Pozdrav svijete! – naslov stranice; to će ljudi vidjeti u naslovnoj traci svojih preglednika, npr .:

naslov u web pregledniku prilikom izrade web stranice s HTML i CSS

  • – označava početak tijelo odjeljak; tu ide sav sadržaj stranice; to je glavni dio HTML dokumenta; naglasimo ovo, u ovom odjeljku ćete uključiti sav sadržaj koji se trebao prikazati na stranici

  • Pozdrav svijete!

    – glavno zaglavlje na stranici

  • Moja prva web stranica.

    – jednostavan odlomak teksta

  • – završna oznaka cjelokupnog HTML dokumenta

Ovdje je važna napomena. Rad na HTML datoteci u osnovnoj aplikaciji za tekst ili na složenom procesoru teksta kao što je MS Word nije dobro iskustvo. Da biste olakšali stvari, instalirajte alat pod nazivom Uzvišeni tekst. Ima verzije i za Mac i za PC i besplatna je.

Zašto je bolje? Između ostalog, obojat će sintaksu HTML datoteke. Znači, vaše će HTML oznake vizualno razlikovati od tekstualnog sadržaja, parametara oznake i drugih vrijednosti. U osnovi, sve će to postati čitljivo. Evo kako izgleda naša jednostavna HTML struktura u uzvišenom tekstu:

uzvišena sintaksa sjajna je pri izradi web stranice s HTML-om i CSS-om

Ok, natrag na temu. Možete uzeti ono novo index.html datoteku svoje, kopirajte je u mjesto gdje se nalazi glavni direktorij vašeg web poslužitelja, a zatim je vidjet ćete tako da je posjetite kroz web preglednik. Nemojte se previše uzbuđivati; ova će stranica biti prilično ružna (vidi dolje).

ova je stranica ružna

U redu, pa stranica je ružna, kako napraviti da nije tako?

3. Upoznajte CSS birače

Baš kao što HTML ima svoje oznake, tako i CSS selektora.

Selektori opisuju kako se neki element treba ponašati u skladu s izgledom. Evo primjera CSS selektora:

p {
veličina fonta: 18px;
}

Ovaj selektor označava da je sve HTML

oznake u dokumentu imaju veličinu fonta od 18 px.

Međutim, praktičniji način upotrebe CSS odabirača nije ograničiti sve oznake određene vrste na određeni stil, već stvoriti različite “klase” i dodijeliti ih oznakama jedna za drugom..

Na primjer, birač klase u CSS-u izgleda ovako:

.normal-text {
veličina fonta: 18px;
}

Primijetite točku (.) prije naziva klase (normalan tekst). Uz definiranu klasu “normalnog teksta”, sada možemo toj klasi dodijeliti one određene HTML oznake za koje želimo da imaju veličinu 18 piksela..

Na primjer:

Ovaj tekst iznosi 18px.

Još nekoliko minuta da objasnimo sve elemente tog dijela CSS koda iznad:

  • .normalan tekst – definicija klase; sve nakon naziva klase i između zagrada za otvaranje i zatvaranje {} definira kako će izgledati elementi dodijeljeni ovoj klasi
  • veličina fonta – primjer CSS svojstva
  • 18 piksela – vrijednost dodijeljena entitetu

Osim gore navedenog, postoji mnoštvo CSS svojstava veličina fonta. Evo potpuni popis ako ste znatiželjni.

4. Sastavite CSS tablicu stilova

HTML dokument je vrlo strukturni – svaki element ima svoje mjesto, a redoslijed elemenata presudan je za konačnu izgradnju i izgled dotične web stranice. CSS dokument je puno manje.

CSS dokumenti često se nazivaju stylesheet. U osnovi CSS tablica stilova predstavlja popis svih definicija klase koje se koriste u odgovarajućem HTML dokumentu. Redoslijed definicija klase nije presudan većinu vremena (barem za jednostavne dizajne).

Način na koji sastavljate CSS tablicu stilova je tako što ćete svaki razred definirati jedan po jedan, a zatim testirati je li rezultat u dizajnu vaše stranice kakav ste željeli.

Ovo zvuči kao naporan posao, i jest.

Ali olakšat ćemo vam stvari, a ne prisiljavati vas da ručno učite HTML i CSS dizajn. Umjesto da vas naučimo svemu ispočetka, uzet ćemo živi organizam i rastaviti njegove elemente.

Tu dolazi u igru ​​stvar koja se zove Bootstrap.

5. Preuzmite / instalirajte program za pokretanje računala

Bootstrap je alat s otvorenim kodom za stvaranje web stranice s HTML-om i CSS-om.

Na običnom engleskom jeziku Bootstrap se brine za osnovnu strukturu HTML dokumenta i tablice CSS stilova za vas. Pruža okvir koji osigurava da su glavne skele vaše web stranice spremne i optimizirane za daljnji razvoj.

U osnovi, Bootstrap vam omogućuje da ne krenete ispočetka, i umjesto toga krenete pravo u zabavni dio. Uz to, ne morate raditi na često dosadnim ranim fazama stvaranja web stranice s HTML-om i CSS-om.

Dva staza možete krenuti:

  • Opcija (A): learn Bootstrap – idite na početnu stranicu Bootstrap, preuzmite glavni Bootstrap paket i počnite graditi na vrhu.
  • Opcija (B): uzmite prečicu – nabavite početni paket za Bootstrap s dobrim dizajnom i već izgrađenom demo web stranicom..

Opcija (A) možda ima neku krivulju učenja na početku, ali ni na koji način nije najgori način pristupiti stvaranju web stranice s HTML-om i CSS-om. Jednom kada ovladate jezgrom Bootstrap strukture, možda će vam biti lakše sastaviti nove stranice i učiniti da izgledaju onako kako želite. Dokumentacija za pokretanje sustava je sjajno mjesto za početak ovog puta.

Idemo s Opcijom (B) za ovaj vodič. To radimo iz nekoliko razloga, glavni od njih:

Započinjanje s gotovom strukturom štedi mnogo boli u pokušaju otkrivanja osnovnih potreba HTML dokumenta. To vam omogućuje da se usredotočite na zanimljive stvari – poput postavljanja sadržaja i njegova izgleda.

Ukratko, učenje stvari na ovaj način će vam dati brži rezultat brži, za što pretpostavljamo da je ono što želite.

6. Odaberite dizajn

Kada stvarate web lokaciju s HTML i CSS, slobodno možete koristiti bilo koji predložak za pokretanje programa. Svi bi trebali raditi slično.

Međutim, u ovom ćemo vodiču koristiti jedan od predložaka Pokrenite Bootstrap. Imaju lijep izbor besplatnih predložaka koji su optimizirani, rade bez problema, a također su vrlo dobro dizajnirani.

Tema koju ćemo koristiti naziva se kreativan. Konačni efekt koji ćemo ići izgledat će ovako:

konačna početna stranica nakon izrade web stranice s HTML i CSS

Za početak, predložak Creative, kliknite na Besplatno preuzimanje gumb koji se nalazi desno (uključeno) ova stranica) i spremite zip paket na radnu površinu.

Otpakujte paket i premjestite njegov sadržaj u glavni direktorij lokalnog web poslužitelja ili vaš web hosting račun.

Sada otvorite tu lokaciju putem svog web preglednika. Vidjet ćete dionicnu verziju predloška:

start template za pokretanje sustava

Već je prilično dobro izgledalo, ali sada je vrijeme da naučite kako koristiti HTML i CSS da biste to učinili u točno onome što želite..

7. Prilagodite svoju web stranicu HTML-om i CSS-om

Najprije poradimo na početnoj stranici dizajna. Ovo će nam pokazati kako zamijeniti grafiku, tekstove i općenito prilagoditi sve.

Malo smo gore govorili o odjeljku glave HTML dokumenta. Ovdje ćemo to detaljnije pogledati.

Kada otvorite index.html datoteka vaše web stranice Bootstrap u uzvišenom tekstu, vidjet ćete takav odjeljak glave (za jasnoću smo uklonili sve nebitne stvari iz ovog koda *):






Kreativno - Pokrenite temu za pokretanje sustava





* Osim gore navedenog, postojali su i kôd za učitavanje Google fontova, ikone Font Awesome i modul svjetlosne kutije za slike prikazane na stranici.

Većinu deklaracija već znamo, ali postoje i nekoliko novih:

  • Prvo, sve između zagrade je HTML komentar. Ne prikazuje se na završnoj stranici.
  • – to je jedna od Bootstrap-ovih vlastitih deklaracijskih oznaka. Ona određuje veličinu preglednog mjesta web stranice.
  • – ova linija učitava CSS tablicu stilova predloška Creative i ona također sadrži zadani list stilova Bootstrapa.

Izmijenimo zadnju deklaraciju – redak koji učitava CSS – da bismo kasnije lakše radili.

Promijenite tu liniju u:


Ovo je samo mala razlika – učitavat će se skraćena verzija istog CSS lista. Ovu je verziju jednostavno lakše izmijeniti.

Sada se pomaknite dolje do samog dna index.html datoteka. Prije zatvaranja vidjet ćete sljedeće retke tijelo označiti:

        

Odgovorni su za učitavanje JavaScript datoteka koje upravljaju nekim vizualnijim interakcijama dizajna. Na primjer, kada kliknete na Oko vezu u gornjem izborniku, preusmjerit ćete se na blok otprilike na istoj stranici – to se, između ostalog, obavlja putem JavaScripta. Ne moramo trenutno imati problema s razumijevanjem ovog koda. Ostavimo to neki drugi put.

Umjesto toga, radimo na dodavanju vlastitog sadržaja na stranicu:

8. Dodajte sadržaj i slike

Prvo što biste trebali učiniti je promijeniti naslov stranice.

1. Promijenite naslov

Naći titula označite u odjeljku head i zamijenite tekst između oznaka nečim vlastitim:

Moja HTML web stranica

2. Prilagodite odjeljak Hero

Odjeljak heroja je ono što nazivamo ovim blokom:

odjeljak heroja

Bilo bi kul da u sebi imamo svoj sadržaj. Da biste izmijenili ovaj blok, vratite se na svoj index.html datoteku i pronađite ovaj odjeljak:

...


...

Saznaj više

Ovaj cijeli blok koda kontrolira ono što se nalazi u odjeljku heroja.

Ovdje su neke nove oznake:


  • – ovo je oznaka koja definira da je cijeli ovaj naslov naslov stranice; ova oznaka ima nekoliko braće i sestara u obliku
    oznaka i
    označiti
  • – općenita je CSS oznaka koja označava da slijedi zasebni odjeljak (aka podjela) u HTML dokumentu; njegovo korištenje olakšava vizualno razlikovanje pojedinih odjeljaka na stranici

Također ćete primijetiti da neke druge oznake (koje već znamo) izgledaju malo složenije, s više dodijeljenih CSS klasa. Na primjer:

...

Razredi dodijeljeni

oznaka je ovdje text-velika slova teksta-bijela slova-podebljana.

Ove su klase kreirali Bootstrap i programer kreativne teme. Dobra vijest je da ih i vi možete slobodno koristiti prilikom izrade web stranica s HTML i CSS.

Iskreno, možete prilagoditi bilo koju oznaku koju dodate strukturi svoje stranice dodijelivši joj bilo koji broj klasa.

Ako želite vidjeti potpuni popis dostupnih klasa, možete otvoriti glavni creative.css datoteka koja se nalazi u css poddirektorij Kreativne teme.

Shvaćanje svih tih razreda može se u početku činiti zastrašujućim, ali zapravo je lakše nego što izgleda.

Na primjer, jedna od klasa dodijeljena nekim odlomcima u našem index.html datoteka je font-weight svjetlosti. Kad uskočite u creative.css datoteka i ctrl + f Ako potražite ime te klase, vidjet ćete da ona jednostavno postavlja font-weight parametar poput:

.font-weight-light {
težina slova: 300;
}

Promjena zadanih tekstova u index.html datoteka je vrlo jednostavna. Jednostavno pronađite oznaku koju želite urediti i promijenite ono što je između uvodnih i završnih oznaka.

Na primjer, da biste promijenili glavni naslov, samo promijenite ovo:

Vaš najdraži ...

Na nešto poput sljedećeg:

Divite se mojoj HTML web stranici!

To možete učiniti sa svim paragrafima i ostalim oznakama na stranici.

Ono što je važno je da slobodno možete dodavati i nove odlomke. Na primjer, možemo uzeti odlomak koji se već nalazi na stranici, napraviti kopiju i zalijepiti ga odmah ispod izvornog odlomka; ovako:

Pokrenite Bootstrap može ...

Stavak 2

Sada, uz brigu o tekstovima, zamijenimo sliku koja je u pozadini.

To je malo složenije učiniti jer zahtijeva da uđemo u datoteku tablice CSS stilova i tamo napravimo izmjene. Kao što možete vidjeti u HTML kodu vrh jarbola odjeljka, nijedna oznaka ne bi značila uključivanje slike na stranicu na bilo koji način. Sve se to događa putem CSS-a.

Kada ponovo pogledate cijeli blok rukovanja kodom vrh jarbola odjeljka, vidjet ćete da je dodijeljena klasi koja se zove vrh jarbola. Ovaj redak koda upravlja zadaćom klase:

vrh jarbola klasa je ona koja postavlja sliku u pozadinu cijelog bloka.

Otvorimo creative.css datoteku ponovo i potražite klasu “masthead”:

header.masthead {
padding-top: 10rem;
obloga-dno: calc (10rem - 72px);
pozadina: linearni gradijent (do dna, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
pozadinski položaj: centar;
pozadina-ponavljanje: ne-ponavljanje;
pozadinski prilog: pomicanje;
pozadina: poklopac;
}

Ovaj kôd čini svu sliku fantastičnih stvari (poput dodavanja prekrivanja, zasjenjenja itd.), Ali važan je dio: URL ( "../ img / bg-masthead.jpg"). Ovo je redak koji pokazuje gdje treba pronaći pozadinsku sliku. To će biti u img poddirektorija.

Da biste promijenili ovu pozadinsku sliku, uzmite bilo koju svoju sliku, kopirajte je u img poddirektorijum, a zatim kopirajte i zalijepite njegovo ime umjesto originala bg-masthead.jpg datoteka. Ukratko, promijenite ovo: URL ( "../ img / bg-masthead.jpg") na ovo: URL ( "../ img / YOURFILE.jpg").

3. Prilagodite ostale blokove na stranici

Dok prolazite kroz index.html datoteke, primijetit ćete da na stranici postoji već puno različitih odjeljaka. Imamo odjeljak za navigacija, i oko blok, neki usluge, portfelj, poziv na akciju, kontakt blok i a podnožje.

Iako su u svim tim odjeljcima različiti sadržaji, sami su dijelovi po strukturi slični. Svi imaju približno isti skup HTML oznaka – samo različite CSS klase koje su im dodijeljene.

Najbolji način da promijenite stranicu u skladu s vašim potrebama je da prolazite kroz blokove jedan po jedan i eksperimentirate mijenjajući stvari.

Osim mijenjanja tekstova, možete premještati čitave dijelove okolo (dijelove između

oznake). Odobreno, to morate učiniti ručno (rezanjem i lijepljenjem elemenata na mjesto), to je još uvijek jednostavno..

Uz spomenuto, postoje dvije sasvim osnovne modifikacije o kojima još nismo razgovarali. Pokrijmo sljedeće:

9. Fino podešavanje boja i fontova

Mijenjanje boja ili fontova u HTML-u i CSS-u vrlo je jednostavno. Najjednostavnija stvar koju možete učiniti je dodijeliti neki linijski stil HTML oznaci. Na primjer:

Crveni tekst

U HTML-u su boje predstavljene njihovim šestnaestim vrijednostima; “# FF0000” je crvene boje. Evo tablice svih ostalih standardne boje.

Bolji način da dodijelite boje je to putem tablice CSS stilova. Na primjer, da bismo postigli isti učinak kao gornji kôd, mogli bismo to staviti u našu tablicu CSS stilova:

p.red {
boja: # FF0000;
}

A zatim upotrijebite sljedeći dio HTML koda u glavnom dokumentu:

Crveni tekst

Druga metoda je u osnovi kako se stvari odvijaju u Bootstrapu.

Da biste promijenili boju bilo kojeg teksta na stranici, prvo pronađite oznaku koja je odgovorna za oblikovanje tog teksta, a zatim uđite u tablicu stilova i izmijenite odgovarajuću klasu ili stvorite novu klasu.

Evo primjera; recite da želite promijeniti boju zaglavlja “Na usluzi”. Trenutno je crna, i ovo je kôd s kojim se postupa:

Na usluzi

Da biste promijenili boju, najbolji način je stvoriti novu klasu koja se zove, recimo, .Tekst-narančasta i tamo postavite vrijednost boje, poput:

.tekst-narančasta {
boja: # f4623a! važno;
}

* The !važno pobrinut će se da ta postavka boja nadjača bilo koju drugu postavku boja koja je stigla prije nje.

Sada se možemo vratiti našem zaglavlju i promijeniti njegov kod u:

Na usluzi

Uz ove promjene, zaglavlje će sada biti narančasto:

narančasta h2

Da biste promijenili font i njegovu veličinu, možete učiniti nešto vrlo slično. Prvo, primjer kako izgleda blok definicije fonta u CSS-u:

.SOMECLASS {
obitelj fontova: "Merriweather", Roboto, sans-serif;
veličina fonta: 18px;
}
  • učitati fontove Merriweather, Roboto, i zadani sustav bez vitica font (pročitajte ovo da biste saznali više o web-sigurnim fontovima)
  • postavite veličinu fonta na 18 px

Ova vrsta definicije može se staviti u bilo koju CSS klasu, baš kao i definicija boja. Zapravo se definicije fonta i boje često nalaze u deklaracijama iste klase.

Vraćajući se našem prethodnom primjeru, da promijenimo veličinu fonta za ono zaglavlje koje kaže “Na usluzi”, prvo bismo mogli stvoriti klasu poput ove:

.text-xxl {
veličina slova: 50px;
}

I dodijelite ovoj klasi zaglavlje:

Na usluzi

�� Prilikom izmjene boja ili fontova u predlošku izrađenom u programu Bootstrap, prvo pogledajte CSS tablicu stilova za klase koje vam već mogu pružiti alternativne veličine ili boje. Koristite one gdje su dostupni.

10. Stvorite dodatne stranice

Sada kada ste početnu stranicu prilagodili, vrijeme je da počnete raditi na nekim dodatnim stranicama, a zatim ih povežete s početnom stranicom.

Prilikom stvaranja web stranice s HTML-om i CSS-om, možete sastaviti bilo koji broj podstranica i povezati ih sve zajedno.

Evo nekoliko uobičajenih stranica koje su potrebne većini web stranica:

  • o stranici
  • kontakt
  • portfelj
  • proizvodi / usluge
  • tim
  • pravila (politika privatnosti, uvjeti itd.)

1. Počnite s Izgledom

Kada pravite novu web stranicu, prva odluka koju morate donijeti je kakav želite biti izgled.

Kada stvarate web stranicu s HTML-om i CSS-om, ništa vas ne sprečava u zanatu što god izgled koji želite. Jedina poteškoća je zapravo spajanje.

HTML i CSS mogu se teško baviti kada započinjemo s praznog zaslona, ​​pa ćemo ovdje koristiti i Bootstrap. Prvo ćemo vam pokazati neke principe izrade izgleda, a zatim pokazati kako to učiniti s Bootstrapom.

Način na koji možete razmišljati o obliku vaše web stranice jest da je smatrate redoslijedom pojedinih blokova – jedan na drugom. Nešto poput ovoga (primijetite četiri različita bloka):

izgled prilikom izrade web stranice s HTML-om i CSS-om

Sjajna stvar u programu Bootstrap jest da on postupa s osnovnim načelima izgleda i pojedinostima izgleda za vas, tako da se možete fokusirati na postavljanje tih blokova na prava mjesta.

U ovom ćemo dijelu vodiča stvoriti novu stranicu “otprilike”.

Za početak, napravit ćemo samo vrlo osnovni projekt izgleda. Nešto poput onoga gore.

  • na vrhu se nalazi navigacijski izbornik,
  • blok naslova pune širine ispod izbornika,
  • odjeljak glavnog sadržaja u sredini, u sredini ekrana (ne pune širine),
  • i podnožje |.

A sada izgradimo ovaj izgled u HTML-u.

2. Izradite novu stranicu

Najlakši način za početak rada na novoj stranici je duplicirati postojeću stranicu i upotrijebiti je kao predložak. To je ono što ćemo učiniti.

Napravite kopiju index.html datoteku i preimenovati about.html.

Da biste olakšali razlikovanje stranica u ovoj ranoj fazi, uredite novu about.html datoteku i promijenite ono što ima </code> označiti. Na primjer, <code><title>O meni.

Sada idemo kroz datoteku po redak i odlučiti što ćemo ostaviti i što ćemo ukloniti:

  • navigacija izbornik (ispod ). Vjerojatno želite da ovaj odjeljak ostane netaknut, samo kako bi navigacijski doživljaj bio ujednačen na svim stranicama.
  • glavni junak odjeljak (ispod ). Ovaj nam neće trebati u skladu s našim projektom izgleda. Možete nastaviti i izbrisati čitav odjeljak.
  • oko odjeljak (ispod ). Ponovno ćemo koristiti ovaj odjeljak kao naš glavni naslov.
  • usluge odjeljak, portfelj odjeljak, poziv na akciju odjeljak i kontakt odjeljak (sve između i ). Ti nam odjeljci uopće nisu potrebni. Možete nastaviti naprijed i izbrisati ih.
  • podnožje odjeljak i sve ispod njega (ispod ). To ćemo trebati zadržati.

To čini naš trenutni kod prilično jednostavan. U osnovi je upravo ovo:



























Ono što ovdje nedostaje je glavni sadržaj odjeljak. Da bismo ga izgradili, ponovno ćemo upotrebljavati odjeljak.

Naprijed i napravite kopiju odjeljka o tome. Ovaj:

...


...

Sada promijenite prva dva retka na ovo:

Budući da nam ne trebaju

zaglavlje tamo i

element, uklonimo ih. Jedino što je ostalo u cijelom ovom bloku bit će odlomak teksta. Ovako:

Odlomak teksta.

Kad spremite datoteku i otvorite je putem preglednika, vidjet ćete da u osnovi imate dva vrlo slična bloka jedan ispod drugog, s istom pozadinom boje:

o glavi stranice

Bilo bi bolje imati bijelu pozadinu u odjeljku s glavnim sadržajem. Da bismo to promijenili, jedino što moramo učiniti je ukloniti bg-primarna klasa od glavnih

označiti. Drugim riječima, unesite oznaku u ovo:

Tako je bolje:

o glavi stranice 2

Na stranicu dodajmo neke odvažne odlomke da bismo ih dodali još plus plus podnaslov:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

podstarješina

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Evo kako to izgleda na stranici:

o ver 1

Ako vam se ne sviđa da tekst bude u središtu, jednostavno uklonite text-centar klase iz jednog od

oznake.

o ver. 2

Ako na ove blokove teksta želite dodati još više osećanja, možete stvoriti nove CSS klase (kao i prije) i dodijeliti ih odlomcima u bloku. Ili možete zaviriti u trenutnu tablicu stilova i vidjeti koje su klase već postoje za tu svrhu. Evo onih koje smo dodijelili

i

oznake:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

podstarješina

A evo efekta:

o ver 3

Još jedna stvar koju ćemo ovdje učiniti je dodavanje slike negdje na stranici.

Evo kako izgleda primjer slikovne oznake u HTML-u:


Prilično jednostavno, zar ne? Jedini parametar tamo je put do slikovne datoteke. Da bi stvari bile dobro organizirane, svoju sliku možete staviti u img direktorij (baš kao što ste je imali s tom pozadinom prije). U takvom će slučaju slikovna oznaka biti:


Slijedom toga, slikovna oznaka u ovoj konkretnoj konfiguraciji prilično je ograničena. Da bi bio malo rafiniraniji, dodijelimo mu neke Bootstrap klase. posebno:


Ove će dvije klase dati vašu sliku zaobljenim kutovima, a također će osigurati da veličina slike ne prelazi veličinu bloka u kojem sjedi.

Ovu oznaku sada možete dodati negdje u odjeljku sa glavnim sadržajem na stranici. Na primjer, ovdje:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

podstarješina

A evo i konačnog učinka na stranici:

o ver. 4

Evo naše stranice o cijelom sjaju:

o dovršenoj stranici

3. Link na novu stranicu

Sa učinjenom novom stranom sada je povežite s početne stranice (the index.html datoteka). Naravno, najbolje mjesto za dodavanje ove veze je u navigacijskom izborniku (ispod ).

Potražite ovaj redak:

Oko

Izmijenit ćemo to:

Oko

O ovome još nismo razgovarali, ali ono tag je oznaka veze u HTML-u. Pomoću nje možete se povezati na bilo koju web stranicu pružanjem adrese te stranice u href parametar. Tekst veze – dio na koji se može kliknuti – bit će tekst između otvaranja i zatvaranja oznake.

Kad sada osvježite početnu stranicu, vidjet ćete novu vezu koja usmjerava na stranicu o tome.

Daljnje čitanje:

U ovoj fazi sami ste izradili jednostavnu web stranicu koja se sastoji od dvije stranice – a stranica i an oko stranica.

Ono što biste sada trebali učiniti je isprati i ponoviti stvaranjem novih stranica, podešavanjem istih, dodavanjem sadržaja i povezivanjem svega s navigacijskog izbornika.

Ostale stvari koje vrijedi činiti u ovom koraku je daljnje učenje HTML i CSS principa, prolazak kroz popis za provjeru, kao i učenje Bootstrapa i njegovih struktura i klasa. Neki resursi za to:

  • HTML5 varalica
  • CSS varalica
  • Javascript varalica
  • HTML vodič
  • Vodič za dizanje uređaja
  • Varalica za podmetanje pokretanja

Mastering Bootstrap, vrlo vjerojatno najbolji put trenutno dostupan za izgradnju optimiziranih i lijepih web stranica s HTML i CSS.

Ako imate bilo kakvih pitanja o izradi web stranice s HTML-om i CSS-om, ne oklijevajte ih poslati u komentare.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map