こんばんは、HTMLを作成したことない人向けにコピペで出来る自作リンク集を作成するためのメモです。
目次
はじめてのHTML
HTML (HyperTextMarkupLanguage)とは、ウェブページを開発する為に作成された言語です。最近では、WordPressやフリーブログなどHTMLが解らなくても初めから土台が整っているサービスが沢山提供されています。
ウェブページを1から作成と聞くとなんだか難しく聞こえますが、覚えてしまえばWindowsのメモ帳ひとつで簡単に作成できます。
HTMLの作成方法 コピペで簡単作成
①Windowsのメモ帳を開きます。
②下記のHTMLのコードをコピーしてメモ帳に貼り付けます。
※コード内容の解説は後ほど。
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
</body>
</html>
③メモ帳に貼り付けたら、「名前をつけて保存」画面で下記の設定で「保存」します。
- 「ファイル名」 はじめてのWEBページ作成.html
- 「ファイルの種類」 すべてのファイル
④保存したHTMLファイルをダブルクリックで開きましょう。下記のようにWebページとしてブラウザ表示されます。
HTMLコード タグの解説
HTMLのコードは基本的に、タグと呼ばれるコードを初めと終わりで2つで囲います。初めのタグを開始タグ、終わりのタグを終了タグと呼びます。 終了タグは</p>や</body>のようにスラッシュをつけて閉じます。
タグで囲った文字列が下記のようにWebブラウザに表示されます。
下記からは、よく使うタグを解説します。 先ほど貼り付けたコードを見ながら説明を読むと理解できます。
htmlタグ
<html>タグはHTMLを作成する上で必須のタグです。HTMLファイルの先頭と末尾に<html>タグを記述しその中にタグや要素を記述していきます。
headタグ
headタグは、 HTMLを作成する上で必須のタグです。
HTML文書のヘッダ部分を指定するタグです。<head>タグで囲んだ内容はhtmlファイルの情報を宣言するものであり、ページには表示されません。
<html>タグのあと、<body>タグの前に<head>タグを書きます。<head>タグ内に、タイトル、文字コード、CSS(スタイルシート)、JavaScriptなどを記述し情報を読み込ませる事が出来ます。
bodyタグ
bodyタグは、HTMLを作成する上で必須のタグです。
HTML文章や画像など、実際のブラウザ画面上に表示される内容を指定するタグです。<body>タグの中にタグを記述していきテキストや画像などがブラウザの画面上に表示させることができます。
titleタグ
titleタグはタイトルタグです。ブラウザを複数開いた時にタイトルが解らないと不便になりますので必須のタグと言えます。<head>タグ内に記述することで、タイトルバーの名前を表示することができます。
上記の<html>タグ、<head>タグ、<title>タグ、<body>タグはHTML作成するにあたり必須となります。
HTML作成は下記の画面のHTML枠組みコードが基盤となりはじまって、様々なタグを追記していきWebページとなります。
h1タグ 使い方
<h1>タグは見出しタグです。h1～h6までの大きさで表示され文章に合わせて大見出し、小見出しなど使い分けて記述が出来ます。
<h1>・・・例: <h1>見出しを表示</h1>
hrタグ 使い方
<hr>タグは horizontal rule（水平方向の罫線）の略です。<hr>と記述するだけで横水平の線が引けます。終了タグで囲む必要なく<hr>と記述するだけでよいです。
＜hr＞タグ・・・例: <hr>
pタグ 使い方
<p>タグは文字列タグです。文字列を表示し改行します。
<p>タグ・・・例: ＜p＞文字列を表示する＜/p＞
HTML編集方法 タグの追加
先ほど作成したHTMLファイルのタグだけではWEBページとしても寂しいのでコードを追記しましょう。
まずは<a link>タグでリンク集を作成します。
a link タグ 使い方
a link タグは別のページへ行きたい時にリンクとして使用できます。下記はGoogleへアクセス飛ぶためのリンク例です。
<a href=”https://google.com”>Googleのページ</a>
URL欄を下記のようにファイルサーバーのパスにすればブラウザだけでなくエクスプローラーとしても開くことができます。タグ内の文字列はブラウザに表示される文字列となります。
<a href=”¥¥192.168.1.1\d$\backup”>バックアップフォルダ</a>
a linkタグを使用したリンク集の作成方法
①先ほど作成したHTMLファイルを右クリックして「プログラムから開く」→「メモ帳」を選択します。
②メモ帳が開いたら下記のコードをコピーします。
<a href=”https://google.com”>Googleのページ</a>
<a href=”https://yahoo.co.jp”>yahooのページ</a>
<a href=”https://youtube.com”>youtubeのページ</a>
③メモ帳内の<body>タグ内の下記の位置に貼り付けます。
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>Googleのページ</a>
<a href=”https://yahoo.co.jp”>yahooのページ</a>
<a href=”https://youtube.com”>youtubeのページ</a>
</body>
</html>
④メモ帳を上書き保存した後、HTMLファイルをダブルクリックして開きます。
⑤下記のように追加したリンクページが開きます。
a linkタグの応用 target=”_blank”
上記のリンクではクリックすると、ページが切り替わります。別のウインドウとして開きたい場合は下記のようにtarget=”_blank”を記述します。
<a href=”https://google.com” target=”_blank”>Googleのページ</a>
target=”_blank” を記述することにより、リンクをクリックした時に別のウインドウとしてページが開きます。
brタグ 使い方
brタグはHTMLの文章の改行をするためのコードです。終了タグの</br>を記述すると改行が出来ます。
<p>タグや<h1>タグは自動で改行できますが、<a link>タグなどを羅列するときは延々と横に並んでいきます。改行したい場合は下記のように</br>タグを使います。
<br>・・・例1 (a link の改行)
<a href=”https://google.com”>Googleのページ</a></br>
<a href=”https://yahoo.co.jp”>yahooのページ</a></br>
<a href=”https://youtube.com”>youtubeのページ</a></br>
下記のように改行されすっきりと見やすいWEBページになります。
また<p>タグ内や<h1>タグ内でも改行可能です。
<br>・・・例2 (タグ内で改行)
<p>はじめてのHTML作成。</br>よろしくお願いします。</p>
改行を駆使してブラウザ上で見やすいページを作成しましょう。
HTMLコードの見やすい書き方
HTMLファイルは、タグが増えると入れ子になって大量のタグになります。よってメモ帳内のコードが見にくくなります。その場合はメモ帳内でTabキーで空白を空けると見やすくなります。
下記がTabキーを使った例になります。
ソースファイルのダウンロードはこちら
今日はリンク集のみにして、次回の記事ではテーブルタグを利用したHTMLを紹介していきます。それではー！
アドレス欄がfile://～だとパソコンのファイル内に
ジャンプしているかと思います。
ページ下部に”ソースファイルのダウンロードはこちら”を追加しましたので一度確認いただけますでしょうか
対象のページにジャンプしましたら
ブラウザ内で右クリック ⇒ ソースを表示 ⇒ コピペでコードを取得することができます。
ご確認よろしくお願いします。
突然のご連絡にも関わらず、ご対応ありがとうございます。
いただいたソースファイルと見比べたところ、ダブルクォーテーションが大文字になっているという初歩的なミスを犯していました。修正して正常にリンク先に飛べました。
業務改善でリンク集を作成したく、このページでの学びを活用させていただきます。
この度は大変ありがとうございました。
はじめまして。
こちらを参考にリンク集を作成してみたところ
リンクを押しても「ページが見つかりません」と表示されですが、何か他に必要な設定等あるのるでしょうか？
(アドレス蘭を見ると、file://～という部分が含まれており、これのせいでしょうか？？）
教えていただけますと幸いに存じます。
よろしくお願いいたします。