スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

勝手にHTML講座 Vol.2 HTMLを具体的に

さてさてHTML講座第二回目の今回は、HTMLの具体的な説明に入りたいと思います。(すごくやっとです)

Vol.1の最後で保存してもらったHTMLコードを覚えてくれているでしょうか。
覚えているなんてそんな幻想を抱いちゃいけませんね。
実はちょっとミスがあったので修正してもう一度乗せます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>ハロー ワールド!</h1>
<p>これが見えているかな?</p>
<p><a href="http://www.google.co.jp">検索する</a></p>
</body>
</html>


これが、前回のコードです。
一見してわかるように、いくつものタグの入れ子になっています。
そのタグそれぞれの機能について、今日は解説を行います。

次の三つは、HTMLの構造の基幹となるタグです。重要です。

<html>~</html>


  このタグは、HTMLの一番外側の入れ子となります。
 いわば、ここからここまでがHTMLですよーと言っているようなものです。
 

<head>~</head>


  このタグは、HTMLのヘッダ情報であることを表します。
 この中身の内容は、ページの表示内容よりも先に読み込まれます。
 具体的には、「ページがどのような言葉で書かれているか」
 「このスタイルシートを読み込め」
 「リンク基準はここな」
 「あ、タイトルバーにこれ表示しといて~」
 といった「メタデータ」が記述されます。
 この中にもし、なにか文書を書いても、「定義上は」無意味になります。書いてはいけません。
 実際に書いたらふつうに見えちゃうけど。

<body>~</body>


  このタグは、HTMLの「内容」を表します。
 ここに、文字やら画像やらを書けば、ブラウザに表示される、というわけです。

上の三つが、HTMLの構造のもとになっています。
ちなみに、<html>直下には、<head>,<body>以外のタグを書いてはいけません。
ついでに言っておけば<foot>なんてのもないし<hand>なんてのもありません。

では次に、bodyやheadの中に書かれたタグについて。

<title>~</titile>


  このタグは、ページの「タイトル」を表すタグです。
 通常はこの内容が、ブラウザのタイトルバーに表示されます。
 この内部では、他のタグは一切無効化されるので、タイトルバーに太字とか斜体は使えません。
 <head>の内部にしか書いてはいけません。(定義上)
ちなみに――
022_3.png
titleタグを複数書いた場合。
022_2.png
titleタグをbodyの中に書いた場合。
022_4.png
タグをtitle内部で使った場合。

<h1>~</h1>


  このタグは、ページの「見出し」を表します。
 決して、「太字」や「大文字」を表すものではありません。
 そう表示されるからといって、そのように用いるのは「非推奨」とされます。
 実は、このh1タグの仲間には、h2やらh3やらがあります。
 推察のとおり、hの後の数字が小さくなるにつれ、表示される大きさも小さくなります。
 中見出し、小見出しといったものに使われるように設計されているのです。
 便利ですね。
 最小はh6となっています。
022_1.png
参考画像

<p>~</p>


  このタグは、「段落の区切り」を表します。
 pは「パラグラフ」の略です(聞き覚えありますよね?)
 通常は前後に改行が現れます。

<a>~</a>


  前回ちょこっとやりましたが、このタグは、リンクのためのタグです。
 クリックすると、href=""で指定したページにジャンプします。
 リンクってのは素晴らしい仕掛けだと個人的に思う。

これで一通り、例のコードのタグの解説はすんだかな?

もちろん、このほかにもタグはたくさんあります。
太字や大文字のタグもたくさん出てきます。

次回からは、目的別にいろいろ解説したいかなと思っています。




一時間でかけた。
まじめにやればできたんだな・・・
スポンサーサイト

勝手にHTML講座 Vol.1.5 ソースの見方

前回HTMLとはなんぞや、ということをお話ししたわけですが、
「どんなサイトも、HTMLでつくられている」
このことを覚えているでしょうか。

では、たとえばGoogleはどんなHTMLコードでつくられているのか、それに興味はありませんか?

今回はその見方についてです。




<<これ以上先は生命の保証が出来ません>>

勝手にHTML講座 Vol.1 HTMLとは

HTML講座 01 HTMLとは

えーっと勝手に進めさせていただきます。

第一回のテーマ。
「HTMLとは」

少し退屈かもしれませんがまずはこれを呼んでみてください。


HTML とは、 Hyper Text Markup Languageの略。
主にウェブページの記述をするために用いられるプログラミング言語の一種。
電子的方法により送信される文書のことをHyper Textと呼び、その構造を定義づける物として定義される。


はっきりいってこれは読む必要なかったです。
ごめんなさい。
でも次は必要なので「大体」でいいので読んでみてください。


HTMLは、次の形式を主として記述される。
(例)
<a href="http://www.google.co.jp">Googleに飛ぶ</a>
htm01-01



わからない?そうかもしれない。
ここは我慢しよう

HTMLは「タグ」(tag)というものの集まりで出来ています。
「タグ」は、このようにかかれます。

<タグ名 属性名="属性値">タグ内容</タグ名>


タグ名」とは、タグの種類をあらわす名前です。
タグによって意味は違ってくるので。
上の例では、「a」という種類の、「リンクをつくる」タグをさししめしています。

属性」は、「タグ」だけでは表現できないことをあらわすために使われます。
「a」タグにおいて、リンクする先を「href」属性であらわし、属性値に「http://www.google.co.jp」を指定しているわけです。
タグにはそれぞれ指定できる属性が決まっており、またこれはスペースで区切って複数記述することができます。

「内容」は、「タグ」の中身で、タグはこの内容を「修飾」するものとされています。

でそのタグには「開始タグ」と「終了タグ」があり、それで内容が挟み込まれます。
「終了タグ」は、タグ名の前に「/」が入っただけです。
「属性」は、「開始タグ」にはつけられますが、「終了タグ」にはつけることができません。
一部「終了タグ」を持たないタグがありますがそれは別のときに。

ちなみに内容と一部の属性値以外、日本語は使えないので(そりゃ英語圏で作られたから)、
すべて「半角」なのでご注意ください。

でIEとかのブラウザはこういう奇怪なものの集合体を読み取ってごにょごにょしたのを表示しているわけです。
人間と同じです。
見た目にだまされるな、と。

でその奇怪な何かを操ろうとするのがこの講座のやろうとしていること。


じゃあここまで退屈な、実は少し重要な話をしてきたので、
ちょっと実践的なことをやってみましょう。




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>ハロー ワールド!</h1>
<p>これが見えているかな?</p>
<p><a href="http://www.google.co.jp">検索する</a></p>
</body>





これをそのままメモ帳に貼り付けてください。

メモ帳ですよ!

Wordとかワードパッドとか一太郎とかじゃだめだよ!

※メモ帳がわからない人 [スタート]から[ファイル名を指定して実行(R)]→「notepad」入力&OK で起動可能。
※だいたいアクセサリにある
※Macのひと テキストエディットの[環境設定]→[新規書類]でフォーマットを「標準テキスト」
htm01-02


じゃあそれを貼り付けたら、[名前をつけて保存]してください。
htm01-03


で名前に「test01.htm」と入力して[ファイルの種類]を[すべてのファイル(*.*)]にしましょう。 ここ重要。
保存先はとりあえずデスクトップにでも。
01_04.png



するとデスクトップにこんなアイコンが出現します。
htm01-05


これをダブルクリック。
htm01-06 


htm01-07

こんな風に表示されれば完璧です。

※表示されない人 ファイル名を間違えていないかチェック「test01.htm.txt」「test01.txt」「test01.htn」とか

Hello World!とタイトルに表示されたでしょうか。あと文字は大きくなったりリンクになったりしているでしょうか。

自分で文字を変えてみたりして遊んでもいいでしょう。

ちなみに、Hello Worldというのは、プログラミングを始める際、はじめのプログラムに表示させる、慣例というかそんな言葉です。


今作ってもらったファイルが、HTMLファイルです。

拡張子は「.htm」または「.html

ブラウザで開かれますが、別にネットにあがったわけではありません。

でこんな風に、このサイトも、あの検索サイトも、あの巨大掲示板も、作られているわけです。

但しここで注意しておきたいのは、

HTMLとは、構造を定義する文書」であることです。

文字色の指定なども出来ますが、基本的に「検索」とか「書き込み」とかは、

その「検索」するための「構造」を定義するだけで、「機能」までは定義できない、ということです。

つまりHTMLでグーグ○や2c○は作れないということです。


長くなりましたが、上のことをとりあえず今日は覚えて置いてください。

最新記事
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
月別アーカイブ
カテゴリ
プロフィール

pojime.6654

Author:pojime.6654
特撮に目がないPC中毒者です。
http://anchorage.2ch.net/sfx/

あと最近また変な方向に走っていきそうで…

最新トラックバック
最新コメント
リンク
メールフォーム

名前:
メール:
件名:
本文:

検索フォーム
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。