Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

Storlek: px

Starta visningen från sidan:

Download "Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550"

Lars Strömberg
för 8 år sedan
Visningar:

1 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och bartending. Efter att ha kikat runt lite och låtit mig inspireras av andra hemsidor så har jag kommit fram till ett upplägg som tilltalar mig. Kommer köra ett rött tema med mycket bilder och en enkel navigeringslista i toppen av sidan för att hålla den stilren. I <head> delen sätter man in t.ex <meta> taggar, referens till sin stilmall och en title på sidan. Detta är information som inte syns på webbsidan utan är mest till för att webbläsaren ska kunna tolka sidan på rätt sätt. I <body> sätts allt som visas på hemsidan in såsom rubriker, paragrafer, bilder, listor, tabeller m.m DTD deklareras som <!DOCTYPE> och är det första som skrivs in i ett html dokument. Detta används för att webbläsaren ska veta vilken version av html som sidan ska köras i, t.ex <!DOCTYPE html5>. Metataggar ska placeras i <head> och används för att visa saker såsom publicerare, ägare och söktaggar för sidan. Sätter min titel i <head> genom att deklarera <title>. Den visas i fliken längst upp i webbläsaren. När man deklarerar listor på hemsidor kan man göra på olika sätt, antingen kan man numrera listan eller göra en punktlista. Det kallas ordnad respektive oordnad lista. Här är min startsida, har försökt följa min Lo-fi skiss så gått som möjligt. Har velat hålla den så enkel som möjligt och undvika onödigt plotter. Har kört mycket bilder för att sidan ska ge ett trevligt första intryck för besökaren.

Efter att ha kikat runt lite och låtit mig inspireras av andra hemsidor så har jag kommit fram till ett upplägg som tilltalar mig.

2 Vidare till nästa sida som beskriver mer om restaurangen och vad de har för inspirationer och mål. Sidan innehåller även länk till en Youtube film och några andra branschrelaterade siter. Denna sida är väldigt simpel och innehåller egentligen bara en rubrik med tillhörande lista som visar restaurangens meny.

Sidan innehåller även länk till en Youtube film och några andra

3 Samma som föregående fast för drycker. En kontaktsida men restaurangens kontaktuppgifter och öppettider.

4 Här har jag ändrat och lekt runt lite i min CSS fil för att se hur stor skillnad man kan göra på startsidan med bara med några raders kod. Man får också bekräftat att html inte har något alls med layouten att göra utan att det är där av ren innehållssynpunkt. Del 3 Validering och test Har validerat mina sidor och rättat till de stora fel som fanns. Har även testat köra mina sidor i både Chrome, Firefox och IE med samma resultat som ni kan se på bilderna nedan. Chrome:

Man får också bekräftat att html inte har något alls med layouten att göra utan att det är där av ren

5 Firefox: Internet Explorer:

6 Reflektioner Jag tycker grundidén med att få välja fritt var utmärkt, det gav utrymme för mig som student att jobba med något jag kände var inspirerande och lärorikt på samma gång. Måste även ge en eloge till lärarteamet som erbjudit intressanta och lärorika föreläsningar under dessa inledande veckor. Som total nybörjare upplever jag att html och CSS är något som går ganska snabbt att sätta sig in i. Med det sagt så stötte jag ändå på ett antal mindre problem under labbens gång, framförallt med positionering av saker i CSS som visade sig vara lite besvärligt ibland. En bra sak med webbutveckling är att det är ett så stort område så informationen och hjälpen som finns tillgänglig online är närmast oändlig. Detta gjorde det relativt lätt att hantera de problemen som uppstod, det underlättade även att ge mig en djupare förståelse kring ämnet utöver det som föreläsningarna gav. Jag ser verkligen fram emot att köra nästa steg i laborationen och finslipa min hemsida ytterligare då jag känner att jag är långt ifrån klar!

Som total nybörjare upplever jag att html och CSS är något som går ganska snabbt att sätta sig in i.

Relevanta dokument

Webbteknik för ingenjörer

Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera