ソースコードです

先程投稿したもののソースコードです。
エキサイトブログの投稿画面の入力中の表示状態です。
(HTML不使用にチェックを入れて送信しました)

HTMLの体験的な事例です。(エキサイトブログ)
10月28日のHTMLと29日を読んでからお読みください。
タグの詳細を知らなくても、原理・原則・基本を理解すれば、次のような遊びができました。
皆様もいろいろとトライして見てください。
(下記のソースコードは次回お知らせします)

この記事はエキサイトブログのマイブログにログインし、投稿画面で入力したものです。
(【HTML不使用】にはチェックが入っていませんのでHTMLで入力しています)

【事例1】文字の色を変える
次の赤字は「選択範囲をカラー化」の[赤ボタン】をクリックして付けたものです。
①<span style="color:rgb(255,0,0);">この文字は赤です。</span>

表示色は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)が黒です。光の三原色の原理ですね。

次の②、③、④は①のソースコードのカラーコードを直接変更して色を変えています。
②<span style="color:rgb(0,255,0);">この文字は緑です。</span>
③<span style="color:rgb(0,0,255);">この文字は青です。</span>
④<span style="color:rgb(0,0,0);">この文字は黒です。</span>

【事例2】文字のフォントを変える
次の文字は「選択範囲を普通文字」のボタンをクリックしてフォントを変えたものです。
⑤<font size="2">この文字は普通文字です。</font>

次の文字は「選択範囲を太文字」のボタンをクリックしてフォントを変えたものです。
⑥<span style="line-height: 1.2;"><font size="5">この文字は太文字です。</font></span>

フォントサイズは「font size="5"」のように数字で指定します。2が普通文字、数字が大きくなると文字も大きくなります。
次の⑦、⑧、⑨はフォントサイズを3,5,7に直接変更して変えたものです。
⑦<font size="3">フォントサイズ3</font>
⑧<font size="5">フォントサイズ5</font>
⑨<font size="7">フォントサイズ7</font>

【事例3】リンク先URLを変える
次のリンクは【リンク】ボタンをクリックして貼ったものです。
⑩<a href="http://sukettopc.exblog.jp/" target="_blank">ブロ友パソコン相談室</a>

次のリンク先はすべて手入力したものです。
⑪<a href="http://sukettopc2.exblog.jp/" target="_blank">お助けマン資料室</a>

【事例4】タグを見つけて貼り付ける
以前元気ばばさんのブログで紹介されたミルク姫のYouTubeのタグ(埋め込みコード)があったので貼り付けてみました。3つありますが、上がオリジナル、下の2つが画像サイズを変更したものです。
⑫オリジナル(画像の大きさ640×385ピクセル)
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/lrCl8QUPkQ4?fs=1&hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/lrCl8QUPkQ4?fs=1&hl=ja_JP" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

⑬画像の大きさをブログサイズ500×300ピクセルに変更したもの
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/lrCl8QUPkQ4?fs=1&hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/lrCl8QUPkQ4?fs=1&hl=ja_JP" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="300"></embed></object>

⑭サイズをさらに説明用画像に小さく変更したもの
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/lrCl8QUPkQ4?fs=1&hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/lrCl8QUPkQ4?fs=1&hl=ja_JP" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="170" height="102"></embed></object>以上

by pc-otasukeman | 2010-10-31 23:30 | Comments(0)

名前
URL
削除用パスワード

<< HTML 具体例(2/2)追加    HTML 具体例(2/2) >>