HTML stands for HyperText Markup Language. While not a traditional programming language, it is the language that is used to create web pages. Typically a markup language is used to define the structure and display of content, HTML is no different.
To write HTML, one of the first things you will need is a plain text editor. Most operating systems come with this capability built-in (TextEdit on the Mac and Notepad on Windows). While these applications work fine, there are some benefits to using a programmer's text editor such as TextWrangler on the Mac or TextPad on Windows.
In particular, they have line numbering, syntax coloring and other features that will make it easier to work with.
HTML is a tag based language. This means that you define the structure of the content of a document using tags.
An example of a tag would be: <b>some text</b> which when rendered in a browser looks like this: some text.
Here are some tags that we'll start with:
Here is the source of an HTML example page:
<html> <!-- Start the HTML --> <head> <!-- Start the Head --> <title>This is a Web Page</title> <!-- The Title of the page, start and end tag with text in-between --> </head> <!-- End the Head, always with a "/" --> <body> <!-- Start the body --> This is where you would put the content of the page. <!-- This is a comment and won't display --> This will be on the same line as the above. To specify a line break, you use: <br /> <br /> <!-- The above text displays both a <br /> and has this funny code: <br /> That funny code allows us to display the special characters that are typically used to define a tag so that we can display them without the browser actually thinking they are the start and end of a tag. This symbol: < is written as < meaning "less than". This symbol: > is written as > --> This text will be a line down <br /><br /> <!-- Two line breaks --> <!-- Line break tags include the closing "/" as part of them, there isn't a </br> tag. --> <blink>This Text Probably Doesn't Blink</blink> </body> <!-- End the body --> </html> <!-- End the HTML -->See the page rendered in a browser
<img src="URLTOIMAGE" /> <img src="animage.jpg" /> or <img src="http://itp.nyu.edu/~sve204/animage.jpg" />
<div style="background: #00ff00; text-color: #ff0000;">This will be funky</div>
In order to make this an HTML or CSS document accessible to other's via the web, we need to have it served via a webserver. Some of you may have uploaded a file like this to a shared server running Apache.
In order to simply start serving static files, we simply need to write one line of code in the servi app, specifying where the files are:
serveFiles("directory_containing_the_files");Then under the "File" menu, select "Save Project As" to determine where all of the code will live. Now you can actually create the folder or directory and place your HTML file within it. After you have done that, you can launch the server by clicking the large run button. This will launch a built-in web browser (webkit) that will make a default request to the server you just created. Unless you called your file "index.html" it probably won't find it and you'll have to specify the filename in the browser.
Now this server that we just created is only running on our local machines. If we want other people to be able to access it, we probably need to put it on a server somewhere else (a publicly accessible computer on the internet). At the moment, the easiest way to run a Node.js server is to use a company such as Digital Ocean which provides Virtual Private Servers. Digital Ocean has a few things going for them, first is the cost, second is the fact that you can get one running with Node.js already installed very quickly.
In order to get started, you'll need to create an account with Digital Ocean.
After that, you can go ahead and create a "droplet". A "droplet" is Digital Ocean's term for a VPS. After coming up with a hostname, I would choose the smallest size, an appropriate region (one close to you, perhaps), and then in "Select image" go to the second tab, "Applications" and choose "node-v0.10.30 on Ubuntu 14.04" (the version numbers may change) and click "Create Droplet".
Digital Ocean will email you a password to use with the default "root" account. In order to do anything, you first have to login to the newly created server via the command line to change your password. To do so, open up Terminal on your Mac (or use PuTTY if you are on a PC). To connect on from the Terminal app on the Mac, you type the following:
ssh root@ip_address(The "ip_address" is in the email you get from Digital Ocean.) You will be prompted to enter the password (which is also from the email) and then prompted to enter it again to change it. Go ahead and change it to something you will remember but sufficiently complex that it will be difficult for hackers.
Once you have done that, we can move on although it is probably a good idea to keep the terminal open as we'll be using it again shortly.
Now we need to export our code out of the servi IDE. To do so, we choose "Export" from the file menu. This will create a couple of files in our project directory which should now contain something like the following: node_modules, package.json, our "public" folder, server-exported.js, and server.js. server-exported.js is the version of server.js that we can run on a public server without the servi IDE, just using the servi.js Node.js module.
In order to upload our exported project, we need to use a tool that will allow us to connect via SSH to transfer the files. I have found that Cyberduck is a good tool.
To connect, choose "SFTP (SSH File Transfer Protocol)", under "Server" use the IP address emailed to you by Digital Ocean. The "username" is "root" and the "password" is what you just created in Terminal.
Once you have connected, drag your entire Servi project directory in the window to upload it.
In order to run our server on our VPS we have to go back to the command line:
cd projectdirectoryname node server-exported.jsWe'll cover more command line related topics as we go but I highly recommend going through Learn Enough Unix for Your Resume when you have time.
Now you should be able to open a browser to view your site: http://ip_address:3000/
You may also want to read though this: Keep Node.js script running after logging out from shell
Of course, there is a lot more you can do with servi.js but this is where we'll leave it for now. If you want to look over some of the documentation, the best place is currently this wiki page: https://github.com/antiboredom/servi.js/wiki