Presentation laddar. Vänta.

Presentation laddar. Vänta.

HTML – vad är det och varför ska vi använda det Och vad är XHTML.

Liknande presentationer


En presentation över ämnet: "HTML – vad är det och varför ska vi använda det Och vad är XHTML."— Presentationens avskrift:

1 HTML – vad är det och varför ska vi använda det Och vad är XHTML

2 HTML •Markeringsspråk (MarkUp Language) - strukturerar dokument för Webben (World Wide Web) •Dokumentet delas upp i komponenter med hjälp av ”element” eller taggar – starttaggar och sluttaggar • Detta är ett stycke text • Detta är en rubrik – troligen med stor font

3 Försök inte att göra ett snyggt HTML-dokument. •HTML beskriver bara strukturen •Utseendet styrs i ett separat style- dokument – en.CSS-fil •Det är browsern, skärmens upplösning och CSS-filen som slutligen bestämmer hur ditt dokument ser ut •Med Javascript styr du vad som händer

4 HTML4 •HTML 4 publicerades Den finns i tre versioner •HTML 4.0 strict – vilken enbart stödjer strukturella element – utseendet läggs helt och hållet i stilmallar (CSS) •HTML 4.0 transitional eller ”loose” innehåller element som på sikt kommer att avvecklas •HTML 4.0 frameset – tillåter layout genom att sidan delas upp i frames

5 XHTML – lite fuffare/lite enklare •XHTML - Extensible HyperText Markup Language •I XHTML måste –man skriva alla elementnamn och attributnamn med gemener, –man alltid använda sluttaggar, eller –man sätta citationstecken eller apostrofer runt alla attributvärden. •XHTML kan kombineras med CSS och JavaScript •XHTML skapades genom att man översatte de tre DTD:erna (Document Type Definition) i HTML 4.01 från SGML till XML. •Man måste inte kunna XML för att kunna använda XHTML

6 XHTML dialekter •XHTML 1.0. publicerad januari 2000 och innehåller tre dialekter precis som HTML 4 - Transitional, Frameset och Strict •XHTML Basic. publicerad december 2000 – avsedd som en minimal uppsättning av element för användning i exempelvis •XHTML 1.1. publicerad i maj 2001 – är i stort sett samma sak som XHTML 1.0 Strict. Här finns alltså bara en variant - Strict

7 VÅR FILOSOFI 1.Vi jobbar med XHTML Strict 2.Vi använder HTML- koden enbart för strukturering av dokumentet – inte för formgivning 3.Det är enkelt och kul med HTML

8

9 Notepad2 •Gratis och bra

10 CoffeeCupHTML – en bland många

11 PINSAMT!

12

13 HTML-kod genererad av Word blir lätt lite grötig

14 Dreamweaver INTE så här

15 Dreamweaver

16

17 Designview

18 Codeview

19 Split-view

20 Några HTML-skolor bland många •En fullständig beskrivning av standarden för HTML 4 (4.01) hittar du hos W3C Consortiet. för HTML 4 (4.01) •http://www.w3schools.com/xhtml/http://www.w3schools.com/xhtml/ •http://www.echoecho.com/html.htmhttp://www.echoecho.com/html.htm •http://learningforlife.fsu.edu/webmaster/ref erences/xhtml/tags/http://learningforlife.fsu.edu/webmaster/ref erences/xhtml/tags/ •http://vonpepel.com/ref/html/index.htmlhttp://vonpepel.com/ref/html/index.html •http://www.tiger.se/dok/xhtml.htmlhttp://www.tiger.se/dok/xhtml.html

21 XHTML – Dokumentets grundstruktur Body - head

22 Grundläggande dokument Basdokument Hello world

23 XML version •Deklarationen •Skall alltid placeras överst i dokumentet före alla andra taggar

24 XHTML version •Anger vilken standard som dokumentet följer och var man kan hitta denna standard

25 HTML - taggen •Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML – dokumentet omgivet av starttaggen och sluttaggen •HTML – taggen innesluter taggarna … … • •HTML- taggen kan ha språkattribut •XMLNS är referens till Extended Markup Language Name Space

26 HEAD •Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation – titel, sökord, författarnamn med mera •Mellan body-taggarna finns det egentliga dokumentet

27 Ett mycket enkelt exempel

28 Validering

29 Lyckad validering ger en ikon som pris

30 En miss- lyckad vali- dering Samma fil – Vad är skillna-den?

31 HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas av webbläsaren.

32 Head •Ligger alltid under taggen •Mellan starttaggen och sluttaggen kan elementen –base –link –meta –script –style och –title •finnas

33 BASE •Med elementet kan man ange en basadress. •Bilden som finns på adress ”http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/bil.jpg” •Kan enklare hittas med hjälp av basadressen ”http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/” och filnamnet ”bil.jpg”

34 Exempel - base Elementet BASE Titta en bil Valid XHTML 1.0 Strict

35 Link •Elementet link används för att referera till externa resurser •Det kan finnas flera Link-element i ett html-dokument •En vanlig användning är att ge en referens till.css filer d.v.s filer som information om hur dokumentet skall se ut på skärmen

36 LINK – ett exempel • • • • Elementet LINK • • MIN BIL • • Titta en bil •

37 LINK – grundläggande Attribut •href – specificerar var resursen finns - href="stajl.css" –Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. •Media – specificerar målmedium – screen är det som gäller om ingenting anges (default) - media="screen" –andra media är tty, tv, projection, handheld, print, braille, aural and all. •type anger mediatyp – type="text/css" –Det kan exempelvis vara text/css eller text/javascript.

38 LINK – ett exempel • • • • Elementet LINK • • MIN BIL • • Titta en bil •

39 META •Meta elementet används för att specificera data kring dokumentet – vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera •KEYWORDS – nyckelord som kan användas av sökmotorer •AUTHOR - författarnamn •DESCRIPTION – kort beskrivning – visas av sökmotorn som sammanfattning av dokumentet •DISTRIBUTION - specificerar om dokumentet är globalt eller regionalt

40 Meta – exempel •

41 Meta - exempel •

42 META-ELEMENT …

43 Dublin Core • •- •The Elements •Contributor, coverage, creator, date, description, format, identifier, language, publisher, relation, rights, source. Subject, title, type

44 Script och Style •Elementet Style används för att bädda in information om exempelvis fonter, färger, marginaler e.t.c. Denna information bör läggas i ett separat dokument.css •Elementet Script används för att bädda in script som styr beteende om sidan – detta behandlas inte i detta sammanhang

45 Så här ser en CSS-fil ut

46 Title •Elementet Title används för att identifiera dokumentet – titeln brukar visas övers i det fönster där dokumentet visas • XHTML – Title Tag •Det får bara finnas en title-tag i dokumentet

47 TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML-dokument är text – brödtext, rubriker, avgränsande linjer

48 SAMMANfattning •Det här avsnittet handlar om – brödtexten – till rubriker av olika dignitet – ny rad utan att skapa ett nytt stycke –Speciella tecken % & –Förstärkning och

49 •P markerar ett stycke (paragraph) I stycket kan det finnas text och bilder samt inlinekod •P används för att strukturera texten – att dela upp den i stycken – man skall inte användas för att formge dokumentet. Detta skall istället göra i ett separat style-dokument •Webbläsarna brukar lämna en tom rad mellan dokumentets stycken •Får finnas innuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH

50 och •Den text som skrivs in mellan starttaggen och sluttaggen betraktas som ett flöde av asciitecken – de radbrytningar som du skriver i editorn kommer inte att visas i webbläsaren. •Extra mellanslag och radbrytningar måste markeras med taggen för radbrytning eller för mellanslag

51 , och ä Alternativ 1: Titta en bil Den är jättefin Alternativ 2: Titta en bil den är jättefin

52 Andra specialtecken P-ELEMENT ¢ cent ± plus-minus © copy µ mikro £ pund MER:

53 - Rubriker •Rubriker finns av sex ”storlekar” Normalt är störst och minst, men det styr du i ditt stylesheet Rubrik 1 Rubrik 2 Rubrik 3 Rubrik 4 Rubrik 5 Rubrik 6

54 Att förstärka delar av texten med och … Detta är en himla rolig historia: - har du julgransfot - ja de har jag - hur får du då på dig byxorna … …

55 Citat och •Att markera citat i sin HTML-kod är att sätt att underlätt enhetlig formattering samt att underlätta för synskadade att rätt uppfatta texten •De element som används är blockquote och q

56 Citat – ett exempel Om man Googlar på Roliga citat så kan man hitta följande om Bill Gates 640 kB borde vara tillräckigt för vem som helst och det kan man ju tyckas vara roligt så här i efterhand

57 Ytterligare element för logisk formattering definition - tjur=kopappa kod - u=sin(2*pi*200*t exempel - exempel tangentbord - knatter knatter knatter variabel - svaret=5 citat - two bee or not two bee en förkortning - t.ex. akronym - XHTML

58 Addresser Kontaktperson för XHTML- föreningen Eva Andersson Skogsstigen Umeå

59 Preformatterad text Detta stycke är oformatterat och omgivet bara av p- taggarna. Läsaren kommer inte att bry sig om radbrytningar om det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör Detta block kommer att vara maximalt 20 tecken brett och radbrytningarna kommer att finnas kvarom det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör

60 Div och span är Containrar som används tillsmmans med.CSS Div and span ELEMENT asd ssdlk ss sfk jkk aj s asd ssdlk ss sfk jkk aj s asd ssdlk ss sfk jkk aj s asd ssdlk ss sfk jkk aj s body { background-color: #def; margin-left: 30px; margin-top: 20px; } p span {color: green}.kontainer1 {font-family: verdana, arial, sans-serif; color: black;}.kontainer2 {margin-left: 20px;color: yellow;color: blue;}.kontainer3 {margin-left: 30px;color: green;}

61 Span Employee Profile h1 span {color: red} p span {color: green} John Smith Is Employee Of The Month John Smith has been a Project Manager for 10 years.

62 ATT STYRA UTSEENDE HOS TEXTEN Det finns ett antal taggar som vi inte ska använda

63 HTML – används för logisk formatering inte för utseende •I HTML-dokumentet skall du formattera logiskt –Dessa ord ska framhävas –Detta är en tabell –Detta är en länk –Detta är en rubrik •MEN du ska inte använda HTML för att styra utseendet hos sidan – du ska inte ange kursiv stil, stilstorlek eller font i HTML – Lämna detta till stilmallen – CSS-dokumentet

64 • Formattering som vi inte ska använda • b (fet stil- andra raden) • •ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg • sdkl fjöglksdfjgsldfkjgöslgk • • big - andra raden • •ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg • sdkl fjöglksdfjgsldfkjgöslgk • • i - kursiv stil - andra raden • •ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg • sdkl fjöglksdfjgsldfkjgöslgk • • small - andra raden • •ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg • sdkl fjöglksdfjgsldfkjgöslgk • • sub - delar av raden • •fjöglksdfjgs sdkl lgk ldfkjgös • • sup - delar av raden • •fjöglksdfjgs sdkl lgk ldfkjgös • • tt - tele type - andra halvan av raden • •ldf lsdfjk lf gslf slfk • sdkl fjglksdfjgösldfkjgöslgk •

65 ATT STYRA SIDAN STRUKTUR MED FRAMES Vi ska inte använda frames – men det kan ju vara kul att veta vad det är Styr utseendet i styledokumentet istället

66 Så här ser index – dokumentet ut i en frames-struktur

67 Och så här blir resultatet

68 ELLER SÅ HÄR

69 EXEMPEL •Om du börjar titta på HTML-sidor med dina nya kunskaper kommer du att hitta många konstruktioner som bygger på frames. •Ett enkelt exempel hittar du på •http://www.tfe.umu.se/courses/elektro/html /http://www.tfe.umu.se/courses/elektro/html /

70 Validera koden i dina dokument Om du fått ditt dokument genom validatorn så fungerar det i alla läsare – och om inte så är det inte ditt fel!

71 •Skriv in filnamn och tryck på check

72 Ofta blir det ganska många fel

73 Sen blir det rätt •Och då får man medalj

74 LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa mellan dokument

75 •En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster •Länken består av –en startpunkt – ett ankare –Ett mål – en target och –En destination •När du klickar på länken kommer du att flyttas till en annan plats –en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mail- hanterare.

76 Tre varianter av länkar • • Telefonlista i separat dokument • •Telefonlista i nytt fönster • • Telefonlista i detta dokument • lsd las dlakjs dlad las la lasjd laksj lask lj d flaks dlasj dlaskjd lasj la dlaj dlasd laksdj lksdjlksdjalksd jasklj dlk d • • - Anders Andersson • - Bertil Bertislsson • - Caesar caesarsson •

77 Tre andra typer av länkar och här dyker det uppe en bild Specialtecken Skicka mail till Nisse å äö -->

78 ATT SKAPA Listor Ibland kan det vara bra att strukturera sig lite

79 Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen

80 ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor

81 Så här ser grundstrukturen ut för en tabell Tabellrubrik kolumn rubrik 1 kolumn rubrik 2 cell 11 cell 12 cell 21 cell 22 cell 31 cell 32

82 •border –Anger bredden på ramen runt varje element – angivet i pixlar. •cellpadding –Anger hur mycket ”luft” det skall vara mellan cellens innehåll och ramen •cellspacing –Anger hur mycket luft det ska vara mellan ramen och nästa cell. •summary –En text som beskriver tabellens innehåll – texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. •width –Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger.

83

84 Border

85 Cellpadding

86 Cellspacing

87 Frame void: Inga sidor. above: Övers. below: Nederst. hsides: Uppe och nere. vsides: Höger och vänster. lhs: Vänster. rhs: Höger. box: Runt om. border: Runt om.

88 RULE –none: default –rows: –cols: –all: 

89 Basic tags

90 Char format

91 Output

92 Blocks

93 Links

94 Frames

95 Input

96 Lists

97 Images

98 Tables

99 Style

100 Meta Info

101 Programming

102


Ladda ner ppt "HTML – vad är det och varför ska vi använda det Och vad är XHTML."

Liknande presentationer


Google-annonser