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

HT14 - F5

Avatar for Anton Tibblin Anton Tibblin
September 17, 2014
Education
200
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
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
プログラミング言語において文字列を複数行にわたって だらだらと記載するアレ
Avatar for sapi_kawahara sapi_kawahara
0
160
SL AMIGOS 教育格差と私たちの取り組み - スリランカの支援学校への支援プロジェクト：リシンドゥ リオ 氏 （別府溝部学園短期大学 ビジネス観光コース 留学生):2720 Japan O.K. ロータリーEクラブ2026年4月6日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
620
Catecismo 26 #2 - Do Credo; Introdução ao 1º artigo
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
120
【セーフィー】テクニカルライティング&コミュニケーション実践講座（26新卒エンジニア向け研修資料）
Avatar for 山崎麻衣子 ymzaki_m4
0
220
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
3.1k
0513
Avatar for cbtlibrary cbtlibrary
0
190
면접관 눈에 띄는 데이터 분석 포트폴리오 만드는 법 | 2026년 5월 세미나
Avatar for 데이터리안 datarian
0
710
0506
Avatar for cbtlibrary cbtlibrary
0
190
事業紹介資料（トレーナー養成講座）
Avatar for 須藤賢太郎 kentaro1981
0
450
Visionary Initiative: Future Intelligence 「未来の知性と社会の礎を築く」｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
340
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
12
16k
Course Review - Lecture 13 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.3k

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
360
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
340
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
580
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.6k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k

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!