Kako napraviti html stranicu. Primjer izrade html stranice u notepadu

05.09.2019 Windows 7, XP

Stranica je zapravo zbirka datoteka iz koda na nekoliko jezika. A kod se može napisati u bilo kojem normalnom uređivaču teksta, čak i u notepadu. Naravno, bolje je koristiti napredniji softver poput Notepad ++ ili punopravne razvojne programe. Pa, dobro, da vidimo kako napraviti web stranicu u notepadu koristeći html i css.

Kako napraviti web stranicu od nule u html-u u bilježnici - upute korak po korak

A evo i naše ključne riječi - HTML. Od tog jezika počinje izrada stranice. Bez toga je nemoguće zamisliti razvoj weba. To je kao da pokušavate skuhati juhu bez vode. Nemojte žuriti zatvoriti stranicu ako ste apsolutna nula u html-u. U ovom vodiču korak po korak zajedno ćemo izraditi jednostavnu web stranicu, a ja ću pokušati objasniti dijelove koda koje ćemo dodati u bilježnicu.

Korak 1. Napravite datoteke

Da biste stvorili html stranicu u notepadu, morate započeti stvaranjem dva tekstualna dokumenta u nekoj praznoj mapi. Treba dobiti ekstenziju .html, a drugu .css. Imena mogu biti svašta. Napomena, ne site.html.txt, već site.html.

Da biste to učinili, dok ručno spremate dokument, dodajte mu proširenje točke. Istu manipulaciju radimo i s drugim datotekama, ali im dajemo ekstenziju .css. O da, ne zaboravite odabrati kodiranje UTF-8.

Korak 2. Polaganje strukture

Datoteke su stvorene i možete početi raditi. Otvorite html dokument. U njemu će se odvijati glavni rad. Temeljni element ovog jezika su oznake - posebne riječi u kutnim zagradama koje pregledniku govore što treba prikazati na web stranici.

Ajmo i mi ćemo nešto umetnuti u naš dokument, inače je potpuno prazan.

Pozdrav svijete! Pozdrav svijete!

Dakle, ubacili smo hrpu oznaka odjednom i možda ništa ne razumijete. Pokušajte otvoriti stranicu u pregledniku. Tamo ćete vidjeti riječi "Pozdrav svijete" ako se radi ispravno. Ovo je, zapravo, najjednostavnija web stranica.

html je spremnik za sve ostale oznake. Sadrži cijelu web stranicu.
Na samom vrhu naznačili smo vrstu dokumenta. Head tag je servisna informacija o stranici. Ovdje koristimo oznaku postavite naziv stranice, koji će se prikazati u retku preglednika na vrhu. Zatim smo postavili kodiranje i povezali css datoteku pomoću oznake <link> .</p><p>Kao što vidite, postoje uparene oznake, a postoje i pojedinačne oznake. Sada se neću detaljnije zadržavati na tome, ovisi o tome koje funkcije naredba obavlja.</p><h3>Korak 3. Planiranje</h3><p>Za sada ostavimo šifru na trenutak i razmislimo. Što mislite da je tipičan web resurs? Naravno, ima ih mnogo na mreži i svi su različiti, ali postoje neki identični elementi strukture, zar ne? Na primjer, okomiti i horizontalni izbornici, bočni stupci, zaglavlja (sam vrh gdje se nalazi logotip) i podnožje (dno stranice).</p><p>Pa idemo i planirat ćemo kako napraviti našu prvu jednostavnu web stranicu. U ovom poslu sve treba početi planiranjem. Potrebno je istaknuti strukturne dijelove budućeg predloška, od kojih će se sastojati. Recimo da naš jednostavni predložak ima zaglavlje, dio glavnog sadržaja, bočni stupac i podnožje ili podnožje (isto).</p><h3>Korak 4. Počnimo!</h3><p>To znači da su nam potrebna 4 glavna bloka. U html-u je moguće ugnijezditi neograničen broj drugih oznaka u uparenu oznaku, stoga predlažem sljedeću metodu: <br>Napravite jedan zajednički kontejner u kojem će se nalaziti sva naša 4 glavna bloka.</p><p>Dakle, vratimo se kodu. Napisat ćemo ga u body tag, budući da je to buduća stranica. Možete sigurno ukloniti natpis <b>"Pozdrav svijete"</b>, i napiši ovo:</p><p> <div id="main"> <div id="header">Ovo je naš šešir</div> <div id="sidebar">Ovo je bočni stupac</div> <div id="content">Ovo je sadržaj</div> <div id="footer">Podrum</div> </div> </p><p>Tako smo napravili jedan veliki blok, u koji smo smjestili ostala 4. Blok u html-u kreiran je parom div tagova, koji nema tražene atribute, ali sam svakom od njih odmah dodao jedinstveni id (identifikator) kako bi kasnije stilizirali izgled kroz CSS.</p><p>Kopirajte ovaj kod za sebe i osvježite stranicu u pregledniku. Sve dok vidite samo 4 retka teksta ispred sebe, ali ništa, sada ćemo ih pretvoriti u web stranicu!</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy loading=lazy><br></p><h3>Korak 5. CSS će nam pomoći</h3><p>Sada krenimo s oblikovanjem naših blokova. Naravno, morate početi s najvećim spremnikom. Na samom početku smo kreirali css datoteku, ali u nju nikada nismo ništa napisali. Sada je vrijeme da to popravite. Dodajmo tamo sljedeći kod:</p><p>* (dimenzija okvira: okvir-kutija) #main (širina: 810px; margina: 0 auto; obrub: 5px puna crna)</p><p>Prvo pravilo postavlja ovo ponašanje za okvire tako da padding i obrubi ne povećavaju svoju širinu. Dalje u kodu, upućujemo na blok s glavnim identifikatorom, za to je dovoljno staviti hash i dodati naziv identifikatora. Odmah slijede vitičaste zagrade s popisom pravila izgleda koja će se primijeniti na element.</p><p>Postavili smo ukupnu širinu spremnika na 810 piksela, margina pravila: 0 automatski postavlja okvir u središte, odnosno naša stranica će biti lijepo prikazana u sredini, a ne zgnječena ulijevo. Posljednje svojstvo, granica, dodaje crni, čvrsti obrub na svaku stranu okvira.</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy loading=lazy><br></p><p>Pa, napravili smo stil za glavni kontejner. Na web stranici i dalje prikazujemo 4 retka teksta, ali u crnom okviru. Samo naprijed.</p><p>Sada je vrijeme da prilagodite izgled četiri glavna građevna bloka naše stranice. Odmah ću dati kod, a u nastavku ću ga komentirati.</p><p>#header (visina: 100px; obrub-dno: 5px puna crna) #bočna traka (širina: 200px; visina: 500px; float: lijevo; obrub-desno: 5px puna crna) #content (širina: 600px; float: desno; visina : 500px) #podnožje (visina: 75px; jasno: oba; obrub-vrh: 5px puna crna;)</p><p>Kao što možete zamisliti, samo upućujem na elemente s različitim ID-ovima, opisujući ih od vrha do dna. Prvo se stilizira zaglavlje - postavio sam visinu na 100px i obrub na dnu da ga odvojim od ostatka okvira.</p><p>Ali tada sve postaje zanimljivije. Činjenica je da se prema zadanim postavkama blokovi prikazuju od vrha do dna, ako ih samo napišete u html kodu i ne postavljate dodatna pravila. Ali bočni stupac je za to i bočni, koji se prikazuje sa strane glavnog dijela stranice. Ali kako to učiniti? Gledajte, postavili smo visinu bočne trake, širinu, obrub i još jedno svojstvo (float: lijevo).</p><p>Ovo pravilo znači da će element biti prikvačen na lijevi rub nadređenog (to jest, roditeljski element - #main blok). Odlično, sada ćemo postaviti isto svojstvo na blok sadržaja i također će biti pritisnut na lijevi rub, ali nakon bočnog stupca.</p><p>Naravno, sadržaj dobiva veću širinu, jer bi trebao biti, ali postavljamo istu visinu. Na stvarnoj stranici obično će biti puno informacija u glavnom bloku, tako da uopće ne morate postavljati visinu. Isto je i sa bočnom trakom ako joj se stalno dodaju informacije. No, primjerice, izričito smo propisali visinu kako bi se jasno mogle vidjeti veličine blokova.</p><p>Konačno, ostaje opisati posljednji blok - <b>podnožje</b>... Dobiva malu visinu, okvir s visinom i još jedno svojstvo koje je za nas novo. Ovo svojstvo je jasno s vrijednošću oba. Zašto to napisati? Pritisnuli smo dva prethodna bloka na lijevi rub. Postali su takozvani plutajući blokovi, ali prema zadanim postavkama, obični blokovi možda neće primijetiti plutajuće blokove i preći preko njih.</p><p>Da se to ne dogodi, naš podrum je dobio upravo takvu naredbu - kažu, gledajte, običan blok, dva plutajuća se nalaze iznad vas. Primijetite ih i postavite se niže nego što jesu. Ovo je naredba, zapravo, data je svojstvom clear: both, što prisiljava da se regularni blok pozicionira ispod svih plutajućih.</p><p>Super, sada osvježite stranicu u svom pregledniku. Pa, već izgleda puno više kao stranica, barem u strukturi.</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy loading=lazy></p><h3>Korak 6. Bojanje stranice</h3><p>Sljedeća, vrlo zanimljiva faza - dodajmo nekoliko boja na našu stranicu. Neka nema čvrstu bijelu pozadinu, već nešto zanimljivije. Postoje dva načina za postavljanje pozadine:</p><ul><li>Opća pozadina za cijelo web-mjesto odjednom, dodijelivši je općem spremniku #main</li><li>Ako bi svaki od glavnih blokova trebao imati svoju nijansu boje, tada morate postaviti boju za svaki zasebno. Ali bolje je ne zanositi se previše - crveni šešir, zeleni sadržaj i žuti podnožje neće izgledati baš dobro, odmah ću vam reći</li> </ul><p>Predlažem da to učinite prema prvoj metodi. Ovdje sam pronašao lijepu svijetloplavu nijansu u online servisu, koji predlažem da napravim pozadinu stranice. Dodajte sljedeće svojstvo stilovima dijeljenog spremnika:</p><p>#main (pozadina: # B3C1E6)</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy loading=lazy></p><p>Ažuriramo stranicu i osiguravamo da naša stranica dobije ugodnu svijetloplavu shemu boja. Sada predlažem da malo unaprijedimo razinu dizajna - neka pozadina zaglavlja i podnožja bude tamnija od pozadine ostalih blokova. Možete dodati sljedeće retke koda:</p><p>#zaglavlje, #podnožje (pozadina: # 9091DA)</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy loading=lazy></p><p>Ovdje smo primijenili novu tehniku - napisali smo dva bloka odvojena zarezima i nova pozadina će se primijeniti na oba.</p><h3>Korak 7. Rad na zaglavlju</h3><p>Daljnji rad će biti projektiranje pojedinačnih blokova u atraktivnije stanje. Počnimo s kapom. Što obično nosimo šešir? Tako je, lijep naziv i logo stranice. To je ono što ćemo dodati.</p><p>Predlažem da počnete s logom. Budući da web stranicu izrađujemo pomoću html-a, logo ovog jezika smjestit ćemo u lijevi kut zaglavlja. Na internetu sam našla tako sladak logo.</p><p>Morate ga preuzeti i staviti u istu mapu u kojoj je pohranjen html dokument. <br>Sada gledamo:</p><p>#header (pozadina: # 9091DA url (html.jpeg) bez ponavljanja 5% centar)</p><p>Sliku sam nazvao html, a format joj je jpeg, zato takav zapis. Nadalje, naznačili smo i sljedeće naredbe: pozadinska slika se ne smije ponavljati, već treba biti pozicionirana s pomakom od 5% vodoravno od početka bloka i okomito centrirana. Najprije se uvijek bilježi horizontalni položaj, a zatim okomiti položaj.</p><p>Naravno, ako je vaša slika drugačije nazvana ili ima drugačiji format, trebali biste malo promijeniti dati kod. Super, imamo logo. Vrijeme je da uklonite natpis - ovo je zaglavlje stranice i zamijenite ga prekrasnim zaglavljem. Uklonite tekst iz zaglavlja i tamo umetnite novi element:</p><p> <div id="header"> <div id="title">Naziv stranice</div> </div> </p><p>Sada to trebate urediti:</p><p>#title (veličina fonta: 32px; float: lijevo; margin-left: 200px; font-family: Tahoma; boja: žuta; padding-top: 20px; sjena teksta: 0 0 5px narančasta;)</p><p>Postavili smo pristojnu količinu stilova: veličinu fonta, obitelj fontova, naslov lijevo, lijevi padding, boju, gornji padding i sjenku teksta. Nema smisla objašnjavati kako svako svojstvo radi upravo sada, stoga samo kopirajte kod i zalijepite ga u svoju tablicu stilova (css datoteku).</p><p>To je to, jednostavan šešir je spreman. Naravno, na stvarnoj stranici može sadržavati neke druge poveznice, adrese itd. Pa, dodajmo nešto za realizam. Ovaj html kod potrebno je umetnuti u sadržaj zaglavlja stranice.</p><p> <ul id="about"> <li>O nama</li> <li>Blog</li> <li>Povratne informacije</li> </ul> </p><p>Formira popis njihove tri veze. Zapravo, trebali bi negdje voditi, ali ovdje su samo prazne poveznice. Također ćemo urediti popis i poveznice u njemu.</p><p>#about (float: desno; stil liste: nema; margin-right: 50px) #about a (boja: žuta;)</p><h3>Korak 8. Izrada bočnog izbornika</h3><p>Obično bočna traka sadrži izbornik web-mjesta i mnogo više widgeta. Napravimo tamo jednostavan jelovnik. Opet će nam u tome pomoći lista, uz pomoć koje smo već prikazali linkove u zaglavlju, no budući da je glavni izbornik u teoriji opsežniji, bit će više linkova.</p><p> <ul class="menu"> <li>Stavka izbornika 1</li> <li>Stavka izbornika 2</li> <li>Stavka izbornika 3</li> <li>Stavka izbornika 4</li> <li>Stavka izbornika 5</li> <li>Stavka izbornika 6</li> </ul> </p><p>Izbornik (stil liste: nema)</p><p>Zapravo, ovdje sam napisao samo jedno pravilo - uklonio markere sa stavki popisa, sve ostalo je u redu. Također možete dodati naslov ispred izbornika i nekako ga stilizirati. Možete to učiniti sami. Naslovi su napisani u parnim oznakama <h1> - <h6>, gdje je prvi najveći (naslov članka), a posljednji najmanji, često se uopće ne primjenjuje. Za naslov izbornika u bočnom stupcu optimalno je uzeti <h3>.</p><h3>Korak 9. Dizajnirajte blok sadržaja</h3><p>Pa, što je tu nacrtati? Morate dodati malo teksta kako bi izgledalo kao prava stranica s člankom.</p><p> <h1>Naslov članka</h1> <p>I ovdje će biti neki članak...</p> <p>Sadržaj članka raščlanjen je na odlomke i podnaslove...</p> <h2>Podnaslov članka</h2> </p><p>Bilo koji sadržaj može se umetnuti u blok sadržaja. Odlomci u njemu čine glavni sadržaj, a oznake h1-h2 čine naslove i podnaslove. Označiti <b>h1</b> trebao bi biti jedini na stranici.</p><p>Dizajn je u ovom slučaju odrediti boju teksta. Na primjer, možete staviti smeđu. Naslovi se mogu naglasiti malo drugačijom nijansom. Ovdje neću davati nikakav kod, sami se možete sjetiti.</p><h3>Korak 10. Uređenje podruma</h3><p>Iskreno govoreći, nemam želju sad nešto gurati u podrum. Na stvarnim web-lokacijama u njemu se nalaze podaci o autorskim pravima, ponekad se nalaze jelovnici i poveznice na druge stranice. Samo ću tamo napisati riječ copyright i centrirati je ovako:</p><p>#footer (poravnanje teksta: središte)</p><h3>Korak 11. Ne, nema više koraka</h3><p>To je, zapravo, sve. Proces izrade najjednostavnijeg html predloška može se smatrati završenim. Imamo logo, naziv stranice, jelovnik, članak, podnožje. Općenito, ovo je vrlo primitivna, ali ipak stranica.</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy loading=lazy></p><p>Naravno, stranica izgleda kao da je više nikad ne želite pogledati, ali to ne mijenja bit. Dobar izgled posao je web dizajnera.</p><h3>I što dalje s tim?</h3><p>Svrha ovog članka bila je jednostavno pokazati kako napraviti jednostavnu web stranicu koristeći html i css. Možete raditi na njegovom dizajnu i možda ćete na kraju dobiti nešto privlačno. Ali ipak morate zapamtiti da je ovo statična stranica. Ako mu dodate nove stranice, to se radi ručno, stvaranjem novih html dokumenata.</p><p>Ovakav način upravljanja web stranicama je prošlost, iako ima svojih prednosti. Da biste postavili stranicu na mrežu, morate prenijeti sve html-datoteke, stilove i potrebne slike na neki hosting, plaćeni ili besplatni. Također morate registrirati naziv stranice da bi se nekako imenovalo. Domenu treće razine može se dobiti besplatno od mnogih tvrtki, ali ćete morati platiti za domenu druge razine <b>(.ru, .com, .ua, itd.)</b></p><p>Ono što smo s vama radili tijekom ovog članka naziva se izgled stranice. Ako želite upravljati svojom web lokacijom pomoću prikladnog vizualnog uređivača, tada će već izrađeni izgled morati biti integriran s bilo kojim od popularnih motora. Najbolje sa <b>WordPress</b>.</p><p>Ovo je zasebna tema - integracija je puno kompliciranija od samog izgleda. Da biste naučili kako izraditi web stranice za motor, morate proći dobar tečaj obuke. Besplatne informacije na internetu možda vam neće biti dovoljne. Opisao sam proces izrade stranice na wordpressu, ali tamo nećete naći informacije o tome kako integrirati html predložak s motorom.</p><p>U članku je predstavljena tzv. block layout metoda, odnosno, sav sadržaj smo smjestili u blokove. Ovo je i danas najpopularnija metoda. Općenito, u ovom procesu poželjno je koristiti HTML5 oznake, a ne samo blokove, već je zbog jednostavnosti u ovom članku primijenjena najjednostavnija opcija.</p><p>Nadam se da imate barem minimalnu ideju kako napraviti html stranicu u notepadu ili nekom drugom uređivaču teksta.</p> <p>Gospodo, dobro raspoloženje svima) Danas sam odlučio napisati članak na temu - Kako napraviti svoju web stranicu. Ovu temu su mi gurnuli čitatelji i prijatelji koji iz nekog razloga još uvijek ne razlikuju vrste stranica i stranica na internetu. Vrlo rijetko nešto nazivam web stranicom))) Međutim, mnogi moji prijatelji to često kažu. Posebno za njih odlučio sam opisati glavne vrste web stranica koje možete sami kreirati kako biste imali svojevrsnu reprezentaciju sebe na internetu.</p> <p>Prije izrade web stranice, svakako biste trebali kreirati email ili email adresu. Opisao sam opcije za stvaranje u ovom članku -. A ako imate adresu e-pošte, slijedit ćemo opcije za izradu vaše osobne web stranice. Čitajte dalje za načine koji će vam pomoći u izradi vaše web stranice.</p> <h3>Stranica na jednoj stranici</h3> <p>Najstariji način))) Za to morate naučiti osnove HTML jezika. Raditi to u naše vrijeme uopće nije potrebno, postoji milijun usluga, o čemu će biti riječi u nastavku. Međutim, ako želite razumjeti kako stranica radi i, dijelom, internet, pokušajte sami izraditi web-mjesto na jednoj stranici. Opisao sam kako to učiniti u članku -. Postoje opcije za izradu web stranice na jednoj stranici pomoću alata za izradu web stranica i besplatnih platformi.</p> <h3>Stranica na društvenoj mreži Vkontakte</h3> <p>Mislim da se u naše vrijeme izraz: "Stvorio sam sebi stranicu na Internetu" najviše se odnosi na društvenu mrežu Vkontakte. VK je najpopularnija društvena mreža u ZND-u. Ovdje je potrebna 1 minuta za izradu vlastite stranice. Štoviše, postoje deseci korisnih funkcija za korištenje interneta. <br>Puno sam napisao o Vkontakteu i planiram pisati još više)) S ovom društvenom mrežom možete i.</p> <p>Vkontakte vam također omogućuje stvaranje prikladnog URL-a vaše web stranice, umjesto standardnog URL-a prilikom registracije http://vk.com/id8032931. Onda ga možete promijeniti u lijepu - http://vk.com/vasheimya.vashafamiliya.</p> <h3>Facebook stranica</h3> <p>Ako je Vkontakte najpopularnija društvena mreža u ZND-u, onda je Facebook društvena mreža broj 1 u cijelom svijetu. Čini se da je Facebook za napredne korisnike ruskog govornog područja))) Ali osobno mislim da je to sve zbog činjenice da je Facebook vrlo popularan i prikladan.</p> <p>Baš kao i u Vkontakteu, možete sebi dodijeliti lijepu adresu za svoju web stranicu. Kompletan priručnik - kako napraviti web stranicu na Facebooku, opisao sam u članku -.</p> <h3>Blog</h3> <p>Blog mi je najpreporučljivija opcija za izradu vlastite web stranice. Blog pruža tisuće mogućnosti za samoostvarenje i vrlo je jednostavan za korištenje. Često besplatno kao i web stranice društvenih medija. <br>Ovdje je izbor članaka o izradi web stranice pomoću bloga:</p> <ul><li>- brzo, ali uz cijenu hostinga i zasebnu domenu.</li> <li>Googleova je platforma za bloganje. Integriran s mnogim Googleovim uslugama. Vrlo zgodno ako ste Google fan))</li> <li>To je najbrže rastuća platforma za bloganje. Pročitao sam statistiku u jednoj od američkih publikacija da je Tumblr popularniji među djecom u SAD-u od 12-13 godina od Facebooka !!! Mislim da je to pokazatelj pogodnosti i razvoja ove platforme.</li> <li>- ovdje su priručnici za gotovo sve poznate platforme za bloganje, uključujući gore navedene.</li> </ul><h3>Dnevnik</h3> <p>Ovdje su sve osnovne opcije za izradu vaše web stranice, odnosno vaše web prisutnosti. Doslovno 1 minuta i već uranjate u prostor World Wide Weba. Sretan razvoj web stranice!</p> <p>Pozdrav svima, dragi prijatelji i gosti mog bloga! Jao. Upravo sam primijetio da mi je Yandex dodijelio TIC 20, iako je jučer bio 0. Razumijem da TIC zapravo ne znači ništa, ali je ipak vrlo ugodan i radostan. Pa, općenito, želio sam nastaviti nedavno započeti ciklus članaka o izgradnji web mjesta. I prva stvar s kojom bih želio početi je s osnovama jezika za označavanje hiperteksta (ne programiranja!) HTML.</p> <p>HTML je i dalje osnova svega, a čak i ako niste cool web developer, ali ćete svoje stranice praviti na motorima, tada će vam poznavanje HTML jezika biti ogroman i hrabar plus. Stoga vam u današnjem članku želim reći kako stvoriti html stranicu pomoću notepad-a.</p> <p>Naravno, ovo što ćemo danas raditi teško će se nazvati stranicama, pa odmah kažem da danas nećemo napraviti cool stranicu, ali ću vam reći strukturu kako se sve događa s ovom metodom izrade vlastitog weba resurs. Mislim da ne biste trebali imati poteškoća. Kao rezultat, napravit ćemo najjednostavniju web stranicu za početak. A ako ste spremni, idemo!</p> <p>Prvo stvorite običan tekstualni dokument ili otvorite bilježnicu. Da biste otvorili bilježnicu, možete pozvati redak "Pokreni" i tamo unijeti bilježnicu. Jeste li ga otvorili? Dobro napravljeno!</p> <p>Svaki html-dokument ili stranica označeni su posebnim oznakama. Oznaka je poseban znak koji web-mjestu daje naredbu kako ispravno prikazati određeni dio sadržaja koji je u njemu zatvoren. Sada se neću zadržavati na tome detaljno, jer ću vam reći o oznakama u mom.</p> <p>Reći ću samo da je većina tagova uparena, odnosno početni tag se stavlja na prvo mjesto, a nakon što smo zapisali informaciju, trebamo zatvoriti tag. Zatvara se na isti način kao što se otvara, samo prije zatvaranja potrebno je staviti znak "/".</p> <p><img src='https://i2.wp.com/koskomp.ru/wp-content/uploads/2016/06/Bez-imeni-1.jpg' width="100%" loading=lazy loading=lazy></p> <p>Općenito, da bismo funkcionirali, moramo staviti nekoliko potrebnih oznaka. Pogledajmo što su.</p> <ul><li><html></html>- ovo je glavna oznaka, zahvaljujući kojoj web stranici kažemo da ćemo sada pisati ovdje u HTML-u, tako da ne brinite. Stranica bi trebala početi s njim i biti zatvorena s njim.</li> <li><head></head>- ovdje se upisuju servisni podaci, na primjer, naziv dokumenta, opis i mnogi drugi. Postavlja se odmah nakon otvorene oznake <html>.</li> <li><title>- Između ovih vrijednosti upisujemo naslov stranice, odnosno, ovaj naslov neće biti prikazan u sadržaju same stranice, već na kartici preglednika. Ova vrsta se postavlja između

- ova oznaka je odgovorna za prikaz sadržaja na stranici. Odnosno, sve što napišete između ovih oznaka bit će prikazano na web stranici.

Osjećam da nisu svi sve razumjeli, a nekima je i nered u glavi pa ću vam sve pokazati na živom primjeru.

Živi primjer

Stoga kreiramo tekstualni dokument i u njega upisujemo sljedeći sadržaj:

Jeste li napisali? Dobro napravljeno! Ovdje sam vam dao informaciju konkretno u obliku slike, a ne u obliku teksta, tako da je nećete kopirati. Evo ja sam nitkov, zar ne?)) Jeste li primijetili da su oznake ugrađene jedna u drugu kao lutke za gniježđenje? Tako bi trebalo biti.

Savjet! Pokušajte ne kopirati sadržaj, već ga sami prepišite. Tako ćete svo gradivo naučiti puno bolje i brže.

Zatim spremite dokument u html formatu. Da biste to učinili, prilikom spremanja, nakon što date naziv dokumentu, stavite točku i napišite html. To jest, trebali biste imati index.html. Tada će vaš dokument automatski biti spremljen ne kao tekstualni dokument, već kao web stranica. A kada spremate dokument, promijenite kodiranje u UTF-8. Ovu datoteku možete otvoriti u bilo kojem pregledniku. Učinimo to i vidimo što ćemo dobiti.

Pogledajte koliko smo ukupno napisali, a u konačnom dokumentu ostao je samo naš pozdravni tekst. Zašto? Da, jer se same oznake ne prikazuju u konačnoj verziji, a prikazane informacije prikazuju se samo između oznaka tijelo... Stoga se sve dogodilo. Ali pogledajte, ono što smo napisali u glavi, točnije u naslovu, sada se prikazuje u kartici preglednika.

Ako ovdje želite ponovno nešto urediti, samo morate ponovno otvoriti ovaj već spremljeni dokument u bilježnici. Općenito, pogledajte, na ovaj način, uz pomoć notesa, napravili smo našu prvu web stranicu. Da... teško je to nazvati web-stranicom, ali zapravo jest. Napravili smo bazu (okvir) i ako je učitamo na hosting, tada će već biti prikazan na internetu.

Ali pokušajte staviti malo razmaka i napisati više teksta ili jednostavno napišite nekoliko redaka teksta i spremite ga u isti dokument.

Sada unesite ovaj dokument pomoću svog preglednika. Što vidimo? A činjenica da vaši razmaci i prijelomi redaka nisu utjecali na dokument i sve ide u jedan redak. Ružno, zar ne? To je zato što sam html ne razumije vaš razmak (osim jednog) ili crticu. Da bi se premotale linije, sve je potrebno označiti drugim oznakama, o čemu ćemo govoriti u drugim člancima.

Mnogi ljudi će vjerojatno pomisliti nešto poput: “A ovo je vaša stranica? Srušio si se s hrastom." Da, dragi moji. Ova primitivna web stranica može se nazvati i web mjestom. I još jednom ću ponoviti da poanta ovog članka nije bila napraviti mega-cool stranicu, već pokazati vam osnovu svake stranice, kako to izgleda, kako se sve događa.

Ali ne brini. Ovo su sve uvodne lekcije. Zatim ćemo sve dublje zaroniti u html oznaku i moći ćemo sve pravilno formatirati i posložiti. Općenito, sve će biti cool i napravit ćemo punopravni web resurs. Samo što sve to neće stati u jedan članak, a neću ni gužvati i kratiti, inače će ispasti smeće.

Namjenska bilježnica za web programere

Ali ipak, više nećemo koristiti ovaj prapovijesni alat, budući da postoji prikladniji i sofisticiraniji notepad za programere, i to apsolutno besplatan. Preuzmite ga odavde i instalirajte na uobičajeni način.

U budućnosti ću raditi kroz uređivač Notepad ++. Instalirajte ga i shvatit ćete zašto je to prikladno. Tu nema mudrih postavki, ali ako ste iznenada instalirali englesku verziju, idite na izbornik "Preference" i odaberite ruski u stupcu "Lokalizacija".

Da, i također idite na izbornik "Encoding" i odaberite "UTF-8". Pa, odmah spremite ovu datoteku u html format. Da biste to učinili, odaberite izbornik "Datoteka" - "Spremi kao" i pozovite indeksni dokument, odabirom "html" formata s padajućeg popisa. To je učinjeno kako bi program razumio što radimo i istaknuo oznake i naredbe koje su nam potrebne.

Zašto uopće zovem indeks stranice? Činjenica je da kada posjetite bilo koju stranicu, ona prema zadanim postavkama traži stranicu index.html ili index.php. Upravo su te datoteke općenito prihvaćene kao glavne, ali općenito se to može promijeniti na poslužitelju.

Naravno, ako želite sve brzo naučiti, preporučam da pogledate nedavno objavljene Tečaj HTML5 i CSS3... Tamo je sve detaljno opisano i prikazano na primjeru uživo, osim toga, naučit ćete kako napraviti nekoliko vrsta stranica. Općenito, vrlo zanimljive i informativne lekcije.

Pa, preporučujem da se pretplatite na ažuriranja mog bloga, kako ne biste propustili sljedeće lekcije, kao i druge zanimljivosti. Također, svakako provjerite ostale članke na mom blogu. Siguran sam da će vam mnoge od njih biti korisne. Općenito, želim vam puno sreće. Vidimo se u drugim člancima. Doviđenja!

Srdačan pozdrav, Dmitry Kostin.

Pozdrav dragi čitatelji bloga. S ovim člankom počet ćemo učiti osnove HTML jezika.

