[1] テキストエディタで書いてみよう

シンプルなテキストでHTMLを書いてみましょう。

使用する要素 <html> 〜 </html>

テキストエディタで新規ファイルを開く

Winなら「メモ帳 (Notepad)」や「ワードパッド」、Macなら「テキストエディット」「Jedit(シェアウェア)」など、 テキストファイルを作れるソフトなら何でもOK。
シンプルなテキスト情報を保存できるソフトを起動してください。

テキストエディタで「新規ファイル」を開き、そこに次のようにタイプしてみましょう。
ここでは必ず半角英数字の小文字で打ちます。

訂正です。必ず小文字なのはXHTMLでした。HTMLでは大文字小文字の区別はありませんので、大文字でも大丈夫。(satoshitさん、ありがとうございます。)

ただし半角英数字で書いてね。間違っても全角で書かないように。
また、「Html」などと混ぜて書かずに「HTML」か「html」と書きましょう。
「HTML要素は大文字、CSS関連は小文字」など、自分でルールを作ったほうが、後で読みやすく編集しやすいです。

ではさっそく書いてみましょう。
<html>
</html>

<html> は「ここからhtml要素が始まる」と指示し、
スラッシュがついた</html> は「ここでhtml要素は終了」と指示しています。
指示する相手はブラウザです。HTML文書はブラウザに対する「指示書」なのです。

HTMLでは、<html>の他に<h1>や<p>、<div>などたくさんの要素がありますが、
これらの要素はすべて < > で囲まれた開始タグで始まり、</ > で囲まれた終了タグで終わります。

< less-than sign
日本語では「小なり記号」。不等号の記号です。
key1Shift (シフト)キーを押しながら
←このキーを押します。
> greater-than sign
日本語では「大なり記号」。不等号の記号です。
key2Shift (シフト)キーを押しながら
←このキーを押します。
/ slash
日本語では「スラッシュ」。斜線です。
key3←このキーを押します。
「<」や「>」を、不等号の記号と紹介していますが、要はカギカッコととらえてOK。
次に、今書いた<html>と</html>の間に、何でも好きなテキストを書いてみましょう。
<html>
本日は晴天なり〜!
</html>

拡張子「.html」をつけて保存する

このファイルに適当なファイル名をつけて保存します。拡張子は「.html 」にします。
HTML関連では、拡張子は絶対必要。省略できません。

ブラウザは拡張子を頼りにファイルの種類を理解します。HTMLファイルなら .html です。
ファイルの種類ごとに固有の拡張子があります。
例えば、画像なら .gif .jpg .pngなど、CSSは .css、JavaScriptは .js といった具合です。

テキストエンコーディングを指定して保存しよう

保存する時の「テキストエンコーディング」「日本語 (Shift JIS)」にしましょう。
保存したファイルを再度開いたときに、文字化けするなど、うまく開けない場合は、テキストエンコーディングを指定しなおしてください。

*HTML5 のテキストエンコーディングは UTF-8を使用することが推奨されています。
「テキストエンコーディング」は「UTF-8」にしましょう。

フォルダを作ってその中に保存しよう

保存する場所は、デスクトップなど自分の分かりやすい場所に、フォルダを作って、その中に保存してください。 フォルダには、適当な名前をつけてください。

フォルダ名には、半角英数字の他に「_(アンダーバー)」や「-(ハイフン)」が使えます。その他の記号は使わないほうが無難です。

今後、画像を配置したり、別のHTMLファイルにリンクを貼ったりします。 このとき、URL(リンクをたどる道筋)がとても重要です。
ファイルをフォルダ(ディレクトリ)で整理すると、URLも書きやすくなります。そのためにもぜひ、 フォルダの中に保存しておいてください。

保存方法はコチラを↓参考にしてください。

テキストエディタは、ビジネス文書を簡単に制作するためのサービスで、「リッチテキスト」がデフォルトになっているものが多いです。
リッチテキストとは、文字の色や大きさなどレイアウト情報を含んでいるファイル形式です。

ですがこの「リッチテキスト」は、HTML文書には使えないんです。HTML文書そのものが、リッチテキストみたいなもんですから。
必ず単なるテキストファイルにしてから保存してください。

Winのテキストエディタ
●「ワードパッド」の場合は、保存時に「テキスト ドキュメント」を選択し、拡張子を「.html 」にします。
●「メモ帳」は、元々シンプルなテキストファイルしか保存できません。 保存時に、ファイルの種類を「すべてのファイル」にして、ファイル名に拡張子「.html 」を付けて保存します。
●「Microsoft Word」の場合は、普通に保存すると、Word独自のレイアウト情報を組み込みます。
保存時には、フォーマットを「テキストのみ」にして保存し、エクスプローラ上で拡張子を「.txt」から「.html」に変更するか、
保存時のフォーマットを「Webページ(HTML)」にして「表示情報のみをHTMLにする」を選択して保存しましょう。

Macのテキストエディタ
● Macの「テキストエディット」では、新規ファイルはデフォルトでリッチテキストになってます。
メニューバー→フォーマット→「標準テキストにする」で、テキストファイルにしてから、拡張子「.html 」を付けて保存します。
テキストエンコーディングを「Shift JIS」「UTF-8」にすることもお忘れなく。

ブラウザでプレビューする

保存したファイルをブラウザで開きます。
こんなふうに、先程自分で書いたテキストだけが表示されれば成功。
<html></html>の指令文まで表示される場合は何か間違ってます。
(ソース部分のタイプミスや、半角英数字で書いていないなど。
または(ていうか、たぶん)「リッチテキスト」などのフォーマットで保存しています。
必ずシンプルな「テキストファイル」のフォーマットで保存してください。)

ブラウザでプレビュー

上のプレビューでは、ファイル名は aaa.html とし、デスクトップ上の html_test というフォルダに保存しています。 (画像をクリックして拡大してみてください。)

サンプルファイルをダウンロードできます

で、たぶん、リッチテキストやテキストエンコーディングで手こずっているかなあ?と思いまして、
サンプルファイルを作っておきました。
サンプルのダウンロードは、コチラから(ダウンロード用のページが別ウィンドウで開きます)
★別ウィンドウで開きたくない方は、コチラから

ダウンロードしたファイルを、テキストエディタで開く時は、リッチテキストで開かないように。
必ず、標準テキストで開いてくださいね。

DreamweaverなどのWeb制作ソフトを持ってる人は、それで開いたほうが手っ取り早いですね。

次回は、タイトル<title>を設定してみましょう。
だんだんHTML要素を増やしていきますよ。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTMLソース

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.