htmlについて

htmlを編集するのにおすすめのエディタはVisual Studio Codeです。
ここからダウンロードしてインストールすることもできます。

■vs codeの日本語化
拡張機能から、Japaneseと入れて検索すると[Japanese Language Pack for Visual Studio Code]がヒットするので、インストールします。

■プレビュー機能
拡張機能から、HTML Previewを検索し、インストール

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に自信がない人はこのファイルをダウンロードして修正しながら自分のページを作ってください。(hpsampleというフォルダの中身をcloneしたdoyolabフォルダの中に入れる)

cssを変更しアップロードしても更新されない場合があります。その場合は下の図のchrome右上のアイコンをクリックし、[設定]→[詳細設定]→[閲覧履歴データの削除]で[キャッシュされた画像とファイル ]にチェックを入れて[データ削除ボタンを押してください。]