小学生対象のプログラミング教室検索

HTML言語ってどんなの?

HTML言語って?

HTML言語の役割は、「画面の表示」部分になります。

画面の表示とは、つまり、アプリのデザインになるわけです。HTML言語を学べば、学ぶほど、アプリの画面がカッコ良くなっていきます。

今回のサンプル画面からまずは、HTML言語の構造を理解しましょう!

下記のソースコード(プログラミングで書かれているもの)に説明文を入れていきます。

<!DOCTYPE HTML> //HTML言語ですよと説明してるだけ。いつも入れておく。
<html> //ここからHTML言語のスタート。
<head> //下記からのhead(ヘッド)タグの中身で、HTMLの設定をしますが、最初はわからなくて大丈夫です!
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        // PhoneGap event handler
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log("PhoneGap is ready");
        }
    </script>
</head> //ここでheadタグが終了
<body>  //ここからbody(ボディー)タグがスタート。デザイン本体部分ですので、ここを改造していきます!

    <h1>HelloWorld!</h1>
    <a class="button--large" href="phonegap-demo.html">Start Demo</a>

</body> //ここでbodyタグが終了
</html>  //ここでhtmlタグが終了

HTML言語の基本は「HTMLタグ」と呼ばれる<>で囲まれた文字です。
HTMLはタグでくくって、使っていきます。

例:
<strong>ここが太文字になる</strong>

HTMLの基本のかたち

<!DOCTYPE HTML>
<html>
<head>
画面の表示サイズなどの設定を書く。
</head>
<body>
本体部分
</body>
</html>