Category Archives: All Projects

Website Basics 5 – PHP

https://www.youtube.com/watch?v=j-2Rz3nL2HU

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.
In part 5 of this series, we will look at the basics of using PHP and adding its functionality to our site.

Here’s a list of the other tutorials in the series:

Download Code Sample

Basic PHP Syntax

There are several requirements before your PHP page will become functional. The first requirement is to make sure that you have a server with PHP installed. If not, you can learn how by watching the create a server tutorial. Your website files must reside on the server. Next, any file that has executable PHP code must be saved as a PHP file. For example, if your index.html page has PHP code in it, it must be saved as index.php before the code can be executed. Lastly, in order for the browser to process PHP, it has to be declared using the following tag structure:

<?php
     PHP CODE GOES HERE
?>

Anything in between those declaration tags will be processed as PHP code. PHP tags can go anywhere in a webpages HTML structure, but is generally found in the body of the HTML code or above the HTML code (before the opening <HTML> tag). To display text or HTML on a webpage using PHP, you want to use the “echo” command. The “echo” command followed by the text or HTML code in quotes will tell it the web browser to process that text or code as regular HTML. Here is an example:

<?php
     echo "It's PHP!";
?>

Notice how the “echo” command is terminated by a semi-colon. Apart from conditional statements, all PHP code should end with a semi-colon. If an echo statement contains HTML code that has quotation marks (“), you will need to replace them with apostrophes (‘). This prevents confusion when processing the PHP code.

<?php
     echo "<p class ='welcome' id='greeting'> Hi! Welcome to my site!</p>";
?>

 

Variables

A variable is an object within programming code that can change it’s value as the program is executed. It’s similar to mathmatics were variables are used in equations to represent unknown values i.e. 2 + x = 4. Variables are used very frequently in Javascript because their value can be set to whatever you need it to. To create a variable in PHP, you want to come up with a name for your variable, and then precede it with a dollar ($) sign. Then you can set it equal to the value you desire. To recall the variable at any point in your code, simple type the name of the full name of the variable including the $ sign.

<?php
     $username = "gigafide";
     echo $username;
?>

When returning a variable value, sometimes you may want the variable to appear in the middle of a string of other text, such as a sentence. This is called concatenation As opposed to Javascript where a plus (+) sign is used to concatenate strings together, PHP uses a period (.) to concatenate.

<?php
     $username = "gigafide";
     echo "<p class ='welcome' id='greeting'> Hi, " . $username . "! Welcome to my site!</p>";
?>

Conditional Statements

A conditional statement is a section of code whose output is dependent on certain conditions. In PHP, this is charactarized by an “if” statement. An “if” statement will output a result if certain conditions are met. The syntax of an “if” statement starts with if followed by the conditions in a set of parenthesis. Immediately following this, you will put the line of code to be executed if the conditions are met. If you have more than one condition to be executed, you can enclose the code to be executed within curly brackets. If the conditions are not met, you can add an “else” statement after the “if” statement. The else statement can contain code to be executed if the conditions are not met.

<?php
     if($username == "gigafide"){
          echo "<p class ='welcome' id='greeting'> Hi, " . $username . "! Welcome to my site!</p>";
          echo "Thanks for visiting!";
     }else 
          echo "Hi! Welcome to my site!";
?>

Include

A great benefit that PHP offers is the ability to import HTML or PHP code into your page from a separate file. This is through a function called the include command. Include is often used when creating website templates. [WordPress] is a common platform that makes regular use of the include function for its templates. Here is how it works. Create a seperate page (both html and php pages will work) and put a section of HTML code in it. Then, on your main webpage, place the PHP include function with the seperate pages name wherever you want it to appear on the main webpage.

<?php
     include("header.php");
?>

This is a good method of keeping a website organized. If you have a section of your website (such as a navigation menu) that stays static throughout your website, you can use it as an include webpage instead. This will shorten the websites code significantly, as well as allow you to only have to modify one page.

Think of it this way: if you have 100 pages on your website,and they all had a common menu, it would be a tedious task to edit 100 menus. With PHP, you can include one menu in 100 pages, and edit one menu to complete the task.

Passing Information Between Pages

Forms

Method:GET

Method:POST

Storing User Information

If you’re going to create a website that requires a user to enter information, it’s almost a necessity to store that information somewhere so that the user doesn’t have to enter it again and so that it can be recalled later and used elsewhere in the site. In PHP, there are two methods of storing a users information. One is Cookies and the Other is Sessions.

Cookies

Cookies are a means of storing a user’s information so that the user doesn’t have to enter in the same information again. For instance, websites commonly store a cookie of your username and password so that you don’t have to keep logging in to the website everytime you visit. Cookies store the information on the client’s computer as a small file. If the website needs to recall that information later, it can open up the cookie and read the information stored there. Let’s say you want store information from a form to a cookie. First you need to create a cookie using “setcookie” parameter, then give it a name, the value you want to store, and the time before it expires.

<?php
     setcookie("user", $_POST["username"], time()+3600);
?>

Then if you want to recall that value later on, you can use this code

<?php
     echo $_COOKIE["user"];
?>

Or if you wanted to return the entire contents of a cookie, you can use this code

<?php
     print_r($_COOKIE);
?>

To use the cookie information in a conditional statement, you want to use the ISSET command to check and see if there is information stored in the cookie. If there is information stored in it, you can execute one set of commands. IF there is not information stored in it, you can execute another set of commands.

<?php
     if (isset($_COOKIE["user"]))
       echo "Hi, " . $_COOKIE["user"] . "Welcome to my site!<br />";
?>

Finally, if you want to delete the cookie information (such as to create a “log out” page), essentially you just set the cookie expiration date to a negative value.

<?php
     setcookie("user", "", time()-3600);
?>

Sessions

Sessions are another means of storing users information. Except, unlike Cookies, they store information on the server as opposed to the clients computer. To start a session, you have to put a session_start script at the beginning of every webpage that uses session information (above the opening HTML tag).

<?php session_start(); ?>

Session information can then be stored to $_SESSION variables the same way you would store any other variable. Then you can recall the session information by simply using the variable name you created. Here’s an example.

<?php
     $_SESSION['user']="gigafide;
     echo "Hi, ". $_SESSION['user'];
?>

Similar to the cookie example above, you can use Session information in an if statement by adding the ISSET command.

<?php
     if(isset($_SESSION['user']))
       echo "Hi," . $_SESSION['user'] . "!";
?>

And then finally, to stop storing information for a session (and to forget the stored information), you can add a session_destroy command underneath the session_start command for your logout page.

<?php
session_start(); 
session_destroy();
?>

Final Code

After completeing the tutorial, you should have something similar to the code below. Please use this code for reference and correction.

header.php

<div class="main">
	<div class="row1">
		<img src="logo.jpg"/>
	</div>
	<div class="row2">
		<div class="row2col1">
			Navigation
			<hr align="left" width=75%>						
				<ul>
					<li><a href="about.html">About Me</a></li>
					<li><a href="http://www.google.com">Google</a></li>
				</ul>
		</div>
		<div class="row2col2">

footer.php

          </div>
     </div>
 </div>

logout.php

<?php
session_start(); 
session_destroy();
?>
<html>
<head>
<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<?php include("header.php"); ?>
<p class="welcome" id="greeting">
You are now logged out
</p>

	</body>
</html>

welcome.php

<?php session_start(); ?>
<html>
<head>
<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php include("header.php"); ?>
<p class="welcome" id="greeting">
<?php
	$mypass = "abc123";
	$passcheck = $_POST["password"];
	if ($passcheck == $mypass){
		echo "Welcome, " . $_POST["username"] . "! You are now logged in. <br/>";
		$_SESSION['user']= $_POST["username"];
		$_SESSION['pass']= $passcheck;
		}
	else
		echo "Sorry, wrong password. <br/>";
?>
<a href="index.php">Click here</a> to return to the main page.
<?php include("footer.php"); ?>
	</body>
</html>

Index.php

<?php session_start(); ?>
<html>
	<head>
		<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script>
			function clicked(){
			var x;
			var y;
			x = document.getElementById('nameCheck').value;
			y = document.getElementById('password').value;
			if(x !="" && y !=""){
				return true;
				}
				else if(y ==""){
					document.getElementById('errorPass').innerHTML='<font color="red">(required) Password:</font>';
					return false;
					}
				else if(x ==""){
					document.getElementById('errorMsg').innerHTML='<font color="red">(required) Name:</font>';
					return false;
				}
				
				
			}
		</script>
	</head>
	<body>		
		<?php include("header.php"); ?>
			<?php
			
			if (isset($_SESSION['user']))
				echo "<p class ='welcome' id='greeting'> Hi, " . $_SESSION['user'] . "! Welcome to my site!</p>";
			else 
				echo "<p class ='welcome' id='greeting'> Please Login:</p>
						<form action='welcome.php' method='post' onSubmit='return clicked();'>
							<b id='errorMsg'>Name:</b>
							<input type='text' id='nameCheck' name='username'/>
							<b id='errorPass'>Password:</b> <input type='text' id='password' name='password'/>
							<input type='submit' value='Click Me'onClick='clicked()'/>
						</form>";
			
			?>
			<?php
			if (isset($_SESSION['user']))
				echo "<center><h1> User List:</h1>
					<table border='1'>
					<tr>
					<td><b>User</b></td>
					<td><b>Login password</b></td>
					</tr>
					<tr>
					<td>" . $_SESSION['user'] . "</td>
					<td>" . $_SESSION['pass'] . "</td>
					</tr>
					</table>
					</center>";
			?>
			<?php if (isset($_SESSION['user']))
				echo "<center><a href='logout.php'>Logout</a></center>";?>
			<p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
				
		<?php include("footer.php"); ?>
	</body>
</html>

 

Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter

Make A Complete Website From Scratch – Part 4:Server

https://www.youtube.com/watch?v=cUMYcuOjfns

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

 

In part 4 of this series, we will look at the basics of creating a MySQL database that will store the content for our website.

Here’s a list of the other tutorials in the series:

Make A Complete Website From Scratch – Part 3: Javascript

https://www.youtube.com/watch?v=TLjJM-CsOIs

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

 

In part 3 of this series, we will look at the basics of using Javascript and using it to enhance our site.

Here’s a list of the other tutorials in the series:

Download Code Sample

Javascript Syntax

To create a Javascript within an HTML file, you generally need to start with “Script” tags to mark the beginning and end of the script. Although not mentioned in the video, it’s a good habit to describe what type of script you are going to be invoking by using the type=”text/javascript” attribute, which you can see in the example below.

Though not required for simple scripts, it’s also a good idea to divide sections of your script into “blocks”, which are charactarized by opening and closing curly brackets. They are required for functions.

The lines in between the curly brackets are the Javascript code that is to be executed.

<script type="text/javascript">
     {
          document.write('Hi! Welcome to my site');
     }
</script>

Not all browsers support Javascript. Because of this, there is a method to code your Javascript so that it doesn’t try to run on unsupported browsers. The syntax resemebles an arrow and is demonstrated below.

<script type="text/javascript">
<!--
     {
          document.write('Hi! Welcome to my site');
     }
//-->
</script>

ID’s

In order to keep Javascripts organized and in one location within your HTML, there needs to be a way to reference elements within the HTML code. When using CSS, this is done through an attribute called “class” that allows you to label the elements that you want to reference. Similarly, when using Javascript, you can use the “ID” attribute to label elements. The value of the ID can be whatever you want, but it’s common practice to use only letters and to make sure it is no longer than one word. In the example below, you see a paragraph element that has been given and ID of “mainText”:

<p id="mainText">This is my main text </p>

To call an ID from your Javascript code, you want to use the “document” function followed by “getElementById” and then the Id name in parenthesis and quotes. Here’s an example:

document.getElementById('mainText')

Following this format, you can call other functions such as “value” to return the value of the element, or “innerHTML”, which will overwrite the element with HTML code. You can find examples of both in the final code below.

 

Functions

A benefit of Javascript is that you can set aside blocks of code so that it only runs when it’s triggered. This is done through a coding process called “Functions”. Functions let you divide your code up into different sections that can be triggered by different events. To create a function, simply block the Javascript code you want to be in the function with curly brackets {} and before the first curly bracket type function and then the name of your function, which can be anything. The example below shows a script with two different functions within it.

<script type="text/javascript">
     function changeText{
          document.getElementById('mainText').innerHTML='Welcome to my data page!';
     }
     function alertUser{
          alert('This is an alert!');
     }
</script>

An important thing to note is that functions will not run unless there is something that executes or triggers it. A common way of triggering a function is through the “onClick” attribute, which can be added to HTML elements. This attribute makes it so that when a user clicks on an element, then the function will be executed. Here’s an example:

<p id="mainText" onClick="ChangeText">This is my main text </p>

 

Variables

A variable is an object within programming code that can change it’s value as the program is executed. It’s similar to mathmatics were variables are used in equations to represent unknown values i.e. 2 + x = 4. Variables are used very frequently in Javascript because their value can be set to whatever you need it to. To create a variable in Javascript, you need to declare the var object and then give the variable a name. Commonly x is used, but it can be whatever letter or word you want. After you have declared the variable, you can set it equal to a value. You can change the variables value as many times as you need to throughout the course of your script. Here is an example of a variable in use:

<script>
     var x;
     x = 'Daniel';
     document.write('My name is ' + x);
</script>

To make Javascript more concise, you can combine the variable declaration with it’s value declaration. Using the same example as above, here’s what the code would look like if you combined the two:

<script>
     var x = 'Gigafide';
     document.write('My name is ' + x);
</script>

Concatenation

To “concatenate” something means to join or combine two different object together (such as word strings). Each programming language has their own unique way to concatenate strings. In Javascript, we use the + sign. Concatenation is primarily used in displaying the results of something. Here’s what it looks like:

<script>
     var x = 'Gigafide';
     var y = 'My name is ';
     document.write(y + x);
</script>

The results of this code would be “My Name is Gigafide”.

Conditional Statements

When creating programs in Javascript, you often run across the need to display one of many possible outcomes or options. As an example, if you ask a “yes” or “no” question, you want to display different results depending on what the user answers. This is often accomplished through “conditional statements”. The most commonly used conditional statement in Javascript is the “If” statement

Operators

Common Javascripts

Linking to an external Javascript file

As with CSS, you can copy all of your code to an external document and link to it from your HTML. What would you want to do this? There’s two possible reasons. The first reason is that it is a good way to keep your HTML code clean and streamlined. The second reason is so that one Javascript can be used on multiple webpages. To create an external file, copy all of your Javascript code (between the <script> tags) to a new document and save it as myjavascript.js, or whatever you want to call it, and save it to the same directory as your index.html file. Then you can add this line to the head of your HTML document:

<script type="text/javascript" src="myjavascript.js"></script>

Dates and Times

Another common usage of Javascripting is to display a date or to use a date or time in a function. When dealing with the date function, it’s important to keep in mind that the time that is used is the time on the client/users computer and not the time on the server that your webpage is on. Displaying a date string is very simple. Just use the date object like this:

<script>
	document.write(Date());
</script>

If you want to display only the year or the date, you would need to assign a variable to the date object and then call either getFullYear(), getTime(), or getDay() depending on your need.

<script>
     var myDate=new Date();
     document.write(myDate.getFullYear());
</script>

Cookies

Another useful aspect of Javascript is the ability to store script information on the clients computer. This stored infomration is known as a “cookie”. It’s general purpose is to store user information so that the user doesn’t have to enter in the same information again. For instance, websites commonly store a cookie of your username and password so that you don’t have to keep logging in to the website everytime you visit. Cookies can get very complicated but below you’ll find an example of a cookie that stores the users name and remembers it each time they visit a site. This example is taken from w3schools.com

Creating a cookie:

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

Reading a cookie:

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

Checking a cookie:

function checkCookie()
{
var username=getCookie("username");
  if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else 
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}

Printing a page

Javascript provides a really simple way to print a web page. The script calls the browsers print function and uses it to print the webpage that the Javascript is on. All that’s required to invoke this script is the “onClick” attribute:

<form>
<input type="button" value="Print This Page" onClick="window.print()" />
</form>

Page Redirect

“Redirecting” a page is a means of having a webpage auto-forward to a different webpage. A good reason to use this would be for if you are making changes to your web page and you want users to be redirected to a temporary page until your changes are finished.

<script type="text/javascript">
     window.location = "http://www.google.com/"
</script>

Final Code

After completeing the tutorial, you should have something similar to the code below. Please use this code for reference and correction. There are three files, the first one is index.html, which is the HTML code for the main page in your website. The second one is style.css, which is the CSS code referenced in the index.html webpage. don’t say

INDEX.HTML

<html>
	<head>
		<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script>
			function clicked(){
			var x; 
			x = document.getElementById('nameCheck').value;
			if(x !=""){
				document.getElementById('greeting').innerHTML='Hi, '+x+'! Welcome to my site!';
				}
				else{
					document.getElementById('errorMsg').innerHTML='<font color="red">(required) Name:</font>';
				}				
			}
		</script>
	</head>
	<body>		
		<div class="main">
			<div class="row1">
				<img src="logo.jpg"/>
			</div>
			<div class="row2">
				<div class="row2col1">
					Navigation
					<hr align="left" width=75%>						
						<ul>
							<li><a href="about.html">About Me</a></li>
							<li><a href="http://www.google.com">Google</a></li>
						</ul>
				</div>
				<div class="row2col2"><p class="welcome" id="greeting">
				Hi! Welcome to my site!
				<form>
					<b id="errorMsg">Name:</b>
					<input type="text" id="nameCheck" />
					<input type="button" value="Click Me" onClick="clicked()" />
				</form>
				</p><p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
				</div>
			</div>

		</div>

	</body>
</html>

 

Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter

Make A Complete Website From Scratch – Part 2: CSS

https://www.youtube.com/watch?v=L8R2x7bEJUo

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

In this video we will be looking at CSS bascis and how to apply it to the HTML website we created in Part 1

Here’s a list of the other tutorials in the series:

Download Code Sample

CSS Syntax

The basic syntax of CSS begins with the style name, followed by an equals sign(=), then they style property and the style value. In it’s simplest form, a CSS style script can be added into the tag itself like this:

<a style=text-decoration:none href="http://www.google.com">Google</a>

The “text-decoration”, in this example, is known as the style property. There are lots of different sytle properties that go with different types of tags. The “none” in this example is the value given for the style property. In this case, we are saying that we don’t want any text-decoration. Overall, the inline syntax of CSS is very similar to HTML tag attributes.

 

CSS Boxes

When it comes to structure, CSS uses boxes to accomplish a pages layout. This has come to replace basic HTML tables.

Final Code

After completeing the tutorial, you should have something similar to the code below. Please use this code for reference and correction. There are three files, the first one is index.html, which is the HTML code for the main page in your website. The second one is style.css, which is the CSS code referenced in the index.html webpage.

INDEX.HTML

<html>
	<head>
		<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>		
		<div class="main">
			<div class="row1">
				<img src="logo.jpg"/>
			</div>
			<div class="row2">
				<div class="row2col1">
					Navigation
					<hr align="left" width=75%>						
						<ul>
							<li><a href="about.html">About Me</a></li>
							<li><a href="http://www.google.com">Google</a></li>
						</ul>
				</div>
				<div class="row2col2"><p class="welcome" >Welcome to my data page!</p><p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
				</div>
			</div>

		</div>
		
	</body>
</html>

STYLE.CSS

b{
	color:#000000;
}
a{
text-decoration:none;
color:grey;
}
img{
display:block;
margin:auto;
}
p.welcome {
	text-align:center;
	font-family: “verdana”;
	font-size:1.875em;
	color:white;
	font-style:bold;				
}
p.content {
	font-family: “verdana”;
	font-size:1em;
	color:white;
	font-style:italic;				
}
div.main{
	width:50%;
	margin:auto;
	background:#251111;
}
div.row1{
width:100%;
}
div.row2{
width:100%;
}
div.row2col1{
	float:left;
	margin:0;
	padding:1em;
	color:white;
}
div.row2col2{
	margin-left:25%;
	background-color:#0A1616;
	padding:1em;
	border:15px solid #251111;
}
body{
	background-color:#393635;
	color:white;
}

 

Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter

Make A Complete Website From Scratch – Part 1: HTML

https://www.youtube.com/watch?v=6Ct6emxVR9w

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

 

In Part 1 of this series, we will take a look at HTML basics.

Here’s a list of the other tutorials in the series:

Download Code Sample

HTML Basics

HTML stands for Hyper Text Markup Language and provides the backbone structure for webpages. Not to be confused with a programming language, HTML is a markup language that was designed to link documents and media together in an interactive way.

