htmlについて

タグ

htmlはタグと呼ばれる<〜><〜/>で囲むことでその部分の役割やフォーマットを設定できます。
<〜>・・・・・・・・・<〜/><〜/>

例えば下記のように記述した場合「htlmlについて」という文字は大見出しとして扱われます。
<h1>htmlのこと</h1>

代表的なタグ

■<h1>・・・</h1>    大見出し

■<h2>・・・</h2>    中見出し

■<h3>・・・</h3>    小出し

■      hはh1〜h6まであります。

■<img src="画像のURL">    画像を表示

画像のURLに関しては一般的には相対的な位置で記述します。例えば
images/test.png
というよう記述すると、と同じ階層にあるimagesというフォルダの中のtest.pngファイルを指定することになります。
../images/test.png
というように指定した場合は、画像の表示したいhtmlファイルより一つ上の階層のimageフォルダの中のtest.pngを指定するという意味になります。
../の部分が一つ上の階層という意味になります。

例)  <img src="../index.html">    

■<a href="リンク先のURL">・・・</a>    リンク

URLに
index.html
を指定した場合は同じ階層にあるindex.htmlファイルを参照することになり、
../index.html
と指定した場合は一つ上の階層にあるindex.htmlファイルを指定することになります。
https://github.com/
というように、他のwebページへのリンクにも使えます。

例)「ここ」という文字をクリックするとリンク先にジャンプする例
<a href="https://github.com/">ここ</a>をクリック
例)logo.pngをクリックするとリンク先にジャンプする例
<a href="https://github.com/"><img src="log.png"></a>


■<a href="リンク先のURL" target="_blank">・・・</a>    リンクを新規ウィンドウで開く

例)<a href="https://github.com/" target="_blank">・・・</a>

おすすめエディタ

htmlを編集するのにおすすめのエディタはBracektsです。macでHomebrewを入れている人は下記のコマンドでインストールできます。
brew cask install brackets
ここからダウンロードしてインストールすることもできます。

ライブビュー機能

[ファイル]→[ライブビュー]を選択すると、ブラウザでどう見えるか確認しながら編集できます。（htmlファイルは保存した時点で表示されている内容が更新されます。）