Webデザイン

【Webデザイン初心者】のためへWebデザインに欠かせないHTML

この授業は次のような方におすすめです。

・Webデザイン初心者で、HTMLの基礎について知りたい方

・HTMLを初歩から学ぶのにおすすめな本について知りたいWebデザイン初心者の方

この授業を受けていただくことで、これらについて理解することができて、HTMLの基礎を抑えることができますよ。

どうぞ最後までご覧になってください。

Webデザインに必要なHTMLとは

デザイニャー
デザイニャー
HTMLとは、「HyperText Markup Language」の略で、Webサイトを作るために開発された言語だニャン。

先生
先生
ハイパーテキストには、テキストの枠を超えて、テキストの枠を超え、別のWebサイトへのリンクを貼ったり、画像や動画を埋め込むことができるという特徴があるんだ。

デザイニャー
デザイニャー
これらのリンク、画像、動画がどんな役割をしているのかをコンピュータに説明しているもののことをHTMLと言うんだニャン。

先生
先生
HTMLファイルは、CSSや画像などといった外部リソースを読み込んでから、Web上に表示させるんだ。

デザイニャー
デザイニャー
そのWeb上のHTMLをパソコンやスマートフォンで参照することによって、Webサイトとして認識して見れるんだニャン。

Webデザインに必要なHTMLの開発環境を用意

先生
先生
HTMLは次の2つがあれば作ることができるんだ。

・ブラウザ

・エディタ

ブラウザ

先生
先生
ブラウザとは、Webページを見るために使うソフト・アプリのことなんだ。

・Windowsだったら、「Microsoft Edge」

・Macだったら「Safari」

が最初から入っています。

デザイニャー
デザイニャー
そして、デスクトップブラウザという、パソコンからWebサイトをみるブラウザは、「Google Chrome」が圧倒的に多く使われているんだニャン。

先生
先生
だから、HTML開発には、「Google Chrome」を使うことが多いんだ。

エディタ

デザイニャー
デザイニャー
テキストエディタはと、文章を書くためのソフト・アプリの総称なんだニャン。

先生
先生
パソコンに初めから入っているメモ帳やテキストエディットでもHTMLを書くことはできるけれどHTMLやWeb言語に特化したエディタもあるんだ。

デザイニャー
デザイニャー
HTMLエディタを使った方が見やすいし、作業効率も良くなるニャン。
Webデザインでエディタを使うメリット6つと選び方のポイント9つこの授業は次のような方におすすめです。 ・Webデザイン初心者でWebサイトを作るためにどんなエディタがあるのかを知りたい方 ...

Webデザインに必要なHTMLの書き方

先生
先生
HTMLの書き方について次の4つのことについてお話ししていくよ。

・基本的な構造

・HTMLファイルの作り方

HTMLに必須なタグ

・HTMLの主要タグ

基本的な構造

デザイニャー
デザイニャー
HTMLはタグというものを使って書いていくんだニャン。

先生
先生
基本の書き方は、上の画像のように、要素を<開始タグ>〜</閉じタグ>で囲むようにするんだ。

HTMLファイルの作り方

先生
先生
テキストエディタを起動してから、新規作成したファイルを「index.html」という名称で保存することで、簡単にHTMLファイルを作ることができるよ。

リッチテキスト形式だと、保存したHTMLがそのままブラウザに表示されてしまうので、必ず、標準テキスト形式で作成してください。

HTMLに必須なタグ

デザイニャー
デザイニャー
HTMLタグもたくさんあって、全部覚える自信がないニャン。

先生
先生
大丈夫だよ。最初から全てを覚えなくても、いくつかのタグを覚えるだけで、Webサイトは十分作ることができるし、必要になった時に覚えていけば良いんだから問題はないよ。ただ、必ず書かないといけないHTMLタグもあるから、まずは次のものを紹介していくね。

・!DOCTYPE html

・html

・head

・body

・meta charset=”UTF-8”

・title

!DOCTYPE html

HTMLがHTML5で書かれているということを宣言するタグです。

DOCTYPE宣言が書かれていないと、本来の表示と違ってしまうことがありますので、忘れないように書きましょう。

html

囲まれた内部がHTMLで書かれていることを示すタグです。

head

headタグに書かれた内容は、ヘッダー情報として扱われるもので、ブラウザ上には表示されません。

・Webサイトのタイトルや概要

・JavaScriptやCSS

などのパス情報をここに書きます。

body

メインのコンテンツを記述する場所です。

bodyタグ内に書かれた内容はブラウザ上に表示されます。

meta charset=”UTF-8”

HTML文書内の文字エンコーディングを指定するタグです。

一般的にはUTF−8を使います。

title

Webサイトのタイトルをかくタグです。

検索した時のWebサイト名になります。

HTMLの主要タグ

デザイニャー
デザイニャー
先ほどまで紹介した必須タグだけだと、ブラウザ上には真っ白が画面が表示されるだけだニャン。

先生
先生
ここからはWebサイト上にテキストや画像などを表示する次のような代表的なタグについて紹介していくよ。

・link

・p

・a

・br

・h1~h6

・ul

link

linkタグは、外部リソースを読み込むときに使います。

CSSファイルの読み込みはこのlinkタグを使うので、このlinkタグは必ず記述するタグになります。

p

pタグは、一つの段落であることを示します。

a

aタグは、ハイパーリンクであることを示しています。

href属性に別ページや外部リンクのURLを指定してそのページに飛ばすことができます。

br

brタグを入れた位置で改行することができます。

brタグは空タグといって、閉じタグがなく、brタグ単体で書かれます。

h1~h6

見出しであることを示すタグで、h1〜h6まであります。

数字が小さい方が重要度が高く、原則的に重要度の高いものから順番に記述していきます。

悪い例:h1を書いた次にh3を書くのは、HTMLの文法的には間違いになります。

ul

ulタグは、リストだということを示すタグです。

リストの全体をulタグで囲んで、その中の一つ一つの項目をliタグで囲みます。

先生:そのほかにも色々なタグがあるから、次のリファレンスを見てみてね。

実際にHTMLをWebブラウザで表示してみよう

デザイニャー
デザイニャー
それでは実際に簡単なHTML文をブラウザ上に表示させてみようニャン。

先生
先生
次の例文をテキストエディタにコピペして、ファイルを「index.html」で保存した後に、そのHTMLファイルを開いてみよう。

先生
先生
作成したHTMLを開いてみて、次のようになっていたら、成功だよ。

Webデザインに必要なHTMLについてのおすすめ本

先生
先生
初心者の方がHTMLについて学ぶのにわかりやすくて良い本が出てきているんだ。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

 

これだけで基本がしっかり身につくHTML &CSSWebデザイン1冊目の本

 

まとめ

先生
先生
この授業では次のようなことをお話ししてきたよ。

・Webデザインに必要なHTMLとは

・Webデザインに必要なHTMLの開発環境を用意

・ブラウザ

・エディタ

・Webデザインに必要なHTMLの書き方

・基本的な構造

・HTMLファイルの作り方

・HTMLに必須なタグ

・!DOCTYPE html

・html

・head

・body

・meta charset=”UTF-8”

・title

・HTMLの主要タグ

・link

・p

・a

・br

・h1~h6

・ul

・実際にHTMLをWebブラウザで表示してみよう

・Webデザインに必要なHTMLについてのおすすめ本

・1冊ですべて身につくHTML&CSSとWebデザイン入門講座

・これだけで基本がしっかり身につくHTML &CSSWebデザイン1冊目の本

私たちは頑張るあなたを応援しています。