HTML

Programavimas 1

Planas

  • Kas yra HTML?
  • HTML dokumento struktūra
  • Nuorodos

Hyper
Text
Markup
Language

Tekstas

Į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

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

Istorija - tiny.lt/html1

Kas yra xHTML?

Griežtesnė, labiau standartizuota HTML versija
 

  • Reikalauja kad HTML kodas būtų tvarkingai suformuluotas
  • Geriau atvaizduoja skirtingos naršyklės
  • Kodas – lengviau perprantamas ir tobulinamas

Turinio ir išvaizdos atskyrimas

HTML skirta turinio struktūrai suformuoti


HTML dokumento išvaizda yra apibrėžiama per CSS (pakopinius stilius)

HTML dokumento struktūra

  • Sudarytas iš elementų (angl. tags)

 

  • Elemento pavadinimas rašomas tarp < ir > ženklų
    • <title>

 

  • Papildomos savybės nustatomos per atributus
    • <p class="baltas">

HTML struktūra (2)

  • 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>

 

  • Išimtys - <br /> <img /> ir pan - negali nieko turėti viduje.

HTML struktūra (3)

Pagrindinis elementas - visada <html>

 

Jo viduje - visuomet <head> ir <body>

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

Komentarai

Pastabos sau (ir kitiems programuotojams) 

<!DOCTYPE html>
<html>
  <!-- čia yra komentaras -->
  <head></head>
  <body></body>
</html>

Pavyzdys

<head> - informacija naršyklei, paieškos sistemoms ir pan.


<body> - matomas turinys

<!DOCTYPE html>
<html>
  <!-- čia yra komentaras -->
  <head>
    <title>Pavyzdys</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <p>Labas pasauli</p>
  </body>
</html>

Elementai. <head>

<title> - dokumento pavadinimas, matomas naršyklės lango viršuje.

 

<meta> - metažymos - papildoma informacija naršyklei, paieškos sistemoms ir soc tinklams.

 

<style> <link> <script>

Elementai. <body>

<p> - teksto pastraipa

 

<h1> - <h6> - įvairaus lygio antraštės

<!DOCTYPE html>
<html>
  <!-- čia yra komentaras -->
  <head></head>
  <body>
    <h1>Labas pasauli</h1>
    <h2>1 skyrius</h2>
    <p>Ilga pastraipa</p>
    <h2>2 skyrius</h2>
    <p>Kita ilga pastraipa</p>
  </body>
</html>

Elementai. <body>

<ol> - sunumeruotas sąrašas

 

<ul> - nesunumeruotas sąrašas

 

<li> - sąrašo elementas

 

<!DOCTYPE html>
<html>
  <!-- čia yra komentaras -->
  <head></head>
  <body>
    <ol>
      <li>Punktas 1</li>
      <li>Punktas 2</li>
    </ol>
    <ul>
      <li>Punktas 1</li>
      <li>Punktas 2</li>
    </ul>
  </body>
</html>

Elementai. <body>

<hr> - horizontalus skirtukas

 

<br> - nukėlimas į kitą eilutę nebaigiant pastraipos.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>Tekstas</p>
    <!-- skirtukas -->
    <hr />
    <p>Tekstas po skirtuko</p>

    <p>
       Tekstas<br />
       Kita eilutė<br />
       vis dar ta pati pastraipa
    </p>
  </body>
</html>

Nuorodos

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <!-- į kitą dokumentą -->
    <a href="antras.html">Kitas dokumentas</a>
    <a href="katalogas/antras.html">Kitam kataloge</a>
    <a href="http://domenas.lt">Kažkur į internetą</a>

    <!-- į kitą dokumento vietą -->
    <a href="#pabaiga">Į paskutinę pastraipą</a>
    <p>Pastraipa</p>
    <!-- daug daug pastraipų -->
    <p id="pabaiga">Pastraipa</p>
    
  </body>
</html>

HTML elementai.

http://tiny.lt/tags

Visų HTML elementų abėcėlinis sąrašas

Užduotis #1

Užduotis #2. Lab. darbas #1

Sukurti mini enciklopediją sau įdomia  tema

  • 5 dokumentai
  • Navigacija tarp dokumentų
  • Dokumentai suskirtstyti  į skiltis
  • Navigacija tarp skilčių

<h1> - <h6>
<p>
<br>
<hr>
<ul> / <ol>
<a href=“”>

<html><head><body><title>

HTML 1

By Arūnas Liuiza

HTML 1

  • 3,343

More from Arūnas Liuiza