Vjerojatno već znate da je glavni jezik interneta Jezik za označavanje hiperteksta (HTML)... U ovom članku naučit ćemo osnovne koncepte HTML-a i kako napraviti najjednostavnije WEB stranice.

Počnimo s najvažnijom stvari, razmislite kako ona sama radi svjetska mreža – Internet... Za primanje web stranica stvarate datoteke napisane u HTML-u i stavljate ih na web poslužitelj. Nakon toga svaki preglednik instaliran na uređaju s pristupom Internetu, bilo da se radi o računalu, telefonu ili tabletu, može pronaći vaše web stranice.

Web poslužitelj Je li obično računalo s posebnim softverom koje ima pristup Internetu. Neprestano čeka zahtjeve preglednika za web stranice, slike, audio i video datoteke. Nakon što je primio zahtjev za jedan od ovih resursa, poslužitelj ga traži i šalje pregledniku.

Preglednik Poseban je program za pregledavanje web stranica, kao što je Internet Explorer. Sa svojim preglednikom web stranice pregledavate klikom na poveznice. Svaki takav klik uzrokuje da preglednik uputi zahtjev za html stranicu web poslužitelju, primi odgovor i prikaže stranicu u svom prozoru. Kada se stranica prikaže, HTML jezik počinje raditi, on pregledniku govori sve o strukturi i sadržaju web stranice. Korištenje naredbi - oznake, HTML govori pregledniku gdje počinju odlomci teksta, koji dio teksta je naslov i označava gdje treba umetnuti tablice, pa čak i slike. A oznake su riječi u kutnim zagradama, na primjer

, .
Hitno je potrebna internetska trgovina, a vremena za učenje HTML, CSS, PHP i drugih tehnologija nema. Tada možete jednostavno iznajmiti online trgovinu s potpuno implementiranom funkcionalnošću i optimizacijom za tražilice.
HTML jezik i njegove oznake
Prva verzija HTML jezika pojavila se davne 1992. godine. U vrijeme 2013. godine razvija se specifikacija nove verzije HTML-a pod brojem 5. Ovu specifikaciju razvija World Wide Web Consortium ili skraćeno W3C. W3C također razvija druge web standarde. S ovim standardima možete se upoznati na njihovoj web stranici www.w3.org. Usput, mnogi web preglednici već podržavaju neke od HTML 5 značajki.
Predlažem da odmah počnemo učiti HTML jezik s primjerom. Pa napravimo našu prvu web stranicu. Svaki uređivač teksta prikladan je za izradu WEB-stranica. Predlažem da počnete koristiti ugrađeni Windows Notepad(općenito, u budućnosti, za uređivanje html-koda, savjetujem vam da koristite). Možete ga pronaći: "Start-> Svi programi-> Pribor-> Notepad". Napravimo stranicu o automobilima. Dakle, otvorite Notepad i upišite tekst u njega:

Primjer web stranice

Stranica o automobilima.

Dobrodošli na našu web stranicu automobila. Ovdje ćete naći mnogo zanimljivih i korisnih članaka o tome automobili... Stranica sadrži opise mnogih uvezenih i domaćih automobila.

Zatim spremimo kreiranu web stranicu u datoteku pod nazivom index.html. U ovom slučaju, u dijaloškom okviru za spremanje datoteke morate postaviti UTF-8 kodiranje i staviti naziv datoteke u navodnike, inače će joj Notepad dodati ekstenziju txt, a naša će datoteka biti nazvana index.htm.txt:
Sada ostaje otvoriti stvorenu datoteku u pregledniku i pogledati rezultat. Da biste to učinili, možete koristiti preglednik Microsoft Internet Explorer isporučen sa sustavom Windows ili bilo koji drugi preglednik instaliran na vašem računalu, tako da dvaput kliknete datoteku index.html ili povučete datoteku na ikonu preglednika. Otvorite ga i vidite nešto poput ovoga:
Stoga smo u Notepad-u stvorili web stranicu, doduše pomalo neupadljivu, ali već sadrži veliki naslov i odlomak teksta koji je automatski razbijen u retke i sadrži podebljan ulomak.
Što je oznaka?
Sada razgovarajmo detaljnije o strukturi stranice. Razmotrite isječak:
Web stranica o automobilima
. Ovdje vidimo tekst koji se prikazuje na stranici kao naslov, zatvoren u oznake
i
... Što je oznaka u html jeziku?
HTML oznaka su obične riječi i simboli zatvoreni u kutnim zagradama, na primjer
,
, ... Pa označi
je početna oznaka, oznaka
završnu oznaku, a tekst između njih naziva se sadržaj oznake. Također označite
i oznaka
nazivaju se uparene oznake. Zajedno, početna oznaka plus sadržaj i završna oznaka čine element html dokumenta. Postoje i elementi koji se sastoje od jedne početne oznake:
Tako uparena oznaka
definira element naslova prve razine. Ukupno je šest razina naslova, to su elementi
—
.

Elementi mogu biti blok i inline (tekst). Blok elementi strukturno oblikovanje stranice. Blok elementi se uvijek prikazuju u novom retku na stranici i uvučeni su od susjednih elemenata. Inline elementi izvršiti izravno oblikovanje teksta ili logičko oblikovanje. Element
je blok element.

To je sve za mene!!! Vidimo se u sljedećim objavama!
9 glasova
Dobrodošli na stranice bloga Start-Luck. Danas bih vam želio pokazati kako koristiti kod. Pisanje web stranica zanimljiva je aktivnost koja se mnogima može činiti iznimno teškom. Zapravo, jednostavnu stranicu možete izraditi za samo 5 minuta.

U ovom članku govorit ću o izradi html stranice. Ovaj ćemo zadatak završiti za manje od 10 minuta, a zatim ćemo se detaljnije pozabaviti glavnim oznakama. Bilo bi pogrešno takvu publikaciju nazvati poukom. Umjesto toga, to je sjeme koje je dizajnirano da vam pokaže lakoću rada i da vam da želju da idete dalje, naučite više, radite bolje.

Kako napraviti stranicu
Predlažem da prvu stranicu napravite u notesu. Najjednostavniji, koji se nalazi u izborniku "Start", mapi "Standard". Ne morate još ništa preuzimati. Pokušajte iskoristiti ono što imate.
Otvorite svoj dokument.
Zalijepite ovaj kod u njega.

<html> <glava> <naslov> Moja prva stranica</ naslov> </ glava> <tijelo> <centar>
</ h1> <br />
<centar> "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> <br />
<stil fonta = "boja: crvena"></ font> <br />
<b></ b> <br />
Stigli smo do samog dna<br />
Sada znate nešto više o oznakama i možete ih koristiti. Pokušajmo umetnuti poveznicu za povezivanje nekoliko stranica zajedno.<br />
<hr> Na primjer, ovdje je poveznica na moj blog -<a href = "http: // stranica /"> Start-Sreća</ a>- govori jednostavno o "teško".<br />
<br />
</ tijelo> </ html>

Moja prva stranica
Napraviti stranicu lakše je nego što mislite
Mnogima se može činiti da je stvaranje web stranice teško, čak nemoguće. Da biste to učinili, morate puno naučiti, učiti, raditi. Zapravo, postoji oko 100 oznaka koje ne morate ni naučiti. Važno je samo razumjeti što se i gdje primjenjuje. Informacije se mogu špijunirati u raznim cheat sheets, a s vremenom ćete se početi sjećati oznaka na stroju.

Jednostavan kod čini tekst crvenim

Nije puno teže pisati podebljano

Stigli smo do samog dna

Sada znate nešto više o oznakama i možete ih koristiti. Pokušajmo umetnuti link za povezivanje nekoliko stranica zajedno ..

OK, sada je sve gotovo. Vaša prva stranica je spremna

Datoteci je potrebno dati ime index.html... Završetak ".Html" označava ekstenziju datoteke. Ako samo unesete naziv indeksa, dokument će biti spremljen kao tekstualna datoteka i neće se otvoriti u pregledniku.

Spremio sam dokument na radnu površinu. Sada ga trebate pronaći, kliknuti desnom tipkom miša i otvoriti ga bilo kojim preglednikom. Odabrat ću Google Chrome.

Ovako izgleda stranica koju sam upravo napravio. Tvoja neće biti ništa drugačija. Sve je potpuno isto: sa slikama i fontom u boji.

Sada ću detaljnije o oznakama, ali za sada samo maknimo iz naslova “ centar "I umetnite redak koji sadrži riječ" Boja". Inače, već sam napisao. Vrlo je jednostavno, preporučam da ga pročitate.

Ponovno spremite dokument, ovaj put možete koristiti samo tipkovnički prečac Ctrl + S, a zatim osvježiti stranicu u pregledniku pomoću tipke F5

Zapamtite, gotovo svaka oznaka mora se otvarati i zatvarati. To jest, negdje mora postojati kosa crta. U ovom slučaju to izgleda ovako: .

Vidite, naslov je postao crven. Isto tako, bilo kojem dijelu teksta možete dati željenu nijansu.

Eto, to je sve, primjer je spreman, i treba biti ponosan na sebe. Naravno, još nije online, za to morate staviti web stranicu koju osigurava hosting. Također morate povezati svoju domenu kako bi drugi ljudi mogli vidjeti vašu kreaciju.

Za sada samo vi možete vidjeti stranicu. Ali morate priznati da takvo mjesto može iznenaditi samo osobu iz željeznog doba. Ali ovo je prvo iskustvo, učinimo ga još uspješnijim razumijevanjem oznaka koje smo koristili. To će vam pomoći da naučite kako kreirati vlastite projekte, bez tuđe pomoći.

Oznake

Uz vaše dopuštenje, preći ću na NotePad ++. Ima niz prednosti u odnosu na običnu bilježnicu. Za sada je isticanje oznaka vrlo zgodno da vam pokaže elemente o kojima ću govoriti. Općenito, ako ćete naučiti html, toplo preporučujem instaliranje ovog besplatnog programa.

Nije jedini i mogu vam ponuditi još nekoliko ako nekoga zanimaju alternative. Prijeći ćemo na teoretski dio.

Glavni

Stranica počinje i završava oznakama ... Pokazuju pregledniku da je ovo web dokument generiran pomoću html-a.

Sljedeće dolazi ili naslov. Sadrži najvažnije informacije o stranici, u našem slučaju -. Ako još niste pronašli izraz "Moja prva stranica", koji je prisutan u kodu, obratite pozornost na samu karticu, iznad retka za pretraživanje.