Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduktion till Webbutveckling - F2

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Anton Tibblin Anton Tibblin
September 06, 2013
Education
350
0

Introduktion till Webbutveckling - F2

Avatar for Anton Tibblin

Anton Tibblin

September 06, 2013

More Decks by Anton Tibblin

See All by Anton Tibblin
HT22 - DA106A - Användbarhet (1)
Avatar for Anton Tibblin tibbelit
0
370
HT22 - DA106A - Ramverk
Avatar for Anton Tibblin tibbelit
0
300
HT22 - DA106A - JavaScript
Avatar for Anton Tibblin tibbelit
0
310
HT22 - DA106A - Responsiv webbutveckling
Avatar for Anton Tibblin tibbelit
0
360
HT22 - DA106A - Introduktion till CSS
Avatar for Anton Tibblin tibbelit
0
430
HT22 - DA106A - Formulär & tabeller
Avatar for Anton Tibblin tibbelit
0
400
HT22 - DA106A - Introduktion till HTML
Avatar for Anton Tibblin tibbelit
0
580
HT22 - DA106A - Kursintroduktion
Avatar for Anton Tibblin tibbelit
0
400
VT22 - DA395A - Storage, geolocation & media
Avatar for Anton Tibblin tibbelit
0
320

Other Decks in Education

See All in Education
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
210
現場最前線から教えるデータサイエンス１ -ITベンダーにおけるデータサイエンティスト-
Avatar for Hidetoshi Kawaguchi hidetoshikawaguchi
0
140
[2026前期火５] 論理学（京都大学文学部 前期 第9回）「正規化の停止性——ヒドラゲームによる証明」
Avatar for Shunsuke Yatabe yatabe
0
210
AI-Based Speaking Assessment of a Short-Term Study Abroad Program
Avatar for Ken Urano uranoken
0
390
【セーフィー】テクニカルライティング&コミュニケーション実践講座（26新卒エンジニア向け研修資料）
Avatar for 山崎麻衣子 ymzaki_m4
0
280
Visionary Initiative: Future Intelligence 「未来の知性と社会の礎を築く」｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
1k
Laura Wilson - The Quarterly PR Pivot
Avatar for Laura Wilson laurawilsonbseo1
1
380
2026年度春学期　統計学　第13回　不確かな測定の不確かさを測る ― 不偏分散とt分布 (2026. 6. 25)
Avatar for Akira Asano akiraasano
PRO
1
140
勾配ブースティングと決定木の話 / gradient boosting and decision trees
Avatar for kaityo256 kaityo256
PRO
7
1.7k
Case Studies and Future Research - Lecture 12 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
210
DECADE_ゴルフ_コースマネジメント完全ガイド.pdf
Avatar for Takashi Ozeki ozekinote
0
130
Πλουτοκρατία: Η Τυραννία του Μαμμωνά και η Μεταανθρώπινη Δουλεία
Avatar for Amethystos amethyst1
0
280

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
200
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
9.9k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
430
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
230

Transcript

  1. HTML En första introduktion

  2. Praktiska färdigheter http://joelglovier.com/img/wallpaper/power-3.jpg

  3. Hur fungerar det? Internet Klient Klient Server

  4. Resultat • En webbläsare visar oss en webbsida efter att

    ha renderat ett HTML-dokument

  5. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet

    Utformning Struktur Innehåll

  6. Element? • Det finns olika element som representerar olika innehåll,

    t.ex. rubriker, paragrafer, listor m.m. • Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll som finns mellan dessa taggar tilldelas elementets formatiering. • Kan även ha attribut

  7. HTML som märkspråk

  8. Ett HTML-dokuments struktur <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

    charset=utf-8"> <title>Min sida</title> </head> <body> <!-- Här kommer innehåll som visas för användaren ligga --> </body> </html> Element som ingår i ett HTML-dokument: - <html>, rotelementet - <head>, dokumenthuvud (info om dokumentet) - <title>, dokukmentets titel - <body>, dokumentets innehåll

  9. Exempel på HTML-struktur Text-editor Webbläsare

  10. HTML-dokumentet i helhet

  11. En webbsida • Webbsida: - Vad webbläsaren visar genom att

    rendera ett HTML-dokument • HTML-dokument: - Innehåll uppmärkt enligt HTML • HTML-fil: - Ett HTML-dokument sparat i en text-fil

  12. Ett HTML-dokument • En serie nästlade element – Vars ordning

    avgör strukturen – Och vars typ och egenskaper beskriver innehållet • Kan representeras med ett dokumentträd

  13. Vad är ett element • Komponent med vilka ett HTML-dokument

    är uppbyggda – Är av en viss typ (elementets namn) – Kan ha egenskaper (attribut) och/eller innehåll • Definieras med taggar
  14. None
  15. None

  16. METADATA Data om data

  17. Metadata • Beskriver vilket innehåll som finns på HTML-sidan •

    Det kan vara saker som: - Sidans titel - Vilken teckenkodning som används - Vilket språk sidan är på - Vilka författare som gjort sidan - Funktion & utseende på sidan • Detta skrivs inom <head>-taggen och berör hela dokumentet.

  18. Metadata, exempel

  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None

  28. DEMO Min första webbsida!