The Current


I am putting together the music pages on the site.


Variations on Zelda's Theme is finished. I am finalizing a couple things, and will be releasing it soon.


I have begun working on a mobile site. This project will also result in graphical elements being added to the desktop site.


My drop-down navigation menu is now functional.


Pocket Beethoven for solo piano is now complete! Engraving will begin shortly.

Text

One of the most important features of any web page is text. For the most part, you will add text inside paragraph elements; it's a way to maintain rich semantic HTML. The text inside the paragraph element will wrap to fit the width available to it. But what if you want more control over where the line breaks?

The solution to that problem is to use the break element. This is an empty element that forces a single line break, marked up as <br />. This can be used inside the paragraph element to force the content onto multiple lines at defined points. When I use a br tag, I will usually shift the following content down to the line that follows. Because HTML only cares if there is whitespace, and not how much there is, it does not render that extra line when displayed in the browser. The up side to doing it this way is that it helps to keep your code organized, which is ideal when you start building larger pages. Since the br element renders a new line, it only makes sense to put it on a new line.


Links

We have already discussed links, marked up with the <a> tag. We know what the href and target attributes do. But there's still a few things to learn. The text inside the anchor element is the text that will be displayed, and the text that the user will click on to follow the link. Also, the value attached to the href attribute can be either an absolute path or a relative path, and it can be internal or external. Internal paths would lead to another page on the site, and an external path would lead to a different website. External paths must always begin with the http:// or https:// protocol followed by the url of the page. Internal relative and absolute paths will be discussed in the next lesson.

In our example code, we will add links inside the heading elements, around the content, that will lead to the respective Wikipedia article.

Previous Lesson: The Heading Elements | Next Lesson: Images

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Classical Music</title>
</head>
<body>
  <h1>Classical Music</h1>
  <h2><a href="http://en.wikipedia.org/wiki/Baroque_music">Baroque Era</a></h2>
  <p>1600 - 1750<br />
    Baroque music tends to be quite embellished, meaning the composer would usually write melody lines, and then the performers would add little flourishes as they kind of improvised on the melody. It is also very emotional and expressive, but unlike some later music, a Baroque piece typically focuses on a single emotion throughout its length.</p>
  <h2><a href="http://en.wikipedia.org/wiki/Classical_period_(music)">Classical Era</a></h2>
  <p>1730 - 1820<br />
    Music from this era is largely diatonic, meaning that it has a definite key, and generally didn't stray outside it - though some might consider modulation the exception. However, the farther you go into the Classical Era, the more composers like Mozart, Haydn, and Beethoven would push the boundaries of diatonic and pull notes and chords from other keys, called chromaticism, a concept that the later Romantics would take to a whole new level.</p>
  <h2><a href="http://en.wikipedia.org/wiki/Romanticism">Romantic Era</a></h2>
  <p>1815 - 1910<br />
    Romantic music is characterized by two main things: emotion and nature. You'll find pieces that are rich with emotions so complex that you can't define them. There's pieces that are so simplistically beautiful they make you cry. And there's a number of works that were inspired by and invoke scenes of nature.</p>
</body>
</html>