1 / 27

Programavimas 1

Programavimas 1. 1 paskaita. (x)HTML pagrindai. (x)HTML pradmenys Kas yra HTML? HTML dokumento struktūra Pratybos HTML dokumento kūrimas HTML dokumentų jungimas nuorodomis. Planas. HTML pagrindai. Tekstas. Hipertekstas.

benito
Télécharger la présentation

Programavimas 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programavimas 1 1 paskaita

  2. (x)HTML pagrindai

  3. (x)HTML pradmenys • Kas yra HTML? • HTML dokumento struktūra • Pratybos • HTML dokumento kūrimas • HTML dokumentų jungimas nuorodomis Planas

  4. HTML pagrindai

  5. Tekstas Hipertekstas Į įprastinį tekstą įterpiamos nuorodos, kurios perkelia skaitytoją į kitas teksto dalis ar visai kitus tekstus Panašu į nuorodas enciklopedijose – (žr. psl. XX) Skaitytojas pats nusprendžia kokia tvarka skaitys tokio teksto dalis • Įprastinis tekstas – knygos, žurnalai, laikraščiai ir pan. • Teksto turinys rodomas eilutėmis, suskirstomas į paragrafus , puslapius. • Rašant tokį tekstą daroma prielaida, kad skaitytojas jį skaitys ta tvarka, kaip jis yra pateiktas Kas yra HTML? (1)

  6. H yper • T ext • M arkup • L anguage • Ne programavimo, o žymėjimo kalba • Pirmasis formalus aprašymas 1991 –aisiais • Šiuo metu šį standartą prižiūri ir tobulina organizacija W3C • HTML 2.0 – 1995 m • HTML 3.2 – 1997 m. Sausį • HTML 4.0 – 1997 m. Gruodį • Strict / Transitional / Frameset • HTML 4.1 – 1999 m. Gruodį • HTML 5 – ateitis Kas yra HTML? (2)

  7. Griežtesnė, labiau standartizuota HTML versija • XHTML 1.0 – 2000-ųjų sausis • XHTML 1.1 – 2001-ųjų gegužė • XHTML 5 – kuriama kartu su HTML 5 • Reikalauja kad HTML kodas būtų tvarkingai suformuluotas • Geriau atvaizduoja skirtingos naršyklės • Kodas – lengviau perprantamas ir tobulinamas XHTML

  8. HTML skirta turinio struktūrai suformuoti • HTML dokumento išvaizda yra apibrėžiama per CSS (pakopinius stilius) Turinio/išvaizdos atskyrimas

  9. HTML dokumentas formuojamas elementų (angl. tags) pagalba • Elemento pavadinimas rašomas tarp < ir > simbolių • <title> • Papildomas elemento savybes galima nurodyti per atributus • <p class=“pastaba”> xHTML dokumento struktūra (1)

  10. Paprastai elementą sudaro dvi žymos, nurodančios jo pradžią ir pabaigą: • <title>Pavadinimas</title> • Tokių elementų viduje gali būti teksto arba kitų elementų: • <p>Vardenis <em>Pavardenis</em></p> xHTML dokumento struktūra (2)

  11. Tačiau kai kurių elementų viduje kitų elementų būti nebegali, tokie elementai užbaigiami “/” ženklu: • <br /> • <img src=“logo.jpg” /> xHTML dokumento struktūra (3)

  12. Bet kurio HTML dokumento pagrindinis elementas turi būti <html>. Jo viduje talpinami visi kiti dokumento elementai: • <html>....</html> • xHTML standartas reikalaja <html> elementui nurodyti bent du atributus: • <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">....</html> xHTML dokumento struktūra (4)

  13. Bet kurioje HTML dokumento vietoje galima parašyti komentarus, juos apskliaudžiant <!-- ir --> • <!-- komentaras pradžioje --><html> <!-- komentaras viduryje --> </html> <!-- komentaras pabaigoje --> xHTML dokumento struktūra (5)

  14. <html> elemento viduje paprastai būna du kiti elementai - <head> ir <body> • <head> dalyje pateikiama informacija apie puslapį – pavadinimas, koduotė ir kt. • <body> dalyje pateikiamas visas matomas puslapio turinys xHTML dokumento struktūra (6)

  15. <html> <head> <title>Pavadinimas</title> </head> <body> <p>Tekstas čia kažkoks</p> </body></html> xHTML dokumento struktūra (7)

  16. <title> elementas – puslapio pavadinimas • <title>Pavadinimas</title> • <meta> elementas – meta informacija • <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> • <style>, <link>, <script> ir kt. elementai <head> dalis

  17. <p> elementas žymi teksto paragrafus • <p>Loremipsumdolorsitametconsectetuermattisenimodiovelnec.</p> • Galimi atributai: • class • id • dir • style • title <body> dalis (1)

  18. <h1> - <h6> - žymi teksto antraštes. • <h1> – aukščiausio lygio, <h6> - žemiausio • <h1>Naujienos</h1><h2>“Žalgiris” laimėjo prieš “Šiaulius”</h2> • Galimi atributai: • class, id, style, title, dir <body> dalis (2)

  19. Sąrašams formuoti naudojami <ol> ir <ul> elementai • <ul> <li>Pirmas punktas</li> <li>Antras punktas</li></ul> • Galimi atributai: • class, id, style, title, dir <body> dalis (3)

  20. Numeruoti sąrašai <ol> Nenumeruoti sąrašai <ul> <ul> <li>Pirmas punktas</li> <li>Antras punktas</li></ul> Pirmas punktas Antras punktas • <ol> <li>Pirmas punktas</li> <li>Antras punktas</li></ol> • Pirmas punktas • Antras punktas <body> dalis (4)

  21. <hr> <br> Perkelia dalį paragrafo teksto į kitą eilutę <p>Eilutė 1 <br />Eilutė2 <br /> Eilutė 3 <br /> Eilutė 4</p> Eilutė 1 Eilutė 2 Eilutė 3 Eilutė 4 • Naudojama horizontaliam skirtukui sukurti • <p>Tekstas</p><hr /><p>Kitas tekstas</p> Tekstas Kitas tekstas <body> dalis (5)

  22. <a> elementas skirtas : • kurti nuorodoms į kitas dokumento dali arba kitus dokumentus • <a href=“kitur.html”>Nuoroda</a> • Kurti žymoms (anchor) dokumente, į kurias bus galima nukreipti nuorodą • <a name=“vieta” /> • <a href=“#vieta”>Nuoroda į ‘vietą’</a> <body> dalis (6)

  23. Pratybos

  24. Notepad • Start > Programs > Accessories > Notepad • Naršyklė Įrankiai

  25. Sukurti html dokumentą “Sveikas Pasauli!” • <html> • <head> • <title> • <body> • <p> Užduotis nr. 1

  26. Sukurti HTML dokumentą, kurį naršyklė atvaizduotų taip kaip šį • <h1> - <h6> • <p> • <br> • <hr> • <ul> / <ol> • <a href=“”> • <a name=“”> • <html><head><body><title> Užduotis nr. 2

  27. Sukurti mini enciklopediją sau įdomia tema • Bent skirtingų straipsnių, pateikiamų atskiruose dokumentuose • Straipsnių sąrašas ir navigacija tarp straipsnių • Straipsniai suskirtstyti į skiltis, navigacija tarp jų • <h1> - <h6> • <p> • <br> • <hr> • <ul> / <ol> • <a href=“”> • <a name=“”> • <html><head><body><title> Užduotis nr. 3

More Related