Denne siden vil forklare hvordan du kan lage en html artikkel for infobanken i TDT4102.
Innhold
Det første du vil gjøre er å oprette et html-dokument inne i mappen Articles. Filen skal ha navn på formen Tittel ~ beskrivende punkt, beskrivende punkt.html. Eventuelt bare Tittel.html.
Det første du vil gjøre når du har oprettet html-dokumentet er å kopiere og lime inn malen under inn i dokumentet. Erstatt de to plassene det står "Tittel" med tittelen for artikkelen.
Resten av artikkelen skal skrives mellom <!-- Innholdskrives underher --> og <!-- Innhold skrives over her -->.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../CSS and JS\style.css">
<link rel="stylesheet" href="../CSS and JS\prism.css">
<title>Tittel</title>
</head>
<body>
<h1>Tittel</h1>
<!-- Innhold skrives under her -->
<!-- Innhold skrives over her -->
<script src="../CSS and JS\prism.js"></script>
<script src="../CSS and JS/copy.js"></script>
</body>
</html>
Merk: artikkelen skal vises inne i VS Code. En av konsekvensene med dette er at de fleste kommer til å lese artikkelen med halv skjermbredde. Ta dette med i beregning hvis du vurderer hvor stor plass noe tar.
Du kommer til å bruke malen (samt kodeblokk-malen) ofte, derfor kan det være nyttig å få VS Code til å autofylle malene på samme måte som den kan fulføre andre kodesnutter for deg. Gå til File -> Preferences -> User Snippets og velg html (File er Code i macOS). Legg så til kodeblokken under inni krøllparantesene {}.
"Article template": {
"prefix": "Article",
"body": [
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
"\t<meta charset='UTF-8'>",
"\t<meta http-equiv='X-UA-Compatible' content='IE=edge'>",
"\t<meta name='viewport' content='width=device-width, initial-scale=1.0'>",
"\t<link rel='stylesheet' href='../CSS and JS\\style.css'>",
"\t<link rel='stylesheet' href='../CSS and JS\\prism.css'>",
"\t<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">",
"\t",
"\t<title>${1:Tittel}</title>",
"</head>",
"<body>",
"\t<h1>${1:Tittel}</h1>",
"\t",
"\t$0",
"\t",
"\t<script src='../CSS and JS\\prism.js'></script>",
"\t<script src='../CSS and JS/copy.js'></script>",
"</body>",
"</html"
],
"description": "Template for infobank article"
},
"Code snipet template": {
"prefix": "Code",
"body": [
"\t<pre>",
"\t\t<button class=\"copy\" title=\"Copy\"><i class=\"material-icons\" style=\"font-size: 1rem; position: relative; top: .15rem;\">content_copy</i></button>",
"<code class='language-cpp'>",
"$0",
"</code>",
"\t</pre>",
],
"description": "Template for infobank code block"
}
For å søke etter snippetene kan du skrive Article eller Code og trykk tab for at kodesnutten skal limes inn i dokumentet.
Mesteparten av teksten i artikkelen faller inn under typen paragraf. Under ser du koden for dette avsnittet. Merk at linjeskifte i koden ikke gir ny linje i teksten. Se eget avsnitt for dette.
<p>
Mesteparten av teksten i artikkelen faller inn under typen paragraf.
Under ser du koden for dette avsnittet.
Merk at linjeskifte i koden ikke gir ny linje i teksten.
Se eget avsnitt for dette.
</p>
I malen bruker vi <h1> og <h1/> for å lage tittelen for artikkelen. For å ha overskrifter for de ulike seksjonene kan vi på samme måte bruke <h2> og <h2/>. Hvis vi vil ha underoverskrifter kan vi bruke <h3> og <h3/> og mønsteret er støttet videre helt til <h6> og <h6/>.
For å gi søtte for innholdsfortegnelse, dvs. for at det skal gå ann å hoppe til avsnittet (se avsnittet om innholdsfortegnelse her), må man legge til en ID til nøkkelordet. ID-konvensjonen er at man bruker samme navn som tittelen men erstatter norske tegn med bokststaver a-z (æ->ae, ø->o og å->a) og mellomrom med _. Det er også mulig at andre spesialtegn ikke vil fungere, så test alltid innholdsfortegnelsen for feil før du publiserer.
I eksempelet under lager vi noen overskrifter som er kompatable med innholdsfortegnelsen laget i avsnittet om innholdsfortegnelse.
<h2 id="Forste_tittel">Første tittel</h2>
<p>Eksempel paragraf under første tittel</p>
<h2 id="Forste_undertittel">Første undertittel</h2>
<h2 id="Andre_undertittel">Andre undertittel</h2>
<h2 id="Andre_tittel">Andre tittel</h2>
<h2 id="Tredje_tittel">Tredje tittel</h2>
Eksempel paragraf under første tittel
Innholdsfortegnelse er tenkt som et redskap man kan bruke på lengre artikler. En tommelfingerregel er at hvis artikkelen er mer en dobbelt så stor som det du kan se uten å bla nedover, kan det være lurt med en innholdsfortegnelse.
For å lage en innholdsfortegnelse tar du utgangspunkt i eksempelet under. Første tittel, Første undertittel, osv. er teksten som vises i innholdsfortegnelsen. Forste_tittel, Forste_undertittel, osv. er id-en på headerene. href="#Forste_undertittel" gjør at når du klikker på teksten hopper du ned til den seksjonen i teksten.
<div id="toc_container">
<p class="toc_title">Innholdsfortegnelse</p>
<ul class="toc_list">
<li><a href="#Forste_tittel">Første tittel</a>
<ul>
<li><a href="#Forste_undertittel">Første undertittel</a></li>
<li><a href="#Andre_undertittel">Andre undertittel</a></li>
</ul>
</li>
<li><a href="#Andre_tittel">Andre tittel</a></li>
<li><a href="#Tredje_tittel">Tredje tittel</a></li>
</ul>
</div>
Innholdsfortegnelse
I c++ bruker man ofte < og >, men som du kanskje har oppdaget er disse symbolene sentrale i html. Html-dokumentet vil derfor tolke disse symbolene som html fremfor tekst. For å kunne skrive disse symbolene uten at det tolkes som html, må du derfor bruke det tilsvarende html-navnet på symbolet. For å skrive < må man i html skrive &lt og for å skrive > må man skrive &gt. Untaksvis kan man skrive < hvis den ikke står sammen med > (og motsatt), men du kan lett dukke opp i problemer, så bruk i hovedsak &lt istedenfor < i html-koden.
Eksempel:
<p>
For å caste en bokstav 'a' til int kan man bruke static_cast:
static_cast&ltint&gt('a');
</p>
Dette gir ressultatet:
For å caste en bokstav 'a' til int kan man bruke static_cast: static_cast<int>('a');
For å lenke til en nettside bruker man nøkkelordet a sammen med href="nettside-url". Under ser du et eksempel på hvordan man kan bruke dette.
<p>
For å gå til example.com: <a href="https://example.com/">trykk her</a>
</p>
<a href="https://en.cppreference.com/w/">Trykk her for å gå til cppreference</a>
Dette gir ressultetet:
For å gå til example.com: trykk her
Trykk her for å gå til cppreferenceMan kan også linke til en seksjon i artikkelen. Da bruker man istedenfor en url #id_til_headeren
<a href="#innholdsfortegnelse">Dette er en lenke til innholdsfortegnelsen som har id = "innholdsfortegnelse"</a>
Dette gir ressultatet:
Eksempel:
<p>
For å legge til et linjeskifte, <br>
kan man bruke br nøkkelordet.
</p>
Dette gir ressultatet:
For å legge til et linjeskifte,
kan man bruke br nøkkelordet.
En av hovedfordelene med å bruke html for å skrive artikkler for c++ er at det er lagt til støtte for kodeblokker i c++.
Du har kanskje allerede lagt merke til at dette dokumentet inneholder flere kodeblokker med html-kode.
På samme måte vil c++ kodeblokkene bli fargekodet etter c++ syntax og ha en kopier innhold-knapp oppe i høyre hjørne.
En anen fordel med kodeblokkene er at koden er forrhåndsformatert.
Med dette menes at linjeskifte (\n), innrykk (\t) og annen formatering vil beholdes i utskriften.
Merk: dette betyr at koden må rykkes inn helt til venstre i html dokumentet, dvs uten innrykk.
Merk: du må fortsatt ta høyde for bruk av spesialtegn. Se her for mer info.
Eksempel (her er <pre> rykket inn for å poengtere at innrykk for koden fjernes):
<pre>
<button class="copy" title="Copy">✂</button>
<code class="language-cpp">
CardDeck::CardDeck()
{
for (int s = 0; s < 4; s++)
{
for (int r = 0; r < 13; r++)
{
Card tempCard {static_cast<Suit>(s),static_cast<Rank>(r)};
cards.push_back(tempCard);
}
}
}
</code>
</pre>
Dette gir ressultatet:
CardDeck::CardDeck()
{
for (int s = 0; s < 4; s++)
{
for (int r = 0; r < 13; r++)
{
Card tempCard {static_cast<Suit>(s),static_cast<Rank>(r)};
cards.push_back(tempCard);
}
}
}
<pre>
<button class="copy" title="Copy"><i class="material-icons" style="font-size: 1rem; position: relative; top: .15rem;">content_copy</i></button>
<code class="language-cpp">
</code>
</pre>
For å legge til bilder (her søttes alt fra png til gif) bruker du image nøkkelordet. Bildet du bruker lagrer du i media folderen i infobank (for større artikler lager du egen mappe), så kopierer du bildeadressen til bilde og legger det inn som kilde (src). alt betegner meldingen som skrives ut hvis bildet ikke lastes inn riktig.
Eksempel:
<img alt="Could not load image" src="https://gitlab.stud.idi.ntnu.no/tdt4102/infobank/-/raw/master/Media/copyImgLink.gif">
Som standard vil bildene bruke halve bredden av vinduet. Dette er fordi da kan to bilder vises side om side. Hvis du ønsker at et bilde skal ta hele bredden av vinduet kan du legge den til klassen "wide" slik:
<img class="wide" alt="Could not load image" src="https://gitlab.stud.idi.ntnu.no/tdt4102/infobank/-/raw/master/Media/excampleImg.jpg">
Eksempel:
<p>
<i>Denne teksten er italic.</i> <br>
<b>Denne teksten er bold.</b> <br>
<i><b>Denne teksten er begge deler.</b></i>
</p>
Dette gir ressultatet:
Denne teksten er italic.
Denne teksten er bold.
Denne teksten er begge deler.
For å lage en punktliste kan man skrive dette:
<p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<ul>
<li>Underpunkt 1</li>
<li>Underpunkt 2</li>
</ul>
<li>Punkt 3</li>
</ul>
</p>
Dette gir ressultatet:
For å lage en ordnet liste kan man skrive dette:
<p>
<ol>
<li>Punkt</li>
<li>Punkt</li>
<ol>
<li>Underpunkt</li>
<li>Underpunkt</li>
</ol>
<li>Punkt</li>
</ol>
</p>
Dette gir ressultatet:
I all hovesak skal det meste av html fungere i vs code. Det er et par unntak, så test nøye om det fungerer i vs code hvis du gjør noe utover det som er beskrevet i dette dokumentet. Vær også særlig tilpasselig på å legge til farger, ettersom vs code har flere fargetemaer. For mer informasjon om hvordan du bruker html se her.