Nova stranica u web pretraživaču. Kako napraviti web stranicu

31.07.2019 Windows telefon

MOSKVSKI INSTITUT OTVORENOG OBRAZOVANJA
ODSJEK ZA MATERIJAL I INFORMACIONE TEHNOLOGIJE

Materijali za kurseve na daljinu
"Informaciona tehnologija i obrazovanje"

Polilova Tatjana Aleksejevna
[email protected]

Kako napraviti web stranicu

Najlakši način za kreiranje web stranice je korištenje alata iz Microsoft Office paketa. Najnovije verzije ovog paketa pružaju mogućnost konvertovanja običnog dokumenta u HTML format uz dobar kvalitet koda.

Karakteristike Worda

Dokument pripremljen u Word uređivaču teksta može se lako pretvoriti u web stranicu. Međutim, neće izgledati tako atraktivno koliko bismo željeli ako se ne preduzmu dodatni koraci. Pogledajmo nekoliko primjera.

Uzmimo malo teksta.

Konvertujmo dokument u web stranicu pomoću operacije Sačuvaj kao web stranicu... (poziva se iz glavnog menija - pozicija datoteke). Tada će html reprezentacija dokumenta izgledati ovako:

Prva stvar koja vam upada u oči je da tekst zauzima cijeli prostor na ekranu. Niz je predugačak. Za udobno čitanje na ekranu, broj znakova po redu trebao bi biti u rasponu od 50-65.

Koristeći sto

U ovom slučaju to možete učiniti vrlo jednostavno: kreirajte tabelu u izvornom dokumentu i u nju postavite željeni tekst. Stol može biti uokviren. Tada će izgled web stranice biti znatno poboljšan, a stranica će izgledati privlačnije u pretraživaču.

Pozadina i stil

Preporučljivo je odabrati pozadinu koja nije previše svijetla kako bi se tekst na njoj mogao dobro čitati. Takva pozadina na predloženoj listi je, na primjer, rižin papir. Stranica se dosta promijenila:

Umetnite sliku

Možete dodati sliku u dokument tako što ćete je uzeti, na primjer, iz kolekcije isječaka.

Potrebno je da kliknete desnim tasterom miša na sliku, izvršite operaciju kopiranja, a zatim odredite mesto za sliku u dokumentu i izvršite operaciju lepljenja kopiranog objekta.

Ako umetnete sliku unutar paragrafa, bolje je promijeniti svojstva slike tako što ćete postaviti da se tekst omota oko slike (potrebno je odabrati poziciju glavnog menija Format, a zatim Slika):

Ovo neće stvoriti dodatni bijeli prostor u dokumentu.

Konačno, možete dodati okvir i senku na sliku pomoću dugmadi na panelu Crtanje - Tip linije i Stil senke. Takve nijanse značajno dodaju izražajnost stranici.

Ako se tabla za crtanje ne nalazi na stranici, potrebno je da je instalirate tako što ćete izabrati poziciju glavnog menija View, a zatim Toolbars and Drawing.

Ticker

Word vam omogućava da dodate druge elemente dizajna na web stranicu, kao što je "markee". Da biste koristili ovu funkciju, potrebno je da otvorite panel web komponenti na ekranu (iz glavnog menija - stavka Prikaz, zatim trake sa alatkama i Web komponente). Klikom na dugme operacije Creep line otvara se dodatni prozor za podešavanje teksta parametara linije puzanja.

Kao i obično, možete promijeniti font i atribute u nizu: veličinu fonta i boju karaktera. Web stranica će na ekranu izgledati ovako:

Naveli smo primjer samo vrlo skromnog skupa tehnika dizajna pomoću kojih možete dizajnirati web stranicu na osnovu postojećeg Word dokumenta.

Korištenje predložaka dizajna

Ako počinjete da kreirate stranicu od nule, onda možete koristiti čarobnjaka za web stranicu, koji će vam pomoći da kreirate dokument u dijalogu. Ili možete koristiti gotov predložak za dizajn stranice tako što ćete ga odabrati iz prilično reprezentativnog skupa. Da biste to učinili, u operaciji Kreiraj odaberite način Kreiraj pomoću predloška, a zatim Opći predlošci. Na ekranu će se pojaviti obrazac u kojem trebate odabrati karticu Web stranice:

Korisnik može sam odabrati rješenje boje i stila, na primjer, pomoću postavki Format - Tema.

Kreirajte hiperveze i oznake

Poslednje pitanje koje planiramo da razmotrimo u ovom odeljku je kreiranje hiperlinkova u dokumentu.

Ako u dokumentu želimo da povežemo neki drugi dokument ili drugu lokaciju na Internetu, onda se takva hiperveza može uraditi na sledeći način: izaberite deo teksta (reč) u dokumentu i izvršite operaciju Umetanje - Hiperveza... A na ekranu će se pojaviti obrazac u kojem je navedena adresa hiperveze. Adresa se može uneti eksplicitno ili možete izabrati datoteku u prozoru.

Ovdje treba imati na umu da se adresa odabrane datoteke na vašem računaru može promijeniti kada kreirate svoju web lokaciju. Stoga je implicitni način navođenja adrese prikladan samo ako je struktura vašeg foldera na vašem računaru i na Internet stranici ista.

Ako se hiperveza odnosi na drugi dio istog dokumenta, prvo morate umetnuti oznaku na početak željenog fragmenta. Potrebno je izvršiti operaciju Insert - Bookmark, te u formu koja se pojavi na ekranu upisati naziv markera.

Web prezentacija u PowerPointu

PowerPoint je dizajniran za kreiranje prezentacija na računaru. Međutim, ima funkciju pretvaranja pripremljene prezentacije u web format.

Možete otvoriti pripremljenu prezentaciju i izvršiti operacije (iz glavnog menija) Datoteka - Sačuvaj kao web stranicu. Kao i obično, potrebno je da postavite naziv web prezentacije u prozoru koji se otvori. Kao rezultat konverzije prezentacije, kreiraće se fajl sa navedenim imenom i ekstenzijom .htm i fascikla sa istim imenom sa dodatnim materijalima.

Ako sada pozovete web prezentaciju iz pretraživača, možete vidjeti rezultat konverzije na ekranu.

Na dnu ekrana kreira se posebna linija u kojoj se nalaze dugmad za prelazak na slajdove i dugmad za podešavanje različitih parametara za gledanje prezentacija.

Prezentacija se može pogledati sa prikazom strukture slajda. Ali ako ove informacije nisu od interesa, tada se polje rezervirano za prikazivanje strukture na ekranu može ukloniti (operacija proširenja/sažimanja strukture u donjem redu).

Dugme Slideshow vam omogućava da pregledate svoje slajdove na cijelom ekranu.

Kreirajte hiperveze

U prezentaciji možete kreirati hiperveze koje povezuju objekte na slajdu sa, na primjer, drugim slajdovima. Tako je moguće stvoriti hipermedijsku strukturu koja će prirodno odgovarati ideologiji Interneta. Objasnimo ovaj pristup na primjeru.

Pretpostavimo da imamo nekoliko pripremljenih slajdova na temu flore Bajkala, sastavljenih od zbirke fotografija. Kreirajmo novi slajd - sadržaj kolekcije.

Ako novi slajd nije prvi u nizu, tada morate izaći iz moda sortiranja slajdova (iz glavnog menija pomoću operacija Prikaz - Sortiranje slajdova) i prevući novi slajd na početak kolekcije.

Na novi slajd postavićemo male kopije svih fotografija. Najlakši način da to učinite je na najjednostavniji način: kopirajte sve fotografije u kolekciji jednu po jednu na prazan slajd, smanjite njihovu veličinu i postavite ih, na primjer, u dva reda. Slike se mogu dodatno uokviriti senkom. Možete dodati naslov svoje prezentacije u sadržaj slajda. Prikaz prezentacije u režimu Slide Sorter je prikazan u nastavku:

Pređimo na normalan način prikaza slajdova (naredbe View, a zatim Normal). Na slajdu sa sadržajem izaberite fotografiju i izvršite komandu Insert - Hyperlink. U prozoru koji se otvori postavite prelaz hipervezom - broj slajda sa velikom fotografijom sa koje je kopiran manji uzorak za sadržaj.

