Responsive Web Design - Part 1

Start your Responsive Web Design Project by following the steps below:

 

In the Files section of Canvas for GRA2722C there are several files for you to download:

    logo.png

    index.html

    styles.css

1.) Download logo.png

2.) Create a folder on your desktop and name it images (make sure everything is small, lowercase letters and NOT capital letters)

3.) Place logo.png INSIDE the images folder

4.) Download the index.html and the styles.css files to your desktop

5.) Create a SECOND folder and name it begin

6.) Place the index.html and the styles.css files inside the begin folder

7.) ALSO place the images folder inside the begin folder

8.) Create a THIRD folder and title it 1_style_header_image_text

9.) Place the begin folder inside the 1_style_header_image_text folder

10.) Create a FINAL folder and title it create-responsive-grid-layout and place the 1_style_header_image_text folder inside of it

 

IMPORTANT:  Place these files in a place on your computer or on a removable thumbdrive (best solution) that you will use to create the entire project as Dreamweaver can get confused and links can be broken if the folders are moved around before completion of your project.

See the screenshot below for further clarification of how the folders are placed inside one another:

 

 

If you have followed the instructions correctly, your Dreamweaver screens should look like the example below:

 

(above) Source Code view

 

(above) styles.css veiw
 

 

 

HTML and Web Design Definitions - Part 1

HTML Definitions - Part 1

Source Code = the set of instructions and statements written by a programmer using a computer programming language

index.html = this is the "heart" of the web site

CSS = is the acronym of “Cascading Style Sheets” and is used to define styles for your web pages, including the colors, design, fonts, layout and variations in display for different devices and screen sizes

There are three types of CSS which are given below:

• Inline CSS
• Internal or Embedded CSS
• External CSS

     Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.

     Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file. 

     External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.

charset = is a defined list of characters (letters, punctuation marks, numbers, symbols) recognized by the computer hardware and software

stylesheet = is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes

href = short for hypertext reference, HREF is an HTML attribute used to link to another web page or a different portion of the same page

<li> = is a tag used to create lists. A list must start with either a <ul> if it is an unordered list or start with a <ol> if it is an ordered list

<ul> = an unordered list

<nav> = is used to navigate through the navigation key from the keyboard

src = is short for source

alt = alt attribute is the HTML attribute used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered

padding = creates a space between an element's borders and content contained inside of that element.

display: block = these elements exist on their own line and span the entire width of the page unless another width is specified

text-decoration = is a CSS text-decoration property allows developers to add underlines, overlines, and strike-through lines to text

UTF = Unicode Standard Unicode Transformation Format (UTF)is a variable-width character encoding used for electronic communication and is able to encode all of the possible character code points in Unicode. The most prolific is UTF-8, which is a variable-length encoding and uses 8-bit code units, designed for backwards compatibility with ASCII encoding

Metadata = searchable code for web crawlers

Basic HTML - Triangles

 

 This post explains how to create TRIANGLES in HTML.

TEXT BELOW = A SINGLE PIXEL LINE THAT FORMS A TRIANGLE

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

  var x = 50;
  var y = 100;
  var x1 = 300;
  var y1 = 450;
  var x2 = 200;
  var y2 = 100;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x, y)
  context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = A SINGLE LINE THAT FORMS A TRIANGLE WITH A COLOR FILL WITH A BLACK STROKE

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

  var x = 50;
  var y = 100;
  var x1 = 300;
  var y1 = 450;
  var x2 = 200;
  var y2 = 100;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x, y)
  context.fillStyle = "green";
  context.fill();
  context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = A SINGLE LINE THAT FORMS A TRIANGLE WITH A COLOR FILL WITH A GREEN STROKE

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

  var x = 50;
  var y = 100;
  var x1 = 300;
  var y1 = 450;
  var x2 = 200;
  var y2 = 100;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x, y)
  context.fillStyle = "green";
  context.fill();
  context.strokeStyle = "green";
  context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = ALTERNATE CODE THAT FORMS A TRIANGLE WITH A PINK FILL AND STROKE

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
       
// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#FF66CC';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(600, 300);

context.lineTo(450, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#FF66CC';

context.closePath();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

......... DO NOT COPY THESE DOTS


TEXT BELOW = ALTERNATE CODE THAT FORMS TWO TRIANGLES IN THE SHAPE OF A BOWTIE

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// right side of bow ˇˇˇˇˇˇˇˇˇˇ
       
// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#00FF00';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(450, 450);

context.lineTo(450, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#00FF00';

context.closePath();

////////////////////////////////////// left side of bow ˇˇˇˇˇˇˇˇˇˇ
       
// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#00FF00';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(150, 450);

context.lineTo(150, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#00FF00';

context.closePath();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

.......... DO NOT COPY THESE DOTS

Basic HTML - Circles, Arcs, Radial Gradients, and Ellipses

 This post contains examples of HTML circles, arcs, radial gradients, and ellipses.

 

TEXT BELOW = A PINK CIRCLE WITH A BLACK BORDER CENTERED ON THE CANVAS

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
       
        var centerX = 400;
        var centerY = 300;
        var radius = 70;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFD1FF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

,,,,,,,,,, DO NOT COPY THESE DOTS


TEXT BELOW - TOP HALF OF A CIRCLE FILLED WITH GREEN AND A BLACK BORDER

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = BOTTOM HALF OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>



.......... DO NOT COPY THESE DOTS


TEXT BELOW = RIGHT-HAND HALF OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.5 * Math.PI;
        var endangle = 1.5 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = LEFT -HAND HALF FO A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.5 * Math.PI;
        var endangle = 1.5 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = SMALL ARC ON THE RIGHT-HAND SIDE OF CIRCLE

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.25 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = LARGE ARC ON THE LEFT-HAND SIDE OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.25 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = A CIRCLE WITH A RADIAL GRADIENT GOING FROM AN INNER BLACK TO AN OUTER RED WITH A BLACK BORDER

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;
         
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);

        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "rgb(0,0,0)");
        grd.addColorStop(1, "rgb(255,0,0)");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>


.......... DO NOT COPY THESE DOTS




TEXT BELOW = CIRCLE WITH A YELLOW GRADIENT FADING TO WHITE BACKGROUND

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
       
        /////////////////////////////////////////////////////
       
        var centerX = 300;
        var centerY = 200;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;
         
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
   
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "yellow");
        grd.addColorStop(1, "white");
         
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "white";
        context.stroke();
       
        ////////////////////////////////////////////////////
       
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = BEZIER CURVES

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


////Arms
// starting point coordinates
var startX = canvas.width/4.4;
var startY = canvas.height/1.2;

// ending point coordinates
var endX = canvas.width-75;
var endY = canvas.height/1.2;

// control point coordinates ( magnet )
var cpoint1X = canvas.width*.9;
var cpoint1Y = canvas.height*1;


// control point coordinates ( magnet )
var cpoint2X = canvas.width / 3;
var cpoint2Y = canvas.height / 2 + 200;

//// DRAW THE BEZIER CURVE

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y, cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 19;
context.strokeStyle = "rgb(120, 80, 80)";
context.lineCap = "round";
context.stroke();








////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

.......... DO NOT COPY THESE DOTS


TEXT BELOW = ELLIPSE (OVAL)



<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


var centerX = 0;
      var centerY = 0;
      var radius = 50;

      // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();








////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>