|
| |
| |
| |
| |
mwanzo/vlinder4.png "align=\"top\",height=\"30\"")
Workshop: Inleiding HTML
Deze workshop wordt gegeven via Just For Learning. Klik op de link om de workshop te volgen. Het is ook mogelijk om IRC te gebruiken: ga dan naar de kanalen #ubuntu-nl-klas en #ubuntu-nl-mwanzo op irc.freenode.net.
- Zarterdag 26 mei 2012 van 19:30 tot 20:30
- Workshopleider: commandoline
Inschrijven
Als je een account maakt op de wiki kan je de pagina bewerken en je naam op de lijst zetten. http://wiki.ubuntu-nl.org/StartPagina?action=newaccount
Nickname |
leoquant |
Timo |
Hannie |
Michael Tel |
Luckiboy (tot 8 uur) |
|
Log
Beschikbaar na de workshop.
HTML-document:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Paginatitel (komt normaalgesproken in de bovenbalk)</title>
5 </head>
6 <body>
7 wat tekst...
8 <h1>Hello World!</h1>
9
10 <!-- Koppen -->
11 <h1>Kop 1</h1>
12 <p>Wat tekst...</p>
13 <h2>Kop 2</h2>
14 <p>nog wat tekst</p>
15 <p>
16 en een tweede alinea
17 merk op dat deze zin niet afgebroken is in de uiteindelijke
18 webpagina.
19 </p>
20 <p>
21 Een zin die wordt afgebroken <br />halverwege.
22 </p>
23 <h3>Kop 3</h3>
24 <h4>Kop 4</h4>
25 <h5>Kop 5</h5>
26 <h6>Kop 6</h6>-->
27
28 <!-- links -->
29 <a href='http://ubuntu-nl.org/'>Ubuntu NL homepage</a>
30
31 <!-- afbeelding -->
32 <img src='http://design.canonical.com/wp-content/uploads/2011/03/cof_orange_hex1.png' />
33
34 <!-- lists -->
35 <ul>
36 <li>item</li>
37 <li>item 2</li>
38 </ul>
39 <ol>
40 <li>item</li>
41 <li>item 2</li>
42 </ol>
43 <table>
44 <thead>
45 <tr>
46 <th>eerste kolom</th>
47 <th>tweede kolom</th>
48 </tr>
49 </thead>
50 <tbody>
51 <tr>
52 <td>1, 1</td>
53 <td>1, 2</td>
54 </tr>
55 <tr>
56 <td>2, 1</td>
57 <td>2, 2</td>
58 </tr>
59 </tbody>
60 </table>
61 </body>
62 </html>
Klas:
(19:36:42) commandoline: Ok, welkom allemaal dan bij de workshop html, bij nader inzien toch via IRC :P
(19:37:08) hannie [~hannie@unaffiliated/hannie] is de ruimte binnengekomen.
(19:37:32) commandoline: De eerste vraag die we ons moeten stellen is natuurlijk: wat is HTML?
(19:37:45) commandoline: HTML staat voor Hyper Text Markup Language
(19:38:09) commandoline: zoals de naam al zegt is het een opmaaktaal, om precies te zijn de opmaaktaal achter websites.
(19:38:40) commandoline: Het wordt dus gebruikt om structuur in webpagina's aan te brengen.
(19:39:16) commandoline: Tegenwoordig gaat overigens het meeste 'opmaakwerk' via een andere taal die met HTML te integreren valt: CSS (Cascading Style Sheets)
(19:39:54) commandoline: voor meer info: http://nl.wikipedia.org/wiki/HTML
(19:40:01) commandoline: http://nl.wikipedia.org/wiki/Cascading_Style_Sheets
(19:40:14) commandoline: daarnaast is het nog goed om te weten dat HTML niet alleen voor websites gebruikt wordt.
(19:40:57) commandoline: In een computerprogramma heb ik het bijvoorbeeld wel eens gebruikt om PDF's te genereren.
(19:41:28) commandoline: En, met de uitbreiding JavaScript, behoren tegenwoordig zelfs computerspelletjes tot de mogelijkheden. Maar dat voert te ver voor vandaag.
(19:41:48) commandoline: http://opengamedesigner.org/gamedemo/ <- wel even een voorbeeldje, natuurlijk ;)
(19:42:53) commandoline: Ok, om het geschiedenisverhaaltje wat je weer kan vergeten compleet te maken:
(19:43:07) commandoline: HTML is gebaseerd op SGML: sgml http://nl.wikipedia.org/wiki/Standard_Generalized_Markup_Language
(19:43:20) commandoline: is ondertussen aanbeland bij de 5e versie
(19:43:44) commandoline: en lijkt erg op de taal XML, die een heleboel toepassingen heeft.
(19:44:02) commandoline: Bijvoorbeeld in webapplicaties, maar ook in bestandsformaten op de computer en nog veel meer dingen.
(19:44:09) commandoline: http://nl.wikipedia.org/wiki/XML
(19:44:27) commandoline: ok, tijd voor een praktijkvoorbeeld.
(19:44:42) commandoline: http://84.83.188.84/
(19:44:51) commandoline: wat jullie zien, is een website die automatisch geupdate wordt
(19:45:07) commandoline: aan de linkerkant zie je HTML (die ik bewerk tijdens deze workshop)
(19:45:22) commandoline: aan de rechterkant zie je de resulterende webpagina, die op dit moment overigens nog leeg is.
(19:45:36) commandoline: (maar ik zal er even wat op zetten :))
(19:46:45) commandoline: Ik zal jullie trouwens later vertellen hoe je zelf html op zo'n manier opslaat dat je het als webpagina kunt openen.
(19:47:24) commandoline: ok, laten we beginnen met de structuur die je links ziet doorlopen.
(19:47:33) commandoline: <!doctype html> is iets dat je standaard moet invoegen
(19:47:55) commandoline: het vertelt welke versie van html je gebruikt, dit 'doctype' is de simpelste die er is maar werkt.
(19:48:15) commandoline: het is daarnaast het standaarddoctype van de nieuwe versie van html, versie 5.
(19:48:22) corewillem [3eebb452@gateway/web/freenode/ip.62.235.180.82] is de ruimte binnengekomen.
(19:48:42) commandoline: maar om jullie een idee te geven, zo zag het doctype van html 4 eruit: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(19:49:08) commandoline: wat je hiervan moet onthouden: htmldocumenten beginnen met een doctype, nl. <!doctype html>. That's it.
(19:49:30) commandoline: ok, daarna zie je de hele tijd zogenaamde 'tags'
(19:49:42) commandoline: <html> is er eentje van
(19:50:19) commandoline: De tag begint met <tag> en eindigt met </tag> zoals jullie zien.
(19:50:55) commandoline: het hele document is dus opgebouwd uit tags die openen en sluiten.
(19:51:03) commandoline: Is het tot zover duidelijk?
(19:51:37) commandoline: ok, <html> is de 'basistag', waar alle anderen in staan.
(19:51:50) commandoline: binnen <html> vind je <head> en <body>
(19:52:23) commandoline: <head> is voor 'metadata', denk aan de titel (<title>) van het document, maar ook aan eventuele CSS of JavaScript-bestanden
(19:52:46) commandoline: Je ziet er in principe niet direct iets van terug in het browserscherm.
(19:53:01) commandoline: Dat is wel het geval van alles binnen <body>
(19:53:07) Luckiboy: <hannie> ook subtitels?
(19:53:07) commandoline: * voor
(19:53:22) commandoline: mooie vraag, daar kom ik zo op :)
(19:53:52) commandoline: binnen body komen dus alle tags met de echte content erin.
(19:53:56) commandoline: Eentje zien jullie al: h1
(19:54:04) commandoline: kort voor: header 1 (kop 1)
(19:54:27) commandoline: je kan het vergelijken met de kopstijlen in LibreOffice Writer (ok, vooruit, of MS Word :P)
(19:55:03) commandoline: maar er zijn nog meer headers, om de vraag van hannie te beantwoorden. Zie het document maar even (http://84.83.188.84/)
(19:55:54) commandoline: ok, 6 was dacht ik de laatste
(19:56:10) commandoline: in de praktijk heb ik er nooit meer dan 4 nodig gehad, geloof ik.
(19:56:38) Luckiboy: <hannie> Is her het aantal tabsprongen even belangrijk als in Python?
(19:56:50) commandoline: jullie zien dat ik in de html boven de verschillende koppen <!-- Koppen --> heb gezet.
(19:57:16) commandoline: hannie: opnieuw een goede vraag. Nee, het maakt in html niets uit. Wel zou ik aanraden om een dergelijke stijl aan te houden, het maakt ingewikkelde documenten beter leesbaar.
(19:57:44) commandoline: maar in principe is <html><head></head><body></body></html> ook een valide pagina als ik een doctype toe zou voegen.
(19:58:17) commandoline: terug naar <!-- -->: dat betekent simpelweg: negeer alles wat hiertussen staat.
(19:58:26) commandoline: handig om je broncode van commentaar te voorzien.
(19:58:45) corewillem verliet de ruimte (quit: Ping timeout: 245 seconds).
(19:58:59) commandoline: ok, we hebben nou koppen, maar zonder tekst hebben we daar natuurlijk weinig aan.
(19:59:17) commandoline: Ten eerste is het mogelijk om gewoon tekst binnen de <body>-tags te typen, die komt gewoon op het scherm
(19:59:25) commandoline: (anders zouden we geen comments nodig hebben gehad)
(19:59:41) commandoline: zie ook het voorbeeld opnieuw.
(20:00:06) commandoline: ik vind het zelf echter mooier om tekst in zgn. paragraphs (alinea's) te groeperen.
(20:00:10) commandoline: daarvoor is er de tag <p>
(20:01:44) commandoline: goed, zoals jullie in het document zien, wordt alle 'overbodige' witruimte intern gezien als één enkele spatie.
(20:02:09) commandoline: stel nu dat je, zonder direct een nieuwe alinea te beginnen, een regel wil afbreken
(20:02:13) commandoline: dat kan dan met <br />
(20:02:18) commandoline: (break)
(20:02:25) commandoline: (Nederlands: afbreken)
(20:03:14) commandoline: <br /> is kort voor <br></br>
(20:03:35) commandoline: omdat het geen zin heeft om tussen die tags wat te zetten, zie je in de praktijk ze nooit uitgeschreven worden.
(20:03:55) commandoline: wel zie je soms dat mensen ze gewoon helemaal niet afsluiten: begin<br>eind.
(20:03:59) corewillem [~corewille@ip-62-235-180-82.dsl.scarlet.be] is de ruimte binnengekomen.
(20:04:11) commandoline: dat werkt, maar is lelijk en mag volgens de laatste webstandaarden eigenlijk ook niet meer als ik het goed heb.
(20:04:52) commandoline: ok, duidelijk tot zover?
(20:05:02) Luckiboy: duidelijk
(20:05:04) commandoline: mooi :)
(20:05:29) commandoline: ok, één van de meest veelvoorkomende dingen op een webpagina is de link.
(20:05:49) commandoline: ook daarvoor is een tag: <a> (anchor (= anker letterlijk))
(20:06:46) commandoline: ok, deze link verwijst nu naar http://ubuntu-nl.org/
(20:06:57) commandoline: (http:// mag je, in tegenstelling tot in bijv. firefox, niet vergeten!)
(20:07:09) commandoline: en heeft als linktekst Ubuntu NL homepage.
(20:07:25) commandoline: merk op dat href="" een attribute wordt genoemd.
(20:07:37) commandoline: ze hebben altijd de vorm name="value"
(20:08:06) commandoline: je kan overigens, als je meerdere webpagina's binnen je site hebt, delen van de link weglaten.
(20:08:29) commandoline: daarvan krijgen jullie later nog wel een voorbeeld (als ik snel genoeg doortype :P)
(20:08:39) commandoline: *typ was het dacht ik :)
(20:08:51) Luckiboy: <hannie> is het <a> of <a?
(20:09:02) commandoline: de tag heet <a>
(20:09:13) commandoline: maar de tag heeft altijd een attribuut nodig: href
(20:09:30) commandoline: en attributen worden toegevoegd *binnen* de tagopening
(20:09:33) commandoline: duidelijk?
(20:09:59) commandoline: mooi
(20:10:06) commandoline: volgende: afbeeldingen invoegen.
(20:11:20) commandoline: hmm, hier gaat iets fout, waarschijnlijk is ubuntu.com niet blij met wat 'crosslinking' genoemd wordt. Even een ander voorbeeldje zoeken...
(20:11:33) Luckiboy: <hannie> nog even: </a moet ook niet een > hebben? (verkeerde kleur bij mij)
(20:11:45) commandoline: oh, wacht, dat is niet het probleem, hoe dan ook, een duidelijker voorbeeld.
(20:12:59) commandoline: het is idd </a>, maar dat is in het document toch ook zo?
(20:13:03) commandoline: (misschien even opzij scrollen?)
(20:13:15) commandoline: ok, het img-element.
(20:13:29) commandoline: opnieuw een tag die direct gesloten wordt, net als <br />
(20:13:37) commandoline: maar deze keer met een attribuut: src.
(20:13:58) commandoline: dat is de locatie (path) van de afbeelding die je wilt laten zien
(20:14:06) commandoline: vergelijkbaar met href bij <a>
(20:14:45) corewillem verliet de ruimte (quit: Read error: Connection reset by peer).
(20:15:00) commandoline: ok, het wordt al een flink document, even naar beneden scrollen
(20:15:16) commandoline: oh, hij blijft vernieuwen, dus dat wil niet.
(20:15:17) commandoline: momentje
(20:16:13) commandoline: daar kan je commentaar ook voor gebruiken: code die je tijdelijk niet nodig hebt even mee uit het zicht halen.
(20:16:28) commandoline: ondertussen heb ik twee lijsten in beeld gezet: <ul> en <ol>
(20:16:40) commandoline: (unnamed list en ordered list)
(20:16:54) commandoline: de ene gebruikt zogenaamde 'bullets (stippen)' voor de opsomming
(20:16:57) commandoline: de andere nummers
(20:17:49) commandoline: overigens kan je met CSS rustig een <ol> bullets geven, het is alleen niet zo handig aangezien het vanuit html-oogpunt ('semantisch gezien') een geordende lijst is.
(20:18:00) commandoline: ok, vragen tot zover?
(20:18:23) commandoline: ok, we gaan verder.
(20:19:47) commandoline: ok, ik heb zonet een tabel in elkaar gezet.
(20:19:58) commandoline: die bestaat uit een overkoepelend eleement: <table
(20:20:22) commandoline: * <table>
(20:20:54) commandoline: daarin heb je een tabelheader: daarin kan je aangeven met <th> (table header o.i.d.) items wat de kolomkoppen moeten zijn
(20:21:03) commandoline: daarna volgen in <tbody> de eigenlijke tabelrijen
(20:21:49) commandoline: <tr> (table row)
(20:22:11) commandoline: met daarin <td> (table data) voor de eigenlijke data in de kolommen.
(20:22:59) commandoline: ok, ik denk dat dat de belangrijkste elementen zijn voor vandaag, er zijn er nog veel meer, maar die komen een andere keer wel denk ik.
(20:23:22) commandoline: ik wil jullie nog twee dingen laten zien:
(20:23:35) commandoline: 1) hoe je de broncode van een bestaande website opvraagt in firefox
(20:23:58) commandoline: 2) hoe je zelfgeschreven html opslaat als webpagina.
(20:24:17) Luckiboy: MichaelTel> Zou je ipv <th> ook gewoon <tr> + <td> kunnen gebruiken? Als je de tekst vetgedrukt wilt, kan je altijd nog <b> </b> gebruiken.
(20:24:17) commandoline: (20:23:57) MichaelTel: Zou je ipv <th> ook gewoon <tr> + <td> kunnen gebruiken? Als je de tekst vetgedrukt wilt, kan je altijd nog <b> </b> gebruiken.
(20:24:25) commandoline: Luckiboy: je bent te snel :)
(20:24:28) commandoline: :P
(20:24:32) Luckiboy: :D
(20:25:00) commandoline: MichaelTel: je krijgt hetzelfde effect, maar semantisch gezien (daar is 'ie weer), is het minder mooi.
(20:25:25) commandoline: je kan ook willekeurige tekst met CSS de grootte van een kop geven, of een kop op normale tekst laten lijken.
(20:25:43) commandoline: je gebruikt html daarom tegenwoordig vooral om structuur aan te geven
(20:26:26) commandoline: opmaak doen kan tot op zekere hoogte met html, maar ik zou het niet aanraden.
(20:27:04) commandoline: ok, even een relatief simpele broncode uitgezocht van één van m'n eigen sites: http://opengamedesigner.org/
(20:27:23) commandoline: (als je de CSS, die in de <head> in de <style> tag staat, wegdenkt)
(20:27:35) commandoline: je bekijkt de broncode door die pagina in firefox te openen
(20:27:43) commandoline: (of een andere pagina waarvan je de broncode wilt zien)
(20:27:45) commandoline: en dan doe je:
(20:28:21) Luckiboy verliet de ruimte (quit: Quit: Ik ga weg).
(20:28:24) commandoline: rechtermuisknop (terwijl je ergens op de pagina staat)
(20:28:31) commandoline: Paginabron bekijken
(20:28:37) commandoline: er is ook een sneltoets voor: Ctrl + U
(20:28:55) commandoline: 2)
(20:29:21) commandoline: uitgaande van 'Teksteditor' (gedit) in Ubuntu
(20:29:25) commandoline: (je kan ook een ander gebruiken)
(20:29:36) commandoline: schrijf een html-document
(20:29:44) commandoline: (kopieer bijvoorbeeld de html uit de testpagina)
(20:29:58) commandoline: plak die in een nieuw verder leeg bestand
(20:30:04) commandoline: bestand > opslaan
(20:30:09) commandoline: selecteer een locatie
(20:30:31) commandoline: Tekenset mag op UTF-8 blijven staan, regeleinde op Unix/Linux is ook prima.
(20:30:47) leoquant: <hannie> krijgt het opgeslagen bestand de extensie .html?
(20:30:48) commandoline: het enige waar je moet opletten is de naam, die moet eindigen in .html
(20:30:53) commandoline: hannie: ja :)
(20:31:32) commandoline: je kan vervolgens de pagina openen door 'm op te zoeken in de bestandsbeheerder
(20:31:47) commandoline: en dan rechtermuisknop > openen met > firefox
(20:31:58) commandoline: en dan heb je je eerste html-pagina.
(20:32:09) commandoline: Dat was het voor vandaag, ik hoop dat het bevalt.
(20:32:31) commandoline: Als er interesse is, wil ik in een volgende workshop wel ingaan op een aantal andere html-elementen en CSS.
(20:32:59) commandoline: want die heb je voor een complete website wel nodig.
(20:33:36) commandoline: maar dat zien jullie dan wel weer via de gebruikelijke kanalen.
(20:34:14) leoquant: <hannie> Misschien is het iets om bij een vervolgles degenen die geoefend hebben vragen op mwanzo te posten?
(20:36:27) commandoline: zeker!Vragen op het einde:
(20:34:51) MichaelTel: bestaat <i> en <u> nog wel? (20:35:02) commandoline: ehm, <i> kan je nabootsen met <em> (20:35:04) commandoline: (emphasis) (20:35:15) commandoline: <u> kan alleen met css (20:35:23) hannie: bold is strong geworden? Wordt <b> wel herkend? (20:35:28) commandoline: maar sowieso moet je voor stijl niet in html bezig zijn. (20:35:51) commandoline: hannie: het werkt prima, maar <em> en <strong> zijn meer structuurelementen (20:36:00) commandoline: terwjil <b> en <i> stijlelementen zijn (20:36:10) commandoline: en stijl kan je écht beter met CSS doen
(20:37:43) hannie: Je ontwerpt dus de stuctuur in HTML en vervolgens doe je de opmaak via CSS? (20:37:52) commandoline: hannie: Tegenwoordig wel ja. (20:38:05) commandoline: Wat mij betreft mogen ze de M van markup schrappen :P (20:38:11) hannie: ah, ik snap 'm