はじめてのHTML 自作リンク集を作成する備忘録

はじめてのhtml作成HTML
はじめてのhtml作成

こんばんは、NAOです。HTMLを作成したことない人向けにコピペで出来る自作リンク集やナレッジ集を作成するためのメモです。

はじめてのHTML

HTML (HyperTextMarkupLanguage)とは、ウェブページを開発する為に作成された言語です。最近では、WordPressフリーブログなどHTMLが解らなくても初めから土台が整っているサービスが沢山提供されています。

ウェブページを1から作成と聞くとなんだか難しく聞こえますが、覚えてしまえばWindowsのメモ帳ひとつで簡単に作成できます。

HTMLの作成方法 コピペで簡単作成

①Windowsのメモ帳を開きます。

メモ帳
メモ帳

②下記のHTMLのコードをコピーしてメモ帳に貼り付けます。

※コード内容の解説は後ほど。


<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>
</body>
</html>


 

③メモ帳に貼り付けたら、「名前をつけて保存」画面で下記の設定で「保存」します。

  • 「ファイル名」 はじめてのWEBページ作成.html
  • 「ファイルの種類」 すべてのファイル
拡張子.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ページとなります。

HTML枠組み

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ファイルを右クリックして「プログラムから開く」→「メモ帳」を選択します。

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ファイルをダブルクリックして開きます。

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>

また<p>タグ内や<h1>タグ内でも改行可能です。

<br>・・・例2 (タグ内で改行)

<p>はじめてのHTML作成。</br>よろしくお願いします。</p>

改行を駆使してブラウザ上で見やすいページを作成しましょう。

HTMLコードの書き方

HTMLファイルは、タグが増えると入れ子になって大量のタグになります。よってメモ帳内のコードが見にくくなります。その場合はメモ帳内でTabキーで空白を空けると見やすくなります。

下記がTabキーを使った例になります。

TABキーを使って見やすくした例

今日はこれくらいにして、また汎用的なタグを追記していきます。

それではー!

コメント

タイトルとURLをコピーしました