Enkel HTML5 og CSS3 guide

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010

Hei alle sammen smil

Skal prøve her å lage en enkel guide med noe av de nye "tingen" som har kommet med HTML5 og CSS3

Guiden her kommet opp som et resultat fra en av brukeren på forumet her, der brukeren representerer en studentbedrift i Songdal. Tråden som er utgangspunkt for denne: http://hjemmeside.org/forum/hva-skal-gjores-bedre-757

Endret denne guiden slik at den også omfatter CSS siden både HTML og CSS går hånd i hanske. Dermed blir denne noe lengre enn hva jeg først tenkte.... men tro dette blir mye mere oversiktlig.

Litt om min bakgrunn, jeg har i flere år drive med dette på hobbybasis og syns det har vært artig å prøve å lære litt om dette. Dette førte til at jeg nå i høst begynte på et studie som kalles for: Spill og opplevelsesteknologi (3 årstudie). De senere år så har jeg vært mere "off" på dette emnet enn "on", så jeg betrakter meg selv som nybegynner på område siden mye er glemt. Målet mitt er todelt med denne guiden, lære andre det jeg kan og lære mere om emmnet selv.

En liten ting, jeg sliter med rettskriving. Så dersom det er fryktelig mye skriveleifer så er det bare å spørre om dere ikke skjønner hva jeg skriver.

 

Anbefalte linker:

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html5/default.asp

http://www.developphp.com/ Tilsvarende siden som denne siden men med mest fokus på Adobe Flash og ActionScript.

http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/ Kom over denne sånn plutselig, en guide som vinkler det mere inn på hvordan man bygger opp siden fra ide til et ferdig produkt.

Validator:

http://validator.w3.org/check

http://jigsaw.w3.org/css-validator/validator.html.en På denne må dere huske å klikke på "more options" og velge CSS3 ellers vil den sjekke CSS filen deres som om den skulle være CSS2.

Anbefalte bøker:

HTML & CSS Guiden av Geir Juul Aslaugberg, forlag: Vett & Viten http://www.vettviten.no

Dette er riktig nok ei bok om HTML4 og CSS2 men det meste som tas opp der er likt med HTML5, en annen fordel er at boken er på norsk og etter mitt syn meget enkel og følge.

HTML5 Multimedia Development Cookbook, av Dale Cruse og Lee Jordan, forlag  PACKT Publishing http://www.packtpub.com

Denne boken gir en grei innføring i det som er nytt med HTML5 og CSS3, men kan være noe hardt og følge dersom du ikke har den grunnelegende kunnskapen fra før.

Utganspunktet er å lage ei nettside som ser nesten lik ut som dette bildet:

Del-service en studentbedrift i Songdal

Hvorfor sier jeg nesten lik?

Jo fordi at her må man ta et valg.... Det er slik at nettsidene ofte ikke ser 100% lik ut avhening av hvilken nettleser du bruker. Det er mulig å få det til, i allefall borti mot 100%, men er det forsvarlig med tanke på ressursene du bruker på det.... Da tenker jeg spesielt på tidsbruken men også for dem som betaler for dette i kroner og ører. Så lenge brukeren av nettsiden vil få den samme opplevelsen av nettstedet enten om de bruker Internet Explorer, Firefox, Safari eller sitter på en PC, Mac, nettbrett eller smarttelefon. Målet mitt er at brukeren skal ha den samme opplevelsen og ikke 100% likt nettside.

 

Hvorfor skal vi bruke HTML5 og ikke HTML4?

Grunnen til dette kan være flere årsaker, men det jeg syns er viktig å påpeke er at HTML5 er den nye standarden innenfor HTML som snart blir en gyldig standard. Per i dag er HTML4 den gjeldene standarden, men stadig flere og flere legger siden over til HTML5. I tilegg til dette så er HTML5 bedre tilpasset, eller målet er at, det skal bli bedre tilpasset til den "nye" verden der brukerene av ei nettside bruker en rekke forskjellige enheter for å se nettsiden. Samtidg så åpner HTML5 opp for mere "dynamisk" innhold enn tidligere versjoner av HTML. Dynamisk blir vel kanskje et veil ord..... inneraktivt blir kanskje bedre, de av dere som har litt kjennskap fra HTML4 vil fort skjønne hva jeg mener når dere tar en nærmere titt på HTML5. Du kan f.eks. nå lage et eget bilde galleri bare med HTML og CSS som ikke bare blir like bra, men kanskje bedre enn alle disse bildegalleriene man tidligere har brukt PHP, JavaScript og/eller ActionScript til tidligere.

Kan ta med noen av de nye elementene i HTML5:

  1. <header> </header>
  2. <nav> </nav>
  3. <aside> </aside>
  4. <article> </article>
  5. <footer> </footer>

Dette vil mest sannsylig bli dem som blir brukt mest i fremtiden da disse erstatter tidligere HTML4 elementer som:

  1. <div id="header"> </div>
  2. <div id="nav"> </div>
  3. <div id="leftSide"> </div>
  4. <div id="content"> </div>
  5. <div id="footer"> </div>

Det som er viktig å si i denne forbindelse er at "div" elemetnet blir ikke borte men du slipper unna nå med å skrive mindre kode dersom du bruker disse nye elementene aktivt.

En annen ting som er verdt og merke seg er, deklarasjonen til nettleseren.

HTML5: <!DOCTYPE HTML>

HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Her er riktig nok eksemplet en deklarasjon til nettleseren på at nettsiden bruker XHTML og følger denne standarden "slavisk", men det fremhever poenget mitt..... mindre kode.

Å deklarere nettsiden for nettleserne er ganske enkelt å fortelle nettleseren hvilket "språk" er brukt på denne siden. Dette betyr ikke at du ikke kan bruke andre typer språk men er bare en "forenkling" for nettleseren.

En annen ting jeg bør nevne her er at som nybegynner så bør man alltid "validere" nettsiden sin. Dette er ikke bare for å luke ut elementære feil slik som å ha glemt en " eller >, men også for å kunne gi brukeren en mest mulig lik nettside både i opplevelse men også utsende. Når dette er sakt så er det slik at om du prøver å validere nettsider som du bruker til daglig vil du nok fort se at de fleste ikke validerer. Dette er dog ingen grunn for at dine nettsider ikke skal kunne gå gjennom en slik test. smil

CSS3

Her er det ikke så mye og si annet enn å ta en titt på denne siden:  http://www.w3schools.com/cssref/default.asp ser man i høyre kolonne her så får man en overiskt over når de forskjellige elementene kom (CSS1, CSS2 eller CSS3). 

Det som kan være verdt og merke seg i CSS3 er at man kan f.eks. nå benytte flere bakgrunnsbilder i CSS, tidligere var det kun lov til å bruke et bakgrunnsbilde for hvert element.

  1. body {
  2. background-image:url(img_flwr.gif),url(img_tree.gif);
  3. }

I tillegg til dette så kan man nå ha enkle animasjoner med hjelp av CSS3 på nettsiden.

  1. div {
  2. animation:mymove 5s infinite;
  3. -moz-animation:mymove 5s infinite; /* Firefox */
  4. -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
  5. }

Den siste tingen jeg vil fremmheve er den jeg bruker i dette eksemplet, avrundet hjørener på rammen rundt selve siden.

  1. div {
  2. border:2px solid;
  3. border-radius:25px;
  4. }

Så til selve kodingen av siden:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- link forteller nettleseren hvor den finner, i dette tilfellet, CSS dokumentet -->
  6. <!-- href brukes i dette tilfellet for å fortelle hvor CSS dokumentet ligger -->
  7. <!-- rel forteller at dette er et stilsett, type forteller hvilket stilsett-->
  8. <!-- media hvilken type enhet det gjelder for, mest vanlig er all, screen og print -->
  9. <!-- title er ganske enkelt navnet på stilsettet, som vises i nettleseren -->
  10. <!-- og det er viktig og skille mellom navnet på fila og hva du setter som navn -->
  11. <!-- for nettlesere. I dette tilfelle så kan brukeren velge stilsett i nettleseren -->
  12.  
  13. <link href="style.css" rel="stylesheet" type="text/css" media="all" title="normal" />
  14. <title>Hovedside | DelService UB</title>
  15. </head>
  16. <body>
  17. <header>
  18. Her setter man inn logo/slagord og evtuelt andre ting man skal ha i header delen.
  19. </header>
  20. <nav>
  21. Her setter man inn menyen og evtuelt andre ting man skal ha i nav delen.
  22. </nav>
  23. <aside id="leftSide">
  24. Her har jeg valgt å bruke id="lefside" fordi vi vill benytte denne to ganger med forskjellig plassering
  25. </aside>
  26. <article>
  27. <section>
  28. "article" bruker jeg her for å kunne "style" hvodedelen av siden i stede for <div id="content"> da siden vi tar utgangspunkt i har likt utsende av innholdet på siden.
  29. "section" bruker jeg her for blandt annet skille mellom artiklene som blir publisert på et senere tidspunkt, disse kan man også sette en "id" på slik at man f.eks. lett kan navigere opp/ned på siden.
  30. </section>
  31. </article>
  32. <aside id="rightSide">
  33. Samme som den andre "aside" bare at her bruker jeg id="rightSide" for plasseringen sin skyld.
  34. </aside>
  35. <footer>
  36. Nå er jeg ikke sikker på om denne er bevist utelatt eller ikke på det aktuelle nettstedet, men jeg har valgt å ta den med fordi at her kan vi ha noen korte opplysninger om hvordan man f.eks. kommer i kontakt med studentbedriften.
  37. </footer>
  38. </body>
  39. </html>

Det neste steget jeg vil er å nå bruke CSS for å "style" siden slik vi ønsker den skal være.

  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /* Selve kroppen til nettstedet. Her velger å følge det jeg har lest rundt på nett, sette margin og padding til 0. Dette er vist nok viktig å gjøre for å unngå en del problemer med div nettlesere. Samtidig setter jeg bredden på siden til 100% slik at den altid vil fylle skjermen uavhenig av hilken enhet brukern benytter for å lese nettsiden. */
  5.  
  6. html {
  7. width: 100%;
  8. margin: 0;
  9. padding: 0;
  10. }
  11.  
  12.  
  13. /* Er litt usikker på hvordan jeg skal forlkare dette..... men se for deg din egen kropp, huden er ddet ytterste laget og således kan vi si at html er det ytterste laget. body er også selve kroppen, men da mere "inni" eller "under" huden. HEr setter jeg nå uanset border til 1px tykk og med svart farge. Reduserer også bredden litt slik at vi faktisk får plass til border */
  14.  
  15. body {
  16. width: 99%;
  17. margin: 0;
  18. padding: 0;
  19. border: solid 1px: #000000;
  20. }
  21.  
  22.  
  23. /* Dette blir da hodet om man fortsetter tanken jeg har over. HEr setter jeg at den skal venstrestilles, i dette tilfellet er det ikke sikkert jeg trenger dette, men jeg gjør det automatiks for å ha bedre kontroll på hvor alle tingen på nettsiden skal være */
  24.  
  25. header {
  26. float: left;
  27. width: 100%;
  28. margin: 0;
  29. padding: 0;
  30. }
  31.  
  32.  
  33. /* Dette blir da halsen som vi styler. Igjen så velger jeg å sette float left slik at jeg har kontroll på hvor elementet er på siden. En annen ting som er verdt og merke seg er at både på header og nav setter jeg width til 100%, dette er ikke hundre % av nettsiden, men % tilgjengelig plass. Altås body er satt til 99% og jeg gir da både header og nav 100% av denne plassen. */
  34.  
  35. nav {
  36. float: left;
  37. width: 100%;
  38. margin: 0;
  39. padding: 0;
  40. }
  41.  
  42. /* dette blir da armene. Her bruker jeg aside kun til å sette standard verdier for både venstre og høyre side */
  43.  
  44. aside {
  45. margin: 0;
  46. padding: 0;
  47. }
  48.  
  49. /* dette blir da hvordan man ønsker venstre arm skal se ut alt som har KUN med venstre arm å gjøre settes inn her */
  50.  
  51. #leftSide {
  52. float: left;
  53. width: 15%;
  54. margin: 0;
  55. padding: 0;
  56. }
  57.  
  58. /* dette blir da hvordan man ønsker høyre arm skal se ut alt som har KUN med høyre arm å gjøre settes inn her */
  59.  
  60. #rightSide {
  61. float: left;
  62. width: 15%;
  63. margin: 0;
  64. padding: 0;
  65. }
  66.  
  67. /* dette magen/ryggen og her setter man alt som har med dette å gjøre. som dere ser velger jeg å bruke float left på både armene og magen. Det gjør jeg fordi at når nettleseren leser koden så leser den fra toppen og fra venstre mot høyre, dette er litt viktig og tenke på når du skal plasser elmenetne i HTML koden. En annen ting er å huske på at jeg gir dem her 15%, 70% og 15% av plassen som er tilgjengelig tilsammen blir dette 100%. Går man ut over hundre prosent her så kan man få mye rare resultater, men i enkelte tilfeller kan det faktisk være nødvending for å oppnå ønsket effekt. */
  68.  
  69. article {
  70. float: left;
  71. width: 70%;
  72. margin: 0;
  73. padding: 0;
  74. }
  75.  
  76. /* Dette er delen som bestemmer hvordan hver enkelt artikkel, post eller tråd skal se ut.... Altås det som blir publisert på siden. Disse trenger nødvendigvis ikke settes inn i en section, men det kan gjøre det enklere på et senere tidspunkt */
  77.  
  78. section {
  79. float: left;
  80. width: 100%; /* som nevnt tidliger gir denne delen maks plass av 70% som article har, her kan man redusere bredden for å få flere ved siden av hver andre. */
  81. margin: 0;
  82. padding: 0;
  83. }
  84.  
  85. /* helt til slutt har vi bena, denne delen blir vanligvis benyttet til copyright info og kontakt info */
  86.  
  87. footer {
  88. float: left;
  89. width: 100%;
  90. margin: 0;
  91. padding: 0;
  92. }

En liten snikk titt på hvordan det ser ut før jeg har gjort noe særlig med CSS filen.

Snik titt

