Block Elements

This is probably the best task yet on this course as it did help me learn a few new things.I still have a lot to learn about CSS and positioning of elements and although the code looks ok on the higher resolutions,it looks poor on the smaller resolutions as I don’t know enough CSS to rectify it.

Here is my HTML code for this project

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Block Elements</title>
<link rel="stylesheet" href="Block/CSS/style.css">
</head>

<body>
<header id =”mainheader”>
<h1>This is how to stucture a HTML document in HTML5</h1>

<nav>
<h2>This is the Navigation</h1>
<ul>
<li><a href=”#”>Home</a></li>
<l1><a href=”#”>Contact</a></l1>
</ul>
</nav>
</header>

<article id=”mainarticle”>
<header id=”articleheader”>
<h2>This is a sub heading</h2>
</header>

<article id=”subarticle”>
<header id=”subheader”>
<h2>Another sub header</h2>
</header>
<p class=”paragraph”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<aside>
<ul>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>About Us</a></li>
</ul>
</aside>
<p class=”paragraph”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class=”paragraph”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<h3>Here is the footer inside the article</h3>
</footer>
</article>
</article><!–main article closed –>

<footer id =”subfooter”><h3>Here is another footer outside the article</h3></footer>

</body>

</html>

Here is the CSS code

body {
background-color:#8FD8D8;
margin:0;
padding:0;
padding-top:10px;
text-align:center;
display:inline-block;
}

#mainheader {
background-color:#FF0000;
width:80%;
height:220px;
margin-left:auto;
margin-right:auto;
}

h1 {
font-size:40px;

}
h2 {
font-size:30px;
}

nav {
background-color:#FF8000;
font-size:30px;
margin-left:20px;
margin-right:20px;

}
li {
display:inline;
padding-right:10px;

}
a {
color:white;

}

#mainarticle {
height:800px;
width:80%;
margin:0 auto;
background-color:#00FFFF;
padding-top:20px;
}

#articleheader {
background-color:#FF0000;
width:84%;
height:50px;
margin-left:auto;
margin-right:auto;
}

#subarticle {
height:500px;
width:80%;
background-color:#00CC00;
margin:0 auto;
padding-top:10px;
padding-left:20px;
padding-right:20px;

}

#subheader {
background-color:#FF0000;
height:50px;

}
.paragraph {
background-color:beige;
}

aside {
height:100px;
width:150px;
background-color:navy;
color:yellow;
float:right;

}
aside ul li a {
display:block;
text-align:left;

}
footer {
background-color:maroon;

}

#subfooter {
display:inline-block;
padding:20px;
}

Here is what the code looks like in a browser http://racingfocus.x10.mx/Block/Block.html

Advertisements

Inline Elements

There are plenty of inline elements that can be used and they have to be used within other tags mainly  <p>,but there are other inline elements that can be used on their own.Here is my HTML code for this task.

<!Doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Inline Elements Task</title>

</head>
<body>
<h1>Inline Elements</h1>
<p>There are <strong>plenty</strong> of inline elements</p>
<p>Two of them were <em>used</em> here.</p>

<p>It’s good to practice as Albert Einstein said
<q>A person who never made a mistake
never tried anything.</q></p>

<p>You can contact me at</p>
<address>123 Inline street,<br/>
Braintree,<br/>
Mass 02184.</address>
<p>Phone number <del>0778383838</del></p>
<p>New number 07788338737</p>

</body>

</html>

Here is what the code looks like  in  a browser http://racingfocus.x10.mx/Inline.html

Lists and Links

This is the second task on the course and it involves lists and links.Here is my HTML code for this task.

<!Doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Lists and Links Task</title>
</head>
<body>
<h1>Lists</h1>
<h2>Unordered List</h2>
<h3><a href=”http://www.premierleague.com/en-gb.html”>Premier League Teams</a></h3>
<ul>
<li>Everton</li>
<li>Manchester City</li>
<li>Chelsea</li>
</ul>

<h2>Ordered List</h2>
<h3><a href=”http://www.football-league.co.uk/page/Home/0,,10794,00.html”>Championship Teams</a></h3>
<ol>
<li>Q.P.R</li>
<li>Wigan</li>
<li>Blackpool</li>
</ol>

<p>The only difference between ordered lists and</p>
<p>unordered lists is that ordered lists are numbered,</p>
<p>unordered lists have bullet points.</p>

</body>

</html>

Here is the link to what my code looks like on the web.Looking back through my code,I suppose I could have also used the <br> tag to separate my paragraphs too.

http://racingfocus.x10.mx/lists.html

HTML5 Course on P2PU

The task in this first assignment was to post a HTML document online which was an easy task to accomplish.Here is my HTML code

<!Doctype html>
<html>
<head>
<title>Practice HTML</title>
<meta charset=”utf-8″>
</head>

<body>
<h1>This is a html document</h1>
<h2>A guide to html</h2>
<p>This is a paragraph on how to structure a html document</p>
</body>
</html>

And here is what it looks like online.

http://racingfocus.x10.mx/Practice.html

My experience so far

I had already known a good bit of what has been covered so far in this course but it is still good.The one thing that I was not too sure on before this was how FTP worked.In the end I went with Filezilla which was a lot easier than I thought it would be to transfer files to the server.I had already completed a project on Codecademy called Cuddley Critters.This involved fixing the code for a ficticious website that the owners son tried to do himself.You had requirements that had to be met such as

The owner would like to request a few things:

  • replace the not so cuddly photos!
  • fix the bland color scheme
  • find a more interesting photo layout
  • he would also like if the names of the animal shows up when the user clicks/hover the photo (‘ hi my name is ___ ‘)

Here was what the site looked like beforehand https://rawgithub.com/WaffleGnome/CuddlyCritters/master/main.html

Here is what it looked like after I was finished http://racingfocus.x10.mx/CuddlyCritters/Index.html

None of the links on the site are clickable but it did give me a greater understanding of the basics to get a site fixed and up and running on line.

Hosting and DNS

At the moment I don’t really see the point in signing up for a paid hosting account as I am only learning web design.Once my web design skills improve and I have the need to register a domain and pay for hosting,I will.For the moment I am happy to use a free web hosting service such as https://free.x10hosting.com/register.I also had this site recommended to me on Codecademy and while I still don’t fully understand many of the features in the CPanel,I am sure I will come to in time,

What is a DNS ??

I think the analogy on Wikipedia of what DNS is ,probably describes it best,in that it is like a phone book.Every computer and internet site has an Ip address.There are two types of Ip called IPv4 and IPv6 and to remember some of these addresses would be near impossible,especially Ipv6 which comprises of  many numbers and letters.The Domain Name System distributes the responsibility of assigning domain names and mapping those names to IP addresses.