webサイトの作り方の基本を再確認

こんにちは、かずまなぶです、２０１９年　あけましておめでとうございます。

初心に帰りまして、いままで乱雑に学んできてしまった、webサイトの作り方の基本を今一度確認しようと思います。

基本要素をふんだんに使ったHTMLサンプルコード

<!DOCTYPE html>
<!-- this html code is a format for making website -->
<html>
  <head>
    <meta charset="UTF-8">
    <title>fill the title here</title>
    <meta name="description" content="introduction of this web-site here">
    <meta name="keywords"
          content="keyword,keyword,keyword,keyword,keyword,keyword">
    <meta name="author" content="write the author here">
    <link rel="stylesheet" media="all" href="css/style.css" type-"text/css">
  </head>
  
  <body>
    <header>
      <h1 style="color:red;">Self Introduction</h1>
      <h2 style="color:blue;">I am a mechanical engineer in Tokyo.</h2>
      
      <nav id="navigation">
      	<ul id="un-order_list">
       	  <li class="list_item">
       	  	<a href="#" class="anchor">ABOUT</a>
       	  </li>
          <li class="list_item">
          	<a href="#" class="anchor">GELLERY</a>
          </li>
          <li class="list_item">
          	<a href="#" class="anchor">CONTACT</a>
          </li>
        </ul>
      </nav>
    </header>

    <div id="img">
      <img src="images/file_name.png"
           alt="explane about this image file"
           width="500">		
    </div>

    <div id="statement">
      <h1 width="250">write mark-up statements here</h1>
      <p>write 1st statement here</p>
      <p>and 2nd statement here  <br>
      and 3rd statement here  </p>
    </div>
    
    <div id="contents_list">
    	<h1>My skills</h1>
    	<ol id="order_list">
    	  <li><a href="#"><img src="images/AI.png" alt="AI"><br>Artificial Interigence</a></li>
    	  <li><a href="#"><img src="images/CV.png" alt="CV"><br>Computer vision</a></li>
    	  <li><a href="#"><img src="images/VR.png" alt="VR"><br>Virtual Reality</a></li>
    	  <li><a href="#"><img src="images/QC.png" alt="QC"><br>Quality Control</a></li>
    	  <li><a href="#"><img src="images/QC.png" alt="DB"><br>Data Base</a></li>
    	</ol>
    </div>

    <footer id="footer">
    	<img src="images/twitter.png" alt="twitter_logo"><br>
        <img src="images/facebook.png" alt="facebook_logo"><br>
        <p id="paragraph">&copy;2019 Kazu Manabu</p>
    </footer>

  </body>
</html>