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

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
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
590
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
輻射安全管理系統2.0暨輻防e++學園平台說明會
Avatar for NUSC aecrp
0
1.9k
[2026前期火５] 論理学（京都大学文学部 前期 第14回）「計算は、証明ではない——ハルシネーションを三層ハーモニーで診る」
Avatar for Shunsuke Yatabe yatabe
0
200
SFプロトタイピング体験（滝中学校）
Avatar for ISHIGO Yusuke yusk1450
PRO
0
120
sepm-training-sample
Avatar for 株式会社レヴィ levii
0
160
Estimating Group × Time Interaction in Scale-Transformed CEFR-J Self-Assessment Scores: A Case in Study-Abroad Research
Avatar for Ken Urano uranoken
1
190
AIってなぁに？
Avatar for 太田賢一 kenichiota0711
0
690
[2026前期火５] 論理学（京都大学文学部 前期 第6回）「かつとまたはの規則」
Avatar for Shunsuke Yatabe yatabe
0
480
プロポーザルを書く技術とアンチパターン/proposal-writing-and-antipatterns
Avatar for moriyuya moriyuya
13
3.7k
AIがコードを書く時代に、何を教えるのか / What Should We Teach in the Age of AI-Generated Code?
Avatar for ichiroc ichiroc
1
480
Geografía y fútbol. Atlanta. la megalópolis del fútbol
Avatar for Juan Martín Martín juanmartin2026
1
12k
エビデンスベースト英語教育入門：エビデンスは科学的知見（だけ）ではない，制度だ！
Avatar for TerasawaT terasawat
0
160
[2026前期火５] 論理学（京都大学文学部 前期 第10回）「論理学の哲学——意味とは何か（Tonkと推論主義）」
Avatar for Shunsuke Yatabe yatabe
0
260

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
800
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
480
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
270
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
260
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
250
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.8k
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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!