生活 2017.09.20

Hello! Rodyです!
こないだ、マリア様が願いをかなえてくれることで有名な”シマラ教会”へ行ってきました!!(^o^)

行ってみたら、ディズニーランド並みの長い行列できてるじゃないですか。
え~並ばないといけないの~?(>_<)と思ったら、並ばないで教会の方へ行く人達がいました。
なんだ~並ばなくても行けるんじゃん!!(^。^)!
炎天下の下待つのは嫌だったので、並ばずに教会に入って帰ってきました。

そしたら、その大行列がマリア様に会うための行列だったんですね!?
せっかく、片道2時間かけて行ったのに~~大失敗…(>_<)
ちゃんと調べて行けばよかったよ…次回また行くことにします…(^_^;)!!

 

今回は”HTMLって何?の第二弾”です。

前回はHTMLの一部分を紹介しましたが、今回はもう少し詳しく紹介したいと思います。

HTMLファイルの全体構造として大きく2つに分かれます。

<head><body>です。

<head>とは…ブラウザ上表示されず、WEBページの設定情報などを記載してます。
<body>とは…ブラウザ上で表示される部分です。

*ブラウザとは…Webサイトを閲覧するためのソフト
Internet Explorer       Safari        Google Chrome        Fire Fox  など
               

さらに<head>内は、<title><meta>があります。

<title>Webページのタイトル
↓画面の赤枠の部分です。

<meta>内ページに関する情報(メタ情報)を指定して、ブラウザや検索ロボットに知らせるためのタグ
ページの説明文やキーワードなどの情報を入力します。

検索ロボット…ユーザーが希望するキーボードと一致する内容をもったWebページを探し出す検索サービス
一般的に「クローラ」や「ボット」と呼ばれてます。

↓画面の赤枠の部分です。

<body>内:Webページ上で載せたい内容、ブラウザ上で表示される内容です。
書かれたテキストや画像がブラウザの画面上に表示されます。

↓いつも見ているブラウザの画面です。

どんなものなのか、さっそく実践です

今回はこちら!
メモ帳を開いて、下のように入力してみましょう 

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title> HTMLの基礎知識 </title>
<meta name=”description” content=”ホウレンソウとは、よく「仕事の動脈」「組織の血液」に喩えられます。仕事をスムーズに進めるために欠かせない「報告」「連絡」「相談」の略です。”>
</head>
<body>
<h1>ホウレンソウとは</h1>
<ul>
<li>報告(ホウ)</li>
<li>連絡(レン)</li>
<li>相談(ソウ)</li>
</ul>
<p>報・連・相(ホウ・レン・ソウ)は、</p>
<p>「報告」「連絡」「相談」を分かりやすくほうれん草と掛けた略語。</P>
<p>主としてビジネス(職場)において使われる。</p>
</body>
</html>

HTMLのバージョンを宣言するためのもの
これがないとHTMLファイルとして認識されないので、必ず必要です。
現在はHTML5が主流

 

<html lang=”ja”>

使われている言語が日本語であることを示す。 <head>内

<meta charaset=”utf-8″>

文字コードをUTF-8に指定。文字コードを設定することで、文字化けを防ぐことができます。

 

文字化けとは…文字コードの設定の誤りなどにより、文字が別の文字で表示されてしまうことです。

文字コードを設定したもの → 文字コードを設定してないもの

 

<title>

WEBページのタイトルを入力するタグです。

 

 

<meta>

ページに関する情報(メタ情報)を指定して、ブラウザや検索ロボットに知らせるためのタグ

 

<body>内
<h1>見出しタグ
<ul>:リストタグ
<li>箇条書き
<p>段落タグ

このように入力したら

前回と同じように保存しましょう。
「ファイル」

「名前をつけて保存」

「デスクトップを選択」

ファイル名「hourensou.html」

「すべてのファイル」を選択

保存

ブラウザを通して表示してみましょう。


すると、このように表示されます。上手くできましたか?

この他にもタグがあります。
<img > ・・イメージタグ:写真などの画像を表示
<a>・・・・・・・リンクタグ:ファイルへのリンク

これらを使うことで、文章だけでなく画像を表示したり、他のページにリンクすることができます。

 

前回に引き続き、HTMLについてでしたが、いかがでしたか?
実際はもっと複雑ですがHTMLは基本的なことを、お伝えしました。
最初は、何かさっぱりわからなかったけど、今はなんとなく、わかってきました。
この記事を読んで、少しでも興味をもってやってみようかな~と思ってくれた人がいたら嬉しいです(^O^)
是非、一緒に勉強しましょう!!きっと優しい先生がわかりやすく教えてくれますよ~(●^o^●)

 

IT留学に関するお問い合わせ
HTMLって何? part2

この記事が気に入ったら
いいね!をお願いします(^^)