In the first couple of lessons we learnt how to do basic HTML and CSS. We got given a story “The Frog Prince” and was told to make it into a basic website. I knew a little bit how to do this as a couple of lessons before we had learnt basic web design tags. Below is my example of all the tags that we had to use to make a basic website:

THIS IS THE HTML ONE:

DOCTYPE html>    The Frog Prince

<body>

wrapper”>

<h1>The Frog Prince

The Brothers Grimm

<p>Once upon a time, there lived a beautiful princess who had a golden ball. One day, while playing in the garden, the ball fell into a pond. She was very upset and did not know what to do. While she sat there cry¬ing helplessly, a frog hopped out of the pond and asked,  “Why are you crying, little princess?” She told him about her golden ball.</p>

<img src=”ballandprincess.jpg” title=”The Princess loosing her golden ball” />

The ugly frog said, “I can help you get your ball but what will you give me in return?” “I will give you any¬thing you want!” promised the princess. The frog immediately dived into the water and fetched the ball for her. The princess was very happy. The frog reminded her, “Remem¬ber that you promised me anything. Well, I want to be your friend, eat from your plate, and sleep in your palace!” The princess hated the idea but she agreed and ran back to the palace.

<img src=”kissingandball.jpg” title=”The Princess thanking the frog for fetching her golden ball” />

<h3 id=”morning”>The Next Morning

<p>The princess found the frog waiting for her. He said, “I have come to live in your palace.” Hearing this, the princess ran to her fa¬ther, crying. When the kind king heard about the promise, he told her, “A promise is a promise and you must keep your word. You must let the frog stay here.” The princess was very angry but she had no choice and let the frog stay. He ate from her plate during dinner and asked the princess to take him to her bed at night. The princess picked him up an¬grily and threw him to the floor.</p>

<h3> Frog becomes Prince</h3>

<p>In a flash, the frog turned into a handsome prince! He told the princess that he had actually been under the spell of a wicked witch. The princess fell in love with the prince. They were married and lived happily ever after.</p>

<img src=”princeandprincess.jpg” title=”The Prince and Princess happily ever after” />

<h4>Other books by The Brother’s Grimm

  • The complete Fairy Tales
  • The Annotated Brothers Grimm
  • Grimm’s Fairy Tales

<div id=”footer”> <p>This website has been designed by Siobhan Whittington.</p> <p>Valid XHTML + CSS.</p> <p>Images copyright istockphoto.</p> </div> </div> <!– /wrapper –>

</body> </html>

THIS IS THE CSS ONE:

body{  background:white; /*changes bg to black*/  color:white; /*changes text color to white*/  font-size:16px;  font-family:Arial, Helvetica, sans-serif;  }    p{font-size:20px;  font-family:Arial, helvertica, sans-serif;  text-align: center;  }

h1 {   color:green;   font-size:60px;   text-align: center;    line-height: 1.5;   text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;      }     h2 {   color:green;   font-size:25px;   text-align: center;    text-decoration:overline  }   h3{  font-style:italic;  color:green;  font-size:20px; }

img{text-align: center;}

#wrapper{  width:960px; /*960 is the standard size*/  color:white;  margin:0 auto; /*puts the page in the centre*/  background:black;  padding:20px; /*moves tet from the edge*/ }

/* # = id, . = class*/

/*use id only once per page, class as many times as you like*/ #morning{  color:red; } .frog{  color:green; }

.fltleft {  float:left; /*allows text to wrap*/  margin:0 10px 0 0;/*adds some right margin to move text away a bit*/  border:5px solid white; /*thickness, style, color*/ } #footer{ clear: both;}

@font-face {     font-family: ‘JuneBugRegular’;     src: url(‘JUNEBUG_-webfont.eot’);     src: url(‘JUNEBUG_-webfont.eot?#iefix’) format(’embedded-opentype’),          url(‘JUNEBUG_-webfont.woff’) format(‘woff’),          url(‘JUNEBUG_-webfont.ttf’) format(‘truetype’),          url(‘JUNEBUG_-webfont.svg#JuneBugRegular’) format(‘svg’);     font-weight: normal;     font-style: normal;

}

h1{  font-family: ‘JuneBugRegular’;  font-size:100px;  padding:0; }

@font-face {     font-family: ‘JustOldFashionRegular’;     src: url(‘JustOldFashion-webfont.eot’);     src: url(‘JustOldFashion-webfont.eot?#iefix’) format(’embedded-opentype’),          url(‘JustOldFashion-webfont.woff’) format(‘woff’),          url(‘JustOldFashion-webfont.ttf’) format(‘truetype’),          url(‘JustOldFashion-webfont.svg#JustOldFashionRegular’) format(‘svg’);     font-weight: normal;     font-style: normal;

}

h2{  font-family:’JustOldFashionRegular’;  font-size: 40px;  padding:0; }

h3{  font-family:’JustOldFashionRegular’;  font-size: 20px;  padding:0; }    @font-face {     font-family: ‘PlaytimeWithHotToddiesRegular’;     src: url(‘playtime-webfont.eot’);     src: url(‘playtime-webfont.eot?#iefix’) format(’embedded-opentype’),          url(‘playtime-webfont.woff’) format(‘woff’),          url(‘playtime-webfont.ttf’) format(‘truetype’),          url(‘playtime-webfont.svg#PlaytimeWithHotToddiesRegular’) format(‘svg’);     font-weight: normal;     font-style: normal;

}

@font-face {     font-family: ‘PlaytimeWithHotToddiesObliqRg’;     src: url(‘PlaytimeOblique-webfont.eot’);     src: url(‘PlaytimeOblique-webfont.eot?#iefix’) format(’embedded-opentype’),          url(‘PlaytimeOblique-webfont.woff’) format(‘woff’),          url(‘PlaytimeOblique-webfont.ttf’) format(‘truetype’),          url(‘PlaytimeOblique-webfont.svg#PlaytimeWithHotToddiesObliqRg’) format(‘svg’);     font-weight: normal;     font-style: normal;

}

@font-face {     font-family: ‘PlaytimeWithHotToddies3DRg’;     src: url(‘PlaytimeWithHotToddies3D-webfont.eot’);     src: url(‘PlaytimeWithHotToddies3D-webfont.eot?#iefix’) format(’embedded-opentype’),          url(‘PlaytimeWithHotToddies3D-webfont.woff’) format(‘woff’),          url(‘PlaytimeWithHotToddies3D-webfont.ttf’) format(‘truetype’),          url(‘PlaytimeWithHotToddies3D-webfont.svg#PlaytimeWithHotToddies3DRg’) format(‘svg’);     font-weight: normal;     font-style: normal;

}

p {  font-family:’PlaytimeWithHotToddiesRegular’;  font-size: 20px;  padding:0; }

h4{  font-family:’PlaytimeWithHotToddiesRegular’;  font-size: 20px;  padding:0; }

li{  font-family:’PlaytimeWithHotToddiesRegular’;  font-size: 20px;  padding:0; }

Here is the link to my page that was put onto the web server but unfortunately it will not come up with the css work. It just shows with the basic HTML. I will look more into depth to where this could have went wrong:

http://sws.canterbury.ac.uk/sw438/the%20frog%20prince.html

This will help me a lot when it comes to me making my website as I can refer back to this one.

 

Advertisements