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: