hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

HTMLを書いてブラウザに反映させる

プログラミング・テキスト

ただ文字を書くだけではテキストとして認識されてしまうので、

メモとして機能するよう(HTMLとしては反映されないよう)工夫をする必要がある。

そこで、コメントアウトを利用する。

コメントアウト

コメントアウトとは、htmlに記述しても反映されない文字のこと。

test.htmlの中身にある<!-- -->に囲まれた部分がコメントアウトとなる。

主に、メモを残しておく時などに使う。

 

実際にコメントアウトを利用する際は

command + /のショートカットキーを利用。

範囲選択中にcommand + /を押すことで、選択範囲を全てコメントアウトすることができる。 

 

head要素

test.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" >
  <title></title>
</head>
  <body>

  </body>
</html>

3行目 ~ 6行目のhead要素は、閲覧する人に見せる必要のないサイトの情報を定義する場所。

 head要素

以下のとおり、headタグの間にまた別のタグを書いてサイトの情報を定義していく。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
<!DOCTYPE HTML>
<html>
  <head>
  <!-- ここから -->
    <meta charset="UTF-8" >
    <title></title>
  <!-- ここまでにhead要素を書きます -->
  </head>
  <body>

  </body>
</html>

サイトの情報（タイトルや説明など）を記述することができるが、ブラウザ内には表示されない。

要素名 用途
title要素 サイトのタイトルを付ける
meta要素 文章の情報を保存し、ブラウザや検索エンジン（Googleなど）に知らせるため
link要素 スタイルシートを指定する
script要素 JavaScriptを指定する

 

 

 test.htmlのページタイトルを変えてみる

5
 
  <title>ここにタイトル</title>

以下の画像の部分に、titleタグの中に入れた文字が表示されていれば成功。

 

 

ブラウザに文字を表示させる

ではまず、単純に文字をブラウザに表示してみましょう。そのためには、body要素の中に要素を書いていきます。

 body

HTMLの、文字を表示させるためのコンテンツなどを入れる場所。
HTMLの要素（内容）は、このbody要素の中に書いていく。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" >
  <title>サイト名</title>
</head>
  <body>
  <!-- 主にここからコードを追記していきます -->



  <!-- ここまでの間にコードを書きます -->
  </body>
</html>
test.html
1
2
3
 
  <body>
    HTMLを勉強してます！
  </body>

<body></body>間を書き換えると、

test.htmlを保存しブラウザで確認すると、

表示されている文章が「HTMLを勉強してます！」に変わっているのが確認できる。