Archive for November, 2010

Basics of CSS Revisited

0
1 year ago
by Dennis Thompson in ,

After awhile of going back and re-reading the previous CSS tutorials, I realized there was some flaws here and there and some things that should have been covered earlier but were not. So we’re going to start anew with a whole new CSS series that contains CSS2.1, CSS3 and HTML5 (including various hacks for webkit-based browsers, IE, FF, and Opera). Shall we begin?

This tutorial is the absolute basics of CSS and aimed at those that would like to learn about CSS but already have an understanding of HTML.

CSS isn’t a web markup language like HTML, XHTML, MathML and so on. CSS is a Cascading Style Sheet and is the backbone for styling web pages. CSS assumes that are you already have prior knowledge of HTML and understand how HTML works so it is critical that an understanding of HTML is present.

What and Why CSS?

Perhaps one might find themselves asking, “what is CSS and why do we need it?” The answer lies in technology. Perhaps you have made a website before using tables in HTML. Yes, this works but it is, however, deprecated (meaning it’s not generally practiced any more). Websites composed of HTML tables are a thing of the past because we now have rich client-side applications and complex server-side applications acting as blogging software, content management systems and online stores. Without CSS, these applications would be extremely difficult to update and maintain.

How to CSS?

Luckily for us, CSS is pretty straight forward and easy to learn! Let us get started with the basics!

CSS has the following structure:

1
2
3
4
5
6
7
8
9

selector {property:value;} single-line statement
selector {                  multi-line statement
     property:value;
     property:value;
}

Both examples follow the same general format. We have our selector, property and value.

  • Selector – Is the part of the CSS that is used to specify what to style
  • Property – Is the part of the CSS that states which method should be used to style the Selector
  • Value – Is the part of the CSS that states how much to style or how specifically to style the Selector

Selectors

Selectors can have three different basic forms:

  • HTML (Type) Selectors – “Global” Styles that apply to specific HTML elements
  • Class Selectors – Can be used multiple times on a web page
  • ID Selectors – Mostly used to indicate major sections of a web page

Note: Neither the Class or ID selector can start with a number or a special character, A-Z,a-z only for the first character!

1
2
3
4
5
6
7
8
9
10
11
12

.1bad-selector {property:value;}
.!bad-selector {property:value;}
.good-selector {property:value;}

#1bad-selector {property:value;}
#!bad-selector {property:value;}
#good-selector {property:value;}

HTML selectors, otherwise known as by Type selectors, are literally just HTML tags without angled brackets. For example,

1
2
3
4
5
6
7

a {
     color:#ff9300; Controls color of anchor element
    text-decoration:underline; controls how the text appears for the anchor
}

“a” represents it html tag to style, that is, <a href=”#”>Link</a> e.g. This is a link.

That link entitled, “This is a link” has two different properties that are controlling the behavior of the link. One property is controlling the color and a separate property is controlling how the text appears. For example:

We have a link here. The code that makes this link work is like the following CSS:

1
2
3
4
5
6
7

a {
     color:#0071BB;
     text-decoration:unerline;
}

We have our color (color:#0071BB) and we have the underline (text-decoration:unerline;).

We are choosing to type the a tag. We are changing the default color of the anchor and we are changing how the anchor will appear on a page by adding an underline to the anchor.

A breakdown of this would reveal the following relationship: Selector > Property > Value
The selector relies on the property and value to change how the selector will look.

Another example using HTML selectors would be the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ul {
     list-style-type:disc;
     padding-left:20px;
}

ul li {
     float:left;
     margin-left:10px;
}

ul li a {
     padding:5px 10px;
     background-color:black;
     color:white;
}

The CSS above styles the HTML below:

1
2
3
4
5
6
7
8
9

<ul>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 1</a></li>
</ul>

Although this example is a little longer and contains more code, there is still the relationship between the selectors, properties, and values. We still are choosing which HTML elements to style and we are using properties and values to style them.

Class Selectors

Class selectors are different than HTML selectors. We can use class selectors multiple times on a web page. Class selectors can be used on any HTML element that allows for the use of the class attribute in HTML. Class selectors are detonated by an end stop (.) before the name of the selector.

For instance,

1
2
3
4
5
6
7
8
9
10
11

<ul>
     <li class="active"><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/*"Global" Styles*/
ul {
     list-style-type:disc;
     padding-left:20px;
}

ul li {
     float:left;
     margin-left:10px;
}

ul li a {
     padding:5px 10px;
     background-color:black;
     color:white;
}

/*Class Selector*/

.active {
     padding:5px 10px;
     background-color:black;
     color:white;
}

On the first li element we have <li class=”active”>. The class attribute is looking for the class selector named “active” and applying those styles to that element. We will discuss class selectors in greater detail in a later tutorial. The main idea for now is that they can be used multiple times in a web page and the selector can be called by using the “class” attribute on virtually any HTML element.

ID Selectors

ID selectors are traditionally used to indicate the major divisions between markup and are mostly used on div (or other block-level element) tags. ID selectors are denotated by the use of a pound (#) symbol.
For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<div id="header">
     <div id="nav">
          <ul>
               <li><a href="#">Item 1</a></li>
               <li><a href="#">Item 2</a></li>
               <li><a href="#">Item 3</a></li>
               <li><a href="#">Item 4</a></li>
          </ul>
     </div>
</div>
<div id="sidebar">
     <h2>Joe Smith</h2>
     <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
     </ul>
</div>
<div id="content">
     <p>Some text here</p>
</div>
<div class="clearfix"></div>
<div id="footer">
     <p>Copyright &copy; AtomicPages.net 2010. All Rights Reserved.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

body {
     margin:0 auto;
     width:1000px;
     font:11px sans-serif;
     color:#fff;
}

.clearfix {clear:both;}

#header {
     margin:0 auto;
     display:block;
}

#nav {display:table;}
#nav ul {list-style-type:none;}
#nav ul li {
     float:left;
     padding-left:8px;
}

#sidebar {
     width:200px;
     float:left;
}

#content {
     width:800px;
     float:right;
}

#footer {display:table;}

Notice how the ID attribute for HTML works the same way as the class attribute. The ID attribute calls for the id selector with the given name and applies the styles to it. The <div id=”nav”>, for instance, is calling for the id selector names nav and applying the styles to it. The divs and the ids are also creating logical divisions on our web page e.g. header, nav[igation], sidebar, content and footer.

Comments

Comments are essential to creating any website or program. This allows us to understand what we are thinking or to make additional notes on a web page or program. This also allows for other people to easily see what we our intent is without having to guess.

CSS comments are similar to most multi-line comments in PHP and other programming languages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*This is a single line comment*/
/*
*This document was created by AtomicPages.net
*/
body {
     margin:0 auto; /*sets top + bottom margin to 0 and left + right margins to auto*/
     width:1000px;
     font:11px sans-serif; /*keep sans-serif for continuity across the site*/
     color:#fff; /*do NOT change this value!!*/
}

Comments are useful for making annotations for programmers who don’t deal with the design of website very much, making your code easier to understand, and giving yourself or whoever created the style sheet credit!

Think you got it? Take the quiz and find out!

PHP #6: Even More Control Structures

0
1 year ago
by Jackson Hines in

So far we have learned about the following control structures:

  1. if, elseif, else
  2. while
  3. for

But there are still more. We’ll first look at the switch construct.

Switch

The syntax for a switch statement looks something like this:

1
2
3
4
5
6
7
8
9
10
switch (expression) {
    case value1:
        //some code
    case value2:
        //some code
    case value3:
        //some code
    default:
        //some code
}

When this code is executed, each case is looked at in order. If(value1 == expression), then all code under that case and the code under all subsequent cases will be executed. If not, it will check if(value2 == expressions) and so on. If none of the cases match, the default case is used. You can have as many or as few cases as you want, and having the default case is optional. An important thing that is often forgotten is that all code underneath a true case is executed, even the code within the following cases.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$n = 3;
switch($n){
    case 0:
        print "$n is equal to 0\n";
    case 1:
        print "$n is less than or equal to 1\n";
    case 2:
        print "$n is less than or equal to 2\n";
    case 3:
        print "$n is less than or equal to 3.\n";
    case 4:
        print "$n is less than or equal to 4.\n";
    case 5:
        print "$n is less than or equal to 5.\n";
}

When the above code is executed, the following will be printed:

3 is less than or equal to 3.
3 is less than or equal to 4.
3 is less than or equal to 5.

Notice that once an appropriate case is found, all code in the following cases is executed as well. There is a way to prevent this though. Using the break; command you can jump to the closing brace of the switch statement preventing any more code from being executed.

Also, a default case will be used when no other cases match.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
switch ($n) {
    case 0:
        print "$n is zero.";
        break;
    case 1:
    case 4:
    case 9:
        print "$n is a perfect square.";
        break;  
    case 2:
        print "$n is an even number.";
    case 3:
    case 5:
    case 7:
        print "$n is a prime number.";
        break;
    case 6:
    case 8:
        print "$n is an even number.";
        break;
    default:
        print "Only single-digit numbers are allowed.";
        break;
}

Test for Understanding

  1. What will print if $n is set to 7?
  2. What will print if $n is set to 1?
  3. What will print if $n is set to 20?

Answers:

  1. 7 is a prime number.
  2. 1 is a perfect square.
  3. Only single-digit numbers are allowed.

Wireless Security Explained

0
1 year ago
by Dennis Thompson in ,

Wireless internet access has been around since the mid 1990s and has quickly become a hot item since then. Most computers we purchase today come with the capability to receive wireless internet signals in the form of radio waves.

Wireless Network Interface Cards or NICs for short, come in anything from a camera to a network printer. We even have NICs in our smartphones such as Android, Blackberry, and the iPhone! Wireless internet is convenient and relatively easy to setup around the home.

Security

One of the biggest criticism for wifi is its lack of security methods for keeping unwanted visitors out of your network and keeping your personal documents safe. There are now, however, several measures we can implement to keep our wireless network to ourselves.

Logging onto your router

Logging into our wireless router is extremely easy. The only thing we need to to is open up our favorite web browser and type the IP address of the router. For most routers, the IP address is either of the following:

  • 192.168.0.1
  • 192.168.1.1
    It may also be
  • 192.169.1.254

If you’re not certain how to do this task, then search the web for your router and type something like, “how to log onto [router brand]” or “default login into for [router brand] router”.

Once the IP is entered correctly, a prompt will show up requesting a username and password. This user name is admin and the password (if it’s still default) is either blank, 1234, or admin. If the password has been changed, then enter in the proper password for the router. Note: this password is different from the password to access the internet from the router. Once on the router, look for a menu item that says Wireless Settings.

Disabling SSID

One very obvious security measure is to disable the Service set identifier or SSID. Once the SSID is disables then it would show up as Unnamed Network (or something like that). If someone wished to connect to the network then they would have to manually enter in the correct SSID for that network.

Wireless Security

Uncheck this setting and the SSID will no longer show up and everyone else will have to enter in the proper SSID.

Encrypting the Connection

Encrypting the connection is the biggest security feature of wireless networks. This basically blocks everyone from connecting to our wireless router unless the have the proper password. There are usually several different types of encryptions available to us:

  • WEP
  • WPA-PSK[TKIP]
  • WPA2-PSK[AES]
  • WPA-PSK[TKIP] + WPA2-PSK[AES]

The first one is WEP. This security method is actually deprecated for encrypting 802.11 networks and really shouldn’t be used. The best option for encrypting networks is WPA2-PSK[AES] since it supports both ultrastructure networks and ad hoc networks (WPA cannot support ad hoc networks). AES is also a stronger encryption method than TKIP.

Wireless Security

MAC Filtering

MAC (Media Access Control) Filtering deals with the physical address of a wireless NIC. Our wireless cards and ethernet ports all have a physical address formatting like so: 00-00-00-00-00-00. This uniquely identifies our NICs. Generally, the first three groups refer to the manufacture of the NIC and the last three refer to the “serial number” of the NIC. Every interface, whether it’s gigabit ethernet or a wifi card, must have a MAC address.

Under an option like Advanced Wireless Settings, there should be an option for Mac Filtering (I believe for Linksys routers there’s an option that is called MAC Filtering).

Wireless Security

Simply label the device like Kitchen-PC and to find the MAC address do the following:

  1. Open run and type the following: cmd
  2. Once command prompt is open, type the following command: ipconfig /all
  3. Look for your Wireless LAN Physical Address and input that number into the router.

Mac addresses are highlighted below:

Wireless Security

MAC Filtering literally limits the MAC addresses that can connect to the router. This is a great security feature of most routers but should not be used alone. MAC addresses can easily be spoofed by editing the number in the registry or by using a third-party application.

Wireless Security

MAC Filtering adds an excellent layer of security to our network. When combined with disabling SSID broadcast, setting a WPA2 password and enabling MAC Filtering, our wireless networks are safe and secure. It may take a little more work to add users, but it’s worth its weight in gold in the long run.

Changing the Default Login Password

Perhaps one of the most significant security measures we could implement on our routers is to change the default password for logging onto the router. In the very beginning of this tutorial, we logged into our router via the IP address. If this password is either of the following, then the password must be changed:

  • [No Password]
  • admin
  • 1234

Wireless Security

There should be some menu item that allows us to change the password to log onto the router. Most of the times we cannot change the username that logs onto the router, only the password.

Summary

Above is a common list of things that can be done to secure a wireless network for your home or very very small office. To recap we can do the following:

  • Disable DDIS
  • Encrypt Internet Connection
  • MAC Filtering
  • Changing the password to the router

Additional Things that can be Done

There are a few additional things we can implement on our router that will add an additional layer of security and content filtering for children/employees.

  • Schedule Internet Hours
  • Block sites
Scheduling hours

Scheduling hours literally limits the hours that the router will function. During the “off hours” the router will not allow internet access from any system that is connected to it (whether it’s wireless or wired). This is a simple method for controlling when children or employees are able to access the internet.

Wireless Security

As you can see by the image above, we can limit the time frame for the internet to work on any given day of the week. The only contingency for this is that the time on the router be correct and that Day Light Savings Time is correct too.

Blocking Sites

Blocking malicious websites is always a must on any network. If a malicious bit of software were to infect a system on a network, it could potentially infect other systems in the same network if it’s insecure. Websites that contain pornographic material, websites that reduce employee productivity, and other assorted websites can lead to malware infections.

Wireless Security

These last two techniques can be used to limit the hours that anyone may use the internet and to limit the keywords or specific domains names. This can help prevent users accessing malicious websites and accessing the internet at unwanted times.

Wireless routers are useful and convenient. Securing these devices is essential for keeping networks from being accessed by unwanted users.

Go to Top