Skip to content

Latest commit

 

History

History
291 lines (207 loc) · 7.45 KB

02.2.html.md

File metadata and controls

291 lines (207 loc) · 7.45 KB
Raw
title
Fyrirlestur 2.1 — HTML 3

Fyrirlestur 2.2 — HTML #3

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

XHTML

  • Extensible HyperText Markup Language
  • Tilraun til að láta HTML vera betur skilgreint og þá sem framlenging af XML en ekki SGML
  • Vel formað XML svo hægt að þátta (parse) með XML þátturum
  • Gekk ekki vel

XHTML kröfur á málfræði

  • Vel formað
    • <p>Halló <strong>heimur</strong></p>
    • ekki <p>Halló <strong>heimur</p></strong>
  • Tög og attribute í lágstöfum
    • <p class="a">Hæ</p>
    • ekki <P CLASS="a">Hæ</P>
  • Endum alltaf og lokum alltaf
    • <p class="a">Hæ</p><br/>
    • ekki <p class="a">Hæ<br>
  • Attribute á elementum alltaf innan gæsalappa og ekki stök
    • <p class="a" foo="foo">Hæ</p>
    • ekki <p class=a foo>Hæ
  • Þessar kröfur eru ekki til staðar í HTML5

Gallar við XHTML

  • Þar sem XHTML á að vera vel formað XML er auðvelt að gera mistök sem valda því að síða birtist ekki, t.d. að loka ekki elementi
  • Villur í vöfrum stoppuðu notkun
  • Flest XHTML var sent frá vefþjóni merkt sem HTML (Content type sett sem text/html) og því túlkað sem slíkt

Be conservative in what you do, be liberal in what you accept from others

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Í lagi?</title>
  </head>
  <body>
    <p>Halló?</p>
  </body>
</html>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Í lagi?</title>
  </head>
  <body>
    <p>Halló?
  </body>
</html>

Að skrifa HTML

  • Skrifum snyrtilegt HTML
    • Fylgjum (yfirleitt) þeim kröfum sem XHTML setur á málfræði
  • Pössum upp á inndráttinn
    • Whitespace er ekki mikilvægt í HTML, þ.a. mörg bil og mörgum línum er breytt í eitt bil

Kóði lýsir innri manneskju

  • Óli

Kóði lýsir innri manneskju

<!doctype html>
<html lang="is">
  <head>
    <meta charset="utf-8">
    <title>Halló heimur</title>
  </head>
  <body>
    <p>Hæ!</p>
  </body>
</html>
<!doctype html><HTML lang=is>
<head><meta charset="utf-8">
<title>Halló heimur!</TITLE>
<BODY><p>Hæ!

Túlkað nákvæmlega eins og fyrri kóði, en mikill munur á lesanleika.

  • Sum element „gleypa“ allt sem er innan þeirra þar til þeim er lokað
    • t.d. <title> og <textarea>
  • Ef við lokum elementi of snemma getur það leitt til villa (séstaklega þegar unnið er með CSS) sem getur verið erfitt að leita upp
<div class="foo">
  <div class="bar">
    <div class="baz">
    </div></div>
  </div>
</div>

Linting

  • Almennt köllum við það linting að lesa yfir kóða og benda á möguleg vandamál
  • Til fyrir langflest forritunarmál
  • Oftast tvenns konar villur
    • Mögulegar villur við keyrslu
    • Brot á kóðastíl

Kóðastíll

  • Hvernig við meðhöndlum inndrátt, notkun á tabs eða spaces
  • Hámarkslengd lína, ef línur verða mikið lengri en 100 stafir geta komið upp vandamál (t.d. að bera saman kóðabreytingar, lesa kóða á minni skjám/minni gluggum)
  • Í hvaða röð CSS eigindi eru
  • o.s.fr.

Validation

  • Til validation þjónustur sem túlka HTML og láta vita af villum sem eru til
  • W3C rekur þá mest notuðu á https://validator.w3.org/
  • Líka hægt að setja upp í flestum ritlum

Annað

  • Getum sett athugasemd inn í HTML:
    • <!-- no comment -->
  • Í XML og HTML eru sérstakir stafir, character entity skilgreindir með &X; þar sem X er:
    • Heiti tákns, t.d. &lt; fyrir minna-enn (<)
    • Code point, í dec eða hex með # fyrir framan, t.d. &#x00DE; fyrir Þ

Að velja element

  • Þegar við erum að velja element viljum við velja element sem á sem mest við
  • Lesum í merkingarfræði elements
  • Getum flett upp

Merkingarfræði

  • Það er sterklega mælst til þess að markup í HTML skjali sé aðeins notað til að tjá merkingu en ekki framsetningu
  • Framsetning á gögnum er stýrt með CSS og fáum við því hreina skiptingu á milli efnis og útlits
  • Mörg element til sem skilgreina merkingu en annars er hægt að nota attributes

Dæmi

<b>Fyrirsögn</b>
<br>Halló heimur
Fyrirsögn
Halló heimur 
<h2>Fyrirsögn</h2>
<p>Halló heimur</p>

Fyrirsögn

Halló heimur

Af hverju merkingarfræði?

  • Aðskilnaður á milli merkingar og útlits gerir manni auðveldara að breyta öðru án þess að hafa áhrif á hitt
  • Einfaldar viðhald, breytingar eru dýrar
  • Góð merkingarfræði getur aukið aðgengi að vef
  • Vélar sem skoða vef með merkingarfræðilega réttu HTML geta dregið ályktanir um efnið sem getur gagnast þér og öðrum
    • T.d. Googlebot, Pocket, Instapaper
  • Vafrar geta birt efni á nytsamlegan hátt sem höfundur hafði ekki dottið í hug
  • Það er snyrtilegra og faglegra

Áður fyrr…

  • Merkingu og framsetningu var blandað óhikað saman
  • Töflur ásamt ósýnilegum myndum (spacer gif) notaðar til að stýra útliti
  • <FONT> notað til að stýra stærð og lit á letri
    • <FONT size="12" color="red" face="Comic Sans MS">Halló heimur!</FONT>
  • Hjálpsemi og samhæfni nútíma vafra gera okkur þó kleyft að birta fjörgamalt HTML sem engin ætti að nota
Halló heimur!
hæææææææææææææææææææææ

Úrelt element

  • Búið að fjarlægja element sem notuð voru aðeins til birtingar, t.d. <center>og <font>
  • Einnig búið að fjarlægja attribute af sama meiði, t.d. align, background, bgcolor og border
  • Skrifum HTML þannig að beri merkingu
  • Stýrum framsetningu með CSS
  • Fáum hreina skiptingu milli efnis og útlits

<div> & <span>

  • Ómerkingarbær element en notuð þegar ekkert annað á við
  • <div> – division, skiptir síðu, block level, fyllir út í lárétt pláss foreldris
  • <span> – merkir texta. Inline, fellur inn í nærliggjandi texta

Merkingarfræðileg siðvendni

  • Verður allt að vera 100% merkingarfræðilegt og má aldrei nota <div> eða <span>?
  • Höfum merkingarfræði í huga og gerum okkar besta
  • Einbeitum okkur að því að að skrifa snyrtilegt og gott HTML!
  • Eyðum ekki of löngum tíma í að finna hið eina rétta element, notum <div> eða <span> ef svo ber við