はじめてのホームページ HTML入門

概 要

ホームページ作成の基本スキルであるHTMLタグの書き方から使い方までを例題を使ってやさしく解説したフルカラー入門書です。インターネットやホームページの仕組みやHTMLの基本から、文章を表示させる、見出しの表示、文字の大きさを変える、箇条書きの方法、表組み(テーブル)の作り方、画像の表示、音楽や映像ファイルの再生、リンクなどのHTMLの基本的なタグ、さらにホームページの見栄えを整えるスタイルシートの書き方までをやさしく解説。最新のXHTMLに準拠した正しいHTMLの使い方、タグで描いたHTMLをCSSを使ったスタイル設定に書き換える方法がわかります。サンプルコードのダウンロードサービス付き。

著者 荒石正二
価格 本体1380円(税別)
ISBN 978-4-7980-2166-9
発売日 2009/3/5
判型 B5変
色数 4色
ページ数 240
CD/DVD
対象読者 入門
シリーズ はじめての...
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

CHAPTER1 HTMLでホームページを作ろう

1 インターネットを理解する

インターネットとは

ブラウザでホームページが見られるようになるまで

2 ホームページの仕組み

ホームページとは

ホームページの仕組み

3 ホームページで表示できるもの

文字情報

画像情報

映像&音楽情報

4 ホームページ作成に必要なもの

必須な機材・ソフト・環境

用意しておくと便利な機材とソフト

5 ホームページの内容を考えよう

内容を決める

必要な素材を集める

6 ホームページ作成の事前準備

htmlファイルを確認してみる

ファイルの拡張子を見えるようにする

拡張子を確認してみる

7 HTMLの基本を理解する

タグの使い方

すべての内容がタグで囲まれている

8 htmlファイルを作ってみよう

「メモ帳」を起動する

htmlファイルを保存する

9 htmlファイルをブラウザで開くには

「Internet Explorer」を起動する

CHAPTERR2 文章を表示する

10 文字を表示させるには

htmlファイルを作ってブラウザで表示する

11 ページに見出しを表示させるには

メモ帳でファイルを開いてみる

見出し用のタグを入力する

12 文字を大きく表示させるには

<b>タグで文字を太く表示させる

<strong>タグで文字を太く表示させる

13 文字の色を変更するには

<font>タグを使って文字の色を指定する

RGB値で文字の色を指定する

ページ全体の文字色を変更する

14 文字を斜体で表示させるには

<i>タグで文字を斜体にする

<em>タグで文字を斜体にする

15 文字に下線を引くには

<u>タグで文字に下線を引く

<ins>タグで文字に下線を引く

16 文字の大きさを変えたいときは

<big>タグで文字を大きくする

<small>タグで文字を小さくする

17 特殊な文字を表示させるには

「<」と「>」を文字コードで指定する

他の特殊記号を表示させてみる

18 上付き・下付きを指定するには

<sup>タグで上付き文字を表示させる

<sub>タグで下付き文字を表示させる

19 チップ表示の文字を表示させるには

<acronym>タグで略語の正式名称を表示させる

<abbr>タグで略語の正式名称を表示させる

20 ページに表示されないコメントを入力するには

コメント文を記述してブラウザで確認する

21 ブラウザのウィザードバーに文字を表示させるには

ブラウザでウィンドウバーの表示内容を確認する

ウィンドウバーに表示される文字を指定する

CHAPTER3 ページをレイアウトするには

22 文章の揃えを変えるには

<h1>タグの文字を「中央揃え」に変更する

<p>タグの文字を「右揃え」に変更する

23 文章に段落や改行を設定するには

文章を<br>タグで改行させる

「park_main.html」内の文章を<br>タグで改行させる

24 文字に取り消し線を引くには

<s>タグと<strike>タグで取り消し線を指定する

<del>タグで取り消し線を指定する

25 ページ内に横罫線を引くには

コンテンツの区切り部分に横罫線を引く

横罫線の「幅」「揃え」「高さ」「色」を指定する

26 テキストをそのまま表示させるには

<pre>タグを使わないで文章をそのまま表示させる

<pre>タグで文章をそのまま表示させる

CHAPTER4 箇条書きリストや連番付きリストを作るには

27 箇条書き(リスト)を作るための基本

<ul>タグと<il>タグを組み合わせて使う

28 階層のある箇条書き(リスト)を作るには

階層構造の箇条書き(リスト)を作る

29 連番付きリストを作るには

連番付きリストを作る

30 連番付きリストでラベルの種類を変えるには

ラベルを小文字のアルファベットに変更する

ラベルを大文字のローマ数字に変更する

31 ラベルの先頭番号を変更するには

ラベルの先頭番号を指定する

32 箇条書き(リスト)のラベルを変えるには

ラベルを「●」から「■」に変更する

階層の違うラベルを「●」に指定する

33 箇条書き(リスト)のラベルを個別に変えるには

同じ階層内のラベルを変更する

CHAPTER5 表組みを作るには

34 ホームページの表組みとは

HTMLの表組みでできること

HTMLでの表組み名称

表組みと記述するタグの関係

35 表組みを作るには

表組みを作る

36 表組みの見出しを設計するには

見出し行を作る

37 表組みのサイズを変えるには

表組みのサイズをピクセルで指定する

表組みのサイズをパーセントで指定する

38 表組みにタイトルを表示するには

表組みにタイトルを表示させる

表組みの右端上にタイトルを表示する

39 セル内の揃えを変えるには

各セルを中央揃えに指定する

特定のセルだけを右揃えにする

40 セルを横方向に結合するには

見出しセルを結合する

41 セルを縦方向に結合するには

2つのセルを縦方向に結合する

3つのセルを縦方向に結合する

42 セル内の縦方向の位置や余白を変えるには

セル内の文字を上端揃えで表示する

セルの余白を調整する

CHAPTER6 画像や音楽、映像を表示・再生するには

43 画像を表示させるには

写真画像を表示させる

44 画像の表示サイズを変えるには

表示する画像の大きさを指定する

表示する画像の大きさをパーセントで指定する

45 ホームページに使える音声・音楽ファイル

インターネット上で扱える音声・音楽ファイル

音質と容量の目安

音楽ファイルを編集するソフト

音楽ファイルをインターネットで検索する

46 音声・音楽ファイルを再生させるには

音声・音楽ファイルを再生させる

47 音声・音楽ファイルをコントロールするには

操作パネルを消してループ再生させる

捜査パネルを表示して自動再生を切る

48 映像ファイルを再生させるには

映像ファイルを再生させる

CHAPTER7 リンクを使うには

49 リンクの仕組みを理解する

リンクの使い方を具体例で確認する

リンクの種類を知っておく

50 同じページ内へリンクさせるには

同じホームページ内でリンクさせる

51 他のホームページへリンクさせるには

他のホームページにリンクする

ブラウザで確認する

52 メールへのリンクを設定するには

ホームページ上にメールへのリンク設定を行う

ブラウザで確認する

53 ファイルへリンクさせるには

他のhtmlファイルをリンクさせる

ブラウザで確認する

54 画像をリンクさせるには

画像へのリンク設定を行う

ブラウザで確認する

CHAPTER8 スタイルシート編

55 スタイルシートとは

スタイルシートの使用例

スタイルシートの記述例

スタイルシートは別ファイルに分割可能

56 cssファイルを読み込ませるには

スタイルシートを別ファイルでまとめる

57 スタイルシートの使い方を理解する

スタイルシートを適用させる前の準備

タグへスタイルシートを指定する

ブラウザで確認する

58 htmlファイルを見直す

htmlファイルの内容を見直してい

59 ボックス構造を理解する

表示される内容のサイズ

余白とボーダーの関係

ボックス全体の幅

ボックス構造をサンプルでチェックする

60 文字の色を変えるには

スタイルシートで文字の色を変更する

61 文字のサイズを変えるには

スタイルシートで文字のサイズを変更する

特定の部分だけにスタイルシートを適用させる

62 文章の揃えを変えるには

スタイルシートで文字の揃えを変更する

特定のタグにid名をつる

63 文字を太く表示するには

指定した部分の文字だけを太くする

64 文字を斜体で表示するには

指定した文字だけを「oblique」の指定で斜体表示する

指定した文字だけを「italic」の指定で斜体表示する

65 文字に下線・上線を加えるには

特定の文字に上線を加える

特定の文字に下線を加える

66 段落や文字の周囲に余白を設けるには1

段落の下側にパディングを指定する

段落の周囲にパディングを指定する

67 段落や文字の周囲に余白を設けるには2

段落にマージンを指定する

同じid名のスタイルシートを別の場所に適用させる

68 段落や文字の周囲に罫線を引くには

段落に罫線を引く

見出しの周囲に2本線を引く

69 罫線の太さや色を変更するには

罫線の太さを指定する

罫線の色を指定する

70 段落や文字の背景に色を指定するには

段落の背景色を指定する

文字の背景色を指定する

71 文章の行間を調整するには

段落の行間を空ける

特定の部分で行間を指定する

72 文章の字間を調整するには

特定段落の字間を指定する

見出し文字の字間を詰める

73 文章や段落の背景に画像を表示するには

段落や背景に画像を表示させる

段落の背景に異なる画像を表示させる

74 ページの背景に画像や色を設定するには

ページ全体の背景に画像を表示させる

ページ全体の背景に色を表示させる

75 背景画像の表示方法を調整するには

背景の画像を1つだけ表示する

背景の画像を横方向にだけ表示する

ページ全体の背景に画像を縦方向にだけ表示する

76 背景画像の表示位置を調整するには

背景画像を右端に表示する

背景画像を右端に1つだけ表示する

77 画像がスクロールしないようにするには

ページ全体の背景画像を固定する

段落の背景画像を固定する

78 文章の1文字目だけに空白を加えるには

1文字目だけ空白を加える

1文字目だけ左側へ食い込ませる

79 文章の1文字目だけ大きく表示するには

1文字目だけ大きく表示する

1文字目の文字に装飾を加える

80 連番付きリストでラベルの種類を指定するには

ラベルを大文字のアルファベットに変更する

ラベルを大文字のローマ数字に変更する

81 箇条書き(リスト)のラベルを指定するには

箇条書き(リスト)のラベルを「●」に変更する

特定のラベルだけ「○」に変更する

82 連番付きリストのラベルに画像を使うには

連番付きのリストのラベル画像を指定する

83 リストの背景に画像を指定するには

箇条書き(リスト)の項目に背景画像を指定する

84 画像の横に表示させた文字の位置を調整するには

日記用のHTMLファイルを作成する

画像横に配置した文字の位置を指定する

85 ボックス内の幅や高さを指定するには

ボックス内の幅を指定する

ボックス内の幅と高さを指定する

86 画像の周囲に余白を加える

画像の余白を指定する

画像の上下だけに余白を加える

87 画像の周囲に罫線を加えるには

画像に罫線を加える

罫線の内容を変更する

88 表組みの幅や高さを変えるには

表組み全体の幅と高さを指定する

<tr>タグの高さを指定する

89 表組みのセル同士で間隔を指定するには

セル同士の間隔を消す

セル同士の間隔を数値で調整する

90 リンクされている文字の色を変えるには

リンクされている文字の色を指定する

PR

秀和システム