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

Introduktion till Webbutveckling - F5

Avatar for Anton Tibblin Anton Tibblin
September 17, 2013
Education
230
1

Introduktion till Webbutveckling - F5

Avatar for Anton Tibblin

Anton Tibblin

September 17, 2013

More Decks by Anton Tibblin

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

Other Decks in Education

See All in Education
自己紹介 / who-am-i
Avatar for Yohei Yasukawa yasulab
6
6.9k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
1.1k
0506
Avatar for cbtlibrary cbtlibrary
0
190
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
180
LinkedIn
Avatar for Matleena Laakso matleenalaakso
0
4.4k
Alumnote inc. Company Deck
Avatar for Alumnote yukinumata
1
20k
2026年度春学期　統計学　第3回　クロス集計と感度・特異度，データの可視化 (2026. 4. 23)
Avatar for Akira Asano akiraasano
PRO
0
150
AI進化史：LLMからAIエージェントへ
Avatar for MIKIO KUBO mickey_kubo
0
190
コミュニティを通じた_キャリア設計のススメ_20260424.pdf
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
320
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
12
16k
AIには考えられないことを考えられる人になるために
Avatar for IQBocchi iqbocchi
1
150
Gitがない時代 インターネットがない時代の 開発話
Avatar for sapi_kawahara sapi_kawahara
0
280

Featured

See All Featured
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
380
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
13k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.2k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
820
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k

Transcript

  1. LAYOUT MED CSS

  2. Frågor kring det vi gått igenom hittils? • HTML •

    Doctype <!doctype html> • Teckenuppsättning <meta charset=”utf-8”> • Taggar <h1>, <p>, <ul>, <li>, <i>, <b> • Tabeller <table><tr><td></td></tr></table> • Formulär <form action=”#” method=”get”> • CSS • Selektorer h1, .class, #id • Egenskaper font-size:12px; color:red;

  3. Översikt HTML-dokument Vad innehåller sidan? Metadata om sidan Sidans teckenkodning

    Sidans titel Sidans innehåll HTML, rotelementet

  4. Tabeller I webbläsaren

  5. Länkar Var länken leder Länk-element Länkens namn Extern länk Länk

    inom webbplatsen Intern länk

  6. Formulär

  7. CSS • Att formge en webbplats • Olika klädsel till

    samma innehåll • Hur hittar man det man vill ändra på?

  8. Boxar

  9. POSITIONERA SAKER

  10. Positionering • Static – Elementen visas i den ordning de

    står i HTML- dokumentet • Relative – Elementet visas i den ordning de står i HTML- dokumentet, men man kan lägga till avstånd upp/ner/höger/vänster • Fixed – Lägger sig fixerad på sidan i relation med webbläsarens storlek • Absolute – Lägger sig fixerad på sidan i relation till sitt förälder-elementet • Absolute/Fixed ger möjligheten att lägga element ”på varandra” genom egenskapen ”z-index”

  11. Demo positionering

  12. LAYOUT

  13. Hur skapar man en layout?

  14. Vi behöver alltså • Sidhuvud <header> • Navigation <nav> •

    Innehåll <div> • Sidfot <footer>

  15. Kan vara bra att ha… • En box (<div>) som

    omsluter hela sidan.

  16. Vad behöver vi veta? • Egenskapen ”float” • Gör så

    att man kan placera block-element bredvid varandra • Float:left; Flyttar elementet till vänster • Float:right; Flyttar elementet till höger

  17. Var börjar vi? • Demo!