【初心者】HTMLを独学で学ぶと”なるほど”が増える話

Learn HTML by yourself

【初心者】HTMLを独学で学ぶと”なるほど”が増える話

様々なコンテンツには、”タイトル”がつけられています。

例えば、このサイトのタイトルには「【初心者】HTMLを独学で学ぶと”なるほど”が増える話」とつけられていて、HTMLを学べるコンテンツをお伝えしています。

title(タイトル)

HTMLのフロー

titleは、head要素の中に入っています。

Webサイトで、headの中のtitleは、唯一見える化できる要素です。

例)<title>【初心者】HTMLを独学で学ぶと”なるほど”が増える話</title>

例えば、<title>【初心者】HTMLを独学で学ぶと”なるほど”が増える話</title>と記述すると、ページのタイトルがタブのところで表記されているのを確認できます。

 

link(リンク)

link(リンク)要素は、見ているページと外部のページを関連づけるための要素です。

私達が目にするwebサイトはHTMLによって書かれているものです。このサイトもそうです。

HTMLは、大きくheadとbodyに分けられています。head要素は目に見えない要素であり、link要素はその中に分類されます。webサイトでは目にすることはできませんが、検索エンジンへ依頼して、その結果が映し出されているというわけです。

 

わかりやすくいうと、headは検索エンジンなどのために、「検索した時にはこのタイトルで表示してね」といお願いする要素というわけです。

少しややこしくなってきましたが、まとめてみるとこうなります。

  • link要素は、基本的にhead要素内に記述する
  • head要素の中に記述したものは、検索エンジンなどへ指示するためのもの

a要素

「リンク」は、a要素で表記される場合はこうなります。

例)<a href=”~”>

この場合は、「この部分をクリックすると別のサイトへ飛びますよ」というlink要素の記述の仕方です。

よく、ページの中に青文字で表記されているのがコレです。

a要素は、body要素の中に記述されています。

  • a要素は、body要素内で記述する
  • bodyの中に記述して、「指定したサイトへ飛びますよ」というもの

href(エイチレフ)属性

href(エイチレフ)は、ハイパーテキストの参照を意味します。

「a」とセットで使われるので、「アンカータグのエイチレフ」とも呼ばれています。

例)<body>

<a href=”https://kirakirachange.com”>nekonone first web story</a>

</body>

プラスid属性を使うことで、同一ページ内の指定部分へリンクすることができます。(そのためにはindexというid名をつけたリンク先を作ります。)

linkの記述と関連性

例えば、CSSファイルを読み込む場合

<link rel=”stylesheet” href=”URL(ファイル名)”>

これは、スタイルシート(外部のCSSファイル)を読み込むための記述です。

relでファイルとの関連性を指定し、hrefでファイルの場所(URL)を指定しています。

<html>
<head>xxx.css
<link rel=”stylesheet” type=”text/css” href=””>
</head>
<body>
<p>段落</p>
</body>
</html>
stylesheetを記述したCSSファイルをHTMLファイルとは別に作成し、HTMLファイル内から呼び出します。呼び出すためには、HTML文書の<head要素>内に<link要素>を記述して外部CSSファイルを指定します。styleがCSSであることを検索エンジンへ伝えるために、link要素のtype属性の値に、text/CSSを指定します。
neko
neko

CSSは、HTMLで作成した文書を読み込むとレイアウトに関する役割を持っているよ!

style(スタイル)

style要素は、HTML文書にCSSのスタイル情報を記述します。文書内にスタイルシートを設定することで、CSSによるものだと知らせるために、text/CSSを指定します。

<style 属性=”属性値”>

</style>

<html>
<head>
<meta name=”Content-Style-Type” content=”text/css“>
</head>
<body>
<p style=”color:blue; line-height:1.5;”>段落。</p>
</body>
</html>

script(スクリプト)

script要素は、webサイトの中にjavascriptを書き込んだり、外部のjavascriptファイルを読み込んだりします。javaScriptは、動的なWebページを作成することができるプログラミング言語です。

例えば、メッセージボックスの表示やコンテンツの操作、カレンダーや地図などの様々なコンテンツを作成できます。

一方、外部のjavascriptファイルを参照する場合には、src属性を指定し属性の値にscriptフィルのURLを指定します。この場合、内容は記述せずにscriptタグをすぐ閉じます。

javascriptをHTMLで記述する

<body>へ記述した場合

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”uft-8″>
<title>-JavaScript</title>
</head>
<body>
<h1>JavaScript</h1>
<button type=”button” onclick=”MyFunction1()”>クリック
</button>
<p id=”get_para”>段落表示</p>
<script>
function MyFunction1() {
var txt = document.getElementById(“get_para”);
alert(txt.innerHTML);
}
</script>
</body>

HTMLで記述するとこのようにブラウザへ映し出されます。

↓↓↓↓

JavaScript

段落表示

まとめ

HTMLでは、CSSやjavaScriptなどを組み合わせることで華やかに、そして機能性をより高く、ページを映し出すことができます。

そして、そのページの裏側について勉強をしています。

今回の<Script>は、面白い反面ちょっと慣れるまで時間がかかりそうだな…と思っています。しかし、HTMLを多機能に演出してくれるjavaScriptをぜひ活用できるようになりたいと思いました。

HTMLを勉強してよかった。

コメント

  1. ナルカナ より:

    こんにちは。ブログランキングから来ました。アフィリエイト初心者です。大変勉強になりました、ありがとうございます。

    • nikoneko より:

      こんばんは。コメントありがとうございます。(^^♪初心者すぎてお恥ずかしいですが、頑張ります!
      アフィリエイト生活頑張ってください。