misterhtmlcss/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <!--
  The following 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Short description of the document (limit to 150 characters) -->
  <!-- This content *may* be used as a part of search engine results. -->
  <meta name="description" content="A description of the page">

  <link rel="stylesheet" href="style.css">
  <title>Home</title>
</head>

<body>
  <!--
    What semantic tags do we need to use!
    - <header>
    - <nav>
    - <main>
    - <section>
    - <footer>
  -->
  <header>
    <h1>Home</h1>
    <hr>
    <nav>
      <ul>
        <li>Home</li>
        <li>Bio</li>
        <li>Books</li>
        <li>Contact</li>
        <li>Open Source Projects</li>
        <li>Partners</li>
        <li>RFCs</li>
        <li>Whitepapers</li>
      </ul>
    </nav>
    <hr>
  </header>
  <main>
    <section>
      <h2>TIC is a consulting firm specializing in:</h2>
      <ul>
        <li>GNU</li>
        <li>Unix</li>
        <li>TCP/IP</li>
        <li>Network Security</li>
        <li>Open Source Tool</li>
      </ul>
    </section>
    <hr>
    <section>
      <label for="search">Search TIC:
        <input type="text" name="search" id="search">
      </label>
      <button>Search</button>
    <!-- Try add in the rest of the forms   -->
    </section>

    Match
    <select>
      <option value="All">All</option>

      <option value=”Any”>Any</option>

      <option value=”Boolean”>Boolean</option>

    </select>

  </main>
  <footer>
    <hr>
    <img src="https://www.tic.com/apache_pb.png" class="apache" alt="apache logo">
    <img src="http://www.w3.org/Icons/valid-xhtml10" class="W3C" alt="Valid XHTML 1.0 logo">

  </footer>

</body>
</html>

## style.css
html, body {
  background: rgb(249, 253, 196);
}

.apache {
  height: 32px;
  width: 259px;
}

.W3C {
  height:"31";
  width:"88";
}

hr {
  height: 2px;
  background: red;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<!--
	The following 2 meta tags must come first in the <head>
	to consistently ensure proper document rendering.
	Any other head element should come after these tags.
	-->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Short description of the document (limit to 150 characters) -->
	<!-- This content may be used as a part of search engine results. -->
	<meta name="description" content="A description of the page">

	<link rel="stylesheet" href="style.css">
	<title>Home</title>
	</head>

	<body>
	<!--
	What semantic tags do we need to use!
	- <header>
	- <nav>
	- <main>
	- <section>
	- <footer>
	-->
	<header>
	<h1>Home</h1>
	<hr>
	<nav>
	<ul>
	<li>Home</li>
	<li>Bio</li>
	<li>Books</li>
	<li>Contact</li>
	<li>Open Source Projects</li>
	<li>Partners</li>
	<li>RFCs</li>
	<li>Whitepapers</li>
	</ul>
	</nav>
	<hr>
	</header>
	<main>
	<section>
	<h2>TIC is a consulting firm specializing in:</h2>
	<ul>
	<li>GNU</li>
	<li>Unix</li>
	<li>TCP/IP</li>
	<li>Network Security</li>
	<li>Open Source Tool</li>
	</ul>
	</section>
	<hr>
	<section>
	<label for="search">Search TIC:
	<input type="text" name="search" id="search">
	</label>
	<button>Search</button>
	<!-- Try add in the rest of the forms -->
	</section>

	Match
	<select>
	<option value="All">All</option>

	<option value=”Any”>Any</option>

	<option value=”Boolean”>Boolean</option>

	</select>

	</main>
	<footer>
	<hr>
	<img src="https://www.tic.com/apache_pb.png" class="apache" alt="apache logo">
	<img src="http://www.w3.org/Icons/valid-xhtml10" class="W3C" alt="Valid XHTML 1.0 logo">

	</footer>

	</body>
	</html>
	html, body {
	background: rgb(249, 253, 196);
	}

	.apache {
	height: 32px;
	width: 259px;
	}

	.W3C {
	height:"31";
	width:"88";
	}

	hr {
	height: 2px;
	background: red;
	}