Webサイト系

Webデザイン~検索データベースシステムが出来るまで~PART2

HTMLという言語を使う時は、adobeが提供しているdreamweaverを使っています。これがなくてもメモ帳でも使う事ができるんですけど、メモ帳だとミスったときにエラー表記がないので、バグが出たときにどこで躓いたのかわかりにくいデメリットがあります。dreamweaver使っているからといってバグが全てわかるわけではないんですが、初歩的なミスは指摘してくれるんで構築はしやすいですね。でも、adobeは月額制になったので、使うには安くない金額を払わないいけません。私はPhotoshopやillustratorなども使うので契約しているんですが、、、

HTMLの基礎

HTMLを使う基礎とったら、必ず「タグ」と呼ばれるもので括ってあげる、ということでしょう。例えば、ハローワールドと表記させたかったら、表記させるためのタグ、たとえば<p>というタグで左右を括る、ということです。

<p>ハローワールド</p>

とHTMLをつくると、ハローワールドと表記されます。表記させるためのタグも種類があり、「見出し」を意味する<h1>や<h2>などでも代用できます。

しかし、メモ帳にただ<p>ハローワールド</p>と記載してファイルを開いても、ハローワールド、とは表記されません。表記させるには、それがHTMLファイルなんだよーと教える表記が必要です。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>ぶんぶんはろーゆーちゅーぶ</title>
</head>
<body>
<h1>ようつべとは</h1>
<p>ハローワールド</p>
</body>
</html>

この文字列たちの一番上、<!DOCTYPE html>というものが、このファイルがHTML5に準拠して書かれてるんだよ~っていう宣言です。過去にHTML4とかHTML3とかあって、それにもそれぞれの表記の仕方があるのですが、今は全てHTML5(最新のHTML)で作るのが基本であると思います。過去のバージョンで作る利点もあまりないですし。この宣言に対応する締めタグは例外としてありません。

その次の<html></html>がそこからそこまでがhtmlですよっていう宣言ですね。例えばphpやjavascriptでしたらそこからそこまでがそれぞれですよって括りになります。

<head></head>内は、文章を書く前にファイルに紐づけたいものを置いておく場所になります。例えば、デザインを決めるcssファイルやjavascriptのファイル、サイトのタイトルなどを置く所です。

<meta charset=”utf-8″>も締めタグのないタグです。charsetというのはこのファイルの文字はutf-8に準拠して書かれてますよ~っていう宣言です。これを書かないととバグが出たりします。utf-8がどういう文字なのか知りたい方は調べてみると沢山出てきます。

<title>ぶんぶんはろーゆーちゅーぶ</title>という<title></title>タグは、そのページの文字通りタイトルを決めるタグです。検索結果に表示されるサイト名がこれに当たります。SEO対策にも関わってくるものになり、違うページには違うタイトルが入っている方が好ましいとも言われます。

そして<body></body>これが文章を書く本体の場所になります。この中に書いた表記が基本的にはサイトに反映されます。

<h1>ようつべとは</h1>や<p>ハローワールド</p>などが既に述べた通り、見出しや文のタグとなっており、ファイルを開けば、

ようつべとは
ハローワールド

と表記されることでしょう。ちなみに、⇧⇧の方に書いたHTML群をメモ帳に張り付けて、拡張子を.htmlに変えればhtmlファイルとして開くことができます。

ようつべとは、が太文字で大きく表示されるのは、<h1></h1>タグが「見出し1」を表すタグであるため、そうなるようにhtml5で用意されているからです。見出しには見出し2を現す<h2></h2>や見出し3の<h3></h3>なども作る事ができます。この内、見出し1はページに一つ、見出し2以降はいくつでも置いてよいといったように作る必要があります。

まとめ

一回にまとめて沢山書いてしまうと、読むのが大変&書くのも大変なので、なるべく一話完結ショートタイムとなるようにしていきたいと思います。

次回はタグの種類の説明しようかな。リンクタグとか画像タグとかね。仕組みがわかれば簡単に構築できると思いますが、Webデザインはそこまでいく最初が一番大切です。本稿が役に立てれば幸いです。

ピックアップ記事

  1. Round1figh!!

関連記事

  1. Webサイト系

    最近の近況報告~イコール生存報告?~

    しばらくこのブログの投稿をしませんでした一花です。頭の片隅には常にあ…

  2. Webサイト系

    鬼滅の刃 血風剣戟ロワイアル~攻略wikiの究極データベースを運営予定~

    こんにちは一花です。メインPCのディスプレイがスリープから解…

  3. Webサイト系

    バリスタの、バリスタによる、缶コーヒー飲み比べ.comのお引越し

    タイトルのサイトを置いていた無料のサーバーがサービス終了ということで…

  4. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART1

    このタイトルでは、私一花が今まで独学で築き上げてきた技術やコツをこれ…

  5. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART4 「タグ2」

    タグ紹介二回目です。一回目は特にHTML5準拠からのタグをご紹介しま…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Twitter

  1. レッドストーン

    金鯖閉幕お疲れ様でした!~ねこなのドロップ履歴は!?~レッドストーン
  2. モバプロ2レジェンド

    お仕事中に失礼します!~トレーニングポイントについて~モバプロ2レジェンド
  3. 加工品

    ipponグランプリ風 画像加工 第三弾「銀狼の姫 グラセラ」
  4. 物語「Key Players」

    物語[Key Players]3
  5. レッドストーン

    クリーチャーパッシブについて~装備的にこれ以上弱化って必要ない?~レッドストーン…
PAGE TOP