HTML Design for web

Hallo!
Har utrolig lyst til å lære HTML, det eneste problemet er at jeg ikke vet hvor jeg skal starte og lignende, har søkt google og videre.

Vil også vite hvordan det er? Er det vanskelig? Og hvordan det er da, er det mer jeg må lære for å kunne lage en bra nettside?

Jeg er da en gutt på 14 år, er ganske lettlært vil jeg si.

Takk for alle svar!

cos

Blyatsquad

807 217

HTML er veldig enkelt. Du burde kunne litt css i tillegg, og i fremtiden vil du kansje lære deg litt php og.

http://www.w3schools.com/

curx

672 105

Du sa du hadde googlet?

Første treffet på "Learn HTML" gir deg W3Schools.
Denne siden er også anbefalt minst 100 ganger bare på Freak.

Edit: For sein

Sist endret av curx; 1. november 2010 kl. 17:29.

s1gh

- HTML
- CSS
- PHP

HTML presenterer informasjon, CSS tar seg av hvordan ting ser ut og PHP kan du kjøre som backend.

Edit: Og MySQL hvis du ønsker å bruke en database for å lagre data.
- MySQL

Sist endret av s1gh; 1. november 2010 kl. 17:33.

Trådstarter

Ja, fant w3schools, men kunne ikke vite om den var bra eller ikke, gidder nemlig ikke lese gjennom de 100 guidene som det stod for så å finne ut at det ikke var noe bra.

Men takk for det, da vet jeg hvertfall hvor jeg kan starte.
Og kan jeg liksom legge ut koden jeg har laget så langt og spørre om hva jeg kan forbedre innemellom? Sånn at jeg lærer det ordentlig, eller blir det for masete? Selvfølgelig i en post da

z0p

uʍop ǝpısdn

Det er ingenting i veien for å poste koden din underveis. Men lenk helst til en ekstern host, og dra ut kodesnutter i et code-element i posten dersom det er ting du lurer på. Skriv også hvordan du tenker, og hvor du vil. Pøser du bare på med kildekode vil bare trådene dine bli oversett

Trådstarter

Ok takk, og med css, kan jeg designe css i photoshop eller flash? Eller må jeg gjøre det med koding?

Og er det et eller annet system man forholder seg til, eller kan finne ut av?
Hvis man for eksempel skal ha en overskrift så skriver man for eksempel <heading> og kursiv paragraf <paragraph> ¨cursive¨. Eller har ikke kodene noen mening i det hele tatt?

Krokodille

418 329

I alle kodespråk har alt en svært logisk mening når man først lærer seg det!

Lykke til!

Og nei, du kan ikke designe CSS i Photoshop. Anbefaler Adobe Dreamweaver!

Sist endret av Krokodille; 1. november 2010 kl. 18:28. Grunn: :)

CSS er et programmeringsspråk, men det er veldig lett. Da jeg satt neddopet på tramadol med brukket kragebein lærte jeg meg basic HTML og CSS på et par dager.

Sjekk ut W3-schools og lær deg HTML og CSS der, også ser du CSS Noob to Ninja (denne koster et par kronasjer, men du finner den hvis du googler).

Edit: Jeg vil fraråde deg Dreamweaver o.l.

Du hører kanskje at "alle de proffe bruker Dreamweaver", men det er fordi de kan språket. Det er mye bedre å lære seg å kode i en text-editor som f.eks. Notepad++, for det er kodingen du trenger å kunne. Greit nok at det er en del praktiske funksjoner i Dreamweaver, men de snarveiene du tar der kommer du til å angre på. Det er bare snakk om noen få timer med koding før du begynner å skjønne såpass at du klarer å gjøre ting sånn du vil.

Sist endret av drittunge; 1. november 2010 kl. 18:31.

lor3ntz

Brokkoli!

500 187

HTML-kode

<h1>Overskrift</h1>
<p><em>Dette er et avsnitt</em></p>

h står for heading, og 1-6 er nivået på overskriften, en underoverskrift vil derfor ha tagen h2.

p står for paragraf, em står for emphasized

Kode

em
{
font-style:italic;
}

de fleste nettlesere har em teksten som kursiv som standard, men css'en over vil gjøre det i alle nettlesere.

Sist endret av lor3ntz; 1. november 2010 kl. 18:32. Grunn: Slått på målstreken

Trådstarter

Ah, takk, men finnes det noen bra html editor som noen kan anbefale? Hvor man kan se på resultatet underveis?

Og skal jeg lære html eller html5?

onClipEvent

2.147 999

Notepad++ anbefales!

Bare lagre filen som f.eks. test.html og åpne i en browser.

z0p

uʍop ǝpısdn

Det beste er å ta for seg grunnleggende html først.

Du markerer opp et enkelt dokument med hode og kropp

Kode

<html>
  <head>
    <title>min side</title>
  </head>
  <body>
    <h1>Min overskrift</h1>
    <p>Innledning</p>
    <h2>Min under-overskrift</h2>
    <h3>Min under-under-overskrift</h3>
    <h2>Min andre under-overskrift</h2>
    <p>Min paragraf</p>
  </body>
</html>

som du ser er her heading h1. 1-tallet indikerer at dette er "hovedoverskriften". Bruk 2-6 for å indikere under-overskrifter. Se for deg at du skal kunne lage en innholsfortegelse ved å kun lese h-elementene på siden din.

Min Side
*min under-overskrift
**min under-under-overskrift
*min andre under-overskrift

ikke fokuser på utssende overhodet når du skriver markup. Se på taggene som bokser hvor du skal putte data, og husk på at taggene skal reflektere innholdet. Kursiv er ikke beskrivende på den måten, derfor bruker man f.eks <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, og <cite> for å beskrive teksten

Det er greit å lese seg opp på semantikk. Hvordan vil du beskrive de forskjellige delene i dokumentet ditt?

Trådstarter

Skjønner, men hvorfor skal de drive å være sånn mellomrom utover i foreksempel <h2>?

Diox

Sjef

407 252

Det har ingen funksjon å ha mellomrom der, men det gjør koden enklere å lese for øyet og det ser penere ut

Trådstarter

makes sense.

krJo

1.204 450

http://htmledit.squarefree.com/
Realtime html editor AKA live html.

Andersbt

472 82

dreamweaver, veldig enkelt, men lager mye stygg kode.

Trådstarter

Kan man droppe å lære css men bare finne noen templates på internett heller?

z0p

uʍop ǝpısdn

Det gir mening å skrive HTML på den måten med henhold til DOM. Et objekt/element markeres med <tagg-navn>, og kan inneholde flere andre elementer, derfor må agenten vite hvor oppmerkingen av et element skal slutte.

Følgende layout visualiserer relativt greit start/slutt på oppmerkingen av et element.

Kode

<element>
  <element>
    <content />
  </element>
</element>

i henhold til spec. ignoreres whitespace i nettleseren

Sitat av robbi13

Kan man droppe å lære css men bare finne noen templates på internett heller?

Vis hele sitatet...

Mer eller mindre, men man må nesten forstå hvordan ting henger sammen her. For å få design utover vanlig typografi, må man kjenne til dokumentstrukturen for å finne og beskrive utseende på de forskjellige ønskede delene på siden.

Dersom man har en meny, kan man f.eks klassfiisere den ved:

Kode

<ul class="menu">
  <li><a href="link.htm">item</a></li>
</ul>

Ved hjelp av CSS kan vi da velge alle elementer som tilhører denne klassen, og fortelle nettleseren hvordan det skal vises

Kode

.menu {
  color: red;
}

Dette vil gi rød tekst i menyen.

Trådstarter

Men hvordan intergrerer man html-koden inni CSS-koden?
Har en venn som driver med html, han er 12 år gammel. Han er snart ferdig med en nettside som han har laget, gleder med til å se. Han har lagd css og alt selv.

lor3ntz

Brokkoli!

500 187

Du integrerer css inn i html ved å bruke

HTML-kode

<link type="text/css" rel="stylesheet" href="stilark.css" />

i head-elementet

z0p

uʍop ǝpısdn

man integrerer ikke HTML inn i CSS. HTML er det som i bunn og grunn er nettsiden. HTML forteller hva nettsiden inneholder. Stylesheet forteller hvordan innholdet skal presenteres.

Kode

<html>
  <head>
    <title>min side</title>
    <style type="text/css">
      body {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <h1>MS-DOS</h1>
    <p>back to 1980</p>
  </body>
</html>

Dette vil vise teksten i hvitt, på en sort backgrunn

Edit: det beste er å skille stylesheet og markup i to forskjellige filer som nevnt ovenfor

Sist endret av z0p; 1. november 2010 kl. 20:02.

Trådstarter

Ok, CSS ser vanskelig ut allerede :P

s1gh

Det er mye som ser vanskelig ut når man er nybegynner.
CSS er egentlig ikke så fryktelig avansert. Det meste er logisk når du først kommer litt inn i det.

Det gjelder å bare ikke gi opp.

Trådstarter

Ja, html ser greit ut så langt i hvertfall

Sitter bare å tenker på hva siden kan være om :P Sånn at jeg har et utgangspunkt.

z0p

uʍop ǝpısdn

Det er ikke vanskelig. Det meste ligger i selectors og hvordan du strukturer markupen din

noen eksempler:
p { color:red; } /* rød farge på tekst i alle paragrafer */
p.class-name { color:red; } /* rød tekst på alle paragrafer i klassen "class-name" */
body > p { color:red; } /* rød farge på tekst i alle paragrafer som er en direkte etterkommer av body */
h1, h2 { color: red; } /*rød tekst i alle h1, h2 */

Du kan kombinere selectorer for å spesifisere hvilke elementer du referer til. Derfor trenger du kun å tenke på identifisering og klassifisering av elementer som skiller seg ut fra massen.

Andersbt

472 82

Ja, man kan laste ned et template på internett, men det kjekkeste er jo å lage selv

Jeg synes CSS er enklere enn HTML, fordi det er så logisk oppbygd.

Mitt råd: Ikke bruk tid på HTML, men lær deg CSS. HTML brukes stort sett kun til å lage innhold på sider, og styling av sider i HTML hører til 90-tallet. Du har mye flere muligheter i CSS enn i HTML.

For å overdrive litt, så kan man si at man bare trenger å vite noen får tags i HTML:

<h1> til <h6>
-Overskrifter
<p>
-Vanlig tekst
<a>
-Linker aka hyperkobliner
<div>
-Gjør ingen ting, men du kan sette en ID som linkes opp mot stylesheet, og på den måten dele opp siden style hver del for seg
<img>
-Setter inn bilde
<ul>
-Unummerert liste, fint til menyer osv.
<link>
-Brukes til å linke til stylesheet (hvis du ikke bruker internal eller in-line css da)

Kan du disse tagsene kan du lage en hel nettside. Det sier litt om hvor simpelt HTML egentlig er, og hvor lite HTML man trenger å kunne.
Hvis du vil se hva CSS faktisk gjør med en side, last ned kildekoden til en tilfeldig side og dropp å laste ned CSS-filen. Da får du se den ustylede versjonen av siden (hvis det er brukt css), og du vil mest sannsynelig bare se hvit bakgrunn med masse tekst som er satt opp rotete under hverandre.

Så for å si det kort:
HTML = innhold
CSS = design

Trådstarter

Ja, vet at CSS er design, men hvis jeg skal lage en hel side så må man vel bruke html også?

Ja du må bruke HTML for å lage innholdet, og man trenger jo ikke CSS selv om du absolutt burde ha det.

Kan ta med et eksempel på hvordan man lager et div-element og styler det i CSS.
Dette skal skrives i HTML-filen

Kode

<!DOCTYPE html>
<html>
  <head>
    <title>Tittel</title>
    <link rel="stylesheet" href="navn.css">
  </head>

  <body>
    <div id="navn">
      <p>Her setter du innholdet i div-tagen. Det kan være alt fra en meny til en hel side med innhold.</p>
    </div>
  </body>
</html>

Dette skal skrives i CSS-filen

Kode

body {
  background: blue;
}

#navn {
  height: 100px;
  width: 100px;
  background: red;
  margin: 0 auto;
}

Det du har gjort der da er å lage en side med blå bakgrunn og en boks med tekst som er 100x100 pixler og har rød bakgrunn. "Margin: 0 auto;" sentrerer boksen, og den vil være i midten av siden.

Fordelen med dette er at hvis du har et helt nettsted hvor du skal endre designet, så trenger du bare å endre css-filen. Da kan du plutselig endre bakgrunnen på uendelig mange sider bare ved å endre på 1 linje kode, og ikke endre på hver eneste HTML-fil.

Sist endret av drittunge; 1. november 2010 kl. 20:42.

Andersbt

472 82

Jeg vil på det sterkeste anbefale www.w3schools.com

Flott gjennomgang av av både html og css

Prøv disse to kodene i denne: http://htmledit.squarefree.com/
Da får du et greit bilde av hvor mye man kan gjøre med CSS.

Kode

<!DOCTYPE html>
<html>
  <head>
    <title>Tittel</title>
    <style type="text/css">

    </style>
  </head>

  <body>
    <div id="navn">
      <p>Her setter du innholdet i div-tagen. Det kan være alt fra en meny til en hel side med innhold.</p>
    </div>
  </body>
</html>

Kode

<!DOCTYPE html>
<html>
  <head>
    <title>Tittel</title>
    <style type="text/css">
        body {
            background: blue;
        }

        #navn {
          height: 100px;
          width: 100px;
          background: red;
          margin: 0 auto;
        }
    </style>
  </head>

  <body>
    <div id="navn">
      <p>Her setter du innholdet i div-tagen. Det kan være alt fra en meny til en hel side med innhold.</p>
    </div>
  </body>
</html>

Trådstarter

Så man skriver bare css inn i html? Men hva er div tagen? Og hvordan får folk sånn utrolig bra design?

Vanligvis bruker jeg ekterne stilark (css i et eget dokument), men det er tre måter å lage css på. Grunnen til at jeg gjorde det på den måten (internt) var av praktiske grunner sånn at du skulle slippe å laste ned og lage flere filer osv.

Typer CSS:

1. Ikke noe CSS, nettleseren bestemmer utseendet.
2. Eksternt stilark (External Stylesheet) - CSS i eget dokument
3. Internt stilark (Internal Stylesheet) - CSS i head-tagen, som i eksempelet jeg viste
4. Inline CSS - CSS inni en HTML-tag i form av en attribute. Eks: <p style="color: red;">

Det er derfor det heter Cascading Style Sheets, fordi jo høyere verdi, jo høyere prioritet har det. Dvs. at inline CSS overstyrer alt, fordi det har verdien 4.

Jeg synes det er mest praktisk med eksterne stilark, men det er bare smak og behag egentlig.

Så til div-tagen. Den gjør egentlig ingen ting. Setter du en div-tag rundt noe er det eneste man kan bruke den til å sette enten en class eller en id. En class og en id er omtrent det samme, bortsett fra at en class kan brukes flere ganger.
Se for deg at en class f.eks. er mennesker, mens en id er en bestemt person.

Setter du en class eller id på et element i HTML-dokumentet kan du linke til denne i stilarket, og style det på den måten. Hvis du ser i eksempelet jeg postet har jeg satt <div id="navn">. Dette finner vi igjen i stilarket hvor jeg har satt "#navn { }". Bruker du classes blir det nesten akkurat det samme, bare at "#" byttes ut med "." (.navn og ikke #navn)

Sist endret av drittunge; 1. november 2010 kl. 21:04.

Trådstarter

<html>
<body>
<head>
<style type="text/css">
body {background-color:black}
p {color:white}
</style>
</head>
<h1 align="center" style="color:white">iPhone 4 Deksler<h1>
<p style="color:red">Vi kommer til å ha et bredt utvalg av forskjellige iPhone 4 deksler. <br />
De vil koste så lite som mulig. Vårt mål er å slå alle konkurrenter og å ha det billigere enn alle andre norske
bedrifter som driver med dette her.
<form align="center" style="color:white">
Fornavn: <input type="text" name="fornavn"><br />
Etternavn: <input type="text" name="etternavn"> <br />
<input type ="radio" name="kjønn" value="gutt" />Gutt <br />
<input type ="radio" name="kjønn" value="jente" /> Jente <br />
Passord: <input type="password" name="pwd" />
</form>
</html>

Her har jeg da prøvd litt, har forstått nå hvordan selve alt fungerer, men CSS ser litt vanskelig ut, og dette har ingen mening.

Altså, koden min har ingen mening, er ikke til noe spesielt :P

z0p

uʍop ǝpısdn

som påpekt mange ganger, så har ikke styling noe i markupen å gjøre.

Kode

<p style="color:red">

dette er fyfy

du kan style paragrafen fra CSS

Kode

p { color:red;}

<br /> ligger også i fyfy-listen her. Layouten av form skal skje i stylesheet

du kan bruke label til input-elementer

Kode

<label for="name">Navn</label><input type="text" name="name" id="name" />

Jeg vil også fraråde å bruke div-elementer før du faktisk vet at du trenger det

Sist endret av z0p; 1. november 2010 kl. 21:48.

Trådstarter

Men man trenger jo <br /> da?
Tror jeg skal lære meg alt av html først, så CSS. Det er jo html som gir funksjonene, mens css som gir designet.
Hvis man skal lage en nettbutikk, så kan man gjøre dette med bare html?

z0p

uʍop ǝpısdn

en nettside skal helst kunne leses helt fint uten CSS. Dette på grunn av at det ikke bare finnes visuelle agenter. Ved å bruke beskrivende elementer hjelper du disse med å tolke innholdet ditt slik du vil. en div f.eks er ikke beskrivende. dvs. den forteller ingenting om hva den inneholder uten CSS. Den brukes helst for å merke opp seksjoner på siden.
br skal ikke brukes til layout. For å sette form-elementene under hverandre bruker du css.

PureRushh

Crew lofotLAN 2012

449 46

Sitat av robbi13

Vis hele sitatet...

Ut av det jeg tror(siter meg visst feil) får man best resultat av en nettbutikk visst man bruker mysql,php,css,html og javascript. usikker på javascript.
Da jeg startet med css og html søkte jeg pp youtube. fant en god toutorial, søk på 'tutvid' Se på videoen 'How to make a standar webpage in dreamweaver' så lærer du mye om css og html.

Når du skal videre på php, lær deg javascript først, det hører jeg at dem anbefaler.

Når du engang skal lære php, start med det basiske, som 'phpacedemy' på youtube forklarer, dritbra!

Startet med dette for 5mnd siden, og kan nå html,css,php og mysql! Det er fun når du lærer deg det!

Ønsker deg lykke til videre!

Jannis!

207 73

Sitat av robbi13

Vis hele sitatet...

Hvordan du lærer best er helt og holdent opp til deg.
Du burde absolutt lære deg CSS. Det er vanskelig i starten, men når du kan begynne å lage rå design, er det bare moro. Om du vil vente til du kan HTML bedre er selvfølgelig opp til deg.

Du må ikke kjøpe deg et hus før du har penger til det. Ikke begynn å tenke på å lage nettbutikk ennå, det tilhører fremtiden. Først må du kunne HTML og CSS, det er web-utviklingens ABC. Etter at du kan HTML og CSS kan du velge veien videre litt selv. Liker du mer avanserte design, kan det være greit å kunne jQuery, så du kan få til animasjoner og så videre. Dette tilhører som sagt framtiden, ikke begynn å se på jQuery nå. Liker du å programmere, kan du begynne å se på PHP (eller andre server-side språk). Dette må du også vente med til du kan ABC. Når du begynner å bli habil i PHP, kan du begynne å se på nettbutikk igjen. Innen den tid må du konsentrere deg om litt lettere ting.

Dette var veien jeg gikk. Jeg jobber nå med ASP.NET til daglig, har fortsatt mye PHP-kunnskap i hodet, og kan HTML og CSS godt nok. Så du har gode muligheter, bare du står på. w3schools var den eneste kilden jeg brukte til å lære meg det jeg kan i dag av HTML, CSS og PHP.

Angående HTML5 og HTML4, som du spurte om tidligere; HTML5 er HTML, bare neste versjon. Hvis noen spør meg om de burde bruke Firefox 3.0 eller 3.5, sier jeg selvfølgelig 3.5. HTML5 er lettere å lære seg også, fordi det er mer logisk enn HTML4. På w3schools må du nok allikevel igjennom HTML4 først, fordi guiden de har på HTML5 bygger på HTML4-guiden dems.

Trådstarter

Takk takk

Da er det vel tid for å komme med enda et spørsmål :P Hvordan i huleste får man css til å få sånn andre ting enn bare bakgrunnsfarger og sånt? Kan man ikke få kulere ting enn det?
Må man da legge til bilder? Og da, hvordan få teksten til å ikke skrives oppå bildet?
Og hvordan legger man til bilder i det hele tatt? Ble forklart litt dårlig på w3schools.
Har også bestemt med for å lære CSS først, siden html er ikke så vanskelig hvis man bare skal bruke det til å skrive teksten. Og forms osv.

Beis

Ballerusk

676 287

Et par metoder for å få tekst under et bilde.
HTML

HTML-kode

<div>
<img src="UrlTilBilde" alt="" />
</div>

<div>
Denne teksten vil havne under bildet.
</div>

HTML & CSS

Kode

<style type="text/css">
.bilde {
background-image:url(http://www.LinkTilBilde.png);
}
</style>

<div class="bilde">
</div>

<div>
Denne teksten vil havne under bildet.
</div>

Det er mange ting man kan gjøre med css, men ikke rett etter man har startet å lære det..

Sist endret av Beis; 2. november 2010 kl. 19:55.

s1gh

Man kan lage ufattelig mye kult med CSS, men ikke sikt etter slike design med det første. Du kan gjerne ha det som mål, men i første omgang må du bli kjent med, og komfortabel med å bruke CSS.
Poenget mitt er, ta ting gradvis.

Her kan du lese mer om CSS layouts.: http://www.learn-css-tutorial.com/CSS-Page-Layout.cfm

Hvis du vil se ting som blant annet er laget i CSS, ta en titt her.

Sist endret av s1gh; 2. november 2010 kl. 20:02.

Trådstarter

Og da, et nytt spørsmål, hvordan får man dette } tegnet på mac? Har kopiert denne :S

Ja, og er alle de bildene og kantene og bøyene og alt det kule lagd med photoshop?

s1gh

Nå har jeg ikke Mac selv, men ut i fra det jeg fant på nettet:
Alt + ( = {
Alt +) = }

Trådstarter