HTML

bracketsでhtmlの基本構造|bracketsでhtmlを動かす最低限の記述

Bracketsのアイコン

bracketsでhtmlを書く【HTML基本編】

悩みの耐えない女の子
悩みの耐えない女の子
htmlを書く準備はできたけど、どうやって書けばいいの?基本からしっかりと教えてほしい。初心者なんです。

 

といった人に向けて記事を書いていきます。

 

HTMLの基本構造

※HTML※とは、文章にマークアップ(意味付け)をしていく言語です。

タグというものを使って意味付けていくんですが、まずは基本的な構造の図を

見ていきます。

 

大まかにいうと、3つの「html要素」「head要素」「body要素」に分かれます。

イメージ図としてはこうです。

 

「head」「body」と上から順番にきて、その全てを「html」が包んでいる感じ。

それでは、順番に説明していきます。
htmlの基本構造

head要素

コンピュータが参照する情報の集まり。
「検索エンジン」等が参照するとても重要な情報を書いていく場所です。
ここを間違えると、そもそも動作しないので、しっかりと書いていきましょう。

htmlのhead

body要素

ブラウザに表示される情報を記述していくエリア。

皆さんがネット検索などで普段見ているところです。

 

この文章もbodyタグ内に書いています。

主に人が見るところですが、「検索エンジン」も見ています。

 

なので、この記事には何が書いていて、どんな人に役立つのか。

しっかりと書いて、「マークアップ」していく必要があります。

bodyの記述が、一番難しいです。

htmlのbody

はじめてのHTML記述

最初は、まさに「おまじない」という感じです。

しかし、これがないとHTMLとして機能しませんので、

 

もれの無ように記述して下さい。

ここでは最低限のコーディングだけします。

まずはHTMLのバージョンを記述します。

必ず1行目に書いてください。

htmlのバージョンを記述

 

続いて、htmlタグの記述です。

最初に学習した、「HTMLの基本構造って?」を思い出しながら書いてくださいね。

htmlタグ記述

 

続いて、headタグの記述です。

改行して、見やすいように記述していくのがポイントです。

htmlタグを改行

tabでインデント

headタグ記入

 

headの書き方

つづいて、headタグ内におまじないを書いていきます。
コンピュータが読み取るところなので、もれのないように書いていきます。

 

meta情報というものを書いていきます。
どの文字コードを使うのか?という指定です。

文字コード指定

 

最後に、タイトルを記述。
ここは、ウィンドウ左上の名称です。

titleタグ記述

titleタグにポートフォリオを記述

左上タグの文字に入る

 

bodyの書き方

bodyタグを書いていきます。

このタグは、headタグの下に書いていきます。
「頭」の下は「体」、わかりやすいですね。

bodyタグ記述

 

次は、bodyタグの中に「header」要素を書いていきます。
さっき「head」を書いたのに「header」がきました。
共通する点は、「一番上」ということです。
bodyタグ内の一番上だから、「header」。
ややこしいですね。
ここは、「headはコンピュータ用」「headerは人間用」に書いていくものだと区別しましょう。

bodyの中にheader

headerタグを記述

 

「footer」タグを書きます。締めは「足」ということですね。
これは分かりやすいです。

footerタグを記述

 

今のHTMLの状態

今どんな状態なのか、図でまとめます。

最初と違うところは、「body」タグの中に「header」タグ、「footer」タグが

追加されたことです。

 

headerとfooterが追加された

headerとfooterを追加した

グローバルナビを書いてみる

グローバルナビは、サイト全体のコンテンツを案内する大切な要素です。

せっかく来てくれた人を迷子にさせないよう、丁寧に作っていく必要があります。

(自分への戒め)

 

企業ページなら会社のロゴ、自分のサイトなら、イメージする画像等も

この場所に配置していきます。

 

デスクトップのportfolioフォルダに、「img」フォルダを作成して、

その中に好きな画像を保存します。

portfolioにフォルダを作成
portfolio内で右クリック
新規フォルダを作成
imgフォルダにファイルを保存

 

imgタグを使って、さきほど保存した画像のURLを指定します。
headerタグの中に書いてください。

imgタグを書く

 

「ul」「li」要素を使ってリストを作っていきます。
「Portfolio」「About」「Contact」の3つをナビの項目とします。
こちらも同じくheaderタグの中に書いてください。

ulタグを書く
liタグを書く

 

 

 

「a」要素でリンクを付与します。
まだリンクを飛ばすファイルを作成していないので、リンク先を「#」とします。

aタグを書く

listタグの中身を書く

listタグに#を追加

listタグを3つ書いて完成

 

最後に、プレビューで確認します。
このようになっていたら問題ないです。

プレビューで確認

 

まとめ

長くなったので、今回はここまでとします。
まだ無骨な感じになっていますが、
次回からは「要素を装飾する」言語もでてきて、見た目が良い画面になっていきます。