Lesson Weekend

Index.php

Your project folder, 'Hello World', has now become what is called your document root, which just means that this is the folder where the server will expect to find all your code. You can see the terminal printed out the path to it for you when you started your server: Document root is /Users/epicodus/Desktop/HelloWorld.

Here's a handy trick we learned in Intro: if we change the name of our file from 'helloworld.php' to 'index.php' we can browse to our hello world document without naming the file in the path. In Chrome browse to http://localhost:8000/. You should again see the 'Hello World!'

Remember index is a keyword for the host that means 'Hey! Hey! Look here to find the default resource for this project'. From here on out we will ALWAYS have a file called 'index' in our document root.

Other Web Resources

Let's add some styles to our project. Create a styles.css file and save it in your document root - the same folder that holds our index.php file. Let's say we want to turn our header text blue and print it in comic sans. Add this style rule to your CSS file.

h1 {
    color: blue;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

Next, just like with normal HTML, we would add a link to it in the <head> of our HTML in index.php: <head> <link href="styles.css" rel="stylesheet" type="text/css"> ...

Now the server will look for styles.css in the document root folder. But, let's say you want to keep all your css files together in a folder called 'css'. We would put the whole 'css' folder inside the document root folder, and the styles.css file in there. Then the link tag would look like this: <link href="css/styles.css" rel="stylesheet" type="text/css">

Alright, off to a good start. We are successfully using the server to open PHP files in our browser with CSS and HTML included.