HTML-lehe loomine märkmikus: selgitus mannekeenide jaoks. Joonda päis keskele

Ülesanne 1: Põhiliste HTML-failide loomine

HTML-faili loomiseks tehke järgmist.

    Looge kaust HTML, kuhu salvestame loodud veebilehed.

    Käivitage tavaline Notepad programm.

    Sisestage redaktori aknasse HTML-faili kõige lihtsam tekst:

Koolituse HTML-fail

Teisipäevane tunniplaan

    Salvestage fail nimega RASP.HTM.

    Loodud veebilehe vaatamiseks laadige alla Microsoft Internet Exploreri brauser.

    Ava brauseri menüüs Fail(Fail), Avatud(avatud), Vaade(Ülevaade- Sirvige) ja leidke KURS-i kaustast fail RASP.HTM ja laadige see üles. Veenduge, et veebilehe nimi (HTML Tutorial) oleks kuvatud brauseri ülemisel olekuribal.

2. ülesanne.Ekraanil oleva teksti paigutuse juhtimine

Teave.

HTML-dokumentide kuvamisel paigutavad brauserid automaatselt ekraanile teksti, võtmata võtta arvesse failis esinevaid reavahetusi ja järjestikuseid tühikuid.

    Vajadusel järgige p.p. 5-6 ülesannet 1.

    Avage veebilehe algallikas - brauseri menüüs Vaade(Vaata), Allikas (naguHTML) avaneb aken standardse Notepad programmiga, milles teie veebileht kuvatakse HTML-i käskudega.

    Muutke HTML-failis teksti, asetades sõnad "Ajakava", "tunnid", "Teisipäev" erinevatele ridadele:

Koolituse HTML-fail

Ajakava

klassid

teisipäeval

    Salvestage muudatused faili RASP.HTM käskude abil Fail(Fail), Salvesta(Salvesta). Sulgege programm Notepad.

    Kasutage Microsoft Internet Explorerit, et vaadata äsja allalaaditud veebilehte, kasutades klahvi F5 või käske Vaade(Vaata), Värskenda (värskenda). Kas ekraanil oleva teksti kujutis on muutunud?

Märge

Edaspidi järgige pärast veebilehel muudatuste tegemist alati samme 4-5.

Ülesanne 3. Rea- ja lõiguvahetuse sildid

Teave.

On olemas spetsiaalsed käsud, mis teevad reavahetuse ja määravad uue lõigu alguse. Lisaks on käsk, mis takistab brauseriprogrammil tekstivormingut mingil viisil muutmast ja võimaldab ekraanil täpselt reprodutseerida tekstifaili määratud fragmenti.

Reavahetuse silt
eraldab rea järgnevast tekstist või graafikast. lõigu silt

Eraldab ka rea, aga lisab ka tühja rea, mis tõstab lõigu visuaalselt esile. Mõlemad sildid on üksikud.

    Muutke HTML-faili teksti:

Koolituse HTML-fail

Ajakava

klassid

teisipäeval

    4. Salvestage muudatused faili RASP.HTM.

    Äsja saabunud veebilehe vaatamiseks kasutage Microsoft Internet Explorerit Kuidas on ekraanil olev tekst muutunud?

Ülesanne 4. Tekstikatkendite valimine

Teave.

Tekstivaliku sildid võimaldavad teil juhtida üksikute märkide ja sõnade kuvamist. Tekstivaliku silte on kolm:

… esile tõsta julge,

… esile tõsta kaldkirjas

… esile tõsta allakriipsutamine.

Koolituse HTML-fail

Ajakava klassid teisipäeval

2. Vaadake äsja vastuvõetud veebilehte.

Võimalik on kasutada kombineeritud fonte:

Ajakava klassid teisipäeval

Kuid samal ajal peate meeles pidama järgmist kombineeritud siltide kirjutamise reeglit:

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

vigane sisestus

Ülesanne 5: Pealkirjastiilide kasutamine

Teave.

Brauseris kuvatava teksti suuruse reguleerimiseks on kaks võimalust.

    kasutades pealkirja stiile,

    põhidokumendi suuruse või praeguse fondi suuruse määramine.

Pealkirjasilte on kuus (H1 kuni H6). Igal sildil on brauseri seadetes määratud kindel stiil. Stiil H1 on suurim.

    Tehke failis RASP.HTM muudatused:

Koolituse HTML-fail

Ajakava

klassid teisipäeval

    Vaadake äsja vastuvõetud veebilehte.

Ülesanne 5. Praeguse fondi suuruse määramine.

Teave.

fondi silt võimaldab määrata praeguse fondi suuruse teksti üksikutes kohtades. Praegune fondi seadistusvahemik on 1 kuni 7.

    Tehke failis RASP.HTM muudatused:

Koolituse HTML-fail

Ajakava

klassid teisipäevaks

    Muuda teksti "tund teisipäeval" fondi suurust ise, kasutades silti .

    Muutke HTML-dokumendi teksti tekstivaliku siltide ning rea- ja lõiguvahetuse siltide abil.

Ülesanne 6. Kirjatüüp ja kirjavärv

Teave.

Tag Annab kontrolli teksti suuruse, stiili ja värvi üle. Kirjatüübi muutmine toimub lihtsalt sildi lisamisega FACE atribuut. Näiteks Arial-fondis teksti kuvamiseks peaksite kirjutama .

Sildi fondi värvi muutmiseks atribuuti saab kasutada VÄRV="X".

X-i asemel peate asendama kas värvi nime (jutumärkides) või selle kuueteistkümnendsüsteemi väärtuse. Kuueteistkümnendarvuga värvi määramisel saate seda värvi esitada kolmeks komponendiks.

punane (R), roheline (G), sinine (B), millest igaühe väärtus on vahemikus 0 kuni FF.

RGB-vormingus värvisalvestuse näited on toodud tabelis:

Tabel 1

Värv

Värv

violetne

pruun

Oranž

türkiissinine

    Tehke failis RASP.HTM muudatused:

Koolituse HTML-fail

Ajakava >

klassid teisipäevaks

    Muutke ise dokumendi suurust, värvi, kirjatüüpi ja tekstistiili.

Ülesanne 7. Teksti joondamine horisontaalselt

Teave.

HTML-sildid juhivad teksti horisontaalset joondamist. Kui te joondusmeetodit ei määra, joondatakse kõik dokumendi elemendid vasakule ja neil on ebaühtlane parem veeris (vt joonis 2).

Kaasaegsed brauserid kasutavad teksti joondamise atribuuti JOONDA=, mis on manustatud lõigu- või pealkirjamärgenditesse.

    Tehke failis RASP.HTM muudatused:

Koolituse HTML-fail

Ajakava>

klassid teisipäevaks

Ülesanne 8. Tausta ja teksti värvide määramine

Teave.

Tausta, teksti kuvamisel kasutavad brauserid vaikimisi määratud värve – need on määratud brauseri seadetega. Need värvid määratakse märgendis HTML-faili alguses . Värvikirje on sarnane fondi värviga (vt tabel 1, punkt 12). Atribuut BGCOLOR= määrab lehe taustavärvi, TEXT= määrab kogu lehe teksti värvi, LINK= ja VLINK= määravad vastavalt külastamata ja vaadatud linkide värvid (viimasest kahest parameetrist tuleb juttu hiljem).

    Tehke failis RASP.HTM muudatused:

Koolituse HTML-fail

BGCOLOR="#FFFFCC" TEKST="#330066">

Ajakava>

klassid teisipäevaks

Ülesanne 9.

    Katsetage loodud dokumendiga. Akna suurust muutes vaadake, kuidas brauser sunnitud reavahetustega teksti renderdab. Mis juhtub, kui aken kahaneb nii palju, et isegi üks sõna ei mahu selle sisse?

    Looge ise oma HTML-dokument. Olgu see lühike lugu endast ja teie hobidest.

Tere kallid ajaveebi lugejad! Jätkame jaotist "Saidi loomine nullist" ja eriti siltide teemat ... Ja täna käsitleme silte, mis on igal veebilehel - , ja . On veel üks silt, mis peaks olema igas HTML-dokumendis ja millest ma juba ühes eelmises artiklis kirjutasin – seega me seda ei puuduta.

Veeru eelmistes artiklites kirjutasin tühja faili loomisest html-vormingus. Tegelikult kasutati seda pro-artiklis (see on koht, kus pealkirjasildid rakendati). Nüüd muudame seda faili otse täielike kirjeldustega.

Ja alustame artiklit loodud faili redigeerimisega. Mina isiklikult panin sellele nimeks index.html, aga nimi võib olla ükskõik milline. Avage see mis tahes tekstiredaktoriga (parem on kasutada Notepad++, kuna sellel on koodi esiletõstmine ja muud kasulikud vidinad). Ja lisage sellele kohe sildid , ja täpselt selles järjekorras, nagu need on kirjutatud. Ärge unustage neid sulgeda, nagu on näidatud ekraanipildil. Dokument näeb välja selline:

Nüüd kaaluge iga sildi tähendust eraldi. Pole ime, et neid on kõigis. HTML dokument.

Sildi funktsioonid

Nii et silt on konteiner(). Selle sees on kogu veebilehe nähtav ja nähtamatu sisu (sh sildid ja ). Sildi avamine tuleb kohe pärast Doctype deklaratsiooni ja sulgemist on dokumendi lõpus. Seega teeb see brauserile selgeks, kust alustada dokumendi töötlemist ja kus see lõpetada.

Teoreetiliselt saab ta ise aru, mis ja kuidas. Pealegi ? See on HTML-keele tõlkija ja on ebatõenäoline, et ta alustab töötlemist dokumendi keskelt ja lõpetab selle enne lõppu jõudmist. Küsimus on muidugi vaieldav, aga ma olen alati arvanud (ja nüüd ei loobu oma arvamusest), et selle sildi kirjutamine on kohustuslik.

Isegi kui arvestada, et selle sildi funktsioon on ainult sees sisu piiritlemine, sellel on oma atribuudid (mida nüüd kas üldse ei kasutata või kasutatakse väga harva). Erinevad allikad näitavad üksteisest erinevaid atribuute, seega ei julge ma õiget versiooni välja tuua.

Ainus, mida võin kindlalt öelda, on see, et enamikku atribuute HTML 4.01 ei toeta või need on ebasoovitavad. Toon siiski ühe näite. - kohtspikker kõikjal dokumendis. Näiteks kui hõljutate kursorit pildi kohal, võite näha hüpikteksti. Ka selle sildi puhul:

Kui hõljutate kursorit sellise sisuga dokumendi kohal, näete järgmist.

Eelistatav on kasutada pealkirja atribuuti, mis ei ole sildis , kuid lehe mis tahes muus konkreetses piirkonnas. Esiteks on see mugav ja teiseks kohtlevad otsingumootorid teie saiti paremini. See silt ei mõjuta otseselt ressursside optimeerimist. Läheme kaugemale.

Märgi funktsioon

Ja järjekorras järgmine tag . See sisaldab kogu lehe tehnilist teavet, mis aitab brauserit ja otsingumootoreid. Silt on konteineri silt ja järgneb kohe sellele , ainult erinevalt viimasest, sulgemissildist ei ilmu dokumendi lõppu, vaid enne avamärgendit .

