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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s