diff --git a/simple.html b/simple.html deleted file mode 100644 index 173cdac866743e690a0d95de90b07e5b24e4b2f0..0000000000000000000000000000000000000000 --- a/simple.html +++ /dev/null @@ -1,18 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <title>WEBSITE</title> - </head> - <body> - hey hey. - <br><br> - <h2>document as you go!</h2> - <br><br> - spent hours typing up this page - <br><br> - scrutinizing formatting - <br><br> - overlaying blocks with barebones css at the top of the html file - <br><br> - i would be sad if I lost this - </body> diff --git a/simple/index.html b/simple/index.html new file mode 100644 index 0000000000000000000000000000000000000000..5f9951e04bd58b7f0b89f4569a8994dab2359910 --- /dev/null +++ b/simple/index.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html> + <head> + <title>WEBSITE</title> + </head> + <body> + hey hey. + <h2>document as you go!</h2> + so you write a simple function website with raw html and a few style tags + added to the head section + <h1>HTML Basics</h1> + + <h2>line breaks</h2> + add a line break like + <br> + this + <br> + with <code><br></code> + + <h2>Headers</h2> + You can organize all of the information in your page with nested header + fields of varying sizes with: + <xmp> + <h1>header 1</h1> + <h2>header 2</h2> + <h3>header 3</h3> + <h4>header 4 </h4> + <h5>header 5</h5> + </xmp> + that should look like: + <br> + <h1>header 1</h1> + <h2>header 2</h2> + <h3>header 3</h3> + <h4>header 4 </h4> + <h5>header 5</h5> + + + <h2>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> + + <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> + should end up looking like this: + <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> + + <h2>media</h2> + embed images with the <code><img></code> tag + <br></br> + <code>< img src="path/to/img_file.jpg" alt="alternative text description" + width="500" height="600"></code> + <br><br> + <img src="sample.jpg" alt="example image" height="400"> + <br><br> + or videos with <code><video></code> tag + <br><br> + <code><video width="320" height="240" controls> <br> + <source src="path/to/movie.mp4" type="video/mp4"><br> + Your browser does not support the video tag.<br> + </video></code> + <br><br> + <video width="320" height="240" controls> + <source src="sample.mp4" type="video/mp4"> + Your browser does not support the video tag. + </video> + <br><br> + + <h2>more resources and tutorials</h2> + <ul> + <li><a href="https://www.w3schools.com/tags/tag_header.asp">headers</a></li> + <li><a href="https://www.w3schools.com/tags/tag_li.asp">lists</a></li> + <li><a href="https://www.w3schools.com/tags/tag_img.asp">images</a></li> + <li><a href="https://www.w3schools.com/tags/tag_video.asp">videos</a></li> + </ul> + + + </body> diff --git a/simple/sample.jpg b/simple/sample.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6799d4d32b588699dbef0f65b26ba70bc9ade29a Binary files /dev/null and b/simple/sample.jpg differ diff --git a/simple/sample.mp4 b/simple/sample.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..b3c0df09e0311fbdcee27a4d437f4850ba18c152 Binary files /dev/null and b/simple/sample.mp4 differ