カテゴリー

キーワード

 
> HTMLを書いてHTMLファイルを...

HTMLを書いてHTMLファイルを作り、ブラウザで確認する方法


2015 年 2 月 6 日 投稿    view: 36724
タグ:
このエントリーをはてなブックマークに追加

HTMLを書く

連日の登板です。

WEBマーケティング部の杉尾成行です。

本日もよろしくお願いします。

HTMLファイルを作ってみる

では、実際にHTMLを書いてみましょう。
「細かい説明はいらん」っという実践派の方はここからが本番ですね。(笑)


まずメモ帳を開いて下のコードを書いて見てください。
面倒だという方はコード上でダブルクリックしてみてください。
簡単にコピーできると思います。


メモ帳って何だよっていう方(特にMacユーザーの方)。
テキストエディタもしくはテキストエディット(Mac付属)のことです。
テキストエディタであれば何でも結構です。


僕は仕事でDreamweaverというテキストエディタを使っていますが、ちょっとしたメモをとるときなんかはterapadを使うことが多いです。
(※Dreamweaverは有料、terapadは無料です)


<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>HTMLのテストページ</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="test1">ここはひとつの段落です。</p>
<p class="test2">ここはひとつの段落です</p>
<p class="test3">ここはひとつの段落です</p>
</body>
</html>

【コードの説明】

1行目、前々回に説明したDOCTYPE宣言です。
2行目は、このファイルが日本語で書かれているとコンピュータに知らせています。
3行目、head部分(※)の始まりです。
4行目は、このファイルのタイトルを知らせています。ここに何かを書くとブラウザのタブ部分に表示されます。
5行目は、このファイルがstyle.cssというCSSとリンクしているということです。
6行目、head部分の終わりです。
7行目から11行目がbody部分となり、訪問者に見える部分です。
12行目、HTMLファイルはここまでですという終了タグです。


head部分には文書のタイトル等のヘッダ情報を記述します。 
文書のメタデータが書かれます。

メタデータはユーザエージェント(ブラウザ)がHTMLを処理するときに利用したり、サーチエンジンが文書の情報を探したりするために必要です。
基本的にtitle以外はブラウザ上には表示されないと思ってもらって大丈夫です。

 

よくわからない部分はひとまずスルーしてください。
今日はともかく自分で作った(またはコピーした、笑)ものがブラウザ上で表示されるかどうかが問題ですので。

 

書き終わったら、「test.html」という名前で保存しましょう。
.htmlは必須です。その前は何でも構いません。(日本語でも可)

 

ブラウザで表示してみよう

2つのやり方をご紹介します。

 

まず1つ目は、ブラウザに直接ファイルを持っていく方法です。
(※ここで言うブラウザとはウェブブラウザのことです。IEとかchromeとかFirefoxのことです。)

 

1.まずウェブブラウザを開いてください。
2.下図の赤矢印の部分にHTMLファイルをドラッグ&ドロップ(クリックしてつかんだまま動かす)してみてください。


下図のように表示されると思います。

※僕の使用ブラウザはGoogle chromeですが、他のブラウザでも同じようにできると思います。

できましたか?

こうなった方は失敗です。


2つ目のやり方はプログラムから開くやり方です。


HTMLファイルを右クリック ⇒ プログラムから開く ⇒ ブラウザを選ぶ(IEやGoogle chrome)
Macの方は[control]キーを押しながら通常のクリックするといけると思います。


できなかった方は下記をもう一度確かめてください。


★ちゃんとファイルを保存できているか。


★一つ目のやり方ならドラッグ&ドロップができているか
   chromeブラウザでは、タブのところに持って行くと下向きの矢印が出て、「ここだよ」と教えてくれます。


★ファイルの名前が「test.html」となっているか
   大事なのは「.」の後ろが「html」になっているか、です。それより前は何でも構いません。


※htmでも正常に動きます。どちらでも構いませんが、現在はhtmlと書く方が多いと思います。
これは昔、拡張子が3文字に限定されていた頃の名残です。


ちなみに、このHTMLファイルはインターネット上に公開されているわけではありませんのでご安心を。
ウェブサーバーにアップロードしないと、ウェブページとして公開されません。


まとめ

今日はHTMLファイルを実際に作って、それを表示させる方法をご紹介しました。


余談ですが、ちゃんと「できた」「表示」されたという達成感って何ものにも替えがたいものですよね。
こういう「できた」を積み重ねていくことが大事なことだと思います。


あ、偉そうに言って申し訳ありません。
ちょうど一時間くらい前に、僕もそういう経験をしたもので嬉しくてつい語っちゃいました。
思い通り動かないプログラムがあったのですが、休憩後によく見返したらケアレスミスでした(笑)


根を詰めて頑張ってしまう方は適度に休憩を挟んでくださいね。
新鮮な空気を吸うとリフレッシュして能率も上がりますよ。


では、次回はHTMLの構成要素についてお話しさせていただきます。


最後までお読みいただきありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事