71 lines
4.1 KiB
HTML
71 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
|
|
<link rel="icon" href="../images/favicon.png" type="image/x-icon"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="UTF-8">
|
|
<link href="../style/style.css" rel="stylesheet" type="text/css" media="all">
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="header">...</div>
|
|
<div id="content">
|
|
<h1>H1 is a Large Heading for Post Titles!</h1> <!--In general, this content is automatically generated for blog posts-->
|
|
|
|
<h2>H2 is a Medium Heading</h2>
|
|
|
|
<h3>H3 is a Small Heading</h3>
|
|
|
|
<p>The <p> tag is for paragraphs. Paragraphs just like this one! This is an example paragraph.</p>
|
|
|
|
<p>Here's how you use <strong>BOLD</strong> text.</p>
|
|
|
|
<p>And here's how you use <em>italic</em> text.</p>
|
|
|
|
<a href="the_actual_link_goes_here">The <a> tag is for links!</a>
|
|
|
|
<ol>
|
|
<li>You can make an <ol> like this!</li>
|
|
<li><ol> stands for "Ordered List"</li>
|
|
<li>That means that the list is numbered!</li>
|
|
</ol>
|
|
|
|
<ul>
|
|
<li>Or how about a <ul>, know what that stands for?</li>
|
|
<li>That's right! <ul> is "Unordered List"</li>
|
|
<li>That means that the list uses bullets.</li>
|
|
</ul>
|
|
|
|
<img src="../images/lake.jpg" alt="Concise description of lake photo for screen readers or if image fails to load.">
|
|
<p class="caption">This is an image caption! Huh? It's just a <p> tag! Ah, but we have added the class "caption"! "Classes" allow us to set special styles for certain elements.<p>
|
|
|
|
<p>Ahhh, back to a regular paragraph. All of that italicized text was making me a bit hoarse. </p>
|
|
|
|
<img src="../images/lake.jpg" alt="Alt text" class="small right">
|
|
|
|
<p>Wow, that image is smaller and aligned to the right. This text is flowing around it!</p>
|
|
<p>Oh, I see... we added <em>two</em> classes to it... <em>small</em> and <em>right</em>! Marina must have set special styles in the CSS file for images with the <em>small</em> and <em>right</em> classes. Goodness gracious, what will she think of next?</p>
|
|
<p>You might be confused if you're viewing this on a phone. When the screen gets <em>really</em> small, then the <em>small</em> class images just revert to taking up the whole width (responsive design). Otherwise they'd just be too ridiculously small! But I bet if you rotate your phone to wide view, you'll be able to see the effects of the <em>small</em> and <em>right</em> classes on images...</p>
|
|
|
|
<a href=""><img src="../images/lake.jpg" alt="Alt text"></a>
|
|
<p>Hmmm... there's something strange about this image...</p>
|
|
<p>Yikes! It's a link!! I guess you can put an <img> tag <em>inside</em> an <a> tag to create an image link!</p>
|
|
<p>If you've been following along inside the HTML editor, you might be wondering, what are all those weird codes with stuff in-between & and ;? Those are called escape characters. < means "less than" symbol and > means "greater than" symbol. Those symbols are used in HTML tags. But if I try to write actual HTML tags to talk to you about them, then the computer will get confused. So somtimes we need to speak, quite literally, in code, to get around this. Maybe you are like... a math blogger so I thought I'd just let you know ahead of time. If you get unexpected results, check back over your writing. You might have typed something that to a human is normal but to a computer is confusing!</p>
|
|
|
|
|
|
|
|
<!--You can have empty space in your HTML file. It will just be ignored.-->
|
|
|
|
|
|
|
|
<p>Well, that's all for now. Keep this file around and use it for reference if you'd like. Happy blogging!</p>
|
|
<p>~Marina</p>
|
|
</div> <!-- end of div id="content" -->
|
|
<div id="footer"></div>
|
|
</div> <!-- end of div id="container" -->
|
|
<!-- Here's the link to our JavaScript! -->
|
|
<script src="../script.js"></script>
|
|
</body>
|
|
</html>
|