初心者向けサイトの作り方【HTML基礎編】
さて『【サイトの作り方】HTML5でサイトを作ろう！【準備編】』ではサイトを作るための準備について書きましたが、皆さん準備はできましたか？
今回からは実際にコードを書いてサイトを作成していきます。
ではいってみよう！
HTMLファイルを作る
新規作成
ではまずはじめにテキストエディタで新規作成を行います。
前回の記事のテキストエディタを使用して「新規作成」を選びます。
HTMLファイルの作成と保存
HTMLのテンプレートの作成します。
ここは後で説明しますが、はじめはあまり覚えなくていいです。
こんなのがあるんだ〜程度に考えていただいて結構です。
AdobeのDreamweaverなんかで作成すると自動で入力してくれる基本中の基本の部分になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
これが基本的なコードになります。
意外とシンプル！
では、このファイルを保存します。
ファイル名は「index.html」にしてください。
なんで「index.html」にしないといけないかというとこれがWebサイトのトップページですよ～と教えるためです。
保存が完了したら、そのファイルをダブルクリックしてみてください。
お使いのブラウザで表示されるかと思います。
真っ白なページが・・・
当たり前ですが、何も入力していないので何も表示されていない状態です。
文字を入力
先程書いたコードの『
』の間に文字を入力します。【参考】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> </head> <body> コード書くのたのしー！すごーい！ </body> </html>
入力する文字はなんでも結構です。
入力し終わったら上書き保存をしてブラウザで開いているところを更新してみてください。
「コード書くのたのしー！すごーい！」って表示されましたね！
わーい！やったー！
Webサイトはこうやって文字や画像を入れてCSSで位置を調整してできているわけです。
各箇所の説明
<!-- ①DOCTYPE宣言 --> <!DOCTYPE html> <!-- ②lang属性 --> <html lang="ja"> <!-- ③headタグ --> <head> <!-- ④meta要素 --> <meta charset="utf-8" /> <!-- ⑤titleタグ --> <title></title> </head> <!-- ⑥bodyタグ --> <body> </body> </html>
①DOCTYPE宣言
これからHTMLでこのバージョンだよ！とブラウザに教えるための宣言です。
今回はHTML5の仕様で書くので短いですが、HTML4.0やXHTMLといった古いバージョンになるともう少し長い宣言文になります。
覚えてもいいですが基本コピペで大丈夫なのでHTML5の宣言なんだなと軽く頭に入れておくだけでおｋです。
②lang属性
使用する言語を示しています。
『ja』という部分はJapaneseの略で、日本語を使うよとブラウザに宣言しています。
英語の場合『lang=”en”』と入力します。（Englishの略）
③headタグ
headタグ内の記載は基本的に表示されない部分になります。
まだ出てきていませんが、サイトのデザイン的な部分に使用するCSSや動きをつけるjavaScriptを呼び出したりする部分です。
１ページに１度だけ使用することができるタグです。
④meta要素
『charset』はPCにこの形式の文章を保存しているからこの形式で読み取ってねという部分です。
テキストエディタによってHTMLファイルを保存時等に選べるものが有りますが、そちらもUTF-8に設定しておきましょう。
またmeta要素は『charset』にも様々な宣言があります。
この講座の中でも後ほどいくつか出てくるかと思うので随時説明していきます。
⑤titleタグ
ブラウザでWEBサイトを見たときにタブにサイト名やページ名が表示されるのはご存じですか？
あれがこのtitleタグです。
ページのタイトルを入力して使用します。
⑥bodyタグ
いつもWEBサイトでみている部分です。
基本的にここに画像や文字を入力していくことになります。
とりあえず今回はここまで！
次回はサイトの見出しや文字、画像の入れ方について説明します！