Slično ćemo povezati druge slike na slajdu sa sadržajem sa odgovarajućim slajdovima sa originalnim fotografijama.

Ako sada pokrenemo našu prezentaciju, ona će raditi kao hipermedijska struktura: klikom na malu fotografiju skočit ćete na veći slajd fotografije.

Ostaje da poprilično poboljšamo našu strukturu. Dodajmo strelicu na svaki slajd sa fotografijom u gornjem lijevom dijelu (AutoShape na traci sa alatkama Crtanje) i učinimo ovu strelicu hipervezom koja vodi do sadržaja slajda. Sada će kretanje kroz hipermedijsku strukturu koju smo kreirali postati "dvosmjerno": iz tabele sadržaja možete ići na slajdove sa fotografijama, a sa bilo kojeg slajda se možete vratiti na sadržaj.

Nakon konverzije prezentacije u web format, naša prva stranica će izgledati ovako:

Klikom na sliku iz menija dovest će vas do slajda sa velikom fotografijom, a klik na strelicu (u gornjem lijevom dijelu slajda) će vas odvesti na stranicu sa sadržajem kolekcije.

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

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

Počnimo s najvažnijim, razmislite kako on sam funkcionira svjetska mreža - internet. Da biste dobili web stranice, kreirate datoteke napisane u HTML-u i stavite ih na web server. Nakon toga, svaki pretraživač instaliran na uređaju sa pristupom Internetu, bilo da se radi o računaru, telefonu ili tabletu, može pronaći vaše web stranice.

Web server- Ovo je običan računar sa posebnim softverom koji ima pristup internetu. Kontinuirano čeka na zahtjeve pretraživača za web stranice, slike, audio i video datoteke. Nakon što je primio zahtjev za jedan od ovih resursa, server ga traži i šalje pretraživaču.

Pretraživač je poseban program dizajniran za pregledavanje web stranica, kao što je Internet Explorer. Sa svojim pretraživačem, surfate internetom klikom na linkove. Svaki takav klik uzrokuje da pretraživač uputi zahtjev za html stranicu web serveru, primi odgovor i prikaže stranicu u svom prozoru. Kada se stranica prikaže, HTML jezik ulazi u igru, on govori pretraživaču sve o strukturi i sadržaju web stranice. Uz pomoć komandi - oznake, HTML govori pretraživaču gde počinju paragrafi teksta, koji deo teksta je naslov i govori gde da umetne tabele, pa čak i slike. A oznake su riječi u ugaonim zagradama, na primjer

, .
Hitno je potrebna online prodavnica, ali nema vremena za učenje HTML, CSS, PHP i drugih tehnologija. Tada možete jednostavno iznajmiti online prodavnicu s potpuno implementiranom funkcionalnošću i optimizacijom za tražilice.
HTML jezik i njegove oznake
Prva verzija HTML-a pojavila se 1992. godine. U vrijeme 2013. godine razvija se specifikacija za novu verziju HTML-a broj 5. Ovu specifikaciju razvija World Wide Web Consortium, ili skraćeno W3C. W3C također razvija druge web standarde. Sa ovim standardima možete se upoznati na njihovoj web stranici www.w3.org. Usput, mnogi web pretraživači već podržavaju neke HTML 5 funkcije.
Predlažem da odmah počnemo učiti HTML jezik s primjerom. Dakle, napravimo našu prvu web stranicu. Svaki uređivač teksta je pogodan za kreiranje web stranica. Predlažem da počnete s korištenjem ugrađenog Windowsa 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 sljedeći tekst:

Primjer web stranice

Web stranica o automobilima.

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

