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/
startsida.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>
<!--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. -->
<div id="wrapper">
<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">
<!-- Eftersom den minsta mobilupplösning jag designat för är utgångsläget för sajtens kod så är kolumnen med
bilden på mig ("me.jpg") den första kolumnen, och därmed den väntra, kolumnen intuti kolumn-behållaren,
eftersom denna behållare visar den första/vänstra kolumnen överst när webbläsarfönstret blir såpass
smalt att bara en kolumn får plats i bredd inuti det. -->
<div class="column_main_a">
<!-- Jag har valt att omsluta kolumnernas img-taggar med divisioner jag givit olika semantiska
betydelser som avser just bild-behållande för de olika kolumnerna. -->
<img class="center_top circled" src="images/me.jpg" alt="Bild på Nicolas">
<p><em>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</em>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
<p>Source: <a href=http://veggieipsum.com/>veggieipsum.com</a></p>
</div>
<div class="column_main_b">
<img class="left_top circled" src="images/coding2.jpg" alt="Bild på kod">
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisi nec nisl feugiat luctus ac et massa. Nunc scelerisque libero eu magna consectetur, in facilisis ex rutrum. Suspendisse rutrum mi sit amet tortor luctus rhoncus.</em></p>
<p>Duis placerat feugiat sem, eget dictum libero mattis eget. Vestibulum ligula dolor, cursus at lacinia sed, mollis vel dui. Proin tempor in quam in pellentesque. Nullam ultricies vitae elit at porttitor.</p>
<p>Nulla eu nulla vel nibh porta luctus ut et felis. Nam mattis pellentesque mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Curabitur bibendum ex lobortis, lobortis enim cursus, pharetra purus. Nunc dictum ante sed dui tincidunt luctus.</p>
</div>
<div class="column_main_c">
<img class="right_top circled" src="images/writing4.jpg" alt="Bild på penna">
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisi nec nisl feugiat luctus ac et massa. Nunc scelerisque libero eu magna consectetur, in facilisis ex rutrum. Suspendisse rutrum mi sit amet tortor luctus rhoncus.</em></p>
<p>Duis placerat feugiat sem, eget dictum libero mattis eget. Vestibulum ligula dolor, cursus at lacinia sed, mollis vel dui. Proin tempor in quam in pellentesque. Nullam ultricies vitae elit at porttitor.</p>
<p>Nulla eu nulla vel nibh porta luctus ut et felis. Nam mattis pellentesque mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Curabitur bibendum ex lobortis, lobortis enim cursus, pharetra purus. Nunc dictum ante sed dui tincidunt luctus.</p>
</div>
</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>