Coding For Dummies (2015)

Part II. Building the Silent and Interactive Web Page

Build webpages using HTML, CSS, and JavaScript at www.dummies.com/extras/coding.

In this part …

· Place content on webpages with HTML, and styling content with CSS.

· Structure your website layout with HTML and CSS.

· Create your first webpage — the Airbnb homepage.

· Add interactivity to webpages with JavaScript.

· Access real live data with APIs.

Chapter 4. Exploring Basic HTML

In This Chapter

Learning the purpose of HTML

Understanding basic HTML structure

Adding headlines, paragraphs, hyperlinks, and images

Formatting web page text

Creating a basic HTML website

You affect the world by what you browse.

— Tim Berners-Lee

HTML, or HyperText Markup Language, is used in every single web page you browse on the Internet. Because the language is so foundational, a good first step for you is to start learning HTML.

In this chapter, you learn HTML basics, including basic HTML structure and how to make text appear in the browser. Next, you learn how to format text and display images in a web browser. Finally, you create your own, and possibly first, HTML website. You may find that HTML without any additional styling appears to be very plain, and does not look like the websites you normally visit on the Internet. After you code a basic website using HTML, you will use additional languages in later chapters to add even more style to your websites.

What Does HTML Do?

HTML instructs the browser on how to display text and images in a web page. Recall the last time you created a document with a word processor. Whether you use Microsoft Word or Wordpad, Apple Pages, or another application, your word processor has a main window in which you type text, and a menu or toolbar with multiple options to structure and style that text (see Figure 4-1). Using your word processor, you can create headings, write in paragraphs, insert pictures, or underline text. Similarly, you can use HTML to structure and style text that appears on websites.

Figure 4-1: The layout of a word processor.

Markup language documents, like HTML documents, are just plain text files. Unlike documents created with a word processor, you can view an HTML file using any web browser on any type of computer.

HTML files are plain text files that will appear styled only when viewed with a browser. By contrast, the rich text file format used by word processors add unseen formatting commands to the file. As a result, HTML written in a rich text file won’t render correctly in the browser.

Understanding HTML Structure

HTML follows a few rules to ensure that a website will always display in the same way no matter which browser or computer is used. Once you understand these rules, you’ll be better able to predict how the browser will display your HTML pages, and to diagnose your mistakes when (not if!) the browser displays your web page differently than you expected. Since its creation, HTML has evolved to include more effects, but the following basic structural elements remain unchanged.

You can use any browser to display your HTML files, though I strongly recommend you download, install, and use Chrome or Firefox. Both of these browsers are updated often, are generally fast, and support and consistently render the widest variety of HTML tags.

Identifying elements

HTML uses special text keywords called elements to structure and style a website. The browser recognizes an element and applies its effect if the following three conditions exist:

· The element is a letter, word, or phrase with special meaning. For example, h1 is an element recognized by the browser to apply a header effect, with bold text and an enlarged font size.

· The element is enclosed with a left-angle bracket (<) and right-angle bracket (>). An element enclosed in this way is called a tag (such as, for example, <h1>).

· An opening tag (<element>) is followed by a closing tag (</element>). Note that the closing tag differs from the opening tag by the addition of a forward slash after the first left bracket and before the element (such as, for example, </h1>).

Some HTML tags are self-closing, and don’t need separate closing tags, only a forward slash in the opening tag. For more about this, see the section, “Getting Familiar with Common HTML Tasks and Tags,” later in this chapter.

When all three conditions are met, the text between the opening and closing tags is styled with the tag’s defined effect. If even one of these conditions is not met, the browser just displays plain text.

For a better understanding of these three conditions, see the example code below:

<h1>This is a big heading with all three conditions</h1>
h1 This is text without the < and > sign surrounding the tag /h1
<rockstar>This is text with a tag that has no meaning to the browser</rockstar>
This is regular text

You can see how a browser would display this code in Figure 4-2.

Figure 4-2: The example code displayed in a browser.

The browser applies a header effect to “This is a big heading with all three conditions” because h1 is a header tag and all three conditions for a valid HTML tag exist:

· The browser recognizes the h1 element.

· The h1 element is surrounded with a left (<) and right angle bracket (>).

· The opening tag (<h1>) is followed by text and then a closing tag (</h1>).

Notice how the h1 tag itself does not display in the heading. The browser will never display the actual text of an element in a properly formatted HTML tag.

The remaining lines of code display as plain text because they each are missing one of the conditions. On the second line of code, the <h1> tag is missing the left and right brackets, which violates the second condition. The third line of code violates the first condition because rockstaris not a recognized HTML element. (Once you finish this chapter, however, you may feel like a rockstar!) Finally, the fourth line of code displays as plain text because it has no opening tag preceding the text, and no closing tag following the text, which violates the third condition.

