Skilnad mellom versjonar av «Handbok i HTML»

Frå Mållekken
Hopp til navigering Hopp til søk
Inkje endringssamandrag
 
(5 mellomliggjande versjonar av 3 brukarar er ikkje viste)
Line 1: Line 1:
== Innleiding ==
== Innleiding ==


Den lettaste måten å læra seg HTML på, er gjenom døme. Her er eit einfelt døme på HTML-uppmerkjing:
Lettaste måten å læra seg HTML på, er gjenom døme. Her er eit einfelt døme på HTML-uppmerkjing:


<pre>
<pre><!DOCTYPE html>
<html>
<html>
<head>
    <head>
<title>Dette er ei ny sida</title>
        <title>Dette er ei ny sida</title>
</head>
    </head>
<body>
    <body>
<h1>Dette er ei stor yverskrift</h1>
        <h1>Dette er ei stor yverskrift</h1>
<p>Dette er ein bolk med både <b>feit</b> og <i>kursiv</i> skrift</p>
        <p>Dette er ein bolk med både <b>feit</b> og <i>kursiv</i> skrift</p>
</body>
    </body>
</html>
</html></pre>
</pre>


<nowiki><html>, <body>, <i></nowiki> osb., kallar me med eit samlenamn ein <em>merkjing</em>.<br>
<code><nowiki><html></nowiki></code>, <code><nowiki><body></nowiki></code>, <code><nowiki><i></nowiki></code> osb., kallar me med eit samlenamn ei <em>merkjing</em>.<br>


Fyrste merkjing er <nowiki><html></nowiki>, som merkjer byrjingi på HTML-dokumentet. Siste merkjing er <nowiki></html></nowiki>, som merkjer enden på HTML-dokumentet.
Fyrste merkjing er <code><nowiki><html></nowiki></code>, som merkjer byrjingi på HTML-dokumentet. Siste merkjing er <code><nowiki></html></nowiki></code>, som merkjer enden på HTML-dokumentet.


Umrådet millom <nowiki><head></nowiki> og <nowiki></head></nowiki> synest ikkje i netlesaren, men inneheld annan informasjon.
Umrådet millom <code><nowiki><head></nowiki></code> og <code><nowiki></head></nowiki></code> tér ikkje i netlesaren, men inneheld andre upplysingar.


Millom <nowiki><title></nowiki> og <nowiki></title></nowiki> stend namnet på sida.
Millom <code><nowiki><title></nowiki></code> og <code><nowiki></title></nowiki></code> stend namnet på sida.


Umrådet millom <nowiki><body></nowiki> og <nowiki></body></nowiki> synest i netlesaren.
Umrådet millom <code><nowiki><body></nowiki></code> og <code><nowiki></body></nowiki></code> tér i netlesaren.


<nowiki><h1></nowiki> merkjer at teksti er ei yverskrift. Ein kann òg laga underyverskrifter med <nowiki><h2></nowiki>, <nowiki><h3></nowiki> osb. <b>Mrk.:</b> Ein nyttar ikkje desse til å brigda storleiken på yverskrifti. For HTML-uppmerkjingi skal merkja skipnaden, og ikkje utsjånaden.
<code><nowiki><h1></nowiki></code> merkjer at teksti er ei yverskrift. Ein kann òg laga underyverskrifter med <code><nowiki><h2></nowiki></code>, <code><nowiki><h3></nowiki></code> osb. <b>Merk:</b> Ein nyttar ikkje desse til å brigda storleiken på yverskrifti. For HTML-uppmerkjingi skal merkja skipnaden og ikkje utsjånaden.


<nowiki><p></nowiki> merkjer at teksti er ein bolk, <nowiki><b></nowiki> at teksti er feit, og <nowiki><i></nowiki> at teksti er kursiv.  
<code><nowiki><p></nowiki></code> merkjer at teksti er ein bolk, <code><nowiki><b></nowiki></code> at teksti er feit, og <code><nowiki><i></nowiki></code> at teksti er kursiv.  


<b>Mrk.:</b> Ein må hugsa å setja på ende-merkjing. T.d. vil <nowiki><b></nowiki> utan <nowiki></b></nowiki> gjera all teksti etter feit.
<b>Merk:</b> Ein må hugsa å setja på ende-merkjing. T.d. gjer <code><nowiki><b></nowiki></code> utan <code><nowiki></b></nowiki></code> all teksti etter feit.


=== Verkty for HTML-uppmerkjing ===
=== Verkty for HTML-uppmerkjing ===
Line 36: Line 35:
**[http://members.shaw.ca/akochoi-emacs/ Emacs 21]
**[http://members.shaw.ca/akochoi-emacs/ Emacs 21]
**[http://www.codingmonkeys.de/subethaedit/ SubEthaEdit]
**[http://www.codingmonkeys.de/subethaedit/ SubEthaEdit]
**[https://code.visualstudio.com/ Visual Studio Code]


*Gnu/Linux, BSD osb.:
*Gnu/Linux, BSD osb.:
**[http://www.gnu.org/software/emacs/ GNU Emacs]
**[http://www.gnu.org/software/emacs/ GNU Emacs]
**[https://code.visualstudio.com/ Visual Studio Code]


*Win32:
*Win32:
**[ftp://ftp.sunet.se/pub/os/Win32/ntEmacs GNU Emacs]
**[http://www.gnu.org/software/emacs/ GNU Emacs]
**[https://notepad-plus-plus.org/downloads/ Notepad++]
**[https://code.visualstudio.com/ Visual Studio Code]


*Java:
*Java:
Line 48: Line 51:
== Peikarar ==
== Peikarar ==


Ein peikar eller ein lekk viser til ein annan stad ved påtrykk.
Ein peikar eller ein lekk (lenk) viser til ein annan stad ved påtrykk.


Grunnformatet sér slik ut:
Grunnformatet sér slik ut:
Line 59: Line 62:
<pre><a href="http://www.annannetstad.no/">Annan netstad</a></pre>  
<pre><a href="http://www.annannetstad.no/">Annan netstad</a></pre>  


<b>Mrk.:</b> Skal sida visast i eit nytt netlesarvindauga, du leggja til tillegget _blank:
<b>Mrk.:</b> Skal sida visast i eit nytt netlesarvindauga, lyt du leggja til tillegget _blank:


<pre><a href="http://www.annannetstad.no/" target="_blank">Annan netstad i nytt vindauga</a></pre>  
<pre><a href="http://www.annannetstad.no/" target="_blank">Annan netstad i nytt vindauga</a></pre>  
Line 69: Line 72:
<pre><a href="#serskildstad">Sjå tekst på annan stad</a></pre>
<pre><a href="#serskildstad">Sjå tekst på annan stad</a></pre>


Denne staden må merkjast, slik at netlesaren veit kvar han skal:
Denne staden må merkjast, slik at netlesaren veit kvart han skal:
<pre><a name="serskildstad">Dette er teksti på annan stad</a></pre>
<pre><a name="serskildstad">Dette er teksti på annan stad</a></pre>


Line 80: Line 83:


== Bilæte ==
== Bilæte ==
Grunnformatet sér slik ut:
<pre><img src="eitkvart.png" alt="Eitkvart"></pre>
<b>Merk:</b> Ikkje alle netlesarar kann visa bilæte eller visa alle bilætformat.  Tillegget <em>alt</em> viser alternativ tekst til bilætet.
Ein peikar treng ikkje tekst, det kann òg vera eit bilæte:
<pre><a href="einstad.html"><img src="eitkvart.png"></a></pre>
Korleis ein brigder storleiken på bilætet i høgd og breidd:
<pre><img src="eitkvart.png" alt="Eitkvart" width="48" height="48"></pre>
Stadsetjing av bilæte i høve til tekst:
<pre>Bilæte <img src="eitkvart.png" align="bottom"> på botnen i høve til teksti
Bilæte <img src ="eitkvart.png" align="middle"> på midten i høve til teksti
Bilæte <img src="eitkvart.png" align="top"> på toppen i høve til teksti</pre>
Stadsetjing av bilæte i høve til tekstbolken:
<pre><p><img src ="eitkvart.png" align ="left">
Nokor tekst i ein tekstbolk med bilætet til vinstre.</p>
<p><img src ="eitkvart.png" align ="right">
Nokor tekst i ein tekstbolk med bilætet til høgre.</p></pre>


== Listor ==
== Listor ==
===Punktlista===
<pre><ul>
    <li>Innehald</li>
    <li>Innehald</li>
</ul></pre>
===Tallista===
<pre><ol>
    <li>Innehald</li>
    <li>Innehald</li>
</ol></pre>


== Tavlor ==
== Tavlor ==

Siste versjonen frå 25. mars 2022 kl. 18:29

Innleiding

Lettaste måten å læra seg HTML på, er gjenom døme. Her er eit einfelt døme på HTML-uppmerkjing:

<!DOCTYPE html>
<html>
    <head>
        <title>Dette er ei ny sida</title>
    </head>
    <body>
        <h1>Dette er ei stor yverskrift</h1>
        <p>Dette er ein bolk med både <b>feit</b> og <i>kursiv</i> skrift</p>
    </body>
</html>

<html>, <body>, <i> osb., kallar me med eit samlenamn ei merkjing.

Fyrste merkjing er <html>, som merkjer byrjingi på HTML-dokumentet. Siste merkjing er </html>, som merkjer enden på HTML-dokumentet.

Umrådet millom <head> og </head> tér ikkje i netlesaren, men inneheld andre upplysingar.

Millom <title> og </title> stend namnet på sida.

Umrådet millom <body> og </body> tér i netlesaren.

<h1> merkjer at teksti er ei yverskrift. Ein kann òg laga underyverskrifter med <h2>, <h3> osb. Merk: Ein nyttar ikkje desse til å brigda storleiken på yverskrifti. For HTML-uppmerkjingi skal merkja skipnaden og ikkje utsjånaden.

<p> merkjer at teksti er ein bolk, <b> at teksti er feit, og <i> at teksti er kursiv.

Merk: Ein må hugsa å setja på ende-merkjing. T.d. gjer <b> utan </b> all teksti etter feit.

Verkty for HTML-uppmerkjing

Peikarar

Ein peikar eller ein lekk (lenk) viser til ein annan stad ved påtrykk.

Grunnformatet sér slik ut:

<a href="adressa">Peikartekst</a>

Viser til onnor sida:

<a href="onnorsida.html">Onnor sida</a>

Viser til annan netstad:

<a href="http://www.annannetstad.no/">Annan netstad</a>

Mrk.: Skal sida visast i eit nytt netlesarvindauga, lyt du leggja til tillegget _blank:

<a href="http://www.annannetstad.no/" target="_blank">Annan netstad i nytt vindauga</a>


Korleis visa til ein serskild stad på ei sida, anten på same sida eller på ei onnor sida

Viser til serskild stad på same sida:

<a href="#serskildstad">Sjå tekst på annan stad</a>

Denne staden må merkjast, slik at netlesaren veit kvart han skal:

<a name="serskildstad">Dette er teksti på annan stad</a>

Viser til serskild stad på onnor sida:

<a href="onnorsida.html#onnorsida">Sjå tekst på onnor sida</a>

Laga peikar til epost med brevemnet "Eg hev lært meg HTML!":

<a href="mailto:nokon@einstad.no?subject=Eg%20hev%20lært%20meg%20HTM!">
Send epost</a>

Bilæte

Grunnformatet sér slik ut:

<img src="eitkvart.png" alt="Eitkvart">

Merk: Ikkje alle netlesarar kann visa bilæte eller visa alle bilætformat. Tillegget alt viser alternativ tekst til bilætet.


Ein peikar treng ikkje tekst, det kann òg vera eit bilæte:

<a href="einstad.html"><img src="eitkvart.png"></a>

Korleis ein brigder storleiken på bilætet i høgd og breidd:

<img src="eitkvart.png" alt="Eitkvart" width="48" height="48">

Stadsetjing av bilæte i høve til tekst:

Bilæte <img src="eitkvart.png" align="bottom"> på botnen i høve til teksti

Bilæte <img src ="eitkvart.png" align="middle"> på midten i høve til teksti

Bilæte <img src="eitkvart.png" align="top"> på toppen i høve til teksti


Stadsetjing av bilæte i høve til tekstbolken:

<p><img src ="eitkvart.png" align ="left"> 
Nokor tekst i ein tekstbolk med bilætet til vinstre.</p>

<p><img src ="eitkvart.png" align ="right"> 
Nokor tekst i ein tekstbolk med bilætet til høgre.</p>

Listor

Punktlista

<ul>
    <li>Innehald</li>
    <li>Innehald</li>
</ul>

Tallista

<ol>
    <li>Innehald</li>
    <li>Innehald</li>
</ol>

Tavlor