Web

Development
Quick Guides for Masterminds

J.D Gauchat
www.jdgauchat.com

Cover Illustration by Patrice Garden
www.smartcreativz.com

Quick Guides for Masterminds
Copyright © 2018 by John D Gauchat
All Rights Reserved

No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information
storage or retrieval system without the prior written permission of the copyright owner.

Companies, services, or product names used in this eBook are for identification
purposes only. All trademarks and registered trademarks are the property of their
respective owners.

The content of this guide is a collection of excerpts from the book HTML5 for
Masterminds. For more information, visit www.formasterminds.com.

The information in this eBook is distributed on an "as is" basis, without warranty.
Although every precaution has been taken in the preparation of this work, neither the
author nor the publisher shall have any liability to any person or entity with respect to
any loss or damage caused or alleged to be caused directly or indirectly by the
information contained in this work.

The source code for this eBook is available at www.formasterminds.com

Copyright Registration Number: 1140725

1st Edition 2018

What is Inside

This guide will teach you the fundamentals of web development. After reading this
guide, you will know the basics of every technology involved in web development,
including programming languages, server configuration, and web hosting.

About this Guide

This guide is a collection of excerpts from the book HTML5 for Masterminds. The
information included in this guide will help you understand a particular aspect of web
development, but it will not teach you everything you need to know to develop a
website or a web application. If you need a complete course on web development, read
our book HTML5 for Masterminds. For more information, visit our website at
www.formasterminds.com.

What Do You Need

This guide assumes that you have worked with computers before, you know how to
install software, and that you have a basic knowledge about the Internet and web
browsing.

Recommendations

Introduction to HTML
Quick Guides for Masterminds

This guide will teach you how to create your website's
documents with HTML. After reading this guide, you will
know how to work with HTML elements, how to define a
document's structure, and how to organize its content.

More Information

Introduction to CSS
Quick Guides for Masterminds

This guide will teach you how to program CSS Style Sheets to
style your documents. After reading this guide, you will know
how to style HTML elements, how to modify the styles
dynamically, and how to use CSS to design your website or
web application.


More Information

Introduction to JavaScript
Quick Guides for Masterminds

This guide will teach you how to program with JavaScript.
After reading this guide, you will know how to create a
program in JavaScript, how to define functions and objects,
and how to read and modify an HTML document dynamically.

More Information

More Guides Available at www.formasterminds.com

Table of Contents

WEB DEVELOPMENT
Websites
Files
Domains and URLs
Hyperlinks
Absolute and Relative URLs
Languages
HTML
CSS
JavaScript
Server-Side Languages
Tools
Editors
Domain Registration
Web Hosting
FTP Software
MAMP

Web Development

Websites

Websites are files that users download with their browsers from remote computers.
When users want to access a website, they tell the browser where it is located, and the
program downloads the website's files, processes their content, and show it on the
screen.
Because websites are publicly accessible and the Internet is a global network, these
files must be available all the time. For this reason, websites are not stored in personal
computers but in specialized computers designed to deliver their files. The computer
that stores the website's files and data is called Server and the computer that accesses
the information is called Client, as shown in Figure 1.

Figure 1: Clients and Servers

Servers are very similar to personal computers, but they are connected to the
network all the time and run software that allows them to respond to users' requests.
The most widely adopted programs for servers are Apache, for Linux systems, and IIS
(Internet Information Server), created by Microsoft for Windows systems. Among other
processes, these programs are responsible for establishing the connection between
client and server, controlling user access, managing files, and dispatching the
documents to the clients.

Files

Websites are composed of multiple documents that the browser downloads upon user
request. The documents that make up a website are called pages, and the process of
opening new pages is called navigation (the user navigates through the pages of a
website). To develop a website, we have to create a file for each page we want the
website to contain. Along with these files, we also have to include the files with the
images and any other media we want to show inside the pages (images and other media

are stored in separate files). Figure 2 illustrates what the files and folders of a simple
website may look like once they are uploaded to the server.

Figure 2: Website's files

The example in Figure 2 includes two folders called images and resources and three
files called contact.html, index.html, and news.html. The folders were created to store
the images we want to show inside the pages and other resources, such as the files
containing the CSS and JavaScript codes, as we will see later. On the other hand, the files
in our example represent three pages we want our website to contain. The index.html
file contains the code and information corresponding to the initial page (the page the
user sees when enters our website for the first time), the contact.html file contains the
code necessary to present a form that the user can fill to send us a message, and the
news.html file contains the code necessary to display the news we want to share with
our users. When a user accesses our website for the first time, the browser downloads
the index.html file and shows its content on the window. If the user performs an action
to see the news provided by our website, the browser downloads the news.html file and
replaces the content of the index.html with the content of this new file. Every time the
user wants to access a new page, the browser has to download the corresponding file
from the server, process it, and show its content on the screen.
The files of a website are the same type of files we may find on our personal
computer. They have a custom name and an extension that reflects the language that
was used to program their content (in our example, the files have the .html extension
because they were programmed in HTML). Although we can assign any name we want
to these files, the file for the initial page have some requirements. Servers like Apache,
for example, designate files by default in case the user does not specify any. The most
commonly used name is index. If a user accesses a server without specifying a file, the
server looks for a file with the name index and sends that file back to the client. For this
reason, the index file is the entry point to our website and we always have to include it.

IMPORTANT: Servers are flexible regarding file names, but there are a few rules
you should follow to make sure your files are accessible. Avoid using spaces. If you
need to separate words, use the underscore (_) instead. Also, some characters
perform specific functions on the Web, so it is better to avoid special characters such
as ?, %, #, /, and use only lowercase letters and numbers.

The Basics: Although index is the most common name, it is not the only one we can
assign to the file by default. Some servers designate different names like home or

 default. They also include different extensions. For example, if instead of
programming our documents directly in the HTML language we use a scripting
language on the server like PHP to generate the document dynamically, we have to
name our index file index.php and the server considers this one to be the file by
default. The server has a list of possible files to look for and keeps looking until it
finds one that matches any on the list. For instance, Apache first looks for a file with
the name index and the extension .html, and then, if it cannot find it, looks for a file
with the name index and the extension .php.

Domains and URLs

Servers are identified by a value called IP (Internet Protocol). This IP is unique to each
computer, and therefore it works like an address to find the location of a computer
inside a network. When a browser has to access a server to retrieve the document
requested by the user, it searches for the server through its IP address and then asks the
server to return the document.
IP addresses are composed of integer numbers between 0 and 255 separated by a
period, or numbers and letters separated by colons, depending on the version (IPv4 or
IPv6). For example, the address 216.58.198.100 corresponds to a server where the
Google's website is stored. If we write this IP in the browser's navigation bar, the
Google's initial page is downloaded and shown on the screen.
In theory, we could access any server using its IP address, but these values are cryptic
and difficult to remember. For this reason, a system that assigns distinctive names to
each server was implemented. These are simple names, called domains, that a human
can understand and remember, such as google or yahoo, with an extension that
determines the purpose of the website, such as .com (commercial) or .org
(organization). When the user asks the browser to access the website with the domain
www.google.com, the browser accesses a server called DNS that contains a list of
domains and their respective IP addresses. The server finds the IP 216.58.198.100
associated to the www.google.com domain, returns it to the browser, and then the
browser uses this IP address to access the Google's website. Because websites' IP
addresses are always associated to domains, we do not have to remember the address
of the server to access the website's documents, all we have to do is to remember the
domain and the browser takes care of finding the server and downloading the files for
us.
Websites are composed of several files. To indicate which file we want to access, its
name must be attached to the domain. This construction is called URL and includes
three parts, as described in Figure 3.

 Figure 3: URLs

The first part of a URL is a string that represents the communication protocol we
want to use to access the resource (the protocol created for the Web is called HTTP),
the next component is the website's domain, and the last component is the name of the
resource we want to download (this could be a file, as in our example, or a path that
includes the name of the directory where the file is located (e.g.,
http://www.example.com/images/mylogo.jpg). The URL in our example asks the
browser to use the protocol HTTP to access the file contact.html, located at the server
identified with the domain www.example.com.
URLs are used to locate every document on the website and therefore they are
required for navigation. If no file is specified, the server returns the file by default, but
from that point on, every time the user performs an action to open a different page, the
browser must include in the URL the name of the file that corresponds to the requested
page.

IMPORTANT: Once you have a domain, you can create subdomains. Subdomains
are direct links to folders, and therefore they allow the construction of multiple
websites in the same account. Subdomains are constructed with the name of the
folder plus the domain connected with dot notation. For example, if you have the
domain www.example.com and then create a subdomain for one of its folders called
resources, you will be able to access the folder directly from the browser by typing
the URL http://resources.example.com.

The Basics: There are different protocols available that computers use to
communicate with each other and transfer resources and data. The HTTP protocol
(HyperText Transfer Protocol) is the communication protocol used to access web
documents. We always have to include the HTTP prefix in the URL when the resource
we are trying to access belongs to a website, but in practice, this is not necessary
because browsers do it automatically for us. There is another version of the protocol
called HTTPS. The S indicates that the connection is encrypted by TLS or SSL
encryption protocols. Encryption is not necessary for small websites, but it is
recommended for large websites that handle sensitive information.

Hyperlinks

In theory, we can access every document on the website by writing its URL in the
browser's navigation bar. For example, if we want to access the initial page of the For
Masterminds website, we can insert the URL
http://www.formasterminds.com/index.php (since index.php is the file by default, the
file's name may be omitted), or we can insert the URL
http://www.formasterminds.com/contact.php to open the contact page to send a

message to the website's owner. Although using this method we can access every file on
the website, it is not practical. First, users do not know the names developers have
chosen for the files, and therefore they are limited to the names they can guess or only
the initial page returned by default. And second, websites may be composed of dozens
or even thousands of pages (some websites have millions) and most documents would
be impossible to find.
The solution was found in hyperlinks. Hyperlinks, or links for short, are references to
documents inside the pages of a website. By incorporating these links, a page may
contain references to other pages inside. If the user clicks with the mouse on a link, the
browser follows the reference and the document indicated by the reference's URL is
opened. Because of these connections between pages, users can navigate the website
and access all of its documents by clicking on their links.

The Basics: Links are the feature that turns a group of files into a website. To create
a website, you have to program the documents for each page and include links on
each one of them to set a path the user can follow to reach every page available.

Absolute and Relative URLs

Hyperlinks are processed by the browser before they are used to access a document.
For this reason, hyperlinks may be defined with Absolute or Relative URLs. Absolute
URLs are URLs that include all the information necessary to access the resource (see
Figure 3), while Relative URLs are URLs that only declare the part of the path the
browser has to add to the current URL to access the resource. For example, if we have a
hyperlink inside a document that is referencing an image inside the images folder, we
can create the link with the URL http://www.example.com/images/myimage.png, but
we also have the option to declare it as "images/myimage.png" and the browser will
take care of adding this path to the current URL to get the complete URL and download
the image.
Relative URLs not only determine a path down but also up the hierarchy. For
example, if we have a document inside the resources folder of our example in Figure 2
and we want to access a document in the root folder, we can create a Relative URL using
the characters ../ at the beginning of the path. If the document we want to access is
news.html, the Relative URL will be ../news.html. The double dots .. tell the browser
that the document we want to access is inside the parent folder of the current folder
(resources, in our example).

Languages

HTML5 provides three features, structure, style, and functionality, by integrating three
independent programming languages, HTML, CSS, and JavaScript. These languages
provide sets of instructions that browsers can interpret to process and show documents.

To create our documents, we have to learn all the instructions included in these
languages and how to organize them.

HTML

HTML (HyperText Markup Language) is a language composed of a set of tags defined by
a keyword surrounded by angle brackets. The angle brackets delimit the tag, and the
keyword defines the type of content the tag represents. For example, the <html> tag
indicates that its content is HTML code. Some of these tags are declared individually
(e.g., <br>) and others in pairs, with an opening and a closing tag, as in <html></html>
(notice that the closing tag is identified with a backslash). Opening and single tags may
also include attributes to provide additional information about their content (e.g., <html
lang="en">). Single tags and the combination of opening and closing tags are called
elements. Elements composed of a single tag are used to modify the content around
them or to load additional content, while elements that include an opening and a
closing tag are used to delimit content, as illustrated in Figure 4.

Figure 4: HTML element

Multiple elements are combined to define an HTML document. They are listed in
sequence from top to bottom and may contain other elements inside. For example, the
<html> element shown in Figure 4 declares that its content must be interpreted as
HTML code. Therefore, the rest of the elements that describe the document's content
are declared between the <html> and </html> tags, and in turn, they may also include
other elements inside. The following example shows a simple HTML document with all
the elements necessary to describe the document's basic structure and display the
message HELLO WORLD! on the screen.

Listing 1: Creating an HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Document</title>
</head>
<body>
<p>HELLO WORLD!</p>
</body>

</html>

In Listing 1, we have a simple code but an already complex structure. In the first line,
there is a single tag declaring the type of the document (<!DOCTYPE html>) followed by
the opening tag <html lang="en">. Between the <html> and </html> tags there are
other elements representing the head and body of the document (<head> and <body>),
which in turn enclose more elements with their own content (<title> and <p>),
demonstrating how an HTML document is built. Elements are listed one after another
and in between other elements, constructing a tree-like structure, with the <html>
element as its root.

The Basics: In general, every element can be nested, become a container, or be
contained by other elements. Special structural elements like <html>, <head> and
<body> have a specific place in an HTML document, but the rest are flexible.

As we mentioned before, individual and opening tags can also include attributes. For
instance, the opening <html> tag declared in Listing 1 is composed not only of the
keyword html and angle brackets but also the string lang="en". This is an attribute with
a value. The name of the attribute is lang, and the value en is assigned to the attribute
using the = character. Attributes provide additional information about the element and
its content. In this case, the attribute lang declares the human language of the
document (en for English).

The Basics: Attributes are always declared inside the opening tag (or individual
tags) and may have a name/value structure, like the lang attribute of the <html> tag,
or represent a single value, like the html attribute of the <!DOCTYPE> tag.

CSS

CSS (Cascading Style Sheets) is the language used to define styles for HTML elements,
such as the size, the color, backgrounds, borders, etc. Although by default each browser
grants styles to most elements, those styles are usually far from what we want for our
websites. To declare custom styles, CSS uses properties and values. This construction is
called declaration and the syntax includes a colon after the name of the property and a
semicolon to close the line.

Figure 5: CSS property

 In the example in Figure 5, the value #FF0000 is assigned to the color property. If this
property is applied later to an HTML element, the content of that element will be shown
in color red (the value #FF0000 represents the color red).
Properties can be grouped together using braces. A group of one or more properties
enclosed by braces is called rule and it is identified by a name called selector.

Listing 2: Declaring CSS rules
body {
width: 100%;
margin: 0px;
background-color: #FF0000;
}

Listing 2 declares a rule with three properties: width, margin and background-color.
This rule is identified with the name body, which means that the properties are going to
be applied to the <body> element. If we include this rule in a document, the content of
the document will extend to the edges of the browser window and will have a red
background.

JavaScript

Unlike HTML and CSS, JavaScript is a programming language. To be fair, they all may be
considered programming languages, but in practice, there are some differences in the
way they provide the instructions to the browser. HTML is like a set of markers that
browsers interpret to organize information, CSS may be considered as a list of styles
that help the browser prepare the document to be displayed on the screen (although
the latest specification has turned it into a more dynamic tool), but JavaScript is a
scripting language, comparable to any full programming language such as C++ or Java.
JavaScript is different from the other two languages because it can perform custom
tasks, from storing values to calculating complex algorithms, including the capacity to
interact with the elements in the document and process their content.
As well as HTML and CSS, JavaScript is embedded in browsers and therefore it is
available for every document, but we have to indicate to the browser that the code is
written in this language. To declare JavaScript code inside a document, HTML offers the
<script> element. The following example illustrates what this type of code looks like.

Listing 3: Declaring JavaScript code
<script>
function changeColor() {
document.body.style.backgroundColor = "#0000FF";
}
document.addEventListener("click", changeColor);
</script>


The code in Listing 3 changes the background color of the <body> element to blue
when the user clicks on the document.

Server-Side Languages

Codes programmed in HTML, CSS, and JavaScript are executed by the browser in the
user’s computer (the client). This means that after the website’s files are uploaded to
the server, they remain the same until they are downloaded into a personal computer
and their codes are executed. Although this allows the creation of useful and interactive
websites, there are times when we need to process information in the server before to
send it to the user. The content produced from this process is called dynamic content,
and it is generated with code that is executed in the server and programmed in
languages designed specifically for this purpose (server-side languages). When the
browser requests a file containing this type of code, the server first executes the code
and then sends the result to the user. These codes are used not only to generate
content and documents in real time but also to process information received from the
browser, store user's data on the server, manage users accounts, etc.
There are several languages available to create code that runs on the server, with the
most popular being PHP, Ruby, and Python. The following example shows what PHP
code looks like.

Listing 4: Declaring server-side code in PHP
<?php
$name = $_GET['myname'];
print('Your name is: '.$name);
?>

The code in Listing 4 receives a value from the browser, stores that value in memory,
and creates a message with it. When this code is executed, a new document is produced
with the final message, the file is sent to the client, and the browser shows its content
on the screen.

Tools

Creating a website involves several steps. We have to program the documents using
HTML, create the files with the CSS styles and JavaScript codes, set up the server that
will make our website available to the public, and upload the files to it. Fortunately,
there are several tools available to help us with these tasks. They are very easy to use,
and most of them are free.

Editors

HTML documents, as well as CSS and JavaScript files, are text files, so we can use any
text editor included in our computer to create them, like the Windows’ Notepad or the
Text Edit application in Apple’s computers, but there are special text editors designed
for programmers and web developers with features that can simplify our work. They do
things like highlighting the text with different colors to identify each part of the code, or
listing the files of a project on the side to make it easy for us to work with multiple
documents at the same time. The following is a list of the most popular editors and IDEs
(Integrated Development Environments) available for PCs and Apple computers.

• Atom (www.atom.io) is a free editor, simple to use and highly customizable
(recommended).
• Brackets (www.brackets.io) is a free editor made by Adobe.
• KompoZer (www.kompozer.net) is a free editor with a preview panel that makes
it easy to find specific parts of the document to modify.
• Aptana (www.aptana.com) is a free IDE with tools to easily manage files and
entire projects.
• NetBeans (www.netbeans.org) is a free IDE with tools to manage projects and
files.
• Sublime (www.sublimetext.com) is a commercial editor with a free version for
evaluation.
• Komodo (www.activestate.com/komodo-ide) is a commercial IDE that can
handle a very extensive list of programming languages.
• Dreamweaver (www.adobe.com/products/dreamweaver.html) is a commercial
IDE with WYSIWYG technology built in (What You See Is What You Get) that
allows us to see the results of the execution of our code in real time.

Working with an editor is simple, we have to create a folder on our hard drive to
store the files for our website, open the editor, and then create inside this folder all the
files and additional folders we need for our project. Figure 6 shows what the Atom
editor looks like when it is opened for the first time.

Figure 6: Atom editor with an empty file


This editor has an option in the File menu at the top of the screen to open a project.
The option is shown in Figure 7, number 1.

Figure 7: Add Project Folder option

If we click on this option and then select the folder created for our project, the editor
opens a new panel on the left with the list of files inside the folder. Figure 8, below,
shows a folder with the name Test created to contain the files of the example in Figure
2.

Figure 8: Project's files

Do It Yourself: Visit www.atom.io to download the Atom editor. Once the editor is
installed on your computer, create a new folder on your hard drive to store your
website. Open Atom, go to the File menu and click the option Add Project Folder
(Figure 7, number 1). Select the folder you have just created. Go to the File menu and
click the option New File. Copy the code in Listing 1 inside and save the file with the
name index.html. When the file is selected from the left panel, you should see
something similar to Figure 8.

Domain Registration

Once our website is ready for the public, we have to register the domain that users are
going to type on their browsers to access it. As we already mentioned, a domain is a
custom name with an extension that determines the purpose of the website. We have
several options available for the extension, from those with commercial purposes, such
as .com or .biz. to non-profit or personal, such as .org, .net or .info, not to mention
regional extensions that include an additional value to determine the location of the
website, such as .co.uk for websites in the United Kingdom, or.eu for websites in the
European Union.
To get the domain for our website, we have to open an account with a registrar and
order it. Depending on the type of domain, there is usually an annual fee, but the
process is relatively easy, and there are several companies available that can take care
of everything for us. The most popular is GoDaddy, at www.godaddy.com, but every
company that offers services for web developers usually includes the possibility to
register a domain. The registration process is simple; we have to decide the name and
the extension we want for the domain, perform a search to make sure that it is
available, and then place the order (the companies mentioned above provide all the
tools necessary for this purpose).
After the domain is registered, the system asks for the Nameservers we want to
associate with it. These are strings composed of a domain and a prefix, usually NS1 and
NS2, that determine the location of our website (Nameservers are provided by the
server where our website is stored). If we do not have the Nameservers yet, we can use
those provided by the company and change them later.

IMPORTANT: The company that registers your domain assigns Nameservers that
they use to provide a temporary destination (also known as Parking). You can change
these values after your server is ready. Some companies offer domain registration
along with server rental, and therefore they can configure the domain for you if you
use their servers.

Web Hosting

Setting up and maintaining a server is difficult and demands knowledge that not every
web developer has. For this reason, companies offer a service called Web Hosting that
allows anyone to rent a server configured and ready to store and run a website or
multiple websites.
There are different types of Web Hosting available, from those that allow multiple
websites to run on one single server (Shared Hosting) to more professional options that
reserve an entire server for a website (Dedicated Hosting) or distribute a large website
in multiple servers (Cloud Hosting), including various other options in between.
The advantage of having a hosting account is that they all offer a control panel with
options to create and configure our website. The following are common options that we
are going to find in almost every hosting service.


• File Manager is a web-based tool to manage the website's files. With this tool,
we can upload, download, edit or delete files on the server from the browser,
without using any external software.
• FTP Accounts is a service that allows us to manage the accounts we use to
connect to the server via FTP. FTP (File Transfer Protocol) is a communication
protocol designed to transfer files from one computer to another.
• MySQL Databases is a service that allows us to create databases for our website.
• phpMyAdmin is an application programmed in PHP that we can use to manage
the databases created for our website.
• Email Accounts is a service that allows us to create email accounts with our
website's domain (e.g., info@mydomain.com).

The most popular control panel in the market for websites is called cPanel. Figure 9
shows the design and some of the options offered by this panel.

Figure 9: Options offered by cPanel

The cost of a hosting account can go from a few dollars for a shared account to
hundreds of dollars per month for a dedicated server. Once we get an account, the
company sends us an email with the information we need to access the control panel
and configure the server. They usually create all the basic accounts we need, including
an FTP account to upload the files, as we will see next.

The Basics: There are hosting services available for free that you can use to
practice, but they include ads or impose restrictions that impede the development of
professional websites. It is recommendable to start from a shared hosting account
that may cost less than 5 dollars per month to learn how a professional web hosting
works and see all the options they have to offer. Multiple companies provide this

 kind of hosting, with the most popular being www.godaddy.com and
www.hostgator.com.

FTP Software

As we just mentioned, a web hosting account usually offers a service to manage the
website's files from the browser. This is a web page we can access from the control
panel to upload, download and edit the files on the server. It is a useful tool but only
practical for performing small changes or uploading a few files. The tool takes advantage
of a system integrated with the browser that works with a protocol called FTP (File
Transfer Protocol) to transfer files from one computer to another on a network.
Browsers have this system built in because they need it to let users download files, but
because their purpose is to download and display websites on the screen, they offer a
poor experience when it comes to managing those files. For this reason, professional
developers do not use the browser to upload files to the server, but rather programs
specifically designed to transfer files from client to server using the FTP protocol.
There are several FTP programs available, including free and commercial. The most
popular free software is called Filezilla, available at www.filezilla-project.org. The
program offers several panels with information about the computers that participate in
the connection and the connection itself, including two panels side by side listing the
local and remote files to let us transfer the files by dragging them from one panel to
another.

Figure 10: Filezilla's interface

When we open a hosting account, the system automatically creates an FTP account
for our website that includes the user and password required to connect to the server
via FTP (if the system does not set up the account for us, we can do it ourselves from the
FTP Accounts option in the control panel). The values we need to perform the
connection are the host (IP or domain), the username and password, and the port
assigned by the server to connect via FTP (by default, 21). Filezilla offers two ways to
insert this information: a bar at the top with fields for a quick connection (Figure 11,
number 2), and a button to store multiple connections for frequent access (Figure 11,
number 1).



Figure 11: Connection's setup

If we press the button to store or access previously stored connections (number 1),
Filezilla opens a window to manage the list of connections available and offer additional
options for configuration. There are buttons to create, rename, and delete a connection
(New Site, Rename, Delete), fields where we can select the protocol we want to use
(FTP for a normal connection or SFTP for a secured connection), the encryption used to
encode the files, and the type of account required (Anonymous for anonymous
connections or Normal for a connection that requires username and password). The
window also includes additional panels for advanced configuration, as shown in Figure
12.

Figure 12: Connection's manager

Normally, to establish the connection we have to insert the value of the host (the IP
or domain of our website), select the type of account as Normal, insert our user and
password, and leave the rest of the values by default. Once the computers are
connected, Filezilla displays the list of files on the interface. On the left side are the files
contained in the selected folder (we can select any folder on our hard drive we want),
and on the right side is the list of files and folders available in the root directory of our
server, as shown in Figure 13.


Figure 13: Folders in the root directory

When a hosting account is set up, the system creates several folders and files to
manage the information required to provide the service (store emails, monitor users'
activity, etc.) The folder where the files for our website are stored is called public_html.
After this folder is opened, we can start uploading our files by dragging them from the
panel on the left to the panel on the right (see Figure 10).

MAMP

HTML documents may be opened on a personal computer. For example, if we open the
index.html file created from the code in Listing 1, the browser window shows the text
HELLO WORLD!, as illustrated in Figure 14 below (the rest of the tags in this document
are structural and therefore do not produce any visible result).

Figure 14: HTML document in the browser

The Basics: To open a file in the browser, you can select the Open File option from
the browser's menu, or double-click the file from the File Explorer (or Finder on
Apple computers) and the system takes care of opening the browser and loading the
document.

Testing an entire website in a personal computer is not always possible. Some
JavaScript codes only work when they are downloaded from a server, and server-side
technologies like PHP require a server to run. There are two options available to work
with these types of documents: we can get a hosting account right away to upload our
website and use it for testing, or we can install a server on our own computer. The last

option will not make our website visible to the users but allows us to test it and
experiment with the code before uploading the final version to a real server.
There are several packages available that install all the software we need to turn our
personal computer into a server. These packages include an Apache server (to deliver
web files through the HTTP protocol), a PHP server (to process PHP code), and a MySQL
server (to run a MySQL database we can use to store data on the server). The one we
recommend is called MAMP. This is a free package, available for PCs and Apple
computers, that we can download from www.mamp.info (there is also a more
advanced commercial version called MAMP PRO).
MAMP is very simple to use. Once downloaded and installed, we just have to open it
to get the server running, as shown in Figure 15.

Figure 15: MAMP's main screen

By default, MAMP creates a folder inside its own folder called htdocs where we are
supposed to store the files of our website, but we can assign a different folder from the
Preferences option if we want. The option opens a new window with several tabs for
configuration. The Web Server tab shows the current folder used by the Apache server
and offers a button to select a different one, as illustrated in figure 16, number 1.

Figure 16: Apache server's folder

Once we select the folder where our website is located, we can access its files from
the browser. Apache creates a special domain called localhost to reference the server,
and therefore our website is accessible from the URL http://localhost/. If we want to

access a specific file, we have to add its name at the end of the URL, as we do with
domains (e.g., http://localhost/contact.html).

Do It Yourself: Go to www.mamp.info and download the free version of MAMP
for your system (Windows or MacOS). Install the package and open the application.
Select Preferences (Figure 15) and replace the htdocs folder with the folder you
created for your website in the previous example (Figure 8). Open the browser and
insert the URL http://localhost/. If you created the index.html file as suggested
before, you should see the text HELLO WORLD! on the window (Figure 14).

IMPORTANT: Apple systems come with their own version of the Apache server,
and therefore MAMP has to connect Apache to a different port to avoid conflicts. For
this reason, on a Mac computer, you have to specify the port 8888 when accessing
the localhost, as in http://localhost:8888. You can change the port from MAMP
settings to avoid this. Go to Preferences, select the Ports tab, and click on the button
called Set Web & MySQL ports.

 For Masterminds
Book Series
for more Books and Quick Guides visit
www.formasterminds.com