En enkel genomg奪ng hur du kan skapa en enkel webbsidesdesign med hj辰lp av html och grundl辰ggande css. G奪r igenom fr奪n grunden, utg奪r fr奪n att du skriver koden sj辰lv. Kr辰ver minimal, men viss f旦rkunskap.
Dokumen ini membahas analisis rasio keuangan PT Siantar Top Tbk dari 2009 hingga 2012, mencakup likuiditas, solvabilitas, dan profitabilitas, serta perbandingan kinerja dengan rata-rata industri. Kinerja perusahaan dalam memenuhi kewajiban jangka pendek tergolong buruk, meskipun dalam beberapa aspek seperti penagihan piutang, kinerjanya menunjukkan perbaikan. Perusahaan juga mengalami fluktuasi dalam kemampuan membayar bunga seiring dengan pertumbuhan dan penambahan utang.
This line graph shows the number of cars sold each month from March to August 2011. The number of cars sold was highest in March at 120, and then declined each month until July, which had the lowest number of cars sold at 40. The number of cars sold increased slightly to 60 in August.
Tugas laporan proyek membahas langkah-langkah pembuatan aplikasi menghitung luas trapesium menggunakan visual basic 6.0, mulai dari instalasi VB6, pengaturan form dan komponen, penulisan kode program, penyimpanan, dan ekspor menjadi file exe.
This document discusses large scale computing with MapReduce. It provides background on the growth of digital data, noting that by 2020 there will be over 5,200 GB of data for every person on Earth. It introduces MapReduce as a programming model for processing large datasets in a distributed manner, describing the key aspects of Map and Reduce functions. Examples of MapReduce jobs are also provided, such as counting URL access frequencies and generating a reverse web link graph.
The document summarizes the Indian liquor industry, which is divided into Indian Made Foreign Liquor and country liquor. It has grown significantly from 1999-2000 and is regulated by excise laws and licensing at the state level. It discusses how liquor companies use surrogate advertising like branded water and sodas to promote their products, since direct advertising is banned, exploiting a loophole through satellite channels. It observes the need for clearer guidelines from the government to control such surrogate advertising.
Dokumen ini membahas sistem koloid, termasuk pengertian, klasifikasi, dan jenis-jenis koloid serta penerapannya dalam kehidupan sehari-hari. Sistem koloid diuraikan dengan cara mengelompokkan larutan sejati, koloid, dan suspensi berdasarkan sifat-sifatnya, serta memberikan contoh dari masing-masing kategori. Terdapat juga perbandingan antara larutan, koloid, dan suspensi beserta komponen penyusunnya.
Tugas laporan proyek membahas langkah-langkah pembuatan aplikasi menghitung luas trapesium menggunakan visual basic 6.0, mulai dari instalasi VB6, pengaturan form dan komponen, penulisan kode program, penyimpanan, dan ekspor menjadi file exe.
This document discusses large scale computing with MapReduce. It provides background on the growth of digital data, noting that by 2020 there will be over 5,200 GB of data for every person on Earth. It introduces MapReduce as a programming model for processing large datasets in a distributed manner, describing the key aspects of Map and Reduce functions. Examples of MapReduce jobs are also provided, such as counting URL access frequencies and generating a reverse web link graph.
The document summarizes the Indian liquor industry, which is divided into Indian Made Foreign Liquor and country liquor. It has grown significantly from 1999-2000 and is regulated by excise laws and licensing at the state level. It discusses how liquor companies use surrogate advertising like branded water and sodas to promote their products, since direct advertising is banned, exploiting a loophole through satellite channels. It observes the need for clearer guidelines from the government to control such surrogate advertising.
Dokumen ini membahas sistem koloid, termasuk pengertian, klasifikasi, dan jenis-jenis koloid serta penerapannya dalam kehidupan sehari-hari. Sistem koloid diuraikan dengan cara mengelompokkan larutan sejati, koloid, dan suspensi berdasarkan sifat-sifatnya, serta memberikan contoh dari masing-masing kategori. Terdapat juga perbandingan antara larutan, koloid, dan suspensi beserta komponen penyusunnya.
1. CSS layouts, en kort repris
Idag:
Html kod och stylesheets
Css selektorer
Document flow
Boxmodellen
Float
2. CSS layouts
Ta en design fr奪n n辰tet
Kolla t.ex. (http://www.code-sucks.com/css%20layouts/)
Klipp och Klistra och Vips har du en sida..
Men hur fungerar koden? Hur fungerar en enkel css-layout?
Idag skall vi unders旦ka detta genom att h辰mta kod p奪 n辰tet och
analysera denna.
Bra att ha denna genomg奪ng i fall man r奪kar gl旦mma hur man g旦r.
4. F旦rst unders旦ker vi html
koden
Taggarna som ger sidans layout finns i body.
<div> taggar anv辰nds att skapa layouten.
En div anv辰nds som wrapper och inneh奪ller alla de andra.
Alla div-taggarna har unikt id.
L辰nkat stylesheet.
5. Html utan style sheet
Den stil som anv辰nds p奪 html-sidan finns i en annan fil och
l辰nkas i <head> taggen.
<link rel="stylesheet" type="text/css" href="main.css" />
Attributet href talar om var stil (css) filen finns. I detta fall I
samma mapp som din html-sida. Filnamnet m奪ste inneh奪lla
fil辰ndelsen .css
Vad h辰nder om man tar bort l辰nken?
all layout
finns i css-
filen!
8. Css-selektorer
Med en css-selektor v辰ljer man ut vilka html-element som skall ha
en viss style.
N辰r 辰r de b辰ttre att anv辰nda css-klasser 辰n id?
9. Css-filen (start)
I b旦rjan av css-filen skrivs generella regler som skall g辰lla
旦verallt.
Med selektorn * v辰ljer man ut alla element p奪 sidan och i detta fall
s辰tts marginal och padding till noll.
Med selektorn body v辰ljer man ut allt inneh奪ll i taggen <body>.
H辰r s辰tts font, storlek och f辰rg p奪 texten.
10. Css-filen (#wrapper)
Syftet med <div> taggen som har id=wrapper 辰r att centrera
sidans inneh奪ll. Kom ih奪g att alla andra <div> taggar ligger inuti
wrapper.
Med selektorn #wrapper v辰ljer man ut <div> - taggen som har
id=wrapper
H辰r m奪ste man best辰mma bredden p奪 det inneh奪ll man vill visa
p奪 sidan. Bredden skall vara mindre 辰n uppl旦sningen p奪
anv辰ndarnas sk辰rmar som ofta 辰r 1024px. I detta fall valdes
width: 922px
Sidan centreras med margin : 0 auto;
Detta 辰r kortkod f旦r att skriva, margin-left : auto; margin-right :
auto
11. Css-filen (#header)
<div> taggen med id=header 辰r placerad l辰ngst upp inuti wrapper.
I denna <div> brukar man l辰gga sidans titel med <h1> eller <h2>
taggar.
En <div> 辰r av typen block vilket inneb辰r att den automatiskt f奪r
den h旦jd som kr辰vs f旦r att visa inneh奪llet. Bredden best辰ms av
tillg辰ngligt utrymme dvs. den blir s奪 bred som den kan bli om
inte bredd anges.
Kom ih奪g att <div> taggar m奪ste fyllas med lite text f旦r att man
skall f奪 reda p奪 hur de ser ut p奪 sidan.
12. Html - document flow
En html sida 辰r uppbyggd av element som f旦ljer efter varandra i
tur och ordning. Det 辰r detta som man menar med document flow.
Elementen p奪 sidan kan vara av typen inline eller block.
Till blockelement r辰knas de element som staplas p奪 varandra
"by default", dvs utan att du beh旦ver 辰ndra p奪 n奪gra inst辰llningar.
Anv辰nder automatiskt allt tillg辰ngligt utrymme och anv辰nder
radbrytning f旦re och efter.
Ett element som 辰r inline 辰r med den svenska 旦vers辰ttningen "p奪
rad". Om ett inline-element placeras direkt efter ett annat element
s奪 kommer det att l辰gga sig omedelbart efter detta. Till inline-
element h旦r exempelvis bilder <img> och l辰nkar <a>. Ett inline
element tar bara upp den plats som beh旦vs och ger inga
radbrytningar.
13. Css display:
Man kan f奪 ett element att byta hur det visas med css egenskapen
display. Se exemplet nedan d辰r <p> som 辰r ett block element f奪s att
visas som ett inline element.
p{
display: inline;
}
De viktigaste v辰rden f旦r display: 辰r block, inline och inline-block.
Inline-block 辰r en specialare som g旦r att flera blocks kan l辰ggas p奪
samma rad utan radbrytningar.
14. Boxmodel
margin:, padding:, border:
Allt som du kan st辰lla in: Att t辰nka p奪:
Collapsable margins =
Om tv奪 boxar med
marginaler finns bredvid
varandra adderas inte
marginalerna. I st辰llet
anv辰nds den st旦rsta.
En box med noll marginal
som inneh奪ller ett
element med marginal
kan ibland f奪 child-
elementets marginal.
15. Css-filen (#leftcolumn)
<div> taggen med id=leftcolumn 辰r placerad under header
l辰ngst till v辰nster.
H辰r brukar man ofta hitta en navigeringsmeny eller i alla fall n奪gra
l辰nkar.
Man anv辰nder float: left f旦r att f奪 <div> taggen att placera sig
l辰ngst till v辰nster.
Man f奪r inte gl旦mma att s辰tta bredden h辰r. I vanliga fall ca en
femtedel av bredden inuti wrapper.
16. Css float:
Med float 辰r det m旦jligt att
placera boxar till h旦ger
eller v辰nster i det
tillg辰ngliga utrymmet.
Texten fl旦dar runt boxarna.
(text wrap)
Floats kan anv辰ndas
f旦r css-layout som i
v奪rt exempel.
17. Css-filen (#rightcolumn)
<div> taggen med id=rightcolumn 辰r placerad under header
l辰ngst till v辰nster. H辰r brukar sidans inneh奪ll finnas
Man anv辰nder float: right f旦r att f奪 <div> taggen att placera sig
l辰ngst till h旦ger.
H辰r kan man f奪 trixa lite innan man f奪r bredden r辰tt. Vid f旦r stor
bredd s奪 l辰ggs boxen p奪 ny rad. F旦r liten s奪 ser inte marginalerna
snygga ut.
18. #footer
Till sist har vi #footer som 辰r placerad l辰ngst ned p奪 sidan. H辰r
brukar man hitta loggor och copyright meddelanden.
F旦r att vara s辰ker p奪 att #footer hamnar l辰ngst ner p奪 sidan s奪
anv辰nds clear: both vilket betyder att inga andra element f奪r
finnas varken till v辰nster eller h旦ger.
19. Att fundera p奪:
Finns det n奪gra problem med s辰tta viss h旦jd och bredd p奪
elementen i layouten? (fixed-with, fixed-height)
I s奪 fall vilka?
20. Att l辰sa:
Mallar f旦r layout:
http://www.code-sucks.com/css%20layouts/
http://www.maxdesign.com.au/articles/css-layouts/
Teori:
http://www.webdesignskolan.se/css-layout/css_layout.php
http://www.webdesignskolan.se/css_position/css_position.php#boxgr
und
http://www.mandalatv.net/itp/drivebys/css/
http://css-tricks.com/all-about-floats/
21. Uppgifter
H辰mta hem en valfri css-mall fr奪n http://www.code-
sucks.com/css%20layouts/
1. L辰s igenom koden f旦r html och css.
2. Finns det on旦diga css properties att ta bort? Ta bort dem och
testa vad som h辰nder!
3. L辰gg till 5 l辰nkar (<a>) p奪 rad i en horisontell box (header kanske)
4. L辰gg till 5 l辰nkar (<a>) under varandra i en vertikal box (nav
kanske)
5. Vad h辰nder om man fyller n奪gon box med f旦r mycket text s奪 att all
text inte f奪r plats. Hur kan man fixa detta problem
6. Klura ut hur man kan l辰gga fyra nya boxar p奪 rad inuti t.ex.
content boxen. (se bild)
7. Klura ut hur man kan l辰gga 奪tta boxar i tv奪 rader med fyra boxar i
varje rad.
Editor's Notes
#3: Tips! L辰gg till dina egna talaranteckningar h辰r.
#5: Tips! L辰gg till dina egna talaranteckningar h辰r.
#10: Tips! L辰gg till dina egna talaranteckningar h辰r.
#11: Tips! L辰gg till dina egna talaranteckningar h辰r.
