Show sourcecode
The following files exists in this folder. Click to view.
Komplettering.txt
Läs mig.txt
Processanalys.docx
fonts/
images/
includes/
kontakt.html
minatjanster.html
ommig.html
showcase/
showcase.html
startsida.html
stylesheets/
minatjanster.html
1 lines UTF-8 Unix (LF)
<!DOCTYPE html>
<html lang='sv'>
<head>
<title>Nicolas Dubray</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1"> <!-- Sätter "vyn" av sidan till enhetens bredd, och full skala från början. -->
<link rel="stylesheet" href="stylesheets/main.css" type="text/css">
<link rel="stylesheet" href="stylesheets/responsive.css" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Eftersom jag tänkte att överdelen och underdelen av startsidan kanske lämpligen kunde finnas med på alla sidor
(särskilt eftersom överdelen har en navigationsmeny) så har jag lagt dessa delar i varsin php-fil, vilket då ger mig två
filer jag smidigt kan inkludera på varje sida som skall ha någon eller båda av dessa delar. -->
<!-- Jag har valt att skriva HTML-koden (och CSS-koden) på så vis att den upplösning för mobilskärmar som jag valt som
den minsta upplösning med vilken sidan skall visas korrekt är utgångsläget för koden, eftersom det för mig känns bäst
att för responsiv design ha ett utgångsläge från vilket man kodmässigt antingen *enbart* förstorar eller förminskar.
Ex. så innebär detta att HTML- (och CSS-koden) har som utgångsläge att visa kolumnen som i mallen för desktop-sajten är
mittenkolumnen som den översta kolumnen (tekniskt sett, den "vänstra" kolumnen, eftersom det, med min lösning, är den
vänstra kolumnen som hamnar överst), vilket enligt uppgiftsbeskrivningen skulle vara fallet för mobil-sajten. -->
<header>
<!-- Jag har valt att för loggan inte direkt i HTML-koden skapa en img-tag som innehar logo-bilden utifall att
jag skulle vilja påverka val av logga i CSS-filer, ex. om jag skulle vilja ange en annan logga för utskrift.
Jag har givit divisionen nedan "logo" som ett id eftersom jag har tänkt att det på varje sida skall finnas
maximalt en sådan här logga.
Loggan har jag dessutom gjort till en länk som tar en till startsidan, för att göra den användarbar samt för att
följa den logo-"standarden". -->
<a href="startsida.html"><div id="logo"></div></a>
<!-- Jag har omslutit de länkar genom vilka man kan navigera runt sig till sajtens olika sidor med nav-taggar,
eftersom sådana taggar ämnade för att innehålla navigerings-element, ex. just text-länkar, liksom mina. -->
<nav>
<a href="ommig.html"> OM MIG </a>
<a href="minatjanster.html"> MINA TJÄNSTER </a>
<a href="showcase.html"> SHOWCASE </a>
<a href="kontakt.html"> KONTAKT </a>
</nav>
<!-- Jag har omslutit mina nyckelord med div-taggar vilka jag givit den semantiska betydelsen "keywords" eftersom
jag inte känner till någon HTML-tag som redan har den semantiska betydelsen. Jag har satt betydelsen som ett id
eftersom jag har tänkt att det på varje sida maximalt skulle finnas en sådan här division för nyckelord. -->
<div id="keywords">
<!-- Jag har valt att lista olika mjukvaruteknologier jag behärskar, i varierande utsträckning, som del av
en punktlista eftersom det i mall-bilderna för både desktop- och mobil-sidan uppgiftsbeskrivningen står
att man skulle ha en "Kort text / punkter om dig själv för att fånga intresse från en potentiell klient".
Jag har omslutit list-föremålen med strong-taggar för att bestyrka deras vikt. -->
<ul>
<li><strong>C++, C#, C, Java, Python, Assembler</strong></li>
<li><strong>HTML, PHP, CSS</strong></li>
<li><strong>DirectX</strong></li>
</ul>
</div> <!-- END KEYWORDS -->
</header>
<!-- Jag har valt att omsluta innehållet på startsidan med en division som jag jag givit den semantiska betydelsen
"columns_mains" eftersom jag vill att den skall inneha och arrangera kolumner, eftersom mallarna för både desktop-
och mobil-sajten visar startsidans innehåll inuti kolumner som är sida vid sida eller över/under varann. -->
<div id="columns_main">
<p>// UNDER CONSTRUCTION //</p>
</div> <!-- END COLUMNS_MAIN -->
<!-- Eftersom jag tänkte att överdelen och underdelen av startsidan kanske lämpligen kunde finnas med på alla sidor
(särskilt eftersom överdelen har en navigationsmeny) så har jag lagt dessa delar i varsin php-fil, vilket då ger mig två
filer jag smidigt kan inkludera på varje sida som skall ha någon eller båda av dessa delar. -->
<!-- Jag har valt att omsluta kontakt-informationen inuti address-taggar, eftersom sådana taggar är avsedda just för
sådan information. Upplägget skulle vara mer semantiskt korrekt om jag istället skulle omsluta telefonnumrena i en
div jag klassar/identifierar som "phonenumber", men jag tyckte att det blev lite väl pedantiskt. För övrigt är
formateringen av de angivna telefonnumrena är sådan att numrena faktiskt kan uppfattas som telefonnunmmer
av vissa mjukvaror, ex. Skype. -->
<footer>
<!-- Jag har valt att skilja address-elementen åt genom att omsluta de med div-taggar som jag behandlar som
kolumner. Alternativt hade jag kunnat skilja de åt genom att omsluta de i celler tillhörandes en tabell,
men man avvisades i uppgiftsbeskrivningen från att bruka tabeller för sidornas struktur. -->
<div class="column_footer">
<address>
<strong>Adress</strong>
<p>Storgatan 1<br>123 45 Lillestad</p>
</address>
</div>
<div class="column_footer">
<address>
<strong>Telefon</strong>
<p>0123 - 456 789<br>070 - 123 45 678</p>
</address>
</div>
<div class="column_footer">
<address>
<strong>E-post</strong>
<p>info@stortego.se<br>sales@stortego.se</p>
</address>
</div>
</footer>
</div> <!-- END WRAPPER -->
</body>
</html>