Every left angle-bracket must be followed after the element with a right angle-bracket. In addition, every opening HTML tag must be followed with a closing HTML tag.

Over 100 HTML elements exist, and we cover the most important elements in the following sections. For now, don’t worry about memorizing individual element names.

HTML is a forgiving language, and may properly apply an effect even if you’re missing pieces of code, like a closing tag. However, if you leave in too many errors, your page won’t display correctly.

Featuring your best attribute

Attributes provide additional ways to modify the behavior of an element or specify additional information. Usually, but not always, you set an attribute equal to a value enclosed in quotes. Here’s an example using the title attribute and the hidden attribute:

<h1 title="United States of America">USA</h1>
<h1 hidden>New York City</h1>

The title attribute provides advisory information about the element that appears when the mouse cursor hovers over the affected text (in other words, a tooltip). In this example, the word USA is styled as a header using the <h1> tag with a title attribute set equal to "United States of America". In a browser, then, when you place your mouse cursor over the word USA, the text United States of America displays as a tooltip. (See Figure 4-3.)

Figure 4-3: A heading with title attribute has a tooltip.

The hidden attribute indicates that the element is not relevant, so the browser won’t render any elements with this attribute. In this example, the words New York City never appear in the browser window because the hidden attribute is in the opening <h1> tag. More practically,hidden attributes are often used to hide fields from users so they can’t edit them. For example, an RSVP website may want to include but hide from user view a date and time field.

The hidden attribute is new in HTML5, which means it may not work on some older browsers.

You don’t have to use one attribute at a time. You can include multiple attributes in the opening HTML tag, like this:

<h1 title="United States of America" lang="en">USA</h1>

In this example, I used the title attribute, and the lang attribute, setting it equal to "en" to specify that the content of the element is in the English language.

When including multiple attributes, separate each attribute with one space.

Keep the following rules in mind when using attributes:

· If using an attribute, always include the attribute in the opening HTML tag.

· Multiple attributes can modify a single element.

· If the attribute has a value, then use the equal sign (=) and enclose the value in quotes.

Standing head, title, and body above the rest

HTML files are structured in a specific way so browsers can correctly interpret the file’s information. Every HTML file has the same five elements: four whose opening and closing tags appear once and only once, and one that appears once and doesn’t need a closing tag. These are as follows:

· !DOCTYPE html must appear first in your HTML file, and it appears only once. This tag lets browsers know which version of HTML you are using. In this case, it’s the latest version, HTML5. No closing tag is necessary for this element.

For HTML4 websites, the first line in the HTML file would read <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

· html represents the root or beginning of an HTML document. The <html> tag is followed by first an opening and closing <head> tag, and then an opening and closing <body> tag.

· head contains other elements, which specify general information about the page, including the title.

· title defines the title in the browser’s title bar or page tab. Search engines like Google use title to rank websites in search results.

· body contains the main content of an HTML document. Text, images, and other content listed between the opening and closing body tag is displayed by the browser.

Here is an example of a properly structured HTML file with these five tags (see Figure 4-4):

<!DOCTYPE html>
<html>
<head>
<title>Favorite Movie Quotes</title>
</head>
<body>
<h1>"I'm going to make him an offer he can't refuse"</h1>
<h1>"Houston, we have a problem"</h1>
<h1>"May the Force be with you"</h1>
<h1>"You talking to me?"</h1>
</body>
</html>

Figure 4-4: A web page created with basic HTML elements.

Using spaces to indent and separate your tags is highly recommended. It helps you and others read and understand your code. These spaces are only for you and any other human that reads the code, however. Your browser won’t care. As far as your browser is concerned, you could run all your tags together on one line. (Don’t do this, though. The next person that reads your code will be most unhappy.) HTML does recognize and display the first whitespace character in text between opening and closing HTML tags.

Our example had many h1 tags but only one opening and closing html, head, title, and body tag.

Getting Familiar with Common HTML Tasks and Tags

Your browser can interpret over a hundred HTML tags, but most websites use just a few tags to do most of the work within the browser. To understand this, let’s try a little exercise: Think of your favorite news website. Have one in mind? Now connect to the Internet, open your browser, and type in the address of that website. Bring this book with you, and take your time — I can wait!

In the event you can’t access the Internet right now, take a look at the article from my favorite news website, The New York Times, found in Figure 4-5.

Figure 4-5: A New York Times article with headline, paragraphs, hyperlinks, and images.

Look closely at the news website on your screen (or look at mine). Four HTML elements are used to create the majority of the page:

· Headlines: Headlines are displayed in bold and have a larger font size than the surrounding text.

· Paragraphs: Each story is organized into paragraphs with white space dividing each paragraph.

· Hyperlinks: The site’s homepage and article pages have links to other stories, and links to share the story on social networks like Facebook, Twitter, and Google+.

· Images: Writers place images throughout the story, but also look for site images like icons and logos.

In the following sections I explain how to write code to create these common HTML features.

Writing headlines

Use headlines to describe a section of your page. HTML has six levels of headings (see Figure 4-6):

· h1, which is used for the most important headings

· h2, which is used for subheadings

· h3 to h6, which are used for less important headings

The browser renders h1 headings with a font size larger than h2’s, which in turn is larger than h3’s. Headings start with an opening heading tag, the heading text, and then the closing heading tag, as follows:

<h1>Heading text here</h1>

Here are some additional code examples showing various headings:

<h1>Heading 1: "I'm going to make him an offer he can't refuse"</h1>
<h2>Heading 2: "Houston, we have a problem"</h2>
<h3>Heading 3: "May the Force be with you"</h3>
<h4>Heading 4: "You talking to me?"</h4>
<h5>Heading 5: "I'll be back"</h5>
<h6>Heading 6: "My precious"</h6>

Figure 4-6: Headings created using elements h1 through h6.

Always close what you open. With headings, remember to include a closing heading tag, such as </h1>.

Organizing text in paragraphs

To display text in paragraphs you can use the p element: Place an opening <p> tag before the paragraph, and a closing tag after it. The p element takes text and inserts a line break after the closing tag.

To insert a single line break after any element, use the <br> tag. The <br> tag is self-closing so no closing tag is needed, and </br> is not used.

Paragraphs start with an opening paragraph tag, the paragraph text, and then the closing paragraph tag:

<p>Paragraph text here</p>

Some additional examples of coding a paragraph (see Figure 4-7):

<p>Armstrong: Okay. I'm going to step off the LM now.</p>
<p>Armstrong: That's one small step for man; one giant leap for mankind.</p>
<p>Armstrong: Yes, the surface is fine and powdery. I can kick it up loosely with my toe. It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots.</p>

Figure 4-7: Text displayed in paragraphs using the p element.

Linking to your (heart’s) content

Hyperlinks are one of HTML’s most valuable features. Web pages that include hyperlinked references to other sources allow the reader to access those sources with just a click, a big advantage over printed pages.

Hyperlinks have two parts:

· Link destination: The web page the browser visits once the link is clicked.

To define the link destination in HTML, start with an opening anchor tag (<a>) that has an href attribute. Then, add the value of the href attribute, which is the website the browser will go to once the link is clicked.

· Link description: The words used to describe the link.

To do this, add text to describe the link after the opening anchor tag, and then add the closing anchor tag.

The resulting HTML should look something like this:

<a href="website url">Link description</a>

Three more examples of coding a hyperlink (see Figure 4-8):

<a href="http://www.amazon.com">Purchase anything</a>
<a href="http://www.airbnb.com">Rent a place to stay from a local host</a>
<a href="http://www.techcrunch.com">Tech industry blog</a>

Figure 4-8: Three hyperlinks created using the a element.

When rendering hyperlinks, the browser, by default, will underline the link and color the link blue. To change these default properties, see Chapter 6.

The <a> tag does not include a line break after the link.

Google’s search engine ranks web pages based on the words used to describe a web page between the opening and closing <a> tags. This improved on search results from previous methods, which relied primarily on analyzing page content.

Adding images

Images spruce up otherwise plain HTML text pages. To include an image on your web page — your own or someone else’s — you must obtain the image’s web address. Websites like Google Images (images.google.com) and Flickr (www.flickr.com) allow you to search for online images based on keywords. When you find an image you like, right-click on the image, and select Copy Image URL.

Make sure you have permission to use an online image. Flickr has tools that allow you to search for images with few to no license restrictions. Additionally, websites pay to host images, and incur charges when a website directly links to an image. For this reason, some websites do not allow hotlinking, or linking directly from third-party websites (like you) to an image.

If you want to use an image that has not already been uploaded to the Internet, you can use a site like www.imgur.com to upload the image. After uploading, you will be able to copy the image URL and use it in your HTML.

To include an image, start with an opening image tag <img>, define the source of the image using the src attribute, and include a forward slash at the end of the opening tag to close the tag (see Figure 4-9):

<img src="http://upload.wikimedia.org/wikipedia/commons/5/55/Grace_Hopper.jpg"/>
<img src="http://upload.wikimedia.org/wikipedia/commons/b/bd/ Dts_news_bill_gates_wikipedia.JPG"/>

Figure 4-9: Images of Grace Hopper, a US Navy rear admiral, and Bill Gates, the co-founder of Microsoft, rendered using <img>.

The image tag is self-closing, which means a separate </img> closing image tag is not used. The image tag is one of the exceptions to the always-close-what-you-open rule!

Styling Me Pretty

Now that you know how to display basic text and images in a browser, you should understand how to further customize and style them. HTML has basic capabilities to style content, and later chapters show you how to use CSS to style and position your content down to the last pixel. Here, however, I explain how to do some basic text formatting in HTML, and then you’ll build your first web page.

Highlighting with bold, italics, underline, and strikethrough

HTML allows for basic text styling using the following elements:

· strong marks important text, which the browser displays as bold.

· em marks emphasized text, which the browser displays as italicized.

· u marks text as underlined.

· del marks deleted text, which the browser displays as strikethrough.

The underline element is not typically used for text because it can lead to confusion. Hyperlinks, after all, are underlined by default.

To use these elements, start with the element’s opening tag, followed by the affected text, and then a closing tag, as follows:

<element name>Affected text</element name>

Some examples (see Figure 4-10):

Grace Hopper, <strong> a US Navy rear admiral </strong>, popularized the term "debugging."
Bill Gates co-founded a company called <em>Microsoft</em>.
Stuart Russell and Peter Norvig wrote a book called <u>Artificial Intelligence: A Modern Approach</u>.
Mark Zuckerberg created a website called <del>Nosebook</del> Facebook.
Steve Jobs co-founded a company called <del><em>Peach</em></del><em> Apple</em>

Figure 4-10: Sentences formatted using bold, italics, underline, and strikethrough.

You can apply multiple effects to text by using multiple HTML tags. Always close the most recently opened tag first and then the next most recently used tag. For an example, look at the last line of code in Figure 4-10, and the tags applied to the word Peach.

Raising and lowering text with superscript and subscript

Reference works like Wikipedia, and technical papers often use superscript for footnotes and subscript for chemical names. To apply these styles, use the elements

· sup for text marked as superscript

· sub for text marked as subscript

To use these elements, start with the element’s opening tag, followed by the affected text, and then a closing tag as follows:

<element name>Affected text</element name>

Two examples (see Figure 4-11):

<p>The University of Pennsylvania announced to the public the first electronic general-purpose computer, named ENIAC, on February 14, 1946.¹</p>
<p>The Centers for Disease Control and Prevention recommends drinking several glasses of H₂0 per day.</p>

When using the superscript element to mark footnotes, use an <a> anchor tag to link directly to the footnote so the reader can view the footnote easily.

Figure 4-11: Text formatted to show superscript and subscript effects.

Building Your First Website Using HTML

Now that you have learned the basics, you can put that knowledge to use. You can practice directly on your computer by following these steps:

1. Open any text editor, such as Notepad (on a PC) or TextEdit (on a Mac).

On a PC running Microsoft Windows, you can access Notepad by clicking the Start button and selecting Run; in the search box, type Notepad. On a Macintosh, select the Spotlight Search (hourglass icon on the top-right corner of the toolbar), and type TextEdit.

2. Enter into the text editor any of the code samples you have seen in this chapter, or create your own combination of the code.

3. Once you have finished, save the file and make sure to include “.html” at the end of the filename.

4. Double-click on the file, which should open in your default browser.

You can download at no cost specialized text editors that have been created specifically for writing code. For PCs, you can download Notepad++ at www.notepad-plus-plus.org. For Mac computers, you can download TextMate athttp://macromates.com/download.

If you would like to practice your HTML online, you can use the Codecademy website. Codecademy is a free website created in 2011 to allow anyone to learn how to code right in the browser, without installing or downloading any software. (See Figure 4-12.) Practice all of the tags (and a few more) that you learned in this chapter by following these steps:

1. Open your browser, go to www.dummies.com/go/coding and click on the Codecademy link.

2. Sign up for a Codecademy account or sign in if you already have an account. Creating an account allows you to save your progress as you work, but it’s optional.

3. Navigate to and click on HTML Basics.

4. Background information is presented in the upper-left portion of the site, and instructions are presented in the lower-left portion of the site.

5. Complete the instructions in the main coding window. As you type, a live preview of your code is generated.

6. After you have finished completing the instructions, click the Save and Submit Code button.

If you have followed the instructions correctly, a green checkmark appears, and you proceed to the next exercise. If an error exists in your code a warning appears with a suggested fix. If you run into a problem, or have a bug you cannot fix, click on the hint, use the Q&A Forums, or tweet me at @nikhilgabraham and include hashtag #codingFD.

Figure 4-12: Codecademy in-browser exercises.