Week 2: HTML5, CSS3, & FTP Review, Intro to PHP

Topics:

  • Review: Using a Text Editor to create Web files
  • Review: Basic HTML5 Template
  • Review: Using an External Stylesheet
  • Reset CSS
  • What’s new in CSS3
  • Intro to PHP
    • What is PHP?
    • How do I use it?
    • Using PHP includes
  • Publishing files to your site using FTP

Review: Using a Text Editor to create Web files

If you’ve previously only used a WYSIWYG editor like Dreamweaver to create a Web site, it’s time to take off the training wheels and get your hands into the code! All you need to create HTML, CSS, JavaScript or PHP files is a basic text editor.

  • Don’t use Microsoft Word or other word processors, you’ll end up with extra hidden characters that are used by the software for formatting.
  • Do use the  TextWrangler (free, and installed on all lab computers), or the even better paid version BBedit. Coda is also popular. If you are a more advanced developer, you can also try an IDE (integrated development environment) like Eclipse but frankly this is probably overkill for what we are doing in this class. Here’s a list of popular editors for Mac, take a few for a test drive and see what you like

Review: Basic HTML5 Template

HTML5 DOCTYPE

In looking through your Web sites, I noticed that you are not using the HTML5 Doctype for your html pages, which was probably appropriate when you built them. Now all the latest versions of the major browsers are HTML5 compliant, and even on older browsers using the HTML5 doctype will degrade gracefully. It’s also much simpler!

<!DOCTYPE html>

Basic structure

After you declare the doctype, all valid html pages should have 4 tags, nested like so:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

This code, plus the doctype, is the bare minimum for any html document.

Character Encoding

To ensure that special characters will load correctly and consistently across platforms, browsers, and devices, always include instructions for how you want characters to display in your web pages. This is the set of characters your html pages will use. You will indicate this in two places.

First, in your html tag, you’ll specifiy a language. If your site is in english, this is what you would write directly after the doctype:

<html lang="en">

Next, inside your <head> tag, you’ll put a meta tag indicating the character set, or encoding, that you want the browser to use when interpreting your html:

 <meta charset="utf-8" />

UTF-8 uses the Unicode character set. This is the dominant standard for the worldwide Web and for sites  If you want to know more about this, following the links.

Title tag

The other thing you should always include in your <head> tag is a <title> tag. This identifies your html page both in the browser window and to search engines, so is critical for SEO (Search Engine Optimization):

<title>My Awesome Website!</title>

So, putting it all together, the basic HTML template that you should always begin with should look just like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Your Title Here</title>
  </head>
  <body>

Content goes here

  </body>

</html>

I’m assuming that you all have a working knowledge of html tags and how to structure them. If you need a refresher, go to the HTML section of w3schools.org

Review: Using an External Stylesheet

The html above describes the structure of any Web page you should want to build, but as we discuss last class, it’s CSS that spices things up, controlling the presentation of your site. There are three ways to add CSS to your site:

  • Inline (as a style attribute in a tag)
  • Embedded (as a style tag in your head tag)
  • External (as a separate CSS document)

In my opinion, you should almost never use the first two methods, but always opt for the external style sheet. This gives you maximum flexibility for separating the presentation from the structure, and is easier to edit on a whole site basis.

First you need to create the CSS document, which is just another text document. Although not required, it’s standard to give this document the extension .css to easily identify it.

Once you have this document, tou add a stylesheet to your html using a <link> tag inside your <head> tag:

<link rel="stylesheet" type="text/css" href="yourcsshere.css" />

Now your html will automatically pick up any style rules contained in that stylesheet. You can add multiple stylesheets to an html document with additional link tags. The last styles will always be applied first.

For additional reference on all things CSS, check out the CSS section of w3schools.com.

Reset CSS

All Web browsers have a built-in user agent stylesheet that applies basic formatting to any html document. The problem with this is that the defaults are different by browser. To maintain a consistent appearance over different browsers, it’s a good ideal to explicitly set some default styles in your CSS. You can create your own “Reset” CSS or use some that have been made available by other developers. At the very least, I like to “zero out” margin and padding on all of my html elements using the wildcard selector (*)

* { margin: 0, padding: 0 }

This means that no elements will have margin and padding. It also means that I’m going to have to go in and explicitly define these things for my base elements, or everything will be all crushed together.

When we get to using and customizing WordPress themes, you’ll see that many of them use some kind of popular reset CSS like Blueprint. I personally prefer to write my own. The main thing to keep in mind is that whatever you don’t specifically define will be left up to the browser to define. This might be ok for your site, it depends on how tightly you want to control the grid.

What’s New is CSS3

CSS3 has a lot of great new features that let us finally abandoned some hack-y workarounds for getting effects like drop shadows and rounded box corners. Adoption for CSS3 isn’t 100% across all browsers yet, so you want to be aware of that, and how your page will look to those browsers that haven’t adopted a CSS3 property. Check compatibilty and test drive the new properties here:

Intro to PHP

What is PHP?

PHP is a server-side scripting language. It is an interpreted language, which means that you don’t have to run it through a compiler before you use it. PHP stands for “php hypertext pre-processor” which is some kind of programmer in-joke to have the acronym in the name. The important thing to understand about PHP or any server-side script is that you will never see the php code in the browser the way you do with html and javascript, all you will see is the result. That is because the processing happens on the server. This also means that you can’t test php locally on your computer unless you have a Web server and the php core libraries installed on it.

HOW DO I USE IT?

There are two things you need to do to your html files to use php.

1. Rename your html files with .php as the extension. This signals to the Web server that it should run this page through php for processing before sending it out to the Web.

2. Put any php code between php tags like so:

<?php your code here ?>

You can mix regular html with php as long as you keep these two rules straight.

Basics PHP Syntax

  • PHP statements end with a semi-colon: ;
  • PHP block statements are enclosed in curly brackets: { }
  • PHP single line comments start with //
  • PHP multi-line comments are enclosed by /*  */
  • If you want php send text to be displayed in the browser you either use the print or echo commands
  • Variables in php start with a dollar sign: $varname
If you test a php page in the browser and it comes up blank, chances are that you have an error in the php code. The most common errors are that you forgot to end a statement with a semi-colon, or you didn’t close quotes, parentheses, or brackets. Unlike html and even javascript, php is very picky about syntax, and one error makes the whole script fail.

PHP includes

Just to get our feet wet with PHP, we are going to use it for a very basic function: the include file. This allows us to break a single html file into multiple parts. This is extremely useful if you have persistent elements across a site, like a header, menu, or footer. Includes are very simple to use. Wherever you want the other file included, put the following code:

<?php include 'yourfilehere.php'; ?>

Note that the file you include does not have to have a .php extension unless it too has php code in it. Some people use an extension like .txt or .inc to distinguish these files, and that’s really just personal preference.

Here’s an example site using PHP includes:

Using FTP to Publish Your Files

FTP (File Transfer Protocol) is the method we use to transfer files from a local computer to a Web server and back (otherwise known as “publishing” your files). There are many freely available FTP clients that make this as easy as using the Finder on your Mac. The lab computers have Fetch and Fugu installed, another free popular FTP client is Cyberduck.

The key to success in publishing your files is to keep the structure of your site the same on the local and remote machines. So if your images are in an “images” folder on your local machine, they better be on the remote one too, or you are going to get that sad broken image icon on your Web page.

Homework

Finish the three page minisite we began in class today. Make sure that it includes the following:

  • An external stylesheet
  • A persistent navigation element using a php include
  • Formatting of type, colors, and positioning using CSS
  • At least one image
  • At least one CSS rule using a CSS3 only property

2 thoughts on “Week 2: HTML5, CSS3, & FTP Review, Intro to PHP

Leave a Reply