<![CDATA[The Hallow Life - All Forums]]> http://thehallowlife.com/forums/ Sat, 19 May 2012 22:03:44 +0000 MyBB <![CDATA[Kewlz in the house]]> http://thehallowlife.com/forums/showthread.php?tid=1695 Wed, 02 May 2012 03:50:34 -0400 http://thehallowlife.com/forums/showthread.php?tid=1695 Some of you may know me, or maybe not. I just came to check out the game. Will download soon.]]> Some of you may know me, or maybe not. I just came to check out the game. Will download soon.]]> <![CDATA[Groups Tab now opened.]]> http://thehallowlife.com/forums/showthread.php?tid=1692 Wed, 11 Apr 2012 02:01:15 -0400 http://thehallowlife.com/forums/showthread.php?tid=1692
I've now opened the tab "groups" for those who like to make clans, crews,
groups, guilds, ...what have you. You can find the FID here:
http://thehallowlife.com/forums/forumdis...hp?fid=120

Remember, for the official groups request. I'm allowing up to 7 groups at this
current time. .-.

-Viral.]]>
I've now opened the tab "groups" for those who like to make clans, crews,
groups, guilds, ...what have you. You can find the FID here:
http://thehallowlife.com/forums/forumdis...hp?fid=120

Remember, for the official groups request. I'm allowing up to 7 groups at this
current time. .-.

-Viral.]]> <![CDATA[[IMPORTANT] Groups now accepted!]]> http://thehallowlife.com/forums/showthread.php?tid=1690 Fri, 06 Apr 2012 03:02:04 -0400 http://thehallowlife.com/forums/showthread.php?tid=1690
Alright, for a short time, I'll be allowing groups. There are however a few stipulations.

For one, PM me by clicking on the "Group Request PM" link below. Thanks.
----
Group Request PM
----

What a group is? A group is a number of people who band together on a
forum to do what they'd like.

What you will get?

Your own sub forum. You will be made leader of said subforum, you can add
anyone else you'd like as leader, you can have as many members as you'd like. You will be allowed your own user bar, which you can set as your display group. You will be allowed your own Ficon (Forum Icon -- The image next to the sub forum).

These are free for a limited time, and will eventually become a paid group only process.
You are encouraged to become a rare group now, rather than later.
However there are some rules and stipulations. All of which, will be covered
if your group request is accepted.

-----

I do hope to see some High Quality groups around here.

-Viral.]]>
Alright, for a short time, I'll be allowing groups. There are however a few stipulations.

For one, PM me by clicking on the "Group Request PM" link below. Thanks.
----
Group Request PM
----

What a group is? A group is a number of people who band together on a
forum to do what they'd like.

What you will get?

Your own sub forum. You will be made leader of said subforum, you can add
anyone else you'd like as leader, you can have as many members as you'd like. You will be allowed your own user bar, which you can set as your display group. You will be allowed your own Ficon (Forum Icon -- The image next to the sub forum).

These are free for a limited time, and will eventually become a paid group only process.
You are encouraged to become a rare group now, rather than later.
However there are some rules and stipulations. All of which, will be covered
if your group request is accepted.

-----

I do hope to see some High Quality groups around here.

-Viral.]]> <![CDATA[VWBC - Lesson 15: Managing a server.]]> http://thehallowlife.com/forums/showthread.php?tid=1689 Thu, 05 Apr 2012 21:57:27 -0400 http://thehallowlife.com/forums/showthread.php?tid=1689
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
VWBC Side Lesson 2
VWBC: Lesson 13
VWBC: Lesson 14
----

Alright welcome back to my class. Today we're going to be going over how to manager your server you just installed. Whether that server be a VPS (Virtual Private Server) or a dedicated server, we're going to map out some things needed to run and manage a server.
The first thing we'll be going over is basic things we need to keep watch over. But don't fret we'll get into some commands you can use to help you manage your server.

Now contrary to popular belief managing a Linux server is hard, it's actually pretty damn easy, so long as you understand the basics or the fundamentals of what you're doing or should be doing. But while it may be easy, there are TONS of things to do or keep in mind. There's system administration, networking, traffic control, protection/security, and oh god so much more. There is really just TOO much to put in to this one class, so I'll keep it relatively short today but add on more to it in later classes when we revisit this area. But for today we'll go over some basic administration.

Some things to keep in mind when managing a server is Bandwidth, CPU Load, Disk Space, Processes, Protection...
But because we're managing a web server we'll go over only the web basics for now and get into more in-depth system administration later.

Why do we need to keep an eye on Bandwidth? Well mainly because bandwidth is more or less the rate of data transfer which is normally measured in bps (Bits Per Second). Now why is this so important? Let's say your server is configured to only handle up to 50MB of bandwidth. If you're running a web server and the traffic you receive is starting to exceed your bandwidth limit then you will no longer be able to handle anymore potential visitors and would start either throwing out errors or causing your newer visitors to see error pages like "Sorry, no longer can let you in I ran out of room." because essentially that what it is. Bandwidth is like "room" or...it's a "spots" in a room. Imagine for a minute that your server is actually a giant auditorium and while we're still imagining here, let's also say that a single chair is 1MB of bandwidth. So in this room you'll have 50 chairs. Now, let's say you started advertising your site and now all of the sudden you start getting vistors. Well, after the first 50 people come, what then? What do the rest do? That's right since they can't fit inside the room they leave. They were told by the server that there was no room and they're not welcome right now. They left a little angry. This is why it's important to be able to manage bandwidth.

But exactly is managing it? Well that's a bit difficult to explain, because literally everything done on the web takes bandwidth from a server. Downloading things take up bandwidth, loading images or transferring text/data takes up bandwidth. Literally just pinging a server takes up bandwidth. Uploading takes up bandwidth, even something as simple as looking at the website takes up bandwidth.
This is why it's so good to have LOTS of bandwidth (preferably unlimited). Some hosts will allow you unlimited bandwidth, which is awesome considering how important it is. But if you're hosting this off your own computer than your Bandwidth is only as much as your ISP will allow you. Unless you are your own ISP in this case, I don't know honestly. I've never been in a situation where I didn't have either a host or a home server. So remember, everything takes upi bandwidth. People visiting your site, people loading imagines people uploading or downloading, people pinging it, you uploading via FTP, people sending out mail from the server. Anything that is connected to the server via HTTP, SMTP, FTP and so on will take up your server's bandwidth.

Another thing we need keep an eye on is CPU Load. Why? Because your server's hardware can only take so much command processing and data parsing before it decides to say "Hey, you know what? Screw this. I/m tired and over worked, I'm going to sleep". Take for instance your own computer. What happens if you run too many programs at once? Or use a program or two that is resource heavy like games? Right, the processor decides to shut down to protect itself. This would also occur from over heating as well, granted, but not my point. If a server starts to exceed a certain percentage of CPU Load a lot of hosts will just turn you off for a few minutes to let it cool down. If you own it yourself then I would suggest shutting it off yourself and letting it cool down. This is to protect your hardware and that's about it really. Just protect the hardware. There is no way to un-limit this restriction. Your CPU (Processor) can only handle so much. So it's a good thing to manage this. If it gets to a certain % just cut it off for now or learn to manage other things better so your processor doesn't get too over worked. An excessive amount of data traffic can cause it to have a heavy load, an excessive amount of cron jobs can cause it to overload, an excessive amount of commands or requests can cause it to overload.

A simple DDoS attack via a web form can cause it to overload, so remember to keep an eye on your CPU load and not to let it go over (I would suggest 75%) it's limit lest you be having to turn off your server for a few minutes. Also because CPU's can be affected by heat and servers tend to heat up really fast, it's a good thing to have multiple fans running or to put inside a cold cold room to keep it cool. Like I said though, not much you can do to limit the amount of pressure on a CPU except by managing things like the amount of work it does (e.g. process data).

Disk space. I'm sure everyone here will know what this is, but essentially it's the amount of room you have left on your server/web server. It's your hard drive. Think of your actual computer hard drive and how it gives you "space" to use. It's more or less the same thing. Why is this important? Because things like content need space to sit. Uploading your website files need space, your files, your clients files (if you have a client base like this), things like flat file databases if you use those. Normally having some odd terabyte is space is more than enough, you never know, for those big big sites or torrent sites. This is something I would rank lower on the list because it's easy to get more space, or manage it but it's still important to know that when managing a server you need to keep an eye on disk space.

Processes. What is this? Well processes are exactly like the processes you see running in your task manager. Each processes takes up its own amount of memory and CPU load, so if you have too many processes, the CPU becomes over loaded. Each cron is a process to itself, each service, each program you have running is all processes. It's a good idea to manage the amount of processes you have running at a time. Normally you would have about 7-10 processes running at a time. But this can vary depending on the website or server. But because this ties into CPU load, and it causing the processor to overload and shut down, it's a good idea to keep this under watch to make sure it doesn't cause too much CPU % to be taken up. If it does start to happen, you can either close some processes out or suspend some processes to balance the load on the CPU.

Protection. This is truly one of the greatest things you need to keep watch over. Many times have I seen a server suffer an attack in the many many forms I've seen in them. So consistently checking your logs for errors or attack vectors, can help reduce this or at least alert you to any potential problems. Things like using .htaccess, IP Tables, Cloudflare and so on are great for preventing a lot of attacks like DDoS. However this is only a small portion of what you can do to help you protect your website. Doing things like stripping tags and parsing data correctly can help protect your server from unwarranted attacks. But need not worry, when we get into the security series we'll cover this.

Now, while this may have been a short class, let me go ahead and give you a few commands you can do, to help manage your server.

df -h ::: How much hard disk space you have on each mounted file system.

netstat
netstat |head
netstat -r ::: Network connections and status of sockets (For all 3 netstat commands above)

nslookup DOMAIN (e.g.: nslookup this.domain.com) ::: Checks the domain name and IP information of a server

ps
ps -A |more ::: Lists all processes on the server

route -v ::: Almost exactly like Netstat actually, some people just prefer using this command.

top ::: Displays system statistics and details about your server's active processes

who ::: Displays details of all users currently on the server

And that about does it for the commands. Your homework for this class is simply to fire up that VPS/Server with Ubuntu on it and run these
commands on your server to see the interesting things they do. The best way to understand a command is not to read them but to use them.
So post backs with your results or pictures. Either is fine. Next class we'll be doing a fun review. (Well fun if I can make it so. After that we'll be
going into SQL to manage our DB systems. )

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
VWBC Side Lesson 2
VWBC: Lesson 13
VWBC: Lesson 14
----

Alright welcome back to my class. Today we're going to be going over how to manager your server you just installed. Whether that server be a VPS (Virtual Private Server) or a dedicated server, we're going to map out some things needed to run and manage a server.
The first thing we'll be going over is basic things we need to keep watch over. But don't fret we'll get into some commands you can use to help you manage your server.

Now contrary to popular belief managing a Linux server is hard, it's actually pretty damn easy, so long as you understand the basics or the fundamentals of what you're doing or should be doing. But while it may be easy, there are TONS of things to do or keep in mind. There's system administration, networking, traffic control, protection/security, and oh god so much more. There is really just TOO much to put in to this one class, so I'll keep it relatively short today but add on more to it in later classes when we revisit this area. But for today we'll go over some basic administration.

Some things to keep in mind when managing a server is Bandwidth, CPU Load, Disk Space, Processes, Protection...
But because we're managing a web server we'll go over only the web basics for now and get into more in-depth system administration later.

Why do we need to keep an eye on Bandwidth? Well mainly because bandwidth is more or less the rate of data transfer which is normally measured in bps (Bits Per Second). Now why is this so important? Let's say your server is configured to only handle up to 50MB of bandwidth. If you're running a web server and the traffic you receive is starting to exceed your bandwidth limit then you will no longer be able to handle anymore potential visitors and would start either throwing out errors or causing your newer visitors to see error pages like "Sorry, no longer can let you in I ran out of room." because essentially that what it is. Bandwidth is like "room" or...it's a "spots" in a room. Imagine for a minute that your server is actually a giant auditorium and while we're still imagining here, let's also say that a single chair is 1MB of bandwidth. So in this room you'll have 50 chairs. Now, let's say you started advertising your site and now all of the sudden you start getting vistors. Well, after the first 50 people come, what then? What do the rest do? That's right since they can't fit inside the room they leave. They were told by the server that there was no room and they're not welcome right now. They left a little angry. This is why it's important to be able to manage bandwidth.

But exactly is managing it? Well that's a bit difficult to explain, because literally everything done on the web takes bandwidth from a server. Downloading things take up bandwidth, loading images or transferring text/data takes up bandwidth. Literally just pinging a server takes up bandwidth. Uploading takes up bandwidth, even something as simple as looking at the website takes up bandwidth.
This is why it's so good to have LOTS of bandwidth (preferably unlimited). Some hosts will allow you unlimited bandwidth, which is awesome considering how important it is. But if you're hosting this off your own computer than your Bandwidth is only as much as your ISP will allow you. Unless you are your own ISP in this case, I don't know honestly. I've never been in a situation where I didn't have either a host or a home server. So remember, everything takes upi bandwidth. People visiting your site, people loading imagines people uploading or downloading, people pinging it, you uploading via FTP, people sending out mail from the server. Anything that is connected to the server via HTTP, SMTP, FTP and so on will take up your server's bandwidth.

Another thing we need keep an eye on is CPU Load. Why? Because your server's hardware can only take so much command processing and data parsing before it decides to say "Hey, you know what? Screw this. I/m tired and over worked, I'm going to sleep". Take for instance your own computer. What happens if you run too many programs at once? Or use a program or two that is resource heavy like games? Right, the processor decides to shut down to protect itself. This would also occur from over heating as well, granted, but not my point. If a server starts to exceed a certain percentage of CPU Load a lot of hosts will just turn you off for a few minutes to let it cool down. If you own it yourself then I would suggest shutting it off yourself and letting it cool down. This is to protect your hardware and that's about it really. Just protect the hardware. There is no way to un-limit this restriction. Your CPU (Processor) can only handle so much. So it's a good thing to manage this. If it gets to a certain % just cut it off for now or learn to manage other things better so your processor doesn't get too over worked. An excessive amount of data traffic can cause it to have a heavy load, an excessive amount of cron jobs can cause it to overload, an excessive amount of commands or requests can cause it to overload.

A simple DDoS attack via a web form can cause it to overload, so remember to keep an eye on your CPU load and not to let it go over (I would suggest 75%) it's limit lest you be having to turn off your server for a few minutes. Also because CPU's can be affected by heat and servers tend to heat up really fast, it's a good thing to have multiple fans running or to put inside a cold cold room to keep it cool. Like I said though, not much you can do to limit the amount of pressure on a CPU except by managing things like the amount of work it does (e.g. process data).

Disk space. I'm sure everyone here will know what this is, but essentially it's the amount of room you have left on your server/web server. It's your hard drive. Think of your actual computer hard drive and how it gives you "space" to use. It's more or less the same thing. Why is this important? Because things like content need space to sit. Uploading your website files need space, your files, your clients files (if you have a client base like this), things like flat file databases if you use those. Normally having some odd terabyte is space is more than enough, you never know, for those big big sites or torrent sites. This is something I would rank lower on the list because it's easy to get more space, or manage it but it's still important to know that when managing a server you need to keep an eye on disk space.

Processes. What is this? Well processes are exactly like the processes you see running in your task manager. Each processes takes up its own amount of memory and CPU load, so if you have too many processes, the CPU becomes over loaded. Each cron is a process to itself, each service, each program you have running is all processes. It's a good idea to manage the amount of processes you have running at a time. Normally you would have about 7-10 processes running at a time. But this can vary depending on the website or server. But because this ties into CPU load, and it causing the processor to overload and shut down, it's a good idea to keep this under watch to make sure it doesn't cause too much CPU % to be taken up. If it does start to happen, you can either close some processes out or suspend some processes to balance the load on the CPU.

Protection. This is truly one of the greatest things you need to keep watch over. Many times have I seen a server suffer an attack in the many many forms I've seen in them. So consistently checking your logs for errors or attack vectors, can help reduce this or at least alert you to any potential problems. Things like using .htaccess, IP Tables, Cloudflare and so on are great for preventing a lot of attacks like DDoS. However this is only a small portion of what you can do to help you protect your website. Doing things like stripping tags and parsing data correctly can help protect your server from unwarranted attacks. But need not worry, when we get into the security series we'll cover this.

Now, while this may have been a short class, let me go ahead and give you a few commands you can do, to help manage your server.

df -h ::: How much hard disk space you have on each mounted file system.

netstat
netstat |head
netstat -r ::: Network connections and status of sockets (For all 3 netstat commands above)

nslookup DOMAIN (e.g.: nslookup this.domain.com) ::: Checks the domain name and IP information of a server

ps
ps -A |more ::: Lists all processes on the server

route -v ::: Almost exactly like Netstat actually, some people just prefer using this command.

top ::: Displays system statistics and details about your server's active processes

who ::: Displays details of all users currently on the server

And that about does it for the commands. Your homework for this class is simply to fire up that VPS/Server with Ubuntu on it and run these
commands on your server to see the interesting things they do. The best way to understand a command is not to read them but to use them.
So post backs with your results or pictures. Either is fine. Next class we'll be doing a fun review. (Well fun if I can make it so. After that we'll be
going into SQL to manage our DB systems. )

-Viral.]]> <![CDATA[VWBC - Lesson 14: Installing and setting up a server.]]> http://thehallowlife.com/forums/showthread.php?tid=1688 Thu, 05 Apr 2012 21:55:16 -0400 http://thehallowlife.com/forums/showthread.php?tid=1688
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
VWBC Side Lesson 2
VWBC: Lesson 13
----

(If I randomly go from short length sentences to long, I apologize. I'm trying to cut back on that a little).

So now that we have gotten some basic server stuff down such as misconceptions and cleared the air of just a little of what can be expected let's move on to actually installing a server. However, first, I think I'd like to go over a couple things. Before we begin I'm going to tell you the difference between a Server and a VPS. And then I'll show you to install both of them along with a few tweaks you can do post-installation.

A server. What is a server exactly? A lot of people will tell you a server is a program that sends calls or information of some type to a client based application. This is true, however it is the wrong context of what a server is in this case. Some people will tell you a server is a machine. This is technically right, yet wrong. A server is actually just an OS (Operating System). "Wait, Viral....what are you talking about? I thought an OS was just some software to let you play games and browse the internet?". Well...yes, it is. However an OS is also a server. Think for a minute, about the OS named Ubuntu Server, or the OS named Mac OS Lion Server.

Is they are OSes, why were they named servers? Correct, because a server is more accurately a Machine AND OS running in tandem to create place for you to work and let others view your works. The machine part works the part of fitting the requirements for hosting the OS and keeping it (partially) safe. It also has the job of holding all the data it will be providing and relaying. A OS is responsible for creating that data, relaying the data and staying (partially) safe. It also has the job of being able to call the data stored on the machine itself.

An OS is software, yes. But it's more than just software it's normally the front end (GUI) of a machine for people to use. What allows you to use your computer right now, without having any knowledge in programming or computer skills is the GUI or the front end of the OS. A lot if not most, server OSes come without a GUI and only accept command line argument/commands.

A machine is what stores the data. Your computer, right now, is holding all your data. When you download stuff like programs or movies, those have to be stored somewhere, right? So where does it go? Yeah your computer's hard drive (what holds information and calls it/relays it) is what holds the data. It puts it there in this tiny container waiting for you to call it back out. It's what lets your OS run and allow you to play on it.
However, I should stop it there, otherwise I will be going on for hours about computers and that's a whole another section I plan to get into later - no need to worry.

So what is a server? A server is an Operating System (OS) and a machine working in tandem. It's not simply JUST a machine or an OS.
---

A VPS. Now, what is a VPS? A VPS stands for "Virtual Private Server". It is literally nothing but a "Virtual Machine" (VM). A VM is a piece of software which can run it's on independent OS. It can run it's own server software (e.g.: Server OS). It literally emulates a computer while on a computer. So it's a computer within a computer. That is it. Everything else
is still the same except the amount of room you have, and the hardware specs. The hardware specs and room you have for information is still invoked from the parent computer (your actual machine). Everything else is emulated. This is the only difference. It is very possible to have hundreds of VPSes on the same computer running at the same time (so long as you set it up right and had the hardware requirements.)
----

So now we know what a Server is and what a VPS is. What's next? We're gonna install them of course. For this entire class I will be using Ubuntu 10.10 for VPS installation and I'll be using Ubuntu Server 10 for the machine OS since I'm currently looking at my CD for it. Lol.

To start you'll want to burn the .iso file to a CD or DVD. When you've done so you'll then want to pop that into your CD tray on whatever computer you intended to run this on, and turn on the computer. NOTE: Make sure your hardware meets specifications for your OS intended.
Now then, when you turn on the computer hit the "Esc" button which should bring up a menu with your hard driver name, CD name, and any other names of any other devices connected to it (such as a USB). Select CD from the list and hit enter to run the setup. When it finally loads, the installation itself should be pretty strait forward and not require much help from me - if any at all really.

Your first screen is is just a language selection so it knows which one to install and what to communicate with you with. Next screen is an introduction/splash page screen. It should have 5 options:
"Install Ubuntu Server", "Look for errors", "Test memory", "Boot from first Hard disk", "Rescue this OS". You'll just want to choose the first option and continue with the installation process. Now, next screen you'll be presented with yet another language screen (yay!) where you'll select the computer language. Next screen up you get to pick a country, woo. After choosing your country we'll go right to the next screen which is asking you for your keyboard layout. Now if you don't know it (and I don't expect you too) just select "No" for this option and move on. If you chose no, the next screen you get is a list of countries asking where the eff your keyboard is from. Choose your own country for this, and next screen choose the same option. For USA users, if you chose "USA" as the first choice, then choose the first choice it highlights which is just "USA" with nothing following it.

Next screen we'll go into is host naming. It'll ask you to name your host machine. You can name this anything you'd like. Default name is Ubuntu, I myself will choose to name it "Viral's Class". After naming it what your heart desires, move to the next screen please. It'll ask you for the timezone. If it happens to guess it right on the first try, kudos to the computer. If not, just select no and it'll give you a list of timezones to choose from. Next screen is asking you to partition the disk. I will assume this is a clean install, (or overwrite of an old OS) and therefor we want to choose the option "Guided Install - Use my entire disk". If you DO NOT want to use the entire disk or this is not a clean install, choose manual to select your partition size and name. However, it is much easier to make a clean install and not have to worry about it.

Now, next screen you're presented with is asking you which hard drive to install it too. Choose the right one, (should be the only option unless you have multiple hard drives connected - e.g.: external HD's; unplug all of them before doing this install.)

