HTML workshop

Today i have been looking further into creating a website, covering the basics again then adding some extras such as how to include website transitions.

Below is some of the code i have used however there are a number of websites which can be useful when learning these new skills which i have included below.

http://www.w3schools.com/css/css3_transitions.asp

http://matthewlein.com/ceaser/

This was the code input in the CSS folder in the programme Brackets;

.container {
width: 600px;
margin: 30px auto;
}

.box-text {
color: #dfd
.box {
width: 170px;
float: left;
padding: 30px 15px;
background: #ef1111;
}

.special-box {
background: #dfdfdf;
}

.box:hover {
background: #49f59f;
color: #de5111;
padding: 50px 15px;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;

}

This is the actual HTML file input ;

<!doctype html>
<html>
<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet”>
</head>

<body>
<div class=”container”>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>

<div class=”box special-box”>

<p>If I don’t format this code correctly, Kyle will be very angry, and it will be hard to know whats going on. <span class=”box-text”>It’s much easier if I keep my markup clean from the start</span></p>
</div>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>
</div>
</body>
</html>

HTML workshop- Basic website design

I have learnt to create a basic webpage layout using  ‘Bootstrap ‘ http://getbootstrap.com/ and also the program ‘Brackets’. This will help me more in my second semester projects, however it is useful to know how to develop a webpage that will be able to open on more than one device and change to fit the selected screen size. Below is the code I used in Brackets.

<!doctype html>
<html>
<head>

<meta name=”viewport” content=”width=device-width,intitial-scale=1.0″>

<title> First HTML page </title>
<!–load stylesheets –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/bootstrap-theme.css” rel=”stylesheet”>

<script src=”js/bootstrap.js” type=”text/javascript”></script>

<script src=”js/processing.js” type=”text/javascript”></script>
<script type=”text/javascript”>
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return ‘becky’; }
</script>

</head>
<body>

<div class=”container”>

<div class=”row”>

<div class=”col-md-4″>
<img src=”image/imgres-1.jpg” />
</div>

<div class=”col-md-4″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
</div>

<div class=”col-md-4″>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
</div>

</div>

<div class=”row”>

<canvas id=”becky” data-processing-sources=”becky.pde”
width=”600″ height=”300″>
<p>Your browser does not support the canvas tag.</p>
<!– Note: you can put any alternative content here. –>
</canvas>

</div>

</div>

</body>

This was the outcome of my webpage.

Screen Shot 2014-10-23 at 16.25.29

</html>