Kreiranje html stranice u notepadu: pojašnjenje za lutke. Centralno poravnanje zaglavlja

Zadatak 1: Kreiranje osnovnih HTML datoteka

Da kreirate svoju HTML datoteku, uradite sljedeće:

    Kreirajte folder HTML, u koji ćemo pohraniti kreirane web stranice.

    Pokrenite standardni program Notepad.

    Otkucajte u prozor uređivača najjednostavniji tekst HTML datoteke:

HTML fajl za obuku

Utorak raspored časova

    Sačuvajte fajl kao RASP.HTM.

    Da biste vidjeli kreiranu web stranicu, preuzmite preglednik Microsoft Internet Explorer.

    Otvorite u meniju pretraživača File(fajl), Otvori(otvoreno), Pogled(Pregled- Pregledaj) i pronađite datoteku RASP.HTM u fascikli KURS i učitajte je. Provjerite je li naziv web stranice (HTML vodič) prikazan u gornjoj statusnoj traci pretraživača.

Zadatak 2.Kontrolisanje rasporeda teksta na ekranu

Informacije.

Prilikom prikazivanja HTML dokumenata, pretraživači automatski postavljaju tekst na ekran, bez uzimanja uzeti u obzir prijelome redova i uzastopne razmake koji se javljaju u datoteci.

    Ako je potrebno, pratite p.p. 5-6 zadataka 1.

    Otvorite originalni izvor web stranice - u meniju pretraživača Pogled(Prikaži), Izvor (kaoHTML) otvoriće se prozor sa standardnim programom Notepad, u kojem je vaša web stranica predstavljena u HTML komandama.

    Izmijenite tekst u HTML datoteci postavljanjem riječi "Raspored", "nastava", "utorak" u različite redove:

HTML fajl za obuku

Raspored

casovi

u utorak

    Sačuvajte promjene u datoteci RASP.HTM koristeći naredbe File(fajl), Save(Sačuvaj). Zatvorite Notepad.

    Koristite Microsoft Internet Explorer da vidite novopreuzetu Web stranicu pomoću tastera F5 ili pomoću komandi Pogled(Prikaži), Osvježiti (Osvježiti). Da li se promijenila slika teksta na ekranu?

Bilješka

Ubuduće, nakon što napravite izmjene na web stranici, uvijek slijedite korake 4-5.

Zadatak 3. Oznake za prijelom reda i pasusa

Informacije.

Postoje posebne komande koje izvode pomicanje reda i postavljaju početak novog pasusa. Osim toga, postoji naredba koja sprječava program pretraživača da na bilo koji način promijeni formatiranje teksta i omogućava vam da precizno reproducirate navedeni fragment tekstualne datoteke na ekranu.

Oznaka za povlačenje linije
odvaja red od naknadnog teksta ili grafike. paragraf oznaka

Takođe razdvaja red, ali i dodaje prazan red, koji vizuelno ističe pasus. Obje oznake su singleton.

    Napravite izmjene u tekstu HTML datoteke:

HTML fajl za obuku

Raspored

casovi

u utorak

    4. Sačuvajte promjene u datoteci RASP.HTM.

    Koristite Microsoft Internet Explorer za pregled novoprimljene web stranice Kako se promijenio tekst na ekranu?

Zadatak 4. Odabir fragmenata teksta

Informacije.

Oznake za odabir teksta vam omogućavaju da kontrolirate prikaz pojedinačnih znakova i riječi. Postoje tri oznake za odabir teksta:

… istaknuti bold,

… istaknuti kurzivom

… istaknuti podvlačenje.

HTML fajl za obuku

Raspored casovi u utorak

2. Pogledajte novoprimljenu web stranicu.

Moguće je koristiti kombinovane fontove:

Raspored casovi u utorak

Ali u isto vrijeme, morate zapamtiti sljedeće pravilo za pisanje kombiniranih oznaka:

<Тэг-1> <Тэг-2> … Tag-2>

pogrešan unos

Zadatak 5: Korištenje stilova naslova

Informacije.

Postoje dva načina za kontrolu veličine teksta koji pretraživač prikazuje:

    koristeći stilove naslova,

    postavljanje veličine glavnog dokumenta ili veličine trenutnog fonta.

Postoji šest oznaka naslova (H1 do H6). Svaka oznaka ima određeni stil naveden u postavkama pretraživača. Stil H1 je najveći.

    Napravite promjene u RASP.HTM fajlu:

HTML fajl za obuku

Raspored

casovi u utorak

    Pogledajte novoprimljenu web stranicu.

Zadatak 5. Podešavanje veličine trenutnog fonta.

Informacije.

font tag omogućava vam da postavite veličinu trenutnog fonta na pojedinačnim mjestima teksta. Trenutni raspon podešavanja fonta je od 1 do 7.

    Napravite promjene u RASP.HTM fajlu:

HTML fajl za obuku

Raspored

časovi za utorak

    Promenite veličinu fonta za tekst "razred u utorak" sami koristeći tag .

    Izmijenite tekst HTML dokumenta koristeći oznake za odabir teksta i oznake za prijelom reda i pasusa.

Zadatak 6. Tip slova i boja fonta

Informacije.

Tag Pruža kontrolu nad veličinom teksta, stilom i bojom. Promjena slova se vrši jednostavnim dodavanjem u oznaku Atribut FACE. Na primjer, da biste prikazali tekst u fontu Arial, pisali biste .

Za promjenu boje fonta oznake atribut se može koristiti COLOR="X".

Umjesto X, morate zamijeniti ili ime boje (u navodnicima) ili njenu heksadecimalnu vrijednost. Kada navedete boju sa heksadecimalnim brojem, ovu boju možete predstaviti razloženu na tri komponente:

crvena (R), zelena (G), plava (B), od kojih svaka ima vrijednost od 0 do FF.

Primjeri snimanja u boji u RGB formatu prikazani su u tabeli:

Tabela 1

Boja

Boja

Violet

Brown

Narandžasta

tirkizno

    Napravite promjene u RASP.HTM fajlu:

HTML fajl za obuku

Raspored >

časovi za utorak

    Sami promijenite veličinu, boju, font, stil teksta dokumenta.

Zadatak 7. Horizontalno poravnavanje teksta

Informacije.

HTML oznake kontrolišu horizontalno poravnanje teksta. Ako ne navedete metod poravnanja, svi elementi u dokumentu će biti poravnati lijevo i imati nazubljenu desnu marginu (pogledajte sliku 2).

Moderni pretraživači koriste atribut poravnanja teksta ALIGN=, koji je ugrađen u oznake paragrafa ili naslova.

    Napravite promjene u RASP.HTM fajlu:

HTML fajl za obuku

Raspored>

časovi za utorak

Zadatak 8. Postavljanje boja pozadine i teksta

Informacije.

Prilikom prikazivanja pozadine, teksta, pretraživači koriste boje koje su zadane - postavljene su postavkama pretraživača. Ove boje su postavljene na početku HTML datoteke u oznaci . Unos boje je sličan boji fonta (vidi tabelu 1, paragraf 12). Atribut BGCOLOR= postavlja boju pozadine stranice, TEXT= definiše boju teksta za cijelu stranicu, LINK= i VLINK= definiraju boje neposjećenih i posjećenih linkova, respektivno (posljednja dva parametra će biti razmotrena kasnije).

    Napravite promjene u RASP.HTM fajlu:

HTML fajl za obuku

BGCOLOR="#FFFFCC" TEXT="#330066">

Raspored>

časovi za utorak

Zadatak 9.

    Eksperimentirajte sa kreiranim dokumentom. Dok mijenjate veličinu prozora, pogledajte kako pretraživač prikazuje tekst s prisilnim prijelomima reda. Šta se dešava kada se prozor toliko smanji da ni jedna reč ne može da stane u njega?

    Sami kreirajte svoj vlastiti HTML dokument. Neka to bude kratka priča o sebi i vašim hobijima.

Pozdrav dragi čitaoci bloga! Nastavljamo odjeljak "Kreiranje stranice od nule", a posebno temu oznaka... A danas ćemo razmotriti oznake koje su prisutne na bilo kojoj web stranici - , i . Postoji još jedan tag koji bi trebao biti u svakom HTML dokumentu i o kojem sam već pisao u jednom od prethodnih članaka - tako da ga nećemo dirati.

U prethodnim člancima kolumne pisao sam o kreiranju praznog fajla u html formatu. U stvari, korišten je u profesionalnom članku (tamo su primijenjene oznake naslova). Sada ćemo direktno urediti ovu datoteku s punim opisima.

