S04 Activity / Discussion

master
Ron Reciproco 1 year ago
parent a78a99770a
commit aa889ed078

@ -3,37 +3,21 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S04: HTML Attributes and Hyperlinks</title> <link rel="stylesheet" href="styles.css">
<title>Main Page</title>
</head> </head>
<body align="center"> <body>
<h2 >HTML Attributes</h2> <main>
<p> <section>
<em>Modifiers of element behavior</em> <h1>This is the MAIN page</h1>
</p> <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1143&q=80" alt="">
<h2>HTML Images</h2> <ol>
<p><em> <li><a href="./music/index.html">Music Page</a></li>
An image can be shown using the &lt;img&gt; tag along with its <strong>src</strong> attribute. <li><a href="./music/reviews.html">Reviews</a></li>
</em></p> <li><a href="./music/listings.html">Listings</a></li>
<!-- Image with absolute link -->
<img src="https://place-puppy.com/450x450" alt="">
<br><code>&lt;https://place-puppy.com/450x450&gt;</code>
<br><img src="images/zuittlogo.png" alt="">
<br><code>
&lt;img src="images/zuittlogo.png"&gt;</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> </ol>
</section>
</main>
<h2>HTML Links</h2>
<h4>Absolute Link</h4>
<a href="https://zuitt.co" target="_blank">I'm a Hyperlink</a>
</body> </body>
</html> </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>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>

@ -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 &lt;img&gt; 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>&lt;https://place-puppy.com/450x450&gt;</code>
<br><img src="images/zuittlogo.png" alt="">
<br><code>
&lt;img src="images/zuittlogo.png"&gt;</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…
Cancel
Save