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サイト系

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

    今回はHTMLでつかうタグの一例をご紹介します。特にHTML5の5か…

  2. Webサイト系

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

    本日はモバプロ2ではなくWebデザインで使うタグ紹介part3です。…

  3. Webサイト系

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

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

  4. Webサイト系

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

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

コメント

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

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

Twitter

  1. モバプロ2レジェンド

    残りのヒーロー登場か!?~これでまた強くなる…~モバプロ2レジェンド
  2. モバプロ2レジェンド

    【スキマに届けっ!?—第七回は5月CC制覇!守護騎士ナイツさん!—】モバプロ2レ…
  3. レッドストーン

    金鯖祭りまで@十日間~600になったので混沌大地にLetsGo!!~レッドストー…
  4. モバプロ2レジェンド

    新稲葉の牽引力!!~トレード不可なので気をつけよう!~モバプロ2レジェンド
  5. モバプロ2レジェンド

    モバプロ仕様書~代打はシステマティック!!~モバプロ2レジェンド
PAGE TOP