Download presentation
Presentation is loading. Please wait.
1
Ｈｔｍｌの基本
2
Webページをメモ帳で作る 1 HTMLは hyper text markup Langage の略でプログラムの一種
アクセサリーメモ帳 でメモ帳を開く 以下のように半角英数で入力。全角が入らないように注意 <hｔｍｌ> </html> akaihana.html と名前を付けてデスクトップに保存。 クロームのアイコンが付く。 ダブルクリックすると何もないWebページが表示される。 何もないがWEBページである。 <>のことをタグという。Html と部分は「要素」と呼ばれる。ほとんどのタグは初めのタグと終わりのタグのペアがある。終わりのタグは / が入る。
3
Webページをメモ帳で作る 2 <body> あかいはな </body> </html>
akaihana.htmlを右クリックープログラムで開くーメモ帳 として、メモ帳で開く 以下のように赤字部分を追加して上書き保存する。 大文字小文字は意識しなくても大丈夫。ただしxmlでは不可・htmlではOK。 <html> <body> あかいはな </body> </html> ファイルをダブルクリックすると、「あかいはな」と表示される ここでは body要素名（本文） を加えた。 通常はbody タグ という言い方をする。
4
Webページをメモ帳で作る 3-1 ライブラリのピクチャ ーパブリックのピクチャ ーサンプルピクチャ ー菊の花 をデスクトップにコピー
ライブラリのピクチャ ーパブリックのピクチャ ーサンプルピクチャ ー菊の花 をデスクトップにコピー ファイル名を kiku.jpg とする
5
Webページをメモ帳で作る 3-2 <html> <body> <p>あかいはな</p>
さらに以下のように赤い部分のコードを追加する <html> <body> <p>あかいはな</p> <img src="kiku.jpg" > </body> </html> <p>は段落の意味。 <img src=“kiku.jpg” >は画像の場所を参照している Imgは要素。 src=“kiku.jpg” srcは属性名（プロパティ）、””内は値 と言う。 編集したファイルを開くと写真付きで表示される。
6
ＨＴＭＬ要素 http://www.tagindex.com/html_tag/elements/
たくさんあるが、暗記しなくても大丈夫。作りながら徐々に覚えていく。
7
メモ帳でHTMLを書くだけでは、ここまでしかできない。
文字の色を赤くするにはCSSを使う
8
CSSファイルの作成 メモ帳を新規に開いて、以下のように入力し、1.css というファイル名で入力。 ドット が大事（後述するが、ドットはクラス という意味） .aka { color:#FF0000; } これは文字色を赤にするコード。
9
HTMLとCSSのリンク Html をひらいてもまだ文字色は黒のまま。 HTMLとCSSが協力して働かないと文字色は変わらない
10
HTMLとCSSのリンク、スタイルの適用
<html> <head> <link href="1.css" rel="stylesheet" type="text/css"> </head> <body> <p class="aka">あかいはな</p> <img src="kiku.jpg" > </body> </html> HTMLを開くと 文字が赤で表示される。
11
メモ帳でサイト制作するのは マニアのみ ここまででも結構面倒 メモ帳でサイトを作るのは大変
1990年代初めHTMLが出始めのころは、みなメモ帳などでサイトを作っていた 現在ではHTMLのバージョンも異なり、仕様も新しくかつ複雑になっていてメモ帳で作るのは一部のマニアのみとなった。 なので普通は、サイト制作用ソフトを使用する。
Similar presentations
![コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは ウェブ (Web) は正式名称を World Wide Web という。 文字や画像、動画等を簡単に扱うことができる。 [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは.](/39/11010578/big_thumb.jpg "コンピュータ基礎実習 ( 上級 ) 第二回 ウェブページの作成について 清水淳紀. ウェブページとは ウェブ (Web) は正式名称を World Wide Web という。 文字や画像、動画等を簡単に扱うことができる。 [ リンク ] を介してページ同士がつながっているのが 特徴。 ページは.>")
