Tag Archives: joining

Using HTML tags in echo statements and string concatenation

This tutorial explains how to use HTML tags inside the PHP echo statement. It also explains how to join or ‘concatenate’ strings together. The echo statement is not just used to output simple messages or values of variables, but can also be used to output full HTML code which contains HTML tags, as well as CSS code and even JavaScript code!

Watch the video and then scroll down to see the sample code.

PHP sample code:

<?php
 echo "<h3>This is a heading using the HTML h3 heading tag</h3>";
 echo "This string is joined to " , "this other string.";
 echo "</br>This string is on a new line.";
?>

Joining lines on the canvas

This tutorial explains how to join lines on the canvas. The lines that we will join in this tutorial will end up looking like this:

Screen Shot 2015-05-08 at 6.59.43 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Joining lines</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.lineWidth = 20;
 ctx.lineCap = "butt"; // options are: square, round, butt
 ctx.lineJoin = "round"; // options are: round, bevel, miter
 //ctx.miterLimit = 3;
 //ctx.setLineDash([20,10]); //adds dashes -length of dash,length of gap between dash
 //ctx.lineDashOffset = 20;
 
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(150,250);
 ctx.lineTo(250,50);
 ctx.lineTo(150,50);
 ctx.strokeStyle="#FF0000";
 ctx.stroke();
 //ctx.fill(); will add a fill
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="300" height="300">
</body>
</html>

Next tutorial: Drawing paths on the canvas

Variables and data types in Python

This tutorial explains how to use variables in Python to store integers and strings. It also explains how to concatenate (join) strings in Python.

In programming, a variable is used to store data in a program. A variable can only store one value at a time, for example some text, a number, or a true/false value.

The different data types that a variable can store include:

  • string – this is text which can include letters, numbers, and other characters. String values are stored inside quotation marks
  • integer – whole numbers
  • float – numbers with a decimal point
  • boolean – a true/false value

You can view the video below or click here to watch it on YouTube.