Zatim, spremimo kreiranu web stranicu u datoteku pod nazivom index.html. Istovremeno, u dijaloškom okviru za spremanje datoteke morate podesiti UTF-8 kodiranje i staviti ime datoteke u navodnike, inače će mu Notepad dodati ekstenziju txt, a naša datoteka će se zvati index.htm. poruka:
Sada ostaje da otvorite kreiranu datoteku u pretraživaču i pogledate rezultat. Da biste to uradili, možete koristiti pregledač Microsoft Internet Explorer koji ste dobili uz Windows ili bilo koji drugi pretraživač instaliran na vašem računaru tako što ćete dvaput kliknuti na datoteku index.html ili prevući datoteku na ikonu pretraživača. Otvaramo ga i vidimo nešto ovako:
Tako smo kreirali web stranicu u Notepad-u koja je malo rđava, ali već sadrži veliki naslov i pasus teksta koji se automatski razbija u redove i sadrži podebljani fragment teksta.
Šta je oznaka?
Hajde sada da pričamo više o strukturi stranice. Razmotrite isječak:
Web stranica o automobilima
. Ovdje vidimo tekst koji je prikazan na stranici kao naslov, zatvoren u tagove
i
. Šta je oznaka u html jeziku?
HTML oznaka su obične riječi i simboli u ugaonim zagradama, npr.
,
, . so tag
je početna oznaka, oznaka
završnu oznaku, a tekst između se naziva sadržaj oznake. Takođe označite
i tag
nazivaju se par tagova. Zajedno, početna oznaka plus sadržaj plus završna oznaka čine element html dokumenta. Postoje i elementi koji se sastoje od jedne otvarajuće oznake:
Dakle, uparite oznaku
definira element naslova prvog nivoa. Ukupno ima šest nivoa naslova, ovo su elementi
—
.

Elementi su blokovi i mala slova (tekst). Blok elementi izvršiti strukturno formatiranje stranice. Blok elementi se uvijek prikazuju na stranici u novom redu i uvučeni su od susjednih elemenata. Inline elementi izvršiti direktno oblikovanje teksta ili logičko oblikovanje. Element
je blok element.

To je sve za mene!!! Vidimo se u narednim objavama!

Dakle, šta je web stranica i web stranica? Da bismo razumjeli ovo pitanje, razmislimo o tome kakve informacije zapravo mogu biti sadržane na web stranici? Odgovor je očigledan - skoro svaki. Stranica može sadržavati informacije o kompjuterskim igricama, automobilima, akvarijskim ribama, mitskim bićima, gradovima i zemljama svijeta itd. itd. Lista je beskrajna. Na stranici možete čak objaviti, na primjer, djela velikih ruskih klasika. Kako vam se sviđa stranica "Rat i mir"? Ispada da je stranica knjiga, ali ne obična, već elektronska? Da, web stranica je u svojoj srži zaista e-knjiga, časopis ili udžbenik koji može sadržavati i informacije koje su vam korisne i informacije koje vam trenutno nisu nimalo zanimljive.

Poput obične knjige, web stranica se sastoji od stranica koje se nazivaju web stranice.

A kako da, u stvari, u istom udžbeniku informatike pronađemo informacije koje nas zanimaju? Otvaramo sadržaj koji se nalazi na početku ili kraju udžbenika, tražimo pasus u kojem se nalaze potrebni podaci, nasuprot paragrafa gledamo broj stranice, otvaramo ga i proučavamo gradivo. Sve je prilično jednostavno i obično.

Nakon što dođemo do glavne stranice dobro osmišljene stranice, trebali bismo vidjeti i nešto slično sadržaju udžbenika kako bismo mogli brzo pronaći informacije koje su nam potrebne.

Ali kako doći do potrebnih informacija koje se nalaze na web stranici, jer elektronske stranice ne možemo prelistati kao obične papirnate? Zaista, obično koristimo miš.

U stvari, kretanje između stranica web stranice je čak i brže nego kretanje između stranica kada radite s običnim udžbenikom. Za kretanje između stranica web stranice koriste se elementi web stranice, kada kliknete na njih, možete preći na drugu stranicu na stranici. Ovi elementi stranice nazivaju se hipervezama i prisutni su na svim stranicama koje čine stranicu.

U "klasičnom" slučaju, dio teksta (riječ ili nekoliko riječi) i grafičke slike (crteži i fotografije) koriste se kao hiperveze.

Budući da se u prvom slučaju tekst koristi za kreiranje hiperveza, takva hiperveza se naziva tekstualna hiperveza. Vrlo često, tekstualna hiperveza je plavo podvučeni tekst. Vidjevši, na primjer, na glavnoj stranici stranice natpis "Web stranice i web stranice" dizajniran na sličan način i klikom na njega lijevom tipkom miša, trebali biste se naći na web stranici posvećenoj ovoj temi. Stranica "Web stranice i web stranice" mora sadržavati barem jednu hipervezu preko koje se možete vratiti na sadržaj.

Ako se grafička slika, poput fotografije, koristi kao hiperveza, tada će biti teško pretpostaviti da se radi o hipervezi. Kako onda odrediti da li je slika hiperveza ili ne? U ovom slučaju zapamtite sljedeće pravilo: "Ako, kada pomaknete kursor miša preko elementa na web stranici, on poprimi oblik ruke, onda je ovaj element hiperveza."

Napomena: Postoji izuzetak od ovog pravila, na primjer u slučaju prevrtanja, koja možda nisu hiperveze, ali kada pomaknete kursor miša preko njih, kursor također ima oblik ruke. Pored promene izgleda kursora, prilikom prelaska miša preko hiperlinka, treba da se prikaže i URL (jedinstvena adresa resursa), ali o tome ćemo govoriti u lekciji o kreiranju hiperlinkova pomoću programa FrontPage.

Test pitanja:

Šta je web stranica?

Šta je web stranica?

Šta je hiperveza?

Koji elementi web stranice se mogu koristiti kao hiperveze?

Kako odrediti da li je element stranice hiperveza?

Mogu li pojedinačne web stranice web stranice ne sadržavati hiperveze?

9 glasova
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 učiniti neodoljivom. U stvari, jednostavna stranica se može kreirati za samo 5 minuta.

U ovom članku ću govoriti 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 poukom. To je više starter koji vam treba pokazati jednostavnost posla i dati vam ž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 Start meniju, fascikli Pribor. Ne morate još ništa preuzimati. Pokušajte da iskoristite ono što imate.
Otvorite dokument.
Zalijepite ovaj kod u njega.

<html > <glava > <naslov > Moja prva stranica</naslov> </head> <tijelo> <centar >
</h1> 
<centar > "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> 
<fontstyle="color:red"> 
 
Stigli smo do 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. 
<hr > Na primjer, evo linka do mog bloga -<a href = "http://site/" > Start Luck</a>- govori jednostavno o "teško". 
 
</tijelo> </html>

Moja prva stranica
Kreiranje stranice je lakše nego što mislite
Mnogima se može učiniti da je kreiranje web stranica težak, čak i nemoguć zadatak. Da biste to učinili, morate puno naučiti, učiti, raditi. U stvari, postoji oko 100 oznaka koje ne morate ni naučiti. Važno je samo razumjeti šta se i gdje primjenjuje. Informacije se mogu zaviriti u razne cheat sheets, a vremenom ćete početi pamtiti oznake na mašini.

Jednostavan kod da bi tekst postao crven

Nije mnogo teže pisati podebljanim slovima

Stigli smo do 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..

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

Datoteka mora biti imenovana index.html. Kraj ".html" označava ekstenziju datoteke. Ako jednostavno unesete naziv indeksa, dokument će biti sačuvan kao tekstualni fajl i neće ga otvoriti pretraživač.

Sačuvao sam dokument na radnoj površini. Sada ga trebate pronaći, pritisnuti desnu tipku miša i otvoriti ga bilo kojim pretraživačem. 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 detaljnije o oznakama, ali za sada samo uklonimo " 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 jednostavno 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 otvoriti i zatvoriti. Odnosno, kod sa kosom crtom mora se negdje nalaziti. U ovom slučaju to izgleda ovako: .

Vidite, naslov je postao crven. Na isti način možete dati željenu nijansu bilo kojem dijelu teksta.

E, to je sve, primjer je spreman i treba da budete ponosni na sebe. Naravno, još nije na mreži, za to mora biti postavljena web stranica 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 samo osoba iz željeznog doba može biti iznenađena takvim nalazištem. 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 da kreirate svoje projekte bez ičije pomoći.

oznake

Uz vašu dozvolu, preći ću na NotePad++. Ima niz prednosti u poređenju sa običnim notepadom. Sada će mi zaista trebati oznake za isticanje da vam pokažem 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. Preći ćemo na teorijski dio.

Main

Stranica počinje i završava se oznakama . Oni pokazuju pretraživaču da je ovo web dokument kreiran 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.