前回はWEBアプリの概要をお話をさせていただきました。
今回はちょっとだけ掘り下げて、WEBアプリといえば「HTML」です。
ということで、WEBアプリ開発をする上で絶対に避けては通れない、HTMLの超基本の動作や考え方を解説します。
HTMLってなに？
HTML（エイチ・ティー・エム・エル）は Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。
むずかしい名前ですが、かんたんに言うと Webページの中身や骨組みを決めるルール です。
たとえば、Webページにはこんな要素があります。
- 見出し（タイトル）
- 段落（文章）
- 画像
- リンク
こうしたものを「どこに、どう置くか」を決めるのがHTMLの役目です。
HTMLタグとは？
HTMLは「タグ」という特別な記号を使って書きます。たとえば文章全体は次のように囲まれます。
<html> ← 開始タグ
...ここに内容を書く...
</html> ← 終了タグタグは基本的に 開始タグ と 終了タグ のセットで使います。
終了タグは必ず「/」が入ります。
タグの中にルールを書いていくと、ブラウザ（ChromeやSafariなど）が読み取って、正しく画面に表示してくれる仕組みです。
htmlタグは沢山種類があり、タグごとに役割が異なります。
本サイトはスマホとAIでプログラミングが趣旨なので、あえて細かなタグの説明はしませんが、いずれ知識として必要になると思うので、ミニコデになれて来たらHTMLの勉強をするのもいいと思います。
HTMLの基本の形（雛形）
HTMLファイルは、基本的にはお約束の型があります。以下はその例です。
一部解説を省略してしまっているタグもあるのですが、煩雑になるのでわかりやすいものだけ開設しました。大体、書き出しから終わりまでこんな感じでホームページなんかは書かれています。
とりあえず、ソースも用意したのでコピーして、ミニコデで動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これが私の最初のWebページです。</p>
</body>
</html>一応、ミニコデの操作も簡単に説明しておきます。
HTMLタブのエディター部分に別のソースが書かれている場合は①のゴミ箱アイコンで一旦ソースを全部削除してください。
ということで、超基礎的なHTMLでした。
まとめ
HTMLはWebページの「設計図」や「骨組み」です。
コメント