Web Development 1010

[Shizensky]

******************************************
***********THIS CLASS IS NOW OPEN**********
******************************************

Welcome to Web Development 1010!

I'm posting this a little early so future students can take a few steps to get prepared for class. There are a few things you should do to get the most out of these lesson.

Set up a web host

You'll need to host your website somewhere so others can see it. One option is 000webhost.com. It's not the best option in the world, but it's cost free, ads free, and will more than meet the needs of this class.

Whatever you use for hosting, make sure they also let you use PHP. We'll be learning just enough PHP to make your life easy, but not so much as to boil your mind.

Get an FTP client

FTP is File Transfer Protocol, and it lets you transfers files from one computer to another. This will let you work on your files in your own environment and then copy them over to your host.

If you're on a Mac, you'll want to take a look at Cyberduck. It's the best free FTP client I've used by far.

*Cyberduck is also available for Windows users. It's highly recommended.

One note about FTP:

Don't use it on a public internet connection. Using at home should be fine in most cases, but if you're on your laptop on public wifi, understand that all of your data is at risk, and FTP is inherently insecure. This means all of your data, username and password included, is sent across the network in plain text. This makes the hacker's job pretty easy

Find a good text editor

Mac users will find a lot of success with TextWrangler. Window users will probably like Notepad ++. Both of these editors are free.

If you're on a GUI Linux machine, the basic text editor will do some of these things. Unless you're a vi or emacs user, in which case I don't have anything to tell you. You'll be shot for programming in nano, though.

What's good about the fist two editors is how they understand what code is being written. They'll highlight functions and tags so you can better understand your own code. There are a lot of really cool things about them that you'll discover as you get more comfortable in the environment.

---

Let me know if you have any questions at any time during the course. I'll try to provide as much feedback as possible on project submissions to help move you along as well.

[Woonsocket]

OK, teach, all three tasks completed. Ready to become a master of my own domain! -ahem-

[Shizensky]

Firstly, let me thank you all for signing up for the class!

Secondly, let me congratulate you for signing up!

Web Development is an increasingly growing field, on both personal and professional levels. There are literally thousands of opportunities to use web development skills in a professional setting, and those might even be local depending on where you live.

Web development as a skill can prove to be beneficial for you. In my own experience, I've created a daycare website that gave me a $100/month discount on my childcare and created a working relationship that has saved me thousands of dollars when I've had to take both of my boys to daycare at the same time. This was my first commercial site and far from my best work but it still helps me provide for my family.

Another site I did was for a local BBQ joint, and now my wife and I get free food every week as payment for the initial build and for monthly maintenance fees.

In case you're interested, here's some of my work:

Dixie Kids Daycare and Preschool
DUB's BBQ
Steed Realty

and my baby...
Caster

Maybe it's because I'm a dork, but I have tons of fun doing this kind of stuff and I'm happy to share that. If you ever have any questions, just ask! I want to make sure you really get this stuff and can enjoy it as well.

And thank you for signing up for the class!

[Shizensky]

Lesson One
What is HTML?

HTML, or HyperText Markup Language, is foundation of the World Wide Web. If you're going to be a developer that focus on amazing features or a designer that creates beautiful sites, you're going to need to know HTML first.

How does it work?

When you load a page in your web browser, the browser is going to open a file and read the text inside. The markup in the file will tell the browser how to display the text on the screen for the user. On its own, HTML is light-weight and fast. It doesn't take long for even the slower internet connections to read a text file.

Sure, fine, whatever. How do I do it?

HTML is pretty easy to work with on the basic levels. If you've ever hand typed your own style tags in this forum, you're off to a great start. However, there are always nuances that can throw anybody off, so here are some links to sites that have helped me a lot along the way.

w3 Schools

Tizag


Some terms you should know

There are a few key terms you need to know about HTML before we get started.

TAG
A tag is something you'll call that tells the browser how to interact with a specific part of the page. Remember that to close a tag, you'll use the forward slash - / Think of the forum:
The [b] tag is going to make all of this text bold! Use [/b] to make sure we close the tag.

ELEMENT
An element is a full, complete tag, and the part of the page directly being affected by the tags. Think of it as all of the stuff inside the opening and closing tag.

[b]Everything between these tags would be bold, making everything from the opening to the closing tag a part of an element.[/b]

ATTRIBUTE

Early on, you won't work with attributes a whole lot, but you'll still be using them with your links and images. Let's use the forum as an example again:

[url=http://google.com]This link will go to Google[/url]

The opening url tag has an equal sign that points to our attribute. The attribute is something inside the tag that further affects how the tag interacts with the page and manipulates the element.

What's different from the forum, then?

Back in the day, the 'i' and 'b' tags were standard in HTML. Most browsers will still let you use them, but there are more modern and descriptive tags now. Also, HTML tags will use different brackets. Take a look at the example:

<strong>STRONG is HTML's way to make text bold</strong>

<em>We'll use em to italicize our text, or add *emphasis*</em>

Notice that HTML is using the GREATER THAN and LESS THAN signs instead of the square brackets for the tags.

In the next page, we'll get to actually constructing your first HTML web page!

[Shizensky]

One of the great things about HTML is that you can always test your work right away. You don't need any fancy servers or hosts, just a web browser! This is really going to help you in this class.

To view your web page on your browser, make sure you save the file with the .html extension. Then after you edit your file, you just have to refresh your browser to see the changes!

So here's the bare minimum code you'll need to start your page:


<html>
 <body>

 </body>
<html>


If you save this and load it as it is, you'll just see a blank white page. That's okay though. Everything that is not in the body tags is stuff the browser reads behind the scenes and when we start putting stuff about your opening body tag, you'll get a better idea of how it works.

For now, let's focus on filling in the body element.


<html>
 <body>

   <h2>Welcome to my web page!</h2>

   <p>
   We'll just put some general text in here. It doesn't need to say anything important. At least not until everybody comes to check out our site anyway.
   </p>

    <strong>Let's use some bold and <em>italic</em> text</strong>

    <br />

    Thanks for coming by!
 </body>
<html>


I introduced a few new tags in this example. We need to use the P and BR tags because HTML doesn't recognize it if you simply hit enter to add lines or spacing in your document. You can hit the enter key a thousand times and your browser wouldn't show a single new line. We'll use these tags to do this for us.

The P tag is for paragraph. It helps you format your text and will add spacing before and after your element.

The BR tag is the same as hitting enter on your keyboard once. You'll notice it didn't take two tags to make it work. BR is one of those special tags that is self closing, meaning that while we're in the open tag, we just throw a forward slash in to close it at the same time.

We also used a header tag. There are 6 of them, and the go from h1 to h6. The largest and boldest headers start at one, and headers at 6 are much smaller. Headers also take care of some spacing for us in the same manner as a P tag.

Your First Assignment:

Make your first web page! It's going to be very basic at this point, but it will help you get a hold of the basics. Play around on your own desktop and see what you can come up with. Don't worry, there isn't anything you can do to really break anything at this point

The core of the assignment will be to write a simple paragraph. Tell me what you want out of this class. Experiment with the tags while you're at it. This will help me make sure you're happy with your lessons while letting you play around with tags for a little bit.

Feel free to take a look at some of the tutorials to find more tags, and definitely don't be afraid to ask me any questions.

After we've played with a few tags we'll move on to links and lists.

[Aersoldorf]

Cool, I'm paying attention even if I don't speak a lot

[Shizensky]

Links

Using anchor tags, you can link from one page to another. This can be done internally as well as externally, and depending on which way you want to go you'll be doing things a little different. Because there's less to worry about we'll start with external links.


<a href="http://google.com">Google</a>


Here we're using the <a></a> Anchor tag. If you were to put this in your own practice site, you'd get a link that takes you to Google. You'll want to make it a habit to start all of your links with <a href='

Then you'll place the full URL of the site you're trying to go to within the quotation marks. Again, it's a lot like how links work on the forum with the URL tag.

Some words on quotation marks

You'll see me going back and forth quite a bit between single and double quotes. For the most part, this is intentional. I'm trying to show that it won't matter in most cases. However, there are some instances where it's really important.

Think of your quotes as starting and ending points. When your code is being read, the browser sees the first quote and will process the information until the closing quote. So let's take a look at something we might see.


<a href="http://google.com" title="Go to Google's page">Google</a>


This is the same link as before, except we added a TITLE to it. Titles simply display a message to the user when the mouse is hovered over the object. What we really need to pay attention to is the use of the different types of quotes.

When the title content is being read the browser starts with a double quote. Because of this, the browser knows to keep reading until it reaches the closing double quote. Since the single quote is inside the double quotes, it's not being seen as a starting quote for any other element. This seems really simple, but it's also very important. By not opening and closing the proper quotes you can throw a lot of things out on your page. I can't tell you how many times I've had submission forms that were screwed up just because I forgot to close a quote.

[Shizensky]

Lists

You've all seen HTML lists, I'm sure. They're really good for formatting your information for you in a user-friendly format, and they'll really come in handy later if you want to do some tricky stuff with CSS styles.

There are two types of lists:

Unordered Lists <ul> Uses a bullet for each item in the list.
and
Ordered Lists. <ol> Will use a numeric value by default for each list item.

The use of a list takes a little bit more than what we've done so far, but it's not too difficult to pick up. Let's take a look:


Here's our list:
<ul>
 <li>This is a list item</li>
 <li>And this is another item</li>
 <li>Item 3, just because</li>
</ul>


Whether you use <ul> or <ol>, you're always going to use <li></li> for each item inside your list. Each item will then get either a bullet or a number, depending on which list you specified.

When I code my lists, I like to indent the <li> a little bit, and this is true for all tags that are encapsulated inside another tag. This makes things a little easier to follow. So if you took our first example, you'd have your HTML tag, present enter, tab, then your BODY tag, and so on. This might help you read your HTML in the same order it's being processed by a browser, and that helps with debugging.

Sub Lists

We can get a little trickier with lists:


A list within a list:
<ul>
 <li>Item 1</li>
 <li>Item 2
 <ol>
   <li>Sub-Item 1</li>
   <li>Sub-Item 2</li>
   <li>Sub-Item 3</li>
 </ol></li>
 <li>Item 3</li>
</ul>


What the above code does is starts our first list, and then when we feel like we need a list for our second item, we create another list just for that item.

You do this by creating your new list inside the <li> tag. When this is presented on the screen you'll see your first list indented, and then the sub-list will be indented further from the second list. You've probably seen this tons of times on web sites without even realizing it. Some sites use lists in their link navigation. Each link in the navigation bar is actually an item in a list.

Have you ever hovered over a link and then a sub-menu displayed? That sub-menu was probably a sub-list of a list item.

[Shizensky]

Tag Encapsulation

Since we brought it up in the Lists lesson, I thought I'd explain a little more about it.


<html>
<body>

<a href='http://google.com'><strong>Google</strong></a>
<br />
<br />
TITO is gonna <strong><em>ROCK</em></strong> your socks off!

</body>
</html>


We did a bit of encapsulation here. BODY is encapsulated inside of our HTML tags. Everything else is encapsulated inside of our BODY tags.

In our link, <strong> is encapsulated inside our <a> tag, and in the next line we encapsulate <em> inside of <strong>.

What's really important here is that we close our tags to reflect how they were opened. So if we have an element that has tags like <strong><em><h1><a> then we're going to make sure we follow that order when we close them, </a></h1></em></strong>

[Shizensky]

Sorry I've been neglecting this class. I didn't anticipate a job change when I agreed to start it, and the job has been taking a huge amount of time.

I'll resume things in full swing as soon as I'm able to. Sorry again, everybody