Millist teavet võib leida ? Aga mitte ühtegi. Kõik selles sildis sisalduv on inimsilmale juurdepääsetav ainult lehe lähtekoodi vaadates. Kogu selle sildi sisu on mõeldud otsingumootorid ja brauserid. Ainus, mida kuidagi näha on, on silt , mis vastutab veebilehe akna pealkirja eest. Siin on näide:</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>Ikooni järel olev tekst on sildi sisu <title>. Nüüd vaatame sisu. <head>, mida me ei näe, kuid mis on väga oluline osa <b>saidi loomine ja reklaamimine.</b> Esiteks on see rida</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>See on metasilt <b>lehe sisutüüp</b>(Sisu tüüp). Sel juhul on see html-kood UTF-8 kodeeringus (content="text/html; charset=UTF-8"). Järgmiseks tuleb ülalkirjeldatud pealkirjasilt. Siis tulevad sildiga algavad read <link>. See näitab linki välisele dokumendile. Näiteks joon</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>näitab, et on ühendatud (rel="stylesheet") fail koos (type="text/css"), mis asub sellisel ja sellisel aadressil (rea pikkuse vähendamiseks asendasin pool aadressist punktidega ). Pärast selle stringi töötlemist brauseris määrab see, kust saada <b>kaskaadstiililehed</b>.</p> <p>Üldiselt on peasildis palju infot, millest võib lõputult rääkida. Viimane asi, mis väärib märkimist (eriti puhul ), on kirjeldusmärgendite, märksõnade ja kanooniliste märgendite olemasolu. ma kasutan <b>pistikprogramm Kõik ühes SEO Pack</b>, seega on need sees olemas <head>.</p> <p>Nagu teate, algab kõik suurepärane alati väikesest. Kui Sind huvitab vastus küsimusele, kuidas läbi märkmiku veebilehte luua, siis oled kindlasti sellest võimalusest kuskilt kuulnud. See on tõepoolest võimalik. Kuid tasub kohe mainida, et tõenäoliselt ei loo keegi praegu märkmiku kaudu kaasaegset dünaamilist interaktiivset saiti, kuna selleks on olemas spetsiaalsed programmid, mis arendusprotsessi oluliselt kiirendavad ja lihtsustavad. Kuid täisväärtusliku veebilehe loomine on täiesti võimalik.</p><b>Kuidas märkmikus veebisaiti luua</b><br>Alustuseks on vajalik teooria ja üldmõistetega veidi tutvumine. Valdav enamus veebisaidi lehekülgi on tavalised tekstidokumendid, mis on kujundatud erilisel viisil - hüperteksti märgistamise keeles, lühendatult HTML. Mõned liigitavad HTML-märgistuse programmeerimiskeeleks, kuid see pole tõsi. <p>HTML on lihtsalt viis dokumentide märgistuse standardiseerimiseks, mida brauserid unikaalselt tõlgendavad, et kuvada arvutiekraanidel kasutajasõbralikul kujul. HTML-keele põhitööriistaks on spetsiaalsed struktuurielemendid, mille abil dokument koostatakse. Neid nimetatakse deskriptoriteks või siltideks.</p><p>Üldiselt on silt vormi konstruktsioon <table>Nii et silt algab tähega< после которого следует название тега table и вся конструкция завершается знаком >. Sildid tulevad paarikaupa, näiteks teksti paksuks muutmine <b>ja</b> ja sidumata reavahetusena <br>. Paaritud siltide kasutamise korral tuleb seda kasutada avasildina <b>ja sulgemine</b>. Lõppsilt on deskriptor koos kaldkriipsuga /.</p><p>Mõelge siltide peamistele tüüpidele ja nende otstarbele.</p><ul><li><span><i>Element <b><!DOCTYPE html> </b>. </i> Määrake lehe algusesse ja annab brauserile teada, kuidas seda dokumenti tõlgendada. See on valikuline, kuid lehel väga soovitav, et vältida võimalikke probleeme selle kuvamisega. <br></span></li><li><span><i>Tag <b><html> </b>. </i> See on paarismärk ja koosneb kahest osast <html>ja</html>. Iga saidi leht algab selle sildiga ja lõpeb sellega. <br></span></li><li><span><i>Tag <b><head> </b>. </i> See on ka paarisilt ja koosneb kahest osast <head>ja</head>. See silt sisaldab lehe kohta mitmesugust olulist teavet: selle pealkiri, kasutatud kujundusstiilide lingid, kaasatud skriptid, spetsiaalsed metaandmed. <br></span></li><li><span><i>Tag <b><title> </b>. </i> <title>ja ja asub sildi sees . See silt määrab lehe pealkirja, millega see brauseris nähtavaks saab.

  • Tag . See on paarismärk, mis koosneb kahest osast ja ja järgib silti Lehel. See asub sildis <body>, mis sisaldab kogu teavet, mis brauseris lehel kuvatakse.
  • Tag . On vallaline. Kasutatakse dokumendi reavahetuse tähistamiseks.
  • Tag . Viitab seotud siltidele, on kirjutatud teistest siltidest veidi erineval kujul ja seda kasutatakse linkide loomiseks. See on kogu HTML-keele kontseptsiooni ja ka Interneti kui terviku oluline element.
  • Tag

    . Viitab seotud siltidele ja koosneb kahest osast. Selle abiga koostatakse tekstilõik.

  • sildid

    ,

    ,

    ,

    ,
    ,
    . Need kuuluvad paarismärgendite hulka, kuna koosnevad näiteks kahest sildist

    ja

    . Need sildid loovad kuue taseme alampealkirjad ja näitavad samal ajal neis sisalduva teksti olulisust kogu dokumendi suhtes.

  • Tag . See on ka paarismärk, mis koosneb kahest osast ja ja määrab fondi stiili paksuks.
    • Kokku on silte sadakond, kuid kaalutud kümnest piisab juba saidi lihtsaima lehe märkmikus kujundamiseks. Põhilised dokumendisildid , , , <body>levitatakse ranges järjekorras. Sildi sees <body>ülejäänud deskriptorid võivad olla HTML-keele standardite piires erinevas järjekorras. Lihtsaim viis sellest aru saada on luua lihtne veebileht. <ol><li><span>Käivitage Notepad ja määrake element selle esimesel real<!DOCTYPE html>, mis annab brauserile teada, kuidas teie dokumenti tõlgendada. <p> <!DOCTYPE html></p></span></li><li><span>Looge reavahetus ja lisage paarisilt <html>. Tõlgi sulgev silt</html> kaks rida allapoole. <p> <!DOCTYPE html><br><html></p></span></li><li><span>Lisage paarisilt <head>siltide vahel <html>ja tõlkige sulgev silt</head> kaks rida allapoole. <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>Reas siltide vahel <head>ja</head> kirjutage paarisilt <title>ühes reas.






  • Sisestage oma veebilehe pealkiri siltide vahele ja. Näiteks niimoodi.




    Minu esimene veebisaidi leht

  • Asetage kursor sulgemismärgisele järgnevale reale ja tehke reavahetus. Sisestage ilmuvale tühjale reale paarisilt .




    Minu esimene veebisaidi leht


  • Tehke sisemiste siltide vahel topelttõlge ja. Sisestage ilmuvale reale seotud pealkirja märgend

    . Sisestage sildi sisse

    lehe alapealkiri.




    Minu esimene veebisaidi leht


    Minust



  • Pärast lõpupealkirja siltitehke reavahetus ja määrake paaris lõigusildid uuele reale. Sisestage nende vahele tekst. Näiteks jah.




    Minu esimene veebisaidi leht


    Minust


    Minu nimi on Ivanov Ivan. Loon oma veebisaiti.



  • Lisage ees- ja perekonnanimi paarisildile et need oleksid julged.




    Minu esimene veebisaidi leht


    Minust


    Minu nimi on Ivanov Ivan. Loon oma veebisaiti.



  • Pärast lõigusildi sulgemist

    sooritage reavahetus ja sisestage uuele reale paarisilt

    . Sisestage märgendite vahele tekst.




    Minu esimene veebisaidi leht


    Minust


    Minu nimi on Ivanov Ivan. Loon oma veebisaiti.


    Minu edusammud



  • Pärast lõpupealkirja siltitee uuesti reavahetus, sisesta paaris lõigumärgend ja kirjuta nende siltide vahele suvaline tekst.




    Minu esimene veebisaidi leht


    Minust


    Minu nimi on Ivanov Ivan. Loon oma veebisaiti.


    Minu edusammud




  • Artiklis loetletud siltidest jäi uurimata kaks – reavahetus
    ja kõige olulisem linkide loomise silt     . Rakendame neid. Enne viimast sulgevat silti sisestage deskriptor
    , ja vahel
    ja

    tüüpi ehitus. Peaksite saama järgmise.




    Minu esimene veebisaidi leht


    Minust


    Minu nimi on Ivanov Ivan. Loon oma veebisaiti.


    Minu edusammud


    HTML-i põhisüntaks on omandatud ja tulevase saidi esimene leht loodud.
    Koolituse käigus kasutati saidi saidi materjale



  • Märgendis olevate jutumärkide vahel sisestage lingitava lehe aadress. Enne silti saate sisestada sõna Link ja siltide vahele ja sisestage lehel kuvatav tekst.




    Minu esimene veebisaidi leht


    Minust


    Minu nimi on Ivanov Ivan. Loon oma veebisaiti.


    Minu edusammud


    HTML-i põhisüntaks on omandatud ja tulevase saidi esimene leht loodud.
    Koolituse käigus kasutati saidi saidi materjale

    Link: veebisait



  • Selle põhjal saab saidi jaoks kõige lihtsama lehe loomise lõpule viia. Põhimõtteliselt oleks võinud isegi punktis 9 lõpetada, aga kui HTML-keele õppimist tõsiselt võtta, siis lisapraktika üleliigne ei lähe. Salvestage leht *.html laiendiga ja saate selle oma töö tulemuste vaatamiseks avada mis tahes brauseris. Kui kõik on õigesti tehtud, peaksite nägema midagi sellist.
    • Kui pärast selle artikli lugemist pole teie otsustavus veebisaiti luua, siis tutvuge kindlasti HTML-keele täieliku süntaksiga ja õppige ka lehe kujundamisel kasutama CSS-i kaskaadstiile.

    Veebisaitide arendamine HTML-i hüperteksti märgistuskeele abil

    8. klass

    1. tund Veebilehe struktuur.

    Veebisaidi kontseptsioon

    Teave World Wide Webist
    salvestatakse veebisaitide kujul.
    Veebisait on oma ülesehituselt sarnane
    ajakiri teemal või
    probleem. Millest ajakiri koosneb
    prinditud lehekülgi ja veebisait koosneb
    arvuti veebilehtedelt.
    Veebilehed on lingitud hüperlinkide abil.

    Veebisaidi tüübid

    ametnik (valitsus,
    Duuma, kool ...)
    Kaubanduslik
    Isiklik

    Veebilehtede eelised:

    Väike infomaht
    ("kopsud")
    Sobib vaatamiseks erinevates
    OS.
    Dünaamiline.
    Interaktiivne.

    Veebisaidi loomise sammud:

    1.
    2.
    3.
    Looge veebisait kohapeal
    arvuti.
    test (kontrollige
    õige toimimine).
    Postitage veebis -
    valige hostimisserver
    (tasuline või tasuta).

    Programmid saidi loomiseks:

    1) lihtsaim tekstiredaktor (ilma
    teksti vormindamine):
    Märkmik
    2) brauser lehtede vaatamiseks:
    Internet Explorer
    3) Pilditöötlusprogramm:
    photoshop

    Visuaalsed veebiredaktorid

    Veebisaidi loomine HTML-is on väga
    töömahukas, eriline
    teadmisi.
    On olemas visuaalsed veebiredaktorid
    (programmid) veebisaitide loomiseks.
    Töötage WYSIWYG põhimõttel
    (mida sa näed selle sa ka saad).

    Veebilehe struktuur

    10. Sildid

    Veebilehe välimuse määravad administraatorid
    käsud - sildid, mis on
    nurgaklambrid< >
    Sildid võivad olla üksikud (mittekorduvad) või
    paaris (konteinerid): enne sulgemist
    konteineri silt on kirjutatud kaldkriipsuga (/)

    Sildid on kirjutatud inglise tähtedega (suurtähtedega,
    väiketähtedega).

    11. Veebilehe struktuur

    Kogu lehe HTML-kood
    asetatakse peamise sisse
    konteiner:
    .
    Veebileht on jagatud
    2 loogilist osa:
    pealkiri (HEAD)
    sisu (BODY).

    12. Veebilehe pealkiri

    Veebilehe pealkiri on pakitud konteinerisse.
    Sisaldab dokumendi pealkirja ja lehe abiteavet
    (näiteks kodeeringu tüüp), mida brauser oma jaoks kasutab
    õige kuva.
    Veebilehe pealkiri sisaldub konteineris<ТITLE> ja
    kuvatakse vaatamisel brauseriakna ülemisel real
    lehekülgi.

    <ТITLЕ>Arvuti

    13. Veebilehe malli kirjutamine



    <ТITLЕ>Arvuti

    14. Veebilehe põhisisu

    Lehe põhisisu on paigutatud
    konteiner .
    Võib sisaldada: teksti, tabeleid, jooksmist
    stringid, pildid, lingid, helifailid...
    Paneme lehele teksti "Kõik arvutist":
    Kõik arvuti kohta

    15. Veebilehe mall



    <ТITLЕ>Arvuti


    Kõik arvuti kohta

    16.

    17. Kuidas veebilehte salvestada

    1. Looge saidi jaoks spetsiaalne kaust ja
    salvestage kõik saidi failid sellesse kausta.
    2. Salvestage veebileht failina rakendusega
    nimega index.html on tiitelleht
    sait (esmakordselt brauserisse laaditud)
    Veebilehe faililaiendid – .htm
    või.html

    18. Loome oma veebisaidi….

    On vaja vahet teha index.html failinimel - all
    millesse veebileht faili salvestatakse
    süsteem ja veebilehe tegelik nimi
    "Arvuti" - kuvatakse ülemisel real
    brauseriaknad ja sõeluda esmalt
    otsingumootorid.
    Veebilehe nimi peab olema maksimaalne
    asjakohasuse aste selle sisu suhtes.
    1. Sisestage veebilehe HTML-kood Notepadi.
    2. Salvestage fail kausta nimega index.html
    saidile. Valige failitüüp - "Kõik failid".
    3. Avage see fail vaatamiseks brauseris.

    19.

    20. TUND #2

    21. Õppetund 2: Teksti vormindamine veebilehel

    22. Teksti vormindamine

    Kuigi leht pole liiga atraktiivne: väike kirjas ja must tekst peal
    valge taust. Kuid siltide abil saate teksti kaunistada.
    1. Pealkirjad: sildid alates<Н1>(suurim) kuni<Н6>(kõige väiksem).
    <Н1>Kõik arvuti kohta
    2. Font (FONT). Mõnedel siltidel on atribuudid – atribuutide nimed, võib
    võtta teatud väärtused.
    FONT face="Arial" – fondi nägu
    suurus = 4
    - suurus
    värv = "punane" - värv
    3. Joondamine (ALIGN). Tekst on tavaliselt vasakule joondatud
    lehel on aga tavaks paigutada päis keskele.
    ALIGN="vasak",
    ALIGN="paremale",
    <Н1 ALIGN="center">Kõik arvuti kohta
    ALIGN="keskel"

    23. Fondi värv

    Atribuudi COLOR väärtust saab määrata kahel viisil:
    a) värvi nimi (näiteks "punane", "roheline", "sinine" ja nii edasi),
    b) selle RGB kuueteistkümnendväärtus "#RRGGBB", kus
    kaks esimest kuueteistkümnendnumbrit määravad intensiivsuse
    punane (punane), järgmised kaks on rohelise (roheline) intensiivsus ja
    viimased kaks on sinise (sinise) värvi intensiivsus.
    Minimaalne värviintensiivsus on määratud kuueteistkümnendsüsteemis
    number 00 ja maksimum on FF. Sinine värv = "#0000FF".
    Seega saate määrata pealkirja sinise värvi FONT-sildiga
    COLOR atribuut:
    <Н1 ALIGN="center">Kõik arvuti kohta

    24.

    25. Teksti vormindamine

    4. Horisontaalne joon eraldub
    pealkiri ülejäänud sisust
    leheküljed, millel on üks silt
    .
    5. Lõigud:<Р>. Sisse vaadates
    lõigud on brauseris üksteisest eraldatud
    muud intervallid. Iga lõigu jaoks
    saate määrata konkreetse tüübi
    joondus.

    26. Praktiline töö 3.8 Koolituskoht "Arvuti"

    Algteksti vormindamine
    leheküljed:
    1) Looge ja joondage 2 lõiku (ülesanne 3)
    2) Tõstke esile lehe pealkiri värviga ja
    eraldage see horisontaalse ribaga
    (ülesanne 4)

    27.

    28. 3. TUND

    29. Õppetund 3: Piltide lisamine veebilehtedele

    30. Sisesta pilte

    Veebilehed võivad sisaldada kolmes vormingus graafilisi faile -
    GIF, JPG ja PNG. Kui pilt on salvestatud muus vormingus, siis
    tuleb esmalt teisendada üheks neist
    formaadid.
    Märgendit kasutatakse pildi sisestamiseks. atribuudiga
    SRC, mis näitab, kuhu fail on salvestatud
    kohalikus arvutis või Internetis.
    1) pilt kohalikus arvutis saidiga kaustas:

    2) pilt asub kohaliku arvuti teises kaustas:

    3) pilt asub Internetis asuvas kaugserveris:

    31. Selgitav tekst. Figuuri asukoht tekstis.

    Illustratsioonid veebilehtedel on muutunud hädavajalikuks
    kujunduselement. Kasutajad aga selleks, et
    säästa aega, mõnikord keelake brauseri allalaadimine
    graafilisi pilte ja ainult lugemiseks mõeldud tekste.
    Seetõttu, et mitte kaotada lehe tähendust, joonistamise asemel
    selgitav tekst tuleks kuvada atribuudiga ALT

    Joonise asukoht tekstis – määrab atribuudi ALIGN
    tag : THOR, KESKEL, ALL, VASAK, PAREM.
    ALIGN="paremale">

    32. Vaade valmis saidile

    33. Veebilehe kood


    Arvuti


    Kõik arvuti kohta




    Sellelt saidilt saate erinevat teavet
    arvuti, selle tarkvara ja arvuti hinnad
    tarvikud.


    Terminoloogiline sõnastik tutvustab teile arvutit
    tingimustega ja võite täita ka küsimustiku.



    34. 4. õppetund

    35. Katsetöö nr 3

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    Mis on veebisait?
    Saidi tüübid.
    Kuidas veebilehti veebisaitideks kombineeritakse?
    Mis on sildid? sildikonteiner? Kirjutage põhikonteiner
    veebilehed.
    Mis on veebilehe loogiline struktuur?
    Loetlege 5 lehe vormindamise silti.
    Mis on sildi atribuut?
    Kuidas saab veebilehel värve määrata?
    Milliseid silte pealkirja sisestamiseks kasutatakse? Vormindamine
    font? Lõigu sisestamine?
    Millist silti ja selle atribuute kasutatakse piltide sisestamiseks?

    36. Õppetund 4. Hüperlingid veebilehtedel

    37.

    Hüperlingid võimaldavad teil alla laadida
    brauseri muud seotud veebilehed
    eelmisest.
    Hüperlink koosneb kahest osast: aadress
    ja võrdluskursor.
    Hüperlink on seatud universaalseks
    tag atribuudiga HREF (he
    määrab, milline fail on salvestatud
    soovitud veebileht):
    lingi osuti

    38. Hüperlinkide tüübid

    1) sisemine:
    Osuti
    lingid
    2) väline:
    filename.html"> Linki osuti

    39. Hüperlingi osutid

    Osuti – nähtav osa
    hüperlingid: tekst või pilt

    40. Hüperlinkide aadressiosa

    Mine teistele veebilehtedele:
    lingi osuti
    Ava pilt brauseris:
    Pilt
    Kuulake heli (käivitage sisseehitatud brauser
    mängija):
    Heli
    Salvesta fail (käivitab sisseehitatud brauseri
    faili allalaadimise haldur):
    Laadige fail alla

    41. Meili hüperlink

    Seda tüüpi hüperlink on
    spetsiaalne konteiner


    ">Meie e-post

    42. Valmis saidi lehe vaade

    43. Veebilehe kood


    Arvuti


    Kõik arvuti kohta




    Sellelt saidilt leiate erinevat teavet arvuti ja selle tarkvara kohta
    arvutikomponentide pakkumine ja hinnad.


    Terminoloogiasõnastik tutvustab teile nii arvutitermineid kui ka teid
    saate vormi täita.


    [Programmid]  
    [Sõnastik]  
    [Tarvikud] 
    [Küsimustik]



    ">E-post:


    44. 5. õppetund

    45. Õppetund 5: Loendid veebilehtedel

    46. ​​Nimekirjade tüübid

    Nummerdatud
    Märgistatud
    Terminite loendid (nagu sõnastikus)
    Pesastatud loendid

    47. Nummerdatud loend

    Nimekiri - konteineris
    Loendiüksus – silt

  • Atribuut TYPE on numeratsioonitüüp (araabia
    numbrid; I - Rooma; a - ladina keel
    väiketähtedega)

    1. Süsteemiprogrammid
    2. Rakendusprogrammid
    3. Programmeerimissüsteemid

    48. Täpploend

    Nimekiri - konteineris
    Loendiüksus – silt

  • Atribuut TYPE on markerite tüüp ("ketas" on ketas,
    "ruut" - ruut, "ring" - ring)

    • Tekstiredaktorid
    • Graafiline redaktor
    • Arvutustabelid
    • Andmebaasi haldussüsteemid

    49. Mõistete loetelu

    Nimekiri - konteineris

    Loendiüksus – silt

    Mõiste kirjutatakse kõigepealt ja seejärel
    selle määratlus (nagu sõnastikus)

    50. 6. õppetund

    51. Õppetund 6: Interaktiivsed vormid veebilehtedel

    52. Interaktiivse vormi mõiste

    Veebilehe külastajatega suhtlemiseks
    loojad veebilehel
    interaktiivsed vormid.
    Vormid sisaldavad erinevaid elemente
    juhtnupud:
    tekstiväljad
    ripploendid
    lipud
    lülitid...

    53. Tekstiväli

    peamine konteiner

    Tekstiväli – teksti sisestamiseks klaviatuurilt: silt
    atribuutidega:
    TYPE="tekst" – sisutüüp (tekst)
    NAME="____" – välja nimi
    SIZE="40" – sisestusvälja pikkus (märkides)

    - rea eraldaja (liigutage kursor uude
    string)

    54. Lülitid (raadionupud)

    Ümar nupp, et valida üks mitmest
    vastusevariandid:
    TÜÜP="raadio"
    Kõik selle rühma liikmed peavad olema
    sama nimi: NAME="grupp"
    VALUE atribuudid sisaldavad valikuid
    vastused: VALUE="õpilane"

    55. Lipud

    Ruudukast mitme vastuse valimiseks
    soovitatud valikud:
    TYPE="märkeruut"
    Igal selle rühma elemendil peab olema oma nimi:
    NAME="kast1", NAME="kast2",
    …..
    VALUE atribuuti sisaldavad valikuid vastuste valimiseks:
    VALUE = "WWW", VALUE = "e-post", ….
    Igal VÄÄRTUSel on oma vastus.
    www

    56. Loendikastid

    Rippmenüü loomiseks
    kasutage konteinerit

    Selles loendi iga element
    antud sildi järgi

    • SEOTUD ARTIKLID