こんばんわ～
今日は涼しい感じですねぇ。・・・・・宮古島はね
はい、ワタシは半袖です。まだいけます
久しぶりに、日本まんが昔話のDVDをみました。
懐かしいですねぇ。あれって今も放送しているんですか？
放送してないですよね
あれは子供にも大人にも良いですよね
・・・・・でも、何ですかね。あれを見ると
明日学校な気分になります。人間の習慣は怖いものです・・・・・・。
さて、昨日はｈｔｍｌのちょっとした概念とメモ帳で簡単な作成を勉強しましたね
内容はご理解いただけましたでしょうか？すぐに理解するの難しいと思いますので
ご自分のペースでゆっくり勉強していけば良いと思います。
今日は簡単なｈｔｍｌタグでページを作成したいと思います。
では、まず最初にｈｔｍｌファイルを格納する為のフォルダを作成します。
好きな名前でいいですがここでは「 sample 」フォルダとして作成します。
「 マウス右クリック 」→「 新規作成 」→「 フォルダ 」
すると、下記のように「 新しいフォルダ 」ができますので
これフォルダ名を「 sample 」に変更します。
出来ましたら「 sample 」フォルダをダブルクリックで開きましょう
開きましたら下記のようになると思います。
空っぽですね・・・？そりゃもちろん空です。まだ何も格納してませんから
これで
ファイルを格納するフォルダが出来上がりました。
次はｈｔｍｌファイルを作成します。
ここでは「 index.html 」として保存します。
前回で説明したように(見てない方はこちら→WEB制作を学びたい初心者・主婦の為の講座 ～ 始まり ～ ）
メモ帳を開きます。
「ファイル名を付けて保存 」の時に保存場所を「 samplel 」フォルダに指定しまて保存します。
すると・・・・
上記のように保存した「 index.html 」が保存されたと思います。
保存されていない場合は保存先が「 sample 」フォルダが選択されていないかと思います。
その「 index.html 」ファイルを開くと空白の状態で開かれたと思います。
さぁ
いよいよ、ページを作成して行きましょう出来上がりが楽しみですねぇ
「 index.html 」ファイルに書きのように入力してください。
※左側の行番号は入力しなくていいです。
入力しました
それでは説明したいと思います。
1行目と7行目：「 <div></div> 」 これは、ディブタグと呼びます。囲い（入れ物）を作ったと思ってください。
2行目と6行目：「 <ul></ul> 」 これは、ユーエルタグと呼びます。リストを作成するために使います。
3行目～5行目：「 <li></li> 」これは、エルアイタグと呼びます。<ul>タグを組み合わせることでリストが出来上がります。
※<li>タグは他のタグと組み合わせてもリストは出来ません。<ul>タグのみです。
そして「 <li></li> 」タグの中に「 <a href=""></a> 」がありますが、これはエータグと呼びます。
別名をリンクタグとも呼びます。そうです、クリックすると別のページに移動したりしますよね
あれがこのリンクタグなのです。
今回は、3つのリンクタグを作成しましたのでトップページとは別に、メニューページを2ページ作成します。
では、「 index.html 」を保存しましたら、さっそくブラウザで表示してみましょう
※表示方法を忘れた方はこちら→WEB制作を学びたい初心者・主婦の為の講座 ～ 始まり ～
すると・・・・・・？
おほぉ
なんとメニューが表示されました。
これはリストメニューです。
よくホームページのサイド側にメニューリストがあったりしますよね？それです
リンクタグを記述してますからトップをクリックするとトップページへ、メニュー１をクリックするとメニュー１とリンクタグで指定したURLへ移動します。
今はまだURLは記述していませんのでクリックしても移動しません。
次は移動先のページを作成します。
メモ帳を新規で開いて「 menu1.ｈｔｍｌ 」で「 sample 」フォルダを指定して保存します。
「 menu1.html 」を開いて下記のように入力してください。
入力しました
では、説明します。
1行目：「 <h1></h1> 」これは、エイチタグと呼びます。見出しを表示します。これは種類がありまして「 <h2> 」、「 <h3> 」～「 <h6> 」までありまして、数字が大きいほど文字が小さくなります。
2行目～3行目：「 <br> 」これは、ビーアールタグと呼びます。改行に使います。2つ記述してますので、1つ間が空いた感じで表示されます。
4行目～10行目：「 index.html 」で作成したリストをコピーして3行目の下から貼り付けます。
これで「 menu1.html 」ファイルは完了です。
同じように「 menu2.html 」ファイルを作成して下さい。
作成しましたら「 index.html 」、「 menu1.html 」、「 menu2.html 」のリンクタグに以下のように移動先のURLを記述します。
URLを記述しましたら、再度ブラウザで「 index.html 」を表示してみましょう。
表示しましたら、トップ、メニュー１、メニュー２とクリックしてみ下さい。
クリックしたページに移動すると思います。
できました
いやぁ～
ホームページ作るのは楽しいですね。
これに色などつけたりして装飾するともっと楽しいですよね～
今日はここまで
お疲れ様でした。
簡単なhtmlページの作り方はわかりましたでしょうか？
次回はｃｓｓについて触れてみたいと思います。
ｈｔｍｌだけでは面白くないので文字の色や大きさなどを装飾してみたいと思います。(^-^)/ﾊｲ!!
それでは、また次回まで・・・・
みなさんは、納豆はご飯と一緒に食べるそれとも別々に食べる
私は・・・・別々だって・・・ご飯がネバネバして美味しく食べれません
あ、なんかお腹すいてきた・・・でも眠いので寝ます。
お休みなさい・・・
今日は涼しい感じですねぇ。・・・・・宮古島はね
はい、ワタシは半袖です。まだいけます
久しぶりに、日本まんが昔話のDVDをみました。
懐かしいですねぇ。あれって今も放送しているんですか？
放送してないですよね
あれは子供にも大人にも良いですよね
・・・・・でも、何ですかね。あれを見ると明日学校な気分になります。人間の習慣は怖いものです・・・・・・。
さて、昨日はｈｔｍｌのちょっとした概念とメモ帳で簡単な作成を勉強しましたね
内容はご理解いただけましたでしょうか？すぐに理解するの難しいと思いますので
ご自分のペースでゆっくり勉強していけば良いと思います。
今日は簡単なｈｔｍｌタグでページを作成したいと思います。
では、まず最初にｈｔｍｌファイルを格納する為のフォルダを作成します。
好きな名前でいいですがここでは「 sample 」フォルダとして作成します。
「 マウス右クリック 」→「 新規作成 」→「 フォルダ 」
すると、下記のように「 新しいフォルダ 」ができますので
これフォルダ名を「 sample 」に変更します。
出来ましたら「 sample 」フォルダをダブルクリックで開きましょう
開きましたら下記のようになると思います。
空っぽですね・・・？そりゃもちろん空です。まだ何も格納してませんから
これで
ファイルを格納するフォルダが出来上がりました。
次はｈｔｍｌファイルを作成します。
ここでは「 index.html 」として保存します。
前回で説明したように(見てない方はこちら→WEB制作を学びたい初心者・主婦の為の講座 ～ 始まり ～ ）
メモ帳を開きます。
「ファイル名を付けて保存 」の時に保存場所を「 samplel 」フォルダに指定しまて保存します。
すると・・・・
上記のように保存した「 index.html 」が保存されたと思います。
保存されていない場合は保存先が「 sample 」フォルダが選択されていないかと思います。
その「 index.html 」ファイルを開くと空白の状態で開かれたと思います。
さぁ
いよいよ、ページを作成して行きましょう出来上がりが楽しみですねぇ「 index.html 」ファイルに書きのように入力してください。
※左側の行番号は入力しなくていいです。
入力しました
それでは説明したいと思います。
1行目と7行目：「 <div></div> 」 これは、ディブタグと呼びます。囲い（入れ物）を作ったと思ってください。
2行目と6行目：「 <ul></ul> 」 これは、ユーエルタグと呼びます。リストを作成するために使います。
3行目～5行目：「 <li></li> 」これは、エルアイタグと呼びます。<ul>タグを組み合わせることでリストが出来上がります。
※<li>タグは他のタグと組み合わせてもリストは出来ません。<ul>タグのみです。
そして「 <li></li> 」タグの中に「 <a href=""></a> 」がありますが、これはエータグと呼びます。
別名をリンクタグとも呼びます。そうです、クリックすると別のページに移動したりしますよね
あれがこのリンクタグなのです。
今回は、3つのリンクタグを作成しましたのでトップページとは別に、メニューページを2ページ作成します。
では、「 index.html 」を保存しましたら、さっそくブラウザで表示してみましょう
※表示方法を忘れた方はこちら→WEB制作を学びたい初心者・主婦の為の講座 ～ 始まり ～
すると・・・・・・？
おほぉ
なんとメニューが表示されました。
これはリストメニューです。
よくホームページのサイド側にメニューリストがあったりしますよね？それです
リンクタグを記述してますからトップをクリックするとトップページへ、メニュー１をクリックするとメニュー１とリンクタグで指定したURLへ移動します。
今はまだURLは記述していませんのでクリックしても移動しません。
次は移動先のページを作成します。
メモ帳を新規で開いて「 menu1.ｈｔｍｌ 」で「 sample 」フォルダを指定して保存します。
「 menu1.html 」を開いて下記のように入力してください。
入力しました
では、説明します。
1行目：「 <h1></h1> 」これは、エイチタグと呼びます。見出しを表示します。これは種類がありまして「 <h2> 」、「 <h3> 」～「 <h6> 」までありまして、数字が大きいほど文字が小さくなります。
2行目～3行目：「 <br> 」これは、ビーアールタグと呼びます。改行に使います。2つ記述してますので、1つ間が空いた感じで表示されます。
4行目～10行目：「 index.html 」で作成したリストをコピーして3行目の下から貼り付けます。
これで「 menu1.html 」ファイルは完了です。
同じように「 menu2.html 」ファイルを作成して下さい。
作成しましたら「 index.html 」、「 menu1.html 」、「 menu2.html 」のリンクタグに以下のように移動先のURLを記述します。
URLを記述しましたら、再度ブラウザで「 index.html 」を表示してみましょう。
表示しましたら、トップ、メニュー１、メニュー２とクリックしてみ下さい。
クリックしたページに移動すると思います。
できました
いやぁ～
ホームページ作るのは楽しいですね。これに色などつけたりして装飾するともっと楽しいですよね～
今日はここまで
お疲れ様でした。
簡単なhtmlページの作り方はわかりましたでしょうか？
次回はｃｓｓについて触れてみたいと思います。
ｈｔｍｌだけでは面白くないので文字の色や大きさなどを装飾してみたいと思います。(^-^)/ﾊｲ!!
それでは、また次回まで・・・・
みなさんは、納豆はご飯と一緒に食べる
それとも別々に食べる私は・・・・別々
だって・・・ご飯がネバネバして美味しく食べれませんあ、なんかお腹すいてきた・・・
でも眠いので寝ます。お休みなさい・・・