<!DOCTYPE html>
<html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./sample.jpg">
</head>
<body>
hey hey.
<h2>document as you go!</h2>
<div class="opener">
<div class="title">
HTML Basics
</div>
<a class="toc-1" href="#1">line breaks</a><br>
<a class="toc-1" href="#2">headers</a><br>
<a class="toc-1" href="#3">lists</a><br>
<a class="toc-1" href="#4">media</a><br>
<a class="toc-2" href="#4.1">images</a><br>
<a class="toc-2" href="#4.2">videos</a><br>
<a class="toc-1" href="#5">resources & tutorials</a><br>
</div>
<div class="main-text">
now you get fancy with with a css style script and <code><div></code>
tags which allow you to define blocks with sepcific styles on the html page !
<br><br>
<h2 id="1">line breaks</h2>
add a line break like
<br>
this
<br>
with <code><br></code>
<h2 id="2">Headers</h2>
You can organize all of the information in your page with nested header
fields of varying sizes
<div class="block-container">
<div>
<b>so that this:</b>
<br><br>
<xmp>
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4 </h4>
<h5>header 5</h5>
</xmp>
</div>
<div>
</b>should look like this:</b>
<br><br><br><br>
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4 </h4>
<h5>header 5</h5>
</div>
</div>
<h2 id="3">Lists</h2>
you can create a numbered list (ordered list) with <code><ol>
</ol></code> or bullet points (unordered list) with <code><ul>
</ul></code> and then embed list items with <code><li>
</li></code>
<div class="block-container">
<div>
<b>so that this:</b>
<br><br>
<xmp>
number list
<ol>
<li>first point</li>
<li>second point</li>
<li>third point</li>
</ol>
or bullet points
<ul>
<li>bullet one</li>
<li>bullet two</li>
<li>bullet three</li>
</ul>
</xmp>
</div>
<div>
<b>should end up looking like this:</b>
<br><br><br><br>
number list
<ol>
<li>first point</li>
<li>second point</li>
<li>third point</li>
</ol>
or bullet points
<ul>
<li>bullet one</li>
<li>bullet two</li>
<li>bullet three</li>
</ul>
</div>
</div>
<h2 id="4">media</h2>
<h3 id="4.1">images</h3>
embed images with the <code><img></code> tag
<div class="block-container">
<div>
<xmp>
<img src="path/to/img_file.png"
alt="alternative text description"
width="500" height="600"></xmp>
</div>
<div>
<img src="../media/sample.jpg" alt="example image" height="200">
</div>
</div>
<br></br>
<br><br>
<h3 id="4.2">videos</h3>
or videos with <code><video></code> tag
<br><br>
<div class="block-container">
<div>
<xmp>
<video width="320" height="240" controls>
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</xmp>
</div>
<div>
<video width="320" height="240" controls>
<source src="../media/sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<h2 id="5">more resources and tutorials</h2>
<ul>
<li><a href="https://www.w3schools.com/css/default.asp">css tutorial</a></li>
<li><a href="https://www.w3schools.com/css/css3_flexbox.asp">css flex blocks</a></li>
</ul>
</div>
</body>