一週間でマスターするホームページの作り方

WindowsMe対応版 (1 week master series)

※　2000年に発行された本でWindowsMeを想定して書かれている。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

リンク

・本書に書かれているHTMLの練習は、HTML練習帳　でどうぞ。

http://www.amzak.net/files/tool/html.html

・初心者が教えるホームページの作り方

........非常にわかりやすい！

・

HTMLタグの読み方

・a：アンカー　anchor

・align：アライン

・alt：オルト　alt属性を使って画像に代替説明文をつけることができる　

....例　alt="説明"

・bgcolor：バックグランウドカラー　

・br：ブレイク　break　

・col：カラム　colum

・h：ヘディング　heading

・hr：ホリゾンタルルール　horizontal rule

・href：エイチレフ　hyper(text) reference

・img：イメージ　image

・p：パラグラフ　paragraph　

・src　ソース　surce

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
※全体の構成

....本文では、最初に「目次」があり、最後に「付録」と「索引」がつき、本文は、月曜日から日曜日に分けてかかれている。

このブログでは月曜日を第1章とし、日曜日を第7章とする。

目次を青色で書く。

このブログの目的

ブログを書くのに必要なテクニックを学ぶ
サイトづくりの基礎を理解する

優先順位として、ブログで表現したい技術を優先していく。

課題

ページ内リンク　
トップページと最後にメニューバーをつける
スクロール付のテーブル　
画像の貼り付け、文字を横に書き出す。
アマゾンのリンクの貼り付け方
楽天のリンクの貼り付け方
忍者ツールの使い方
GIFアニメーションの作り方
色々な文字の書き方
表彰状アプリ　名前を入れる　はがき、A４サイズ
文字の背景に色をつける。テーブルの背景に色をつける。

はじめに
目次
本書について
必要な環境・ソフトウェアについて　
付録CD-ROMについて

・・・・・・・・

....付録　Windowsの操作に慣れる

....索引

・・・・・・・

第1章　ウエブページに触れる

1.ホームページの基礎

2.ウェブサイト公開までの流れ

3.HTMLの仕組みを見る

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第2章　HTMLを使ってみる　

1.HTMLの基礎を学ぶ　

2.ウェブページをアップロードする

3.HTMLを使ったページ作成　

4.ウェブページに色をつける

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第3章　画像をページに貼り付ける　

1.画像ファイルの保存形式　

2.GIX Proで画像を変換する　

3.ウェブページに画像を貼る

4.文章と画像を組み合わせる

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第4章　ファイルをリンクさせる

1.簡単なリンクを作る

2.相対リンクと絶対リンクについて

3.ページ途中にリンクさせる　

4.リストにして表示する

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第5章　オブジェクトを取り入れる　

1.水平線を取り入れる

2.テーブルを取り入れる

3.テーブルを使ってレイアウトする

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第6章　フレームを使ったサイトを作る　

1.ページをフレームで分割する

2.フレームを利用してリンクさせる

3.細かい手直しと仕上げをする

4.ウェブサイトをアップロードする

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第7章　フォームを使って返事をもらう

1.フォームを作る

2.ウェブサイトを更新する

3.アニメGIFを作る

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第1章　ウエブページに触れる

1.ホームページの基礎

2.ウェブサイト公開までの流れ

3.HTMLの仕組みを見る

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第2章　HTMLを使ってみる　

1.HTMLの基礎を学ぶ　

HTMLの基礎を学ぶ

　「しゃたい」「/えむ」で登録

　「ふとじ」「/ふとじ」で登録　

　「かせん」「/かせん」で登録　

　~~「うちけし」「/うちけし」で登録~~　

2.ウェブページをアップロードする

3.HTMLを使ったページ作成　

4.ウェブページに色をつける

「あかにする」「/ふぉんと」で登録

・文字をマーカーで塗るように色を付けるには？

→文字の背景に色をつける

■文字の背景に色をつける

タグのソース	ブラウザ表示
<font style="background-color:#ffff00;">文字</font>	文字

きいろにぬる　#ffff33;

　　きいろにぬる

　むらさきにぬる　#ccccff;

　　むらさきにぬる

　ぴんくにぬる　#ffccff;

　　ぴんくにぬる

　みどりにぬる　#99ff99;

　みどりにぬる

　みずいろにぬる　　#99ffff;

　みずいろにぬる

　あかにぬる

bgcolor="色指定"	背景色の指定になります
text="色指定"	文字色の指定になります
link="色指定"	通常のリンク文字の色
alink="色指定"	マウスでクリックした時のリンク文字の色
vlink="色指定"	訪問済みリンク文字の色

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第3章　画像をページに貼り付ける　

1.画像ファイルの保存形式　

2.GIX Proで画像を変換する　

3.ウェブページに画像を貼る

4.文章と画像を組み合わせる

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第4章　ファイルをリンクさせる

1.簡単なリンクを作る

....相対リンク：ウェブサイト内部同士のリンク　

....絶対リンク：ほかのサイトにリンク

....aエレメント

....href属性（エイチレフぞくせい）

<a href="リンクさせるファイルの位置（ファイル名）">リンク</a>

・青色のリンク：表示されたリンクと表示されていないリンクの色を変えるには？

2.相対リンクと絶対リンクについて

・画像をリンクに使う

<a href="リンクさせるファイルの位置（ファイル名）"><img src="画像ファイル"></a>

・画像のリンクの枠線を消す→border="0"

3.ページ途中にリンクさせる　

→name属性を使って目印をつける

例　このページの「課題」にリンクしてみる。

※Bloggerでは設定がうまくいかない

同じページ内でのリンクの場合、文字を変更して、ページの上段でリンクします

タイトル部分を同じに指定すれば、下に指定したname="タイトル"部分が開きます

同じページ内の、表示したい場所に下のを入れてください

4.リストにして表示する

～pエレメントをliエレメントに置き換える

........li：list item リスト項目

・記号付きリスト　<ul><li>・・・</li></ul>

........ul:unordered：list　非番号付きリスト（記号付きリスト）

○記号付きリストをカスタマイズする

<ul type="diskまたはcircleまたはsqare"><li>・・・</li></ul>

・番号付きリスト　<ol><li>・・・</li></ol>

........ol:ordered：list 番号付きリスト

○番号付きリストをカスタマイズする

<ol type="1またはAまたはaまたはⅠまたはⅰ"><li>・・・</li></ol>

・定義リストをつくる　

dl：difinition list　定義リスト　

dt：difinition term　定義された用語　

dd：difinition description 定義の説明文

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第5章　オブジェクトを取り入れる　

1.水平線を取り入れる

・水平線を作る　　hr

・水平線のサイズを変える　hr size="高さのピクセル数"

・水平線の横幅を固定する　hr width="固定する横幅のピクセル数"

・水平線に位置を指定する　hr align="位置"　位置＝右right　真ん中center　左left　

・水平線の横幅を％で指定する　hr width=" %"

・水平線の影を消す　hr noshade

2.テーブルを取り入れる

テーブル

行：row　ロウ

列：column　コラム

・見出しセルを作る

：<tr><th>見出し1</th><th>見出し2</th></tr>

・セルに画像を入れる

：<tr><td><img src="ファイル"></td></tr>

・テーブルの外枠線を太くする

<table border="数字">・・・</table>

・テーブルの内枠線を太くする　

<table cellspacing="数字">・・・</table>

・枠線と内容との間に余白をつくる　

<table cellpadding="数字">・・・</table>

・テーブル自体の位置を指定する　

<table alighn="leftまたはcenterまたはright">・・・</table>

・テーブルにキャプションをつける

<caption align="topまたはbottom">キャプション</caption>

3.テーブルを使ってレイアウトする

■ テーブルタグ応用

■ テーブルの横にスクロールバー

<div style="height:数字px; width:数字px; overflow-y:scroll;">
この中にテーブルタグのソース
</div>

あいうえおかきくけこさしすせそさしすせそたちつてと

・・・・・・・・・・・・・・・・・・・・
アメブロ用

更新記録

更新記録
二行目　真中か？

・・・・・・・

・テーブルの大きさを指定する

：<table width="横の長さ"heght="縦の長さ">・・・</table>

・横に隣り合うセルをくっ付ける

....colspan：column（列）のspan（広がり）　セルを横につなげると列が広がるから

：<td colspan="くっ付けるセルの数">・・・</td>

・縦に隣り合うセルをくっ付ける

....rowspan：row（行）をspan（広がり）　セルを縦につなげると行が広がるから

：<td rowspan="くっ付けるセルの数">・・・</td>

※tdだけでなth（見出しセル）でもセル同志をくっ付けることが可能

・セルの中身の左右の位置を変える

：<td align="leftかcenterかright">・・・</td>

・セルの中身の上下の位置を変える

：<td valign="topかmiddleかbottom">・・・</td>

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第6章　フレームを使ったサイトを作る　

1.ページをフレームで分割する

2.フレームを利用してリンクさせる

3.細かい手直しと仕上げをする

4.ウェブサイトをアップロードする

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

第7章　フォームを使って返事をもらう

1.フォームを作る

2.ウェブサイトを更新する

3.アニメGIFを作る

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

東京で世界一周

ページ

2012年2月3日金曜日

一週間でマスターするホームページの作り方

WindowsMe対応版 (1 week master series)

0 件のコメント:

コメントを投稿