Rapport Webbutveckling LAB 1 Författare: Christofer Wållberg 1
Innehållsförteckning 1.Inledning s. 3 1.1 Syfte s. 3 1.2 Mål s. 3 1.3 Metod s. 3 1.4 Material s. 3 1.5 Avgränsning s. 3 2 Resultat s. 3 2.1 HTML Begrepp s. 4 2.2 Flödesschema s. 5 2.3 Skärmdumpar av hemsidan s. 6 2.4 Urval av Html och CSS koder s. 7-15 3 Avslutande diskussion s. 15 Separat bilaga, Flödesschema 2
1. Inledning Bakgrunden till att jag gick denna kurs är det var en del kursutbudet på mitt program. 1.1 Syfte Att lära mig grunderna inom webbprogrammering och skapa en informativ hemsida i enlighet med den lofi papperstyp jag gjorde i börjat av kursen. Webbsidans innehåll ska vara om Universum och Carl Sagan en frontfigur inom NASA och Astronomi. 1.2 Mål Jag ska genomföra projektet enligt gällande villkor för HTML och CSS webbprogrammering i enlighet med gjord Lofi pappersprototyp. 1.3 Metod Jag ska delta på att föreläsningar och lektioner i så stor utsträckning som det är möjligt. Sen förut har jag skrivit en rapport om Rymd-teknik och kommer använda mig av del av denna rapport i min html sida. 1.4 Material Det material som jag har använt mig av är informationen på Moodle samt lyssnat på föreläsningar för att hitta inspiration till min sida. 1.5 Avgränsning Jag har valt att avgränsa min hemsida mot Rymd-teknik, Historisk rymdutveckling och Planeter samt viktiga gestalter inom Astronom och Rymdfysik/fysik. 2. Resultat Här kommer jag presentera det jar har kommit fram till och underliggande rubriker är det jag anser är det viktigaste av mitt resultat i rapporten. 3
2.1 HTML Begrepp Enligt anvisningar ska vi ta reda på en del begrepp inom såväl HTML och CSS och jag har valt att skriva dem inom pil-paranteser <>. <!DOCTYPE html> anger versionen av HTML. <html> här är koden/sidbeskrivningsspråket </html> <head> innehåller information om meta data</head> <meta taggarna innehåller information om stilen på dokumentet, stil, länkar, script och annan meta information> <meta name="dcterms.identifier" content="www.trafikverket.se/" /> <meta name="dcterms.creator" content="trafikverket" /> <meta name="dcterms.publisher" content="trafikverket@trafikverket.se" /> <meta name="dcterms.title" content="startsida" /> <title> anger namn på flikarna och finns också i sökverktyget definierar en titel webbläsaren verktygslåda erbjuder en titel för sidan när den läggs till favoriterna porträtterar en titel för sidan i sökmotorer </title> <body> Här lägger man information om hemsidan och det innehålla allt från fördefierade taggar som <section> till olika headlines och class- eller id-taggar. <h1> </h1> </body> <p> Här är skriver man sin text</p> 4
2.2 Flödes-schema Här ser ni ett flödesschema hur min sida fungerar, bilden här nedan finns i ett separat bilaga. 5
Christofer Wållberg 2.3 Skärmdumpar från hemsidan Här är ett urval av skärmdumpar som visar skillnad mellan olika css mallar men samma html kod. 1) index.css 2) stilmall.css 6
2.4 Urval av Html och CSS koder CSS.container{ height: margin: 2560px; 1440px; 20px auto;.header1{ margin: verdana; 1600px; 20px auto; #CD00CD;.header2{ margin: verdana; 1600px; 20px auto; 40px; #CD00CD;.header3{ verdana; 1600px; margin: 20px auto; #CD00CD; 7
.redish { red;.yellowish { yellow;.whitish { white;.starrysky1{ margin:.planets{ margin:.undertext{.audio {.video{ 800px; 800px; 800px; 1600px; 20px auto; 1600px; 20px auto; 16px 16px; 16px; 8
.paragraph1 { #CBCBCB; helvetica 800px;.paragraph2 { #2B2B2B; 800px; helvetica;.paragraph3 { #CD96CD; 800px; helvetica;.paragraph4 { #242424; 800px; helvetica;.cosmosintro { 16px; nav ul li { verdana; #990099; 40px; 300px; list-style: none; float: left; border-style: solid; border- 5px; border-radius: 100px; border-top-left-radius: 2em; border-top-right-radius: 2em; 9
border-bottom-right-radius: border-bottom-left-radius: text-align: border- 2em; 2em; center; #FF00FF; section { margin: list-style: 1600px; 20px auto; #CBCBCB; none; body { background: url(../css/universe1.jpg) no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; footer ul li { verdana; #990099; 40px; 300px; list-style: none; float: left; border-style: solid; border- 5px; border-radius: 100px; border-top-left-radius: 2em; border-top-right-radius: 2em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em; text-align: center; border- #FF00FF; header { verdana; 100px; 10
text-align: center; #FF00FF; form label { 40px; p { helvetica; 800px; figcaption { helvetica; table { HTML <!DOCTYPE html> <html lang="en" "sv"> <head> <title>universe</title> <meta charset= utf-8 > <meta name="dcterms.identifier" content="www.universe.com/" /> <meta name="dcterms.creator" content="universe" /> <meta name="dcterms.publisher" content="christofer.wallberg@gmail.com" /> <meta name="dcterms.title" content="universe" /> <link rel="stylesheet" href="../css/index.css" media="screen"> <link rel="stylesheet" href="stilmallutskrift.css" media="print"> </head> <body> <div class="container"> <header> 11
<h1>space odyssey</h1> </header> required> <nav> <ul> </ul> </nav> <li><a href="2b_1.html">endless universe</a></li> <li><a href="2b_2.html">planets</a></li> <li><a href="2b_3.html">spacetechnology</a></li> <li><a href="2b_4.html">physics</a></li> <li><a href="2b_5.html">future of Space</a></li> <li><a href="2b_6.html">souvenirshop</a></li> <li><a href="2b_7.html">spaceforum</a></li> <li><form class="form-wrapper cf"> <input type="text" placeholder="search here..." <button type="submit ">Search</button></li> <section> <div class="header1"> <h2> A tribute to Carl Sagans Cosmos </h2> "1080" /> <div class="starrysky1"> <img src="../bilder/starrysky1.jpg" alt="stars" width= "1600" height= <figcaption class="whitish">our universe</figcaption> <div class="header2"> <h2> Our place in the Cosmos </h2> <div class="whitish"> <p> The cosmos is another word for universe and means " the ordered world" and according to classical philosophy, the meaning of the word order" is opposite to "chaos". Make sure therefore, to connect your seatbelt and prepare yourselves for a chaotic space-voyage towards the unknown! </p> <div class="header2">big Bang 12
<div class="whitish"> <p> It is unclear if the universe have a real beginning, the supposed beginning may have happened between 13 billion to 20 billion years ago. A reasonable analysis can be that sometime for 15 billion years ago, it all started and there was not time or a spatial dimension and an emptiness stretched across the ocean of space. If you imagine a huge explosion in space where all matter were scattered when the universe were created. Follow me in imaginary spaceship as we travel through space in that moment, then huge quantities of light beams will appear during the trip. The universe was heated to an incredible amount of temperature which is estimated to be millions of degrees. We can imagine that the light rays are excess energy like for example heat being sent off in different directions throughout the universe. Over time, it became slowly colder and the universe expanded exponentially. From the chaos arose order, but how did the Big bang occur is the question that one may ask? There was no materia outside the Big Bang and the universe arose at the very moment when the materia was created. Therefore did Big bang occur everywhere. Millions of years passed with disorder in space but when individual clouds created materia, so did they replace chaos with order. The materia contained the element hydrogen and had simple atomic structure. This light-weight element led possibly to the formation of heavier elements. The expansion of the universe led to clusters of galaxies that rotated and rotated but some did not rotate. These ones formed stars within these galaxies, for example M87 in the Virgo cluster. Some stars were so massive and filled with light that they only existed for a while and then exploded in supernovas. </p> <div class="cosmosintro"> <div class="header1"> <h2> Introduction to Cosmos</h2> <video width= "1600" height="900" src="../videos/carl Sagan - Cosmos Intro.mp4" controls preload> <p class="whitish"> Try this page in a modern browser! Or you can <a href="https://www.youtube.com/watch?v=r7n71pm0k04">download the video</a> instead.</p> </video> <figcaption class="whitish">cosmos Intro</figcaption> <div class="header2"> 13
<h2> Unifying the human race</h2> <video width= "1600" height="900" src="../videos/the Full Sagan Series 1-9 HD.mp4" controls preload> <p class="whitish"> Try this page in a modern browser! Or you can <a href="https://www.youtube.com/watch?v=tijxmhhuwgq">download the video</a> instead.</p> </video> <figcaption class="whitish">cosmical abundance of life</figcaption> <div class="header2"> <div class="audio"> <h2> Spacesound surreal </h2> <audio controls> <source src="../audio/space.ogg" type="audio/ogg"> <source src="../audio/space.m4a" type="audio/mpeg"> <source src="../audio/space.mp3" type="audio/mpeg"> </audio> <figcaption class="whitish">spacesound</figcaption> <div class="header2"> <h2> Space messages </h2> <form> <label>name</label> <input name="name" placeholder="type Here"> <label>email</label> <input name="email" type="email" placeholder="type Here"> <label>message</label> <textarea name="message" placeholder="type Here"></textarea> <input id="submit" name="submit" type="submit" value="submit"> </section> </form> 14
<footer> </ul> </footer> <ul> <li>contacts</li> <li>layout</li> <li>language</li> <li>library</li> <li>space-time </li> </body> </html> 3. Avslutande diskussion Efter ett flertal laborationer och föreläsningar har jag förstått hur man använder sig av HTML och CSS. Det har varit en mycket lärorik tid och jag har funnit det fascinerande att göra en webbsida utifrån mitt valda intresseområde. Jag har förstått viktiga begrepp och anser mig kunna betydligt mer om webbprogrammering än det jag har lärt mig på egen hand. Tempot har varit tufft men jag har lyckats få färdig HTML koden och två CSS-stilmallar. Jag har fått tillbaka mitt intresse av webbprogrammering och skaffat mig mer kompetens men framförallt erfarenhet inom detta område. 15