Da har jeg en ny versjon av CSS filen,denne gangen tar jeg bort komentarene for å spare litt plass:

  1. @charset "utf-8";
  2.  
  3. html {
  4. width: 100%;
  5. margin: 0;
  6. padding: 0;
  7. background: #404040 url(bg.png) repeat-x;
  8. }
  9.  
  10. body {
  11. width: 100%;
  12. margin: 0;
  13. padding: 0;
  14. }
  15.  
  16. header {
  17. float: left;
  18. width: 100%;
  19. margin: 0;
  20. padding: 0;
  21. background-color: #cccccc;
  22. }
  23.  
  24. header img {
  25. width: 25%;
  26. height: 25%;
  27. }
  28.  
  29.  
  30. nav {
  31. float: left;
  32. width: 100%;
  33. margin: 0;
  34. padding: 0;
  35. background-color: #cccccc;
  36. }
  37.  
  38.  
  39. nav ul {
  40. list-style-type: none;
  41. margin-top: 0;
  42. margin-right: 0;
  43. margin-bottom: 0;
  44. margin-left: 0;
  45. padding: 0;
  46. overflow: hidden;
  47. background-color: #dddddd;
  48. }
  49.  
  50. nav li {
  51. float: left;
  52. }
  53.  
  54. nav a {
  55. display: block;
  56. width: auto;
  57. text-decoration: none;
  58. margin-top: 0;
  59. margin-right: 0;
  60. margin-bottom: 0;
  61. margin-left: 1em;
  62. padding: 0;
  63. background-color: #dddddd;
  64. }
  65.  
  66. aside {
  67. margin: 0;
  68. padding: 0;
  69. }
  70.  
  71. #leftSide {
  72. float: left;
  73. width: 14%;
  74. margin: 5px;
  75. padding: 5px;
  76. border: 1px solid;
  77. border-radius: 5px;
  78. border-color: #000000;
  79. }
  80.  
  81. #rightSide {
  82. float: left;
  83. width: 14%;
  84. margin: 5px;
  85. padding: 5px;
  86. border: 1px solid;
  87. border-radius: 5px;
  88. border-color: #000000;
  89. }
  90.  
  91. article {
  92. float: left;
  93. width: 68%;
  94. margin: 0;
  95. padding: 5px;
  96. }
  97.  
  98. section {
  99. float: left;
  100. width: 100%;
  101. margin: 0;
  102. padding: 0;
  103. }
  104.  
  105. footer {
  106. float: left;
  107. width: 100%;
  108. margin: 0;
  109. padding: 0;
  110. }

Setter inn en ny snik titt fra hvordan det nå ser ut:

Snik titt 2

Så da har jeg endelig gjort ferdig den endelige versjonen, den har jeg med vilje ikke laget 100% lik. Det er ikke fordi jeg ikke klarer det men for å gi dere et lite inntrykk på hvordan med noen enkle grep kan få ei siden, som etter mitt syn harmonerer bedre enn det som var utgangspunktet. Jeg understreket, mitt syn, det er ikke sikkert dere syns det..... smil

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link href="style.css" rel="stylesheet" type="text/css" media="all" title="normal" />
  6. <title>Hovedside | DelService UB</title>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <header>
  12. <a href="index.html"><img src="logo.png" alt="DelService Logo" /></a>
  13. </header>
  14.  
  15. <aside id="leftSide">
  16. <h1>Venstre side</h1>
  17. <p>Det som ønskes på denne siden settes inn her</p>
  18. </aside>
  19.  
  20. <nav>
  21. <span class="Apple-tab-span" style="white-space:pre"> </span> <ul>
  22. <span class="Apple-tab-span" style="white-space:pre"> </span> <li><a href="index.html">Hovedside</a></li>
  23. <li><a href="#">Tjenster</a></li>
  24. <li><a href="#">Referanser</a></li>
  25. <li><a href="#">Om oss</a></li>
  26. <li><a href="#">Kontakt oss</a></li>
  27. </ul>
  28. </nav>
  29.  
  30. <article>
  31. <section>
  32. <h1>Velkommen til DEL-service UB!</h1>
  33. <p>
  34. DEL-service UB er ei elevbedrift frå Sogndal vidaregåande skule. Me går fortida Vg2 Data og Elektronikk og me vil med denne bedrifta hjelpe oss sjølv og andre. Noko av det me driv med er å reparerer datamaskiner, brenne VHS til DVD, lage nettsider og halde LAN.
  35. </p>
  36. <p>
  37. Grunnen til at me har starta denne elevbedrifta er fordi det gjev oss mykje kunnskap som me treng vidare i utdanninga vår, og me vil tene pengar til å reise til Tyskland til verdas største elektronikkmesse. Messa heiter CeBIT og blir arrangert årleg i Hannover. På messa blir alt av gammalt og ny teknologi vist fram. Denne turen vil bli veldig lærerikt og viktig for utdanninga vår.
  38. </p>
  39. </section>
  40.  
  41. <section>
  42. <h2>En overskrift med H2</h2>
  43. <p>
  44. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus, diam eget fermentum porttitor, diam eros mattis eros, ac vestibulum nibh ipsum gravida risus. Phasellus at odio sem. Morbi et diam a est rhoncus rhoncus. Aliquam sit amet augue et augue sodales fermentum. Maecenas facilisis, justo in mattis iaculis, lectus sem pulvinar metus, ut malesuada ligula erat eget augue. Morbi sed lacus orci. Sed nec massa nunc. Vivamus et lorem sem. Cras id odio magna, ac facilisis arcu.
  45. </p>
  46. </section>
  47.  
  48. <section>
  49. <h3>En overskrift med H3</h3>
  50. <p>
  51. Maecenas iaculis vehicula pharetra. Nam eu mauris nec leo molestie viverra ac non metus. Integer convallis dui eget orci sodales lobortis. Morbi justo odio, lobortis eu pretium vel, convallis rutrum mauris. Nulla dictum dolor ut lorem bibendum tincidunt. Donec tempus bibendum vehicula. Duis hendrerit nisi at felis condimentum hendrerit. Vivamus porta, quam sed gravida hendrerit, erat nisl semper lacus, eu hendrerit nisl metus a nulla. Mauris auctor malesuada vestibulum. Fusce placerat, lacus sit amet sodales pellentesque, metus lacus posuere est, vitae tempus libero magna eget est. Ut faucibus felis sapien. Proin massa nisi, aliquet vitae tristique eu, mattis id diam. Donec id mi lacus. Pellentesque enim ipsum, varius eu aliquam non, semper a erat. Suspendisse quis neque dui, in scelerisque eros.
  52. </p>
  53. </section>
  54.  
  55. <section>
  56. <h4>En overskrift med H4</h4>
  57. <p>
  58. Etiam aliquet feugiat orci, blandit pellentesque nisi tempus non. In hac habitasse platea dictumst. Sed facilisis pellentesque massa eget malesuada. Aliquam quis dui ac urna vehicula commodo et vel diam. In eleifend scelerisque tellus, sit amet varius ante cursus at. Fusce quis suscipit justo. Quisque mi est, condimentum in varius eu, euismod id magna. Mauris ornare consectetur pretium. Nulla ornare dolor quis eros porta nec sollicitudin odio luctus. Aliquam justo erat, convallis mollis aliquet eu, feugiat id nunc. Sed placerat scelerisque sapien. Duis tristique consequat mauris, nec accumsan metus laoreet vel. Etiam leo augue, rhoncus ut lacinia eu, suscipit quis nisl.
  59. </p>
  60. </section>
  61.  
  62. <section>
  63. <h5>En overskrift med H5</h5>
  64. <p>
  65. In hac habitasse platea dictumst. Ut volutpat iaculis elit, quis rutrum nisl dictum a. Maecenas vel eros lacus, vel eleifend dui. Integer arcu justo, pellentesque in dignissim sed, eleifend at orci. Ut pellentesque consectetur eleifend. Quisque eu ligula et nisi posuere bibendum a vitae turpis. Integer eget justo tortor. Cras urna ante, consequat vel aliquet sodales, imperdiet vitae risus.
  66. </p>
  67. </section>
  68.  
  69. <section>
  70. <h6>En overskrift med H6</h6>
  71. <p>
  72. Vestibulum id tincidunt mauris. Aenean ullamcorper luctus nulla at consequat. Etiam dignissim tristique nisi, a placerat ipsum ullamcorper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque massa sem, pulvinar eu dignissim non, dignissim vitae velit. Sed nibh mauris, congue a scelerisque eget, vehicula eget dui. Cras ipsum ante, mattis non ornare in, cursus non sapien. Sed ligula elit, euismod vel sodales sed, condimentum vitae nibh. Vivamus sed arcu neque, vel accumsan mi. Phasellus quis nunc sed est blandit facilisis. Morbi scelerisque condimentum sagittis. Donec venenatis, libero id egestas interdum, sem leo iaculis dui, eu interdum massa est ut dui. Quisque pharetra vulputate mi vitae dignissim. Proin varius ullamcorper metus sit amet sodales. In imperdiet tempor urna fermentum suscipit. Cras quis leo eros.
  73. </p>
  74. </section>
  75.  
  76. </article>
  77.  
  78. <aside id="sponsor">
  79. <h1>Samarbeidspartnere</h1>
  80. <a href="http://www.enivest.no/" target="_blank"><img src="enivest.png" alt="Enivest logo" /></a>
  81. <a href="http://sognenett.no/" target="_blank"><img src="sognenett.png" alt="Enivest logo" /></a>
  82. </aside>
  83.  
  84. <footer>
  85. <p>Coppyright &copy; DEL-service UB 2012 - Tlf: 9507 9088 - Adr: Sogndal vidaregåande skule</p>
  86. </footer>
  87.  
  88. </body>
  89. </html>
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /* Selve kroppen til nettstedet. Her velger å følge det jeg har lest rundt på nett, sette margin og padding til 0. Dette er vist nok viktig å gjøre for å unngå en del problemer med div nettlesere. Samtidig setter jeg bredden på siden til 100% slik at den altid vil fylle skjermen uavhenig av hilken enhet brukern benytter for å lese nettsiden. */
  5.  
  6. html {
  7. width: 100%;
  8. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  9. line-height: 1.5em;
  10. color: #009;
  11. margin: 0;
  12. padding: 0;
  13. background: #404040 url(bg.png) repeat-x;
  14. }
  15.  
  16. /* Er litt usikker på hvordan jeg skal forlkare dette..... men se for deg din egen kropp, huden er ddet ytterste laget og således kan vi si at html er det ytterste laget. body er også selve kroppen, men da mere "inni" eller "under" huden. HEr setter jeg nå uanset border til 1px tykk og med svart farge. Reduserer også bredden litt slik at vi faktisk får plass til border */
  17.  
  18. body {
  19. width: 100%;
  20. margin: 0;
  21. padding: 0;
  22. }
  23.  
  24. /* Dette blir da hodet om man fortsetter tanken jeg har over. HEr setter jeg at den skal venstrestilles, i dette tilfellet er det ikke sikkert jeg trenger dette, men jeg gjør det automatiks for å ha bedre kontroll på hvor alle tingen på nettsiden skal være */
  25.  
  26. header {
  27. float: left;
  28. width: 100%;
  29. height: auto;
  30. }
  31.  
  32. header img {
  33. width: 25%;
  34. height: 25%;
  35. border: 0; /*Denne er for at bildet ikke skal få en ramme rundt seg i Internet Explorer*/
  36. }
  37.  
  38. /* Dette blir da halsen som vi styler. Igjen så velger jeg å sette float left slik at jeg har kontroll på hvor elementet er på siden. En annen ting som er verdt og merke seg er at både på header og nav setter jeg width til 100%, dette er ikke hundre % av nettsiden, men % tilgjengelig plass. Altås body er satt til 99% og jeg gir da både header og nav 100% av denne plassen. */
  39.  
  40. nav {
  41. float: left;
  42. width: 68.55%;
  43. margin: 0;
  44. padding: 0;
  45. background-color: #cccccc;
  46. }
  47.  
  48. nav ul {
  49. list-style-type: none;
  50. margin-top: 0;
  51. margin-right: 0;
  52. margin-bottom: 0;
  53. margin-left: 0;
  54. padding: 0;
  55. overflow: hidden;
  56. background-color: #dddddd;
  57. }
  58.  
  59. nav li {
  60. float: left;
  61. }
  62.  
  63. nav a {
  64. display: block;
  65. text-decoration: none;
  66. margin-top: 0;
  67. margin-right: 0;
  68. margin-bottom: 0;
  69. margin-left: 1em;
  70. padding: 0;
  71. background-color: #dddddd;
  72. }
  73.  
  74. nav a:link {color:#009;}
  75. nav a:visited {color:#009;}
  76. nav a:hover {color:red;}
  77. nav a:active {color:yellow;}
  78.  
  79. /* dette blir da armene. Her bruker jeg aside kun til å sette standard verdier for både venstre og høyre side */
  80.  
  81. aside {
  82. margin: 0;
  83. padding: 0;
  84. background-color: #EADCAE;
  85. }
  86.  
  87. /* dette blir da hvordan man ønsker venstre arm skal se ut alt som har KUN med venstre arm å gjøre settes inn her */
  88.  
  89. #leftSide {
  90. float: left;
  91. width: 14%;
  92. margin: 5px; /*Her setter jeg margin til null på alle sider*/
  93. margin-top: 0; /*Her setter jeg margin til null på topen og siden den siste deklarasjonen gjleder så oversktyrer denne margin på alle sider*/
  94. padding: 5px;
  95. }
  96.  
  97. #leftSide h1 {
  98. width: 100%;
  99. font-size: 1.5em;
  100. color: #ffffff;
  101. margin: 0;
  102. padding: 0;
  103. background-color: #000000;
  104. }
  105.  
  106. /* dette blir da hvordan man ønsker høyre arm skal se ut alt som har KUN med høyre arm å gjøre settes inn her */
  107.  
  108. #sponsor {
  109. float: left;
  110. width: 14%;
  111. margin-top: -25px;
  112. margin-right: 5px;
  113. margin-bottom: 0;
  114. margin-left: 5px;
  115. padding: 5px;
  116. }
  117.  
  118. #sponsor h1 {
  119. width: 100%;
  120. font-size: 120%;
  121. color: #ffffff;
  122. margin: 0;
  123. margin-bottom: 5px;
  124. padding: 0;
  125. background-color: #000000;
  126. }
  127.  
  128. #sponsor img {
  129. width: 100%;
  130. height: auto;
  131. border: 0;
  132. }
  133.  
  134. /* dette magen/ryggen og her setter man alt som har med dette å gjøre. som dere ser velger jeg å bruke float left på både armene og magen. Det gjør jeg fordi at når nettleseren leser koden så leser den fra toppen og fra venstre mot høyre, dette er litt viktig og tenke på når du skal plasser elmenetne i HTML koden. En annen ting er å huske på at jeg gir dem her 15%, 70% og 15% av plassen som er tilgjengelig tilsammen blir dette 100%. Går man ut over hundre prosent her så kan man få mye rare resultater, men i enkelte tilfeller kan det faktisk være nødvending for å oppnå ønsket effekt. */
  135.  
  136. article {
  137. float: left;
  138. width: 63.5%;
  139. margin: 0;
  140. padding: 2em;
  141. border: solid #000000 2px;
  142. border-radius: 2em;
  143. background-color: #ffffff;
  144. }
  145.  
  146. /* Dette er delen som bestemmer hvordan hver enkelt artikkel, post eller tråd skal se ut.... Altås det som blir publisert på siden. Disse trenger nødvendigvis ikke settes inn i en section, men det kan gjøre det enklere på et senere tidspunkt */
  147.  
  148. section {
  149. float: left;
  150. width: 100%; /* som nevnt tidliger gir denne delen maks plass av 70% som article har, her kan man redusere bredden for å få flere ved siden av hver andre. */
  151. margin: 0;
  152. padding: 0;
  153. }
  154.  
  155. /* helt til slutt har vi bena, denne delen blir vanligvis benyttet til copyright info og kontakt info */
  156.  
  157. footer {
  158. float: left;
  159. width: 50%;
  160. margin-top: 2%;
  161. margin-right: 25%;
  162. margin-bottom: 0;
  163. margin-left: 25%;
  164. }

Og slik ble resultatet:

Snik titt 3  Snik titt 4

Det blir mye kode her, men jeg tror det kan være greit om jeg legger ut noen versjoner av CSS filen slik at dere får et lite inntrykk på hvordan jeg jobber for å oppnå ønsket utsende. Nå begynner det og bli et stykke på natta her så tror ikke det kommer nå nye versjoner av CSS filen før rundt helgetider....

Har dere spørsmål så fyr løs.... kan ikke jeg svare på det så vet jeg hvor jeg kan få svarene og andre som evetuelt kan/vill svare må gjerne gjør det. smil

Helt til slutt så vil jeg bare si to viktige ting:

Dere som ønsker å lage egne nettside med hjelp av CMS løsninger så er det en stor fordel om dere har grunnleggende kunnskap om HTML og CSS, dette vil gjøre livet deres enklere når dere skal endre utsende på nettsiden. smil

De av dere som virkelig ønsker å bli gode i HTML og CSS så er det bare en ting som gjelder.... hardt arbeid. smil

Håper denne guiden er til hjelp og ønsker dere alle lykke til med HTML5 og CSS3.

Filene finner du her: http://hjemmeside.org/examples/enkel-html5-og-css3-guide.zip her har jeg tatt bort de bildene som kun er aktuelle for denne studentbedriften. Så disse må dere skifte ut i HTML og/eller CSS filen.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Enkel HTML5 guide

Hei, dette ser ut som kjempebra arbeid! Supert å endelig lese litt om HTML5, jeg henger stadig bakpå mht til det, og det er helt klart fremtiden! smil

Du kan redigere det første innlegget ditt. Redigeringsknappen ligger øverst (over overskriften).

Hvis du endrer det, så kan jeg slette disse innleggene sånn at guiden din blir mer ryddig smil

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010
Redigere

Da skal jeg hvie meg i redigeringa så snart jeg har skrive ferdig alt jeg tenker å ta med her.....

Driver med lit actionscript koding innimellom her så dette var en artig sak å drive med når frustrasjonen blir for stor i forhold til actionscript smil

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Enkel HTML5 og CSS3 guide

Hahaha, ja, jeg forstår hva du mener. Jeg går jo skole jeg også, og jeg må si det er mer befriende å henge her og snakke om ting jeg behersker bra og synes er dritmoro enn å sitte med calculus of variation og en bråte med matriser. smil

Har nå lest guiden din, og synes den var veldig bra og spennende. Dessverre yter ikke forumtråden den rettmessig, fordi kodene blir bredere enn innholdet og gir horisontal scroll... Jeg skal se på muligheten for å finne en løsning på dette. F.eks. at man kan trykke på noe for å få highlightet kode opp i lightbox eller popup på fullskjerm.

Jeg så litt på HTML5 for noen år siden da det var helt i begynnerfasen, og jeg husker videotutorialen gikk gjennom å sette inn video ved hjelp av HTML alene, mao, ingen JavaScript eller Flash påkrevet. Jeg synes det er bra at man kan samle alt inn under ett språk, men tror du det ligger i kortene at HTML blir et slags dynamisk scriptspråk, og vil det i tilfellet være server side eller client side, eller både og?

Jeg har drevet med web i kjempemange år sånn on off, og skrev vel min første HTML tag i 96, skulle jeg mene. Husker også jeg ble kjent med CSS i begynnelsen av 2000 og da var det helt sykt problematisk å lage websider på tvers av nettleserne. De fleste brukte IE og man kunne f.eks. ikke bruke transparency i png 24... Man hadde jo muligheten, men da ville de som kom inn på siden via IE se en helt villt forferdelig side. Dette var bare ett av problemene, og jeg husker vi brukte mange forskjellige CSS-filer med hacks for å styre hvilke som skulle påkalles av IE og hvilke som skulle brukes av andre. Et fryktelig rot som tok enorme ressurser, slik du nevner. Man ble jo sittende å fokusere mer på kompabilitiet på tvers av nettleserne enn på å lage fine websider.

En ting jeg tenkte litt på med hensyn til navnekonvensjonene du bruker på id-er og slikt. Dette med å gi noe en ID og kalle den f.eks. id="left-nav". Her ville jeg heller benyttet "first-nav" og "second-nav". Grunnen er at class og id ikke burde navngis mhp plassering, men på funksjon. Hvis man ønsker å flytte "left-nav" til høyre side etter noen år, så heter jo en høyre navigasjonen "left-nav". Er du enig i dette? Jeg fikk denne beskjeden av en pedant jeg bad om å ta en titt på en kode jeg hadde skrevet en gang. smil

Kjempebra guide, og strålende arbeid.

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010
Tja.... :)

Her ble det litt og svare på geipe

Nå tror jeg ikke HTML5 eller senere versjoner kommer til å bli dynamisk slik PHP, Javascript og andre script språk er. Jeg tror at noe av årsaken til at dem blandt annet har laget en egen "tag" for implentering av video på nettsider er i et frosøk på å sette en standard for dette som er langt enklere enn at "alle" skal lære seg Javascript og andre scriptspråk for å lage egen fansy video spillere. Tross alt er det jo enklere å lære HTML/CSS enn f.eks ActionScript som jeg driver med nå.... som jeg for øyeblikket hater over alt på jord..... glis

Når det gjelder dette med navnekonvensjonene så er jeg helt enig med deg. I eksemplene jeg har her sånn så valgte jeg å gjøre det på denne måten slik at det blir mere synlig hvor disse er.

Så ja, når man bruker id på noe så gi det navn etter hva det er og ikke hvor det er plasert.

Må også si eller understreke det du nevnte i den tråden som er utgangspunktet til denne tråden. Når man skal gi navn til til hver enkelt nettside så bruk små bokstaver og ikke bruke æ, ø, å i navnene. Jeg vet du kan bruke æ, ø, å, men det skaper på ett eller annet tidspunkt bare problemer for en selv om man gjør det

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010
Enkel HTML5 og CSS3 guide

Da har jeg oppdatert denne noe, å som sakt, er det noe dere lurer på så spør. smil

Ønsker dere filene til dette lille prosjektet er bare å skrike ut, så kan jeg sende det til dere.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Enkel HTML5 og CSS3 guide

Kjempebra! Du fornekter deg ikke med hensyn til antallet tabs i Chrome, ser jeg, lol! Du har ikke vurdert multi screen oppsett da? Jeg kjører fire skjermer og kunne aldri tenkt meg å gå tilbake til mindre enn to. Med dagens priser på skjermer blir det bare noen få tusenlapper og koding av HTML, CSS og PHP går som en lek. Du kan ha tre editorer åpne (PHP, HTML, CSS) og samtidig se resultatet i den fjerde på via localhost. Slenger du inn meta refresh 10-20 sekunder, så refresher siden seg hvert tiende sekund også, så du ser live result hele tiden smil

Synes resultatet ditt ble rent og pent, både med hensyn på kode og design. Merkelig at ikke du har hørt noe fra guttene i den andre tråden her. Kanskje de ble skremt bort av video reviewen min...?

Du kan godt shippe meg alle filene i en zip, så kan jeg smelle dem opp på serveren og gjøre den nedlastbar via link fra hovedinnlegget ditt: mr.henrik snabel gmail.com

 

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010
multi screen og mere...

Jo altså.... hehehe må glise litt her nå... På min stasjonære pc så har jeg for øyeblikket bare to skjermer, hadde 3 men den tredje tok kvelden ganske nylig.... I tillegg til dette så sitter jeg med 2 laptoper, denne som jeg bruker nå, som i all hovedsak blir brukt til skolearbeid og smurfe rundt på nett etter løsninger. En laptopp som har linux (Ubuntu) installert og til slutt sitter jeg med en den minste macbook'en begge de sistnevnte blir brukt til å teste ting og tang i for å sjekke at det vil fungere på de fleste typer enheter. Så i grunnen så står det vel ikke på utsyrssiden glis

Skal ta og sende over zip filen til deg nå etterhvert, må våkne litt først hehe smil

HTMLA
HTMLAs bilde
Avlogget
Donator
Ble med: 24.01.2012
Enkel HTML5 og CSS3 guide

Åh herre jesus den var kanon tusen takk 

 

 

Trur jeg dåner når jeg ser hva du har gjort for oss. 

 

Send den til vidarsd[at]hotmail[dot]com

 

Eneste jeg vil fikse på er menyen pga den blir litt liten og vanskelig å se. Vi vil senere få laget en slide show med alle tenestene våre med link til på framsiden noe jeg tror blir bedre.

 

Og til hjemmeside så trodde jeg at jeg hadde svart her men deg viste seg at jeg ikke hadde trykka på post xD

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010
Sender zipfila

Hei smil

Trodde dere hadde blitt skremt av kritikken til meg og hjemmeside mannen glis

Sakl ta og sende zip filen over til dere smil Jeg kom på etter jeg la meg at jeg hadde glemt en vesentlig ting.... i forhold til hvordan dere har siden.... men jeg skal ta og lage en egen guide på dette med dropp down meny i HTML og CSS. Syns denne guiden som i utgangspunktet skulle være kort ble noe lang, samtidig er det noe mange lurer på når dem driver med HTML og CSS derfor velger jeg heller å ha den i en egen guide.

Inntil jeg har laget denne guiden så kan dere jo søke litt rundt på nett for å se om dere klarer selv og finne ei løsning med bare HTML og CSS i stede for å bruke Javascript, slik dere har gjort..... Denne biten kan være noe vanskelig å få til siden man må vurdere dette med valideringen av siden.... for at en dropp down meny skal bli bortimot 100% lik i alle nettleseren bør man begynne litt med browser spesifke ting.... derfor kan Javascript være et godt alternativ...

Men som sakt.... jeg hiver ut en liten guid på det, så ser dere etterhvert her smil

HTMLA
HTMLAs bilde
Avlogget
Donator
Ble med: 24.01.2012
Enkel HTML5 og CSS3 guide

Dette blir bare helt suprt det Goran. Har klødd bra i fingra etter jeg så ferdig versjonen her til jeg fikk den på mail. Driver å endrer tekst og slikt nå så dette blir kanon

goran298
goran298s bilde
Avlogget
BidragsyterDonator
Ble med: 31.03.2010
Flott

Flott å høre at man kunne hjelpe smil

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.