携帯サイトの作り方2
前回はNINJATOOLSでサイトを取得しました。
今回はサイトを作る際に必用なHTMLについて触れたいと思います。
イメージをマインドマップにしました。
Step1
テキストエディタをダウンロードしてください。
今回はTeraPadというテキストエディタを使ってみたいと
思います。
TeraPad
PCにインストールしたら、開きます。
Step2
今回は、初めててですので、
参考例を出しますので、コピーして貼り付けてください。
<!--ｻｲﾄの一例です。-->
<!--ここから（全体）-->
<html>
<head>
<!--タイトルを入れます-->
<title>タイトルを入れます</title>
</head>
<body>
<!--流れる文字です-->
<marquee><font size="2" color="#0000ff">ここに流れる文字を入れます</font></marquee>
<br>
<!--改行は<br>です-->
<br>
<div align="center">
<!--タイトルを入れます-->
<font color="#0080ff"><b>タイトル</b></font>
</div>
<br>
<!--水平線を入れるには<hr>です-->
<hr color="#80ff80">
<!--fontの大きさを変えるにはsizeの数字を変えます-->
<font size="2">
サイトの照会文を書きます
</font>
<br>
<br>
<!--文字の位置を変えるには中央が"center"、右が"right"、左が"left"です-->
<div align="center">
<font size="2">
<font color="#ff0000"><blink>▼ｵｽｽﾒ▼</blink></font><br><br>
<!--ｱﾌｨﾘｴｲﾄｺｰﾄﾞなどを貼り付けます-->
<a href="ｻｲﾄｱﾄﾞﾚｽ">ｱﾌｨﾘｴｲﾄﾘﾝｸなど</a>
</font>
</div>
<hr color="#80ff80">
<font size="2">
<!--リンクタグ<a href="サイトのアドレス">リンク名</a>です-->
<!--ｱﾌｨﾘｴｲﾄﾘﾝｸや飛ばしたいｻｲﾄのﾘﾝｸに使います-->
<ul type="disc">
<li><a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a></li>
<li><a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a></li>
<li><a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a></li>
</ul>
</font>
<hr color="#80ff80">
<div align="center">
<font size="2">
検索エンジン<br>
<a href="http://www.google.co.jp/m/">google</a>/<a href="http://mobile.yahoo.co.jp/">yahoo mobile</a></font>
</div>
<hr color="#80ff80">
<font size="2">
<!--自分のｻｲﾄのﾘﾝｸ用に貼ります。まだ無い場合は削除します。-->
<!--ここから-->
ﾘﾝｸ<br><br>
<a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a>/<a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a>/
</font>
<hr color="#80ff80">
<!--ここまで-->
<div align="center">
<!--タイトルを入れます-->
<font size="2">タイトル</font>
<br>
<br>
</div>
</body>
</html>
<!--ここまで（全体）-->
貼り付けましたか？
Step3
名前をつけて保存を選び、
index.html と書いて保存します。
フォルダがまだ無い場合は・・・
フォルダを新規作成して
例：
マイコンピュータ
↓
Dドライブ（あくまで例ですのでCでもFでも構いません）
↓
新しいフォルダの作成
↓
例：NINJA
↓
例：aaa.com
aaa.comのフォルダの中に
index.html として保存します。
Step4
TeraPadの場合は、ツールバーの
インターネットエクスプローラーのアイコンを
クリックしてみてください。
ブラウザが立ち上がり、サイトが見れると思います。
Step5
今度はテキストエディタで中身を例に沿って
書き換えて、保存して、いろいろと操作してみてください。
ワープロ感覚で操作してみてください。
HTMLタグについては、次のサイトが参考になると思います。
ホームページ入門
今回はここまでです。
ありがとうございました。
今回はサイトを作る際に必用なHTMLについて触れたいと思います。
イメージをマインドマップにしました。
Step1
テキストエディタをダウンロードしてください。
今回はTeraPadというテキストエディタを使ってみたいと
思います。
TeraPad
PCにインストールしたら、開きます。
Step2
今回は、初めててですので、
参考例を出しますので、コピーして貼り付けてください。
<!--ｻｲﾄの一例です。-->
<!--ここから（全体）-->
<html>
<head>
<!--タイトルを入れます-->
<title>タイトルを入れます</title>
</head>
<body>
<!--流れる文字です-->
<marquee><font size="2" color="#0000ff">ここに流れる文字を入れます</font></marquee>
<br>
<!--改行は<br>です-->
<br>
<div align="center">
<!--タイトルを入れます-->
<font color="#0080ff"><b>タイトル</b></font>
</div>
<br>
<!--水平線を入れるには<hr>です-->
<hr color="#80ff80">
<!--fontの大きさを変えるにはsizeの数字を変えます-->
<font size="2">
サイトの照会文を書きます
</font>
<br>
<br>
<!--文字の位置を変えるには中央が"center"、右が"right"、左が"left"です-->
<div align="center">
<font size="2">
<font color="#ff0000"><blink>▼ｵｽｽﾒ▼</blink></font><br><br>
<!--ｱﾌｨﾘｴｲﾄｺｰﾄﾞなどを貼り付けます-->
<a href="ｻｲﾄｱﾄﾞﾚｽ">ｱﾌｨﾘｴｲﾄﾘﾝｸなど</a>
</font>
</div>
<hr color="#80ff80">
<font size="2">
<!--リンクタグ<a href="サイトのアドレス">リンク名</a>です-->
<!--ｱﾌｨﾘｴｲﾄﾘﾝｸや飛ばしたいｻｲﾄのﾘﾝｸに使います-->
<ul type="disc">
<li><a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a></li>
<li><a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a></li>
<li><a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a></li>
</ul>
</font>
<hr color="#80ff80">
<div align="center">
<font size="2">
検索エンジン<br>
<a href="http://www.google.co.jp/m/">google</a>/<a href="http://mobile.yahoo.co.jp/">yahoo mobile</a></font>
</div>
<hr color="#80ff80">
<font size="2">
<!--自分のｻｲﾄのﾘﾝｸ用に貼ります。まだ無い場合は削除します。-->
<!--ここから-->
ﾘﾝｸ<br><br>
<a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a>/<a href="ｱﾄﾞﾚｽ">ｻｲﾄ名</a>/
</font>
<hr color="#80ff80">
<!--ここまで-->
<div align="center">
<!--タイトルを入れます-->
<font size="2">タイトル</font>
<br>
<br>
</div>
</body>
</html>
<!--ここまで（全体）-->
貼り付けましたか？
Step3
名前をつけて保存を選び、
index.html と書いて保存します。
フォルダがまだ無い場合は・・・
フォルダを新規作成して
例：
マイコンピュータ
↓
Dドライブ（あくまで例ですのでCでもFでも構いません）
↓
新しいフォルダの作成
↓
例：NINJA
↓
例：aaa.com
aaa.comのフォルダの中に
index.html として保存します。
Step4
TeraPadの場合は、ツールバーの
インターネットエクスプローラーのアイコンを
クリックしてみてください。
ブラウザが立ち上がり、サイトが見れると思います。
Step5
今度はテキストエディタで中身を例に沿って
書き換えて、保存して、いろいろと操作してみてください。
ワープロ感覚で操作してみてください。
HTMLタグについては、次のサイトが参考になると思います。
ホームページ入門
今回はここまでです。
ありがとうございました。
携帯サイトの作り方1
携帯サイトを作る手順をマインドマップにしてみました。
無料で始める方法を数回に分けて説明して行きたいと思います。
Step1
Yahooなどでフリーメールを取得してください。
取得したら、アドレスとパスワードを
メモ帳などで保存しておいてくださいね。
（別の機会に管理ツールを紹介します）
Step2
無料ホームページサイトで、
サイトの開設を申請します。
今回はNINJATOOLSを使って説明します。
以下のサイトにアクセスして「忍者ホームページ」をクリックしてください。
NINJATOOLS
「とりあえずユーザー登録」を選んで、
取得しておいたフリーメールで登録します。
仮登録のメールが届きますので、
登録を完了させます。
Step3
NINJATOOLSにログインします。
「忍者ホームページ」をクリックし
さっそく「このツールを作成」をクリックします。
作りたいジャンルに沿った名前で
アカウント名を取得すると良いと思います。
ツールの名前は、後でわかりやすいような
名前でなんでも構いません。
Step4
管理ページから忍者ホームページにアクセスして
作ったツールの名前をクリックします。
「FTP情報・アップロード」をクリックして
FTPパスワードを変更して、メモ帳などに控えておきます。
以上、今回はここまでです。
ありがとうございました。
無料で始める方法を数回に分けて説明して行きたいと思います。
Step1
Yahooなどでフリーメールを取得してください。
取得したら、アドレスとパスワードを
メモ帳などで保存しておいてくださいね。
（別の機会に管理ツールを紹介します）
Step2
無料ホームページサイトで、
サイトの開設を申請します。
今回はNINJATOOLSを使って説明します。
以下のサイトにアクセスして「忍者ホームページ」をクリックしてください。
NINJATOOLS
「とりあえずユーザー登録」を選んで、
取得しておいたフリーメールで登録します。
仮登録のメールが届きますので、
登録を完了させます。
Step3
NINJATOOLSにログインします。
「忍者ホームページ」をクリックし
さっそく「このツールを作成」をクリックします。
作りたいジャンルに沿った名前で
アカウント名を取得すると良いと思います。
ツールの名前は、後でわかりやすいような
名前でなんでも構いません。
Step4
管理ページから忍者ホームページにアクセスして
作ったツールの名前をクリックします。
「FTP情報・アップロード」をクリックして
FTPパスワードを変更して、メモ帳などに控えておきます。
以上、今回はここまでです。
ありがとうございました。
