 Pictures, at a certain degree of excitement to web documents and hyperlinks, allow the user to interact with the content of a web document. These two aspects constitute the focus of this e-lecture. In particular, we will look at the use of images and the attributes we can associate with them. We will discuss hyperlinks and finally we will list those items that web browsers ignore or are made to ignore. Like in the previous e-lectures, we will take the HTML document with the source code I used in my previous HTML e-lectures as a starting point. Well, here it is. To the left you will always see the HTML source code and to the right you will see how the web document is displayed within the browser. Let us start with the use of images. Here is an image. Its file name is Logo PNG. That is, it is an image in the portable network graphics format and it has a size of 150 by 150 pixels. Well, as you know, the image displays the logo of the virtual linguistics campus which I have also got here and the logo of the linguistic engineering team. That is my team that has been developing the virtual linguistics campus for the past 12 years. Now to place this image on our web page, we have to use the image tag. This tag is a standalone tag. It controls the placement and the appearance of images on web pages. To add an image to a page, the image requires at least one attribute. This attribute, referred to as source, has the URL of the file to be displayed as an image in the page as its value. In our case, the value would be logo.png. Without any further attributes, images are placed in accordance to their position in the source code on a web page. So here is our first result. Now, since I placed the image tag before the welcome heading displayed in the H1 tags, the image is placed first in our document. However, with further attributes, we can manipulate the position and appearance of the inserted image in several ways. So here, with two further attributes in the link tag, we have placed the image on the right-hand side in the web document. And the tag that is primarily responsible for the placement, the horizontal placement in this case, is the tag align, which in this case aligned the image to the right. The alt tag alternative tag has a value, a string value, that is shown when the image cannot be displayed. Well, let's look at further attributes. For example, we could use the width and height attributes, which define the size of an image in terms of pixels. Now, with these two attributes, we have now reduced the size of our image from 150 by 150 pixels in the original, the default, to 80 by 80, that is almost 50% of the original size. And at the same time, we've changed the align attribute and aligned our image to the left-hand side this time. With further attributes, for example, the attributes h space, horizontal space, and v space, vertical space, we can, for example, define the horizontal and vertical space between an image and the surrounding text in terms of pixels. So much for images, let's now move on with hyperlinks. Hyperlinks are pointers to another place inside the current document, to another document in the local collection, that is on the same website, or to a document anywhere on the worldwide web. The anchor tag, where a stands for anchor, is the HTML construct to build hyperlinks. It is a container tag, whose start and end tags are wrapped around a span of text, or, as we will see later, an image, turning it into a clickable link. With the attribute href, which stands obviously for hyperlink reference, we specify which document is the target of our hyperlink. And this document, the target, has of course a unique address, the so-called Uniform Resource Locator, or in short, URL. Well, in our example here, the URL, that is the value of the attribute hyperlink reference, is the address of the homepage of the virtual linguistics campus. Do you really understand the concept behind the URL? I hope so. If not, here is a short X course. Every resource accessible on the internet has a unique address. This address is known as the Uniform Resource Locator URL. Basically, the URL consists of the following components. Now, the first component specified in red refers to the protocol name, that is, the process by means of which the resource can be accessed. The most well-known protocol name is the HTTP protocol, the Hypertext protocol. Others are FTP, File Transfer Protocol, and so on and so forth. Now, displayed in blue, we have the domain name. It is a name that identifies a specific computer on the internet. And the final part specifies the path name, that is, the location of the file on that specific computer. URLs can be of several types. They can be absolute or relative to the current document. URLs can be mail links that provide a straightforward way to send email from web pages. And if you want to link a specific point in a web page, so-called named anchors can be used. Let's look at them in detail. Now, absolute hyperlinks contain all components of Uniform Resource Locators, specifying the protocol, the domain, and the complete path name. They are primarily used to establish external links to a resource on another computer connected to the internet. Well, as you can see here are several examples. Most of them have the Hypertext Transfer Protocol, then here we have the File Transfer Protocol. The domain names, well, they are displayed in blue. And finally, you have the path names all displayed in green. If you just have a slash here, it is the top level of that particular computer. Relative hyperlinks are used to access resources on the same computer, that is, the server. And they are located relative to the page that contains the relative URL. To link another file within the same directory, for example, where you have your web document, it is only necessary to provide the name of the target to resource, that is, its file name. Well, here is an example which assumes that your target is a file in Formation HTML, and it must be contained in the same folder. To link a file in a directory below the current directory, the path name from the current directory to the file has to be included. So, in this specification, our target file information.html is contained in the folder products one level below our source file. To locate a file on a higher level in the directory hierarchy, one or more folder markers have to be added at the beginning of the path name. Now, each folder marker instructs the browser to go up one directory level to look for the file. Here is an example, and as you can see, the folder marker is displayed as two dots followed by a slash. And this simply means that you will find the file information HTML one folder above the folder where our source is contained. A special type of relative URL begins with a slash. Now, here is an example. When the browser encounters a path name that begins with a slash, it starts at the root, that is, the top level directory of the server and works its way down through the directories and subdirectories of the server tree from there, until it finds the folder you specify after the slash. So, so much for relative hyperlinks, which are used very frequently in web documents. The next type of hyperlink deals with the mail protocol. So, the mail to is the protocol in a hyperlink, and it is possible to create a link with an email address. Now, this is the email address here, of course, a completely arbitrary one. And such a link causes the browser to open a new message in a designated mail program. Well, note that this only works if the browser is configured to launch a mail program. Also be aware that by putting your email address on a web page, you will make yourself susceptible to receiving unsolicited junk mail. You know, this is called spam. In most cases, you do not really want that, do you? Okay, here's the last type of hyperlink, the so-called named anchor. Now named anchors allow for the creation of links to specific points within the same HTML document. All we have to do is to create a hyperlink with an anchor name, a name that you invent preceded by a so-called hashtag symbol. Now here the link would be linguistics, and here is the hashtag symbol. When this hyperlink is clicked, it will move the cursor to a position within the same document that is marked with a simple anchor tag that now only contains the name without the hashtag. This principle is often used, for example, if a long page contains a table of content where each item is linked to a text passage within the same document. Does that ring a bell? Well, Wikipedia, okay. Well, let's now return to our document and see how hyperlinks are created within the HTML code. What happens in the browser when a web document has a hyperlink in the source code? Well, you know by default, two things. First of all, in the browser, the hyperlink is by default underlined. You know this from millions of websites. And then secondly, when the mouse cursor moves over the hyperlink, it changes from the standard arrow to a hand cursor. Remember, these are default settings on many websites. They are overridden by specific style attributes. It is also possible to use images as hyperlinks. To make an image a link, the anchor tag is placed around the entire image. Here is an example. Well, since some browsers by default draw a frame around the anchored image, it is recommended to use the attribute border in the image tag and assign the value zero to it, which means there is no border. And now the hyperlink is no longer indicated by a frame around it. You can only find it by means of mouse rollover, since the mouse cursor changes to the hand cursor. Well, before we finish, we have to mention a set of ignored items that web browsers do not display. When web browsers analyze or the technical term is parse the contents of HTML documents, they interpret all the tags in the document. And during this process, some items are deliberately ignored, not only tags, but also other items. They include, as you have already seen before, line breaks. So if you insert line breaks in the source code, it doesn't really matter. Tabs in multiple spaces are also ignored, so if you use the tabulator, it doesn't matter at all. And if you insert several spaces between words, the browser will ignore it. And then you might have tags, which are by default false, or which you deliberately enter your HTML document. So for example, if you insert the tag linguistics, the browser will completely ignore it. And finally, and this is quite important, you have the special comment tag. So everything that is displayed in the source code between these two tags, here the word comment, is ignored. And this gives us a wonderful opportunity to add comments in the source code, which will not be seen in the browser. Well, this e-lecture concludes our introduction to basic HTML. Having attended our four e-lectures, HTML fundamentals, text part one and text part two, and of course this one, you should now feel confident using HTML in its basic form. Of course, there are more tags and options. For example, the new multimedia tags in HTML5. Well, we will introduce them later in other e-lectures, but there's one additional e-lecture you should attend. This e-lecture deals with the use and the integration of cascaded stylesheets. I strongly recommend attending this one within the near future. So see you there.