CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>LukeDaly | Com149Diary</title>

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="jquery.fancybox-media"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
    $("#single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });

    $("#single_2").fancybox({
      openEffect	: 'elastic',
    	closeEffect	: 'elastic',

    	helpers : {
    		title : {
    			type : 'inside'
    		}
    	}
    });

    $("#single_3").fancybox({
    	openEffect : 'none',
    	closeEffect	: 'none',
    	helpers : {
    		title : {
    			type : 'outside'
    		}
    	}
    });

    $("#single_4").fancybox({
    	helpers : {
    		title : {
    			type : 'over'
    		}
    	}
    });
});
</script>

</head>

<body>

<div id="header-1">
  <img src="images/head.png" alt="LukeDaly | Com149Diary" width="152" height="193" />
</div><!--header-->

<div id="header-2">
  <div id="dateholder">TODAY IS<br /> 
			<script type="text/javascript">
			
			var currentTime = new Date()
			var month = currentTime.getMonth() + 1
			if (month < 10){
			month = "0" + month
			}
			
			var date = currentTime.getDate()
			if (date < 10){
			date = "0" + date
			}
			
			var year = currentTime.getFullYear()
		
			var weekday = new Array(7);
			weekday[0] = "SUNDAY";
			weekday[1] = "MONDAY";
			weekday[2] = "TUESDAY";
			weekday[3] = "WEDNESDAY";
			weekday[4] = "THURSDAY";
			weekday[5] = "FRIDAY";
			weekday[6] = "SATURDAY";
			
			<span class="bk"></span>
			
			document.write(weekday[currentTime.getDay()]
			+ ' <span class="date">' + date + " | " + month + " | " + year + '</span>');		
					
            </script>
            </div><!--dateholder-->
</div><!--header-2-->     

<div id="links">
<ul class="linkholder">
<li><a href="#1">week1</a><p> / </p></li>
<li><a href="#2">week2</a><p> / </p></li>
<li><a href="#3">week3</a><p> / </p></li>
<li><a href="#4">week4</a><p> / </p></li>
<li><a href="#5">week5</a><p> / </p></li>
<li><a href="#6">week6</a><p> / </p></li>
<li><a href="#7">week7</a><p> / </p></li>
<li><a href="#8">week8</a><p> / </p></li>
<li><a href="#9">week9</a><p> / </p></li>
<li><a href="#10">week10</a><p> / </p></li>
<li><a href="#11">week11</a><p> / </p></li>
<li><a href="#12">week12</a></li>
</ul><!--linkholder-->
</div><!--links--> 

<div id="container"-->


<div id="weekwrapper">
<p>
    
    <span id="1"></span>
    <span class="accent">Week1 | Bio Mk1</span>
<br /><br />

    On the first week I created the first version of my <a href="COM149 Classwork/bio.html">bio.html</a> page. I created this using pure html, 
    and used tags such as the header tag and paragraph tag whilst trying to stick to the standards.
<br /><br />

<a id="single_1" href="images/img1b.jpg" title="">
	<img src="images/img1s.jpg" alt="" />
</a>
<br /><br />

<a id="single_1" href="images/img2b.jpg" title="">
    <img src="images/img2s.jpg" alt="" />
</a>
<br /><br />

    <span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

    I have learnt that web standards, and web accessibility are a very important thing 
	that should ALWAYS be considered when designing and coding a website. This ensures 
	that the website caters for everyone, providing maximum ease of use.
<br /><br />

    <span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

    I would like more information on all the different types of things I can include in my website to help make it cater for everyone. Therefore I can include what I have learnt to help improve all of my upcoming assignments.

<div id="break"></div>

<span id="2"></span>
<div id="astyle">
<span class="accent">Week2 | Bio Mk2</span>
</div><!--astyle-->

This week I created a copy of my <a href="COM149 Classwork/bio.html">bio.html</a> called <a href="COM149 Classwork/bio 2.html">bio 2.html</a> and added a picture using img tags inside a block element. Once again this was made with pure html and stuck to the W3C standards.
<br /><br />

 This week we also took a note of what websites we visited and how we got there, should it be via bookmark, search, history or back and forward button. I then put my results into an Excel spreadsheet, and the rest of A6 into a Chart. I then added both of these to the diary (below) as images using the same method as previous images.
<br /><br />

<a id="single_1" href="images/img3b.jpg" title="">
    <img src="images/img3s.jpg" alt="" />
</a>
<br /><br />

<a id="single_1" href="images/img4b.jpg" title="">
    <img src="images/img4s.jpg" alt="" />
</a>
<br /><br />

<a id="single_1" href="images/img5b.jpg" title="">
    <img src="images/img5s.jpg" alt="" />
</a>
<br /><br />

<a id="single_1" href="images/img6b.jpg" title="">
    <img src="images/img6s.jpg" alt="" />
</a>
<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

This week I learnt about using comments to help me, and the client. I can use comments to help me remember what elements end where, and help clients understand what they can change and what they can change it too. Comments can also be used to copyright and date personal code and for referencing images and plugins used. I learnt that adding a title and comments helps with search engine optimization, and makes the website appear higher on google. I also learnt that a websites colours are important and should also be well thought out, to make sure people with colour blindness can also use the website as efficient as anyone else. All websites should be put through a validator and all problems fixed. {http://validator.w3.org/)And last but not least that POSH means - plain old semantic html.
<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />


In the week to come I would like to learn a little more about the reasons of validation and how important it is to have as close to 100% validation as possible. I would also like to learn some of the other methods used to help people with disabilities have the same experience as anyone else on the same website. 
<br /><br />

<div id="break"></div>

<span id="3"></span>
<div id="astyle">
<span class="accent">Week3 | W3C Validation</span>
</div>

This week I took my <a href="COM149 Classwork/bio.html">bio.html</a> and my <a href="COM149 Classwork/bio 2.html">bio 2.html</a> and ran them through the W3C Markup validation at <a href="http://validator.w3.org/"> http://validator.w3.org/ </a> to do this I clicked the 'validate by direct input' option and then copy and pasted the markup from my <a href="COM149 Classwork/bio.html">bio.html</a> to the validator. My <a href="COM149 Classwork/bio.html">bio.html</a> was fine and had no errors, I then repeated this process for my <a href="COM149 Classwork/bio 2.html">bio 2.html</a> which also had no errors.
<br /><br />

<a id="single_1" href="images/img7b.jpg" title="">
    <img src="images/img7s.jpg" alt="" />
</a>
<br /><br />

<a id="single_1" href="images/img8b.jpg" title="">
    <img src="images/img8s.jpg" alt="" />
</a>
<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

This week I learned that validation is a valuable debugging tool, not only helping to ensure that your web page looks consistant across all platforms, but making sure that I can learn from what went wrong and will reduce the amount of mistakes made in the future. Validation is also used as a sign of professionalism through out the web, therefore most W3C compliant websites have a little image on the website showing that they are compliant.
<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

I need to learn to remember that, every website needs validated each time a new element I am unsure about is added to the website. This will ensure that I am on top of things and will not have a lot of things to change at once when the project is complete.
<br /><br />

<div id="break"></div>

<span id="4"></span>
<div id="astyle"> 
<span class="accent">Week4 | Image linking to pdf</span>
</div>

This week I created a <a href="COM149 Classwork/excel_week2.html"> new HTML file </a> and added a print screen from the chart made in Excel on week 2, I then added a link to the PDF I also made on week 2, When the image is clicked this therefore displays PDF. To do this I added an anchor tag linked to the PDF. The code I used can be seen below.
<br /><br />

<a id="single_1" href="images/img9b.jpg" title="">
    <img src="images/img9s.jpg" alt="" />
</a>
<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

 This week I have learned how to insert a link inside an image, so that when the image is clicked it will link to another page or larger version of the photo. I also learnt a little more about validation, by validating the newly created document.
<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

I would like more information on how I can use this method to create more complex and creative things.
<br /><br />

<div id="break"></div>

<span id="5"></span>
<div id="astyle">
<span class="accent">Week5 | old_index.html</span>    
</div>

This week I renamed my <a href="COM149 Classwork/bio 2.html"> bio 2.html</a> to <a href="COM149 Classwork/bio 2.html">old_bio 2.html</a> and created a new index.html. (that later got renamed to 'week 5 bio 2.html')
I then downloaded the Zen Garden structural HTML and had a play around with several methods 
I could use to style my index.html page such as font colour, size and positioning.
<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

This week I learnt a little more about CSS and CSS styling, I also learnt how to attach a seperate stylesheet
and use several different styling techniques. 
<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

I need to learn to add more variation to my designs and come up with new designs and use colours I wouldn't have thought about using.
<br /><br />

<div id="break"></div>

<span id="6"></span>
<div id="astyle"> 
<span class="accent">Week6 | One Column Layout</span>
</div>

This week I created a header, content and footer section on my
bio2.html from week 3 this was a one-column layout that I thought turned out pretty well. I created this using 3 seperate divs with padding inbetween to show the seperation. I then placed my name in the header section of the website the added my email to the footer.

<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

This week I learnt more about CSS and how to create and control a header and footer around my containeer. I also learnt how to add a border to my photos.
<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

This week I need to learn more about different types of and pros / cons of layouts I can use, such as two or three column websites.
<br /><br />

<div id="break"></div>

<span id="7"></span>
<div id="astyle"> 
<span class="accent">Week7 | DIV ID's and Classes</span>
</div>

This week I had a look at, and practiced using DIV ID's and DIV classes. The main difference being that ID's are unique. Each element can only have one ID, and each page can only have one element with that ID. Classes on the other hand are not unique you can use the same class on multiple elements and can use multiple classes on the same element. There is no difference at all when it comes to styling both with CSS, they can both be styled EXACTLY the same. To ensure that my website passes validation I must make sure that these rules are followed correctly. 

This week I also took a look at styling my one Column layout with the Zen Garden CSS, and in my opinion this turned out quite well.
<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />

This week I have learned that the proper use of DIV ID's and DIV classes is important and can impact the validation of my website, therefore I must make sure to follow the proper rules correctly.  
<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

In the week to come I personally need to practice my use of ID's and Classes, but I would also like to learn about any other elements like this that could potentially stop my websites from being valid if used incorrectly.
<br /><br />

<div id="break"></div>

<div id="astyle"> 
<span class="accent">Week8 |</span>
</div>


<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />


<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

<br /><br />

<div id="break"></div>

</p>
</div><!--weekwrapper-->


</div> <!--container-->

</body>
</html>


<!--

*WEEKLY UPDATE TEMPLATE*

<div id="astyle"> 
<span class="accent"></span>
</div>


<br /><br />

<span class="accent">'What I have learned this week as part of this module'</span>
<br /><br />


<br /><br />

<span class="accent">'What is the main area I need to learn more about in the week to come for this module'</span>
<br /><br />

<br /><br />

<div id="break"></div>

-->

            
          
!

CSS

            
              @font-face {
    font-family: 'grosregular';
    src: url('gros___-webfont.eot');
    src: url('gros___-webfont.eot?#iefix') format('embedded-opentype'),
         url('gros___-webfont.woff') format('woff'),
         url('gros___-webfont.ttf') format('truetype'),
         url('gros___-webfont.svg#grosregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexa_lightregular';
    src: url('nexa_light-webfont.eot');
    src: url('nexa_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('nexa_light-webfont.woff') format('woff'),
         url('nexa_light-webfont.ttf') format('truetype'),
         url('nexa_light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
  background-color:#e7e8e9;
	font-family:'grosregular';
	}

#header-1{
	width:152px;
	height:193px;
	margin-left:auto;
	margin-right:auto;
	padding-top:37px;
}

#header-2{
	background-image:url(images/datebox.png);
	background-repeat:no-repeat;
	background-position:0px 2px;
	width:152px;
	height:90px;
	margin-left:auto;
	margin-right:auto;
}

#dateholder{
	font-size:8px;
	color:#FFF;
	width:72px;
	margin-left:auto;
	margin-right:auto;
	padding-top:45px;
	padding-right:64px;
	}
	
#links{
    margin-top:auto;
	margin-bottom:auto;
	position:fixed;
	width:44px;
	}		
	
.linkholder li{
	font-size:8px;
	color:#FFF;
	list-style:none;
	text-decoration:none;
	}	
	
a:link{
	color:#c0c0c0;
	text-decoration:none;
	}
		
a:visited{
	color:#c0c0c0;
	}
		
a:hover{
	color:#ef4158;
	}
		
a:active{
	color:#ef4158;
	}	
		
.date{
display:block;
	color:#ef4158;
		}
		
#container{
width:308px;
padding-left:auto;
padding-right:auto;
margin-left:auto;
margin-right:auto;
}

#container p{
font-size:8px;
color:#c0c0c0;
position: relative;
padding-top: 7px;
}

.accent{
color:#ef4158;
font-size: 8px;
}		

#container h1{
font-size: 8px;
color: #ef4158;	
font-style: none;
text-decoration: none;
font-weight: normal;
padding-top:10px;
}
		
#weekwrapper{
width: 148px;
margin-left: auto;
margin-right:auto;
font-size: 8px;
color:#c0c0c0;
}

#weekwrapper p{	
width: 150px;
margin-left:auto;
margin-right:auto;
padding-bottom:5px; 	
}
		
#single_1 img{
padding-top:3px;	
}		

#break{
padding-top: 5px;
position : relative;
text-align : center;
margin: 0 0 0 0;
border-bottom : 1px solid #c0c0c0;
}		

#astyle{
padding-top:15px;
padding-bottom: 12px;	
}
		
.chooseapage ul{
	margin-left:auto;
	margin-right:auto;
	display:inline;
	list-style:none;
	text-decoration:none;
	float:left;
		}
		
.chooseapage li{
	margin-left:auto;
	margin-right:auto;
	display:inline;
	list-style:none;
	text-decoration:none;
	float:left;
	}				
	
#container::selection {
	background: #ffb7b7; /* Safari */
	}

#container::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

::-webkit-selection  {
       background-color: #FFA;
       color: #000;
}

::selection { 
	background: #c0c0c0; 
	}

::-moz-selection {
	background: #c0c0c0; 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................