Norrbottens Järnvägsmuseum - Malmbanans Vänner
Driftdokument - malmvagn.se
 
Hem nbjvm.se
Hem malmvagn.se
Hem driftdok

Säkerhet
Trafikavd
Maskinavd
Banavd
Underhåll
Föreskrifter
Handböcker
  Administration
    MBVH 10082
Utbildning
Sökning
Logga in/ut

MBVH 10082 GRUNDERNA I HTML


INNEHÅLL


1. ALLMÄNT

HTML uttydes HyperText Markup Language, alltså ett språk (language) för att märka (markup) text (Text) med länkar till andra dokument (Hypertext). I princip är html mycket enkel, den bit text man vill märka för att tala om vad den är, omges av märken (taggar, tags på engelska). HTML uppfanns av Tim Berners-Lee 1990. Under årens lopp har HTML utvecklats avsevärt (= blivit avsevärt mera invecklad) men det är fortfarande möjligt att skriva fullt läsliga html-dokument med ett fåtal taggar.

Denna handbok ger en översikt över grunderna i HTML. Många finesser är utelämnade. För vidare studier hänvisas till något av ett flertal läromedel på nätet.

2. GRUNDSTRUKTUR

Varje html-dokument börjar med taggen <html> och slutar med taggen </html>. innehållet i html-dokumentet är indelat i två sektioner: dokumenthuvudet <head></head> och brödtexten <body></body>.

I head samlar man lite anvisningar om hur formatering ska ske, hur åäö ska kodas och sådana saker. Vid redigering av ett html-dokument är i stort sett det enda man behöver bekymra sig om titeln: <title></title>.

Grundstrukturen är således följande;


<html>
<head>
  <title>Snitsig titel</title>
</head>
<body>
Här står allt som vi vill visa på skärmen.
</body>
</html>

3. ATTRIBUT

Så gott som alla taggar kan ha attribut, t ex <body color="red"> - här blir all text röd i stället för svart. Några taggar är meningslösa utan attribut, viktigast bild (image) <img> och länkar (a=anchor) <a>. Se nedan. Ett vanligt attribut är class, som används för formatering som angetts på annan plats.

Ett attribut anges alltid inuti starttaggen och har formen namn="värde".

4. ENSAMMA TAGGAR

4.1. Radbrytning

Vanliga radbrytningar i html-dokumentet tolkas som mellanrum. (Flera mellanrum anses även vara ett enda). För att det verkligen ska bli en radbrytning på skärmen, sätter man in den ensamma taggen <br> (break). Den har ingen sluttagg, eller om man så vill, både start- och sluttagg i ett. Numera bör man därför skriva <br />.

4.2. Bild

När man vill lägga in en bild i dokumentet, gör man det med taggen <img /> som talar om var man kan hämta bilden. Adressen till bilden anges attributet src (source, källa): <img src="http://malmvagn.se/pic/0304.jpg" />.

4.3. Horisontellt streck

Detta lägger man in med <hr />.

4.4. Ankare

En länk förbinder ett ställe i ett dokument med ett annat ställe i samm eller att annat dokument. På båda ställena lägger man ett ankare <a /> fast med olika attribut. Attributet href (Hypertext Reference) används i det första dokumentet och ger upphov till den bekanta klickbara länken. I det andra dokumentet använder man attributet name för att markera stället man ska gå till. Detta ankare syns inte på skärmen.

I dokument 1 lägger man in

<a href="dokument2.html">Gå till dokument 2 (början)</a>
eller
<a href="dokument2.html#inuti">Gå till dokument 2 (inuti)</a>

och i dokument 2

<a name="inuti">Tex på det stället inuti dokumentet</a>

4.5. Innehållsförteckning

Taggar som inte är definierade i standarden, ska ignoreras. Det innebär att man kan använda dem för att låta webservern göra ändringar i dokumentet innan det skickas. MBV använder <toc /> och <toc2 /> för att göra automatiska innehållsförteckningar. Har man använt korrekta rubriktaggar, slipper man en massa jobb.

5. OMVÄGAR FÖR VISSA TECKEN

Tecknen < och > används för att göra taggar, och taggar visas ju inte på skärmen. Om man ändå vill göra det får man skriva &lt; och &gt;. Då kommer nästa problem, hur skriver man &? Jo, man skriver &amp;.

