HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.

En presentation över ämnet: "HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska."— Presentationens avskrift:

1 HTML - grunder

2 Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska program som Dreamweaver, Frontpage, etc, går även att använda och för vissa uppgifter rekommenderar jag också att man gör det, men man lär sig mest genom att inte förlita sig på sådana program. •Program som också kan behövs av webbdesigners: Photoshop (för komplex grafisk design) och Flash (för animeringar och ökad interaktivitet).

3 Grunder •Html baseras på taggar. De flesta taggar har både start och sluttagg. Exempel: •Starttagg: Sluttagg: •Grundformateringen ser ut så här: Innehåll •Vissa taggar, som och, har ingen sluttagg och därmed inget innehåll.

4 Ett html-dokuments grundstruktur •För att ett html-dokument ska vara korrekt formaterat MÅSTE det följa följande struktur: • Dokumentets titel Dokumentets innehåll •Skapa en mallfil med ovanstående! Använd den när ni börjar med varje ny html-fil.

5 Vad taggarna gör: • Detta är den mest grundläggande taggen och innehåller hela dokumentet. • Innehåller information som inte syns på själva sidan men som dock är viktig av andra anledningar. Här finns information för sökmotorer, länkning till css (som vi kommer att prata om längre fram) och script. I head finns också som ska innehålla sidans titel. Det som finns här är vad som syns i webbläsarens fönster. • är taggen som allt innehåll ska finnas inuti. Ingenting som ska synas på sidan får finnas utanför body

6 Ett enkelt exempel En väldigt enkel sida En enkel rubrik En enkel text skriven i en p-tagg. P står för Paragraph, alltså stycke, och är lämplig att använda för de flesta texter. Text kan också stå separat. Den här texten är formaterad med fetstil, genom taggen b (som bold).

7 Några enkla taggar och deras innebörd • används för att skriva ut text som hänger ihop. Ovan och under stycket finns lite mellanrum. En Väldigt enkel sida En enkel rubrik Här är text. Lite mer text... ytterligare lite text... Här har vi tre p-taggar. Men hur ser det ut utan dem? Här är text. Lite mer text... ytterligare lite text...

8 • Break Row används för att göra radbrytningar i text. Ingen sluttagg ska användas. •,, etc används för att göra rubriker. Sluttagg när rubriken är klar. • används för att infoga bilder. Används så här:. Här står src för ”source”. Ingen sluttagg ska användas. • skapar en tabell och innehåller: table row som delar upp tabellen i rader. Den innehåller i sin tur table data, som innehåller vad som ska finnas i cellen. •Textformateringstaggar: Fet stil ( ), kursiv ( ) och understruken ( ) finns också.

9 Exempel: Bilder och tabeller •LänkLänk Tabeller Rubrik Hejsan! 2 3 Hejsan igen 4 6