January 30, 2024 by admin
HTML/CSS Reference for DMET 155/355
Links
So far you’ve been making a stand-alone web page, which is all very well and nice, but what makes the Internet so special is that it all links together.
The “H” and “T” in “HTML” stand for “hypertext”, which means a system of linked text.
An anchor tag (a) is used to define a link, but you must also add something to the anchor tag — the link’s destination.
Add this to your document:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
<h2>ESU's Homepage</h2>
<p><a href="http://www.esu.edu">ESU</a></p>
</body>
</html>The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “https://www.ndangelo.com”, or it can be relative to the current page.
So if, for example, you had another file called “flyingmoss.html” in the same directory then the line of code would be <a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.
A link does not have to link to another HTML file, it can link to any file anywhere on the web.
Images
The web is not just about text, it is a multi-media extravaganza and the most common form of sparkle is the image.
The img tag is used to put an image in an HTML document and it looks like this:
<img src="test-image.gif" width="120" height="90" alt="Test">The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as “alien.jpg” in a directory called “images” then the code would be <img src="images/alien.jpg"...
The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who cannot see the image (if they are visually impaired).
Putting It All Together
The following code incorporates all of the methods that have been explained in the previous pages:
Assignment
Please remember the text below: Create your own HTML page using the code provided. Ensure that the content on the page is original. Use your own images, text, and layout. Make sure to incorporate all the tags in the example. We will include a new link on your index page that will lead to this new page.
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
<!-- This is a comment, by the way -->
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML. <em>I said a simple page put together using HTML.</em> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>
To illustrate
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>I'm not sure what</li>
</ol>
</li>
<li>Some interesting content</li>
</ul>
<h2>Where to find the tutorial</h2>
<p><a href="http://www.esu.edu"><img src="test-image.gif" width="120" height="90" alt="ESU"></a></p>
<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't function.</p>
</body>
</html>