Assignment Solutions - Intro to HTML

<br />
<div><img src="https://i.imgur.com/0AUxkXt.png" /></div>
<br />
<h2>Basic HTML Assignments</h2>
<p>In this assignment you will only work on the HTML.</p>
<br />
<section>
  <h4>Assignment 1 - HTML Comment</h4>
  <p>Comment the second paragraph of the following HTML document:</p>
  <!--  YOUR CODE STARTS HERE  -->
  <h5>In this course we'll learn:</h5>
  <p>HTML & CSS</p>
  <!--   <p>Python</p> -->
  <p>Javascript</p>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4 id="Assignment_2">Assignment 2 - Hyperlink 1</h4>
  <p>Create a hyperlink that leads to www.coderschool.vn</p>
  <!--  YOUR CODE STARTS HERE  -->
  <a href="https://www.coderschool.vn/vi/">CoderSchool</a>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 3 - Hyperlink 2</h4>
  <p>
    Create a hyperlink to take you to another part of the same HTML document
    <i>(e.g. jump to the last assignment)</i>
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <a href="#Assignment_2">Go to Assignment 2</a>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 4 - Hyperlink 3</h4>
  <p>
    Create a hyperlink that opens the linked document in a separate browser tab
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <a href="https://www.coderschool.vn/vi/" target="_blank">Coderschool</a>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 5 - Audio</h4>
  <p>
    Embed an audio clip into this page (Ref:
    <a href="https://htmlreference.io/element/audio" target="_blank"
      >https://htmlreference.io/element/audio</a
    >)
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <div>
    <audio controls="">
      <source
        src="https://p.scdn.co/mp3-preview/0ba9d38f5d1ad30f0e31fc8ee80c1bebf0345a0c"
        type="audio/mpeg"
      />
    </audio>
  </div>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 6 - Video</h4>
  <p>Embed an Youtube clip into this page</p>
  <!--  YOUR CODE STARTS HERE  -->
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/iA0HY2dQWFU"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 7 - Image</h4>
  <p>Create an image with these attributes:</p>
  <ul>
    <li>An alternate text</li>
    <li>The size of the image is 250 pixels wide and 400 pixels tall.</li>
  </ul>
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <img src="https://i.pinimg.com/564x/e7/23/5a/e7235a0f3e32e6598f356bc988548f42.jpg" alt="cats don't like cuddle" width=250px height=400px></img>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 8 - Bold text</h4>
  <p>Make the word "easy" bold in the text below:</p>
  <!--  YOUR CODE STARTS HERE  -->
  <b>Easy</b>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 9 - Underline text</h4>
  <p>Underline the word CoderSchool in the text below:</p>
  <!--  YOUR CODE STARTS HERE  -->
  <p>At <u>CoderSchool</u>, we are always learning!</p>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 10 - Strikeout</h4>
  <p>
    Add a line through the word <strong>"not"</strong> in the sentence below:
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <p>The Basic HTML assignments are <s> not</s> easy</p>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 11 - Line break</h4>
  <p>Add a line break in middle of the two paragraphs below:</p>
  <!--  YOUR CODE STARTS HERE  -->
  <p>Me</p>
  <br />
  <p>Money</p>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 12 - Horizontal Line</h4>
  <p>Add a horizontal line between the two paragraphs below:</p>
  <!--  YOUR CODE STARTS HERE  -->
  <p>I need a private room.</p>
  <hr />
  <p>Me too!</p>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 13 - Unordered List</h4>
  <p>Create an unordered list with three items.</p>
  <!--  YOUR CODE STARTS HERE  -->
  <p>The list of my most favorite animals :</p>
  <ul style="list-style-type:circle">
    <li>Cats</li>
    <li>Dogs</li>
    <li>Rabbits</li>
  </ul>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 14 - Ordered Lists</h4>
  <p>
    Create three ordered lists that use numbers/uppercase ABC/roman numbers for
    the item. Each has 2 items.
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <p>List of my cats:</p>
  <ol type="1">
    <li>Snowie</li>
    <li>Nana</li>
  </ol>
  <p>List of my cats:</p>
  <ol type="A">
    <li>Snowie</li>
    <li>Nana</li>
  </ol>
  <p>List of my cats:</p>
  <ol type="i">
    <li>Snowie</li>
    <li>Nana</li>
  </ol>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 15 - Table</h4>
  <p>Create a table with two rows, three columns, and headers.</p>
  <!--  YOUR CODE STARTS HERE  -->
  <table>
    <tr>
      <th>Pet Clinic in HCMC</th>
      <th>Contact</th>
      <th>District</th>
    </tr>
    <tr>
      <td>PetZone</td>
      <td>Mr. Tuan</td>
      <td>District 4</td>
    </tr>
    <tr>
      <td>Saigon Pet Hospital</td>
      <td>Dr. Nghia</td>
      <td>District 2</td>
    </tr>
  </table>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 16 - Navigation links</h4>
  <p>Define a section with 3 navigation links.</p>
  <!--  YOUR CODE STARTS HERE  -->
  <nav class="CoderSchool">
    <a href="#">Coderschool</a>
    <a href="#">Navigation Link</a>
    <a href="#">Assignment</a>
  </nav>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 17 - Toggable Detail</h4>
  <p>
    How to define a toggable block of content with a summary and additional
    details. (Ref:
    <a href="https://htmlreference.io/element/details" target="_blank"
      >https://htmlreference.io/element/details</a
    >)
  </p>
  <!--  YOUR CODE STARTS HERE  -->
  <details>
    <summary>Coding</summary>
    The process of assigning a code to something for classification or
    identification.
  </details>
  <!--  YOUR CODE ENDS HERE  -->
</section>

<section>
  <h4>Assignment 18 - Form</h4>
  <p>Create a form that asks for:</p>
  <ul>
    <li>
      Email, password and confirm password. Each of the field has a arcording
      placeholder.
    </li>
    <li>Title (Radio box), 2 options: <i>Developer</i> or <i>Employer</i></li>
    <li>
      Interested in (Checkbox), 3 options: <i>ReactJS</i>, <i>NodeJS</i>,
      <i>Web Design</i>
    </li>
    <li>
      City (Select box), 3 options: <i>Hanoi</i>, <i>HCMC</i>, <i>Da Nang</i>
    </li>
    <li>Short Bio (Text area)</li>
    <li>A confirm button which is disabled.</li>
  </ul>
  <!--  YOUR CODE STARTS HERE  -->
  <p><i>Replace this with your solution</i></p>
  <form>
    <label for="email">Email:</label>
    <br />
    <input id="email" type="text" name="email" placeholder="your@email.com" />
    <br />
    <br />
    <label for="password" >Password:</label>
    <br />
    <input
      id="password"
      type="password"
      name="password"
      placeholder="Input your password"
    />
    <br />
    <br />
    <label for="confirm-password" >Confirm Password:</label>
    <br />
    <input
      id="confirm-password"
      type="password"
      name="Password"
      placeholder="Input your password"
    />
    <br />
    <br />
    <label>Tittle:</label>
    <br />
    <input type="radio" name="Developer" value="Developer" /> Developer<br />
    <input type="radio" name="Employer" value="Employer"/> Employer<br />
    <br />
    <label>Intersted in:</label>
    <br />
    <input type="checkbox" name="ReactJS" value="ReactJS" /> ReactJS<br />
    <input type="checkbox" name="NodeJS" value="nodeJS" /> NodeJS<br />
    <input type="checkbox" name="Web Design" value="Web Design" /> Web Design<br />
    <br />
    <label>City:</label>
    <br />
    <select name="City" id="City">
      <option value="Ha Noi">Ha Noi</option>
      <option value="HCMC">HCMC</option>
      <option value="Da Nang">Da Nang</option>
    </select>
    <br />
    <br />
    <label>Short Bio:</label>
    <br />
    <textarea id="Short Bio" name="Short Bio" rows="4" cols="50">
      Write something about yourself
    </textarea>
    <br />
    <br />
    <button type="button" disabled>Confirm</button>
  </form>
  <!--  YOUR CODE ENDS HERE  -->
</section>