マんタ's icon'
  • マんタ
  • 2020/03/16 08:57

前回の続きからということでブラウザでの確認からしてみます。

TeraPadの場合確認の仕方は簡単です。

Content image

上のほうにある赤丸で囲んだインターネットエクスプローラーをクリックしてみましょう。

するとこのような画面が出てきます。

Content image

但しこれはあくまでサンプルですのでこのように出るとは限りません。

(バージョンやOSによって)

次にXHTMLファイルを編集するところに入っていきます

XHTMLファイルを続けて編集する場合、メモ帳かTeraPadとブラウザの両方を起動しておくと結果を確認しながら編集できるので効率的ですね。

メモ帳かTeraPadでXHTMLファイルを編集

       

XHTMLファイルを上書き保存

       

ブラウザで結果の確認

 

段落

p要素          ブロックレベル要素

段落を表します

<p>内容</p>

 

改行

段落内で改行するときはbr要素を使います

br要素           インライン要素

改行を表します

<br/>

 

見出し

XHTMLでは、レベル1からレベル6までの6段階の見出しが用意されています。

レベル1が一番上の見出しとなります。

見出しは h1要素~h6要素を記述して表します。

h1、h2、h3、h4、h5、h6要素 ブロックレベル要素

見出しを表します

<h1>内容</h1>

<h2>内容</h2>

<h3>内容</h3>

<h4>内容</h4>

<h5>内容</h5>

<h6>内容</h6>

 

強調

語句を強調する場合em要素を記述します。

em要素           インライン要素  

強調を表します

<em>内容</em>

 

より強い強調をする場合は strong要素を記述

 strong要素        インライン要素

より強い強調を表します。

 < strong>内容</ strong>

 

署名

Webページを見る人のために、署名にあたる会社名(作成者)、著作権表示、問い合わせ先などの情報を address要素として記述します。

一般的なブラウザでは address要素は斜体で表示されます。

address要素          ブロックレベル要素

署名を表します

<address>内容</ address>

 

画像

写真やイラスト、アニメーション(動画)などのデジタルデータを画像または画像ファイルといいます。

画像にはいろいろありますね。GIF,JPG,PNG等・・・・・

インターネットで扱う画像について

インターネット上では、ファイルサイズを小さくして保存できるGIF,JPG,PNG等の画像が一般的に使われます。

あまりサイズが大きいとインターネット上で送受信するときに時間がかかったり表示がされなかったりします。

Webページに使用する画像はファイルサイズをできるだけ小さくする必要がありますねwww

画像について・・・

GIF形式

色数を256色まで表現できるファイル形式です。

同じ部分をまとめることでファイルサイズを小さくします。

色数の少ないイラストなどで使用するると効果的です。

特定の色を透明にできる。 拡張子は gif です。

JPG形式

色数を約1670万色まで表現できるファイル形式です。

画質を調整することでファイルサイズを小さくします。

写真やグラデーションのあるイラストなどで使用すると効果的です。

拡張子は jpg または jpeg です。

PNG形式

色数を最大約280兆色まで表現できるファイル形式です。

比較的新しいファイル形式。GIFと同じ特徴を持ちGIFより多くの色を表現できます。

画質を下げずにファイルサイズを小さくできます。拡張子は、pngです。

 

画像の表示

Webページに画像を表示するには img要素 を記述して、src属性 で画像ファイル

alt属性 で代替テキストを指定します。

img要素は空要素のため />で閉じ/>の前には一つの半角空白を挿入します。

 

img要素      インライン要素

画像を表します

<img/>

src属性

画像ファイルを指定します

src="ファイルのパス"

alt属性

代替テキストを指定します

alt="代替テキスト"

 

 

画像サイズの指定

今回は最後に画像の幅と高さについて。

width属性

幅を指定します。

width="幅"

height属性

高さを指定します

height="高さ"

次回はCSSの基本に入っていきます。

明々後日ぐらいに公開する予定です。

ここまでご覧いただきありがとうございました。

コロナが怖いけどね(´;ω;`)

>>>>>>>>>>>>>>>>>>>> BY マんタ<<<<<<<<<<<<<<<<<

 

Article tip 0人がサポートしています
獲得ALIS: Article like 32.90 ALIS Article tip 0.00 ALIS
マんタ's icon'
  • マんタ
  • @25kit6
11月になりましたねwwwだんだん寒くなって来たしそろそろ本格的な冬モードかな?怪しげな風邪と菌も流行ってるみたいだし予防と消毒はしっかりしないとね!

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの?『柔道編』 【元警察官が本音で回答】

Like token Tip token
114.82 ALIS
Eye catch
他カテゴリ

オランダ人が語る大麻大国のオランダ

Like token Tip token
46.20 ALIS
Eye catch
他カテゴリ

防犯意識 マーキング 下書き供養④

Like token Tip token
24.07 ALIS
Eye catch
クリプト

続・NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
6.37 ALIS
Eye catch
教育・子育て

【科学】アリストテレスにデカルトにニュートンに…みな光に取り憑かれた~光学の発展~

Like token Tip token
23.75 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
他カテゴリ

テレビ番組で登録商標が「言えない」のか考察してみる

Like token Tip token
26.20 ALIS
Eye catch
ビジネス

海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす!

Like token Tip token
16.10 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
124.82 ALIS
Eye catch
他カテゴリ

BCAAは本当に必要なのか?徹底的調査

Like token Tip token
1.20 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS