It's true, text is the most important feature of a webpage. But who doesn't like to spice things up with images? This is done with the img element. Similar to anchors, images must link to the source file. They do this with the src="" attribute. Also, it is customary to include the alt="" attribute, which contains text describing the image that will be displayed if the image fails to load. This attribute also help to tell browsers about the content of your page.
The path in your src attribute (or href) can be absolute or relative. An absolute path begins at the root directory / and browses through folders. For example, if your site contains a folder called "music", you would add music/. You would continue to add subfolders in the same manner until you reach the folder in which the desired file is located. Our file is inside the "music" directory, and it is called "piano.jpg", so we would finish the src with piano.jpg. Thus, our attribute would be src="/music/piano.jpg".
The benefit of using absolute paths is that it makes it easier to see where the desired file is. However, it can be troublesome if one of the folders moves or undergoes a name-change. Fortunately, relative paths solve that issue.
Relative paths do not begin at the root of the website - they do not begin with a /. Instead, they begin at the folder in which the current file is located. This makes the paths shorter when moving down into subfolders. However, the path grows as you need to move up out of the current folder. The character group ../ will back out one folder. So, if we were in a file within our music folder, and wanted to go to a file called "shakespeare.html" inside of a "theatre" folder off the root, our src would look like this: src="../theatre/shakespeare.html".
In our example code, I will use both absolute and relative paths to add some images to our page. Once CSS is added to alter the layout of the elements, it will look much better, but that is beyond the scope of this tutorial.
<!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> <img src="/tutorials/html/inc/images/analogous.jpg" alt="Church candles" /> <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> <img src="images/repetition.jpg" alt="Piano strings" /> <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> <img src="../../../inc/img/daffodil.jpg" alt="Daffodil" /> <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>