ZERO WEB スタッフブログ

気になった情報や今後の展開など

Entries for the ‘HTMLについて’ Category

次世代html&CSS

前々からhtml5やCSS3の策定について、話題には上ってますが、
最近、W3Cの策定した規定を訳したサイトやチートシートをよく目にする様な気がします。

HTML5とは、W3CがHTML4に代わる次世代のHTMLとして策定中のHTML仕様です。
2008年1月22日にドラフト(草案)が発表されていて、
これまでとは違った新しい要素や属性が多数追加されている様です。

Leave a Comment

正しいALTの書き方

画像を貼ったら、ALTってつけますよね。
どのように記述しているでしょうか?
今まで、私の中の書き方としてこんなポリシーがありました。
○ 要約してなるべく短くする
○ その画像を説明をする
しかし、ALTに関して調べ直してみると
正しい書き方としては、完全NGでした。。。
では、どのように書けばよいのかというと
「画像をすべてOFFにして表示したときに、画像がONの時と同じ表現ができる」
書き方をすればよいのです。
この書き方から、私のポリシーであった
○ 要約してなるべく短くする
というのは
○ ちゃんと意味がわかるまで長文にしてもよい
ということになります。
また
○ その画像を説明をする
というのは
○ その画像はなんのために貼ってあるのかを明確にして、その役割を書く
ということになります。
尚、ALTは空でもよいという場面もでてきます。
画像をOFFにしたときでも、意味が伝わればよいのですから
ムダにALTを増やしてユーザーを困らせてしまっては意味がありません。。。
ここらへんを良く考えて、ALTを書いていきたいですね。

Leave a Comment

htmlを使ってプロフィールを作ろう!

実践的なHTMLを書いてみます。
プロフィールを作りましょう。
テキストは以下を用意しました。
山田太郎のプロフィール
山田 太郎
20歳
167cm
60kg
A型
コンビニ店員
東京 八王子在住
20歳と同時に、一人暮らしをはじめた。
新しい自分を見つけるため、ウェブ世界に飛び込もうとしている。
さて、これをいままで使ったhtmlで表現してみましょう。
まずは、結果から。
山田太郎のプロフィール

氏名
山田 太郎
年齢
20歳
身長
167cm
体重
60kg
血液型
A型
職業
コンビニ店員
住所
東京 八王子在住

20歳と同時に、一人暮らしをはじめた。
新しい自分を見つけるため、ウェブ世界に飛び込もうとしている。
上手く表示されていますか?
怪しい場合は、これから紹介するタグはテキストエディタに貼り付けて、確認してみてください。
(ブログサービスにより、htmlが無視される事がありますので、ご了承ください。)
htmlで組む事をコーディングといいます。
コーディングには正解はありません。
ここで紹介するのは、一つの例です。
他の方法もゼヒ試してみてください。
さて、解説です。
上のタグは、ソースで見ると以下のようになています。
<h3>山田太郎のプロフィール</h3><dl><dt>氏名</dt><dd>山田 太郎</dd><dt>年齢</dt><dd>20歳</dd><dt>身長</dt><dd>167cm</dd><dt>体重</dt><dd>60kg</dd><dt>血液型</dt><dd>A型</dd><dt>職業</dt><dd>コンビニ店員</dd><dt>住所</dt><dd>東京 八王子在住</dd></dl><p>20歳と同時に、一人暮らしをはじめた。</p><p>新しい自分を見つけるため、ウェブ世界に飛び込もうとしている。</p>
ここで使用したタグは、
<h3>
<dl>
<dt>
<dd>
<p>
です。
見出しに<h1><h2>を使わなかったのは、このブログのどこかに使われているので、安全をみて<h3>としました。
もっとも重要なタグ<h1>が複数ある事はおかしな事ですし、<h2>にしても多数あるのは、危険と考えました。
次に、定義タグで項目を定義づけしました。
ちょっとずるいのですが、項目も追加しました。
最後のコメントは、<p>タグでくくって完了です。
いかがでしょうか?
同じようなコーディング、まったく違ったコーディング、さまざまだと思いますが、テキストの意味を考えて、マークアップしていく事が大切です。
練習、練習!

Leave a Comment

ここまでのhtmlでカンタンなホームページは作れる?!

今日までに覚えたhtmlタグをおさらいします。
<html>
「このテキストはこれからhtmlで書きます」
<head>
「画面で表示する前に、必要な情報をまっさきに読み込んでおく範囲」
<title>
「ブラウザの最上部に表示される最重要タイトル」
<body>
「機能や情報を表示する範囲」
<h1>
本のタイトル(もっとも重要なテキスト)
<h2>
章のタイトル(次に重要なテキスト)
<p>
本文
<ul>
「この領域はリスト表示」
<li>
「各項目」
<dl>
「定義リストの領域を決る」
<dt>
「質問にあたる部分」
<dd>
「その問いに答える」
<img src=”URL” alt=””>
「画像を表示 ・ 画像までのパス ・ 代替テキスト」
<a href=”URL”>
「リンク機能」
以上がここまで覚えたタグです。
実は、シンプルなホームページなら上記のタグで作れてしまいます。
情報を整理するには、これだけで十分。
情報の整理をもっと便利にする為に、
<table>
<form>
というタグがありますが、それは後にとっておきます。
あせらず、上記のタグで情報の整理に慣れてください。
次回からは、実践的にhtmlを作成する作業を行います。

Leave a Comment

インターネットのキモ!リンクタグを知る

リンクこそが、htmlの真骨頂です。
インターネットのキモ!
これがないとホームページという概念が生まれません。
とても大切なタグですので、しっかりと覚えましょう。
さっそく、書き方は以下のようになります。
<a href=”ここにURL”>ここにクリックして欲しいテキスト</a>
URLとは、ホームページのアドレスの事です。
ヤフーのURLといえば、
http://www.yahoo.co.jp
が、URLです。
もし、ヤフーへのリンクを作りたかったら、
<a href=”http://www.yahoo.co.jp”>ヤフーへのリンク</a>
となります。
ところで、ヤフーのURLは、絶対パスです。
相対パスは使えないのでしょうか。
いいえ、使えます。
ここが少しややこしいところなので、気をつけてください。
相対パスは、あるファイルを主体として他のファイルにアクセスする道順でしたね。
もし、test1.htmlというファイルから同じフォルダ(階層)にある、test2.htmlへリンクを貼りたいとすると、
<a href=”test2.html”>test2へいく</a>
となります。
もし、test2.htmlがsampleというフォルダの中に入っているならば、
<a href=”sample/test2.html”>test2へいく</a>
となるわけです。
さらに、test1.htmlからヤフーへ相対パスでリンクをしたいとすると・・・・・・出来ません。
フォルダをのぞけない、つまりドメインが違う(サーバーがちがう)サイトへの相対パスは不可能なのです。
その場合は絶対パスを使用してください。
逆に、同じドメイン下にあるファイルは相対パスでも絶対パスでもOKです。
仮に
http://www.test1234.com
いうドメインを持っていたとして、test1.htmlが同じ階層のtest2.htmlに絶対パスでアクセスしたいとすると、
<a href=”http://www.test1234.com/test2.html”>test2へいく</a>
となり、先ほどの
<a href=”test2.html”>test2へいく</a>
とは同じ内容なのです。
リンクは非常に重要です。
リンクが無いサイトはホームページとして成り立ちません。
必ず練習して、失敗して身に着けるようにしてください。

Leave a Comment