HTML & CSS

Jeg vil starte med at vise den mest simpel html side nedenunder

htmlside

Disse informationer skal være på et HTML side. <!DOCTYPE html> er kun til information, at dokumenttypen er html <html> betyder html side til sidst afsluttes den med </html> Header <head> er til link til styles filen, links til jQuery, links til framework også videre. Meta links kommer jeg ind på senere, samt de andre links.

Jeg vil starte med <body> som ender ved </body> her skal vi have vores html kode.  Den kan foreksempel se sådan ud!

html2

Hvis du gemmer denne side som index.html og starter den i en browser, så ser den sådan ud!

html2_visning

Bogstav Html-kodning Decimalværdi
æ &aelig; &#230;
ø &oslash; &#248;
å &aring; &#229;
Æ &AElig; &#198;
Ø &Oslash; &#216;
Å &Aring; &#197;

Meta linjerne er også en vigtigt del af HTML siden

<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Fri tekst som kommer til at stå i google annoncerne”>
<meta name=”keywords” content=”Tre til fem nøgleord”>
<meta name=”author” content=”Hege Refsnes”>
</head>
Nedenunder vises overskrift Munkøs Computer | Hvad kan vi, som er skrevet i <title> herefter er der linket til siden og tilsidst beskrivelsen som skal stå i <meta nme=”description” content=”Her!”>
google_visning
De nye div i HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”UTF-8″>
<title>Navn på hjemmesiden</title>
<link rel=”stylesheet” type=”text/css” href=”screen.css”>
</head>
<body>
<div id=”container”><!–container for definere siden–>
<header><!–banner–>
<img src=”inc/banner.png” width=”980″ height=”150″>
</header>
<nav><!–navigationsbar–>
<ul>
<li><a href=”/index.php”>Forside</a></li>
<li><a href=”/side2/index.php”>Side2</a></li>
<li><a href=”/side3/index.php”>Side3</a></li>
<li><a href=”/side4/index.php”>Side4</a></li>
</ul>
</nav>
<div id=”content”><!–content indrammer indhold på siden–>
<section id=”slider”><!–imageslider –>
</section>
<section><!–indhold midt på siden–>
</section>
<section =id=”columns”>
<article id=”column1″><!–tekstkolonne1–>
<header>
<h1>Kolonne1</h1>
</header>
<p>Tekst</p>
</article>
<article id=”column2″><!–tekstkolonne2–>
<header>
<h1>Kolonne2</h1>
</header>
<p class=”mintekst”>Tekst</p>
</article>
<article id=”column3″><!–tekstkolonne3–>
<header>
<h1>Kolonne3</h1>
</header>
<p>Tekst</p>
</article>
</section>
<section>
<footer><!–Footer–>
<p>En eller anden form for footer</p>
</footer>
</section>
</div>
</div>
</body>
</html>
Når man skal style skal man have et stylesheet eksempel sreen.css
  • id styles med #column3{ her skrives css }
  • class styles med .mintekst{ her skrives css}

Se mere under Stylesheet CSS

Hvis du skal bruge jQuery kan du benytte en af dem eller begge. Disse linjer eller linje skal også placeres under <head> herinde </head>

<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

Se mere under JavaScript og jQuery

Framework Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Se mere under Bootstrap framwork

Table (rows lægges sammen)

<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan=”2″>$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Ved kolonne kan man bruge colspan=”4″ som eksempel