2010年 10月 31日
HTML 具体例(2/2)
HTMLの体験的な事例です。(エキサイトブログ)
10月29日と30日の記事を読んでからお読みください。
タグの詳細を知らなくても、原理・原則・基本を理解すれば、次のような遊びができました。
皆様もいろいろとトライして見てください。
(下記のソースコードは次回お知らせします)
この記事はエキサイトブログのマイブログにログインし、投稿画面で入力したものです。
(【HTML不使用】にはチェックが入っていませんのでHTMLで入力しています)
【事例1】文字の色を変える
次の赤字は「選択範囲をカラー化」の[赤ボタン】をクリックして付けたものです。
①この文字は赤です。
表示色はr(red)、g(green)、b(blue)の3色の配合で作られています。
その配合割合を示したのがカラーコードです。
rgb(255,0,0)が赤、rgb(0,255,0)が緑、rgb(0,0,255)が青であり、各色は0~255の256通りの指定ができます。
rgb(255,255,255)が白、rgb(0,0,0)が黒です。光の三原色の原理ですね。
次の②、③、④は①のソースコードのカラーコードを直接変更して色を変えています。
②この文字は緑です。
③この文字は青です。
④この文字は黒です。
【事例2】文字のフォントを変える
次の文字は「選択範囲を普通文字」のボタンをクリックしてフォントを変えたものです。
⑤この文字は普通文字です。
次の文字は「選択範囲を太文字」のボタンをクリックしてフォントを変えたものです。
⑥この文字は太文字です。
フォントサイズは「font size="5"」のように数字で指定します。2が普通文字、数字が大きくなると文字も大きくなります。
次の⑦、⑧、⑨はフォントサイズを3,5,7に直接変更して変えたものです。
⑦フォントサイズ3
⑧フォントサイズ5
⑨フォントサイズ7
【事例3】リンク先URLを変える
次のリンクは【リンク】ボタンをクリックして貼ったものです。
⑩ブロ友パソコン相談室
次のリンク先はすべて手入力したものです。
⑪お助けマン資料室
【事例4】タグを見つけて貼り付ける
以前元気ばばさんのブログで紹介されたミルク姫のYouTubeのタグ(埋め込みコード)があったので貼り付けてみました。3つありますが、上がオリジナル、下の2つが画像サイズを変更したものです。
⑫オリジナル(画像の大きさ640×385ピクセル)
⑬画像の大きさをブログサイズ500×300ピクセルに変更したもの
⑭サイズをさらに説明用画像に小さく変更したもの
以上
10月29日と30日の記事を読んでからお読みください。
タグの詳細を知らなくても、原理・原則・基本を理解すれば、次のような遊びができました。
皆様もいろいろとトライして見てください。
(下記のソースコードは次回お知らせします)
この記事はエキサイトブログのマイブログにログインし、投稿画面で入力したものです。
(【HTML不使用】にはチェックが入っていませんのでHTMLで入力しています)
【事例1】文字の色を変える
次の赤字は「選択範囲をカラー化」の[赤ボタン】をクリックして付けたものです。
①この文字は赤です。
表示色はr(red)、g(green)、b(blue)の3色の配合で作られています。
その配合割合を示したのがカラーコードです。
rgb(255,0,0)が赤、rgb(0,255,0)が緑、rgb(0,0,255)が青であり、各色は0~255の256通りの指定ができます。
rgb(255,255,255)が白、rgb(0,0,0)が黒です。光の三原色の原理ですね。
次の②、③、④は①のソースコードのカラーコードを直接変更して色を変えています。
②この文字は緑です。
③この文字は青です。
④この文字は黒です。
【事例2】文字のフォントを変える
次の文字は「選択範囲を普通文字」のボタンをクリックしてフォントを変えたものです。
⑤この文字は普通文字です。
次の文字は「選択範囲を太文字」のボタンをクリックしてフォントを変えたものです。
⑥この文字は太文字です。
フォントサイズは「font size="5"」のように数字で指定します。2が普通文字、数字が大きくなると文字も大きくなります。
次の⑦、⑧、⑨はフォントサイズを3,5,7に直接変更して変えたものです。
⑦フォントサイズ3
⑧フォントサイズ5
⑨フォントサイズ7
【事例3】リンク先URLを変える
次のリンクは【リンク】ボタンをクリックして貼ったものです。
⑩ブロ友パソコン相談室
次のリンク先はすべて手入力したものです。
⑪お助けマン資料室
【事例4】タグを見つけて貼り付ける
以前元気ばばさんのブログで紹介されたミルク姫のYouTubeのタグ(埋め込みコード)があったので貼り付けてみました。3つありますが、上がオリジナル、下の2つが画像サイズを変更したものです。
⑫オリジナル(画像の大きさ640×385ピクセル)
⑬画像の大きさをブログサイズ500×300ピクセルに変更したもの
⑭サイズをさらに説明用画像に小さく変更したもの
以上
by pc-otasukeman | 2010-10-31 23:17 | Comments(0)