Det finns massor av saker man kan skriva på detta sätt: ☭Ψℵ   ♠♣♥♦   ♛♡♚

6. ATT TÄNKA PÅ

  • Man får inte korsa taggarna:
      RÄTT:
    <aaa><bbb>Text</bbb><aaa>
      FEL:
    <aaa><bbb>Text</aaa><bbb>
  • Det går att använda Microsoft Word för att göra html-dokument. Gör inte det. Word lägger till oerhört mycket extra taggar som inte fyller någon annan funktion än att integerera dokumentet i Office-paketet och gör koden mycket svårläst.  
  • Oftast är det en god ide att göra indentation, dvs dra in en rad med ett par mellanslag när man infogar en ny tag i en tidgare. Se exemplen för punktlistor och tabeller nedan.

7. TAGGAR ATT ANVÄNDA I <body>

7.1.Rubriker <h1> till <h6>

Man kan ange rubriker (H = header) i 6 nivåer. MBV använder normalt nivåerna 3 - 6. Som i detta dokument t ex.

<h3<RUBRIK NIVÅ 3</h3>
<h4<RUBRIK NIVÅ 4</h4>
<h5<Rubrik nivå 5</H3>

7.2. Stycke

Stycke markeras av taggen <p></p> och innehåller vanligen en hel del ytterligare taggar

7.3. Fet, kursiv och understruken stil

<b>B = bold är fet </b> medan <i>I = italic är kursiv<i> och <u>U = underline är understruken stil</u>

7.4. Punktlistor

En punktlista definieras med <ul></ul>, Unordered List, oordnad lista. I denna infogas listelement <li></li>.

Kod Utseende
<ul>
<li>Första elementet</li>
<li>Andra elementet</li>
</ul>
  • Första elementet
  • Andra elementet
7.5. Numrerade listor

En numrerad lista definieras med <ol></ol>, Ordered List, ordnad lista. I denna infogas List Item, listelement <li></li>. Numreringen sker automatiskt.

Kod Utseende
<ol>
  <li>Första elementet</li>
  <li>Andra elementet</li>
</ol>
  1. Första elementet
  2. Andra elementet
7.6. Tabell

En tabell omges av <table></table>. Tabellen består av rader <tr></tr>. I varje rad ska det finnas en eller flera celler (table data) <td></td>. En variant på table data är <th></th> table header eller rubrik, som går att använda både för kolumn och rad. Exempel:

Kod Utseende
<table>
  <tr>
    <th>Kolumn 1</th>
    <th>Kolumn 2</th>
  </tr>
  <tr>
    <td>Text eller bilder</td>
    <td>Eller något annat</td>
  </tr>
</table>
Kolumn 1 Kolumn 2
Text eller bilder Eller något annat

8. HTML-EDITORN BLUEFISH

Bluefish ger användaren full kontroll över vilka taggar man sätter in. Däremot ser man inte direkt resultatet av sina ansträngningar. Man sparar (med ctrl-S) och öppnar dokumentet med en browser (t ex Firefox eller Internet Explorer), vanligtvis med att dubbelklicka på filnamnet. Det finns också en knapp i Bluefish för att göra detta, men den använder man bara första gången, sedan uppdaterar man browsern med F5.

8.1. Tangentbordsgenvägar

Man behöver inte alltid skriva in taggar för hand. Det finns flera snabbkommandon som sätter in dem omkring ett markerat stycke.

Tryck Kallas Resultat
Ctrl-Alt-3 Heading 3 Rubrik storlek 3 (kan vara 1 - 6)<h3></h3> <p></p>
Ctrl-Alt-P Paragraph (stycke) <p></p>
Ctrl-Alt-L Unordered List (punktlista) <ul></ul>
Ctrl-Alt-O Ordered List (numrerad lista) <ol></ol>
Ctrl-Alt-M List Item (listelement) <li></li>
Ctrl-Alt-K Break (Radbrytning) <br />
Ctrl-Alt-B Bold (fet) <b></b>
Ctrl-Alt-I Italic (kursiv) <i></i>
Ctrl-Alt-U Underline (understrykning) <u></u>
Skift-Alt-A Anchor (ankare) <a></a>
Skift-Alt-I Image (bild) <img />

F9 tar bort fillistan till vänster om man råkat få fram den (den behöver man oftast inte).

 Fil 0541 datum 2021-04-15