ブログにも役立つHTMLの話 その2~作ったファイルをパソコンに表示してみる

スポンサーリンク
ブログイメージ
イメージ
前回はウェブサイトやブログはhtmlでできていること、そしてhtmlはメモ帳ファイルで簡単に作れることを書いた。文字だけではわかりにくいと思うので、今回はその実践編を書いてみる。

メモ帳ファイルでデモページを作成

前回最も簡単なhtml例を掲載してみたが、それを少し肉付けして以下のようなデモページのファイルを作成した。

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="ディスクリプション=ページの紹介文">
<meta name="keywords" content="キーワード">
<title>デモサイトのサンプルページ</title>
</head>
<body>
<header style="text-align: center; font-size: 2em;">デモサイト</header>
<nav>
<ul style="list-style: none; background-color: #dcdcdc; line-height: 2em; width: 100%;">
<li style="display: inline;"><a href="#">Home</a></li>
<li style="display: inline;"><a href="#">Profile</a></li>
<li style="display: inline;"><a href="#">Contact us</a></li>
</ul></nav>
<h1 style="text-align: center;">デモサイトのサンプルページ</h1>
<h2 style="text-align: center;">サブタイトル</h2>
<h3>小見出し 1</h3>
<p>段落 1<br>
ここに文章1が入る</p>
<p>段落 2<br>
ここに文章2が入る</p>
<h3>小見出し 2</h3>
<p>段落 1<br>
ここに文章1が入る</p>
<p>段落 2<br>
ここに文章2が入る</p>
<footer>
<div style="text-align: center;">~フッター~<br>
&copy;デモサイト</div>
</footer>
</body>
</html>
ちなみに前回掲載したhtmlはこちらをご覧いただきたい。

メモ帳で作成し保存するときには、「demo.html」のようにファイル名の後にhtmlファイルであることの印として.htmlの拡張子を追加する。Windowsの場合、最初からファイル名の窓に「.txt」とついているので、それを削除してから上記のようにファイル名を付ける。
ファイルの種類は「テキスト文書(*.txt)」ではなく「すべてのファイル」を選択、そして保存。保存先はどこでも良い、とりあえずデスクトップにでも保存しておく。

前回記載したhtmlと比べ、見た目を考慮して多少スタイルシート(CSS)を追加している。上記でいえば、10行目の<header>タグの中にある「style="text-align: center; font-size: 2em;"」部分のこと。これは、サイトのタイトル(ここでは「デモサイト」)を画面中央に配置(text-align: center;)し、フォントの大きさを通常文字の2倍の大きさ(font-size: 2em;)というように指示している。このようにスタイルシート(CSS)は装飾や一を指示したいタグの中に書く方法と、別にスタイルシート(CSS)のファイルを作成してhtmlファイルとリンクさせる方法がある。
<nav>タグ(ページのナビゲーションメニューなどを記載するところ)には、<ul>、<li>タグで一般的なウェブサイトによくあるHome、Profile、Contact Usといったリンク先を記載した。
スタイルシート(CSS)というのはこのように文字の装飾、位置などをきめる約束事である。これを知っているとブログに大変役に立つので、後々詳しく書いていきたい。

デモファイルをパソコンに表示してみる

上記を記載したメモ帳ファイルを.htmlの拡張子を付けて保存したら、右クリックで「プログラムから開く」を選び、自分が使用しているブラウザーを選択すると、以下の画像のようにパソコンに反映される。
htmlファイルのスクリーンショット
クリックで拡大
これがhtmlファイルをネット上にアップロードした時のイメージだ。前回書いた通り、実際のパソコン画面には<bodyから</body>までしか反映されない。そして<title>タグ部分はブラウザーのタブ部分(上記はGoogle Chrome)に表示される。
あとは実際のファイルを契約したレンタルサーバーへFTPファイルでアップロードしたら、1ページではあるが立派なウェブサイトが出来上がる。

実際にブログ運営に役立つのはスタイルシート(CSS)とjavascriptだが、まずはhtmlの「基本のき」を2回に分けて書いてみた。実際のウェブサイトやブログは1ページではなく多くの記事ファイルやその他ファイルがある。それをリンクという紐付け作業をしてつないでいく。そうして出来上がるのがウェブサイトやブログになるということは、もはやお分かりだろう。

スポンサーリンク

ブログランキング

ブログランキング・にほんブログ村へ

0 件のコメント :

コメントを投稿

TOP