S04 Activity / Discussion
parent
a78a99770a
commit
aa889ed078
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="../styles.css">
|
||||||
|
<title>Music Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h1>This is the MUSIC page</h1>
|
||||||
|
<img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1035&q=80" alt="">
|
||||||
|
<ol>
|
||||||
|
<li><a href="../index.html">Main Page</a></li>
|
||||||
|
<li><a href="./reviews.html">Reviews Page</a></li>
|
||||||
|
<li><a href="./listings.html">Listings</a></li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="../styles.css">
|
||||||
|
<title>Listings Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h1>This is the LISTINGS page</h1>
|
||||||
|
<img src="https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80" alt="">
|
||||||
|
<ol>
|
||||||
|
<li><a href="../index.html">Main Page</a></li>
|
||||||
|
<li><a href="./index.html">Music Page</a></li>
|
||||||
|
<li><a href="./reviews.html">Reviews Page</a></li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="../styles.css">
|
||||||
|
<title>Reviews Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h1>This is the REVIEWS page</h1>
|
||||||
|
<img src="https://images.unsplash.com/photo-1561948955-570b270e7c36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1201&q=80" alt="">
|
||||||
|
<ol>
|
||||||
|
<li><a href="./index.html">Music Page</a></li>
|
||||||
|
<li><a href="../index.html">Main Page</a></li>
|
||||||
|
<li><a href="./listings.html">Listings</a></li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
img {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Images</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>This is the images page.</h2>
|
||||||
|
|
||||||
|
<p>go back to <a href="../index.html">../index.html</a>page</p>
|
||||||
|
<p>go back to <a href="../link.html">../link.html</a> page</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>S04: HTML Attributes and Hyperlinks</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body align="center">
|
||||||
|
<h2 id="top">HTML Attributes</h2>
|
||||||
|
<p>
|
||||||
|
<em>Modifiers of element behavior</em>
|
||||||
|
</p>
|
||||||
|
<h2>HTML Images</h2>
|
||||||
|
<p><em>
|
||||||
|
An image can be shown using the <img> tag along with its <strong>src</strong> attribute.
|
||||||
|
</em></p>
|
||||||
|
<!-- Image with absolute link -->
|
||||||
|
<a id="img" href="https://place-puppy.com"><img src="https://place-puppy.com/450x450" alt=""></a>
|
||||||
|
|
||||||
|
<br><code><https://place-puppy.com/450x450></code>
|
||||||
|
<br><img src="images/zuittlogo.png" alt="">
|
||||||
|
|
||||||
|
<br><code>
|
||||||
|
<img src="images/zuittlogo.png"></code>
|
||||||
|
</code>
|
||||||
|
|
||||||
|
<p>Valid Image extensions are the following</p>
|
||||||
|
<ol type="i" align="left" reversed>
|
||||||
|
<li>png</li>
|
||||||
|
<li>jpg</li>
|
||||||
|
<li>gif</li>
|
||||||
|
<li>svg</li>
|
||||||
|
<li>webp</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>Take a look at the w3schools attribute references <a href="https://www.w3schools.com/" target="_blank">here</a>.</p>
|
||||||
|
|
||||||
|
<h2>HTML Links</h2>
|
||||||
|
<h4>Absolute Link</h4>
|
||||||
|
<a href="https://zuitt.co" target="_blank">I'm a Hyperlink</a>
|
||||||
|
|
||||||
|
<h4>Relative Link</h4>
|
||||||
|
<p>Go to <a href="./link.html">link.html</a> page.</p>
|
||||||
|
<p>Go to <a href="./images/index.html">images/index.html</a> page.</p>
|
||||||
|
|
||||||
|
<!-- Redirects to top -->
|
||||||
|
<p>Go back to <a href="#top">Top</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Link</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>This is the link page</h2>
|
||||||
|
<p>Go to back to <a href="./index.html">index.html</a> page</p>
|
||||||
|
<p>Go to back to <a href="./images/index.html">images/index.html</a> page</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue