Introducing Content

If we remember back to the preview of the finished Web site, we anticipate creating images, headings, paragraphs, and so on. We will do all of this with elements in HTML.

First, we have to bring in the content from the text file Emme has given us.

Adding the Raw Text

Emme, the founder of Equinurture, has given us a text file with much of the content she wants to go on the home page, and some placeholder text, too. Let's copy the text from this file and bring it into our HTML document.

Step1. To open the text file with the content,

Double-Click equinurture_homepage_content.txt

Here we see the content we wish to bring into the Web page. Let's copy its contents now.

Step2. To select all of the text, press:

Control key+a

NOTE for MacOS Users: To select all of the text, press Command key+a.

Step3. To copy the selected text, press:

Control key+c

NOTE for MacOS Users: To copy the selected text, press Command key+c.

Since this is the content we want to visible in the browser's viewport, all of it will need to be in the body element.

Step4. Switch to the code editor window for index.html.

Step5. Position the cursor in the blank line within the body element.

Step6. To paste the selected text, press:

Control key+v

NOTE for MacOS Users: To paste the selected text, press Command key+v.

Step7. Save index.html.

The content is now where it should be. Let's see what this looks like in the browser. We can do this by simply refreshing the browser window, which will reveal our saved changes.

Step8. To refresh index.html in the Web browser, press:

F5 key

NOTE: We simply reloaded index.html in the browser. The F5 key is the shortcut to do this on all major desktop browsers in Windows, while Command key+r is the shortcut for browsers on a Macintosh computer. Each of these browsers also possesses a button that you can click near the address bar that does the same thing.

NOTE: If this did not work, make sure that you saved index.html. In fact, checking to make sure you saved your file is generally one of the first steps in trying to fix any code that is producing unexpected results.

Adding Structural Markup

Currently, we just have a bunch of blocks of text that have no meaning, as far as the browser is concerned. To change that, we need to add markup. In fact, the HTML document is not well-formed if there is any text in the body element without markup.

We can apply this markup using the variety of elements in the HTML5 arsenal. The job is to structure our document with the elements that are the most semantically appropriate for the content. In other words, we want to pick elements that are closest in purpose to the content they mark up.

We can create this structure with elements that are designed to separate the content into separate blocks. This is commonly in the form of paragraphs, headings, lists, and so on.

That's what we will do next.

Introducing Paragraph Elements

The paragraph element is perhaps the most common element found on the Web today. Since the HTML specification is not granular enough to include very specific markup for text like poems, taglines, and so on, the paragraph element serves as a kind of catch-all element for simple blocks of text.

Paragraph elements fit under the loosely-defined category of "structural markup," and are our first example of block-level elements or block elements which create a "block" in the Web page, since they create space above them and below them and take up the entire width of the container they are in. The Web browser currently shows an unruly wall of text; it would be nice to be able to break it up with block-level elements.

We will begin by combing through the content that Emme has given us, looking for text that looks like paragraphs, and proceed to wrap that text with opening and closing tag pairs.

Step1. To create the first paragraph element, type:

Equinuture
<p>equine-partnered life coaching</p>

Exiting code block

We have now created a paragraph element. Let's markup the rest of the content that warrants paragraph tags.

Step2. To create the next paragraph element, type:

"Emme walking with a horse"
<p>Experience what is possible with Emme and her horse partners...</p>

Exiting code block

NOTE: Be careful to leave the quoted text untouched. It is a placeholder for an image we will insert later.

Step3. To create the next paragraph element, type:

<p>Experience what is possible with Emme and her horse partners...</p>
<p>This is your life! 
Is it what you dreamed it would be?
Are you who you want to be?</p>

Exiting code block

Let's now finish making our paragraph elements.

Step4. Add <p> and </p> tags around the blocks of text that begin with:

• "Work with a trained professional..."
• "Emme is a nurturer..."
• "Lomo aesthetic..."
• "Horses have great presence..."
• "Hopscotch selfie..."
• "Emme and her horse partner..."
• "Indiana University..."

We have successfully marked up all our paragraphs. Let's see what this looks like in the Web browser.

Step5. Save and refresh index.html.

We can see that our structure is coming together. The paragraph elements, possessing the block display behavior, create extra space above them and below them, and that is why we now see separate blocks of text.

Let's mark up our headings next.

Introducing Heading Elements

Like paragraph elements, heading elements are block-level elements that will help us convert some of our text into structure for our document.

However, unlike paragraphs, there are different kinds of headings, or more specifically, different levels of headings. We'll create those now.

Using the Heading 1 Element

The most prominent heading on the Web page is typically given the level one heading. We can create this type of heading with h1 tags.

Let's use this element for the company's name at the top of the body.

Step1. To create the heading 1 element, type:

<body>
    <h1>Equinurture</h1>
        <p>equine-partnered life coaching</p>

Exiting code block

We now have a heading level 1 element.

Step2. Save and refresh index.html.

Default Style

The heading text appears larger than the paragraph text; this is because the browser has applied a default style to govern the appearance of the HTML elements. In this default style, Heading 1 elements are twice the size of paragraph elements. However, remember that HTML is concerned only with content and structure, not presentation style.

With CSS, we can change the appearance of our headings in any way, including the color, font, size, etc. We could even make the headings much smaller than our paragraphs if we wanted to.

The reason our heading 1 element appears larger is that heading 1 elements usually have a default size that is twice the browser's default font size (which paragraphs use).

We will go into much more depth with this topic in the CSS segment of this workshop. For now, let's move onto the next set of headings.

NOTE: There is no rule on exactly how you use heading 1 elements. Some Web sites use an h1 for the main tagline, and many others use it to establish the main topic of the Web page. Some even utilize multiple h1 elements on the same page.

Using Heading 2 Elements

When Web pages have multiple main sections, the headings for these sections are usually defined with level 2 headings, created with h2 tags.

The document is divided into two main sections: one for the introductory blurb and the other that explains Emme's business a bit better.

Let's create our headings now.

Step1. To create the first heading 2 element, type:

<h2>rediscover yourself</h2>
"Emme walking with a horse"

Exiting code block

We have one more h2 element to add.

Step2. To create the next heading 2 element, type:

<h2>the experience</h2>
interacting with emme

Exiting code block

We now have our level 2 headings in place.

The heading 2 elements appear smaller than the heading 1 elements, so do not misunderstand the purpose of the heading's number; the number is associated with the scope or level of the heading, and not the size.

We have one more level of heading to implement in the Web page.

Using Heading 3 Elements

The second main section on the Web page is divided into three sub-sections. As you might guess, the headings for these sub-sections are to be marked up with h3 elements. Let's do this now.

Step1. To create the first heading 3 element, type:

<h2>the experience</h2>
<h3>interacting with emme</h3>

Exiting code block

This completes one of three h3 elements we wish to make. Let's make the other two as part of the experience section of the Web page.

Step2. To create the next heading 3 element, type:

<h3>introducing the horse partner</h3>
<p>Horses have great presence; they are prey animals, so therefore keenly

Exiting code block

Step3. To create the last heading 3 element, type:

<h3>deciding if this is for you</h3>
unfulfilled?

Exiting code block

The headings for the document are now complete.

Introducing Lists

Lists are very common, so it makes sense that the W3C has included a way to create lists in HTML. Lists create structural blocks, much like headings and paragraphs, but the syntax for creating lists is slightly more complicated.

Not only do we have to specify the boundaries of the entire list, but we also have to identify individual items in the list.

There are three different types of list in HTML:

• unordered
• ordered
• description

We will be learning about the unordered list today.

Creating an Unordered List

Semantically, unordered lists are different from ordered lists in that the order of the list items in an unordered list does not matter, while it does matter in an ordered list.

By default, Web browsers typically display bullets for each list item in an unordered list, and therefore it is easy to think of unordered lists as simply bulleted lists. However, remember that the default appearance of an element in HTML does not matter; with CSS the bullets can look like anything, including squares or even your own custom images. You can also just remove any kind of glyph altogether, so it is just the bare list items.

An easy rule of thumb in deciding between unordered and ordered lists is to consider hypothetically the browser randomizing the order of your list items each time a visitor came to your Web page. If that wouldn't make a difference to the meaning of the content, then an unordered list is a good choice. If rearranging the order would throw things off, then go with an ordered list.

As we look at our code document, we see three separate lines of text that read: "unfulfilled? discouraged? confused?" We could make these three separate paragraphs, but it makes more sense to turn these three into a single list. Since the order of these lines doesn't really have an impact on the meaning of the lines, we'll use an unordered list. As the name suggests, the order in which list items are displayed in an unordered list is not so important, but they will appear in the order in which they are listed in the document.

The tag name for the unordered list element is ul. Let's turn the three lines into a single ul element now.

Step1. To create the ul element, type:

<h3>deciding if this is for you</h3>
<ul>
unfulfilled?
discouraged?
confused?
</ul>

Exiting code block

We have both the opening and closing ul tags in place, but the unordered list is not well-formed until we define individual list items.

Creating the List Items

While it is obvious to us that each line is a separate item of the list, we need to be explicit by using list item elements. Remember, line breaks don't count as markup in HTML.

Lists are like the html element in that they have required children. The html element requires the head element and body element to be nested within it. List elements require list item elements as children. In fact, there are no other kinds of elements allowed as direct descendants (i.e. children, not grandchildren, etc) of lists.

We create list items with li elements. Let's go in and add a pair of opening and closing li tags around each item that we intend to be part of our list.

Step1. To create the three list item elements, type:

<ul>
<li>unfulfilled?</li>
<li>discouraged?</li>
<li>confused?</li>
</ul>

Exiting code block

We have completed a well-formed ul element.

NOTE: The syntax difference between unordered lists and ordered lists is the tag name. Unordered lists use ul tags, while ordered lists use ol tags. Both use li elements for their list items.

Step2. Save and refresh index.html.

You should see a list with three separate bullets.

Now let's explore how create hyperlinks, which allow you to jump from one Web page to another, or even from one part of a page to another part.

Introducing Hyperlinks

The world wide Web wouldn't have its name without hyperlinks. In fact, the first initial of HTML, Hypertext, gets that name because HTML documents include hyperlinks.

Curiously, we create hyperlinks with anchor elements. The anchor element is an example of an inline element.

Understanding Inline Elements

All of the elements that we have created in the body thus far are block-level elements, creating "blocks" in the structure of the document, displayed with some space before and after each block. Not all elements behave this way.

The second-most common display behavior is inline, where the content is within a parent block-level element and does not disrupt the flow of the block. Inline elements simply exist next to the other content in that parent block-level element.

The most common inline element is the anchor element.

Creating an Anchor Element

Anchor elements are defined with a tags, which surround the content we want to be clickable. Users may then click on this content, which will take them to the destination of the link.

In the final paragraph of our document, we refer to Indiana University, and so it would be prudent to make this a link to the IU Web site, so that the visitor may learn more if he or she wishes to.

Step1. To create an anchor element, add the text highlighted in bold:

<p><a>Indiana University</a>Copyright 2015</p>
</body>

Exiting code block

We have now specified what text will be clickable, but we still have to point the link to a resource. We will do that with the hypertext reference attribute.

Understanding Attributes

Most elements can take additional information or modifiers, specified within the opening tag for the element. These modifiers are referred to as attributes. Some elements must have their required attributes defined, while attributes for other elements may be optional.Some elements may have multiple attributes:

<tag attr="value" attr2="value2">Some content</tag>

Exiting code block

Attributes are inserted directly into the opening tag, but do not appear in any form in the closing tag. In HTML, attribute names are usually lowercase. The syntax for including an attribute in an opening element tag is to specify the name of the attribute after the element label, add an equal sign, and specify (in double quotes) the value being given to that attribute.

Adding the Hypertext Reference Attribute

The anchor element is the first element we are creating which has a required attribute, the hypertext reference attribute, which is written as href in the HTML markup.

The href attribute is where we assign the destination for the link. The reason it is required is so the anchor element takes the visitor to another resource.

The destination for the Indiana University link will be the IU home page.

Step1. To create the href attribute, type:

<p><a href="https://www.iu.edu/">Indiana University</a> Copyright 2015</p>
</body>

Exiting code block

Step2. Save and refresh index.html.

You see the link at the bottom of the page with its default style, which is typically blue and underlined. Remember we can change the appearance of links using CSS.

Step3. Test the new Indiana University hyperlink., then return to index.html.

We have more links to create, but first let's learn about the difference between absolute and relative addressing.

Absolute Versus Relative Addressing

The link we just made is an instance of an absolute address, which contains the full Internet address, including the protocol used to request and receive that document. There is only one Web page in the entire world located at that exact address. No matter where you are on the Web, linking to that address will always get you there (as long as the owner of that Web site doesn't move it).

Another example of an absolute address is:

http://ittraining.iu.edu/index.html

A link using an absolute address takes the visitor to an entirely separate Web site. The easiest way to spot an absolute address is the href attribute starts with a protocol, "http," which is the Hypertext Transfer Protocol (HTTP). That protocol allows Web browsers to request Web pages from all around the world.

Relative addressing, on the other hand, is used in order to take the browser from one Web page to another Web page when both belong to the same Web site. The hypertext reference used in these links do not start with the protocol, but rather, just state the location of the destination file relative to the file currently being accessed.

We can find an analogy in postal addresses. Let's say there is a gas station on 123 Anywhere St. Bloomington, IN, 47408, United States. This is an example of an absolute address. However, if we were to state that the gas station is the three blocks south of the grocery store, on the right, then this would be an example of a relative address.

The navigation links will all use relative addresses.

Creating Navigation Links

The area of the Web page that the visitor knows to go to in order to visit other Web pages on the Web site is commonly called the navigation. The links in this area are therefore often called the navigation links.

The Web site consists of two Web pages: the home page and the about page. We want our visitors to be able to go to the about page from the home page.

In order for us to create a link that takes us to the about page, it is important to confirm the file name of the Web page in question. In this case, the destination Web page is called about.html.

The next step is to ask ourselves where the about.html file sits in relation to index.html in our file structure. In this case, they are in the same folder, so all we have to do is simply write the file name as the value of the href attribute.

Let's create our About page link now.

Step1. To create the first relative link, type:

Welcome
<a href="about.html">About</a>
<h2>rediscover yourself</h2>

Exiting code block

We now have a way to get to our about page. Let's now make a link for our home page.

Creating the Home Page Link

It may seem counter-intuitive, but it is convention to have a link for the home page, even on the home page itself. More specifically, it is convention to have a navigation section of your page that is identical to the navigation across all of the Web pages on the Web site.

Having the same navigation on every page can keep the Web site looking more consistent and clean. Additionally, most popular Web sites have special systems where the Web master can edit the navigation in one file, and have it trickle down to all the Web pages.

Step1. To create the homepage relative link, type:

<a href="index.html">>Welcome</a>
<a href="about.html">About</a>

Exiting code block

We have completed making the links for the Web page.

Now our document is very close to being well-formed, with almost all the content being properly nested in elements. We still have the one line of code without any markup, "Emme walking with a horse", that is serving as a placeholder for an image.

Introducing Empty Elements

The elements we've learned and created so far all have both an opening and a closing tag. There are, however, a few elements that do not have any content between the opening and closing tags. These are called empty elements. Since an empty element has no content, it may be opened and closed with a single tag.

<empty />

The last character in that tag before the closing angle bracket should be a closing slash, to remain consistent with XML.

NOTE: The syntax for writing empty elements is simple, but unfortunately, there has been confusion about which is the correct syntax, due to inconsistency in the standards. In HTML5, three different syntaxes are acceptable: <empty>, <empty />, and even <empty/>, but the first one is the official recommendation by the W3C. Fortunately, there is a very specific set of valid empty elements, and browsers are good at rendering empty elements which use any of these syntax. No matter which syntax you use, whether or not you include a doctype, you should almost never run into an issue with the page rendering correctly.

We will be creating a couple different types of empty elements today. Let's start with the break element.

Using the Break Element

If we look at the paragraph that begins, "This is your life! Is it what...," then we notice that in the code it is split into three separate lines, but in the browser it is rendered all on one line. We know the reason for this is that HTML ignores the white space, and so far the only line breaks that exist are due to the gaps between structural blocks.

With our knowledge up to this point, in order to create these line breaks within the paragraph in question, we would have to split this into three separate paragraphs. However, semantically, we do not actually want three separate paragraphs, but rather, one with a line break at the end of each sentence.

We can achieve this with break elements, written as br elements in the code. Break elements are empty elements, because it is inconceivable that there would be content within a single line break.

These elements are very straightforward: a line break appears on the Web page at each instance of a break element. Let's add these in now.

Step1. To insert two break elements, type:

<p>This is your life!<br/>
Is it what you dreamed it would be?<br/>
Are you who you want to be?</p>

Exiting code block

Step2. Save and refresh index.html.

The single paragraph is now split into multiple lines, at the points set down by our break elements.

NOTE: Break elements sometimes tempt novices to overuse them. Be careful not to fall into this trap. In order to create space between elements, do so with margins in CSS, instead of piling on line breaks. Margins are more accurate, scalable, portable, and efficient than using line breaks for additional space. Line breaks should only be used within a block, and not between them.

The last element we will be using is an important one: the image element.

Introducing the Image Element

Images go a long way in making your Web page more interesting. We create images using another empty element, img. The img element has two required attributes, for the source file, and the alternate text description.

For our page, we want to include a picture of Emme with a horse, where the line reading "Emme walking with a horse" is. We will retain that placeholder text.

Step1. To begin inserting the img element, type:

<h2>rediscover yourself</h2>
<img "Emme walking with a horse"
<p>Experience what is possible with Emme and her horse partners...</p>

Exiting code block

While we have all the components for a complete empty element, the image element is not yet well-formed. To finish the image element, we have to add the src attribute. That's what we'll learn next.

Understanding the Source Attribute

In HTML, images aren't embedded into the document, but rather, they are referenced from the document, kind of like a pointer. We are able to "point" to the image file using the source attribute, written as src, of the img element. The src attribute is a required attribute.

The src attribute is analogous to the href attribute in anchor tags: href is required for anchor elements; src is required for image elements, and you create a relative or absolute address in the src, just as you do in the href.

We have a file in our images folder called "emmehorse.jpg." This is the file for which we must create a relative reference using our src attribute. When we created the relative about link, the about.html file was in the same directory as the Web page.

In this case, the image file is not in the same directory as the Web page, so we must include the folder name in the relative path as the value of the src attribute.

Step1. To add the src attribute, type:

<h2>rediscover yourself</h2>
<img src="images/emmehorse.jpg" "Emme walking with a horse"
<p>Experience what is possible with Emme and her horse partners...</p>

Exiting code block

We now have the information to see that particular file. However, our img element is still incomplete, since it lacks a required attribute and the closing portion of the tag.

Understanding the Alternate Text Attribute

HTML5 expects authors to describe any images using the alternate text attribute, which is written as alt. This required attribute of the img element holds the text that screen reader software uses to portray the images.

Some people may browse the Web with text-to-speech screen reader software. Screen readers dictate the words found on the Web page, so that those who are unable to read with their eyes will be able to still experience this content. This technology is also built into smartphones, and now is even appearing in some automobiles, so the driver may keep their eyes on the road. Proper alternative text is important.

Creating useful alternate text is simple:

• Imagine you are describing the image to someone over the phone. Write what you would be saying to them.
• Be succinct. While there is no character limit in HTML5for the alternate text attribute value length, different agents (browsers, screen readers, and so on) may impose their own limits.

Let's use the placeholder text as the value for the alternate text attribute.

Step1. To add the alt attribute, type:

<h2>rediscover yourself</h2>
<img src="images/emmehorse.jpg" alt="Emme walking with a horse"
<p>Experience what is possible with Emme and her horse partners...</p>

Exiting code block

Step2. To complete the img element, type:

<img src="images/emmehorse.jpg" alt="Emme walking with a horse" />

Exiting code block

Step3. Save and refresh index.html.

You see Emme and her horse in the content. The document is now well-formed, as well, since all of the content is within properly nested elements.

We now have all the content we wanted to have on this home page, as well as a foundational knowledge of HTML Let's now take a look at CSS, and how it can complement the content we have on this page.

Code Listing #1

After completing the previous sections of this workshop, the contents of index.html should look like:

<!doctype html>
<html>
<head>
<title>Welcome to Equinurture: life coaching in Indiana</title>
</head>
<body>
<h1>Equinurture</h1>
<p>equine-partnered life coaching</p>

<a href="index.html">Welcome</a>
<a href="about.html">About</a>

<h2>rediscover yourself</h2>
<img src="images/emmehorse.jpg" alt="Emme walking with a horse" />
<p>Experience what is possible with Emme and
her horse partners...</p>

<p>This is your life!<br />
Is it what you dreamed it would be?<br />
Are you who you want to be?</p>

<p>Work with a trained professional to examine
your inner self. Progress is made through guided interaction with a horse.</p>

<h2>the experience</h2>
<h3>interacting with emme</h3>

<p>Emme is a nurturer. She will ask many supportive
questions to help you become more aware of who you are and what you want
out of your life. This is your life, so Emme focuses her interactions
with you on your life experiences and learning process.</p>

<p>Lomo aesthetic retro, PBR&B cardigan
sriracha beard next level wayfarers ethical Etsy bitters artisan. Banh
mi four dollar toast paleo, Etsy retro direct trade pork belly hashtag
fashion axe tilde fanny pack. Street art vegan pork belly, umami beard
Echo Park master cleanse jean shorts 90's vinyl. Forage +1 Austin, fanny
pack literally 90's kogi Tilde Thundercats scenester leggings bitters.
Typewriter paleo Godard taxidermy. Ethical Vice authentic squid cold-pressed,
salvia literally pour-over church-key four dollar toast tattooed. Fashion
axe Truffaut butcher sartorial DIY seitan viral retro.</p>

<h3>introducing the horse partner</h3>
<p>Horses have great presence; they are prey
animals, so therefore keenly present in this moment because their survival
depends on it. This presence influences the beings around them and can
move a person from distracted thinking into an experience of interacting
in the world around them. When Emme partners with a horse, she reads
the body language and movement of the horse and allows her intuition
to guide her to question that are most important and effective for coaching
you...</p>

 <p>Hopscotch selfie master cleanse polaroid
ethical. Williamsburg leggings hashtag church-key trust fund, direct
trade plaid kogi PBR&B tote bag blog kale chips. 90's church-key
wayfarers, High Life kale chips health goth crucifix hoodie asymmetrical
taxidermy synth. VHS keffiyeh meh locavore bitters. Banh mi cold-pressed
church-key vegan. Next level cliche beard, mlkshk four loko Etsy roof
party 8-bit deep v. Heirloom fanny pack mixtape swag, polaroid typewriter
master cleanse Pitchfork readymade migas cardigan.</p>

<h3>deciding if this is for you</h3>
<ul>
<li>unfulfilled?</li>
<li>discouraged?</li>
<li>confused?</li>
</ul>
<p>Emme and her horse partner can help you
find clarity. Sessions focus on body awareness and inspire you to become
clear about who you are and what matters to you. Over time as you gain
clarity, you shift in how you interact in your life and begin to build
a life you love. If self-awareness and personal growth are important
to you, this is just the experience for you!</p>

<p><a href="http://www.iu.edu/">Indiana
University</a> Copyright 2015</p>
</body>
</html>

Exiting code block