Building Your Website - Turning Your BeagleBone into a Desktop Computer - BeagleBone For Dummies (2015)

BeagleBone For Dummies (2015)

Part V

Turning Your BeagleBone into a Desktop Computer

Chapter 13

Building Your Website

In This Chapter

Understanding the terminology

Preparing your tools

Designing your first website

Customizing your website’s appearance

Making your website available to the world

Not so long ago, only a few people could have the luxury of having a website. Coding for a website was an obscure skill that not many people had the chance to develop. Now the game has changed, and people regularly build their own websites. Even though building your own website may seem like a daunting feat, this chapter shows you how to do it.

This chapter walks you through building a two-page website, with practical examples that you can follow along and test in real time. The examples involve a website featuring electronics projects with the BeagleBone; nevertheless, if you have a personal interest such as photography, painting, gaming, writing, or pretty much anything that you want to share with the Internet, this is the perfect chance for you to do so.

Chapter 15 is all about building a web server hosted with the BeagleBone, which you can use to control electronic devices through the web. Prior knowledge of HTML (which is what this chapter is about) is required to complete the project in Chapter 15.

Introducing HTML, CSS, and JavaScript

A good web page requires three things:

· HTML (Hypertext Markup Language) is a markup language used to create web pages. Web browsers were created to read HTML files. A web browser uses the HTML tags to interpret where the content goes on the page.

HTML is a markup language, not a programming language. A markup language turns your text into an image, a link, or a list.

· CSS (Cascading Style Sheets) describe the appearance of your HTML documents.

Cascading Style Sheets can format all elements or just one element when more than one style is applied (hence, the name Cascading).

· JavaScript is a programming language that’s most commonly used on websites. If you’ve ever visited a website that does really cool things through interactive buttons, slideshow animations, alert messages, or pop-up windows, some sort of JavaScript was certainly working on the back end. JavaScript is used in web browsers and allows interactions with clients without talking to the server.

Lately, the trend has been to use JavaScript in many applications other than web design, such as BoneScript introduced in Chapter 7.

Getting Started

You can use two launch pads to get started in web design with your BeagleBone. You can either use your BeagleBone Black as a desktop computer or control your BeagleBone remotely through secure shell (SSH).

Using a BeagleBone Black as a desktop computer

One way to work through this chapter is to turn your BeagleBone Black into a desktop computer, complete with peripherals, and use Leafpad (the default text editor) or any other text editor to write HTML or CSS code. Chapter 12 explains how to turn your BeagleBone Black into a desktop computer.

You can get to Leafpad by using Applications menu⇒Application⇒Leafpad.

After you write your HTML files, you can open them with the Chromium web browser, which is installed by default on the BeagleBone Black. Choose Applications menu⇒Internet⇒Chromium.

Controlling the BeagleBone remotely through SSH

If you don’t want to set up your BeagleBone Black as a desktop computer, or if you have an Original BeagleBone, you can use the Cloud9 integrated development environment (IDE) to code your web pages. (Read Chapter 7 for more about the Cloud9 IDE.) Cloud9 is one of the best ways to write code for your BeagleBone in any language, including HTML and CSS.

Your website will be locally hosted, which means that it will be a file on your computer, not something you can access through the Internet. When you’re working through SSH, the .html file you create is saved on your BeagleBone’s file system. Because you aren’t working in in a graphical environment, you can’t promptly see the fruits of your labor. Fortunately, Cloud9 IDE offers a solution: Simply right-click your .html file and choose Preview from the shortcut menu.

Creating Your First Website

In this section, you create your first website. The example website is about electronics and programming; naturally, you can make your website about whatever you want.

The book’s website at www.dummies.com/cheatsheet/beaglebone includes downloads for the two web pages, the style-sheet file, and the images that are the final result of this chapter.

Organizing your files

When you’re working, it’s always a good idea to keep everything well organized, especially if you have several files for the same project. Start by creating a new folder on your desktop or from the cloud9 IDE, and name it myWebsite. Inside the myWebsite folder, create another folder called images (see Figure 13-1).

Opening a new file

Open a new file in a text editor such as Leafpad or in the Cloud9 IDE. Choose File⇒Save, and save the new file as index.html.

Your new file’s name should end with the .html extension. Otherwise, your web browser won’t recognize the file, and it won’t open properly.

Figure 13-1: The myWebsite folder on a BeagleBone Black.

Writing the first line

The first line of any HTML document is always the following:

<!DOCTYPE html>

!DOCTYPE isn’t an HTML-specific tag. It’s simply an instruction that tells your web browser that it’s reading an HTML file and which version of HTML you’re using.

Even though !DOCTYPE isn’t case sensitive, most IDEs — such as Cloud9 — will only give a special color to it if you type it in capital letters.

Structuring an HTML document

The overall structure of an HTML document looks like the following snippet of code. Start by typing the following code in your text editor:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

The HTML that defines the structure of your page goes between the <html> and </html> tags.

Because most web pages require the preceding snippet of code, you can use that template every time you start writing a new web page.

An HTML document is divided into two main parts:

· Header: The <head> and </head> tags mark the start and end of the header. You insert the title of the web page into the <head> tag.

· Body: The <body> and </body> tags mark the start and end of the body. Everything that goes inside those tags is the visible page content.

HTML tags aren’t case sensitive, but we recommend that you use lowercase.

Formatting Your HTML Content

This chapter highlights the most important HTML tags. Don’t worry; you don’t need to memorize them. You can always use this book as a reference when you’re creating a website.

Adding a title

The title goes inside the <head> and </head> tags. The title is exactly what it sounds like: the title of your document, which shows up in your web browser’s title bar.

Here’s how you can add the <title> tag to your code. The result is shown in Figure 13-2.

Figure 13-2: Chromium web browser displaying the web page’s title on the tab.

<!DOCTYPE html>
<html>
<head>
<title> Electronics Projects with BeagleBone</title>
</head>
<body>
</body>
</html>

Indentation! Indentation! Indentation! Web design uses a lot of tags that go inside tags that go inside tags. Even though using indentation is not strictly necessary, it’s extremely easy to get lost if you don’t use this technique.

Adding headings

Now you can start adding visible content to the web page, starting with a heading. Different levels of HTML headings are defined with the <h1> through <h6> tags (h1 stands for heading number one), and the heading tags always go inside the <body> tags. Type the following code:

<!DOCTYPE html>
<html>
<head>
<title>Electronics Projects with BeagleBone</title>
</head>
<body>
<h1>Electronics Projects</h1>
<h2>Home</h2>
</body>
</html>

Most web browsers help you by going through your errors and trying to fill in some blanks. For example, a closing tag such as </h1> could be considered optional, and if you try the following example, your web page works as expected. At some point, however, you may run into a web browser that doesn’t fill in the blanks, so you should always use end tags to prevent unexpected errors (and to keep yourself organized, too).

<!DOCTYPE html>
<html>
<body>
<h1>This is a heading 1
<h2>This is a heading 2
</body>
</html>

The purpose of heading tags is to structure your document with the relevant headings so search engines can index your website and find relevant content with those headings. Even though you can adjust the font size of your text with the heading tags, that’s not what you should use them for. You should use CSS to make your website pretty, as described later in this chapter in the “Changing text appearance” section.

Inserting paragraphs

To mark text as a paragraph, you use the <p> tag. Most of your readable content goes inside a paragraph tag. Add a paragraph tag to your index.html file like so:

<!DOCTYPE html>
<html>
<head>
<title>Electronics Projects with BeagleBone</title>
</head>
<body>
<h1>Electronics Projects</h1>
<h2>Home</h2>
<p>My first web page.</p>
</body>
</html>

Viewing your web page

Save your index.html file; then right-click it and choose Preview from the shortcut menu, or open it in Chromium. You see something similar to Figure 13-3.

Figure 13-3: First glance at your web page.

You can start experimenting with your web page by adding some of the HTML tags that you already know. Feel free to add new headings and paragraphs; then open your web browser to see the result. HTML doesn’t do much besides add raw text, though, so the page won’t look very pretty. Later in the “Styling your HTML content with CSS” section you find out how to dress it up with CSS.

Save your file every time you make changes. Refresh the web browser after saving, and all changes should be updated immediately.

Inserting links

Most websites contain multiple pages. To make it possible for your visitors to navigate through the pages of your website, you have to insert hyperlinks to the other web pages with the <a> tag:

<a href="about.html">About this website</a>

The reader sees the words About this website, which is called the anchor text. If he or she clicks the anchor text, the about.html web page opens. The code for that page has to be inside your myWebsite folder.

The <a> tag introduces attributes, which are represented in this case by href="". HTML elements have attributes that usually add functionalities or provide additional information to an HTML element.

You can also insert links that go to any web page on the Internet if you type the following:

<a href="http://beagleboard.org">Visit BeagleBoard website</a>

The user sees the message Visit BeagleBoard website. If he or she clicks the hyperlink, the official BeagleBone website opens.

Even though most web browsers don’t display http:// at the start of the domain name, you need to type that prefix in your href="" attributes; otherwise, the website may not open.

You can also include in your About page a link with the following attribute:

<a href="mailto:name@example.com">Contact me here.</a>

When your reader clicks the Contact me here link, his or her default email application opens, ready to shoot you an email. Simply replace name@example.com with the email address of your choice.

Keep in mind that posting your address online may attract a lot of spambots that will send you unsolicited emails.

Adding images

Images are great ways to capture the attention of your website’s visitors. You insert an image by using the <img> tag.

You need to have an image to work with in your images folder, so copy an image there. The image in the example is called beagleboneblack.jpg. Add the following tag to your code, but replace images/beagleboneblack.jpg with the path to your image file:

<img src="images/beagleboneblack.jpg">

Did you notice that the <img> doesn’t have a closing tag? Some HTML tags don’t have a closing tag because everything they need to do their task is actually placed inside the opening tag — not between an opening and a closing tag.

If the image is a bit bigger than you needed, you can change its size by inserting a couple of attributes to manipulate the width and height of your image. Here are some of the attributes that you can use with the <img> tag:

· src (source): Specifies where your image is located. You can insert an URL or the path to your image location.

· width: Changes the width of your image, measured in pixels.

· height: Changes the height of your image, measured in pixels.

· alt: Stands for alternative text. If a browser can’t display your image for some reason, it displays your alternative text instead of the image.

If you want to change the width of your image to 290 pixels and the height to 350, type the following:

<img src="images/beagleboneblack" width="290" height="350">

Figure 13-4 shows the web page with the photo.

You can also use two tags together. If you want to make your image clickable so that another page opens when the user clicks the image, you insert the <img> tag between the <a> and </a> tags, as follows:

<a href="http://beagleboard.org">
<img src="images/beagleboneblack.jpg">
</a>

Figure 13-4: Your web page with a BeagleBone Black photo.

Creating lists

Lists help you organize your content. There are two types of lists:

· Ordered lists: You designate an ordered list with the <ol> and </ol> tags when the order of your items is important, as in step-by-step instructions. Each item in the list starts with a number or a letter (see Figure 13-5).

<ol>
<li>Follow step number one</li>
<li>This is step number two</li>
<li>That's the final step</li>
</ol>

Figure 13-5: Ordered list.

· Unordered lists: You use the <ul> and </ul> tags when the items can be presented in any order, as shown in Figure 13-6.

<ul>
<li>One tip</li>
<li>Another tip</li>
<li>Last tip</li>
</ul>

Figure 13-6: Unordered list.

You can also use an unordered list to create a navigation bar on your website. Into each list item, simply insert an <a> tag that links to your other web pages.

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>

Right now, the result of the preceding code doesn’t look anything like a navigation bar. The formatting is done with CSS in the “Customizing your logo and navigation bar” section.

Formatting Your HTML Document

Many other tags that are useful for formatting web pages, including the following:

· <strong>: Put text inside the <strong> and </strong> tags to mark the text as important. In a web browser, the text appears in bold but keep in mind that HTML is used to mark things, not to make them pretty; the primary use of this tag is to mark your text as important. If you simply want to make your text bold, you should use CSS.

· <em>: Put text inside the <em> and </em> tags to emphasize it. The web browser displays this text in italic.

· <hr>: Use the <hr> tag to add a horizontal line to separate portions of content. If you’re describing your project, for example, you could separate the parts list and the circuit schematic with a <hr> tag.

· <!--insert comment-->: Keep your code organized with this tag. Comments don’t appear on your web page, so you can use them to remember why you wrote some of the HTML tags when you revisit that code sometime later.

You can use lots of other tags to mark your text, but we don’t cover them because they’re not relevant to the remainder of this book.

Styling Your HTML Content with CSS

At the moment, your web page is basic, with no color or customization (see Figure 13-7). It merely contains the text marked with HTML. Ew. Using CSS, you can add some colors and change the layout to make it look better. Who said programmers can’t be artistic?

Embedding a style sheet

All your style instructions are stored in a separate text file. Open a new file in your text editor, name it stylesheet.css, and save it in your myWebsite folder.

Your filename should have the .css extension; otherwise, the file won’t work properly.

Figure 13-7: How your web page looks so far.

To embed a style sheet into your HTML document, type the following in your header tag:

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

At this point, you should have all this code in your header tag of your HTML document:

<head>
<title>Electronics Projects with BeagleBone</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>

Now you have your style sheet connected to your HTML document. This process saves you a ton of time because you can embed the same style sheet in all your other web pages. Also, when you edit that single file, it applies the changes to all your other web pages at the same time, which makes it easy to give all your web pages the same colors, fonts, and overall organization.

