高校生のためのWeb制作講座

高校生のためのWeb制作講座15 HTML編 15 画像を取り込む

 

<body background="gz/bac.gif">
<img src="gz/tp2.jpg" ><br>
<img align="center" src="gz/tp2.jpg" >
<p align="center" ><img src="gz/tp2.jpg" ></P>

align=揃える
align="center"
 <img>=image:画像
 src=source:情報源
画像ファイルは、拡張子が.gifや.jpg .pngが利用
.jpg:綺麗に見せる 重い  フルカラー(約1,677万色!
.gif:軽い   256色   透過処理可
 

  • 2020.03.16 Monday
  • 22:54

高校生のためのWeb制作講座

高校生のためのWeb制作講座14 HTML編 14 背景を画像で表す

 

<body background="bac.gif">
<body background="画像ファイル名"> ~ </body>

<body background="gz/bac.gif">
<body background="url(フォルダ名/画像ファイル名)"> ~ </body>

url :住所のようなもの

  • 2020.03.15 Sunday
  • 17:20

高校生のためのWeb制作講座

高校生のためのWeb制作講座13 HTML編 13 Webページの背景色

 

<body bgcolor="#ffffa0" text="#00f0f0">
 <p><font size="5">高校生のWeb制作講座</font></p>
 <p><font size="5" color="#ff0000" >高校生</font></p>
 <p style="font-size:2em; color:#00ff00;background-color:#000000;display: inline;">高校生のWeb</p><br>
<p><font size="+3" >高校生の<span style="color:#ffff80;background-color:#00f000;">Web</span>制作講座</font></p>
  </body>

<body bgcolor="#ffffa0" text="#00f0f0">

  • 2020.03.14 Saturday
  • 22:07

-

高校生のためのWeb制作講座12 HTML編 12 文字の背景色

 

<body>
 <p><font size="5">高校生のWeb制作講座</font></p>
 <p><font size="5" color="#ff0000" >高校生のWeb制作講座</font></p>
 <p style="font-size:2em; color:#00ff00;background-color:#000000;">高校生のWeb制作講座</p>
 <p style="font-size:2em; color:#00ff00;background-color:#000000;display: inline;">高校生のWeb制作講座</p><br>

<p><font size="+3" color="#0000ff">高校生の<span style="color:#ffffff;background-color:#000000;">Web</span>制作講座</font></p>
  </body>

display: inline;
<span style=”background-color:#FFCBCB; display: inline;”></span>

  • 2020.03.14 Saturday
  • 17:15

高校生のためのWeb制作講座

高校生のためのWeb制作講座11 HTML編 11 文字の色を変える

 

<body>
 <p><font size="+3">高校生のWeb制作講座</font></p><br>
  
 <p><font size="+3" color="red">高校生のWeb制作講座</font></p>
 <p><font size="+3" color="#ff0000">高校生のWeb制作講座</font></p><br>

<p style="font-size:2em;"><font color="#ff0000">高校生のWeb制作講座</font></p>
<p style="font-size:2em; color:#ff0000;">高校生のWeb制作講座</p><br>

<p><font size="+3" color="#ff0000">高校生の<font color="#00ff00">Web</font>制作講座</font></p>
<p><font size="+3" color="#0000ff">高校生の<span style="color:#ff0000;">Web</span>制作講座</font></p>
     </body>


<font color="カラー名かRGB値">〜</font>
<font color="red">〜</font>  カラー名
<font color="#ff0000"></font> RGB値

RGB値とは、赤と緑と青の3色それぞれ混ぜる分量を2桁の(0〜9の10個の数字とa〜fの6個の英字で色の強さを、00からffの16進数、256段階で表した数値を使って#(シャープ)をつけ指定するものです。
16×16×16×16×16×16=16777216色が表現できます。

<span style="color:#ff0000;”>〜</span>

  • 2020.03.13 Friday
  • 21:27

高校生のためのWeb制作講座

高校生のためのWeb制作講座10 HTML編 10 文字の大きさ変更

 

<h1 align="center">高校生のWeb制作講座</h1>
  <h2 align="right">高校生のWeb制作講座</h2>
 
<p>高校生</p>
<p><font size="+1">高校生の</font></p>
<p><font size="+2">高校生のWeb</font></p>
<p><font size="+3">高校生のWeb制作講座</font></p><br>

<p><font size="+4">高校生</font>の<font size="+5">Web</font><font size="-1">制作</font><font size="-2">講座</font></p>

<h1 style="font-size:5em;">高校生のWeb制作講座</h1>

<big>高校生</big>の<big><big>Web</big></big><small>制作</small>


大きさ変え:<font size="">〜</font>   font=文字の形
            *相対的な大きさで指定する
      「size="+1"」のように相対的に指定します。基準の文字の大きさは、閲覧者      のブラウザの設定値に依存します。基準より上下「-2(最小)〜0〜+4(最      大)」まで指定できます。

      *絶対的な大きさで指定する
      「size="2"」のように絶対的に指定します。基準の文字の大きさは、「3」で       すが、大きさは閲覧者のブラウザの設定値に依存します。「1(最小)〜7      (最大)」まで指定できます。

            <p style="font-size:5em;">〜</p>
            <span style="font-size:2.5em;">〜</span>

改行:<br>開始タグのみ 終了タグはない


 

  • 2020.03.12 Thursday
  • 17:58

高校生のためのWeb制作講座

高校生のためのWeb制作講座9HTML編 9

見出し、

段落

 

タグ
<h1>:見出し heading=見出し
<p>:段落   Paragraph =段落

属性
align=揃える
align="center"
align="right"
 

  • 2020.03.11 Wednesday
  • 16:16

高校生のためのWeb制作講座

高校生のためのWeb制作講座8HTML編 8 HTMLの基本構造

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  高校生のWeb制作講座
  </body>
</html>

 

<html>:html文書
<head>:頭 文書の各情報
<body>:文書の内容

  • 2020.03.10 Tuesday
  • 16:54

高校生のためのWeb制作講座

高校生のためのWeb制作講座7HTML編 7 HTMLのバージョン表示

 

 

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
Hyper Text :文字を超える
Markup:文字(テキスト)に意味を与えてあげる。タグと言う印で行っている。
Language:言語

HTMLは大きな進歩をしてきて、数個のバージョンがある。現在はHTML5が主流となってきている。古いWebページでは古いHTMLのバージョンも現在使われていると思われる。

HTML5であることを表すタグ:<!DOCTYPE html>

  • 2020.03.09 Monday
  • 23:06

高校生のためのWeb制作講座

高校生のためのWeb制作講座6HTML編 6 文字化けを防ぐ

 

文字エンコーディング:文字の変換表 これを指定をしないと文字化けを起こすことがある。
HTMLファイルのコード内では、<meta charset="utf-8">に当たり、utf-8の文字エンコーディングを設定していることが分かる。
サクラエディターでは、コードに記入する以外にも、設定するところがある。

  • 2020.03.09 Monday
  • 16:17