I započnimo članak uređivanjem kreirane datoteke. Lično sam ga nazvao index.html, ali ime može biti bilo koje. Otvorite ga bilo kojim uređivačem teksta (bolje je koristiti Notepad++, jer ima isticanje koda i druge korisne gadžete). I odmah mu dodajte oznake , i tačno onim redom kojim su napisani. Ne zaboravite ih zatvoriti kao što je prikazano na snimku ekrana. Dokument će izgledati ovako:

Sada razmotrite značenje svake oznake posebno. Nije ni čudo da su u svakome. HTML dokument.

Funkcije oznaka

Dakle, oznaka je kontejner(). Unutar njega je sav vidljivi i nevidljivi sadržaj web stranice (uključujući oznake i ). Otvaranje oznake dolazi odmah nakon deklaracije Doctype i zatvaranja nalazi se na kraju dokumenta. Na taj način pretraživaču jasno daje do znanja gdje da započne obradu dokumenta i gdje da ga završi.

Teoretski, on sam može razumjeti šta i kako. Nakon svega ? Ovo je prevodilac HTML jezika i malo je vjerovatno da će on započeti obradu od sredine dokumenta i završiti je prije nego što stigne do kraja. Pitanje je, naravno, diskutabilno, ali uvijek sam mislio (i sada ne odustajem od svog mišljenja) da je pisanje ove oznake obavezno.

Čak i s obzirom da je funkcija ove oznake samo in razgraničenje sadržaja, ima svoje atribute (koji se sada ili ne koriste uopće, ili se koriste izuzetno rijetko). Različiti izvori ukazuju na atribute koji se međusobno razlikuju, tako da se ne usuđujem iznijeti ispravnu verziju.

Jedino što sa sigurnošću mogu reći je da većina atributa nije podržana od strane HTML 4.01 ili su nepoželjna. Ipak ću vam dati jedan primjer. - tooltip bilo gdje u dokumentu. Na primjer, kada zadržite pokazivač miša iznad slike, možda ćete vidjeti iskačući tekst. Također u slučaju ove oznake:

A evo šta ćete vidjeti kada pređete mišem preko dokumenta s ovim sadržajem:

Poželjno je koristiti atribut title koji nije u oznaci , ali u svim drugim specifičnim područjima stranice. Prvo, to je zgodno, a drugo, pretraživači će bolje tretirati vašu stranicu. Ova oznaka ne utiče direktno na optimizaciju resursa. Idemo dalje.

Tag funkcija

I sljedeći na redu je tag . Sadrži sve tehničke informacije o stranici, koje služe kao pomoć pretraživaču i pretraživačima. Oznaka je oznaka kontejnera i slijedi odmah nakon , samo za razliku od zadnjeg, završne oznake se ne pojavljuje na kraju dokumenta, već prije početne oznake .

Koje informacije se mogu naći u ? Ali nijedan. Sve unutar ove oznake je dostupno ljudskom oku samo gledanjem izvornog koda stranice. Sav sadržaj u ovoj oznaci je za pretraživače i pretraživače. Jedina stvar koju nekako možete vidjeti je oznaka , koji je odgovoran za naslov prozora web stranice. Evo primjera:</p> <p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Tekst iza ikone je sadržaj oznake <title>. Pogledajmo sad sadržaj. <head>, koji ne možemo vidjeti, ali koji je vrlo važan dio <b>kreiranje i promocija sajta.</b> Prije svega, ovo je linija</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Ovo je meta oznaka za <b>tip sadržaja stranice</b>(Tip sadržaja). U ovom slučaju, ovo je html kod u UTF-8 kodiranju (content="text/html; charset=UTF-8"). Slijede gore opisana oznaka naslova. Zatim dolaze redovi koji počinju oznakom <link>. Označava vezu do eksternog dokumenta. Na primjer, linija</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>označava da je (rel="stylesheet") fajl sa (type="text/css") povezan, koji se nalazi na toj i toj adresi (da smanjim dužinu reda, pola adrese zamenio sam tačkama) . Nakon obrade ovog stringa od strane pretraživača, on će odrediti gdje da dobije <b>kaskadni listovi stilova</b>.</p> <p>Općenito, u head tag-u ima puno informacija o kojima se može pričati unedogled. Posljednja stvar koju treba napomenuti (posebno u slučaju ) je prisustvo opisnih oznaka, ključnih riječi i kanonskih. ja koristim <b>dodatak Sve u jednom SEO paketu</b>, tako da su prisutni unutra <head>.</p> <p>Kao što znate, sve veliko uvijek počinje malim. Ako vas zanima odgovor na pitanje kako napraviti web stranicu putem notepada, sigurno ste negdje čuli za ovu mogućnost. Ovo je zaista moguće. Ali odmah je vrijedno napomenuti da najvjerovatnije u ovom trenutku niko neće kreirati modernu dinamičku interaktivnu stranicu putem notepad-a, jer za to postoje posebni programi koji uvelike ubrzavaju i pojednostavljuju proces razvoja. Ali sasvim je moguće napraviti punopravnu web stranicu.</p><b>Kako napraviti web stranicu u notepadu</b><br>Za početak, potrebno je malo poznavanja teorije i općih pojmova. Ogromna većina web stranica su obični tekstualni dokumenti, koji su dizajnirani na poseban način - jezik hipertekstualnog označavanja, skraćeno HTML. Neki klasifikuju HTML označavanje kao programski jezik, ali to nije tačno. <p>HTML je samo način standardizacije označavanja dokumenata koje pretraživači jedinstveno tumače kako bi se prikazali na ekranima računara u obliku prilagođenom korisniku. Glavni alat HTML jezika su posebni strukturni elementi, uz pomoć kojih se sastavlja dokument. Zovu se deskriptori ili oznake.</p><p>Općenito, oznaka je konstrukcija forme <table>Dakle, oznaka počinje sa< после которого следует название тега table и вся конструкция завершается знаком >. Oznake dolaze u parovima kao što je podebljanje teksta <b>i</b> i neuparen kao novi red <br>. U slučaju korištenja uparenih oznaka, mora se koristiti kao uvodna oznaka <b>, i zatvaranje</b>. Završna oznaka je deskriptor sa kosom crtom /.</p><p>Razmotrite glavne vrste oznaka i njihovu svrhu.</p><ul><li><span><i>Element <b><!DOCTYPE html> </b>. </i> Postavlja se na sam početak stranice i služi da kaže pretraživaču kako da tumači ovaj dokument. Nije obavezan, ali vrlo poželjan na stranici kako bi se izbjegli mogući problemi s njegovim prikazom. <br></span></li><li><span><i>Tag <b><html> </b>. </i> To je oznaka u paru i sastoji se od dva dijela <html>i</html>. Svaka stranica na web stranici počinje ovom oznakom i završava se s njom. <br></span></li><li><span><i>Tag <b><head> </b>. </i> To je također oznaka za par i sastoji se od dva dijela <head>i</head>. Ova oznaka sadrži različite važne informacije o stranici: njen naslov, veze do korištenih stilova dizajna, uključene skripte, posebne metapodatke. <br></span></li><li><span><i>Tag <b><title> </b>. </i> <title>i i nalazi se unutar oznake . Ova oznaka definiše naslov stranice sa kojom će biti vidljiva u pretraživaču.

  • Tag . To je oznaka u paru, sastoji se od dva dijela i i prati oznaku Na stranici. Nalazi se u oznaci <body> koja sadrži sve informacije koje se prikazuju na stranici u pretraživaču.
  • Tag . Je samac. Koristi se za označavanje prijeloma reda u dokumentu.
  • Tag . Odnosi se na uparene oznake, napisan je u malo drugačijem obliku od ostalih oznaka i koristi se za kreiranje veza. On je suštinski element cjelokupnog koncepta HTML jezika, kao i interneta u cjelini.
  • Tag

    . Odnosi se na uparene oznake i sastoji se od dva dijela. Uz njegovu pomoć, sastavlja se tekstualni pasus.

  • oznake

    ,

    ,

    ,

    ,
    ,
    . Oni pripadaju uparenim oznakama, jer se sastoje od dvije oznake, na primjer

    i

    . Ove oznake služe za kreiranje šest nivoa podnaslova i istovremeno pokazuju važnost teksta koji se u njima nalazi u odnosu na ceo dokument.

  • Tag . To je također uparena oznaka, koja se sastoji od dva dijela i i postavlja stil fonta na podebljano.
    • Ukupno ima oko stotinu oznaka, ali deset razmatranih već je dovoljno za dizajn najjednostavnije stranice stranice u bilježnici. Osnovne oznake dokumenta , , , <body>distribuirano po strogom redosledu. Unutar oznake <body>ostali deskriptori mogu biti u različitim redosledima u okviru standarda HTML jezika. Najlakši način da to shvatite je kreiranjem jednostavne web stranice. <ol><li><span>Pokrenite Notepad i u prvom redu postavite element<!DOCTYPE html>, koji govori pretraživaču kako da tumači vaš dokument. <p> <!DOCTYPE html></p></span></li><li><span>Napravite novi red i dodajte oznaku za par <html>. Prevedite završnu oznaku</html> dva reda niže. <p> <!DOCTYPE html><br><html></p></span></li><li><span>Dodajte oznaku za par <head>u liniji između oznaka <html>i prevedite završnu oznaku</head> dva reda niže. <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>Na liniji između oznaka <head>i</head> napišite oznaku za par <title> u jednom redu.






  • Unesite naslov vaše web stranice između oznaka i. Na primjer, ovako.




    Moja prva web stranica

  • Postavite kursor na liniju nakon završne oznake i napravite prijelaz na liniju. Unesite oznaku para u prazan red koji se pojavi .




    Moja prva web stranica


  • Napravite dvostruki prijevod između unutrašnjih oznaka i. U red koji se pojavi unesite uparenu oznaku naslova

    . Unesite unutar oznake

    titl stranice.




    Moja prva web stranica


    O meni



  • Nakon završne oznake naslovanapravite prijelom reda i postavite uparene oznake pasusa na novi red. Umetnite tekst između njih. Na primjer, da.




    Moja prva web stranica


    O meni


    Moje ime je Ivanov Ivan. Kreiram svoju web stranicu.



  • Stavite ime i prezime u oznaku za par da ih učini hrabrim.




    Moja prva web stranica


    O meni


    Moje ime je Ivanov Ivan. Kreiram svoju web stranicu.



  • Nakon zatvaranja oznake paragrafa

    izvršite pomicanje reda i unesite oznaku para na novom redu

    . Unesite tekst između oznaka.




    Moja prva web stranica


    O meni


    Moje ime je Ivanov Ivan. Kreiram svoju web stranicu.


    Moj napredak



  • Nakon završne oznake titlaponovo napravite prijelom reda, unesite uparenu oznaku pasusa i upišite proizvoljan tekst između ovih oznaka.




    Moja prva web stranica


    O meni


    Moje ime je Ivanov Ivan. Kreiram svoju web stranicu.


    Moj napredak




  • Od oznaka navedenih u članku, dvije su ostale neistražene - red
    i najvažnija oznaka za izgradnju linkova     . Hajde da ih primenimo. Prije posljednje završne oznake unesite deskriptor
    , i između
    i

    tip konstrukcije. Trebalo bi da dobijete sledeće.




    Moja prva web stranica


    O meni


    Moje ime je Ivanov Ivan. Kreiram svoju web stranicu.


    Moj napredak


    Osnovna sintaksa HTML-a je savladana i napravljena je prva stranica budućeg sajta.
    U procesu obuke korišćeni su materijali sa sajta



  • Između navodnika u oznaci unesite adresu stranice na koju ćete povezati. Prije oznake možete unijeti riječ Link i između oznaka i unesite tekst koji će biti prikazan na stranici.




    Moja prva web stranica


    O meni


    Moje ime je Ivanov Ivan. Kreiram svoju web stranicu.


    Moj napredak


    Osnovna sintaksa HTML-a je savladana i napravljena je prva stranica budućeg sajta.
    U procesu obuke korišćeni su materijali sa sajta

    Veza: site



  • Na ovome se može završiti izrada najjednostavnije stranice za web mjesto. U principu, mogao se završiti i u koraku 9, ali ako se ozbiljno bavite učenjem HTML jezika, onda dodatna vježba neće biti suvišna. Sačuvajte stranicu sa ekstenzijom *.html i možete je otvoriti u bilo kom pretraživaču da vidite rezultate svog rada. Ako je sve urađeno kako treba, trebali biste vidjeti nešto poput sljedećeg.
    • Ako nakon čitanja ovog članka vaša odlučnost da kreirate web stranicu nije presušila, onda se svakako upoznajte s punom sintaksom HTML jezika, a također naučite kako koristiti CSS kaskadne stilove za dizajn stranica.

    Razvoj web stranica pomoću HTML jezika za označavanje hiperteksta

    8. razred

    Lekcija 1 Struktura web stranice.

    Koncept web stranice

    Informacije na World Wide Webu
    pohranjene u obliku web stranica.
    Web stranica je po strukturi slična
    časopis na temu ili
    problem. Kako se časopis sastoji od
    štampane stranice, a web stranica se sastoji
    sa kompjuterskih web stranica.
    Web stranice su povezane hiperlinkovima.

    Vrste web stranica

    zvaničnik (vlada,
    Duma, škola...)
    Komercijalno
    Lični

    Prednosti web stranica:

    Mali obim informacija
    ("pluća")
    Pogodno za gledanje u različitim
    OS.
    Dynamic.
    Interaktivno.

    Koraci izrade web stranice:

    1.
    2.
    3.
    Izradite web stranicu lokalno
    kompjuter.
    testirati (provjeriti
    ispravan rad).
    Objavite online -
    odaberite hosting server
    (plaćeno ili besplatno).

    Programi za kreiranje sajta:

    1) najjednostavniji uređivač teksta (bez
    oblikovanje teksta):
    Notebook
    2) pretraživač za pregled stranica:
    Internet Explorer
    3) Program za obradu slike:
    photoshop

    Vizualni web uređivači

    Izrada web stranice u HTML-u je vrlo
    naporan, poseban
    znanje.
    Postoje vizualni web uređivači
    (programi) za izradu web stranica.
    Radite po principu WYSIWYG
    (ono što vidite je ono što dobivate).

    Struktura web stranice

    10. Oznake

    Izgled web stranice postavljaju administratori
    komande - oznake, koje su
    ugaone zagrade< >
    Oznake mogu biti pojedinačne (neponavljajuće) ili
    upareni (kontejneri): prije zatvaranja
    oznaka kontejnera je napisana sa kosom crtom (/)

    Oznake se pišu engleskim slovima (velika,
    mala slova).

    11. Struktura web stranice

    Cijeli HTML kod stranice
    postavljen unutar glavnog
    kontejner:
    .
    Web stranica je podijeljena na
    2 logička dijela:
    naslov (HEAD)
    sadržaj (TIJELO).

    12. Naslov web stranice

    Naslov web stranice je umotan u kontejner.
    Sadrži naslov dokumenta i informacije o pomoći o stranici
    (na primjer, tip kodiranja) koji pretraživač koristi za svoje
    ispravan prikaz.
    Naslov web stranice nalazi se u kontejneru<ТITLE> i
    prikazano u gornjem redu prozora pretraživača kada se pogleda
    stranice.

    <ТITLЕ>Kompjuter

    13. Pisanje predloška web stranice



    <ТITLЕ>Kompjuter

    14. Glavni sadržaj web stranice

    Glavni sadržaj stranice je smješten u
    kontejner .
    Može sadržavati: tekst, tabele, trčanje
    žice, slike, linkovi, zvučni fajlovi...
    Stavimo tekst "Sve o računaru" na stranicu:
    Sve o kompjuteru

    15. Šablon web stranice



    <ТITLЕ>Kompjuter


    Sve o kompjuteru

    16.

    17. Kako sačuvati web stranicu

    1. Kreirajte posebnu fasciklu za lokaciju i
    sačuvajte sve fajlove web lokacije u ovoj fascikli.
    2. Sačuvajte web stranicu kao datoteku sa
    pod nazivom index.html je naslovna stranica
    stranica (prvo učitana u pretraživač)
    Ekstenzije datoteka web stranice - .htm
    ili.html

    18. Kreiramo našu web stranicu….

    Potrebno je razlikovati ime datoteke index.html - ispod
    što je web stranica pohranjena u datoteci
    sistem i stvarni naziv web stranice
    "Računar" - prikazuje se u gornjem redu
    prozore pretraživača i prvo analizirati
    tražilice.
    Ime web stranice mora biti maksimalno
    stepen relevantnosti za njegov sadržaj.
    1. Unesite HTML kod za web stranicu u Notepad.
    2. Sačuvajte datoteku kao index.html u folderu
    site. Odaberite vrstu datoteke - "Sve datoteke".
    3. Otvorite ovu datoteku u pretraživaču za pregled.

    19.

    20. LEKCIJA #2

    21. Lekcija 2: Formatiranje teksta na web stranici

    22. Formatiranje teksta

    Iako stranica nije previše atraktivna: sitni ispis i crni tekst
    bijela pozadina. Ali uz pomoć oznaka možete ukrasiti tekst.
    1. Naslovi: oznake iz<Н1>(najveći) do<Н6>(najmanji).
    <Н1>Sve o kompjuteru
    2. Font (FONT). Neki tagovi imaju atribute - imena svojstava, svibanj
    preuzimaju određene vrijednosti.
    FONT face="Arial" - lice fonta
    veličina=4
    - veličina
    color="red" - boja
    3. Poravnanje (ALIGN). Tekst je obično poravnat lijevo
    stranice, međutim, uobičajeno je da se naslov postavi u centar.
    ALIGN="lijevo",
    ALIGN="desno",
    <Н1 ALIGN="center">Sve o kompjuteru
    ALIGN="centar"

    23. Boja fonta

    Vrijednost atributa COLOR može se postaviti na 2 načina:
    a) naziv boje (na primjer, "crvena", "zelena", "plava" i tako dalje),
    b) njegovu RGB heksadecimalnu vrijednost "#RRGGBB", gdje
    prve dvije heksadecimalne cifre određuju intenzitet
    crvena (crvena), sljedeća dva su intenzitet zelene (zelene) i
    posljednje dvije su intenzitet plave (plave) boje.
    Minimalni intenzitet boje je određen heksadecimalno
    broj 00, a maksimum je FF. Plava boja = "#0000FF".
    Dakle, možete postaviti plavu boju naslova sa oznakom FONT sa
    Atribut BOJE:
    <Н1 ALIGN="center">Sve o kompjuteru

    24.

    25. Formatiranje teksta

    4. Horizontalna linija će se odvojiti
    naslov iz ostatka sadržaja
    stranice sa jednom oznakom
    .
    5. Stavovi:<Р>. Kada se gleda u
    paragrafi su odvojeni jedan od drugog u pretraživaču
    drugim intervalima. Za svaki paragraf
    možete postaviti određeni tip
    poravnanje.

    26. Praktični rad 3.8 Vežbalište "Računar"

    Formatirajte početni tekst
    stranice:
    1) Napravite i poravnajte 2 pasusa (zadatak 3)
    2) Označite naslov stranice bojom i
    odvojite ga horizontalnom trakom
    (zadatak 4)

    27.

    28. LEKCIJA 3

    29. Lekcija 3: Umetanje slika u web stranice

    30. Umetnite slike

    Web stranice mogu sadržavati grafičke datoteke u 3 formata -
    GIF, JPG i PNG. Ako je slika sačuvana u drugom formatu, onda
    mora se prvo pretvoriti u jedan od ovih
    formati.
    Oznaka se koristi za umetanje slike. sa atributom
    SRC, koji označava gdje je datoteka pohranjena
    na lokalnom računaru ili na Internetu.
    1) slika na lokalnom računaru u folderu sa sajtom:

    2) slika je u drugom folderu na lokalnom računaru:

    3) slika se nalazi na udaljenom serveru na Internetu:

    31. Tekst objašnjenja. Lokacija figure u tekstu.

    Ilustracije na web stranicama postale su neophodne
    element dizajna. Međutim, korisnici kako bi
    uštedite vrijeme ponekad onemogućite preuzimanja pretraživača
    grafičke slike i tekstove samo za čitanje.
    Dakle, da se ne izgubi smisao stranice, umjesto crtanja
    tekst objašnjenja treba da bude prikazan sa atributom ALT

    Pozicija figure u tekstu - definira atribut ALIGN
    tag : THOR, SREDINA, DOLJE, LIJEVO, DESNO.
    ALIGN="desno">

    32. Pogled na gotovu lokaciju

    33. Kod stranice web stranice


    Kompjuter


    Sve o kompjuteru




    Na ovoj stranici možete dobiti razne informacije o
    računar, njegov softver i cijene za računar
    dodaci.


    Terminološki rečnik će vas upoznati sa računarom
    terminima, a možete i popuniti upitnik.



    34. Lekcija 4

    35. Testni rad br.3

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    Šta je web stranica?
    Vrste sajtova.
    Kako se web stranice kombiniraju u web stranice?
    Šta su oznake? tag kontejner? Napišite glavni kontejner
    web stranice.
    Koja je logička struktura web stranice?
    Navedite 5 oznaka za formatiranje stranica.
    Šta je atribut oznake?
    Koji su načini za postavljanje boja na web stranici?
    Koje oznake se koriste za unos naslova? Formatiranje
    font? Unosite paragraf?
    Koja oznaka i njeni atributi se koriste za umetanje slika?

    36. Lekcija 4. Hiperveze na web stranicama

    37.

    Hiperveze vam omogućavaju preuzimanje
    pretraživač druge web stranice povezane
    od prethodnog.
    Hiperveza se sastoji od 2 dijela: adrese
    i referentni pokazivač.
    Hiperveza je postavljena na univerzalnu
    tag sa HREF atributom (he
    specificira koja se datoteka pohranjuje
    željena web stranica):
    pokazivač veze

    38. Vrste hiperveza

    1) interni:
    Pointer
    linkovi
    2) eksterni:
    filename.html"> Pokazivač veze

    39. Hiperlink pokazivači

    Pokazivač - vidljivi dio
    hiperveze: tekst ili slika

    40. Adresirajte dio hiperlinkova

    Idite na druge web stranice:
    pokazivač veze
    Otvorite sliku u pretraživaču:
    Slika
    Slušajte zvuk (pokretanje ugrađenog pretraživača
    igrač):
    Zvuk
    Sačuvaj datoteku (pokreće ugrađeni pretraživač
    menadžer preuzimanja fajlova):
    Preuzmite datoteku

    41. Hiperveza e-pošte

    Ova vrsta hiperveze je
    specijalni kontejner


    ”>Naš e-mail

    42. Pogled na gotovu stranicu stranice

    43. Kod stranice web stranice


    Kompjuter


    Sve o kompjuteru




    Na ovoj stranici možete dobiti razne informacije o računaru, njegovom softveru
    nabavka i cijene kompjuterskih komponenti.


    Terminološki rečnik će vas upoznati sa računarskim terminima, ali i vas
    možete popuniti formular.


    [Programi]  
    [Rječnik]  
    [Dodatna oprema] 
    [Upitnik]



    ">E-pošta:


    44. Lekcija 5

    45. Lekcija 5: Liste na web stranicama

    46. ​​Vrste lista

    Numerisano
    Označeno
    Liste pojmova (kao u rječniku)
    Ugniježđene liste

    47. Numerisana lista

    Lista - u kontejneru
    Stavka liste - oznaka

  • Atribut TYPE je tip numeracije (arapski
    brojevi; I - Roman; a - latinski
    mala slova)

    1. Sistemski programi
    2. Aplikacioni programi
    3. Sistemi za programiranje

    48. Grafička lista

    Lista - u kontejneru
    Stavka liste - oznaka

  • Atribut TYPE je tip markera (“disk” je disk,
    "kvadrat" - kvadrat, "krug" - krug)

    • Urednici teksta
    • Grafički urednik
    • Tabele
    • Sistemi upravljanja bazama podataka

    49. Spisak pojmova

    Lista - u kontejneru

    Stavka liste - oznaka

    Prvo se napiše termin, a zatim
    njegova definicija (kao u rječniku)

    50. Lekcija 6

    51. Lekcija 6: Interaktivni obrasci na web stranicama

    52. Koncept interaktivne forme

    Za komunikaciju s posjetiteljima web stranice
    kreatori na mjestu web stranice
    interaktivne forme.
    Obrasci sadrže različite elemente
    kontrole:
    tekstualna polja
    padajuće liste
    zastave
    prekidači...

    53. Polje za tekst

    glavni kontejner

    Polje za tekst - za unos teksta sa tastature: oznaka
    sa atributima:
    TYPE="text" – vrsta sadržaja (tekst)
    NAME="____" – naziv polja
    SIZE="40" – dužina polja za unos (u znakovima)

    - separator linija (pomaknite kursor na novu
    linija)

    54. Prekidači (radio dugmad)

    Okrugli taster za odabir jednog od nekoliko
    opcije odgovora:
    TYPE="radio"
    Svi članovi ove grupe moraju imati
    isti naziv: NAME="grupa"
    VALUE atributi sadrže izbore
    odgovori: VALUE="student"

    55. Zastave

    Kvadratni okvir za odabir više odgovora
    predložene opcije:
    TYPE="kvačica"
    Svaki element ove grupe mora imati svoje ime:
    NAME="box1", NAME="box2",
    …..
    VALUE atributa sadrži opcije za odabir odgovora:
    VALUE=“WWW”, VALUE=”e-mail”, ….
    Svaka VRIJEDNOST ima svoj odgovor.
    www

    56. List boxes

    Za kreiranje padajuće liste
    koristiti kontejner

    U njemu je svaki element liste
    dato oznakom

    • POVEZANI ČLANCI