HTML is standardized through W3C and the latest version is HTML 4.01 (see http://www.w3.org/TR/html401/).

HTML is evolving constantly and presently there are 2 important variations eg XHTML and HTML5.

XHTML (eXtensibleHTML) is a derivation of HTML and XML. HTML5 is the fifth revision of the HTML standard. (see http://en.wikipedia.org/wiki/HTML5.)

HTML/XHTML/HTML5 have different Doctype Definitions (DTD’s) to be identified by browsers. For standards compliant HTML a web page needs a valid DTD (at the top of the html page).
HTML 4.01 strict DTD :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

For information on valid DTD’s, see http://www.w3.org/QA/2002/04/valid-dtd-list.html.

HTML Editors

There is a large selection of software available on the market (free and paid) directed towards website creation. A majority of website creation software is called What You See Is What You Get or WYSIWYG. A good example of commercial software is Adobe’s Dreamweaver, while a good example of open source software is Mozilla’s Kompozer software. Despite the availability of web design software, it is not required to create a website. A website can be created using a basic text editor and a web browser for previewing.

HTML Structure

HTML utilizes an element tagging structure. This means that every element of the code is tagged so that the web browser knows how to translate it. With a few exceptions, each tag generally comes in pairs: and opening tag and a closing tag. In between each tag is the content that is being tagged. Certain tags can also contain attributes, which enhances the properties of the tagged content.

Tags

For a list of commonly used tags, visit the tags page. An HTML tag is used by browsers to help classify and organize different elements within a web page. Tags are characterized by being surrounded by an opening and closing angle bracket (example: <tag>). An opening tag (example: <tag> signifies the begenning of an element’s section and a closing tag (example: </tag> is signifies the end of an element’s section. Here’s an example of a how a paragraph element tag would be used:

 

<p>Welcome to my webpage</p>

For some tags, the element does not need to surround or encompass any content. In those cases, it is not necessary to have both an opening and closing tag. Instead, a shorthand is available to close out the tag. It consists only of a forward slash and a closing angle bracket. An example of it’s usage can be seen in image element tag:

<img src=”my_image.jpg” />
Tags can be contained within other tags in a method called “nesting”. Nesting is required by some tags (such as lists), while with other tags it just combines itself onto the content it surrounds. When it comes to structure, the “indention” method is generally preferred to show nesting tags. This is when you list one set of tags, and then you indent each nesting set of tags within it. A good example is with lists

<ul>

<li>List Item</li>

</ul>
Tags that don’t have closings
Tags can be nested

Text Formatting

HTML text formatting generally takes place in the body of the HTML code. It includes text structure, such as paragraphs, lists, font color, bold, italicizing, and underlining. The table lists a few of the commonly used text formatting tags, but you can find a more extensive list here

Formatting Tag Formatting Name Description Example Output
<p> Paragraph Designates the beginning and ending of a paragraph <p>This is my paragraph</p> This is my paragraph
<b> Bold Makes the tagged font bold. <b>This is my paragraph</b> This is my paragraph
<i> Italics Italicizes the tagged font. <i>This is my paragraph</i> This is my paragraph
<u> Underline Underlines the tagged font. <u>This is my paragraph</u> This is my paragraph
<ul> Unorganized List Creates a bulleted list. MUST be coupled with the <li> tag <ul>
<li>List item 1</li>
<li>List item 2</li>

</ul>

  • List item 1
  • List item 2
<ol> Organized List Creates a numbered list. MUST be coupled with the <li> tag <ol>
<li>List item 1</li>
<li>List item 2</li>

</ol>

  1. List item 1
  2. List item 2
<li> Organized List Creates a numbered list. MUST be coupled with either the <ul> or <ol> tags <ol>
<li>List item 1</li>
<li>List item 2</li>

</ol>

  1. List item 1
  2. List item 2

Attributes

For a list of commonly used attributes, visit the attributes page. HTML attributes are found inside of tags and help to enhance the properties of the tagged element. Attributes follow the format of “attribute name” followed by a “=” and then the attribute value surrounded by quotes. Here’s an example

<body bgcolor = “blue”>
Not all tags allow for attributes, and not all attributes are compatible with all tags. The type of attribute available for a tag depends on what type of tag it is. For example, an image tag allows for source, width, height, and alt tags, all of which help format and enhance the picture

<img src=”picture.jpb” width=”150″ height=”50″ alt=”My Picture”/>
Because those attributes are specific to an image, none of them will work with a link tag. Instead, a link tag has it’s own set of attributes: hyperlink reference, target, and name

<a href=”mypage.html” target=”_blank” type=”mypage”>Go to My Page </a>
 

Tables

For table attributes (bgcolor, images, rowspan, colspan), visit the table page. There are many ways to organize the layout of a webpage using different scripting techniques, but the best way to do it using solely HTML is through the use of tables. While they are very useful, tables can be exceedingly difficult to use depending on how complicated your layout is. A tables structure has to follow certain tagging guidelines in order for it to work properly. These guidelines are as follows:

  1. Each table begins and ends with the <table></table> tags.
    1. Before the table will work, you must have at least one row and one column.
  2. Nested between the table tags are the row tags <tr></tr>.
    1. You must have at least one row in each table in order for it to function properly.
    2. Each row must have at least one column nested within it.
  3. Nested between the row tags are data cell tags <td></td>.
    1. You must have at least one data cell in each row.
    2. You must have the same ammount of cells in each row (unless using colspan or rowspan attributes)
    3. Although these are commonly know as “column” tags, they represent cells. A cell can exist without a column, but a column cannot exist without a cell.

Here is an example of a two cell, two row table:

<table>

<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>

</table>

 

Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter

How To Make Your Own Encryption

****UPDATE: DOWNLOAD THE PROJECT FILES****

This video lays out the steps for creating a very simple encryption and decryption program using free tools. The programming language we will be using is VB Script.  See if you can decrypt this text:

wkjlue#vnrro#huxwxi#uxr\

 

The code below is for the encrypting program:

<—–Start copying below this line—–>
‘SIMPLE VB ENCRYPTION PROGRAM
‘Create a dialogue box that asks for the text to encode
set x = WScript.CreateObject(“WScript.Shell”)
mySecret = inputbox(“Enter text to be encoded”)
‘Reverse the submitted text
mySecret = StrReverse(mySecret)
‘Open up an instance of Notepad to print the results after waiting for 1 second
x.Run “%windir%\notepad”
wscript.sleep 1000
x.sendkeys encode(mySecret)’This function encodes the text by advancing each character 3 letters
function encode(s)
For i = 1 To Len(s)
newtxt = Mid(s, i, 1)
newtxt = Chr(Asc(newtxt)+3)
coded = coded & newtxt
Next
encode = coded
End Function
<—-Stop copying above this line——>
<—–Start copying below this line—–>
‘SIMPLE VB DECRYPTION PROGRAM
‘Create a dialogue box that asks for the text to encode
set x = WScript.CreateObject(“WScript.Shell”)
mySecret = inputbox(“Enter text to be encoded”)
‘Reverse the submitted text
mySecret = StrReverse(mySecret)
‘Open up an instance of Notepad to print the results after waiting for 1 second
x.Run “%windir%\notepad”
wscript.sleep 1000
x.sendkeys encode(mySecret)’This function encodes the text by advancing each character 3 letters
function encode(s)
For i = 1 To Len(s)
newtxt = Mid(s, i, 1)
newtxt = Chr(Asc(newtxt)-3)
coded = coded & newtxt
Next
encode = coded
End Function
<—-Stop copying above this line——>
<—–Start copying below this line—–>
–Applescript encryption program
set words_to_encrypt to “I want to encrypt sentences. Not just words!”
set multiplier to 5
set charList to {“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”, “m”, “n”, “o”, “p”, “q”, “r”, “s”, “t”, “u”, “v”, “w”, “x”, “y”, “z”,”A”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “I”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”, “S”, “T”, “U”, “V”, “W”, “X”, “Y”, “Z”, “1”, “2”, “3”,”4″, “5”, “6”, “7”, “8”, “9”, “0”, ” “, “~”, “!”, “@”, “#”, “$”, “%”, “^”, “&”, “*”, “(“, “)”, “_”, “+”, “{“, “}”, “|”, “:”, “\””, “<“, “>”, “?”, “`”, “-“,”=”, “[", "]“, “\\”, “;”, “‘”, “,”, “.”, “/”, “a”}considering case
–get a list of numbers for the words corresponding to the item numbers of the characters in charList
set p_letter_list to text items of words_to_encrypt
set p_num_list to {}
repeat with i from 1 to (count of p_letter_list)
set this_letter to item i of p_letter_list
repeat with j from 1 to count of charList
set this_char to item j of charList
if this_letter is this_char then
set end of p_num_list to j
exit repeat
end if
end repeat
end repeat
–encrypt the numbers
set modulus to count of charList
set c_num_list to {}
repeat with i from 1 to (count of p_num_list)
set p_num to item i of p_num_list
set c_num to ((p_num * multiplier) mod modulus)
set end of c_num_list to c_num
end repeat
–get the characters for the encrypted numbers corresponding to the characters in charList
set c_letter_list to {}
repeat with i from 1 to (count of c_num_list)
set this_item to item i of c_num_list
set end of c_letter_list to (item this_item of charList)
end repeat
–coerce the encrypted characters into a string
set c_string to c_letter_list as string
end considering
<—-Stop copying above this line——>

How To Make Incredible Costume Armor for Halloween

 

Turn your comic, sci-fi and video game memories into a reality by making your own costume armor.

“Make Your Own Flash Game” winner – http://www.stencyl.com/game/play/8512

Pepakura Viewer – http://www.tamasoft.co.jp/pepakura-en/download/viewer.html
Pepakura Tutorial – http://www.youtube.com/watch?v=LsiGgR9HVJQ
Resing & Fiberglass tutorial – http://www.youtube.com/watch?v=Ln9zVwjezBQ
http://www.youtube.com/watch?v=Z1WeaZzg6zw
Bondo Tutorial – http://www.youtube.com/watch?v=gaQWXduHuOQ