Photoshop time lapse from Caleb Jonasson on Vimeo.
Skier at Sun Peaks
HTML5 – Read more on Carsonified
Click the image and you will enjoy the display of some features offered by HTML 5.
”
The HTML 5 spec was originally called “Web Applications 1.0″. Most of the attention has been on the new markup elements, but in his talk he takes a further look at the applications side of the spec, covering:
- Dynamic images and graphs with canvas
- Eliminating much forms validation with webforms 2.0
- Local storage automagically saving your data
- Geolocation
- Building toolbars and menus.”
The Future of HTML5 by Bruce Lawson from Carsonified on Vimeo.
.htaccess Simple Protection
.htaccess files can be used for many things, redirects, password protection, etc. However there is something that some people do not know about htaccess files. The first is that you can only allow a certain IP address to connect with certain areas of the site. The Second is that if you do not set your .htaccess file up right, you may have some serious security flaws down the road.
Having the ability to deny all IP addresses except your own from reaching a specific page can be very handy if you are using a program such as WordPress to host your blog or a Wikigroup. (note that this works with anything that has an admin page, It could be a form or your own PHP login, admin setup.)
Here is the following code that will be inserted into your htaccess.
AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName “Access Control”
AuthType Basic
<LIMIT GET>
order deny.allow
deny from all
# Whitelist home IP address
allow from 72.91.345.213
# whitelist home2 IP adress
allow from 172.19.2.13
</LIMIT>
The second setup is required so people cannot view your htaccess file directly from their browser. This is a large improvement that will block people from being able to read your file and thus you will be more secure.
Here is the following code that is placed into your .htaccess file.
<Files .htaccess>
order allow,deny
deny from all
</Files>
By: Caleb Jonasson
Into to HTML: Creating A Basic Web Page
In order to create your own web page you should first open up a text editor such as notepad or notepad ++. First things first is to copy the following code into your text editor and save it as index.php. PHP is a server side programming language which is most commonly used across the web because of its simple integration with html. Actual PHP code requires a server but if there is html text inside of a PHP file a simple test on your computer will allow you to properly view the page.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Website || featured on Code With Design</title>
</head><body>
<h1>H1 tags</h1>
<h2>H2 tags</h2>
<h3>H3 tags</h3>
<p>The h1 stands for header1 and these p tags are paragraph tags</p>
</body>
</html>
Now we are going to step through the code so you know exactly what is going on and how the web browser reads the information. The top line of the code will let your browser know what standards it is to follow when reading the code.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
The second line of code states that it is going to follow the w3 standards.
<html xmlns=”http://www.w3.org/1999/xhtml”>
Now we are going to get into the more customizable areas of the website. This section of information is known as head information and is not displayed on the webpage itself. This information is once again read by the browser but you can tell the search engines what information to display along with the title of the page. There are many more things that you can do with this section of the text which I will be going over in another into to HTML article.
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Website || featured on Code With Design</title>
</head>
The first bit of the code is very boring but now we can get more into the content of the page. As you can see there are greater and lesser then signs with content in between, these are called tags. When declaring information inside of a tag you need to have a starting tag and a closing tag. The closing tag is going to allow you to specify that it is closing and will always close the tag immediately before it. For every opening tag you need to have a closing tag or information will not be displayed properly.
<h1>H1 tags</h1>
<h2>H2 tags</h2>
<h3>H3 tags</h3>
Notice how these tag examples are within the body tags. This means that the following content will be displayed within the body of the web browser. When you look at the page you will notice that it breaks into sections. The main section is html which contains the sub sections of head and body.
<html>
<head>
</head>
<body>
</body>
</html>
You can start creating a site with just this information but it is a good idea to clarify the beginning information in the tags for the best results when trying to find bugs and errors.
Within the body of the page a lot of the information can be sorted into different sections. In order to seperate the content you will need to use something called div tags. A div tag can easily break apart seperate sections of the page and will help you style your page in the future.
<div id=”header”>
<h1>Code With Design</h1>
</div>
Note that it is possible to contain divs inside of divs.
Caleb Jonasson
