Index html
Här kommer jag att beskriva viktiga delar av HTML koden exempelvis hur jag har gjort sidan anpassad för responsiv design, tillgänglighet och prestanda.
I head har jag följande rad:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Den här raden justerar viewport, den synliga ytan, till den bredd som enhetens skärm kan hantera. Den sätter också zoomnivån till 100%, vilket förhindrar att sidan laddas in inzoomad eller utzoomad.
I head har jag även denna rad:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">Här läser jag in en bra font till sidan, men endast dom storlekana jag tänker använda till sidan, detta är för att minska datan som behövs laddas in när man öppnar sidan vilket gör att den får en snabbare laddtid.
Här har vi navbaren:
<nav aria-label="Huvudnavigation">
<a class="logo" href="index.html">Paolos webbtjänst</a>
<ul>
<li><a href="index.html">hem</a></li>
<li><a href="tekniker.html">tekniker</a></li>
<li><a href="projekt.html">projekt</a></li>
<li><a href="om.html">om</a></li>
</ul>
</nav>Här skapas navigeringsbar, genom att skapa en lista som jag sedan applicerar en stil på i CSS. Jag använder mig av aria-label, för en bättre tillgänglighet, aria-label läser upp Huvudnavigation vilket gör det lättare för personer med nedsatt syn att navigera. Det är dock inget som visas på sidan. Det finns också en länk till första sidan uppe till vänster på sidan om man trycker på sidans namn.
I nästa del är huvudinnehållet på sidan:
<section class="banner hero" aria-label="Introduktion">
<p class="eyebrow">Webbutveckling & design</p>
<h1>Paolos webbtjänst</h1>
<p class="sub">
Välkommen till Paolos webbtjänst. Jag har på kort tid lärt mig en mängd webbtekniker och är nu redo att
hjälpa dig att få ett bra hem på nätet. Tveka inte att höra av er till mig så kan vi diskutera hur jag
kan bygga rätt lösning för just dig eller ditt företag.
</p>
<a href="om.html" class="btn">Kontakta mig</a>
<img src="img/paolo.jpeg" alt="Paolo">
</section>Jag använder section taggar för att gruppera innehållet. Klassen heter banner hero som är en term som används inom design, för huvudinnehållet. Det finns också en klass som heter eyebrow, som är texten ovanför hero klassen. Texten ligger under klassen sub. Rubriken är Paolos webbtjänst inom h1 tag, som man endast borde använda 1 gång per sida. Texten kontakta mig har en klass som heter btn, för att det ska ske ut som en knapp btn (button).’
Det sista på sidan är att ladda in javascripten:
<script src="app.js"></script>Tekniker html
Följande kod är värt att gå igenom:
<main class="content">
<div class="card-grid">
<article class="card">
<img src="img/html.png" alt="HTML5 logotyp">
<div class="card-body">
<h2>HTML5</h2>
<p>
HTML5 är grunden i de webbsidor som jag skapar men jag behärskar också HTML4.01 om du tycker att
utvecklingen går för fort. HTML är ett märkspråk som utgör själva ramen för webbsidorna som jag sedan
med hjälp av andra tekniker formaterar så att de ser ut som vi vill.
</p>
</div>
</article>
</div>
</main>Först har jag en klass som heter content, den används för att centrera innehållet och lägga till marginaler på sidan om texten. Denna klass används på flera sidor.
Det finns också en div klass som heter card-grid. Denna används för att skapa struktur för att visa teknikerna som kort. Sedan kommer själva korten, som tillhör klassen card. Notera också att jag använder taggen article för att ha rätt semantisk html. Inom card har vi klassen card-body, som innehåller en h2 heading, samt huvudinnehållet i en paragraph.
Om html
På denna sidor har jag kontaktuppgifter i en tabell enligt nedan:
<h2>Kontaktuppgifter</h2>
<table>
<tbody>
<tr>
<th>Mail</th>
<td><a href="mailto:paolo@paolowebb.se">paolo@paolowebb.se</a></td>
</tr>
<tr>
<th>Telefon</th>
<td>070-1234567</td>
</tr>
<tr>
<th>Twitter</th>
<td><a href="https://twitter.com/paolowebbse" target="_blank" rel="noopener noreferrer">@paolowebbse</a></td>
</tr>
<tr>
<th>Facebook</th>
<td><a href="https://www.facebook.com/paolowebbse" target="_blank" rel="noopener noreferrer">facebook.com/paolowebbse</a></td>
</tr>
</tbody>
</table>I koden så används table body (tbody), table row (tr), table header (th), och table data (td). Här används inga speciella klasser då det ändå är lätt att formatera den eftersom jag bara har en tabell. Länkarna öppnas i ett nytt fönster eftersom target=”_blank”. Den sätter också noreferrer för att inte ge sidan som öppnas information om vilken sida användaren kom ifrån.
Sen kommer det ett formulär:
<section aria-labelledby="form-heading">
<h2 id="form-heading">Skicka ett meddelande</h2>
<form action="#" method="post">
<label for="name">Namn</label>
<input id="name" type="text" name="name" placeholder="Ditt namn" autocomplete="name">
<label for="email">E-post</label>
<input id="email" type="email" name="email" placeholder="din@epost.se" autocomplete="email">
<label for="subject">Ämne</label>
<input id="subject" type="text" name="subject" placeholder="Vad handlar det om?">
<label for="message">Meddelande</label>
<textarea id="message" name="message" placeholder="Berätta mer..."></textarea>
<button type="submit">Skicka meddelande</button>
</form>
</section>Just nu är form action # vilket innebär att informationen inte skickas någonstans. Varje fält har en label, detta gör att fältet som man är inne på highlightas. Jag använder också placeholder, för att visa vad det är man ska fylla i fältet. Sen har vi autocomplete=”name”, detta säger till webbläsaren att den förväntar sig ett fullt namn, detta gör att webbläsaren kan autofylla namnet efter tidigare formulär som man har skrivit in sitt namn. Det finns också en textarea där man ska skriva i sitt meddelande. Slutligen har vi knappen för att skicka in formuläret, som hetter button med type submit.
