HTML

Samtliga HTML-filers body består i första led/förgreningspunkt av tre sibling elements: header, main, footer. I headern visas information om vad vår sida är och även navigation. I main finns allt huvudinnehåll på sidan. I footern finns copyrightinformation och sociala medier-länkar.

Innehållet i header och footer är likadant genom samtliga sidor/HTML-filer.

Innehållet i main skiljer sig åt mellan sidorna/HTML-filerna.

Header

Header består av:

1 st rubrik 'h2' som också är en länk 'a' till startsidan index.html, denna är sidans logotyp.

1 st 'span' som fungerar som toggler för att öppna navbar då sidan visas på liten skärm. Denna är gömd i desktop mode.

1 st 'nav' som i sin tur innehåller 5st länkar 'a', 4 av dessa leder till övriga sidor/HTML-filer och den femte används som button för att stänga navbar då sidan visas på liten skärm. Denna är gömd / går ej att nå i desktop mode.

Main

Main i HTML-filen “index” består av:

Två “section” som i sin tur består av två “article” med olika innehåll, detta för att vår landing page har flera olika delar som behöver delas upp på olika sätt. Vår första “section” innehåller i sin tur två “article”. Den första innehåller två “div”, som inte har något text-innehåll i HTML-filen utan hämtar och visar sitt innehåll från API:et via javascript. Den andra “article” innehåller fyra “div” och “span”, med text som beskriver vad för data som visas, t ex soluppgång och solnedgång, och varje rad av text kompletteras sedan med denna information från API:et genom javascript.

Vår andra “section” innehåller två “article” med tre “div” var, som alla får sitt innehåll från API:et via javascript. I den första “article” visas väderprognosen under dagen, vid fyra olika tider med 3 timmars mellanrum. I den andra “article” visas prognosen för fyra dagar fram.

Main i HTML-filen “about” består av:

I denna main har vi en “article” med två “section”. Här har vi delat upp en paragraf med text om Weather Forecast AB med två bilder, med rubriken i första “section”. Detta har vi gjort för att kunna dela upp det med hjälp av flex-containers, så att de hamnar under varann i mobile, och för att det ska hamna en paragraf text tillsammans med en bild bredvid varann på desktop.

Main i HTML-filen “contact” består av:

En “article” med två “section”. En “section” för en rubrik och text som informerar vad användaren kan kontakta oss om, och som även innehåller vårt formulär där användaren kan skicka in det de skriver i text-rutan, och en “section” för en bild på “oss”. Detta är uppdelat så för att texten och formuläret skall hamna tillsammans och bilden skall hamna bredvid i desktop.

Main i HTML-filen “search” består av:

Två “article”. Den första består av en rubrik som beskriver vad användaren kan göra, “Search for a city to get the weather forecast” samt ett formulär för att utföra detta. I formuläret har vi gjort en “span” för att kunna hämta den data vi vill genom javascript-filen för “search”. Vår andra “article” på denna sida har inget innehåll i HTML-filen utan har en klass och ett id för att kunna hämta innehållet från API-et och visa det genom javascript.

Footer

Footer består av:

En paragraf med texten “© 2023 Weather Forecast AB” samt en “div” bestående av tre ikoner för tre olika sociala medier. Facebook, Instagram och Twitter. Varje ikon är en länk som tar användaren till respektive hemsida.