If you've used a computer before, you will likely be familiar with Microsoft Windows 10 or Mac OS X. These are the two operating systems found on most new computers sold today. Linux is another such operating system, but it's unlikely that you've ever seen it before. Computer Scientists tend to like Linux for a number of reasons. For example, it provides us easy access to tools that allow us to work efficiently and fix problems quickly. You will be using a Linux distribution called Fedora 24 this week.
Let's get started!
The terminal is a program that we use every day. It allows us to enter text commands that instruct the computer to do something, like run a program. There are many, many, commands and you can even add your own.
Let's open the terminal now.
Now that we have a terminal open, we can start running commands. Let's try it out! Type the following command and press enter:
echo "Hello world!"
Hello world is one of our favorite things to say, we have spent countless hours writing programs that print this deep and meaningful phrase. Don't let the importance of this phrase scare you, though, feel free to experiment! See if you can get it to print something different.
Unfortunately, we can't create directories using the echo command, but we can create them if we use the mkdir command. You might even be able to see how mkdir got its name: make directory. Let's try it out by running the command below:
mkdir public_html
You've just created a directory named "public_html" in your current directory, which happens to be your home directory right now. You can check to see if it's really there by running the ls command. This lists the files in your current directory.
ls
It's very important that the directory you've just created is named "public_html", with the exact same characters and capitalization. This is because the web server is going to be looking for a directory with that exact name.
In the previous section, the current directory was listed, but where exactly is that? Luckily, there's a command to find out: pwd. This command prints the path to the directory you're currently in. Let's try it:
pwd
Now let's change the current directory to the public_html directory that you just created. That can be done using the cd command. You've noticed by now that we sometimes provide extra information after the command name. We call this extra information the command arguments. The cd command also takes an argument, which is the path to the directory that we want to change to. Try it out!
cd public_html/
What happens when you run pwd again?
Imagine what it would be like to be able to write your very own webpage. Guess what! This week, you're going to learn how! As you complete modules over the coming days, you will even have the opportunity to document your discoveries on your webpage.
Let's get started by downloading some of the files you'll need for your website. Since you're all aspiring computer scientists, let's download the files using the terminal (it's more fun too)!
wget http://macs.cs.colostate.edu/programs/webpage.zip
unzip webpage.zip
Before we can continue, we need to set the file permissions. Right now, the files can only be accessed by you, and others viewing your webpage would see an error message. We can give them permission to view your webpage by running the following command:
chmod -R g+rX,o+rX ~/public_html
The command adds read and list permissions to all of the files inside your public_html directory. You will need to re-run this command whenever you add new files.
Finally, open your webpage in Firefox. You can start firefox with the following steps:
The web address of your webpage is below.
Replace USERNAME with your macs# account that you used to login.
http://www.cs.colostate.edu/~USERNAME/
If you run the ls command, you'll notice that there is a file named index.html. This is the file that contains your webpage, so let's open it in a text editor.
gedit index.html&
Websites are written in a language called HTML, which stands for HyperText Mark-up Language. HTML uses tags to let the web browser know how the webpage should look. The following is an example of an HTML tag.
<tag>
HTML elements can have a <start> tag and an </end> tag, with contents in between. The contents can be text or even other HTML tags! Different tags do different things.
<b>I'm bold text! I like to stand out.</b>
I'm not bold because I'm not in between "b" tags.
Look at your website code and see if you can find the following h1 element.
Modify the contents and see what changed by reloading your webpage in Firefox.
<h1 style="text-align:center">My Website</h1>
HTML elements can also have attributes. These are name-value pairs that often change how the element is displayed in the browser. Attributes look like the following:
<tag name="value">
Find the following img tag in your index.html file. You'll notice that it has several attributes.
<img style="float:left; margin-right:20px;"
src="csu-logo.jpg" width="15">
Try to make the following changes to the img tag:
Now that you know the basics of HTML, try making some changes to your index.html file. After you make a change, reload the webpage to see what happened!