HTML完全初心者が勉強してみた


こんにちは:-)

# KONICHIWA JAPAN　と表示させてみる
```Javascript
<!DOCTYPE html>
<html>
<head>
    <meta charaset="utf-8" />
    <title> KONICHIWA JAPAN </title>
</head>
<script>
document.write("KONICHIWA!")
</script>
</html>
```
これを実行すると以下のようになる。
![2021-12-23 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2421377/b7db33e4-6003-aea3-cec3-762033610852.jpeg)

## 作成手順
1，Visual Studio Code を起動する
2，新しいファイルを作成する、名前を　〇〇.html　とする　
3，上記のプログラムを書く
4，保存する
5，ファイル名の上で右クリック→”エクスプローラーで表示する”をクリック
6，結果がブラウザ上で保存される

## 語句の意味
Javascript初心者なので、一つ一つのプログラムの意味を知ろうと思い、調べてみた

`<!DOCTYPE html>`： Document Type Definitionの略　
HTMLの仕様をブラウザに認識させるための宣言
C言語での#include < stdio.h >　だと思った

`<html>`:HTMLの文書を書くために基底となる要素
<!DOCTYPE html>以外の要素は全てこのタグの内側に入れる必要がある

`<head>~</head>`：機械可読な情報を入れる、題名など

` <meta charaset="utf-8" />`：文字コードを指定し文字化けを防ぐ
meta要素により情報を指定する。charaset属性でHTMLファイルの文字コードを指定する

`<script>~</script>`：Javascriptをドキュメントに埋め込む、実行するコードをここに入れる
この中だけJavaScriptで残りはHTMLかな？

# ボタンで画像を表示させてみる
色んなサイトを見て、５枚の画像を１枚ずつ表示させる。
ボタンを２個作成し、前からも後ろからでも見れるようにした。
注釈のつけ方がわかったので、よくわからない部分についてはコードの中にコメントを書いた。

```JavaScript
<!DOCTYPE html>
<html>
<head>
    <meta charaset="utf-8" />
    <title> USAGI </title>
</head>
<body>
    <!--width=ボタン幅、height=ボタン高さ、font-size=ボタンの文字の大きさ
    onclickはクリック時の処理-->>
    <button style = "width:500px; height:100px; font-size:80px " onclick="foward()">次</button>
    <button style = "width:500px; height:100px; font-size:80px " onclick="back()">戻る</button>
    <br><!--改行要素-->

    <img id="image_place" src="image1.jpg">

    <script>
        //指定したidに合ったドキュメント要素を取得する
        let img = document.getElementById("image_place")
        //画像番号
        let idx = 1;

        //画像切り替える関数
        function foward(){
            idx++;
            if(idx > 5){
                idx = 1;
            }
            //scrに画像ファイル名を設定
            img.src = "image" + idx + ".jpg";
            src.height = 100;
        }

        function back(){
            idx--;
            if(idx < 1){
                idx = 5;
            }
            img.src = "image" + idx + ".jpg";
            src.height = 100;
        }

    </script>
</body>
</html>

```
表示させた画像は以下の通り
######image1
![image1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2421377/bec4ec93-3cab-133b-b9ea-80fcccdd58c7.jpeg)
######image2
![image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2421377/c5d0b2a3-ce9d-07a7-aef4-ca8b0bb1661e.jpeg)
######image3
![image3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2421377/14b495be-d777-66fa-2978-eb0e265c91a8.jpeg)
######image4
![image4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2421377/415ae8a3-6ee1-a30d-9233-812c7e85139b.jpeg)
######image5
![image5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2421377/e21b8551-b5c7-1758-a8de-2623b358c2fe.jpeg)





## 感想
ボタンの大きさや文字の大きさの変更はできたが、画像自体の比率や大きさが変更できなかった。ボタン自体のデザインを変更するのにはCSSがいると様々なサイトに載っていたので、それも少し見てみたいと思った。
Javascriptも全然わかっていない状況だし、Qiitaの投稿自体も特殊でめちゃくちゃ難しい。でもたのしいからOK^^

## 参考文献
[【HTML】意外と重要なDOCTYPE宣言についてわかりやすく解説。](https://style.potepan.com/articles/20172.html)
[ < html >: HTML 文書 / ルート要素]
(https://developer.mozilla.org/ja/docs/Web/HTML/Element/html)
[ELEMENT meta 要素 ページに関する情報を表す要素]
(https://creatorquest.jp/reference/html/element/meta/#charset-attribute)
[JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】]
(https://techacademy.jp/magazine/20738#sec2)