Bred kurs - Allt tekniskt om mediaproduktion på 10p
Ändringar efter förra årets kursutvärdering
Mer innehåll, ”tyngre” kurs
Mer praktiska övningar med laborationer etc
Moment
Grafisk teknik
Webproduktion och internet
Audioproduktion
Videoproduktion
Praktiskt
Flera föreläsningar ges tillsammas med kurs 2D1518 Audio-, Video och Multimediaproduktion.
”Egna” föreläsningar ges i P12
Datorlaborationer i datasalarna (bottenplanet)
Vissa laborationer i Haninge
Kort och konton
Examination
Obligatoriska laborationer
Frivilliga laborationer som ger bonus på tentan
Frivillig uppsatsuppgift som ger bonus på tentan
Tentamen
Loggbok
Vissa obligatoriska föreläsningar
Dagens föreläsning
Syfte
Ge er grunderna för att skapa och publicera websidor.
Mål
Lära ut grunderna i html (utan grafiska editorer)
Lära ut hur man bör skilja på innehåll och layout med hjälp av CSS
Visa på skillnaderna mellan ”det gamla” formatet html och ”det nya” formatet xhtml
Web - grundprinciper
Webben består i sin ursprungliga form av två huvudkomponenter.
http - Hypertext Transfer Protocol
Ett protokoll för att föra över små dokument över internet. Mer om detta om två föreläsningar
html - Hypertext Markup Languate
Ett ”märkspråk” för att koda hypertextdokument, dvs textdokument med länkar till andra textdokument
Märkspråk
Märkspråk är en familj av språk där olika informationselement omslutes av en ”tag” med en semantisk betydelse.
T.ex. A Midsummer Night’s Dream
Mängder med olika märkspråk finns med olika syften
Html för websidor
Wml för wap-sidor
SVG för vektorgrafik
SMIL för multimediapresentationer
JDF för ”job tickets”
Hello World
Först ett mycket enkelt exempel.
Element inleds med och avslutas med
Olika märkspråk har olika element
A Title
Hello World
Hierarkisk struktur
html head body title h1 A Title Hello World Elementinnehåll Textinnehåll
A Title
Hello World
Tomma element
De flesta element har ett innehåll, antingen elementinnehåll eller textinnehåll
Några element har dock inget innehåll, utan själva elementet har en betydelse i sig. Elementinnehåll
Tjohoo
Textinnehåll
Tjohoo
Tomt innehåll
,
eller kortformen
,
Attribut
Några element kan även ha ”attribut”, dvs någon information bunden till sig som beskriver/bestämmer ytterligare någon aspekt på elementet
Länkar till filer i samma filsystem där den aktiva websidan ligger kan vara antingen
relativa (utgående från den aktiva sidan) eller
absoluta (utgående från roten på filsystemet).
Länkar till externa webplatser är alltid absoluta
Relativa länkar
Relativa länkar utgår från den mapp där den aktiva filen ligger.
Filer i samma katalog anges med filnamn
samma katalog
Filer i underliggande kataloger anges med underkatalognamn/filnamn
underkatalog
Filer i överliggande katalog anges med ../filnamn
Absoluta länkar
Absoluta länkar kan ligga på den lokala webservern eller på en extern webserver.
Extern länk
extern
… samma länk refererad från en annan fil på www.nada.kth.se
absolut lokal
… och refererad som en relativ länk utgående från filen som ligger på http://www.nada.kth.se/kurser/kth/index.html
relativ
Bilder
Bilder infogas med elementet som har ett attribut src vars värde är en referens till en bildfil.
Extern bild
Lokal relativt länkad bild
Lokal absolut länkad bild
, och
Toppelementet heter (ett html-dokument (eller XML-dokument) kan endast ha ett toppelement)
Det har två, och exakt två barnelement: och
innehåller information om själva dokumentet, såsom titel och olika typer av metadata
innehåller själva innehållet: textstycken, bilder mm.
,
-
, </h2>
<p> används för stycken (paragraphs)
<p>Ett stycke</p>
<h1> till <h6> är olika rubriknivåer
<h1>En rubrik på nivå 1</h1>
<title> anväds för dokumenttiteln och är ett barnelement till <head>
<title>Rubriken
Tabeller
Tabeller används ofta i diverse sammanhang. Består huvudsakligen av tre sorters element
- själva tabellen
- table row
- table data, själva cellerna där data placeras
Rad 1, cell 1
Rad 2, cell 2
Rad 2, cell 1
Rad 2, cell 2
Svenska tecken
Som vanligt är inte stödet för icke-amerikanska tecken helt tillfredsställande.
Å, ä, ö kan lagras som å, ä och ö ifall själva filen använder teckenkodningen unicode
Annars kan de kodas ö å och liknande något kryptiska förkortningar.
Då siffror är svåra att komma ihåg finns även ett antal ”mnemoniska” förkortningar:
ö Ä å motsvarar ö, Ä och å
Lokal relativt länkad bild
Lokal absolut länkad bild
Comments