Lavkarbo.no :: Karbojunkie - Den store HTML-tråden

Lavkarbo.no :: Karbojunkie (http://forum.lavkarbo.no/index.php)

- Generell diskusjon (http://forum.lavkarbo.no/forumdisplay.php?f=21)

- - Den store HTML-tråden (http://forum.lavkarbo.no/showthread.php?t=2710)

Den store HTML-tråden

Evt. hjemmeside-tråden :)

Jeg har i mange år hatt min egen hjemmeside, og syns HTML - som er "språket" eller "koden" hjemmesider oftest skrives i - er veldig morsomt. Kanskje andre også synes dette er morsomt, evt. kommer til å synes at det er morsomt, så da tenkte jeg å lage en tråd om det :)

Fint om vi holder tråden ryddig og grei, med ikke altfor mye "pjatt" - sånn at det blir greit å lete opp ting. *sette standarden* ;) :rolleyes: :) (hooi.. nå hørtes jeg streng ut nå! ;) )

Nå er jeg langt fra noen guru, men.. En tråd er nå engang bare en tråd :)

------------

For å ha en hjemmeside, må man først ha et sted å ha den på - en serverplass. Mange har internettleverandører som tilbyr dette gratis. Men man kan også skaffe seg dette gratis millioner av andre steder på nettet - men man må da oftest "lide" under masse popups og annet dritt når man besøker siden...

-

Så må man lage siden. En hjemmeside skrives "oftest" i HTML - hyper text markup language. Enten så må man lære seg dette "språket", eller man kan bruke en WYSIWYG-editor (what you see is what you get). Jeg foretrekker det første, da WYSIWYG som regel legger til masse ekstra tegn her og der og overalt i koden - noe som gjør siden større (av tegn) - dvs. mere å laste ned fra nett - ergo tar det lengre tid å få opp siden, og å manøvrere seg rundt blir tregere.

-

WYSIWYG-editorer kan man laste ned overalt, f.eks download.com. (Om noen har gode erfaringer med noen program, del gjerne erfaringer!)

-

Mere kommer senere! :)

Flotters Mofe! (å nei, nå ble det pjatt :rodme: ) Synes bare alltid at en nystartet tråd trenger et svar, så den kommer igang, på en måte. Stusslig uten noe svar! men egentlig har jeg ikke noe fornuftig å komme med. Eller jo, forresten! Da jeg begynte med denne (tåpelige) hjemmesiden min, så lastet jeg ned masse HTML-programmer, men de fleste var bare rubbish. Den jeg synes var enklest å starte med for å skjønne greia, var QuickPage, lastet den ned fra www.download.com tenker jeg. Se så, så fikk jeg sagt no fornuftig også! :)

En annen forferdelig enkel måte å lage selve siden på, er å lage den i Word.
Du putter inn tekst og bilder og greier, og går til "Lagre som..." -> "Web-side".
Word fikser det automatisk. Bilder blir lagt i en egen folder tilhørende sida (hvis sida heter index.htm, blir bilder lagt i en mappe som heter noe sånt som "index-filer". Både htm-fila og mappa må lastes opp til serveren).

Når det er sagt, er det beste om man kan html også (er ikke så vanskelig å lære).
Jeg bruker som oftest en blanding av wysiwyg-editor og koding i html for å ha kontroll på hvordan sida skal se ut.

www.home.no gir ut gratis hjemmesideområde på 20Mb, om jeg ikke tar feil.
Ingen popups, og du får et par epost-adresser i tillegg.

G

Jeg har veldig god erfaring med TextPad og UltraEdit32 - men ingen av disse er wysiwig... :p

Wysiwig-editorer har jeg bare dårlige erfaringer med, og jeg har testet både Frontpage og Dreamweaver. :)

Html er kult! :D

Begynn dokumentet slik:

<html>
<body>

Innhold i dokumentet:

<h1>Størst overskrift</h1>
<h2>Nest størst overskrift</h2>
<h3>Tredje største overskrift</h3>
<h4,5,6>osv</h4,5,6>
<p>et avsnitt</p>
<hr /> en horisontal linje
<br /> mykt linjeskift (dvs ikke nytt avsnitt)
<ol>nummerert liste med <li>listelementer inni</li></ol>
<ul>punktliste med <li>listelementer inni</li></ul>

Der er mer... Men dette er det elementære for å få en side på nettet.

Og avslutt slik:

</body>
</html>

:snill:

En lenke:

<a href="url til lenkemål">besøk lenkemål</a>

Jeg også bruker ultraedit, er så kjekt med "replace"-funksjonen :)

Sitat:

Opprinnelig lagt inn av HP

Begynn dokumentet slik:

<html>
<body>

Innhold i dokumentet:

<h1>Størst overskrift</h1>
<h2>Nest størst overskrift</h2>
<h3>Tredje største overskrift</h3>
<h4,5,6>osv</h4,5,6>
<p>et avsnitt</p>
<hr /> en horisontal linje
<br /> mykt linjeskift (dvs ikke nytt avsnitt)
<ol>nummerert liste med <li>listelementer inni</li></ol>
<ul>punktliste med <li>listelementer inni</li></ul>

Der er mer... Men dette er det elementære for å få en side på nettet.

Og avslutt slik:

</body>
</html>

:snill:

Nå er det lenge siden jeg har sjekket diverse standarder, men jeg har lært - av andre - at man skal avslutte alle tagger, dvs. <br></br> og <hr> </hr> :)

Denne tråden håper jeg blir bra - jeg tenkte å bruke litt tid på den nå i ferien :)

Du åpner og avslutter med: <br /> og <hr />, dette er for å gjøre koden XHTML kompatibel ;)

Ah, selvfølgelig, my mistake :)

Skal vi lage en CSS tråd også? :p

Åh ja, det hadde vært genialt! :) Lenge siden jeg har fiklet med CSS nå, men det hadde vært gøy å friske opp kunnskapene :) Starter du en du da? :cool: :)

Her er et HTML dukument som jeg har snekret sammen i en fei nå. 4 kollonner laget i CSS ;)

http://forum.lavkarbo.no/hp/

Ingen tabeller :p

Kode:

<html>

          <html>

         <head>

                 <style>

                 #venstre {

                             width:                    150px;

                             float:                    left;

                 }

                 #innhold {

                                 padding-left:        150px;

                                 padding-right:        310px;

 

 

                 }

                 #hoyre1 {

                             width:                    150px;

                             float:                    right;

                                 padding-left:        5px;

                                 padding-right:        5px;

 

 

                 }

                 #hoyre2 {

                             width:                    150px;

                             float:                    right;

                                 padding-left:        5px;

                                 padding-right:        5px;

                 }

                 </style>

 

         </head>

 

 <body>

  <div id="venstre">

  

          <h2>Meny

  

          <ul>

                  <li>Velkommen

                  <li>Artikkel 1

                  <li>Artikkel 2

                  <li>Artikkel 3

                  <li>Om sidene

                  <li>Kontakt oss

                  <li>Lavkarbo.no

          </ul>

  

  </div>

  

  <div id="hoyre1">

  

          <h2>Kolonne 4

                  <ol>

                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                          <li>Aliquam egestas ipsum sit amet libero.

                         <li>Donec porttitor magna in enim consequat ultricies.

  

                          <li>Donec fermentum mauris vel turpis.

                         <li>Etiam sit amet ipsum in risus tristique semper.

                          <li>Cras placerat euismod eros.

                          <li>Sed gravida vulputate pede.

                         <li>Pellentesque sed massa convallis lacus hendrerit iaculis.

  

                          <li>Nunc vel eros vel felis iaculis volutpat.

                          <li>Praesent sollicitudin aliquam orci.

                          <li>Donec volutpat velit non massa.

  

                          <li>Aenean hendrerit rutrum pede.

                          <li>Fusce lacinia vulputate mi.

                          <li>Nam consequat suscipit felis.

  

                          <li>Vivamus gravida malesuada wisi.

                         <li>Pellentesque eget wisi ac massa egestas dignissim.

                          <li>Mauris blandit dolor vel tortor.

                          <li>Pellentesque nonummy tellus at eros.

                  </ol>

  

  </div>

  

  <div id="hoyre2">

  

          <h2>Kolonne4

                  <ul>

                          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                                 <li>Aliquam egestas ipsum sit amet libero.

                          <li>Donec porttitor magna in enim consequat ultricies.

  

                                 <li>Donec fermentum mauris vel turpis.

                          <li>Etiam sit amet ipsum in risus tristique semper.

                                 <li>Cras placerat euismod eros.

                                 <li>Sed gravida vulputate pede.

                          <li>Pellentesque sed massa convallis lacus hendrerit iaculis.

  

                                 <li>Nunc vel eros vel felis iaculis volutpat.

                                 <li>Praesent sollicitudin aliquam orci.

                                 <li>Donec volutpat velit non massa.

  

                                 <li>Aenean hendrerit rutrum pede.

                                 <li>Fusce lacinia vulputate mi.

                                 <li>Nam consequat suscipit felis.

  

                                 <li>Vivamus gravida malesuada wisi.

                          <li>Pellentesque eget wisi ac massa egestas dignissim.

                                 <li>Mauris blandit dolor vel tortor.

                                 <li>Pellentesque nonummy tellus at eros.

                  </ul>

  </div>

  

  <div id="innhold">

  

          <h1>Lorem ipsum dolor sit amet,

  

              <p>consectetuer adipiscing elit. Sed orci. Sed sed erat vitae dolor vehicula rhoncus.

              Maecenas imperdiet dignissim wisi. Etiam a ipsum non augue lacinia consectetuer. Vivamus tortor

              arcu, laoreet vitae, pretium quis, hendrerit non, nisl. Maecenas fermentum imperdiet est. Sed sit

          amet augue. Nam sagittis tortor quis dui. Duis id diam. Vestibulum tellus. Mauris nisl. Etiam pharetra

         vestibulum mi. Maecenas lorem. Phasellus sollicitudin. Duis tristique. Nunc bibendum placerat augue.</p>

  

          <p>Sed hendrerit interdum felis. Donec rhoncus tristique elit. Maecenas elementum rutrum magna.

              Aliquam nunc ligula, lobortis non, elementum nec, interdum eu, leo. Pellentesque eget eros. Lorem

          ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing

              elit. Donec magna risus, tempor sit amet, fringilla ut, faucibus id, quam. Donec sodales tincidunt

                 ante. In eros justo, pellentesque quis, malesuada quis, pulvinar ac, augue.</p>

  

         <p>Sed facilisis mauris sit amet metus. Nunc eget tortor. Vestibulum condimentum nibh eu diam. Mauris

          sapien elit, congue vel, eleifend ut, molestie ut, arcu. Nullam congue sodales orci. Curabitur lobortis

              urna sed nulla. Proin lobortis. Vivamus sed erat. Maecenas diam lectus, sodales vel, ultrices id,

              tempor a, est. Aliquam mollis, lectus sit amet feugiat congue, velit nunc pretium dolor, nec auctor

              tellus turpis eu lectus. Donec leo purus, varius et, tincidunt vel, pharetra sed, nulla. Aenean

          volutpat. Aenean laoreet eros a sem. Suspendisse blandit interdum risus. Donec neque ante, condimentum

         vitae, tempor eget, pharetra imperdiet, justo. Suspendisse rhoncus dignissim eros. Nullam tincidunt,

          mauris eget facilisis mattis, mauris lacus eleifend enim, at lobortis dolor ipsum nec magna.</p>

  

         <p>Nulla fringilla nunc in turpis. Vestibulum varius, sem ac pellentesque mollis, tortor metus tempus

         mauris, a luctus mi mauris quis diam. Donec vel ipsum ac diam venenatis volutpat. Donec aliquet quam

          sit amet quam. Praesent ut dolor luctus erat condimentum sodales. Nulla et massa luctus dui porttitor

          semper. In hac habitasse platea dictumst. Proin faucibus wisi ut dui. Nam ut mauris. Duis scelerisque

          massa nec ipsum. Sed gravida porta arcu. Vestibulum commodo. Mauris porttitor consequat nibh. In felis.

              Etiam hendrerit blandit tellus. Maecenas quis lacus vel nulla posuere vestibulum. Phasellus eget

                  lectus. Nulla facilisi. Curabitur id nunc at diam tempor bibendum.</p>

  

         <p>Proin in risus hendrerit neque aliquam malesuada. Praesent ut pede. In pede ipsum, facilisis sit

          amet, dignissim euismod, blandit ut, lorem. Aliquam eget dui quis neque tristique ullamcorper. Aenean

              et nunc nec nibh consequat gravida. Donec lacus pede, pulvinar eu, iaculis eget, scelerisque quis,

              diam. Mauris facilisis, purus vitae semper placerat, mi pede aliquet velit, et sagittis elit turpis

          sodales est. Phasellus et augue eget ante consequat placerat. Aenean ut dui eu tortor blandit tempus.

              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dolor.

              Praesent ultricies sagittis sapien. Aenean tellus. Maecenas placerat, turpis non lacinia sodales,

              lorem tellus commodo libero, nec lacinia justo odio vitae nunc. Nullam nonummy mollis mi. Maecenas

         volutpat, diam eu elementum ullamcorper, libero ante ultricies metus, nec ullamcorper quam mauris et

                 wisi. Mauris lacus velit, nonummy at, sagittis a, dignissim nec, odio.</p>

  

  </div>

  

  

  

  </body>

  </html>

Psst.. HP, lage tråååd! :) Den store CSS-tråden! :)

Sitat:

Opprinnelig lagt inn av mofedilla

Psst.. HP, lage tråååd! :) Den store CSS-tråden! :)

Den kommer den... men er ikke inspiert til det enda... :snill:

linken til kodene over, slik ser de ut: http://forum.lavkarbo.no/hp/

Sitat:

Opprinnelig lagt inn av smosje

*gresk* :D

Latin faktisk :snill:

Sv: Den store HTML-tråden

*dytte*

*inspirert*

Sv: Den store HTML-tråden

Sitat:

Opprinnelig lagt inn av mofe

*dytte*

*inspirert*

Hadde ikke inspirasjonen noe å bidra med :confused:

Sv: Den store HTML-tråden

Ahh, fett! Jeg selv snekret hjemmesider i 6-7 år. ;)

Slik kan dere bygge opp sitater:

Kode:

<q>Lavkarbo.no har hjulpet meg veldig masse det siste året!</q>

<cite>Remi Sture uttaler til familie og venner.</cite>

og slik kan du f.eks. style dem:

Kode:

q {

    font-weight: bold;

    display: block

}

cite {

    margin-top: 5px;

    margin-bottom: 5px;

    display: block

}

Sv: Den store HTML-tråden

Her er en layout-generator dere kan teste: http://www.inknoise.com/experimental/layoutomatic.php

Sv: Den store HTML-tråden

Bra tråd dette!

Fant akkurat det jeg trengte (har glemt litt for jeg har sløvet bort hjernen med FrontPage....... men jeg kommer ikke alltid til målet med FrontPage :nei:)

Slapp jo å slå opp i den store fete html-boken jo.

Takk!:D