HTML
はじめよう！HTML第1回「HTMLってなに？」編【ビギナー講座】
2020年07月22日 8:00
おはようございます！社員Aです。
本日から、ビギナー向けの記事を
- HTML
- CSS
- Photoshop
の3つのジャンルに分けて配信していきたいと思います。
（後々Illustratorなども追加していくので、ブクマ・RSSで更新をチェックしていただけると嬉しいです）
今回は、はじめよう！HTMLの書き方編ということでお送りしていきたいと思いますが、
今までHTMLに触れたことがない方でもわかりやすい解説を心がけて書いていきたいと思います。
では、さっそくいきましょう！
もくじ
HTMLってなに？
HTML（エイチティーエムエル、HyperText Markup Language）は、WEBサイトを作るときに必要となる言語です。
現在ネット上で公開されているWEBサイトのほとんどが、HTMLを使って作られています。
今見ているこのブログも、HTMLをベースとして作られています。
HTMLには次のような機能があります
- 見出しや段落といったドキュメント作成
- 画像・動画などを埋め込む
- リンクをつける
- フォントや文字色の指定などの見た目の指定
他にもできることはたくさんありますが、基本的には上記4つの機能がメインになります。
HTMLを構築する要素
前述では、「HTMLとはなにか」と言う部分に触れましたが、ここまでの理解はなんとなくでも構いません。
これからHTMLを勉強していく中で、自然と理解できていきます。
続いて、HTMLを構築する要素について触れてみましょう。
HTMLの要素とは
HTMLを構築するためには、様々な「要素」を使います。
例えば、目にしたことがある方もいらっしゃるかもしれませんが、
- <a> …リンク
- <p> … 段落
- <li> … リスト
- <h1> … 見出し
- <div> … ブロック要素
このような要素があります。
表現したいものに応じて、要素を使い分けていくことになります。
HTMLの基本の書き方
表現したいものに応じて「要素」を使い分けていくことを理解できたら、次は書き方です。
HTMLを構築する上で欠かせないもの
HTMLへ要素を入れ込む前に、ベースをつくる必要があります。
家で例えると、壁紙や家具を選ぶ前に土台である柱をつくるイメージです。
- <!DOCTYPE html>「HTML言語を使いますよ」という宣言
- <html lang=”ja”>「このページの言語は日本語です」という宣言
- <head>「ページ上に表示はされないけど、作る上で必要な宣言」を書く部分
- <title>「ページのタイトル」を書く部分
- <body>「ページに表示したい内容」を書く部分
HTMLの要素を入れ込む
先程の基本のHTMLに、「要素」を追加したものになります。
赤文字で囲っている部分が、前述した「要素」です。
前述のとおり、<body>の中にページに表示したい要素を追加します。
HTMLを書く上で覚えておきたいこと
HTMLを書く上で、いくつか覚えておきたいことがあります。
HTML言語は半角英数字で書く
HTML言語は全角を使うと機能できないため、半角英数字を使います。
こちらは、今後のレッスンで詳しく紹介するため、基礎知識として覚えておきましょう！
拡張子は「.html」
画像であれば、「.jpg」「.png」、テキストファイルなら「.txt」などの拡張子が使われますが、
HTML言語を使用して作ったファイルはすべて「.html」の拡張子になります。
保存をするときも、「.html」をつけて保存することになります。
装飾にはCSSを使用する
今回HTML言語を紹介していますが、合わせて使われるのが「CSS言語」です。
「CSS」は「HTML」で作ったベースに、色を変えたり、写真を並べたりと装飾をしてくれる言語です。
これももう少し先のレッスンで詳しく説明するので、「HTML」は「CSS」とセットで使うと覚えていただけると大丈夫です。
今回のまとめ
今回は、WEBサイトを作る上で一番ベースになる「HTMLとはなにか？」について解説しました。
「書き方や構文が難しい！」「自分にできるかな？」と感じている方も、
今後のレッスンで理解と実践を繰り返しながらステップアップできるような構成になっているので、
ぜひ、次回もご覧いただけると嬉しいです！
できるだけわかりやすく解説できるように頑張っていきます！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