Now next screen you get presented with is asking you if you're sure of every option. Select yes and it will finalize the installation. Next screen will ask you how much space you wish to partition for this installation. You can set any amount. If you're going to host a website on this machine, like I assume then choose all of it. If you are going to use this machine as a signalized OS, then choose all of it. I myself personally chose 100GB for this machine because I dual boot Red Hat Linux on here.
I run a web server from this machine as well, so I'm going to need more room for later. But more on that at a later time.
Next screen is asking you to confirm everything. Just select yes. Ahh finally, almost done. It'll now ask you to setup a username and password. DO NOT FORGET THESE.

Once you have done so, it'll bring you to a screen which may seem confusing to you. It's asking you if you want to encrypt your hard disk. WAIT, before you hit yes. I'm going to select no to keep it simple, but it's basically saying that it'll mount all your data when you login, and unmount all your data when you log out. This is to keep your files private in the event it is stolen or broken. Now while this seems like a good things, I recommend this only for advanced people and do note it's not all fun and games and comes with it's fair share of problems. Next screen will ask you if you'd like to use a proxy to access world wide web. Choose no, unless you seriously want to choose a proxy to run under. But note it will slow the network response time, and isn't really worth it in the end. Almost the last screen. Woo woo.

Alright next screen is asking you about updates. You can choose any of the options you'd like, I myself personally chose the first option "Do not install any updates you crazy moron". And finally the next screen is important.

Now, on this next screen if you plan to run a web server, or host a website or host a private server for a game or whatever. Just any type of server (and I assume so since you chose "Ubuntu Server"?) then you'll want a LAMP setup. LAMP is just generally better for Linux systems like Ubuntu. You'll also want to install a Mail setup and a OpenSSH service.
Mail is for setting up a mail server to allow an email service of types for your server and OpenSSH is so you can manually login to your machine via SSH and run command line arguments from there without having to be at the machine personally. Neato right? There are a few other options you COULD choose, but these 3 are generally the most important for any type of web server or gaming server. I don't really recommend selecting any of the others except those 3. Also, to select the option, do not hit enter but rather bash the "Space Bar" with your head (Lol, it's a joke. Just tap it). Now finally, if you chose the LAMP setup, it'll ask you for a MySQL password and a confirmation password. DO NOT FORGET THIS PASSWORD, for the love of God, don't. When you do confirm it and it install MySQL. It'll give you a new screen, asking you to select an internet type site. Just choose the second option "Internet Site". It'll tell you that it sends mail via SMTP, but we don't care right now. If you're using a mail server, it'll now ask you the domain the mail comes from. You can choose your own domain, local domain, or just any made up one really. And lastly before final install, it'll ask you if you'd like to install grub. If you plan to have one OS and only OS, you can install grub. However, more than one and I wouldn't install it.

Now that we have finally barreled through ALL of that stuff/junk. It'll finally give you the "finalize installation" screen by telling you to reboot the system. So go ahead and do so. Reboot the system. Once rebooted it'll ask you for your username. Log in with the details you provided earlier. And then it'll ask for a password. Note: the password will remain blank but you are actually type. This is a security measure against "wandering eyes". Once you have logged in it'll show you various updates and system loads. However you may notice something strange.

Wait....Viral. WHAT THE FUCK? NO GUI? MY OS IS BROKEN! No...No it's not. That is how most servers will come. It is a GUI-less server, which allows you to run command line arguments/commands at your discretion, therefor it is HIGHLY recommended to know at least some basic Linux commands such as apt-get and sudo.

Now for a VPS. If you bought a VPS from a host provider, like say Host Gator, Burstnet, and so on the VPS comes with the OS already install and you can start running commands like sudo apt-get NAME right away.
However, if you're using a VM to install this, then get Daemon Tools and mount the image to a virtual device and then in the VM open the mounted image from there, everything else is more or less the same. After you're done installing unmount the device from Daemon Tools.

Here are a few tweaks for you. If you bought the VPS from a hostprovider, it, in most cases will NOT come with LAMP. So to install LAMP on your VPS simply go to the command line and run this command:
Code:
sudo apt-get install lamp-server^
. Copy this entire thing. Including the carrot symbol at the end. This should more or less install LAMP. If it does not, it is either a problem with the hosting provider, or you need to enable a few things first.

If you're like me and would like to test to make sure Apache works then navigate to your locahost to see the test page. And then to test PHP do the following:
Code:
sudo nano /var/www/testing.php
which will bring up a text editor with nothing in it. In that text editor, type in this:
Code:
<?php phpinfo(); ?>
after doing so, close out the text editor and restart Apache by doing the following:
Code:
sudo /etc/init.d/apache2 restart
.

When you do so, navigate to your localhost and then to your directory of the php file in this case, localhost.com/testing.php. If it shows you a wife array of information, it means it worked. If not, something went wrong wtf?

Next you'll want to bind the IP address to your localhost and MySQL DB. So for this we'll grep it.
Code:
cat /etc/hosts | grep localhost
will show you the IP address that's being used. In most cases, this will say "127.0.0.1". If not, well weird but it's not uncommon. Next you'll want to bind this IP to your configuration file with this command:
Code:
cat /etc/mysql/my.cnf | grep bind-address

And last but not least, if you're like me and want a front end easy to use web manager for databases, we'll go ahead and install phpMyAdmin (NOTE: This does not come with a LAMP setup, so machine users will need to do this (and the above following as well)).
Run this code:
Code:
sudo apt-get install libapache2-mod-auth-mysql phpmyadmin
.

In the following prompts, the first will give you information. ignore it and select "Ok". Next prompt you will need to use SPACEBAR to choose the option "Apache2" NOT the other one. Next prompt is more information, just hit Enter. Use the Tab key to select "Yes" and move on. You'll be prompted to enter the MySQL root username and password from earlier. Input the correct details. And now to test if it works, go to localhost/phpmyadmin/. If does then you can login with root name and password you provided just a minute ago.
====

Ahh, now that is all for this class. I've already made it ridiculously long, and I fear I may hit the post limit. Next class will be entertaining too, I promise. (I hope I can make it so, anyway. )

I would hope however you decide to choose a machine instead of a VPS by a hosting provider. I tell you this because it's much easier to manage, its safer, it's just generally cooler and you don't need to worry about pesky hosting providers getting your information or charging you monthly. ._.

Till next time,

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
VWBC Side Lesson 2
VWBC: Lesson 13
----

(If I randomly go from short length sentences to long, I apologize. I'm trying to cut back on that a little).

So now that we have gotten some basic server stuff down such as misconceptions and cleared the air of just a little of what can be expected let's move on to actually installing a server. However, first, I think I'd like to go over a couple things. Before we begin I'm going to tell you the difference between a Server and a VPS. And then I'll show you to install both of them along with a few tweaks you can do post-installation.

A server. What is a server exactly? A lot of people will tell you a server is a program that sends calls or information of some type to a client based application. This is true, however it is the wrong context of what a server is in this case. Some people will tell you a server is a machine. This is technically right, yet wrong. A server is actually just an OS (Operating System). "Wait, Viral....what are you talking about? I thought an OS was just some software to let you play games and browse the internet?". Well...yes, it is. However an OS is also a server. Think for a minute, about the OS named Ubuntu Server, or the OS named Mac OS Lion Server.

Is they are OSes, why were they named servers? Correct, because a server is more accurately a Machine AND OS running in tandem to create place for you to work and let others view your works. The machine part works the part of fitting the requirements for hosting the OS and keeping it (partially) safe. It also has the job of holding all the data it will be providing and relaying. A OS is responsible for creating that data, relaying the data and staying (partially) safe. It also has the job of being able to call the data stored on the machine itself.

An OS is software, yes. But it's more than just software it's normally the front end (GUI) of a machine for people to use. What allows you to use your computer right now, without having any knowledge in programming or computer skills is the GUI or the front end of the OS. A lot if not most, server OSes come without a GUI and only accept command line argument/commands.

A machine is what stores the data. Your computer, right now, is holding all your data. When you download stuff like programs or movies, those have to be stored somewhere, right? So where does it go? Yeah your computer's hard drive (what holds information and calls it/relays it) is what holds the data. It puts it there in this tiny container waiting for you to call it back out. It's what lets your OS run and allow you to play on it.
However, I should stop it there, otherwise I will be going on for hours about computers and that's a whole another section I plan to get into later - no need to worry.

So what is a server? A server is an Operating System (OS) and a machine working in tandem. It's not simply JUST a machine or an OS.
---

A VPS. Now, what is a VPS? A VPS stands for "Virtual Private Server". It is literally nothing but a "Virtual Machine" (VM). A VM is a piece of software which can run it's on independent OS. It can run it's own server software (e.g.: Server OS). It literally emulates a computer while on a computer. So it's a computer within a computer. That is it. Everything else
is still the same except the amount of room you have, and the hardware specs. The hardware specs and room you have for information is still invoked from the parent computer (your actual machine). Everything else is emulated. This is the only difference. It is very possible to have hundreds of VPSes on the same computer running at the same time (so long as you set it up right and had the hardware requirements.)
----

So now we know what a Server is and what a VPS is. What's next? We're gonna install them of course. For this entire class I will be using Ubuntu 10.10 for VPS installation and I'll be using Ubuntu Server 10 for the machine OS since I'm currently looking at my CD for it. Lol.

To start you'll want to burn the .iso file to a CD or DVD. When you've done so you'll then want to pop that into your CD tray on whatever computer you intended to run this on, and turn on the computer. NOTE: Make sure your hardware meets specifications for your OS intended.
Now then, when you turn on the computer hit the "Esc" button which should bring up a menu with your hard driver name, CD name, and any other names of any other devices connected to it (such as a USB). Select CD from the list and hit enter to run the setup. When it finally loads, the installation itself should be pretty strait forward and not require much help from me - if any at all really.

Your first screen is is just a language selection so it knows which one to install and what to communicate with you with. Next screen is an introduction/splash page screen. It should have 5 options:
"Install Ubuntu Server", "Look for errors", "Test memory", "Boot from first Hard disk", "Rescue this OS". You'll just want to choose the first option and continue with the installation process. Now, next screen you'll be presented with yet another language screen (yay!) where you'll select the computer language. Next screen up you get to pick a country, woo. After choosing your country we'll go right to the next screen which is asking you for your keyboard layout. Now if you don't know it (and I don't expect you too) just select "No" for this option and move on. If you chose no, the next screen you get is a list of countries asking where the eff your keyboard is from. Choose your own country for this, and next screen choose the same option. For USA users, if you chose "USA" as the first choice, then choose the first choice it highlights which is just "USA" with nothing following it.

Next screen we'll go into is host naming. It'll ask you to name your host machine. You can name this anything you'd like. Default name is Ubuntu, I myself will choose to name it "Viral's Class". After naming it what your heart desires, move to the next screen please. It'll ask you for the timezone. If it happens to guess it right on the first try, kudos to the computer. If not, just select no and it'll give you a list of timezones to choose from. Next screen is asking you to partition the disk. I will assume this is a clean install, (or overwrite of an old OS) and therefor we want to choose the option "Guided Install - Use my entire disk". If you DO NOT want to use the entire disk or this is not a clean install, choose manual to select your partition size and name. However, it is much easier to make a clean install and not have to worry about it.

Now, next screen you're presented with is asking you which hard drive to install it too. Choose the right one, (should be the only option unless you have multiple hard drives connected - e.g.: external HD's; unplug all of them before doing this install.)

Now next screen you get presented with is asking you if you're sure of every option. Select yes and it will finalize the installation. Next screen will ask you how much space you wish to partition for this installation. You can set any amount. If you're going to host a website on this machine, like I assume then choose all of it. If you are going to use this machine as a signalized OS, then choose all of it. I myself personally chose 100GB for this machine because I dual boot Red Hat Linux on here.
I run a web server from this machine as well, so I'm going to need more room for later. But more on that at a later time.
Next screen is asking you to confirm everything. Just select yes. Ahh finally, almost done. It'll now ask you to setup a username and password. DO NOT FORGET THESE.

Once you have done so, it'll bring you to a screen which may seem confusing to you. It's asking you if you want to encrypt your hard disk. WAIT, before you hit yes. I'm going to select no to keep it simple, but it's basically saying that it'll mount all your data when you login, and unmount all your data when you log out. This is to keep your files private in the event it is stolen or broken. Now while this seems like a good things, I recommend this only for advanced people and do note it's not all fun and games and comes with it's fair share of problems. Next screen will ask you if you'd like to use a proxy to access world wide web. Choose no, unless you seriously want to choose a proxy to run under. But note it will slow the network response time, and isn't really worth it in the end. Almost the last screen. Woo woo.

Alright next screen is asking you about updates. You can choose any of the options you'd like, I myself personally chose the first option "Do not install any updates you crazy moron". And finally the next screen is important.

Now, on this next screen if you plan to run a web server, or host a website or host a private server for a game or whatever. Just any type of server (and I assume so since you chose "Ubuntu Server"?) then you'll want a LAMP setup. LAMP is just generally better for Linux systems like Ubuntu. You'll also want to install a Mail setup and a OpenSSH service.
Mail is for setting up a mail server to allow an email service of types for your server and OpenSSH is so you can manually login to your machine via SSH and run command line arguments from there without having to be at the machine personally. Neato right? There are a few other options you COULD choose, but these 3 are generally the most important for any type of web server or gaming server. I don't really recommend selecting any of the others except those 3. Also, to select the option, do not hit enter but rather bash the "Space Bar" with your head (Lol, it's a joke. Just tap it). Now finally, if you chose the LAMP setup, it'll ask you for a MySQL password and a confirmation password. DO NOT FORGET THIS PASSWORD, for the love of God, don't. When you do confirm it and it install MySQL. It'll give you a new screen, asking you to select an internet type site. Just choose the second option "Internet Site". It'll tell you that it sends mail via SMTP, but we don't care right now. If you're using a mail server, it'll now ask you the domain the mail comes from. You can choose your own domain, local domain, or just any made up one really. And lastly before final install, it'll ask you if you'd like to install grub. If you plan to have one OS and only OS, you can install grub. However, more than one and I wouldn't install it.

Now that we have finally barreled through ALL of that stuff/junk. It'll finally give you the "finalize installation" screen by telling you to reboot the system. So go ahead and do so. Reboot the system. Once rebooted it'll ask you for your username. Log in with the details you provided earlier. And then it'll ask for a password. Note: the password will remain blank but you are actually type. This is a security measure against "wandering eyes". Once you have logged in it'll show you various updates and system loads. However you may notice something strange.

Wait....Viral. WHAT THE FUCK? NO GUI? MY OS IS BROKEN! No...No it's not. That is how most servers will come. It is a GUI-less server, which allows you to run command line arguments/commands at your discretion, therefor it is HIGHLY recommended to know at least some basic Linux commands such as apt-get and sudo.

Now for a VPS. If you bought a VPS from a host provider, like say Host Gator, Burstnet, and so on the VPS comes with the OS already install and you can start running commands like sudo apt-get NAME right away.
However, if you're using a VM to install this, then get Daemon Tools and mount the image to a virtual device and then in the VM open the mounted image from there, everything else is more or less the same. After you're done installing unmount the device from Daemon Tools.

Here are a few tweaks for you. If you bought the VPS from a hostprovider, it, in most cases will NOT come with LAMP. So to install LAMP on your VPS simply go to the command line and run this command:
Code:
sudo apt-get install lamp-server^
. Copy this entire thing. Including the carrot symbol at the end. This should more or less install LAMP. If it does not, it is either a problem with the hosting provider, or you need to enable a few things first.

If you're like me and would like to test to make sure Apache works then navigate to your locahost to see the test page. And then to test PHP do the following:
Code:
sudo nano /var/www/testing.php
which will bring up a text editor with nothing in it. In that text editor, type in this:
Code:
<?php phpinfo(); ?>
after doing so, close out the text editor and restart Apache by doing the following:
Code:
sudo /etc/init.d/apache2 restart
.

When you do so, navigate to your localhost and then to your directory of the php file in this case, localhost.com/testing.php. If it shows you a wife array of information, it means it worked. If not, something went wrong wtf?

Next you'll want to bind the IP address to your localhost and MySQL DB. So for this we'll grep it.
Code:
cat /etc/hosts | grep localhost
will show you the IP address that's being used. In most cases, this will say "127.0.0.1". If not, well weird but it's not uncommon. Next you'll want to bind this IP to your configuration file with this command:
Code:
cat /etc/mysql/my.cnf | grep bind-address

And last but not least, if you're like me and want a front end easy to use web manager for databases, we'll go ahead and install phpMyAdmin (NOTE: This does not come with a LAMP setup, so machine users will need to do this (and the above following as well)).
Run this code:
Code:
sudo apt-get install libapache2-mod-auth-mysql phpmyadmin
.

In the following prompts, the first will give you information. ignore it and select "Ok". Next prompt you will need to use SPACEBAR to choose the option "Apache2" NOT the other one. Next prompt is more information, just hit Enter. Use the Tab key to select "Yes" and move on. You'll be prompted to enter the MySQL root username and password from earlier. Input the correct details. And now to test if it works, go to localhost/phpmyadmin/. If does then you can login with root name and password you provided just a minute ago.
====

Ahh, now that is all for this class. I've already made it ridiculously long, and I fear I may hit the post limit. Next class will be entertaining too, I promise. (I hope I can make it so, anyway. )

I would hope however you decide to choose a machine instead of a VPS by a hosting provider. I tell you this because it's much easier to manage, its safer, it's just generally cooler and you don't need to worry about pesky hosting providers getting your information or charging you monthly. ._.

Till next time,

-Viral.]]> <![CDATA[VWBC - Lesson 13: Server Basics]]> http://thehallowlife.com/forums/showthread.php?tid=1687 Thu, 05 Apr 2012 21:52:42 -0400 http://thehallowlife.com/forums/showthread.php?tid=1687
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
VWBC Side Lesson 2
----

Ahh so today we get to more advanced stuff (well maybe not just yet
but we're getting there, so congratz to those who've followed along and
stuck it out with me long enough to reach this point).

Today we're going to be going over some Server Basics. Essentially what I
plan to teach here is the basics of a web server, how they work, what they
do, how to install them, how to configure them, security, files, how to
manage them and so on and so forth. So let's start off shall we.
--

A Server, is literally just a machine which can store up to good amount of
data. Your personal computer, that you're sitting in front of right now, could
be a web server if you set it up to be. And this is essentially what a server
is. A computer with a eff load more memory/hard drive space than your
typical computer you could get at Best Buy.

Now before we progress, we should know how a computer works, however
I'll leave that for another time and just blindly assume you know how a computer
works. So if you do, then understanding how a server works, isn't much harder.

Basically what a server does is this; Serves static content to a web browser.
Yup. It basically serves content to a web browser for the user's enjoyment.
So every time we browse the internet, find a website we want to look into
and enjoy it's content, we are asking the server to fetch us some content.
When it does it relays it back to us.

Let's take for example this URL: http://hackforums.net/index.php
we can split this into 3 parts. "http://" "hackforums.net" and "index.php".
The first part is how the web browser and the server communicate, that is
via the Http (Hypertext Transfer Protocol), it then looks for the domain to
serve files from (hackforums.net) and then looks for the local file we have requested
which is index.php.

When it finds index.php it then sends a ping back, with the information we
requested and displays it for us, for our browser to read.
A short diagram would look like this.

Web browser -> Server -> File System -> Server -> Web browser.
First the web browser sends the request. Then the server interprets it and
sends a request to the file system. File system says "ok, lemme get that
for you". And then sends it back to the server, who then sends it back to
the web browser for the user to enjoy.
---

That is essentially the basics of how a web server works. At the core any
way. A lot more back-end work goes on though. Honestly, I don't even know
if I can get all the information out in 3 lessons. I may need to re-write
that lesson plan.

---

Next thing you should know, is more or less, clearing up some misconceptions
or commonly asked questions. I was going to list them, then answer them,
but I think I'll do it as a bullet list instead for neater organization.
  • Question: Is there a difference between a Windows Server and a Linux Server?
  • Answer: Yes. God Yes. We will cover this later though, keep reading down torward the end.
  • Question: Are there Mac Servers?
  • Answer: Yes. ...Though I do find it so incredibly rare to see them. There are Mac servers and I have seen them.
  • Question: How do I change content on a server?
  • Answer: I'll cover this in management.
  • Question: How do I connect to the server?
  • Answer: Locally? Or if you're browsing the net? If locally, then just find you file system it's store on. If by the internet. Simply click on a link. Your browser will send a request.
  • Question: Whats this bout Linux and Window servers? I thought Apache was a server and Ngix?
  • Answer: Those are servers, but what I meant by servers is the OS they run on. All servers run on an OS. Apache is a linux oriented OS.
  • Question: So when you talk about servers, you mean weird mumbo jumbo like "LAMP, WAMP, WIMP" and stuff right?
  • Answer: Yes. And I'll cover those later too.
  • Question: Was this list made by using the list button?
  • Answer: Yes. Entirely.

Well, now that we've covered that, lets go over a few more things before
calling this a day.

In one of the questions, we mentioned linux and windows. Well this is
because every server runs on an OS. Each server that you hear about or
use, like Apache, is based on an OS. Windows and Linux are the main ones.

What's the difference between them? Linux can run most any web page
out there, however, not all software or webpages can run on linux. For
example, ASP(x) can't run on Linux, because it needs access to microsoft
access controls. Plesk can't run on Linux because it also uses M$ Access
controls.

Someone mentioned LAMP, WAMP and WIMP. These are short named
acronyms for:
Linux; Apache; MySQL; PHP
Windows; Apache; MsSQL; PHP
Windows; IIS; MsSQL; PHP
Windows; IIS; MsSQL; Asp
Windows; Apache; MsSQL; Asp

Those are the 5 most common set ups I've seen. Essentially the name comes
from the first letter of every word. So in this regard you get LAMP, WAMP,
WIMP, WAMA, and WIMA.
But what about Xampp? Same thing really.
---

Now other than this, I'm not sure I want to cover it in this class. Perhaps
next class. Where we'll learn to install servers, configure them, and then
maybe also secure them (but that might be it's own section or go under
management, we'll have to see.

Thanks for viewing.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
VWBC Side Lesson 2
----

Ahh so today we get to more advanced stuff (well maybe not just yet
but we're getting there, so congratz to those who've followed along and
stuck it out with me long enough to reach this point).

Today we're going to be going over some Server Basics. Essentially what I
plan to teach here is the basics of a web server, how they work, what they
do, how to install them, how to configure them, security, files, how to
manage them and so on and so forth. So let's start off shall we.
--

A Server, is literally just a machine which can store up to good amount of
data. Your personal computer, that you're sitting in front of right now, could
be a web server if you set it up to be. And this is essentially what a server
is. A computer with a eff load more memory/hard drive space than your
typical computer you could get at Best Buy.

Now before we progress, we should know how a computer works, however
I'll leave that for another time and just blindly assume you know how a computer
works. So if you do, then understanding how a server works, isn't much harder.

Basically what a server does is this; Serves static content to a web browser.
Yup. It basically serves content to a web browser for the user's enjoyment.
So every time we browse the internet, find a website we want to look into
and enjoy it's content, we are asking the server to fetch us some content.
When it does it relays it back to us.

Let's take for example this URL: http://hackforums.net/index.php
we can split this into 3 parts. "http://" "hackforums.net" and "index.php".
The first part is how the web browser and the server communicate, that is
via the Http (Hypertext Transfer Protocol), it then looks for the domain to
serve files from (hackforums.net) and then looks for the local file we have requested
which is index.php.

When it finds index.php it then sends a ping back, with the information we
requested and displays it for us, for our browser to read.
A short diagram would look like this.

Web browser -> Server -> File System -> Server -> Web browser.
First the web browser sends the request. Then the server interprets it and
sends a request to the file system. File system says "ok, lemme get that
for you". And then sends it back to the server, who then sends it back to
the web browser for the user to enjoy.
---

That is essentially the basics of how a web server works. At the core any
way. A lot more back-end work goes on though. Honestly, I don't even know
if I can get all the information out in 3 lessons. I may need to re-write
that lesson plan.

---

Next thing you should know, is more or less, clearing up some misconceptions
or commonly asked questions. I was going to list them, then answer them,
but I think I'll do it as a bullet list instead for neater organization.
  • Question: Is there a difference between a Windows Server and a Linux Server?
  • Answer: Yes. God Yes. We will cover this later though, keep reading down torward the end.
  • Question: Are there Mac Servers?
  • Answer: Yes. ...Though I do find it so incredibly rare to see them. There are Mac servers and I have seen them.
  • Question: How do I change content on a server?
  • Answer: I'll cover this in management.
  • Question: How do I connect to the server?
  • Answer: Locally? Or if you're browsing the net? If locally, then just find you file system it's store on. If by the internet. Simply click on a link. Your browser will send a request.
  • Question: Whats this bout Linux and Window servers? I thought Apache was a server and Ngix?
  • Answer: Those are servers, but what I meant by servers is the OS they run on. All servers run on an OS. Apache is a linux oriented OS.
  • Question: So when you talk about servers, you mean weird mumbo jumbo like "LAMP, WAMP, WIMP" and stuff right?
  • Answer: Yes. And I'll cover those later too.
  • Question: Was this list made by using the list button?
  • Answer: Yes. Entirely.

Well, now that we've covered that, lets go over a few more things before
calling this a day.

In one of the questions, we mentioned linux and windows. Well this is
because every server runs on an OS. Each server that you hear about or
use, like Apache, is based on an OS. Windows and Linux are the main ones.

What's the difference between them? Linux can run most any web page
out there, however, not all software or webpages can run on linux. For
example, ASP(x) can't run on Linux, because it needs access to microsoft
access controls. Plesk can't run on Linux because it also uses M$ Access
controls.

Someone mentioned LAMP, WAMP and WIMP. These are short named
acronyms for:
Linux; Apache; MySQL; PHP
Windows; Apache; MsSQL; PHP
Windows; IIS; MsSQL; PHP
Windows; IIS; MsSQL; Asp
Windows; Apache; MsSQL; Asp

Those are the 5 most common set ups I've seen. Essentially the name comes
from the first letter of every word. So in this regard you get LAMP, WAMP,
WIMP, WAMA, and WIMA.
But what about Xampp? Same thing really.
---

Now other than this, I'm not sure I want to cover it in this class. Perhaps
next class. Where we'll learn to install servers, configure them, and then
maybe also secure them (but that might be it's own section or go under
management, we'll have to see.

Thanks for viewing.

-Viral.]]> <![CDATA[VWBC - Side Lesson 2 - Fun Quiz]]> http://thehallowlife.com/forums/showthread.php?tid=1686 Thu, 05 Apr 2012 21:49:33 -0400 http://thehallowlife.com/forums/showthread.php?tid=1686
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
----

Alrighty then, time for a fun little quiz.

All questions will be in this format: Question: Answer. ;; Of course the answer is provided by you.
----

Question: What does HTML stand for?
Answer:

Question: What is HTML?
Answer:

Question: Is HTML client side or server side language?
Answer:

Question: What are 10 tags used in HTML?
Answer: (give both start and end tags)

Question: What does CSS stand for?
Answer:

Question: What does CSS do?
Answer:

Question: Is CSS client side or server side?
Answer:

Question: What are some things you can do with CSS?
Answer:

Question: What 3 types of CSS is there?
Answer:

Question: What is JavaScript?
Answer:

Question: Is JS client side or server side?
Answer:

Question: How would we start a JS script?
Answer:

Question: How can one comment, in JS?
Answer:

Question: What is PHP?
Answer:

Question: What does PHP stand for?
Answer:

Question: Is PHP client side or server side?
Answer:

Question: How you start and end a PHP script?
Answer:

Question: What is PHP somewhat similar to?
Answer:

And that's about it for the quiz. Just fun and simple questions. Shouldn't take more than maybe
3 minutes max to complete it.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
VWBC Side Lesson 1
----

Alrighty then, time for a fun little quiz.

All questions will be in this format: Question: Answer. ;; Of course the answer is provided by you.
----

Question: What does HTML stand for?
Answer:

Question: What is HTML?
Answer:

Question: Is HTML client side or server side language?
Answer:

Question: What are 10 tags used in HTML?
Answer: (give both start and end tags)

Question: What does CSS stand for?
Answer:

Question: What does CSS do?
Answer:

Question: Is CSS client side or server side?
Answer:

Question: What are some things you can do with CSS?
Answer:

Question: What 3 types of CSS is there?
Answer:

Question: What is JavaScript?
Answer:

Question: Is JS client side or server side?
Answer:

Question: How would we start a JS script?
Answer:

Question: How can one comment, in JS?
Answer:

Question: What is PHP?
Answer:

Question: What does PHP stand for?
Answer:

Question: Is PHP client side or server side?
Answer:

Question: How you start and end a PHP script?
Answer:

Question: What is PHP somewhat similar to?
Answer:

And that's about it for the quiz. Just fun and simple questions. Shouldn't take more than maybe
3 minutes max to complete it.

-Viral.]]> <![CDATA[VWBC - Side Lesson 1 - Review]]> http://thehallowlife.com/forums/showthread.php?tid=1685 Thu, 05 Apr 2012 21:46:43 -0400 http://thehallowlife.com/forums/showthread.php?tid=1685
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
----

Alright, after having done some basic classes such as HTML, CSS, JS, and PHP. It's time to review the basics.
Essentially, we'll just go over some quick things and then I'll ask a series of questions.

--HTML:

In HTML we learned that it is a basic language. It stands for Hyper Text Markup Language. That it is essentially the
body/skeleton of a webpage. That some tags are needed and some aren't. We over tables, cells, rows, doctypes,
and much more. But all in all, that is it generally an easy language to grasp.

--CSS:

In CSS we learned what type of styles there was, such as inline, external, and internal. We learned what the basic structure of
one was. We learned what divs were and how we can create our own classes and make them extensible in design. All in all, a pretty
easy language to grasp.

--JS:

In JS, We learned what functions were, variables, alerts, how to write something to the page, we learned that it's a client side language
or that it could be disabled in the browser. We learned that we can make a web page pretty user friendly and interactive with this lang.
And that all in all, a pretty easy to use language, so long as you get the basic gist of it.

--PHP:

In PHP We learned that it's a server side language, that it could enhance security and usability of a website. We revisited functions, variables,
classes, loops, statements and cases. And that all in all it's a easy language if you learned JS first, and _maybe_ a little harder, if you didn't.

---

That's pretty much what a review looks like. Since I don't have any questions being directed at me, I can't really answer any. ._. So for
the next class, which is a quiz. I'll probably still post it, but just immediately start the next class. After I reach plan 15-17, I'll update the OP
with more lessons.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
VWBC Lesson 12
----

Alright, after having done some basic classes such as HTML, CSS, JS, and PHP. It's time to review the basics.
Essentially, we'll just go over some quick things and then I'll ask a series of questions.

--HTML:

In HTML we learned that it is a basic language. It stands for Hyper Text Markup Language. That it is essentially the
body/skeleton of a webpage. That some tags are needed and some aren't. We over tables, cells, rows, doctypes,
and much more. But all in all, that is it generally an easy language to grasp.

--CSS:

In CSS we learned what type of styles there was, such as inline, external, and internal. We learned what the basic structure of
one was. We learned what divs were and how we can create our own classes and make them extensible in design. All in all, a pretty
easy language to grasp.

--JS:

In JS, We learned what functions were, variables, alerts, how to write something to the page, we learned that it's a client side language
or that it could be disabled in the browser. We learned that we can make a web page pretty user friendly and interactive with this lang.
And that all in all, a pretty easy to use language, so long as you get the basic gist of it.

--PHP:

In PHP We learned that it's a server side language, that it could enhance security and usability of a website. We revisited functions, variables,
classes, loops, statements and cases. And that all in all it's a easy language if you learned JS first, and _maybe_ a little harder, if you didn't.

---

That's pretty much what a review looks like. Since I don't have any questions being directed at me, I can't really answer any. ._. So for
the next class, which is a quiz. I'll probably still post it, but just immediately start the next class. After I reach plan 15-17, I'll update the OP
with more lessons.

-Viral.]]> <![CDATA[VWBC - Lesson 12: PHP Basics Ending]]> http://thehallowlife.com/forums/showthread.php?tid=1684 Thu, 05 Apr 2012 21:43:52 -0400 http://thehallowlife.com/forums/showthread.php?tid=1684
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
----

Alrighty then, the last of the PHP classes. Today we'll be going over, While loops(), For loops(), functions(), the $_GET and $_POST methods
and if enough time/room date and so on.

So to jump right in, a while loop. A while loop is a loop which loops through a block of code while a specified condition is true.
A good example of this is :
PHP Code:
<?php

$moo = 1;

while($moo <= 5) { 
echo "" . $moo . " <br> ";
$moo++;
} 

//Essentially this will output 1, 2, 3, 4, 5 to a new line all 5 times then go to the next piece of code. 
?>

Now, there is the while loop but there is also the do...while() loop too. Which basically what this loop does is always
execute the block of code once, it will then check the condition, and repeat the loop while the condition is true.
So a good example here is:
PHP Code:
<?php

$moo = 1;

do {
$i++;

echo "" . $moo . "<br />";

}

while($moo <= 5);

//Which will essentially 2, 3, 4, 5, 6 breaking to a new line each time. 
?>

Now, on to the for loop() and the foreach loop().
The for loop is used when you know in advance how many times the script should run.
Also some good to know is the for loop should meet 3 things.
"for(init, condition, increment)". And I'll go over all 3.

(from w3c)
init: Mostly used to set a counter (but can be any code to be executed once at the beginning of the loop)
condition: Evaluated for each loop iteration. If it evaluates to TRUE, the loop continues. If it evaluates to FALSE, the loop ends.
increment: Mostly used to increment a counter (but can be any code to be executed at the end of the loop)

Note: Each of the parameters above can be empty, or have multiple expressions (separated by commas).
(/end from w3c)

A good example of this is :
PHP Code:
<?php

for ($moo =  1; $moo<=5; $moo++) {
echo "" . $moo . "<br />";
}
// The above will just out 1, 2, 3, 4, 5 to a new line. 
?>

Now then, the foreach loop() is basically, used to loop through arrays. a good example of this is:
PHP Code:
<?php

$moo = array("Red","White","Blue");
foreach ($moo as $v) {
echo "" . $v . "<br />";
}

//Would essentially display "Red, White Blue" in that order to a new line. 
?>

And, wow moving along now, we'll get into functions now. Basically, functions, like every other language is pretty simple
function FunctionName(). A function is nothing more than a container to hold code to be run at any time, it's called.

Here's a practical example;
PHP Code:
<?php

function Moo() { 
echo "wee";
}

echo Moo();

?>

That's about the simplest way to explain it. It's basically just like Java Script.
Now, on to the methods of PHP. POST and GET. I'll display them like this:

GET Method: Is used to get method from a form (or where ever you have it, commonly, a form.)
It's visible to everyone and can be seen in the URL and is limited to the amount of information that
could be sent.

POST Method: Is invisible to everyone, and doesn't really have limits on what it could send, however there
is a 8MB Max size for the post method, which is default and easily changed via the php.ini file.

Best examples of these, if used in a form is:
Get method: http://www.website.com/whatup.php?name=$user&msg=sup.
Post method: http://www.website.com/whatup.php?

Both will display the same exact thing on the page. However, notice the difference in the URL bar?

When we start going over more advanced things later in the classes, I'll be sure to come back to PHP. However, for now,
PHP, sadly, is ending and next time we'll get to move on to the next thing. Be sure to view again please.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
VWBC Lesson 11
----

Alrighty then, the last of the PHP classes. Today we'll be going over, While loops(), For loops(), functions(), the $_GET and $_POST methods
and if enough time/room date and so on.

So to jump right in, a while loop. A while loop is a loop which loops through a block of code while a specified condition is true.
A good example of this is :
PHP Code:
<?php

$moo = 1;

while($moo <= 5) { 
echo "" . $moo . " <br> ";
$moo++;
} 

//Essentially this will output 1, 2, 3, 4, 5 to a new line all 5 times then go to the next piece of code. 
?>

Now, there is the while loop but there is also the do...while() loop too. Which basically what this loop does is always
execute the block of code once, it will then check the condition, and repeat the loop while the condition is true.
So a good example here is:
PHP Code:
<?php

$moo = 1;

do {
$i++;

echo "" . $moo . "<br />";

}

while($moo <= 5);

//Which will essentially 2, 3, 4, 5, 6 breaking to a new line each time. 
?>

Now, on to the for loop() and the foreach loop().
The for loop is used when you know in advance how many times the script should run.
Also some good to know is the for loop should meet 3 things.
"for(init, condition, increment)". And I'll go over all 3.

(from w3c)
init: Mostly used to set a counter (but can be any code to be executed once at the beginning of the loop)
condition: Evaluated for each loop iteration. If it evaluates to TRUE, the loop continues. If it evaluates to FALSE, the loop ends.
increment: Mostly used to increment a counter (but can be any code to be executed at the end of the loop)

Note: Each of the parameters above can be empty, or have multiple expressions (separated by commas).
(/end from w3c)

A good example of this is :
PHP Code:
<?php

for ($moo =  1; $moo<=5; $moo++) {
echo "" . $moo . "<br />";
}
// The above will just out 1, 2, 3, 4, 5 to a new line. 
?>

Now then, the foreach loop() is basically, used to loop through arrays. a good example of this is:
PHP Code:
<?php

$moo = array("Red","White","Blue");
foreach ($moo as $v) {
echo "" . $v . "<br />";
}

//Would essentially display "Red, White Blue" in that order to a new line. 
?>

And, wow moving along now, we'll get into functions now. Basically, functions, like every other language is pretty simple
function FunctionName(). A function is nothing more than a container to hold code to be run at any time, it's called.

Here's a practical example;
PHP Code:
<?php

function Moo() { 
echo "wee";
}

echo Moo();

?>

That's about the simplest way to explain it. It's basically just like Java Script.
Now, on to the methods of PHP. POST and GET. I'll display them like this:

GET Method: Is used to get method from a form (or where ever you have it, commonly, a form.)
It's visible to everyone and can be seen in the URL and is limited to the amount of information that
could be sent.

POST Method: Is invisible to everyone, and doesn't really have limits on what it could send, however there
is a 8MB Max size for the post method, which is default and easily changed via the php.ini file.

Best examples of these, if used in a form is:
Get method: http://www.website.com/whatup.php?name=$user&msg=sup.
Post method: http://www.website.com/whatup.php?

Both will display the same exact thing on the page. However, notice the difference in the URL bar?

When we start going over more advanced things later in the classes, I'll be sure to come back to PHP. However, for now,
PHP, sadly, is ending and next time we'll get to move on to the next thing. Be sure to view again please.

-Viral.]]> <![CDATA[VWBC - Lesson 11: PHP Basics Continued]]> http://thehallowlife.com/forums/showthread.php?tid=1683 Thu, 05 Apr 2012 21:42:17 -0400 http://thehallowlife.com/forums/showthread.php?tid=1683
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:


Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
----

Alright today we're going to be going over if statement, if...else statement, if...else...else statement, switch statement and if I have enough time/room, maybe also some arrays.

So to state, JS and PHP are similar in what we can do with switch statements, if statements, if..elese statements and so on. It's pretty
similar because well, PHP has a lot of the same syntaxing. Just...different. So if You've gone over the JS section you shouldn't have much
problems with the PHP section. So first we're going to go over the if statement. Like always, here's a example.
PHP Code:
<?php // opening tag

$num1 = 1; // var 1
$num2 = 2; // var 2

if ($num1 != $num2) { // basic if statement. If var1 isnt equal to var 2, then echo this.
echo "Well..Gee. I'd think so too. Lol";
}

?>

Now, since the if statement is pretty simple, let's move on to the if ...else statement.
PHP Code:
<?php // opening tag

$var1 = 1;
$var2 = 2;

if ($var1 != $var2) { // if statement start. this is a condition.
echo " I would hope so. "; // echo if condition is met
} else { // if the condition is NOT met, then switch to this "else" statement. 
echo "Wtf? Since when?"; // echo is the first condition not met. 
}

?>

See? Pretty easy right? Same as JS right? Well now we'll go over something NOT in the JS section, that being the if...elseif...else statement.
PHP Code:
<?php

$var1 = 1;
$var2 = 2;
$var3 = 3;

if ($var1 == $var2) { // start if condition 1, like always. 
echo "No it's not."; // if statement is true. 
} elseif ($var2 != $var3) { // if the first is not true switch to here with new condition/if statement
echo "well of course not"; // if statement is true. 
} else { // if neither is true. then 
echo "K...something be messed up here. ._."; // echo this thing 
}

?>

See? It seems kind of confusing at first but once you use it a couple times, you get the hang of it.

And it looks we have enough time and room for arrays. So, let's move to arrays. What an array is, is well a good way
to explain it is like this. A variable can hold only data value. An array is a number of variables with a data value. So think of an
array as not only a container, but a special type of variable that can hold more variables. Make sense? Well..there are 3 types of
arrays. Numeric array which is an array with a numeric index, Associative array which is an array where each ID key is associated
with a value, Multidimensional array which is an array containing one or more arrays
An example of a Numeric one: (there are 2 ways to write one, so I'll show both).
PHP Code:
<?php

$days = array("Sun","Mon","Tues","etc..."); // This is the first way to write a numeric array. 
// The one above will auto assign what's called an "id key" to the values. 
// Now to assign our own key, we'll make another array, the second way. 
$days2 = array(); // Start the array.
// To start the array and assign out own id keys, we first should know that to make an array like this one
// you have to have the same variable with a [#]. I'll show you:
$days2[0] = "Sun"; // See how I have the same variable? And the [0]? The [0] is essentially this is the first
// value for our array and an array must always start with the number [0] and not [1].
$days2[1] = "Mon"; // This is our second value. the [0], [1], [2] must be in chronological order. Not [1][2][0][4][9][5]...
$days2[2] = "Tues"; // our last value, still note how each time I have the variable the same name just with a [] in it. 

//And to call the array in to action, is done like so. 

echo "Is " . $days2[2] . "the same as " . $days[2] . "?";
// Remember what I said about ID keys. (that's the [0][1][2] part.
// And remember what I said about the ."". or "" .. "";

?>

That was with the 2 versions of a numeric array, so lets move on to the next one. Associative array.
Now, sometimes it's not always best to use the first type of array so we came up with this type of array. Now like before,
there is 2 ways to do this. I'll show both again.

PHP Code:
<?php

$days = array("Sun" => 1, "Mon" => 2, "Tues" => 3);
// That was the first way to write it. First you have the "" to put a data value inside of. Then you have the => an identifier as 
// to what the next value is, that is related to the first value. (if that didn't make sense, sorry ._.)
// And now the second way to type it. 
$days2 = array(); // Like before initiate array
$days2["Sun"] = "1"; // This time we assign the ID key a name and give it a value. 
$days2["Mon"] = "2"; // remember the variable needs to remain the same. 
$days2["Tues"] = "3"; // and then...

echo "Is " . $days2["Mon"] . "the same number ID as " . $days["Sun"] . "?";
?>

If any of you are actually taking these scripts and using an IDE to generate a response, then you should see what
the outcomes are. And least not last (or something like that) is the last type of Array, multidimensional. And like the
others, you can also do this one 2 ways as well. I'll display both.

PHP Code:
<?php

// So below is a multi array of the days. See how the array is within the array?It may look confusing at first, but like the others it just takes practice
$days = array("Sunday" => array("This","is","Sunday"), "Monday" => array("This","Is","Monday"), "Tuesday" => array("This","Is","Tuesday"));

// And now this is the second way (which may look neater)(not sure). 

$days2 = Array(
[Sunday] => Array(
[0] = This
[1] = Is
[2] = Sunday),

[Monday] => Array(
[0] = This
[1] = Is
[2] = Monday),

[Tuesday] => array(
[0] = This
[1] = Is
[2] = Tuesday));

echo "" . $days2[Sunday][2] . "?";

// Depending on your IDE it may or may not error for you. ._. Mine does, but it's correct. 

?>

And that concludes that arrays part. Now to save time and room on this post, I have to cut the class here. But next class
will be the end of the PHP lessons, and then you'll be getting a short easy homework assignment. ._.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:


Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
VWBC Lesson 10
----

Alright today we're going to be going over if statement, if...else statement, if...else...else statement, switch statement and if I have enough time/room, maybe also some arrays.

So to state, JS and PHP are similar in what we can do with switch statements, if statements, if..elese statements and so on. It's pretty
similar because well, PHP has a lot of the same syntaxing. Just...different. So if You've gone over the JS section you shouldn't have much
problems with the PHP section. So first we're going to go over the if statement. Like always, here's a example.
PHP Code:
<?php // opening tag

$num1 = 1; // var 1
$num2 = 2; // var 2

if ($num1 != $num2) { // basic if statement. If var1 isnt equal to var 2, then echo this.
echo "Well..Gee. I'd think so too. Lol";
}

?>

Now, since the if statement is pretty simple, let's move on to the if ...else statement.
PHP Code:
<?php // opening tag

$var1 = 1;
$var2 = 2;

if ($var1 != $var2) { // if statement start. this is a condition.
echo " I would hope so. "; // echo if condition is met
} else { // if the condition is NOT met, then switch to this "else" statement. 
echo "Wtf? Since when?"; // echo is the first condition not met. 
}

?>

See? Pretty easy right? Same as JS right? Well now we'll go over something NOT in the JS section, that being the if...elseif...else statement.
PHP Code:
<?php

$var1 = 1;
$var2 = 2;
$var3 = 3;

if ($var1 == $var2) { // start if condition 1, like always. 
echo "No it's not."; // if statement is true. 
} elseif ($var2 != $var3) { // if the first is not true switch to here with new condition/if statement
echo "well of course not"; // if statement is true. 
} else { // if neither is true. then 
echo "K...something be messed up here. ._."; // echo this thing 
}

?>

See? It seems kind of confusing at first but once you use it a couple times, you get the hang of it.

And it looks we have enough time and room for arrays. So, let's move to arrays. What an array is, is well a good way
to explain it is like this. A variable can hold only data value. An array is a number of variables with a data value. So think of an
array as not only a container, but a special type of variable that can hold more variables. Make sense? Well..there are 3 types of
arrays. Numeric array which is an array with a numeric index, Associative array which is an array where each ID key is associated
with a value, Multidimensional array which is an array containing one or more arrays
An example of a Numeric one: (there are 2 ways to write one, so I'll show both).
PHP Code:
<?php

$days = array("Sun","Mon","Tues","etc..."); // This is the first way to write a numeric array. 
// The one above will auto assign what's called an "id key" to the values. 
// Now to assign our own key, we'll make another array, the second way. 
$days2 = array(); // Start the array.
// To start the array and assign out own id keys, we first should know that to make an array like this one
// you have to have the same variable with a [#]. I'll show you:
$days2[0] = "Sun"; // See how I have the same variable? And the [0]? The [0] is essentially this is the first
// value for our array and an array must always start with the number [0] and not [1].
$days2[1] = "Mon"; // This is our second value. the [0], [1], [2] must be in chronological order. Not [1][2][0][4][9][5]...
$days2[2] = "Tues"; // our last value, still note how each time I have the variable the same name just with a [] in it. 

//And to call the array in to action, is done like so. 

echo "Is " . $days2[2] . "the same as " . $days[2] . "?";
// Remember what I said about ID keys. (that's the [0][1][2] part.
// And remember what I said about the ."". or "" .. "";

?>

That was with the 2 versions of a numeric array, so lets move on to the next one. Associative array.
Now, sometimes it's not always best to use the first type of array so we came up with this type of array. Now like before,
there is 2 ways to do this. I'll show both again.

PHP Code:
<?php

$days = array("Sun" => 1, "Mon" => 2, "Tues" => 3);
// That was the first way to write it. First you have the "" to put a data value inside of. Then you have the => an identifier as 
// to what the next value is, that is related to the first value. (if that didn't make sense, sorry ._.)
// And now the second way to type it. 
$days2 = array(); // Like before initiate array
$days2["Sun"] = "1"; // This time we assign the ID key a name and give it a value. 
$days2["Mon"] = "2"; // remember the variable needs to remain the same. 
$days2["Tues"] = "3"; // and then...

echo "Is " . $days2["Mon"] . "the same number ID as " . $days["Sun"] . "?";
?>

If any of you are actually taking these scripts and using an IDE to generate a response, then you should see what
the outcomes are. And least not last (or something like that) is the last type of Array, multidimensional. And like the
others, you can also do this one 2 ways as well. I'll display both.

PHP Code:
<?php

// So below is a multi array of the days. See how the array is within the array?It may look confusing at first, but like the others it just takes practice
$days = array("Sunday" => array("This","is","Sunday"), "Monday" => array("This","Is","Monday"), "Tuesday" => array("This","Is","Tuesday"));

// And now this is the second way (which may look neater)(not sure). 

$days2 = Array(
[Sunday] => Array(
[0] = This
[1] = Is
[2] = Sunday),

[Monday] => Array(
[0] = This
[1] = Is
[2] = Monday),

[Tuesday] => array(
[0] = This
[1] = Is
[2] = Tuesday));

echo "" . $days2[Sunday][2] . "?";

// Depending on your IDE it may or may not error for you. ._. Mine does, but it's correct. 

?>

And that concludes that arrays part. Now to save time and room on this post, I have to cut the class here. But next class
will be the end of the PHP lessons, and then you'll be getting a short easy homework assignment. ._.

-Viral.]]> <![CDATA[VWBC - Lesson 10: PHP Basics]]> http://thehallowlife.com/forums/showthread.php?tid=1682 Thu, 05 Apr 2012 21:40:20 -0400 http://thehallowlife.com/forums/showthread.php?tid=1682
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
----

Alright so today we're going to be getting into PHP. PHP Stands for
"PHP: Hypertext Preprocessor" or as some call it "Pre Hypertext Processor".

PHP just happens to be a "Server Side" language. So far we've only gone
over "Client Side". Basically you put almost anything in a PHP script such as
HTML, CSS, Javascript and so on. You can also use 3 different extensions
such as ".php" ".php3" and ".phtml". Now with PHP you need a server to
parse it. Mainly any OS should do. You can use Linux, Unix, Windows...
Anything really. Also most times you need a database to connect it too,
however we'll leave that for later. Because there are quite a bit of scripts
we could make which do not require a Database.

Now while I would tell you to go ahead and install a server on your computer
so we can install PHP. I won't. We'll leave that for later when we get to
more advanced stuff. For now just use a free webhost.

Alright like all things I'll begin with telling you how to invoke the script
meaning, how to start it.

PHP Code:
<?php // This is the start tag. 
?> // this is the end tag. 
// Technically you can use this too:
<? // start tag
?> // end tag. 

Like all things again, we need a way to comment our code. Which we can
do with these methods:

PHP Code:
<?php
# This is a comment. 
# this is a comment. 
# this is a comment. 

// This is a single line comment.
// This is a single line comment. 
// This is a single line comment. 

/**
* This is a block comment.
**/

/**
* This is a Block comment
* with an extra line
**/

/**
* This is a block comment
* with an extra line
* and another extra line
* and so on 
**/ 
?>

Moving along..Basically the most used way to "display" data to a page is
using the "Echo" command. Like echo(). A good example is this:

PHP Code:
<?php

echo "Moo moo moo moo";
// Technically the () isn't used. It's just there for show I guess. Lol.
// However you can add it if you want. This has never affected me. 
<? 

Wow. Moving fast. Maybe because I'm super excited about teaching PHP.
The next thing we'll get into is variables.

A variable is more or less something you can define to hold a data value.
Now the thing with PHP is, it's a loosely typed language meaning, that
technically you don't need to declare the variable before using it. Now on
to some naming specifications. When naming a variable ALWAYS start it off
with the "$". This is because this is how a variable
is declared. After that you give it a name. Which can ONLY have the following: Uppercase, Lowercase, numbers and an underscore ("_").
HOWEVER it may ONLY start with an underscore, or letter. Nothing else.

PHP Code:
<?php

$this_is_a_variable = "";
// Now to declare a variable you first name it. And then assign a data
// value to it. Like so: 

$variable = "string of text";
$variable = 3; // a number
$variable = function();
$variable = $variable2;

// This is more or less the only ways to define a variable. 
?>

Moving along on how to use those variable. Just like JS. You can use it to
do math for you. Or display data. How to use 2 variable in a string?
like so:

PHP Code:
<?php

$var1 = "this is";
$var2 = "a string";
$var3 = "more string.";

echo $var1; // this is using a single variable. 
echo $var1 . " " . $var2; // this is using 2 variables. 
echo $var1 . " " . $var2 . " " . $var3; // this is 3. 

// Essentially to add more variables to it just keep using . " " .
// Although technically it doesn't need all the spaces. I just do that
// because it looks neat and clean. And that's how I prefer my code
// to look. You could technically use: ."". which in it's own light, looks
// clean as well. 

?>

Now then there is a couple of other basic functions like strlen and strpos
but I find them to be useless and I've never used them. So sadly I will not
go over them (unless someone wants me too.

There are things called Operators. However they're more or less the same
exact ones as JS. So I'll just post a link to the ones found on W3C.
http://www.w3schools.com/php/php_operators.asp

If you'd like though I can go over them.
----

Sadly now guys, I must end the class here. For I fear I might not stop
if I don't. However fear not there will be another soon! So for now I'll leave
you with the basics and wonderment of what we do with these operators.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
VWBC Lesson 9
----

Alright so today we're going to be getting into PHP. PHP Stands for
"PHP: Hypertext Preprocessor" or as some call it "Pre Hypertext Processor".

PHP just happens to be a "Server Side" language. So far we've only gone
over "Client Side". Basically you put almost anything in a PHP script such as
HTML, CSS, Javascript and so on. You can also use 3 different extensions
such as ".php" ".php3" and ".phtml". Now with PHP you need a server to
parse it. Mainly any OS should do. You can use Linux, Unix, Windows...
Anything really. Also most times you need a database to connect it too,
however we'll leave that for later. Because there are quite a bit of scripts
we could make which do not require a Database.

Now while I would tell you to go ahead and install a server on your computer
so we can install PHP. I won't. We'll leave that for later when we get to
more advanced stuff. For now just use a free webhost.

Alright like all things I'll begin with telling you how to invoke the script
meaning, how to start it.

PHP Code:
<?php // This is the start tag. 
?> // this is the end tag. 
// Technically you can use this too:
<? // start tag
?> // end tag. 

Like all things again, we need a way to comment our code. Which we can
do with these methods:

PHP Code:
<?php
# This is a comment. 
# this is a comment. 
# this is a comment. 

// This is a single line comment.
// This is a single line comment. 
// This is a single line comment. 

/**
* This is a block comment.
**/

/**
* This is a Block comment
* with an extra line
**/

/**
* This is a block comment
* with an extra line
* and another extra line
* and so on 
**/ 
?>

Moving along..Basically the most used way to "display" data to a page is
using the "Echo" command. Like echo(). A good example is this:

PHP Code:
<?php

echo "Moo moo moo moo";
// Technically the () isn't used. It's just there for show I guess. Lol.
// However you can add it if you want. This has never affected me. 
<? 

Wow. Moving fast. Maybe because I'm super excited about teaching PHP.
The next thing we'll get into is variables.

A variable is more or less something you can define to hold a data value.
Now the thing with PHP is, it's a loosely typed language meaning, that
technically you don't need to declare the variable before using it. Now on
to some naming specifications. When naming a variable ALWAYS start it off
with the "$". This is because this is how a variable
is declared. After that you give it a name. Which can ONLY have the following: Uppercase, Lowercase, numbers and an underscore ("_").
HOWEVER it may ONLY start with an underscore, or letter. Nothing else.

PHP Code:
<?php

$this_is_a_variable = "";
// Now to declare a variable you first name it. And then assign a data
// value to it. Like so: 

$variable = "string of text";
$variable = 3; // a number
$variable = function();
$variable = $variable2;

// This is more or less the only ways to define a variable. 
?>

Moving along on how to use those variable. Just like JS. You can use it to
do math for you. Or display data. How to use 2 variable in a string?
like so:

PHP Code:
<?php

$var1 = "this is";
$var2 = "a string";
$var3 = "more string.";

echo $var1; // this is using a single variable. 
echo $var1 . " " . $var2; // this is using 2 variables. 
echo $var1 . " " . $var2 . " " . $var3; // this is 3. 

// Essentially to add more variables to it just keep using . " " .
// Although technically it doesn't need all the spaces. I just do that
// because it looks neat and clean. And that's how I prefer my code
// to look. You could technically use: ."". which in it's own light, looks
// clean as well. 

?>

Now then there is a couple of other basic functions like strlen and strpos
but I find them to be useless and I've never used them. So sadly I will not
go over them (unless someone wants me too.

There are things called Operators. However they're more or less the same
exact ones as JS. So I'll just post a link to the ones found on W3C.
http://www.w3schools.com/php/php_operators.asp

If you'd like though I can go over them.
----

Sadly now guys, I must end the class here. For I fear I might not stop
if I don't. However fear not there will be another soon! So for now I'll leave
you with the basics and wonderment of what we do with these operators.

-Viral.]]> <![CDATA[VWBC - Lesson 9: JavaScript Basics Ending]]> http://thehallowlife.com/forums/showthread.php?tid=1681 Thu, 05 Apr 2012 21:36:15 -0400 http://thehallowlife.com/forums/showthread.php?tid=1681
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
----

It looks like we're going to be finishing up Java Script today and starting PHP afterwards.

To repeat, let's review what we've gone over, Alert(), Prompt(), Confirm(),
Variables, if statement, If...else statement, functions, switch statement,
Operators, and comparison operators.

Today we'll be going over, for loops, while loops, break loops and possibly
special characters. While there is a lot more, I don't see it used very often
one such example being "document.write". Having to write that a million
times over would be a hassle to any JS scripter.
--

Jumping right in; A for loop basically it loops through a block of code a
specified number of times.

An example of this is:
Code:
<script type="text/javascript">
var i=0; // Our variable is I and it's equal to 0.
for (i=0;i<=5;i++) // Here we say for I is equal to 0, I is less than 5, so increment I till 5.
{
document.write("number:" + i ); //We didn't go over it but a document.write just "writes" something to a page, much like echo or print.
}
</script>

I used the most common variable I've ever seen. "I".
"var i=0" -> Basically our variable is "I". It's equal to 0.
"for(i=0" -> Basically our var I, is equal to 0, at the start of the for loop.
";i<5" -> This states that our variable "i" is less than 5.
"i++" -> This states that our variable "I", will increment because it's less
than 5.

We then used document.write to display that data. We didn't go over it,
but document.write is basically just another way to output something to a
page just like echo and print.

That's all there really is a to a for loop. It just repeats a code a number of
times to cut down on the number of equal statements we would have to
use.

Next up is a while loop. The while loops, basically loops through a block of
code while a specified condition is true. A good example of this is,
Code:
<script type="text/javascript">
var i=0;
while (i<=5)
  {
documen.write("number: " + i);
  i++;
  }
</script>

Again I took the most common variable and used it.
"var i=0;" -> Our variable "I" is equal to 0.
"while (i<=5)" -> While our variable is less than or equal to 5 we execute
this code::
"document.write("number: " + i);" -> Out put the number to the page.
"i++" increment the variable "I" to a new number one higher after this code
is executed.

And now finally the last of the loops is the break loop. The break loop
basically states; The statement will break the loop and continue executing
the code that follows after the loop, if there is any.
An example of this would be:
Code:
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
  {
  if (i==3)
    {
    break;
    }
  document.write("number: " + i );
  }
</script>

Mostly everything is the same, but:
"var i=0" -> Our variable is equal to 0.
"for (i=0;i<=5;i++) {" Again, just a simple for statement, and we would
execute code normally in this statement, however, instead of going
through the whole thing, we instead do a break, IF something is met.
"{
if( i == 3 ) {
break;
}" And like that in the middle of the code, if i was equal to 3 we break
the statement and continue to the next bit of code and completely ignore
the rest of the loop. So the next bit to be displayed is:
"}
document.write("number: " + i );" display the number current.

Another thing about the break statement is that you can use the
"continue" statement which does the same exact thing really. So I suggest
using break; instead.

And since this less was a bit shorter than I thought it would be, Let's go
over also, special characters;

In Java Script, a string is stopped by either a single or double quote. So
to stop this we add special characters like / and \.

Like so,
Code:
<script>
var moo = "moo is moo but we'll a "so called" moomoo too";
document.write("this won't display because of the quotes but here: " + moo );
</script>

That would display an error because JS would think the line ended after
the second double quote. So to get around this we add \" and \" to the
2 quotes where we were quoting something else. And thankfully it won't
display moo \" so called \" , instead it'll display moo "so called", .

Here's a list of them for JS.
(as seen on W3C)
Code:
\' => single quote
Code:
\" => double quote
Code:
\\ => backslash
Code:
\n => new line
Code:
\r => carriage return
Code:
\t => tab
Code:
\b => backspace
Code:
\f => form feed

And that about does it for JS ending. Next time you see this class it'll be
on to real fun stuff. PHP. A completely different language to these last 3.
And completely more extensible as it allows for some serious things to get
done. And it's quite capable of performing quite a bit of things. I can't wait
to throw you into the world of PHP. Literally one the most used and one
of the best languages to learn while young.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
VWBC Lesson 8
----

It looks like we're going to be finishing up Java Script today and starting PHP afterwards.

To repeat, let's review what we've gone over, Alert(), Prompt(), Confirm(),
Variables, if statement, If...else statement, functions, switch statement,
Operators, and comparison operators.

Today we'll be going over, for loops, while loops, break loops and possibly
special characters. While there is a lot more, I don't see it used very often
one such example being "document.write". Having to write that a million
times over would be a hassle to any JS scripter.
--

Jumping right in; A for loop basically it loops through a block of code a
specified number of times.

An example of this is:
Code:
<script type="text/javascript">
var i=0; // Our variable is I and it's equal to 0.
for (i=0;i<=5;i++) // Here we say for I is equal to 0, I is less than 5, so increment I till 5.
{
document.write("number:" + i ); //We didn't go over it but a document.write just "writes" something to a page, much like echo or print.
}
</script>

I used the most common variable I've ever seen. "I".
"var i=0" -> Basically our variable is "I". It's equal to 0.
"for(i=0" -> Basically our var I, is equal to 0, at the start of the for loop.
";i<5" -> This states that our variable "i" is less than 5.
"i++" -> This states that our variable "I", will increment because it's less
than 5.

We then used document.write to display that data. We didn't go over it,
but document.write is basically just another way to output something to a
page just like echo and print.

That's all there really is a to a for loop. It just repeats a code a number of
times to cut down on the number of equal statements we would have to
use.

Next up is a while loop. The while loops, basically loops through a block of
code while a specified condition is true. A good example of this is,
Code:
<script type="text/javascript">
var i=0;
while (i<=5)
  {
documen.write("number: " + i);
  i++;
  }
</script>

Again I took the most common variable and used it.
"var i=0;" -> Our variable "I" is equal to 0.
"while (i<=5)" -> While our variable is less than or equal to 5 we execute
this code::
"document.write("number: " + i);" -> Out put the number to the page.
"i++" increment the variable "I" to a new number one higher after this code
is executed.

And now finally the last of the loops is the break loop. The break loop
basically states; The statement will break the loop and continue executing
the code that follows after the loop, if there is any.
An example of this would be:
Code:
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
  {
  if (i==3)
    {
    break;
    }
  document.write("number: " + i );
  }
</script>

Mostly everything is the same, but:
"var i=0" -> Our variable is equal to 0.
"for (i=0;i<=5;i++) {" Again, just a simple for statement, and we would
execute code normally in this statement, however, instead of going
through the whole thing, we instead do a break, IF something is met.
"{
if( i == 3 ) {
break;
}" And like that in the middle of the code, if i was equal to 3 we break
the statement and continue to the next bit of code and completely ignore
the rest of the loop. So the next bit to be displayed is:
"}
document.write("number: " + i );" display the number current.

Another thing about the break statement is that you can use the
"continue" statement which does the same exact thing really. So I suggest
using break; instead.

And since this less was a bit shorter than I thought it would be, Let's go
over also, special characters;

In Java Script, a string is stopped by either a single or double quote. So
to stop this we add special characters like / and \.

Like so,
Code:
<script>
var moo = "moo is moo but we'll a "so called" moomoo too";
document.write("this won't display because of the quotes but here: " + moo );
</script>

That would display an error because JS would think the line ended after
the second double quote. So to get around this we add \" and \" to the
2 quotes where we were quoting something else. And thankfully it won't
display moo \" so called \" , instead it'll display moo "so called", .

Here's a list of them for JS.
(as seen on W3C)
Code:
\' => single quote
Code:
\" => double quote
Code:
\\ => backslash
Code:
\n => new line
Code:
\r => carriage return
Code:
\t => tab
Code:
\b => backspace
Code:
\f => form feed

And that about does it for JS ending. Next time you see this class it'll be
on to real fun stuff. PHP. A completely different language to these last 3.
And completely more extensible as it allows for some serious things to get
done. And it's quite capable of performing quite a bit of things. I can't wait
to throw you into the world of PHP. Literally one the most used and one
of the best languages to learn while young.

-Viral.]]> <![CDATA[VWBC - Lesson 8: JavaScript Basics Continued]]> http://thehallowlife.com/forums/showthread.php?tid=1680 Thu, 05 Apr 2012 21:32:59 -0400 http://thehallowlife.com/forums/showthread.php?tid=1680
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
----

Hey there guys, welcome back to the class. I am pleased to
inform you, you're half done with JS and then we start PHP. Afterwards,
we'll get into servers, SQL, management, SEO and so on. We'll be going
from coding to managing. Also I have to inform you there is a HUGE test
coming up soon.
---

To start off this class let's go ahead and just jump right in. Last time we
over alert(), prompt(), confirm(), variables, if statement, if...else statement
commenting, script type, and that we could use expression. Let's continue
from the expressions part and get into operators today.

Operators are basically math expressions. And while I could list out all
the operators, I thought it might be easier just to show you a picture (plus
that and it'll save on room and allow for more characters). So here's a list
of expressions (credits go to w3 schools for the pic)

[Image: jsop.png]

Going on, if you don't understand how the operators are used, here's a
practical example.
Code:
<script>
var x = 5
var y = 5
var z = 1

if (x == y) {
alert(" Obvious right? ");
}

alert(x + y - z);
//The above should output 5 + 5 - 1 = 9

If this still doesn't make sense, let me know please and I can further
elaborate. Going right along to continue the operators there are things
called comparison operators. Kinda like the same thing, but instead of
math function you use them in expressions to compare to. Like this:
if 5 == 5, I said if 5 is equal to 5. Again, I'm going to a screen shot of the
comparison operators to save time and space.

[Image: jscop.png]

If none of that makes sense, please let me know so I can further explain it
and stop using pictures. Again credits to w3c for the pic. Moving along now

We'll be getting into the switch statement, functions and maybe one more
thing. Mainly because if I want to split these lessons into 3 parts equally
I have to cut myself off, before I decide to throw the rest into one big
thing. So we're almost done guys.

The switch is a statement just like if, and if...else. How it works is, first
we make a variable, give it a defintion. Then we make a "case" this case
contains a block of code to be executed if the variable so calls for it. And
then we add a "break" at the end of each block so the code doesn't over
run. I guess the easiest way to explain this is to give you an example.
Let's say we have 7 cases. Each case stands for a day of the week. Every
case always starts at 0. So sunday = 0 monday =1 etc. Now we make the
variable call for the date. And then based on the date, a select case is
called and executed. Here's an example:
Code:
<script type="text/javascript">

var meh = new Date();
var blah = meh.getDay();
switch (blah) {

case 0:
  alert("I have to go to church today.");
  break;
case 1:
  alert("Blah a mundane Monday. I hate you work.");
  break;
case 2:
  alert("Terrible Tuesday. Why do you torment me?");
  break;
default:
  alert("I don't want to have to go to work. ");

}
</script>

I made a few cases and then using the switch statement, based on
the day it called an alert. But if it couldn't determine or case not found
the default was instead called.

Next up is functions. And oh man can I have some fun with these. Not only
can it be used to make HTML super fun but it can be used for evil guys,
pure evil. But how it works is like this. You define a function as function
and then the function name(). Like so:
Code:
<script>
function moo() {
//this is where you put code for your function
}
</script>

Basically function is like a container to hold a bunch of code and to cut
down on the code you write. The best example would be if you were making
a game. Instead of writing out the SAME conditions each and every time,
just put them into the function, and then call the function. Here's an
example.
Code:
<script>

function moo() {
alert("This is a test");
}

<input type="button" value="Click" onclick="moo()" />
</script>

Above we used a button to display an alert from a button. But there are far
more ways to use this then what I have here. And honestly, I was thinking
about writing out an entire mini game in pure javascript just to show you
guys how this would be used, functions, switches, if's, if...elses, alert()
prompt and so on.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
VWBC Lesson 7
----

Hey there guys, welcome back to the class. I am pleased to
inform you, you're half done with JS and then we start PHP. Afterwards,
we'll get into servers, SQL, management, SEO and so on. We'll be going
from coding to managing. Also I have to inform you there is a HUGE test
coming up soon.
---

To start off this class let's go ahead and just jump right in. Last time we
over alert(), prompt(), confirm(), variables, if statement, if...else statement
commenting, script type, and that we could use expression. Let's continue
from the expressions part and get into operators today.

Operators are basically math expressions. And while I could list out all
the operators, I thought it might be easier just to show you a picture (plus
that and it'll save on room and allow for more characters). So here's a list
of expressions (credits go to w3 schools for the pic)

[Image: jsop.png]

Going on, if you don't understand how the operators are used, here's a
practical example.
Code:
<script>
var x = 5
var y = 5
var z = 1

if (x == y) {
alert(" Obvious right? ");
}

alert(x + y - z);
//The above should output 5 + 5 - 1 = 9

If this still doesn't make sense, let me know please and I can further
elaborate. Going right along to continue the operators there are things
called comparison operators. Kinda like the same thing, but instead of
math function you use them in expressions to compare to. Like this:
if 5 == 5, I said if 5 is equal to 5. Again, I'm going to a screen shot of the
comparison operators to save time and space.

[Image: jscop.png]

If none of that makes sense, please let me know so I can further explain it
and stop using pictures. Again credits to w3c for the pic. Moving along now

We'll be getting into the switch statement, functions and maybe one more
thing. Mainly because if I want to split these lessons into 3 parts equally
I have to cut myself off, before I decide to throw the rest into one big
thing. So we're almost done guys.

The switch is a statement just like if, and if...else. How it works is, first
we make a variable, give it a defintion. Then we make a "case" this case
contains a block of code to be executed if the variable so calls for it. And
then we add a "break" at the end of each block so the code doesn't over
run. I guess the easiest way to explain this is to give you an example.
Let's say we have 7 cases. Each case stands for a day of the week. Every
case always starts at 0. So sunday = 0 monday =1 etc. Now we make the
variable call for the date. And then based on the date, a select case is
called and executed. Here's an example:
Code:
<script type="text/javascript">

var meh = new Date();
var blah = meh.getDay();
switch (blah) {

case 0:
  alert("I have to go to church today.");
  break;
case 1:
  alert("Blah a mundane Monday. I hate you work.");
  break;
case 2:
  alert("Terrible Tuesday. Why do you torment me?");
  break;
default:
  alert("I don't want to have to go to work. ");

}
</script>

I made a few cases and then using the switch statement, based on
the day it called an alert. But if it couldn't determine or case not found
the default was instead called.

Next up is functions. And oh man can I have some fun with these. Not only
can it be used to make HTML super fun but it can be used for evil guys,
pure evil. But how it works is like this. You define a function as function
and then the function name(). Like so:
Code:
<script>
function moo() {
//this is where you put code for your function
}
</script>

Basically function is like a container to hold a bunch of code and to cut
down on the code you write. The best example would be if you were making
a game. Instead of writing out the SAME conditions each and every time,
just put them into the function, and then call the function. Here's an
example.
Code:
<script>

function moo() {
alert("This is a test");
}

<input type="button" value="Click" onclick="moo()" />
</script>

Above we used a button to display an alert from a button. But there are far
more ways to use this then what I have here. And honestly, I was thinking
about writing out an entire mini game in pure javascript just to show you
guys how this would be used, functions, switches, if's, if...elses, alert()
prompt and so on.

-Viral.]]> <![CDATA[VWBC - Lesson 7: Javascript Basics]]> http://thehallowlife.com/forums/showthread.php?tid=1679 Thu, 05 Apr 2012 21:30:45 -0400 http://thehallowlife.com/forums/showthread.php?tid=1679
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
----

Alright guys. Now that we got the boring stuff out the way, that being
the HTML and CSS which is used for primarily designing and template
websites, we can now move on to the fun and interactive stuff. One thing
I should get out right now and seems to be a common misconception is
JAVA is not the same as Java-Script. (I have to use the dash because this
forum reverts the word into jscript).

Another thing, Java-script is a client side language and is a scripting lang.
Not a programming language. There is a difference. Since we'll be getting
into dynamic languages now, I'll go ahead and explain the 2 types of sides.
There is Server side, and Client side. Java-script is client side, while PHP
is server side. Client side means that the info is parsed directly from the
browser basically, while server side means the server parses the info/code
and spits it back out to another source (wherever that is, it's dependent.)

And one more thing, it's VERY important so remember it well. Java-Script
_IS_ case-sensitive. So be sure to watch it.
---

Now, like all languages, we'll start out with the basics. That being,
statements, comments, simple junk. Again, just easing you into the
course right now.

Comments. There is 2 ways to write a comment in JS. That is single line and multi line.

A single is like this "//" it ALWAYS starts with a double forward slash.
A multi line is "/* */" anything in between those /* */ will be excluded as
a comment. Here's a practical example:

Code:
// COMMENTT
// More commenting
// Man this is long, let's switch.

/*
This is a comment in the form
of multi lining. I can write as much as I
want and as long as it stays in the
parameters it's all cool. So let's end the
comment. Like this:
*/

It does NOT matter where you put the commenting. However
if you put it in the middle of a code line, make sure it's a multi line
one, because if it looks like this: get.ElementSome(r// comment //andomCodeHere)

It wont work and the code will screw up and throw out errors. So, to
recap, don't use comment(ors) in the middle of a code. It's almost like...
common sense.

Next thing is, to make JS work you need to incase it in tags. What type?
Script tags. Like this: <script> </script> there is ALWAYS a start tag and
a end tag in JS. There is NO exception. But SOMETIMES, if we want a "bit"
more complicated code we have to write a long start script tag, like so
<script type="text/Javascript">
But there is multiple to write that. HOWEVER, in this class I'm only going
to teach one and it should be the default for you. Don't write "<script>"
as a start, always write out the full thing. It's a good habit to get into.

Now we can move on to statements. Now, the thing about JS is, it is
more or less just sending commands to the browser to parse (e.g. client
side). However when written, they will execute in the order they are
written. So try not to write them in some random order, give it a purpose.

Back to statements though, the first one we'll look at is "document.write()"
basically, this means whatever we put in between () will be written to the
document. Thus it's name. HOWEVER, while most anything will be written
DO NOT use this method AT ALL for anything, unless it's either practice or
you found a way to implement it into some JS game that doesn't suck. It is
out right tedious, and make JS look long, sloppy and horrible. So don't use
it. However for teaching purposes, I'll show you it anyway.

Code:
<script type="text/javascript"> // remember, always use this unless it's
// like an alert() or something.

document.write("hello friggin world"); //let's break this down

/*
document.write tells the browser we're about to write something to the
page. () is what we incase it in. Now notice the "" , that's because we're
using text. Such as speech. If we were using numbers, or a variable or
something else, we wouldn't need the quotes. You can use either of the
2 quotes, however for speech types, it's good practice to use double
quotes. Also notice the ";" at the end of the line. In JS it's not technically
needed, however in this class it is needed and damn good practice to get
into.
*/
</script> // end tag.

If you were to copy that, put into a html page and run it. The only thing
it would display is the hellow firggin world. And nothing else. Everything
else is commented.

The other statements we'll be going over is alert(), prompt() and confirm()
Starting with alert().

Basically with alert() anything in between the () will be displayed as a pop-
up. Annoying as they are, they can be used for some good. You can use it
to display text, numbers, expressions, variable and etc. However for this
instance we're only going to be seeing text and numbers.
Code:
<script type="text/javascript">
alert("this is text, when run this will display this text as a pop up");
alert(5);
//If you run this, the above will display a line of text and then a number
//just a single number. And also,
alert(5 + 5);
//the above will do the math for you. So you can also use JS to do
//math for you
</script>

While there is a plethora of ways to do math with JS, you have to use
something called "operators", which we'll get into later. Moving along,

Basically to use confirm() is the same thing. It displays as a pop up with
some text asking the person to confirm with a yes/no. And prompt() is
also the same way, it displays a pop up and "prompts" the user for some
info. With some clever going, you can make some cool stuff with it.
let's see them:
Code:
<script type="text/javascript">
alert("moo");

prompt("How was your day?", "");

confirm("Do you like this class?");

In the prompt case, You saw I left blank quotes. You DON'T have to do
that. You can put something in there, and that will display as a sort of
"default" answer. There are ways to expand this and make it billions times
better. However, we can't get into that until we get into syntax's and
what not. Going on,

In JS we have what's called variables. They can be anything you want
HOWEVER, they may ONLY start with a letter or an underscore ( _ ). It
is also case sensitive so a and A are not the same thing. To use a variable
we define it as "var ". Meaning it starts with "var" and then the variable name.

An example:
Code:
<script type="text/javascript">

var x = "some text";
// i called the variable x.
// I made it a text based variable
//and then ended it with a semi colon. And now to use it practically

alert(x);

</script>

The way they can be used is almost pretty much infinite in my opinion.
There's a lot more ways to show you this that would look cooler and make
more sense, but...it's not like we're learning anything too complex yet, so
for now I'll leave it at this. And now to move on to the part that really
gives JS some power. Statements. if, if..else and so on. But today we're
only going to cover those 2, if and if...else.

The if statement basically states "if blah is equal to blah" then execute
blahhh. Or you could do "if blah is blah, execute blahh". It's probably easier
to just show you.

Code:
<script type="text/javascript">

var x = 5

if ( x == 1 ) {
alert("No freaking way");
}
// --
//this is how to use if else
if ( x == 2 ) {
alert("bs")
} else {
alert("Yeah, thought so. 5 does not equal 2");
}
</script>

There we saw the if statement, and how the else statement is used.
-----

Let me guys know if you don't get anything. or have any suggestions.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
VWBC Lesson 6
----

Alright guys. Now that we got the boring stuff out the way, that being
the HTML and CSS which is used for primarily designing and template
websites, we can now move on to the fun and interactive stuff. One thing
I should get out right now and seems to be a common misconception is
JAVA is not the same as Java-Script. (I have to use the dash because this
forum reverts the word into jscript).

Another thing, Java-script is a client side language and is a scripting lang.
Not a programming language. There is a difference. Since we'll be getting
into dynamic languages now, I'll go ahead and explain the 2 types of sides.
There is Server side, and Client side. Java-script is client side, while PHP
is server side. Client side means that the info is parsed directly from the
browser basically, while server side means the server parses the info/code
and spits it back out to another source (wherever that is, it's dependent.)

And one more thing, it's VERY important so remember it well. Java-Script
_IS_ case-sensitive. So be sure to watch it.
---

Now, like all languages, we'll start out with the basics. That being,
statements, comments, simple junk. Again, just easing you into the
course right now.

Comments. There is 2 ways to write a comment in JS. That is single line and multi line.

A single is like this "//" it ALWAYS starts with a double forward slash.
A multi line is "/* */" anything in between those /* */ will be excluded as
a comment. Here's a practical example:

Code:
// COMMENTT
// More commenting
// Man this is long, let's switch.

/*
This is a comment in the form
of multi lining. I can write as much as I
want and as long as it stays in the
parameters it's all cool. So let's end the
comment. Like this:
*/

It does NOT matter where you put the commenting. However
if you put it in the middle of a code line, make sure it's a multi line
one, because if it looks like this: get.ElementSome(r// comment //andomCodeHere)

It wont work and the code will screw up and throw out errors. So, to
recap, don't use comment(ors) in the middle of a code. It's almost like...
common sense.

Next thing is, to make JS work you need to incase it in tags. What type?
Script tags. Like this: <script> </script> there is ALWAYS a start tag and
a end tag in JS. There is NO exception. But SOMETIMES, if we want a "bit"
more complicated code we have to write a long start script tag, like so
<script type="text/Javascript">
But there is multiple to write that. HOWEVER, in this class I'm only going
to teach one and it should be the default for you. Don't write "<script>"
as a start, always write out the full thing. It's a good habit to get into.

Now we can move on to statements. Now, the thing about JS is, it is
more or less just sending commands to the browser to parse (e.g. client
side). However when written, they will execute in the order they are
written. So try not to write them in some random order, give it a purpose.

Back to statements though, the first one we'll look at is "document.write()"
basically, this means whatever we put in between () will be written to the
document. Thus it's name. HOWEVER, while most anything will be written
DO NOT use this method AT ALL for anything, unless it's either practice or
you found a way to implement it into some JS game that doesn't suck. It is
out right tedious, and make JS look long, sloppy and horrible. So don't use
it. However for teaching purposes, I'll show you it anyway.

Code:
<script type="text/javascript"> // remember, always use this unless it's
// like an alert() or something.

document.write("hello friggin world"); //let's break this down

/*
document.write tells the browser we're about to write something to the
page. () is what we incase it in. Now notice the "" , that's because we're
using text. Such as speech. If we were using numbers, or a variable or
something else, we wouldn't need the quotes. You can use either of the
2 quotes, however for speech types, it's good practice to use double
quotes. Also notice the ";" at the end of the line. In JS it's not technically
needed, however in this class it is needed and damn good practice to get
into.
*/
</script> // end tag.

If you were to copy that, put into a html page and run it. The only thing
it would display is the hellow firggin world. And nothing else. Everything
else is commented.

The other statements we'll be going over is alert(), prompt() and confirm()
Starting with alert().

Basically with alert() anything in between the () will be displayed as a pop-
up. Annoying as they are, they can be used for some good. You can use it
to display text, numbers, expressions, variable and etc. However for this
instance we're only going to be seeing text and numbers.
Code:
<script type="text/javascript">
alert("this is text, when run this will display this text as a pop up");
alert(5);
//If you run this, the above will display a line of text and then a number
//just a single number. And also,
alert(5 + 5);
//the above will do the math for you. So you can also use JS to do
//math for you
</script>

While there is a plethora of ways to do math with JS, you have to use
something called "operators", which we'll get into later. Moving along,

Basically to use confirm() is the same thing. It displays as a pop up with
some text asking the person to confirm with a yes/no. And prompt() is
also the same way, it displays a pop up and "prompts" the user for some
info. With some clever going, you can make some cool stuff with it.
let's see them:
Code:
<script type="text/javascript">
alert("moo");

prompt("How was your day?", "");

confirm("Do you like this class?");

In the prompt case, You saw I left blank quotes. You DON'T have to do
that. You can put something in there, and that will display as a sort of
"default" answer. There are ways to expand this and make it billions times
better. However, we can't get into that until we get into syntax's and
what not. Going on,

In JS we have what's called variables. They can be anything you want
HOWEVER, they may ONLY start with a letter or an underscore ( _ ). It
is also case sensitive so a and A are not the same thing. To use a variable
we define it as "var ". Meaning it starts with "var" and then the variable name.

An example:
Code:
<script type="text/javascript">

var x = "some text";
// i called the variable x.
// I made it a text based variable
//and then ended it with a semi colon. And now to use it practically

alert(x);

</script>

The way they can be used is almost pretty much infinite in my opinion.
There's a lot more ways to show you this that would look cooler and make
more sense, but...it's not like we're learning anything too complex yet, so
for now I'll leave it at this. And now to move on to the part that really
gives JS some power. Statements. if, if..else and so on. But today we're
only going to cover those 2, if and if...else.

The if statement basically states "if blah is equal to blah" then execute
blahhh. Or you could do "if blah is blah, execute blahh". It's probably easier
to just show you.

Code:
<script type="text/javascript">

var x = 5

if ( x == 1 ) {
alert("No freaking way");
}
// --
//this is how to use if else
if ( x == 2 ) {
alert("bs")
} else {
alert("Yeah, thought so. 5 does not equal 2");
}
</script>

There we saw the if statement, and how the else statement is used.
-----

Let me guys know if you don't get anything. or have any suggestions.

-Viral.]]> <![CDATA[VWBC - Lesson 6: CSS Basics Ending.]]> http://thehallowlife.com/forums/showthread.php?tid=1678 Thu, 05 Apr 2012 21:28:52 -0400 http://thehallowlife.com/forums/showthread.php?tid=1678
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
----

Alright guys, this will be the last lesson in the CSS set. So try to bare with
me here. I know CSS can be boring but I promise, if you can bare with me
just a bit more, we'll get into some more fun stuff. Alright?

So picking up where we left off, one of the first things we'll be going over
is borders. Yup borders. There are 8 types of borders, ->
None, Dotted, Dashed, Solid, Ridged, Groove, Double, Outset and Inset.

And there are 4 ways to use them, top, bottom, left and right. OR you
could just use the "all round" one which is just "border". So to recap there's
border-left, border-right, border-top, border-bottom. And yes you have to
use lowercase and the dashes.
Here's an example:
Code:
p.one {
border-style:solid;
border-color:red;
}

p.two {
border-style:solid;
border-color:blue; /* Border-color doesn't work alone though */
}
--

Another easy thing we'll cover is, margin. Margin is kinda where the edges
will be set. It's sorta what defines how far the element can go. There are
4 ways to use margin that is, margin-top, margin-bottom, margin-left,
margin-right. Just like the borders yup. But you can also use the all
rounder thing here too. Just use "margin".
Here's an example:
Code:
p.one {
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}

Another thing to know about margin is you can use something called
Auto margin. What I mean by this, is there are 3 ways to define a margin.
You can use "margin: auto" "margin: #%" where you replace number with
anything from 1-100. And then "margin: #px" where the # is anything from
1-100.

Another thing we can vary is something called "padding". And like the
above 2, it too has a top, bottom, left and right side. Which we can
manipulate using px or %.
Code:
p.one {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}

One really neat thing about CSS is the ability to either hide, or ghost an
element from view. That probably doesn't make sense, so another way to
go about this is to tell you, there is something called a visibility element.
You can set this to 2 things. Hidden or none. If you put it on hidden, the
element still affects the page and takes up the space it's been given.
Whereas, if you put it to none, it not affect the page nor take up space.
It will simply just be that. Not there.

Code:
h1.hidden {visibility:hidden;} /* hides from page but still takes up room */
h2.hidden {visibility:none;} /* is removed from page and doesn't affect it. */

To go along with that there are things in CSS called inline elements and
block elements. Every CSS tag fits one. A block element will take up more
space than needed as it forces a line break above and below. Whereas an
inline element will take up only as much space as needed. An example of
a block element is <h1><div><p> and so on. An example of an inline
element is <a> and <span>. This affect can be seen when you use them
practically.

To set a usually block element to inline or vice versa is simple enough
though. Simply::
Code:
li {display:inline;}
span {display:block;}
Set the display to anything you like.
---
Don't worry guys. Almost done with the boring stuff.

In CSS you can "position" an element based on a number of things. And
most of them aren't affected by the top, bottom, right and left properties.
These "positions" are called, static positioning, relative positioning, fixed
positioning, and absolute positioning.

Static positioning is default for all elements. This is how the page normally
flows. Relative means it will be in a relative position differing from it's
normal one, but it can also overlap other elements so long as it keeps a
little space to itself.
Code:
h1.left {
position:relative;
left:-20px;
}

}

Fixed positioning means it will stay where it's at no matter if you scroll the
page any direction you wish or blow up the internet. It's staying right
where it's at. It's not moving.
Code:
p1.fixed {
position:fixed;
top:30px;
right:5px;
}

Absolute positioning means an absolute position element is positioned
relative to the first parent element that has a position other than static.
If no such element is found, the containing block is <html>. But most times
this doesn't happen.
Code:
h2 {
position:absolute;
left:100px;
top:150px;
}

And lastly for positioning, it is possible to over lap an element but you have
to use something called a z index. It may sound weird to you, so you don't
have to worry about it too much. But here's a practical example.
Code:
img {
position:absolute;
left:0px;
top:0px;
z-index:-1
}

A cool thing you can do in CSS is have the ability to make things float.
And not, I'm not screwing with you. You can literally make it float. Either
to the left or the right though, not the top or bottom or some weird
diagonal polymorphic crap. But if you use float you also allow other
elements the ability to "wrap" around the other ones. This is most often
seen in an image gallery. To make an image float you simply just tell it to
float. when it does it will go as far right/left as it can.

Code:
img {
float:right;
}

If you float an image, any following text will wrap around to the left.
It can be a pretty neat affect if used right. You can also float things
together at once, if you allow it some room.
Code:
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px;
}

And there we have it. I promised it wouldn't be much longer and it wasn't.
There is some other stuff on CSS which you can check out W3, But
honestly I don't see them as important or needed as it's never used (ever)
or they practically give you the source code to nav bar, image gallery
and so on.

And this is the end of the lesson set for CSS. So the next time we meet
it be loads of fun because next we'll be learning how to screw with some
client side scripting and mess with browsers.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
VWBC Lesson 5
----

Alright guys, this will be the last lesson in the CSS set. So try to bare with
me here. I know CSS can be boring but I promise, if you can bare with me
just a bit more, we'll get into some more fun stuff. Alright?

So picking up where we left off, one of the first things we'll be going over
is borders. Yup borders. There are 8 types of borders, ->
None, Dotted, Dashed, Solid, Ridged, Groove, Double, Outset and Inset.

And there are 4 ways to use them, top, bottom, left and right. OR you
could just use the "all round" one which is just "border". So to recap there's
border-left, border-right, border-top, border-bottom. And yes you have to
use lowercase and the dashes.
Here's an example:
Code:
p.one {
border-style:solid;
border-color:red;
}

p.two {
border-style:solid;
border-color:blue; /* Border-color doesn't work alone though */
}
--

Another easy thing we'll cover is, margin. Margin is kinda where the edges
will be set. It's sorta what defines how far the element can go. There are
4 ways to use margin that is, margin-top, margin-bottom, margin-left,
margin-right. Just like the borders yup. But you can also use the all
rounder thing here too. Just use "margin".
Here's an example:
Code:
p.one {
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}

Another thing to know about margin is you can use something called
Auto margin. What I mean by this, is there are 3 ways to define a margin.
You can use "margin: auto" "margin: #%" where you replace number with
anything from 1-100. And then "margin: #px" where the # is anything from
1-100.

Another thing we can vary is something called "padding". And like the
above 2, it too has a top, bottom, left and right side. Which we can
manipulate using px or %.
Code:
p.one {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}

One really neat thing about CSS is the ability to either hide, or ghost an
element from view. That probably doesn't make sense, so another way to
go about this is to tell you, there is something called a visibility element.
You can set this to 2 things. Hidden or none. If you put it on hidden, the
element still affects the page and takes up the space it's been given.
Whereas, if you put it to none, it not affect the page nor take up space.
It will simply just be that. Not there.

Code:
h1.hidden {visibility:hidden;} /* hides from page but still takes up room */
h2.hidden {visibility:none;} /* is removed from page and doesn't affect it. */

To go along with that there are things in CSS called inline elements and
block elements. Every CSS tag fits one. A block element will take up more
space than needed as it forces a line break above and below. Whereas an
inline element will take up only as much space as needed. An example of
a block element is <h1><div><p> and so on. An example of an inline
element is <a> and <span>. This affect can be seen when you use them
practically.

To set a usually block element to inline or vice versa is simple enough
though. Simply::
Code:
li {display:inline;}
span {display:block;}
Set the display to anything you like.
---
Don't worry guys. Almost done with the boring stuff.

In CSS you can "position" an element based on a number of things. And
most of them aren't affected by the top, bottom, right and left properties.
These "positions" are called, static positioning, relative positioning, fixed
positioning, and absolute positioning.

Static positioning is default for all elements. This is how the page normally
flows. Relative means it will be in a relative position differing from it's
normal one, but it can also overlap other elements so long as it keeps a
little space to itself.
Code:
h1.left {
position:relative;
left:-20px;
}

}

Fixed positioning means it will stay where it's at no matter if you scroll the
page any direction you wish or blow up the internet. It's staying right
where it's at. It's not moving.
Code:
p1.fixed {
position:fixed;
top:30px;
right:5px;
}

Absolute positioning means an absolute position element is positioned
relative to the first parent element that has a position other than static.
If no such element is found, the containing block is <html>. But most times
this doesn't happen.
Code:
h2 {
position:absolute;
left:100px;
top:150px;
}

And lastly for positioning, it is possible to over lap an element but you have
to use something called a z index. It may sound weird to you, so you don't
have to worry about it too much. But here's a practical example.
Code:
img {
position:absolute;
left:0px;
top:0px;
z-index:-1
}

A cool thing you can do in CSS is have the ability to make things float.
And not, I'm not screwing with you. You can literally make it float. Either
to the left or the right though, not the top or bottom or some weird
diagonal polymorphic crap. But if you use float you also allow other
elements the ability to "wrap" around the other ones. This is most often
seen in an image gallery. To make an image float you simply just tell it to
float. when it does it will go as far right/left as it can.

Code:
img {
float:right;
}

If you float an image, any following text will wrap around to the left.
It can be a pretty neat affect if used right. You can also float things
together at once, if you allow it some room.
Code:
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px;
}

And there we have it. I promised it wouldn't be much longer and it wasn't.
There is some other stuff on CSS which you can check out W3, But
honestly I don't see them as important or needed as it's never used (ever)
or they practically give you the source code to nav bar, image gallery
and so on.

And this is the end of the lesson set for CSS. So the next time we meet
it be loads of fun because next we'll be learning how to screw with some
client side scripting and mess with browsers.

-Viral.]]> <![CDATA[VWBC - Lesson 5: CSS Basics Continued]]> http://thehallowlife.com/forums/showthread.php?tid=1677 Thu, 05 Apr 2012 21:24:17 -0400 http://thehallowlife.com/forums/showthread.php?tid=1677
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
----

Continuing where we left off from; Last time we got a toes barely wet
and learned a fair bit of CSS. So, now let's pour on the floods.

The first thing we'll go over today is, Id Selectors revisited. One thing
I forgot to mention, was the fact you can make specific styles for specific
HTML elements by making a unique Id Selector. And to do this, in the
style sheet you add: "#" and then after that the Id Selector's name.

Example:
Code:
#bswtf {
text-align:left;
color:green;
}
Now, anything I give the Id of bswtf, will have it's text aligned left
and the color green. An example:
Code:
<form id="bswtf" method="get" action="moo.php">
...
</form>
--

Now we can move on to CSS properties. And to start we'll be going over
Background properties. There are 5 of them. Those being:
background-color, background-image, background-repeat, background-attachment, background-position
---

How can we use these? Well let's start by understanding what these
properties do in the first place.
background-color, as you can imagine specifies color. You can use 3 types.
Hex, Color name or RGB. Personally I prefer the first 2. And most times, it's
the Hex value being used.

background-image, is well another obvious one. It specifies an image to
be used.
background-repeat, makes a image tile, or repeat either vertically or
horizontally.
background-attachment, depicts whether or not the image will be moving
with the page, or stay in one spot. Ever see a website where the background
looked like it was scrolling with you. That's probably because it was.
And lastly,
background-position, defines where the starting point is.

You should only use one of these attribute per element when
displaying it. Never try to use multiple ones. That just creates mayhem for you.

Another important thing to cover is the text values.

color - Sets the color of text
direction - Specifies the text direction
text-align - Specifies the alignment of text
text-decoration - Specifies the decoration
text-indent - Specifies the indentation in a text-block
text-shadow - Specifies the effect added to text

While there are more, I will only cover those.
Code:
p {text-indent:50px;}

Is the way to indent text. The 50 is the number you want to change.
However, don't make it any random number. This number is based on pixels.

1 pixel isn't much, where as 100 is.
Code:
a {text-decoration:none;}
This basically says, the text decoration is nothing right now. However
you can change the word none to "blink""shadow" and a couple others
I know of. However I don't know the entire list. Sorry. You could prob
find it though. Blink and shadow are the most used.

Code:
h1 {text-align:center;} /* Anything in H1 will be aligned to the
center */
p.date {text-align:right;} /* anything with the element, p.date will be
aligned right */
p.main {text-align:justify;} /* anything with the element p.main will be
justified */

Now color, color is a funny thing. You can define color 3 different ways.
That would be the actual name, hex value, or RGB value. I don't suggest
RGB value, that's just too much work. The most common is hex color.
So I suggest that one.

Code:
body {color:blue;} /* Actual color name */
h1 {color:#00ff00;} /* Using hex value */

Moving along, the next thing we can specify in CSS is font. that's right
we can do cool stuff to font now. such as controling it's size, type, and
color.
Code:
p.normal {font-style:normal;} /*makes text normal */
p.italic {font-style:italic;} /*makes text italic */
p.bold {font-style:bold;} /* makes text bold */

h1 {font-size:40px;} /*makes font size 40 for h1 */
h2 {font-size:30px;} /*makes font size 30 for h2 */
p {font-size:14px;} /*makes font size 14 for p */

p{font-family:"Times New Roman", Times, serif;} /* makes the font times new roman, if not support by browser, then times, then serif */

The thing about, fonts, is simple. You can use EM, however I don't suggest
it. It's just too much work. It was recommended to stop the IE problem
though. To do EM you take the amount of pixel, such as say 16 pixels, and divide by 16.
Since 16 is the normal size. 1 em = 16 pixel. therefor, 2em is 32 pixels.
Get it? Take your pixel amount. Divide it by 16, thats your EM number.
You can have decimals too if you'd like.

The font family attribute is messy though. Sometimes, unless you're going
for a specific effect just leave it out and browsers will default it's own.
But if youw ant to use it, then any font family longer than one word must
be in quotes, and it's highly suggested to put more after that first one
separated by commas, as sort of back ups incase the first one is supported.

The next thing we're going to learn to play with is links. Yup. The things you
click everyday (well, i think).

There are only 4 type of link attributes, that I know of. There could be more
I honestly don't know. I'll look into it later.

Code:
a:link {color:#FF0000;}  /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

You can set the colors, to each one And you can do other things to those
links such as decoration, size, or anything else really. So long as it's enclosed
in those {}.

When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

I don't know why. I really don't. But, that's what I learned and I did try it
myself. And it didn't work, so I can't tell you why it does that. Sorry.

Rolling right into the CSS list attributes.
There are 2 types of list, UL and OL. Which is Unordered and Ordered lists.
We learned about those in HTML, not lets use them in CSS.

Code:
ul.a {list-style-type: circle;} /*defines type of point */
ul.b {list-style-type: square;} /*defines type of point */

ol.c {list-style-type: upper-roman;} /*defines type of point */
ol.d {list-style-type: lower-alpha;} /*defines type of point */


Noticed how they were ordered? ul.a ul.b and so on. That's how the
ordering goes. same for the ordered list as well. You can add styles
to those list though, bg color, size, decoration, color and so on. Just
don't over use them. Then it just looks crappy. You can also use images
if you like, by doing this:
Code:
ul {
list-style-image: url('example.gif');
}

The last thing we'll go over today in this class before I hit the character
limit is tables. There are few things you can do with tables to make cool
pages. However, I will only go over certain ones, the ones most used.

Code:
table, th, td
{
border: 1px solid black;
}

In the above example, table, th and td have a border because they're all
nested together. To do sep borders, just separate them. As always you can
change the number, and the color. Here I'm specifying height and width.
Code:
table {
width:50px;
}
th {
height:50px;
}

Basically just like HTML. The values being height and width, then the
numbers, which can be changed. you can do this to any element, th, td, tr
table and so on.

Code:
td {
text-align:right; /* this will makes the text in this element right aligned */
}
Code:
td {
padding:15px; /* this will make the td element had 15 pixels of padding.
}

Code:
table, td, th {
border:1px solid green; /* Gives all 3 elements, 1pixel border and making it green */
}
th {
background-color:green; /*makes background color green on the element */
color:white; /*but everything else white */
}

And that is all there is need to know about how tables work in CSS.

I will admit however I may re-write this class. I am extremely tired and
I didn't want to make you guys wait any longer for the class. I know the
server roll back and the hacked thing, isn't really helping much, but yeah
im tired. So, if you find any mistakes, please let me know. And if you think
something needs more explaining, let me know as well please.

The next class will probably be just as big. Maybe smaller, but we're almost
done with the CSS class set.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
VWBC Lesson 4
----

Continuing where we left off from; Last time we got a toes barely wet
and learned a fair bit of CSS. So, now let's pour on the floods.

The first thing we'll go over today is, Id Selectors revisited. One thing
I forgot to mention, was the fact you can make specific styles for specific
HTML elements by making a unique Id Selector. And to do this, in the
style sheet you add: "#" and then after that the Id Selector's name.

Example:
Code:
#bswtf {
text-align:left;
color:green;
}
Now, anything I give the Id of bswtf, will have it's text aligned left
and the color green. An example:
Code:
<form id="bswtf" method="get" action="moo.php">
...
</form>
--

Now we can move on to CSS properties. And to start we'll be going over
Background properties. There are 5 of them. Those being:
background-color, background-image, background-repeat, background-attachment, background-position
---

How can we use these? Well let's start by understanding what these
properties do in the first place.
background-color, as you can imagine specifies color. You can use 3 types.
Hex, Color name or RGB. Personally I prefer the first 2. And most times, it's
the Hex value being used.

background-image, is well another obvious one. It specifies an image to
be used.
background-repeat, makes a image tile, or repeat either vertically or
horizontally.
background-attachment, depicts whether or not the image will be moving
with the page, or stay in one spot. Ever see a website where the background
looked like it was scrolling with you. That's probably because it was.
And lastly,
background-position, defines where the starting point is.

You should only use one of these attribute per element when
displaying it. Never try to use multiple ones. That just creates mayhem for you.

Another important thing to cover is the text values.

color - Sets the color of text
direction - Specifies the text direction
text-align - Specifies the alignment of text
text-decoration - Specifies the decoration
text-indent - Specifies the indentation in a text-block
text-shadow - Specifies the effect added to text

While there are more, I will only cover those.
Code:
p {text-indent:50px;}

Is the way to indent text. The 50 is the number you want to change.
However, don't make it any random number. This number is based on pixels.

1 pixel isn't much, where as 100 is.
Code:
a {text-decoration:none;}
This basically says, the text decoration is nothing right now. However
you can change the word none to "blink""shadow" and a couple others
I know of. However I don't know the entire list. Sorry. You could prob
find it though. Blink and shadow are the most used.

Code:
h1 {text-align:center;} /* Anything in H1 will be aligned to the
center */
p.date {text-align:right;} /* anything with the element, p.date will be
aligned right */
p.main {text-align:justify;} /* anything with the element p.main will be
justified */

Now color, color is a funny thing. You can define color 3 different ways.
That would be the actual name, hex value, or RGB value. I don't suggest
RGB value, that's just too much work. The most common is hex color.
So I suggest that one.

Code:
body {color:blue;} /* Actual color name */
h1 {color:#00ff00;} /* Using hex value */

Moving along, the next thing we can specify in CSS is font. that's right
we can do cool stuff to font now. such as controling it's size, type, and
color.
Code:
p.normal {font-style:normal;} /*makes text normal */
p.italic {font-style:italic;} /*makes text italic */
p.bold {font-style:bold;} /* makes text bold */

h1 {font-size:40px;} /*makes font size 40 for h1 */
h2 {font-size:30px;} /*makes font size 30 for h2 */
p {font-size:14px;} /*makes font size 14 for p */

p{font-family:"Times New Roman", Times, serif;} /* makes the font times new roman, if not support by browser, then times, then serif */

The thing about, fonts, is simple. You can use EM, however I don't suggest
it. It's just too much work. It was recommended to stop the IE problem
though. To do EM you take the amount of pixel, such as say 16 pixels, and divide by 16.
Since 16 is the normal size. 1 em = 16 pixel. therefor, 2em is 32 pixels.
Get it? Take your pixel amount. Divide it by 16, thats your EM number.
You can have decimals too if you'd like.

The font family attribute is messy though. Sometimes, unless you're going
for a specific effect just leave it out and browsers will default it's own.
But if youw ant to use it, then any font family longer than one word must
be in quotes, and it's highly suggested to put more after that first one
separated by commas, as sort of back ups incase the first one is supported.

The next thing we're going to learn to play with is links. Yup. The things you
click everyday (well, i think).

There are only 4 type of link attributes, that I know of. There could be more
I honestly don't know. I'll look into it later.

Code:
a:link {color:#FF0000;}  /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

You can set the colors, to each one And you can do other things to those
links such as decoration, size, or anything else really. So long as it's enclosed
in those {}.

When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

I don't know why. I really don't. But, that's what I learned and I did try it
myself. And it didn't work, so I can't tell you why it does that. Sorry.

Rolling right into the CSS list attributes.
There are 2 types of list, UL and OL. Which is Unordered and Ordered lists.
We learned about those in HTML, not lets use them in CSS.

Code:
ul.a {list-style-type: circle;} /*defines type of point */
ul.b {list-style-type: square;} /*defines type of point */

ol.c {list-style-type: upper-roman;} /*defines type of point */
ol.d {list-style-type: lower-alpha;} /*defines type of point */


Noticed how they were ordered? ul.a ul.b and so on. That's how the
ordering goes. same for the ordered list as well. You can add styles
to those list though, bg color, size, decoration, color and so on. Just
don't over use them. Then it just looks crappy. You can also use images
if you like, by doing this:
Code:
ul {
list-style-image: url('example.gif');
}

The last thing we'll go over today in this class before I hit the character
limit is tables. There are few things you can do with tables to make cool
pages. However, I will only go over certain ones, the ones most used.

Code:
table, th, td
{
border: 1px solid black;
}

In the above example, table, th and td have a border because they're all
nested together. To do sep borders, just separate them. As always you can
change the number, and the color. Here I'm specifying height and width.
Code:
table {
width:50px;
}
th {
height:50px;
}

Basically just like HTML. The values being height and width, then the
numbers, which can be changed. you can do this to any element, th, td, tr
table and so on.

Code:
td {
text-align:right; /* this will makes the text in this element right aligned */
}
Code:
td {
padding:15px; /* this will make the td element had 15 pixels of padding.
}

Code:
table, td, th {
border:1px solid green; /* Gives all 3 elements, 1pixel border and making it green */
}
th {
background-color:green; /*makes background color green on the element */
color:white; /*but everything else white */
}

And that is all there is need to know about how tables work in CSS.

I will admit however I may re-write this class. I am extremely tired and
I didn't want to make you guys wait any longer for the class. I know the
server roll back and the hacked thing, isn't really helping much, but yeah
im tired. So, if you find any mistakes, please let me know. And if you think
something needs more explaining, let me know as well please.

The next class will probably be just as big. Maybe smaller, but we're almost
done with the CSS class set.

-Viral.]]> <![CDATA[VWBC - Lesson 4: CSS Basics]]> http://thehallowlife.com/forums/showthread.php?tid=1676 Thu, 05 Apr 2012 21:10:57 -0400 http://thehallowlife.com/forums/showthread.php?tid=1676
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
----

A note before I start. If ever you don't understand something. Or would
want more help/explanation. Don't be afraid to ask. Either in thread or PM.
--

Thanks for coming to the 4th lesson in this series. Today is only a CSS Intro
to get your toes wet. And the next will flood over you. So hopefully you're
ready for it. I've decided that easy new segment. I will make an intro first
to get your toes wet. And that way you can ease yourself into by at least
having SOME expectation of what's to come.

That having been said. Let's start. The first thing about CSS you should
know is. Is that CSS is literally just styling. That's all. There's no forms,
there's no actions. There's nothing to it, except styles. This is correspondent
to it's name. Cascading Style Sheets. (CSS).

One thing you should know about CSS is, it's was primarily made to help
define styles to HTML elements. Apparently people thought that using HTML
to style stuff took too long and was a pain in the ass. So someone made up
CSS as a solution. Which is all fine and dandy for us.

There are 3 types of CSS. External Sheets. Internal Style Sheets. And
inline CSS.

The way to invoke these 3 types is this way:
External Style Sheet Invoke Example:
Code:
<head>
<link rel="stylesheet" type="text/css" href="link/to/css.css" />
</head>

The external style sheet can be made however you like, notepad
wordpad, notepad++, pft even word if you want. An example of what
an external sheet would look like is this:

Code:
h1 {
color:sienna;
}

h2 {
margin-left:20px;
}

body {
background-image:url("images/bg.png");
}

With no style tags or any tags really. Also, you don't have to style it
like I just did. That's personal preference. I like my stuff to look neat.
As an example of another way you could do it is:
Code:
h1 {color:white;}
h2 {margin-left:15px;}
body {background-image:url("images/bg.png");}

You can have it stacked like that. That's not it either. If you really
wanted to. You could do this:
Code:
h1 {color:white;} h2 {margin-left:15px;} body {background-image:url("images/bg.png");}
You could have it smashed together. Just. Don't do it on my assignments
please. It's bothers the FUCK out of me. I find it annoying as crap.

Now then. All External Style Sheets, end in .css and as far as I'm aware
I've never seen it linked in anything but head tags. So, until I test it, when
ever that may be. Always put the rel link in the head tags.

Internal Style Sheet Invoke Example:
Code:
<head>
<style type="text/css">
h1 {
color:white ;
}

h2 {
margin-left:15px;
}

body {
background-image:url("images/bg.png");
}
</style>
</head>

That's internal styling. And like above, you don't have to do it like I did.
You could do it stacked, or smashed. I just like mine neat. Another thing
about internal styling is that you can do it in the body tags as well. Doesn't
have to be just the head tags.

The last example is for inline styling.
Inline Styling Invoke Example:
Code:
<p style="color:white;margin-left:15px">Test test test test test.</p>

Kind of like the HTML styling. However. I don't suggest this method. It's
long. Tedious and over all just annoying. And I don't see a use for it.
---

Out of all the styles, I suggest External the most. Unless you're doing literally
just a small small thing. In that case using Internal Styling.

--

In CSS there is only ONE way to comment and that is to use the block
comment type. Which is this:
Code:
/*
A block comment
*/

----

Another trivia to know is that in CSS. There are literally almost just 2 parts
to it. A selector. And then deceleration(s). An example is this:
Code:
<p style="color:white;margin-left:15px">
In the above example. The <p> would be the selector. And the
color:white would be the deceleration. In the deceleration. There are 2
parts in the deceleration. That would be the property and then the value.
Color is the property. White is the value. You can technically have as many
decelerations as you like. However I suggest only using a max of maybe
3-4 in one selector.

If anyone had a hard time understanding that, it's fine. Because really, it
shouldn't matter to you right now anyway. It's really just a bunch of trivia
that's neat to know. So don't worry yourself over it, if none of that made
sense to you.

---

Now. What really makes CSS powerful is the ability to style select elements
the way YOU want. There's a neat way to do this too. And that's with
something called "Id" and "Class". You can mention/specify these Id's and
Class's in the HTML code. Like so:

Code:
<form class=ClassName action=moo.php  method=get>
...
</form>

However, NEVER use a number in an Id or Class. It won't work in some
browsers. Such as FireFox.
----

How to define a Id or Class in a Style Sheet is like so,
The class uses the HTML class attribute, and is defined with a dot. (".")
All HTML elements with class="center" will be center-aligned In the example
below.
Code:
.center {
text-align:center;
}

Here's an example of how it's used practically.
Code:
<form class="center" method="get" action="action.php">
...
</form>
---

You can also specify that only specific HTML be affected by a class/id.
all p elements with class="center" will be center-aligned like so:
Code:
p.center {
text-align:center;
}

Now you may have noticed. I haven't been putting a space between the
property and the value. That's because you don't have to. But you can if
you want. And most times I do.
---

Now this may be a bit advanced for something that's only being used to
get your toes wet, but, in CSS another thing that makes it so great is
the ability to group, and nest selectors together. Here's an example:
Code:
h1, h2, h3 {
color: blue
}

Notice that? Anything that's in h1, h2 and h3 will have the color blue now.
So instead of doing separate things for all 3 selectors. We condensed it into
one. You can do this for mismatched selectors too. They don't have to be
the same. An example is :
Code:
h1, p, b, h3 {
color: blue
}

And our last thing for today is something called Nesting. That's right we
can nest selectors. For example, if you wanted to make all <p> blue, but
the specified ones green. You would Nest it. Like so:
Code:
p {
color:blue;
text-align:center;
}

.specified {
background-color:blue;
}

.specified p {
color:white;
}

Alright class. That will be the end of this lesson. That was just to get
your toes wet. The next one will be larger. And I may have to double post
Lol.

So try not to run away. I promise, if you can get past all the boring stuff
first. We'll get to the fun stuff like PHP, Servers, DB's , Security and so on.
But with all good things you have to know the basic stuff first.

Remember, any comments or suggestions you have are welcomed. Feel free
to invite any of your friends.

A copy of this class be found here:
http://thehallowlife.com/webinar/lessons/class4.txt

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
VWBC Lesson 3
----

A note before I start. If ever you don't understand something. Or would
want more help/explanation. Don't be afraid to ask. Either in thread or PM.
--

Thanks for coming to the 4th lesson in this series. Today is only a CSS Intro
to get your toes wet. And the next will flood over you. So hopefully you're
ready for it. I've decided that easy new segment. I will make an intro first
to get your toes wet. And that way you can ease yourself into by at least
having SOME expectation of what's to come.

That having been said. Let's start. The first thing about CSS you should
know is. Is that CSS is literally just styling. That's all. There's no forms,
there's no actions. There's nothing to it, except styles. This is correspondent
to it's name. Cascading Style Sheets. (CSS).

One thing you should know about CSS is, it's was primarily made to help
define styles to HTML elements. Apparently people thought that using HTML
to style stuff took too long and was a pain in the ass. So someone made up
CSS as a solution. Which is all fine and dandy for us.

There are 3 types of CSS. External Sheets. Internal Style Sheets. And
inline CSS.

The way to invoke these 3 types is this way:
External Style Sheet Invoke Example:
Code:
<head>
<link rel="stylesheet" type="text/css" href="link/to/css.css" />
</head>

The external style sheet can be made however you like, notepad
wordpad, notepad++, pft even word if you want. An example of what
an external sheet would look like is this:

Code:
h1 {
color:sienna;
}

h2 {
margin-left:20px;
}

body {
background-image:url("images/bg.png");
}

With no style tags or any tags really. Also, you don't have to style it
like I just did. That's personal preference. I like my stuff to look neat.
As an example of another way you could do it is:
Code:
h1 {color:white;}
h2 {margin-left:15px;}
body {background-image:url("images/bg.png");}

You can have it stacked like that. That's not it either. If you really
wanted to. You could do this:
Code:
h1 {color:white;} h2 {margin-left:15px;} body {background-image:url("images/bg.png");}
You could have it smashed together. Just. Don't do it on my assignments
please. It's bothers the FUCK out of me. I find it annoying as crap.

Now then. All External Style Sheets, end in .css and as far as I'm aware
I've never seen it linked in anything but head tags. So, until I test it, when
ever that may be. Always put the rel link in the head tags.

Internal Style Sheet Invoke Example:
Code:
<head>
<style type="text/css">
h1 {
color:white ;
}

h2 {
margin-left:15px;
}

body {
background-image:url("images/bg.png");
}
</style>
</head>

That's internal styling. And like above, you don't have to do it like I did.
You could do it stacked, or smashed. I just like mine neat. Another thing
about internal styling is that you can do it in the body tags as well. Doesn't
have to be just the head tags.

The last example is for inline styling.
Inline Styling Invoke Example:
Code:
<p style="color:white;margin-left:15px">Test test test test test.</p>

Kind of like the HTML styling. However. I don't suggest this method. It's
long. Tedious and over all just annoying. And I don't see a use for it.
---

Out of all the styles, I suggest External the most. Unless you're doing literally
just a small small thing. In that case using Internal Styling.

--

In CSS there is only ONE way to comment and that is to use the block
comment type. Which is this:
Code:
/*
A block comment
*/

----

Another trivia to know is that in CSS. There are literally almost just 2 parts
to it. A selector. And then deceleration(s). An example is this:
Code:
<p style="color:white;margin-left:15px">
In the above example. The <p> would be the selector. And the
color:white would be the deceleration. In the deceleration. There are 2
parts in the deceleration. That would be the property and then the value.
Color is the property. White is the value. You can technically have as many
decelerations as you like. However I suggest only using a max of maybe
3-4 in one selector.

If anyone had a hard time understanding that, it's fine. Because really, it
shouldn't matter to you right now anyway. It's really just a bunch of trivia
that's neat to know. So don't worry yourself over it, if none of that made
sense to you.

---

Now. What really makes CSS powerful is the ability to style select elements
the way YOU want. There's a neat way to do this too. And that's with
something called "Id" and "Class". You can mention/specify these Id's and
Class's in the HTML code. Like so:

Code:
<form class=ClassName action=moo.php  method=get>
...
</form>

However, NEVER use a number in an Id or Class. It won't work in some
browsers. Such as FireFox.
----

How to define a Id or Class in a Style Sheet is like so,
The class uses the HTML class attribute, and is defined with a dot. (".")
All HTML elements with class="center" will be center-aligned In the example
below.
Code:
.center {
text-align:center;
}

Here's an example of how it's used practically.
Code:
<form class="center" method="get" action="action.php">
...
</form>
---

You can also specify that only specific HTML be affected by a class/id.
all p elements with class="center" will be center-aligned like so:
Code:
p.center {
text-align:center;
}

Now you may have noticed. I haven't been putting a space between the
property and the value. That's because you don't have to. But you can if
you want. And most times I do.
---

Now this may be a bit advanced for something that's only being used to
get your toes wet, but, in CSS another thing that makes it so great is
the ability to group, and nest selectors together. Here's an example:
Code:
h1, h2, h3 {
color: blue
}

Notice that? Anything that's in h1, h2 and h3 will have the color blue now.
So instead of doing separate things for all 3 selectors. We condensed it into
one. You can do this for mismatched selectors too. They don't have to be
the same. An example is :
Code:
h1, p, b, h3 {
color: blue
}

And our last thing for today is something called Nesting. That's right we
can nest selectors. For example, if you wanted to make all <p> blue, but
the specified ones green. You would Nest it. Like so:
Code:
p {
color:blue;
text-align:center;
}

.specified {
background-color:blue;
}

.specified p {
color:white;
}

Alright class. That will be the end of this lesson. That was just to get
your toes wet. The next one will be larger. And I may have to double post
Lol.

So try not to run away. I promise, if you can get past all the boring stuff
first. We'll get to the fun stuff like PHP, Servers, DB's , Security and so on.
But with all good things you have to know the basic stuff first.

Remember, any comments or suggestions you have are welcomed. Feel free
to invite any of your friends.

A copy of this class be found here:
http://thehallowlife.com/webinar/lessons/class4.txt

-Viral.]]> <![CDATA[VWBC - Lesson 3: HTML Basics Ending.]]> http://thehallowlife.com/forums/showthread.php?tid=1675 Thu, 05 Apr 2012 21:08:42 -0400 http://thehallowlife.com/forums/showthread.php?tid=1675
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
----

