Dobrodošli na stranice bloga Start-Luck. Danas bih vam htio pokazati kako se koristi kod. Pisanje web stranica je zanimljiva aktivnost koja se mnogima može činiti izuzetno teškom. U stvari, jednostavna stranica se može kreirati za samo 5 minuta.
U ovom članku govorit ću o kreiranju html stranice. Ovaj zadatak ćemo završiti za manje od 10 minuta, a zatim ćemo se detaljnije pozabaviti glavnim oznakama. Bilo bi pogrešno takvu publikaciju nazvati lekcijom. Umjesto toga, to je sjeme koje je dizajnirano da vam pokaže lakoću rada i da vam da želju da nastavite dalje, naučite više, radite bolje.
Kako kreirati stranicu
Predlažem da prvu stranicu napravite u notesu. Najjednostavniji, koji se nalazi u meniju "Start", folder "Standard". Ne morate još ništa preuzimati. Pokušajte da iskoristite ono što imate.
Otvorite svoj dokument.
Zalijepite ovaj kod u njega.
<html>
<glava>
<naslov> Moja prva stranica</ naslov>
</ glava>
<tijelo>
<centar> </ h1> <br /><centar> <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. Hajde da pokušamo da ubacimo link da povežemo nekoliko stranica zajedno.<br /> <hr> Na primjer, evo linka do mog bloga -<a href = "http: // stranica /"> Start-Luck</ a>- govori jednostavno o "teško".<br /> <br /> </ tijelo> </ html> |
Pravljenje stranice je lakše nego što mislite
Jednostavan kod čini tekst crvenim
Nije mnogo teže pisati podebljano
Stigli smo do samog dna
Sada znate nešto više o oznakama i možete ih koristiti. Hajde da pokušamo da ubacimo link da povežemo nekoliko stranica zajedno..
To je sve. Vaša prva stranica je spremna
Datoteci treba dati ime index.html... Kraj ".Html" označava ekstenziju datoteke. Ako samo unesete naziv indeksa, dokument će biti sačuvan kao tekstualni fajl i neće se otvoriti u pretraživaču.
Sačuvao sam dokument na radnoj površini. Sada ga morate pronaći, kliknuti desnim tasterom miša i otvoriti ga koristeći bilo koji pretraživač. Ja ću izabrati Google Chrome.
Ovako izgleda stranica koju sam upravo napravio. Tvoje neće biti drugačije. Sve je potpuno isto: sa slikama i fontom u boji.
Sada ću ići detaljnije o oznakama, ali za sada samo uklonimo iz naslova “ centar "I umetnite red koji sadrži riječ" Boja". Inače, već sam pisao. Veoma je jednostavan, preporučujem da ga pročitate.
Ponovo sačuvajte dokument, ovaj put možete samo koristiti prečicu na tastaturi Ctrl + S, a zatim osvježiti stranicu u pretraživaču pomoću F5 dugmeta
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.
E, to je sve, primjer je spreman i treba da budete ponosni na sebe. Naravno, još uvijek nije online, za to je potrebno postaviti web stranicu koju obezbjeđuje 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. Ovo će vam pomoći da naučite kako kreirati vlastite projekte, bez tuđe pomoći.
Oznake
Uz vašu dozvolu, preći ću na NotePad ++. Ima niz prednosti u odnosu na običan notebook. Za sada, isticanje oznaka je vrlo zgodno da vam pokaže elemente o kojima ću govoriti. Općenito, ako ćete naučiti html, toplo preporučujem da instalirate ovaj besplatni program.
Nije jedini i mogu vam ponuditi još nekoliko ako nekoga zanimaju alternative. Preći ćemo na teorijski dio.
Glavni
Stranica počinje i završava se oznakama ... Oni pokazuju pretraživaču da je ovo web dokument generiran pomoću html-a.
Sledeće dolazi ili naslov. Sadrži najvažnije informacije o stranici, u našem slučaju -. Ako još niste pronašli frazu "Moja prva stranica", koja je prisutna u kodu, obratite pažnju na samu karticu, iznad linije za pretragu.
Naime oznake
Tag
označava da je fraza naslov. Podrazumevano je malo veći od osnovnog teksta i podebljan je. Kad bismo ti i ja sada pisali ne samo u html-u, već i kreirali CSS fajl s kojim je naš fajl odjekivao, mogli bismo kontrolirati veličinu, font, pa čak i boju svih zaglavlja na stranici bez propisivanja stil fonta
kao što smo uradili u primeru. Iako je i ovo malo rano.
Inače, Title i H1 imaju svoj učinak kada dodijelite Vašu stranicu rezultatima pretrage. Morate se prema njima odnositi s velikom pažnjom, a ne upisivati samo šta. Oni su povezani sa. Osim h1, tu su i h2, h3, h4.
U istoj liniji se nalazi otvaranje i zatvaranje
Jedan je od rijetkih pojedinačnih oznaka. Odnosno, radi sam po sebi. Zahvaljujući tome, elemente skačete s jedne linije na drugu. Jednostavno rečeno, uvlaka. Napisali smo ga jednom, što znači da smo se pomerili jednom, dvaput, kao moj, i ispostavilo se da je udubljenje malo više.
Slika
Sljedeća je oznaka img , odnosno slika, slika. Uglata zagrada se otvara, u nju se unose svi osnovni podaci o slici, tek nakon toga se zatvara. Treba napomenuti da img Je oznaka, a svi ostali elementi koda koji se uklapaju unutra su njeni atributi.
Prva stvar je alt , odnosno opis. Ovo je takođe potrebno za optimizaciju. Ponekad se dodaje i naslov ... Kada mišem zadržite pokazivač miša iznad slike, pored kursora se pojavljuje alatka kada je stranica već otvorena u pretraživaču.
Bilo je moguće učitati sliku u mapu stranice i napisati putanju do nje, ali ja sam otišao lakšim putem. Našao sam sliku na Pixabayu, otvorio je u novom prozoru i zalijepio link.
U oznaci src put do slike je napisan. On je taj koji govori pretraživaču šta da se kreće dalje da pronađe željenu sliku i u kom pravcu da gleda - pišete sami.
Formatiranje teksta
odgovoran je za to da dijelu teksta da neki poseban stil, na primjer, kao u našem slučaju, drugu boju. style = "boja: crvena" označava da će boja biti crvena. Ako želite žuto, napišite žuto, zeleno - zeleno. Možete koristiti kodove boja iz Photoshopa.
pomaže da se tekst podeblja.
crta horizontalnu liniju. Jednostruka je i koristi se samo zatvorena. Ako pišeš
nekoliko puta, dobićete potpuno isti broj horizontalnih pruga kada otvorite stranicu u pretraživaču.
Linkovi
govori pretraživaču da će link biti sljedeći. Želite da preusmjerite čitaoca na drugu adresu. Ova oznaka dolazi sa obaveznim atributom href = "adresa" ... Navodnici uključuju putanju na koju pretraživač treba da odvede posetioca na stranicu. Nakon registracije ove oznake, ubacuje se opis, riječ ili više njih, klikom na koji će čitač biti prebačen dalje. Nakon što su ovi uslovi ispunjeni, možete umetnuti drugu, završnu oznaku .
Nakon što se napiše glavni dio stranice, zatvarate oznaku tijelo pošto je telo kompletno. I naznačite da prestajete koristiti za danas html .
Ako želite da naučite više o html tagovima i naučite kako da ubacite ne samo slike, već i video zapise, kreirate dugmad, razne forme, liste, pasuse, onda vam mogu ponuditi besplatan kurs Evgenija Popova “ HTML osnove ". Samo 33 lekcije pomoći će vam da dostignete sljedeći nivo.
Također bih vam preporučio video kurs koji vam govori kako se prave stranice. Cijeli proces je prikazan stvarnim primjerima, što je posebno dobro. Kurs je namijenjen kako početnicima koji još ne znaju HTML, tako i onima koji već dobro poznaju HTML i CSS, međutim, nisu dobri u kodiranju sajtova. Detaljnije informacije možete dobiti klikom na link: www.srs.myrusakov.ru/makeup
Osim toga, ponijeti Besplatna knjiga o izradi web stranica ! Ova knjiga je dizajnirana za početnike i tu se stvara OT i DO stranica. Odnosno, priprema se dizajn, zatim se prave stranice, piše softverski dio, a zatim se stranica postavlja na internet. Autor sve detaljno komentariše, a knjiga sadrži mnogo screenshotova i ilustracija. Štaviše, posebnost knjige je u tome što se ne stvara apstraktna stranica, već potpuno stvarna koja postoji na internetu.
Danas ste uradili mnogo, jer je prvi korak najteži.
Pretplatite se na newsletter i VKontakte grupa , i saznajte više: kako i zašto vam je potreban motor stranice, šta je raspored blokova i modularna mreža, kako pravilno pisati stranice i još mnogo toga.
Do sljedećeg puta i sretno!
Instrukcije
Sve što posjetitelj vidi na webu pretraživač ponovo kreira prema uputama koje šalje njegov server. Ove upute su napisane u HTML-u (HyperText Markup Language) i istaknute su u htm i html za datoteke u kojima su pohranjene. Takvu datoteku možete kreirati u običnom uređivaču teksta - ovo će biti prvi korak u stvaranju web stranice... Otvorite standardni Notepad, na primjer, i kreirajte praznu datoteku pod nazivom index.html. Kada upišete adresu web stranice bez navođenja određene stranicu(na primjer), prvo što treba učiniti je tražiti stranicu sa ovim nazivom - indeks.
HTML instrukcije se nazivaju "tagovi" i svaka od njih je zatvorena u takve zagrade -<>... Neki od tagova su upareni, odnosno sastoje se od otvarajućih i zatvarajućih oznaka, a između njih se postavlja informacija. Na primjer, oznaka koja govori pretraživaču da je kod u HTML-u ispod, ovako: Završna oznaka koja pokazuje da je HTML završen u ovom trenutku piše se ovako: Kao što vidite, završna oznaka se razlikuje od početne po prisustvu kose crte iza početne zagrade (
Sav kod koji ste stavili između oznaka i, treba podijeliti na dva dijela - zaglavlje i tijelo dokumenta. Oznake za otvaranje i zatvaranje naslova pišu se ovako:
Ovo je "servisni" dio stranice - ovdje se nalaze informacije za naslov prozora, ključne riječi i opisi robota za pretraživanje, opisi stilova, skripti itd. Unesite naslov prozora stranice u njega: