Litt om HTML


Selv om DreamWeaver, Frontpage osv. skriver HTML-koder for oss uten at vi trenger å huske dem selv, kan det være greit å kjenne til HTML-koder.

Med Notepad kan vi lage rene tekstfiler, lagret med endelsen .html, som inneholder HTML-koder, og laget nettsider uten forfatterverktøy som Dreamweaver og Frontpage.

Eksempel:

En .html-fil med kodene:

<html>

   <body>

      Hallo!

   </body>

</html>

vil gi en html-side som bare viser ordet "Hallo!".

Eksempler på enkle koder:

Overskrifter:

Kode: Resultat: Kommentar:
<h1>Overskrift 1</h1>

Overskrift 1

H1: Header nivå 1
<h2>Overskrift 1</h2>

Overskrift 1

H2: Header nivå 2
<h3>Overskrift 1</h3>

Overskrift 1

...
... ... ...
<h6>Overskrift 1</h6>
Overskrift 1
...

Utheving og kursiv:

Kode: Resultat:
<i>kursiv</i> kursiv
<b>bold</b> bold

Lister:

Kode: Resultat: Kommentar:
<ul>

   <li>aaaaa</li>

   <li>bbbbb</li>

   <li>ccccc</li>

</ul>
  • aaaaa
  • bbbbb
  • ccccc
UL: Unordered list
<ol>

   <li>aaaaa</li>

   <li>bbbbb</li>

   <li>ccccc</li>

</ol>
  1. aaaaa
  2. bbbbb
  3. ccccc
OL: Ordered list

Tabeller:

Kode:

<table border="1">

   <tr>

       <td> aaaa</td>

       <td> bbbb</td>

   </tr>

   <tr>

       <td>cccc</td>

       <td>dddd</td>

   </tr>

</table>

Kommentar:

TR: Table Row, TD: Table Data

Resultat:

aaaa bbbb
cccc dddd

Lenker:

Kode:

<A href="http://www.dagbladet.no/">

   Lenke til dagbladet

</A>

Resultat:

Lenke til dagbladet

Bilder:

Kode:

<img src="bilde.gif">

Resultat:

Redigering av publiserte filer fra Flash Professional:

En fil publisert av Flash Professional kan se omtrent slik ut:

<html>

<head>

   <title>Tittel</title>

   <style type="text/css" media="screen">

      html, body {height:100%; background-color: #0099ff; }

      body {margin:0; padding:0;overflow:hidden; }

      #flashContent {width:100%; height:100%; }

   </style>

</head>

<body>

   <div id="flashContent">

      <object classid="..." width="550" height="400" ...>

      ...

       ...

      <!--[if!IE]>--->

      <object type="..." data="..." width="550" height="400" ...>

       ...

       ...

       ...

   </div>

</body>

</html>

Kommentarer:

<style> :  Eksempel på CSS, eller Cascading Style Sheets. (Kan også legges i egen fil.)

Hvis vi ønsker å bruke det Flash publiserer i en egen nettside, kan vi bruke Notepad eller DreamWeaver til enten å:

Redigere/fjerne det som er merket med rødt i koden over, slik at Flash-applikasjonen ikke krever hele vinduet, og deretter legge inn det vi vil etter </div> som avslutter selve Flash-applikasjonen.

eller:

Kopiere alt mellom <div id="flashContent"> og tilsvarende slutt-tag </div>, og lime inn i kodevinduet i Notepad eller DreamWeaver i den nettsiden vi holder på med å lage der. (Egentlig det greieste!)

(Kopiering gjøres greiest ved å høyreklikke i nettsiden i nettleseren og velge Vis kilde/Vis sidekilde og kopiere fra det vinduet som da dukker opp med html-kodene. )

Obs: Grunnen til at dette ikke virket da jeg gjennomgikk det var at jeg glemte å legge .swf - og .f4v - filene i katalogen hvor nettsiden lå!


Referanser: