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
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
現場最前線から教えるデータサイエンス１ -ITベンダーにおけるデータサイエンティスト-
Avatar for Hidetoshi Kawaguchi hidetoshikawaguchi
0
140
[2026前期火５] 論理学（京都大学文学部 前期 第6回）「かつとまたはの規則」
Avatar for Shunsuke Yatabe yatabe
0
440
遊ぶかね欲しさの犯行（ルビ：労働）です
Avatar for ShirayanagiRyuji shirayanagiryuji
0
200
Course Review - Lecture 13 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.3k
Visionary Initiative: Future Intelligence — Laying the foundations for the future of science, intelligence, and society | Science Tokyo
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
170
2026年度春学期　統計学　第9回　確からしさを記述する ー 確率 (2026. 5. 28)
Avatar for Akira Asano akiraasano
PRO
0
160
2026年度春学期　統計学　第14回　分布についての仮説を検証する ― 仮説検定（１） (2026. 7. 2)
Avatar for Akira Asano akiraasano
PRO
0
120
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
1
1.1k
!コスパよくインターンに受かる方法！
Avatar for るりいろぼうや ruribou
1
310
Geografía y Fútbol: Chattanooga Geografía del Búnker de La Roja.
Avatar for Juan Martín Martín juanmartin2026
1
8.7k
Lectura 2 (PIT : Python Basico)
Avatar for Abraham Zamudio robintux
0
380
生成AI時代のエンジニア育成について考えてみた
Avatar for Daisuke Akagawa (Akasan) akasan
0
190

Featured

See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
390
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.4k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
560
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.2k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
230
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.7k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
220
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k

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!