HTML学習日記Part2では、前回と同様にCodecademyで、学習したHTMLの内容をアウトプットしていこうと思います。
では、今回学習したHTMLの内容を以下に、書いていきます。
まず、HTMLでは、最初に
<!DOCTYPE html>
というのを書き込みます。これは、ドキュメントが永遠に正しく解釈されるために、必要で、
ソースコードを見たいページで、右クリック➡ページのソースを表示で見ると、おそらく、どのページでも一番最初に書かれていると思います。
次の行では<html>のopening tagと、</html>のclosing tagを書き込むことで、正しく、HTMLを解釈させます。
<html>のopening tagの次の行には、以下のようなelementを書き込みます。
<head>
</head>
これを入れることに、よって、metadataが、ウェブページに含まれます。
この <head>の内部に、<title>My name</title>のようなものを書き込むと、ページのタブのタイトルが My name のようになります。
次に、HTMLで、他のWebページへのリンクのを挿入するための、プログラムを学習しました。
Webページへのリンクのを挿入するためには、以下のように書き、
<a href=”https://k-kimama.com/”>This is my blog</a>
<a>で、表される、anchor elementを用いて、hrefの後ろにURLを入れ、その後に名前を書き込むことで、 This is my blog をクリックすると、リンクに移動させることが出来ます！
新しいタブのリンクに移動させたい場合は、
<a href=”https://k-kimama.com/” target=”_blank”>This is my blog</a>
target=”_blank”の部分を付け加えれば、 新しいタブのリンクに移動させることが、出来ます。
次に、同じフォルダー内にある、異なるファイルのリンクに、移動させたい場合は、
<a href=”./introduction.html”>Introduction</a>
と書き、URLを入れていたところに、./の後にHTMLファイル名を書き込みます。
画像をリンクに変換したい場合は、
<img src=”画像のURL” alt=”画像の名前“/>
を<a>,</a>の間に書き込むと、 画像をリンクに変換することができます。
次に、同じページでのリンクに移動させたい場合は、移動させる場所に、
<h1 id=”agyou”>aiueo</h1>
<p id=”kagyou”>kakikukeko</p>
を書き込み、移動させるためにクリックするリンクは、
<ol>
<li><a href=”#agyou”>Agyou</a></li>
<li><a href=”#kagyou”>KAgyou</a></li>
</ol>
のように、書き込みます。
これは、目次などに利用することが出来ます。
最後に、以下は、
<!– <p> comment </p> –>
HTMLのプログラムの中に、メモや、コメントを入れたり、一度、プログラムの一部を実行させないときに使い、<!–と–>の間に書いた中身は、 実行されません。
以上が、今回HTMLで、学習した内容でした！
HTMLのtagには、他にも多くの種類があり、それらは、以下のサイトに記載されています。
（全てのtagについて、書いてあるそうです、、）
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML学習日記Part1 https://k-kimama.com/html-diary-part1/
Codecademy https://www.codecademy.com/
コメント