Knowing the basics of CSS

Each CSS instruction requires three things: a selector, a property and a value, as shown here:

selector { property: value; }

selector is the HTML element you want to change. After that, you insert all the instructions inside the brackets. The property you want to alter is followed by a colon and the value. All instructions end with a semicolon.

For example, copy this code snippet into your stylesheet.css file:

h1 { color: navy; }

Then save your file, and refresh your web browser. Now all your elements that use the <h1> tag are navy blue.

You can have more than one instruction for the same selector, as follows:

selector {
property: value;
property: value;
}

CSS ignores extra spaces, so nothing stops you from, say, having all your instructions on the same line. However, we suggest that you organize your code as in the preceding example to keep your code cleaner and more user-friendly. It’s also the standard way of writing CSS.

You can select more than one HTML element at the same time. The following example changes the color to navy for all elements that use the <h1> or <h2> tags:

h1, h2 { color: navy; }

Experimenting with colors

When you visit a website, you usually notice a main color. The navigation bar, headings, and hyperlinks may be the same color or similar colors. This color scheme makes the website more memorable and more pleasant to navigate. The examples in this chapter use mainly blues for your website, but you can use any color you desire.

In the preceding section, you change all your headings to navy blue. You can also change the color of your background with the following instruction:

body { background: #E6E6E6; }

What do those numbers and letters mean? That’s hardly the name of a color. They’re hexadecimal numbers, used in this case to specify combinations of red, green, and blue (RGB). Hexadecimal values range from 0 to 9 and from A to F. The lowest value for a hexadecimal number is 0, and the highest is F. From 0 to F, there are a total of 16 values for each hexadecimal digit. All web browsers support 140 color names, which means that each color name has a hexadecimal color value. Following are some of the most basic values:

· Black: #000000

· Red: #FF0000

· Green: #00FF00

· Blue: #0000FF

· White: #FFFFFF

To find the right color, you don’t need to keep trying combinations of numbers and letters. You can use any color picker online, such as the one at www.w3schools.com/tags/ref_colorpicker.asp. You simply select the color you want and then copy the hexadecimal number to your CSS code.

Changing text appearance

When you’re working with HTML, you can customize your text to look exactly as you want. HTML is like a word processor with all the options you’re already familiar with: font family, font size, text position, and so on. Instead of using a graphical user interface (GUI), however, you need to write code instructions in your style sheet. Here are the most important properties you can modify:

· text-align: Sets where your text is aligned horizontally. You can set your text left, center, right, or justified.

· text-decoration: Removes or sets text decorations. You can use any of four values: none, underline, overline, and line-through.

· font-family: Changes the default font for the text.

· font-style: Changes the style of the text to italic, bold, or normal.

· font-size: Increases or decreases the sizes of letters.

· font-weight: Specifies the weight of a font. The options are normal, bold, bolder, and lighter.

You can also change the indentation, change capitalization, and make plenty of other text customizations. If you want to know how to do something specific, simply search for it online.

Usually, when using font-family, you should specify more than one font, because you want to make sure that each visitor’s web browser has at least one of those fonts:

body { font-family: Verdana, Geneva, sans-serif; }

You define a priority in the preceding example. Geneva is the font only if the web browser doesn’t have Verdana, and so on.

Next, you customize hyperlinks to make them look better. First, you define your hyperlinks as navy and remove the underline by changing text-decoration to none:

a {
color: navy;
text-decoration: none;
}

To give your visitors some interaction, you want your hyperlinks to be underlined when visitors move a mouse pointer over them. Add the following snippet to your CSS file:

a:hover, a:active { text-decoration: underline; }

Understanding the box model

In discussions of CSS, you frequently hear the term box model. This important subject is one that a lot of people don’t fully understand.

Because the layout determines the look and feel of your web page, controlling the position of your HTML elements is important, and that’s done with CSS. You can think of each HTML element as being a box that holds your content. The CSS box model contains a few properties that help you position your HTML elements where you want them:

· content: Sets where your text, hyperlinks, or images appear

· width: Sets the width in pixels

· height: Sets the height in pixels

· padding: Adds a layer of transparent space around your content box

· border: Adds a border around your padding

· margin: Adds a layer of transparent space around your border

Figure 13-8 depicts all these properties.

Figure 13-8: The CSS box model.

To see the box model in action, you can create a new HTML document called boxModel.html with the same tags as shown in the “Structuring an HTML document” section and insert the following code into the <body>tags:

<div>
<p>Your content goes here!</p>
</div>

Then add this code to your style sheet:

div {
width: 100px;
padding: 15px;
border: 10px solid blue;
margin 25px;}
}

Now save all your files and refresh your web browser to see the final result (shown in Figure 13-9). The spaces around your content show all the CSS properties being applied to it.

Figure 13-9: Demonstrating the box model with CSS.

Styling Your HTML Elements

Imagine a website on which each heading is a different color, size, and font. Some artist from Pablo Picasso’s age probably would love it, but that’s not really what you’re aiming for.

On the other hand, sometimes it’s useful to change things individually. You may want to set the navigation bar’s hyperlinks to a different color, for example. The ease with which you can select all or just a single HTML element shows how powerful CSS can be with just the slightest effort.

You can select an ID from an HTML element and customize that HTML element. You can add a footer to your web page index.html by creating a <div> tag with an id called footer and then add the paragraph with all your content. The id could have a name other than footer, if you prefer, as shown here:

<div id="footer">
<p>Created by <a href="about.html">Name</a></p>
</div>

Add the following code to your style sheet:

#footer p {
text-align: center;
}

When you refresh your web browser, you see your footer paragraph, and only your footer paragraph, centered on the page.

Wrapping up your content

Changing the margins of your page isn’t necessary, but it makes your website look better. Imagine that someone opens your website on a very wide screen. Your content will be stretched and hard to read. To accommodate such a screen, insert your HTML elements between the <div> tags.:

<body>
<div id="wrapper">
<!--Insert all your HMTL elements here-->
</div>
</body>

The ID name given to <div> tags used in this fashion is usually wrapper, but it could be any other name. You should always try to give intuitive names to your IDs.

In your CSS file, change the margin of your wrapper with the following code:

#wrapper { margin: 20px 70px; }

Dividing your web page

You still need to divide a few elements of your web page. You have to separate your logo and your navigation in two different <div> tags. Add the following <div> with the ID logo to your HTML document:

<div id="logo">
<h1><a href="index.html">Electronics Projects</a></h1>
</div>

Insert the <ul> and <li> tags you created in the “Creating lists” section in a <div> with the ID nav:

<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>

Customizing your logo and navigation bar

To make your logo stay on the navigation bar and on the left side of your web page, add this snippet of code to your style sheet:

#logo {
display: inline-block;
float: left;
}

Now change the appearance of the unordered list to make it look like a real navigation bar. Copy the following code to your stylesheet.css file and save it. This change moves your navigation bar to the right side of your web page inline with the logo; it also makes the background navy blue and makes a few other adjustments.

#nav {
float: right;
background: navy;
height: 40px;
line-height: 30px;
margin-bottom: 20px;
display: inline-block;
text-align: center;
font-weight: bold;
width: 250px;
border-radius: 10px;
}

#nav ul {
list-style: none;
margin: 0 auto;
}
#nav li {
float: left;
display: inline;
margin: 0;
}

The following code makes your hyperlinks for the navigation white and keeps them in place:

#nav ul li a {
display: inline-block;
height: 30px;
padding: 5px 20px;
color: white;
}

Your web page with the logo and navigation bar should look similar to Figure 13-10.

Figure 13-10: Logo and navigation bar.

Customizing your container

At this point your background is grayish, which makes it hard for visitors to read your content. Create a new <div> tag with the container ID so that you have a place to insert all your readable content with a white background. Insert the following between <div> tags:

<div id="container">
<h2>Home</h2>
<p>This is my first web page!</p>
(...)
</div>

Next, with the help of CSS, make your background white and make the proper spacing adjustments:

#container {
padding: 40px;
clear: both;
background: white;
border-radius: 10px;
}

Testing your web page

Save all your files, open or preview your index.html file, and refresh your web browser. Does the page look as expected (see Figure 13-11)? Cool!

If your page doesn’t look like the one in the figure, go to www.dummies.com/beaglebone and download all the source files. Compare them with the code you wrote and try to figure out what’s missing.

Figure 13-11: The final result.

Start navigating through your website and check whether all the hyperlinks go where they should and all your images load fine.

The beauty of a website is that after it’s published, you can update your code any time, so fear not! This is just your starting template; the goal is to inspire you to build upon this website. Update it with some of the projects elsewhere in this book. Take pictures. Show it to your friends and customize it any way you want.

Publishing Your First Website

Hosting your website on a reliable hosting service isn’t free; you have to pay a certain amount per month to get your own domain and a hosting plan. Companies such as Bluehost (www.bluehost.com), HostGator (www.hostgator.com), and GoDaddy (https://www.godaddy.com) offer starter plans that are relatively cheap and are more than enough to host a personal website.