Now this will be the final lesson we have on HTML for now. We will mostly
likely touch up on it a few times later as it does tie into other languages
but in this lesson today, we'll only go over the what I think to be essential
ones, and the other tags which I don't view to be essential, I'll just list and
their definitions in alphabetical order.

----

Last time we learned about forms, tables, buttons, input types and so on.
We'll today we're going to learn about attributes such as <iframe> and so on. We'll also cover doctypes, meta information and probably
a few other things. After which I will give you a webpage, which I want
you to complete.

----

The first thing we're going to cover is Iframes. Now iframes are kind of
cool when used right. Otherwise they just look ugly and out of context.
But to use an iframe we do this:

<iframe src="page.html"></iframe>

First we open the tag iframe, and then define the source of where to
pull the information from. In this case I chose page.html, it can be any
thing you'd like though. After which,we then close the iframe with an
iframe end tag. We can also give it more attributes, such as height
width, padding and so on.

The next thing we will cover is an attribute called "align". We can use this
in basically almost any way. Forms, tables, buttons, text, paragraphs
yup, a lot really. And how we use it is, when we go to make, let's say for
example a paragraph we add this :

<p align="value">text </p>

We make an open tag, and then add align to it, the values we can give
it is left, right, center and then if you play with it enough, also top and
bottom.

The next thing we'll get into is Doc types. Now doc types aren't too
hard to understand. For one, you don't technically _need_ them. And
next, one thing you should know is that it goes ABOVE the FIRST <html>
tag. Like so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
....
</html>

You'll notice the big long line. While my IDE does this automatically for
me, it's something you don't really need to worry about unless you're an
SEO neat freak. But this is the default Doctype and you shouldn't worry
about any others. Just this one. All this really does is help with SEO and
tells your browser the type of document you're loading. And the last bit
tells it, where to pull it's references from and what to match it against.

Again, not really something you need to worry about.
Another thing to add on to that, is the character type. What I mean
by this is, have you ever seen this in an HTML document?:
Code:
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

This is basically a character set type. There are literally a crap load of
them. This is the most basic and default one there is. What this is saying
is, content type is text/html and the charset to read/reference from is
iso-8859-1.

That's all it really does. That charset is the thing that holds all the
references to the ASCII characters, html entities and so on. Again not
something absolutely essential. Just good for things like SEO, and w3
compliance.

The next thing we'll cover is <meta> tags. And boy are these fun. Meta
tags are essentially, the best thing for SEO along with getting Google to
be your new best friend. With meta tags you can redirect, refresh,
describe, author, and so on. There really is a crap load you could do with
meta tags. But for now, we'll only go over the most common ones.

Code:
<meta name="description" content="This is what describes content in your page. " />
<meta name="keywords" content="these, are, keywords, to, help, index, and, seo, your, site. Always, separate, with, a, comma. " />
<meta name="author" content="Just tells who the author of this page is." />
<meta http-equiv="refresh" content="number of seconds to refresh" />
<meta http-equiv="location" content="URL=google.com" /> <!-- upon loading the page they are redirected to the URL above -->

And those happen to be the most common ones. There are others, but
we'll leave them for now. And roll right into a practical example to finish
off this lesson. So here's what I want the students to do, make me a page
which at LEAST 10 different types of tags that we've gone over. And
also go to the webpage below and fill out the information. I will be using
only stuff we went over.

Remember, there is a lot of HTML I did not cover. This is solely because it's
outdated and is useless, or because it ties into another language and I will
cover it then, so it makes more sense. But for now, the HTML lesson set
is over and soon we will start CSS.

For my students, please go here: http://thehallowlife.com/webinar/practical.htm

And do the assignment.
--

Grats for making it to the end of the HTML lesson set.

It was short, I know. Don't worry. CSS will be longer. And MAYBE a bit
confusing to you, considering how it works and how it ties into HTML.

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1
VWBC Lesson 2
----

Now this will be the final lesson we have on HTML for now. We will mostly
likely touch up on it a few times later as it does tie into other languages
but in this lesson today, we'll only go over the what I think to be essential
ones, and the other tags which I don't view to be essential, I'll just list and
their definitions in alphabetical order.

----

Last time we learned about forms, tables, buttons, input types and so on.
We'll today we're going to learn about attributes such as <iframe> and so on. We'll also cover doctypes, meta information and probably
a few other things. After which I will give you a webpage, which I want
you to complete.

----

The first thing we're going to cover is Iframes. Now iframes are kind of
cool when used right. Otherwise they just look ugly and out of context.
But to use an iframe we do this:

<iframe src="page.html"></iframe>

First we open the tag iframe, and then define the source of where to
pull the information from. In this case I chose page.html, it can be any
thing you'd like though. After which,we then close the iframe with an
iframe end tag. We can also give it more attributes, such as height
width, padding and so on.

The next thing we will cover is an attribute called "align". We can use this
in basically almost any way. Forms, tables, buttons, text, paragraphs
yup, a lot really. And how we use it is, when we go to make, let's say for
example a paragraph we add this :

<p align="value">text </p>

We make an open tag, and then add align to it, the values we can give
it is left, right, center and then if you play with it enough, also top and
bottom.

The next thing we'll get into is Doc types. Now doc types aren't too
hard to understand. For one, you don't technically _need_ them. And
next, one thing you should know is that it goes ABOVE the FIRST <html>
tag. Like so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
....
</html>

You'll notice the big long line. While my IDE does this automatically for
me, it's something you don't really need to worry about unless you're an
SEO neat freak. But this is the default Doctype and you shouldn't worry
about any others. Just this one. All this really does is help with SEO and
tells your browser the type of document you're loading. And the last bit
tells it, where to pull it's references from and what to match it against.

Again, not really something you need to worry about.
Another thing to add on to that, is the character type. What I mean
by this is, have you ever seen this in an HTML document?:
Code:
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

This is basically a character set type. There are literally a crap load of
them. This is the most basic and default one there is. What this is saying
is, content type is text/html and the charset to read/reference from is
iso-8859-1.

That's all it really does. That charset is the thing that holds all the
references to the ASCII characters, html entities and so on. Again not
something absolutely essential. Just good for things like SEO, and w3
compliance.

The next thing we'll cover is <meta> tags. And boy are these fun. Meta
tags are essentially, the best thing for SEO along with getting Google to
be your new best friend. With meta tags you can redirect, refresh,
describe, author, and so on. There really is a crap load you could do with
meta tags. But for now, we'll only go over the most common ones.

Code:
<meta name="description" content="This is what describes content in your page. " />
<meta name="keywords" content="these, are, keywords, to, help, index, and, seo, your, site. Always, separate, with, a, comma. " />
<meta name="author" content="Just tells who the author of this page is." />
<meta http-equiv="refresh" content="number of seconds to refresh" />
<meta http-equiv="location" content="URL=google.com" /> <!-- upon loading the page they are redirected to the URL above -->

And those happen to be the most common ones. There are others, but
we'll leave them for now. And roll right into a practical example to finish
off this lesson. So here's what I want the students to do, make me a page
which at LEAST 10 different types of tags that we've gone over. And
also go to the webpage below and fill out the information. I will be using
only stuff we went over.

Remember, there is a lot of HTML I did not cover. This is solely because it's
outdated and is useless, or because it ties into another language and I will
cover it then, so it makes more sense. But for now, the HTML lesson set
is over and soon we will start CSS.

For my students, please go here: http://thehallowlife.com/webinar/practical.htm

And do the assignment.
--

Grats for making it to the end of the HTML lesson set.

It was short, I know. Don't worry. CSS will be longer. And MAYBE a bit
confusing to you, considering how it works and how it ties into HTML.

-Viral.]]> <![CDATA[VWBC - Lesson 2: HTML Basics Continued]]> http://thehallowlife.com/forums/showthread.php?tid=1674 Thu, 05 Apr 2012 20:50:02 -0400 http://thehallowlife.com/forums/showthread.php?tid=1674
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1

Now that's taken care of, picking up from where we left off, let's take a look
at a few more things today. Last time we looked at common tags, and basic
tags such as <html> and <body>. We also learned that most tags in this
realm, come in pairs (usually); such as <b></b> but that some don't, such
as <br>.

So today here is a list of tags we will be going over:
You will note these are ordered and do NOT have the end tags on them.
This is solely because there is already a massive amount of tags to cover
those that ending tags will be noted in the lesson when we learn to use
them.
<select> == Defines a drop-down list
<small> == Defines small text
<span> == Defines a section in a document
<strike> == Defines strike through text
<strong> == Defines strong text
<style> == Defines style information for a document
<sub> == Defines sub script text
<sup> == Defines super script text
<table> == Defines a table
<tbody> == Groups the body content in a table
<td> == Defines a cell in a table
<textarea> == Defines a multi-line text input control
<tfoot> == Groups the footer content in a table
<th> == Defines a header cell in a table
<thead> == Groups the header content in a table
<tr> == Defines a row in a table
<tt> == Defines teletype text
<ul> == Defines an unordered list
---

Now that we have that list out of the way, let's see how to use
some of these. The first thing we will look at for today is, the
last few miscellaneous tags, such as:<ul><tt><sub><sup><strike>
and <small>.

Code:
<ul></ul>
Makes things into an ordered list. Though
it says unordered, I've personally never seen it un ordered. Let's a take a look at what it does in a practical eniroment. Using the example from
yesterday, let's make a new webpage.

Code:
<html>
<title>Wepage 2</title>
<head></head>
<body>
<h1>This is a heading. Remember, we can have up to 6 of these. <br>
(Although I've gone up to 8. w3 states we can only have 6). </h1>
<br>
<p>
<ul>* Moo1</ul>
<ul>* Moo2</ul>
<ul>* Moo3</ul>
<ul>* Moo4</ul>
</p>

<p><sub>This is how we make an</sub><sup> ordered list. Each UL element is a listed</sup><tt> attribute on the page.</tt> <br />
<strike>Meaning, Each time you want</strike><small> to list something, each "ordered item"</small> needs a UL infront. and behind it.</p>
</body>
</html>

As you notice, each time you want an ordered point, you need to
append UL infront and behind it. But if you copied the code strait from
me, it should look like this:

[Image: webpage2.png]

You'll also notice the little differences in there in the last paragraph.
Those tags were in order of: <sub></sub><sup></sup><tt></tt>
<strike></strike><small></small>
---
A quick thing we should learn about HTML is how to use comments.
A lot of who know a different language will know that in most cases,
// /**/ and # will work as comments. But not in HTML. HTML comments work
like this: <!-- text here --> Vastly different from those up above.

So to review, to make an HTML comment, it's like this:
<!-- (this starts the comment)
--> (this ends the comment)

---
Moving along, we'll be getting into things called Tables (and their attributes)
and things called HTML Elements/Attributes.

Tables, are an easy concept once you get the hang of it. Every table
start with <table> and ends with </table>.
To make a "column" in a table, you use "<tr>", and to make a row you use
"<td>" both of which end with their corresponding end tags (e.g.: </td> and </tr>)

Now, let's see how to actually use them.

Code:
<table> <!-- we're beginning a table -->
<tr> <!-- Making a column -->
<td></td> <!-- making a cell/row -->
<td></td> <!-- making a cell/row -->
</tr> <!-- ending the column -->
<tr> <!--making a new column -->
<td></td> <!-- making a cell/row -->
<td></td> <!-- making a cell/row -->
</tr> <!--ending the column -->
</table> <!-- ending the table -->

Now if you run this code in say a browser as a .html, nothing will
happen/show up. This is because there isn't any information in it.
However if add, let's say.. 11 in between each: <td></td>
then when you run it, you will get a neat organized table, of a 2x2
formation. Go ahead and try it, if you did, it should look like this:

[Image: table1.png]

--

Another thing to mention about tables, is the thead, tbody, and tfoot.
Unless you're using Java Script, in serious combination, the amount you will
ever use these tags is about nil. So I'm not going to bother explaining them.
However w3 schools, does explain them I believe.
--

But now that we've learned a little about tables, another important
thing to mention is forms. Everyone uses forms in some way. So let's see
how we're gonna use them.

First, to create a form we need form tags. <form></form>
But, making a form tag alone won't work. Otherwise any information we
give it, can't/won't be executed nor will it do anything. For there's nothing
to parse it or relay or anything. So what do we do? We give it an action.

And to do that, we use an attribute called "action", which would be used
like this:
Code:
<form action="myAction.php">
</form>

Now as you can see, "action=" is how we tell the browser we're submitting
information using this action. And "myAction.php" is the action script
we're using. Now it doesn't have to be .php it could be anything, like
action.php, action.asp, action.aspx. So long as it can parse the information.So remember, any file name, any extension.

But that alone isn't enough we have to tell it, what type of action, using
one of two method. POST and GET. Which are used like so.
POST will get user inputted data such as, a message in a text box
most commonly used for contact forms. Where as GET will just get the
url/header info.

For this example, we'll just use the GET method. So we apply it like so:
Code:
<form action="action.php" method="get">
</form>
This is all need for the form, however there are other things
we can do, such as giving it an encryption method as well. If we
don't put one in, the default one is text/plain. So we'll use that one.
Which is done like so:
Code:
<form action="action.php" method="get" enctype="text/plain">
</form>
Now that we have a form, we should give it some actual content.
Let's go ahead and go over the next set of tags we'll be using.
Preview this example here which uses all the tags we'll be going over.
Code:
<form action="234" method="get" enctype="text/plain">
<input type="text" value="1" />
<textarea wrap="OFF">
</textarea>
<input type="password" value="1"/>
<input type="file" accept=".rar" size="20" />
<input type="submit" value="submit" src="moo.com/moo" />
<input type="button" />
<input type="reset" value="9" />
<input type="image" src="moo.jpg" />
<input type="radio" value="k" />
<input type="checkbox" value="k" />
<select size="1">
    <option value="k">k</option>
    <option value="l">l</option>
</select>
<input type="hidden" value="," />
</form>

You'll notice there is a lot of input types, this is because in a form we
need content, and what better way for content than input from the user
which is what form are most commonly used for.
Code:
<input type="text" value="1" />
The above piece of code is called a "text box" type input. This lets input
a line of text into a text box. You'll notice where it says "value="1"", that
is the default value I gave it. All input types will start this way:
<input type=""> there are quite a few different input types you can do.
Now, the above code isn't all we can do to it. We can give it style,
padding, width, height and so on, but that's for a later discussion.
This type of input box is commonly used for username input.
Code:
<textarea wrap="OFF"> </textarea>
The text area tags, allow for multiple line entries, commonly used for a
"comment" box or other, where it would normally take more than one line.
You'll notice is has ending tags, whereas the input types, do not.
Where it says wrap=off, this means when a person is typing, instead of
the line going to a new line when it hits the edge, it'll instead keep going.
To fix that, just put wrap="on".
Code:
<input type="password" value="1"/>
The above is a password type input box. Commonly used for password
input boxes, like above it's usually used in conjuncture with the username
box.

Most input types, are the same, either buttons or boxes which can be
further styled with width, height, padding and so on. But again, that's
for a later session. Moving along to the next one:
Code:
<input type="file" accept=".rar" size="20" />
This input type is for when you upload stuff. Ever wonder why
those upload forms look the way they look? or why they only
accept certain types of files? Well this one accepts .rar only, but
if you were to want it to accept something else, just replace the .rar
with the extension, e.g.: .zip or .jpg. Or if you want it to have multiple
extensions, just do this: accept=".zip, .rar, .png, .ext">

You'll notice all I did was add a comma and a space. That's all that is
needed.
Code:
<input type="submit" value="submit" src="moo.com/moo" />
One of the most common types here, is the submit button.
The "value" is the name of the button. The src="" is only
if you want to send them to that URL when they hit submit.
Code:
<input type="button" />
This just makes a button. You can do pretty much anything to this button.
It doesn't anything right now though. Though this type is sometimes used
on online test.
Code:
<input type="reset" value="9" />
This is a "reset" button. What it does is, reset all user input that's been
made back to it's default values. The "value" is the name of the reset
button.
Code:
<input type="image" src="moo.jpg" />
This input type is an image. Not a button or anything but can be clicked, also commonly used
for html GUI's. After telling the browser this input is a image, give it a link
using the src="" method.
Code:
<input type="radio" value="k" />
This is a radio button. Common used for a"yes no" type questions on most
online sites.
Code:
<input type="checkbox" value="k" />
Is a check box type, commonly used for sites when asking for stuff like
"what's your favorite hobbies? pick 5" type things.

And lastly, for the form contents is ;
Code:
<select size="1">
    <option value="k">k</option>
    <option value="l">l</option>
</select>

This is a select box. Or otherwise known as a drop down box. To make it
work, we make a select size, using <select size=""> most times the size is dependent on the type of select box. For words try size 7, for numbers or letters, try 1. After which we need to give it some options. To do so, we tell it to do so by using the <option></option> tags. Make an option value, this should be the same as the actual value itself. i.e.: if you were to have a drop down of milk, eggs, and water. Then makes the values, and names the same. However, if you were to have, say the options, male or female, then make the values, sex, but the names male/female.
And after you're done making some options, end the select tag with
</select>

You're probably wondering what the hidden value thing is. Well a lot of
times, people will have hidden values in their forms. However, I have yet
to find a use for it. So I won't be going over it.
--

That concludes forms for now. Moving along to links.

There a re a couple types of links. There's image links, hyper links,
and then in the hyper links, there are url, self, blank, top, and nothing.
Code:
<a href="url"> link name </a>
Is how you would "anchor" a link. the <a> is an anchor. Now there
are a few things we can do, besides, just putting a URL. We can do
this too:
Code:
<a href="url" target="_blank"> link name </a>
You'll notice I added something new. This is called the "target method".
Meaning, when someone clicks the link, the target is then followed.
_blank will open a new window. _self will reload the current page to the
new link. (e.g.: click here for next page, types). _parent and _top will full screen the page.

And lastly for link types is
Code:
<img src="url></img>

To make an image show up, you would put the image url in the
quotes, and then close off the image with it's end tag. Now a lot of times
people will tell you, you don't need an end tag. Well it never works for me
so I'm telling you, you do. You can do other things with an image tag,
but for now, for this lesson we'll leave it like that. So, let's use these tags
we just learned about in an practical example.

After using all the tags in a practical example, I give you this:
[Image: webpageexample.png]

Now my assignment to the students is to try using all these tags in a
practical example. Of course my source and examples are always free
to look at for a reminder of how to do something.

Sorry it took so long to get out. Thanks for viewing this class.
Be sure to wait for the next one. Which will go over the rest of the
HTML tags including attributes and elements, such as align, name, class
and so on.


NOTE: I am sorry about the lack of color.

Side note:

You can view the examples here:
http;//thehallowlife.com/webinar/examples/webpage2.png
http://thehallowlife.com/webinar/examples/table1.png
http://thehallowlife.com/webinar/example...xample.png

You can view the example webpage here:
http://thehallowlife.com/webinar/examples/webpage2.html

You can view the lesson here:
http://thehallowlife.com/webinar/lessons/class2.txt

You can view the sources here:
http://thehallowlife.com/webinar/source/lesson2.1.txt
http://thehallowlife.com/webinar/source/lesson2.2.txt
http://thehallowlife.com/webinar/source/lesson2.3.txt

This was the final practical example webpage, if you'd like
that source too.
http://thehallowlife.com/webinar/source/lesson2.4.txt

-Viral.]]>
Thank you for viewing this class once again. If you're just
now joining us, then I suggest reading these threads first:

Viral's Web Basics Class (Home Desk)
VWBC Lesson 1

Now that's taken care of, picking up from where we left off, let's take a look
at a few more things today. Last time we looked at common tags, and basic
tags such as <html> and <body>. We also learned that most tags in this
realm, come in pairs (usually); such as <b></b> but that some don't, such
as <br>.

So today here is a list of tags we will be going over:
You will note these are ordered and do NOT have the end tags on them.
This is solely because there is already a massive amount of tags to cover
those that ending tags will be noted in the lesson when we learn to use
them.
<select> == Defines a drop-down list
<small> == Defines small text
<span> == Defines a section in a document
<strike> == Defines strike through text
<strong> == Defines strong text
<style> == Defines style information for a document
<sub> == Defines sub script text
<sup> == Defines super script text
<table> == Defines a table
<tbody> == Groups the body content in a table
<td> == Defines a cell in a table
<textarea> == Defines a multi-line text input control
<tfoot> == Groups the footer content in a table
<th> == Defines a header cell in a table
<thead> == Groups the header content in a table
<tr> == Defines a row in a table
<tt> == Defines teletype text
<ul> == Defines an unordered list
---

Now that we have that list out of the way, let's see how to use
some of these. The first thing we will look at for today is, the
last few miscellaneous tags, such as:<ul><tt><sub><sup><strike>
and <small>.

Code:
<ul></ul>
Makes things into an ordered list. Though
it says unordered, I've personally never seen it un ordered. Let's a take a look at what it does in a practical eniroment. Using the example from
yesterday, let's make a new webpage.

Code:
<html>
<title>Wepage 2</title>
<head></head>
<body>
<h1>This is a heading. Remember, we can have up to 6 of these. <br>
(Although I've gone up to 8. w3 states we can only have 6). </h1>
<br>
<p>
<ul>* Moo1</ul>
<ul>* Moo2</ul>
<ul>* Moo3</ul>
<ul>* Moo4</ul>
</p>

<p><sub>This is how we make an</sub><sup> ordered list. Each UL element is a listed</sup><tt> attribute on the page.</tt> <br />
<strike>Meaning, Each time you want</strike><small> to list something, each "ordered item"</small> needs a UL infront. and behind it.</p>
</body>
</html>

As you notice, each time you want an ordered point, you need to
append UL infront and behind it. But if you copied the code strait from
me, it should look like this:

[Image: webpage2.png]

You'll also notice the little differences in there in the last paragraph.
Those tags were in order of: <sub></sub><sup></sup><tt></tt>
<strike></strike><small></small>
---
A quick thing we should learn about HTML is how to use comments.
A lot of who know a different language will know that in most cases,
// /**/ and # will work as comments. But not in HTML. HTML comments work
like this: <!-- text here --> Vastly different from those up above.

So to review, to make an HTML comment, it's like this:
<!-- (this starts the comment)
--> (this ends the comment)

---
Moving along, we'll be getting into things called Tables (and their attributes)
and things called HTML Elements/Attributes.

Tables, are an easy concept once you get the hang of it. Every table
start with <table> and ends with </table>.
To make a "column" in a table, you use "<tr>", and to make a row you use
"<td>" both of which end with their corresponding end tags (e.g.: </td> and </tr>)

Now, let's see how to actually use them.

Code:
<table> <!-- we're beginning a table -->
<tr> <!-- Making a column -->
<td></td> <!-- making a cell/row -->
<td></td> <!-- making a cell/row -->
</tr> <!-- ending the column -->
<tr> <!--making a new column -->
<td></td> <!-- making a cell/row -->
<td></td> <!-- making a cell/row -->
</tr> <!--ending the column -->
</table> <!-- ending the table -->

Now if you run this code in say a browser as a .html, nothing will
happen/show up. This is because there isn't any information in it.
However if add, let's say.. 11 in between each: <td></td>
then when you run it, you will get a neat organized table, of a 2x2
formation. Go ahead and try it, if you did, it should look like this:

[Image: table1.png]

--

Another thing to mention about tables, is the thead, tbody, and tfoot.
Unless you're using Java Script, in serious combination, the amount you will
ever use these tags is about nil. So I'm not going to bother explaining them.
However w3 schools, does explain them I believe.
--

But now that we've learned a little about tables, another important
thing to mention is forms. Everyone uses forms in some way. So let's see
how we're gonna use them.

First, to create a form we need form tags. <form></form>
But, making a form tag alone won't work. Otherwise any information we
give it, can't/won't be executed nor will it do anything. For there's nothing
to parse it or relay or anything. So what do we do? We give it an action.

And to do that, we use an attribute called "action", which would be used
like this:
Code:
<form action="myAction.php">
</form>

Now as you can see, "action=" is how we tell the browser we're submitting
information using this action. And "myAction.php" is the action script
we're using. Now it doesn't have to be .php it could be anything, like
action.php, action.asp, action.aspx. So long as it can parse the information.So remember, any file name, any extension.

But that alone isn't enough we have to tell it, what type of action, using
one of two method. POST and GET. Which are used like so.
POST will get user inputted data such as, a message in a text box
most commonly used for contact forms. Where as GET will just get the
url/header info.

For this example, we'll just use the GET method. So we apply it like so:
Code:
<form action="action.php" method="get">
</form>
This is all need for the form, however there are other things
we can do, such as giving it an encryption method as well. If we
don't put one in, the default one is text/plain. So we'll use that one.
Which is done like so:
Code:
<form action="action.php" method="get" enctype="text/plain">
</form>
Now that we have a form, we should give it some actual content.
Let's go ahead and go over the next set of tags we'll be using.
Preview this example here which uses all the tags we'll be going over.
Code:
<form action="234" method="get" enctype="text/plain">
<input type="text" value="1" />
<textarea wrap="OFF">
</textarea>
<input type="password" value="1"/>
<input type="file" accept=".rar" size="20" />
<input type="submit" value="submit" src="moo.com/moo" />
<input type="button" />
<input type="reset" value="9" />
<input type="image" src="moo.jpg" />
<input type="radio" value="k" />
<input type="checkbox" value="k" />
<select size="1">
    <option value="k">k</option>
    <option value="l">l</option>
</select>
<input type="hidden" value="," />
</form>

You'll notice there is a lot of input types, this is because in a form we
need content, and what better way for content than input from the user
which is what form are most commonly used for.
Code:
<input type="text" value="1" />
The above piece of code is called a "text box" type input. This lets input
a line of text into a text box. You'll notice where it says "value="1"", that
is the default value I gave it. All input types will start this way:
<input type=""> there are quite a few different input types you can do.
Now, the above code isn't all we can do to it. We can give it style,
padding, width, height and so on, but that's for a later discussion.
This type of input box is commonly used for username input.
Code:
<textarea wrap="OFF"> </textarea>
The text area tags, allow for multiple line entries, commonly used for a
"comment" box or other, where it would normally take more than one line.
You'll notice is has ending tags, whereas the input types, do not.
Where it says wrap=off, this means when a person is typing, instead of
the line going to a new line when it hits the edge, it'll instead keep going.
To fix that, just put wrap="on".
Code:
<input type="password" value="1"/>
The above is a password type input box. Commonly used for password
input boxes, like above it's usually used in conjuncture with the username
box.

Most input types, are the same, either buttons or boxes which can be
further styled with width, height, padding and so on. But again, that's
for a later session. Moving along to the next one:
Code:
<input type="file" accept=".rar" size="20" />
This input type is for when you upload stuff. Ever wonder why
those upload forms look the way they look? or why they only
accept certain types of files? Well this one accepts .rar only, but
if you were to want it to accept something else, just replace the .rar
with the extension, e.g.: .zip or .jpg. Or if you want it to have multiple
extensions, just do this: accept=".zip, .rar, .png, .ext">

You'll notice all I did was add a comma and a space. That's all that is
needed.
Code:
<input type="submit" value="submit" src="moo.com/moo" />
One of the most common types here, is the submit button.
The "value" is the name of the button. The src="" is only
if you want to send them to that URL when they hit submit.
Code:
<input type="button" />
This just makes a button. You can do pretty much anything to this button.
It doesn't anything right now though. Though this type is sometimes used
on online test.
Code:
<input type="reset" value="9" />
This is a "reset" button. What it does is, reset all user input that's been
made back to it's default values. The "value" is the name of the reset
button.
Code:
<input type="image" src="moo.jpg" />
This input type is an image. Not a button or anything but can be clicked, also commonly used
for html GUI's. After telling the browser this input is a image, give it a link
using the src="" method.
Code:
<input type="radio" value="k" />
This is a radio button. Common used for a"yes no" type questions on most
online sites.
Code:
<input type="checkbox" value="k" />
Is a check box type, commonly used for sites when asking for stuff like
"what's your favorite hobbies? pick 5" type things.

And lastly, for the form contents is ;
Code:
<select size="1">
    <option value="k">k</option>
    <option value="l">l</option>
</select>

This is a select box. Or otherwise known as a drop down box. To make it
work, we make a select size, using <select size=""> most times the size is dependent on the type of select box. For words try size 7, for numbers or letters, try 1. After which we need to give it some options. To do so, we tell it to do so by using the <option></option> tags. Make an option value, this should be the same as the actual value itself. i.e.: if you were to have a drop down of milk, eggs, and water. Then makes the values, and names the same. However, if you were to have, say the options, male or female, then make the values, sex, but the names male/female.
And after you're done making some options, end the select tag with
</select>

You're probably wondering what the hidden value thing is. Well a lot of
times, people will have hidden values in their forms. However, I have yet
to find a use for it. So I won't be going over it.
--

That concludes forms for now. Moving along to links.

There a re a couple types of links. There's image links, hyper links,
and then in the hyper links, there are url, self, blank, top, and nothing.
Code:
<a href="url"> link name </a>
Is how you would "anchor" a link. the <a> is an anchor. Now there
are a few things we can do, besides, just putting a URL. We can do
this too:
Code:
<a href="url" target="_blank"> link name </a>
You'll notice I added something new. This is called the "target method".
Meaning, when someone clicks the link, the target is then followed.
_blank will open a new window. _self will reload the current page to the
new link. (e.g.: click here for next page, types). _parent and _top will full screen the page.

And lastly for link types is
Code:
<img src="url></img>

To make an image show up, you would put the image url in the
quotes, and then close off the image with it's end tag. Now a lot of times
people will tell you, you don't need an end tag. Well it never works for me
so I'm telling you, you do. You can do other things with an image tag,
but for now, for this lesson we'll leave it like that. So, let's use these tags
we just learned about in an practical example.

After using all the tags in a practical example, I give you this:
[Image: webpageexample.png]

Now my assignment to the students is to try using all these tags in a
practical example. Of course my source and examples are always free
to look at for a reminder of how to do something.

Sorry it took so long to get out. Thanks for viewing this class.
Be sure to wait for the next one. Which will go over the rest of the
HTML tags including attributes and elements, such as align, name, class
and so on.


NOTE: I am sorry about the lack of color.

Side note:

You can view the examples here:
http;//thehallowlife.com/webinar/examples/webpage2.png
http://thehallowlife.com/webinar/examples/table1.png
http://thehallowlife.com/webinar/example...xample.png

You can view the example webpage here:
http://thehallowlife.com/webinar/examples/webpage2.html

You can view the lesson here:
http://thehallowlife.com/webinar/lessons/class2.txt

You can view the sources here:
http://thehallowlife.com/webinar/source/lesson2.1.txt
http://thehallowlife.com/webinar/source/lesson2.2.txt
http://thehallowlife.com/webinar/source/lesson2.3.txt

This was the final practical example webpage, if you'd like
that source too.
http://thehallowlife.com/webinar/source/lesson2.4.txt

-Viral.]]> <![CDATA[VWBC - Lesson 1: HTML Basics]]> http://thehallowlife.com/forums/showthread.php?tid=1673 Thu, 05 Apr 2012 20:45:29 -0400 http://thehallowlife.com/forums/showthread.php?tid=1673 This is a series of lessons/tutorial for the class located
here: http://thehallowlife.com/forums/showthread.php?tid=1672

Lesson 1: HTML Basics.

--

First things first, to learn HTML you have to know what it is.
A lot of people think HTML is a programming or scripting language;
this is incorrect. HTML is a Markup language.

HTML stands for: Hyper Text Markup Language.

HTML uses what's called "markup tags", to create web pages. It is
by no means a scripting language. No markup tags, no web page.
Every page you ever see on the internet uses mark up tags in some way.

When you see a markup tag on a webpage, they usually are called
"HTML tags". Well in conjunction with that, EVERY html tag you see
start with "<" and end with ">". These are called angle brackets.
HTML tags NORMALLY come in pairs, (e.g: <html></html>) and
those tags are called "start tags" and "end tags" or aka opening and
closing tags.
--

Moving along, a few things we will be going over in this lesson is how to
get up a basic web page using some of the tags today.

The first set of tags we will look at is:
Code:
<html></html>
<title></title>
<head></head>
<body></body>
<h1></h1>
<h2></h2>
<p></p>
<b></b>
<i></i>
<u></u>
<center></center>
<br>

These are all very basic tags, and are on almost every webpage.
Now, while it's not "ABSOLUTELY" needed to have any tags what so ever,
it does help a great deal.

Now let's see how we're gonna use them. :
Code:
<html>  == Start a webpage,
</html> == ends a webpage.
<title> == Defines the title of a page.
</title> == ends the title tag.
<head> == defines the start of the first set of content in a page,
anything in this is loaded first, such as java script.
</head> == defines the ending of the head tag, goes to the next tag.
<body> == this is the "main page bulk" this is where most of the webpage
content will be.
</body> == ends the main page bulk.
<h1> == defines the "heading" of the page, this shows up as the "first header"
as per "h1" which means "heading 1".
</h1> == ends the first header.
<h2> == same as heading one, just that it happens to be header two.
</h2> == ends the header 2 tags. you can technically have as many
header tags as you like.
<p> == starts a paragraph, this is called the paragraph tag.
</p> == ends a paragraph tag.
<b> == start tag to making a word(s) bold.
</b> == end tag to bold.
<i> == start tag to making word(s) italic.
</i> == end tag to italic.
<u> == start tag to making word(s) underline.
</u> == end stag to underline.
<center> == start tag to make content in between centered.
</center> == end tag to center.
<br> a tag without the need of an end tag, it makes a line break.
meaning it goes to a new line.

Now that we know what each one is, and what they do, let's do something
practical and make a webpage with some of them.

Code:
<html>
<title> Woot my first page</title>
<head>
</head>
<body>
<h1>This is Heading one</h1><br>
<h2>This is heading two </h2><br>
<p> this is a paragraph. Look what it does. </p><br>
<center> this is some centered text. </center><br>
<b>This is some bold text</b><br>
<i>this is some italic text. </i><br>
<u>this is some underlined text</u><br>

<p> That concludes this practical experiment, let's <br>
see what else there is, eh? </p>

</body>
</html>

You'll noticed, I used every tag as they would be used,
and that each tag with the exception of one, had an end tag to it.
I first created the webpage by opening up the start html tag.
then gave it a title, gave it a head, then a body with some content to
it. Then ended the body and ended the webpage with the end tag to
<html>.

If you copy pasted that code into say, notepad, and then hit save as

"all files", webpage.html (must have the .html or .htm extension.) then
it should look like this:

[Image: webpage1.png]
---

If it doesn't, then there seems to be a problem in which case, feel free
to PM me.
---

And this about covers lesson 1. This is primarily to get your toes wet
to see if you'd like. If you feel I should teach it a different way then let
me know, or if there is a way you feel I could have improved it, then let
me know. (And trust me I did consider teaching it a different way).

Each lesson is available for download, along with the examples and the
source to each example. If you like how I teach, and you feel this will be
a good course for you, then grab some soda or water or some kind of
drink, because lesson two will work you hard to the bone with whats
in store with it.

Lesson two is by far at least 2-3 times bigger with much more content
on HTML.

A link to the lesson: http://thehallowlife.com/webinar/lessons/class1.txt
(a video will be up soon, and I will link to that too)
A link to the examples: http://thehallowlife.com/webinar/examples/webpage1.html and http://thehallowlife.com/webinar/examples/webpage1.png
A link to the source code: http://thehallowlife.com/webinar/source/lesson1.txt

-Viral.]]> This is a series of lessons/tutorial for the class located
here: http://thehallowlife.com/forums/showthread.php?tid=1672

Lesson 1: HTML Basics.

--

First things first, to learn HTML you have to know what it is.
A lot of people think HTML is a programming or scripting language;
this is incorrect. HTML is a Markup language.

HTML stands for: Hyper Text Markup Language.

HTML uses what's called "markup tags", to create web pages. It is
by no means a scripting language. No markup tags, no web page.
Every page you ever see on the internet uses mark up tags in some way.

When you see a markup tag on a webpage, they usually are called
"HTML tags". Well in conjunction with that, EVERY html tag you see
start with "<" and end with ">". These are called angle brackets.
HTML tags NORMALLY come in pairs, (e.g: <html></html>) and
those tags are called "start tags" and "end tags" or aka opening and
closing tags.
--

Moving along, a few things we will be going over in this lesson is how to
get up a basic web page using some of the tags today.

The first set of tags we will look at is:
Code:
<html></html>
<title></title>
<head></head>
<body></body>
<h1></h1>
<h2></h2>
<p></p>
<b></b>
<i></i>
<u></u>
<center></center>
<br>

These are all very basic tags, and are on almost every webpage.
Now, while it's not "ABSOLUTELY" needed to have any tags what so ever,
it does help a great deal.

Now let's see how we're gonna use them. :
Code:
<html>  == Start a webpage,
</html> == ends a webpage.
<title> == Defines the title of a page.
</title> == ends the title tag.
<head> == defines the start of the first set of content in a page,
anything in this is loaded first, such as java script.
</head> == defines the ending of the head tag, goes to the next tag.
<body> == this is the "main page bulk" this is where most of the webpage
content will be.
</body> == ends the main page bulk.
<h1> == defines the "heading" of the page, this shows up as the "first header"
as per "h1" which means "heading 1".
</h1> == ends the first header.
<h2> == same as heading one, just that it happens to be header two.
</h2> == ends the header 2 tags. you can technically have as many
header tags as you like.
<p> == starts a paragraph, this is called the paragraph tag.
</p> == ends a paragraph tag.
<b> == start tag to making a word(s) bold.
</b> == end tag to bold.
<i> == start tag to making word(s) italic.
</i> == end tag to italic.
<u> == start tag to making word(s) underline.
</u> == end stag to underline.
<center> == start tag to make content in between centered.
</center> == end tag to center.
<br> a tag without the need of an end tag, it makes a line break.
meaning it goes to a new line.

Now that we know what each one is, and what they do, let's do something
practical and make a webpage with some of them.

Code:
<html>
<title> Woot my first page</title>
<head>
</head>
<body>
<h1>This is Heading one</h1><br>
<h2>This is heading two </h2><br>
<p> this is a paragraph. Look what it does. </p><br>
<center> this is some centered text. </center><br>
<b>This is some bold text</b><br>
<i>this is some italic text. </i><br>
<u>this is some underlined text</u><br>

<p> That concludes this practical experiment, let's <br>
see what else there is, eh? </p>

</body>
</html>

You'll noticed, I used every tag as they would be used,
and that each tag with the exception of one, had an end tag to it.
I first created the webpage by opening up the start html tag.
then gave it a title, gave it a head, then a body with some content to
it. Then ended the body and ended the webpage with the end tag to
<html>.

If you copy pasted that code into say, notepad, and then hit save as

"all files", webpage.html (must have the .html or .htm extension.) then
it should look like this:

[Image: webpage1.png]
---

If it doesn't, then there seems to be a problem in which case, feel free
to PM me.
---

And this about covers lesson 1. This is primarily to get your toes wet
to see if you'd like. If you feel I should teach it a different way then let
me know, or if there is a way you feel I could have improved it, then let
me know. (And trust me I did consider teaching it a different way).

Each lesson is available for download, along with the examples and the
source to each example. If you like how I teach, and you feel this will be
a good course for you, then grab some soda or water or some kind of
drink, because lesson two will work you hard to the bone with whats
in store with it.

Lesson two is by far at least 2-3 times bigger with much more content
on HTML.

A link to the lesson: http://thehallowlife.com/webinar/lessons/class1.txt
(a video will be up soon, and I will link to that too)
A link to the examples: http://thehallowlife.com/webinar/examples/webpage1.html and http://thehallowlife.com/webinar/examples/webpage1.png
A link to the source code: http://thehallowlife.com/webinar/source/lesson1.txt

-Viral.]]>