My Ultimate HTML Guide

My Ultimate HTML Guide - student project

This isn't as pretty as some of the other projects, but all 10 pages are functional. I couldn't figure out how to publish this as a website, so here are a series of photos with some of the code below some of the assignment pages. Too much code to post it all.

The first page is 26 sections long, then the other 9 pages are class assignments.

The parts I had a hard time with included;

1) Posting this as a website.

2) Sizing images and the video.

3) Setting the video controls and autoplay.

4) Producing a readout on the post.php page, using the POST method.

Setting an image as the background.

My Ultimate HTML Guide - image 1 - student project

My Ultimate HTML Guide - image 2 - student project

My Ultimate HTML Guide - image 3 - student project

My Ultimate HTML Guide - image 4 - student project

My Ultimate HTML Guide - image 5 - student project

My Ultimate HTML Guide - image 6 - student project

My Ultimate HTML Guide - image 7 - student project

My Ultimate HTML Guide - image 8 - student project

My Ultimate HTML Guide - image 9 - student project

  <div style="border:5px double black; margin:2%; padding:3%;">    
      <form method="GET" action=" ">
          First Name:
          <input type="text" placeholder="first name" name="fname" class="textbox"/> <br/>
          Last Name:
          <input type="text" placeholder="last name" name="lname" class="textbox"/> <br/>
          Age Group:
           <select class="textbox">
             <option value="0-9">0-9</option>
             <option value="10-19">10-19</option>
             <option value="20-29" selected="selected">20-29</option>
             <option value="30-39">30-39</option>
             <option value="40-49">40-49</option>
             <option value="50-59">50-59</option>
             <option value="60-69">60-69</option>
             <option value="70-79">70-79</option>
             <option value="80-89">80-89</option>
             <option value="90-99">90-99</option>
             <option value="100-109">100-109</option>
             <option value="110-119">110-119</option>
           </select> <br/>
           Password:
             <input type="password" name="password"class="button" placeholder="8 character minimum" autofocus="autofocus" /> <br/>
             <button type="submit" name="submit" class="button" style="color:white; background-color: green; border-bottom-color: black; border-right-color: black;">Submit</button>
             <button type="reset" name="reset" class="button" style="color:white; background-color: red; border-bottom-color: black; border-right-color: black;">Reset</button>
   </form>
  </div>
 
    <div style="border:5px double black; margin:2%; padding:3%;">    
      <form method="POST" action="post.php">
          First Name:
          <input type="text" placeholder="first name" name="fname" class="textbox"/> <br/>
          Last Name:
          <input type="text" placeholder="last name" name="lname" class="textbox"/> <br/>
          Age Group:
           <select class="textbox" name="select">
             <option value="0-9">0-9</option>
             <option value="10-19">10-19</option>
             <option value="20-29" selected="selected">20-29</option>
             <option value="30-39">30-39</option>
             <option value="40-49">40-49</option>
             <option value="50-59">50-59</option>
             <option value="60-69">60-69</option>
             <option value="70-79">70-79</option>
             <option value="80-89">80-89</option>
             <option value="90-99">90-99</option>
             <option value="100-109">100-109</option>
             <option value="110-119">110-119</option>
           </select> <br/>
           Password:
             <input type="password" name="password"class="button" placeholder="8 character minimum" autofocus="autofocus" /> <br/>
             <button type="submit" name="submit" class="button" style="color:white; background-color: green; border-bottom-color: black; border-right-color: black;">Submit</button>
             <button type="reset" name="reset" class="button" style="color:white; background-color: red; border-bottom-color: black; border-right-color: black;">Reset</button>
   </form>
  </div>

My Ultimate HTML Guide - image 10 - student project

  <div class="border">    
   <form>
   <p>What type of news would you like to read today?</p>
     <select name="selected" class="button">
      <option value="1" disabled="disabled">Good News</option>
      <option value="2">Fake News</option>
      <option value="3" selected="selected">No News</option>
      <option value="4">All News</option>
      <option value="5">Celebrity  News</option>
     </select> <br>
     <button type="submit" class="button" style="color:white; background:gray;"><b>Submit</b></button>
    </form>
  </div>

My Ultimate HTML Guide - image 11 - student project

     <video width="600" height="400" controls="controls" autoplay="autoplay" >
        <source src="gyrophobia.mp4" type="video/mp4" alt="Your browser does not support .Mp4 file format."/>
     </video>

 

 

 

 

 

 

Glo Russo
Always Learning...