マークアップというのは、文書に含まれる「タイトル」や「太字」、「画像」などの様々な要素を「タグ」呼ばれるものを使って目印を付けていくことです。
簡単に言うと、文章のなかに「ここはタイトルだよ」とか「ここに画像をいれるよ」というのを「タグ」という目印をつけることをマークアップといいます。
HTMLの簡単な例
ちょっとだけHTMLの中身を見てみましょう。
<h1>WEBサイトの仕組み</h1>
<p>WEBサイトってすごいですね</p>
<a href="tuduki.html">続きはこちら</a>
上記の<h1>とか<p>で囲われた部分が、タグと呼ばれる目印です。タグは、開始タグ(<h1>など)と、終了タグ(</h1>など)があり、タグをつける際は開始タグと終了タグで囲う必要があります。
例えば
<h1>WEBサイトの仕組み</h1>
のように囲うことで、「WEBサイトの仕組み」の部分がh1でタグ付けされているということになります。<h1>タグは「見出し」という目印タグなので、「WEBサイトの仕組み」部分は見出しということになります。
このようにHTMLでは、文章のなかに「ここはタイトル」とか「ここは画像」ということを「タグ」という目印をつけて指定しています。
よく使うHTMLタグ
タグはたくさん用意されていますが、よく使うタグには下記のようなものがあります。 WEBサイトは本のようなものを想像してもらえると掴みやすいと思います。
- h1タグ…見出しを示す
- imgタグ…画像を示す
- 本の1つ1つのページ→WEBページ
- pタグ…段落を示す
- 本→WEBサイト
- aタグ…リンクを示すタグは、<>と</>を使って表します。例えば大見出しなら<h1>ここにタイトルを入れる</h1>といった形です
今、全部覚える必要はありません。よく使うタグは限られているので、WEB制作をしているうちに覚えていきます。忘れても調べればすぐに出てくるので大丈夫です
WEBサイト公開までにやること
ここまで呼んできた情報があれば、WEBサイトを公開するまでにやるべきことは理解できるはずです。
WEBサイトを公開するまでの流れを説明します。 URLはこれらを組み合わせることで、
1.WEBページの作成
- どのような方法で(プロトコル)
- どこのサーバー(ドメイン)
- どのコンピューター(ホスト名)
- どのファイル(パス名)
htmlや画像を使ってWEBページを作成します。 を指定しているんです
WEBページの見た目もしっかりと装飾したい場合、css(シーエスエス)と呼ばれるファイルを作って装飾していきます。また、アニメーションなどの動きを付けたい場合は、javascript(ジャバスクリプト)などの知識も必要になります。
html、css、javascriptについてはこのサイト分かりやすくで解説していきます。
2.WEBサーバーを用意
WEBサイトのデータは、自分のパソコンに入れていても誰も見ることが出来ません。WEBサーバーに保管することで世界中の人に公開することが出来ます。
WEBサーバーは自分で作ることも出来ますが、専門知識が必要でハードルが高いため、サーバー会社からレンタルするのが一般的です。
レンタル料は月100円~1000円程度です。
3.ドメインを取得
ドメインを取得します。
ドメインは基本的にどんな文字列でも自由ですが、誰かに使われていたら取得出来ません。取得は早いもの勝ちなので必ずしも自分が望んドメインが取得できるわけではないので注意しましょう。
まずは取得しよう思っているドメインが使用できるかどうかを調べるところから始まります。とはいっても、お名前.comなどのドメイン登録業者のサイトにいけば非常に簡単に調べられるので、安心してください。 初心者にもわかりやすいように図を多く使っており、初めての分野でもわかりやすく、心が折れずに読むことができると思います。WEBやインターネットについての基礎的なことから、セキュリティ、サーバー、HTTPの仕組みなどWEBの技術を広く知ることができる良本です。
使用料として年間で1000円~3000円程度です。
4.WEBサーバーにデータをアップロード
作成したデータをWEBサーバーに転送します。このようにインターネット上のサーバーにデータを転送することをアップロードといいます。
ファイルをWEBサーバーにアップロードするには、FTP(エフティーピー)という方式で転送する必要があり、専用のソフトを使うことになります。
無料でFTP転送ソフトを手に入れることができるので、特に費用はかかりません。
5.WEBサイトが公開される
WEBサイトが見れるようになります。取得したドメインでアクセスして確認してみましょう。
このあとはコンテンツをどんどん作成していきましょう。良質なコンテンツを増やすことで、アクセスを増やしていきましょう。