Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HT14 - F5

Avatar for Anton Tibblin Anton Tibblin
September 17, 2014
Education
210
0

HT14 - F5

Avatar for Anton Tibblin

Anton Tibblin

September 17, 2014

More Decks by Anton Tibblin

See All by Anton Tibblin
HT22 - DA106A - Användbarhet (1)
Avatar for Anton Tibblin tibbelit
0
380
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
410
HT22 - DA106A - Introduktion till HTML
Avatar for Anton Tibblin tibbelit
0
590
HT22 - DA106A - Kursintroduktion
Avatar for Anton Tibblin tibbelit
0
400
VT22 - DA395A - Storage, geolocation & media
Avatar for Anton Tibblin tibbelit
0
330

Other Decks in Education

See All in Education
オンラインコミュニティ TRY部 体験マニュアル
Avatar for 田中洋輔（NPO法人 D.Live） ytapples613
0
370
Portable & Reproducible Research Environments in the Age of AI Agents
Avatar for Mai Nishimura denkiwakame
0
760
Comentario del plano urbano de Madrid hasta 1860 (1ª parte )
Avatar for Juan Martín Martín juanmartin2026
1
91k
Visionary Initiative: Materials-Positive Society — Evolving “Things,” empowering a positive society | Science Tokyo
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
280
Science Tokyo University for International Research Excellence scheme_April 2026
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
270
Quality Control of Crude Drugs
Avatar for Pawan Kumar Sahu pawan_pharm
0
160
2026年度春学期　統計学　第14回　分布についての仮説を検証する ― 仮説検定（１） (2026. 7. 2)
Avatar for Akira Asano akiraasano
PRO
0
150
DecisionesEjecutivasCrisis
Avatar for Mario OC mariooc
0
330
遊ぶかね欲しさの犯行（ルビ：労働）です
Avatar for ShirayanagiRyuji shirayanagiryuji
0
280
エビデンスベースト英語教育入門：エビデンスは科学的知見（だけ）ではない，制度だ！
Avatar for TerasawaT terasawat
0
210
AIってなぁに？
Avatar for 太田賢一 kenichiota0711
0
840
批判的応用言語学ワークショップ（2026-08-12 お茶の⽔⼥⼦⼤学）
Avatar for TerasawaT terasawat
0
200

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
330
Building an army of robots
Avatar for Kyle Neath kneath
307
46k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
530
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
3.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
530
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
300
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k

Transcript

  1. LAYOUT MED CSS

  2. Dagens föreläsning • Vad vi gått igenom hittills i kursen

    • Att designa en layout • Massor med demo!

  3. 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;

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

    Sidans titel Sidans innehåll HTML, rotelementet

  5. Tabeller I webbläsaren

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

    inom webbplatsen Intern länk

  7. Formulär

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

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

  9. Boxar

  10. POSITIONERA SAKER

  11. Positionering • Static • Relative • Fixed • Absolute •

    Absolute/Fixed ger möjligheten att lägga element ”på varandra” genom egenskapen ”z-index”

  12. Demo positionering

  13. LAYOUT

  14. Hur skapar man en layout?

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

    Innehåll <div> • Sidfot <footer>

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

    omsluter hela sidan.

  17. 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

  18. Var börjar vi? • Demo!