初めてのHTML-(4)-本格的なHTML

初めてのHTML//

記事の紹介

この記事では本格的なHTMLを扱います。

HTML 文書の構造

前回まではHTML要素について見てきましたね！では、今まで学んだ要素たちを組み合わせて、HTML全体を組み立てて行く勉強をして行きましょう！まず、記事を始める前に、HTML文書の基本構成の時に１回見せたコードをもう一回見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   Hello World!
  </body>
</html>

多分、前の記事までしっかり、勉強した方なら開始タグ、終了タグ、コンテンツ、属性で構成されてるソースが見えるはずです。
一応、上記のソースをアップロードをして置きますが、出来れば自分自身で上記のソースを作成しながら開始タグ、終了タグ、コンテンツ、属性の復習するのをお勧めします。
上記のソース(「右クリック」-「ダウンロード」してください)
では、各要素ごとに役割を説明させていただきます！

  • <!DOCTYPE html> – 文書型宣言です。昔、HTMLがまだ出来たばかりの頃に確認するための目的でしたが、今はうまく動くために存在するただの遺産となってます。
  • <html></html> – この要素はページの全てのコンテンツを囲み、ルート要素とも呼ばれます。
  • <head></head> – この要素は検索エンジン向けのキーワードや説明書、ページの見た目や機能を変更するためにCSS, JavaScript, 文字コードの情報などを含みます。
  • <title></title> – ページのタイトルを指定します。このタグの中の文字列コンテンツはタブに表示され、ブックマークに登録した時の名前にもなります。(現在は「My test page」と表示されますが、自分の名前を入力してみたり、思い出した文章を入力してみながら変化を観察しながら学ぶのも良いと思いますね笑)
  • <body></body> – ページの閲覧者に対して見せたいものすべてを含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、どんなものでもです。

よく使われるタグ

HTML辞書などやタグの解説しているページ見るとたくさんの要素について説明がされています。しかし、実際によく使われてるのは少ないので、ここでは、代表的なタグをいくつか紹介します。

タグ名用途
h1見出し1 (heading 1)

h2

見出し2 (heading 2)
h3見出し3 (heading 3)
p段落 (paragraph)
divグループ化
spanテキストの一部
ul箇条書き (unordered list)
ol番号付リスト(ordered list)
li

リストの項目（listitem）

img画像 (image)
br改行 (break)
buttonボタン
inputインプット
a文書間のリンクを記述 (anchor)
tableテーブル
trテーブルの行
tdテーブルのせる

昔はいろいろなタグを駆使して、ページの見栄えを競う傾向がありましたが、最近はCSSファイルを使って調整する方法が主流になってきました。
因みに、タグは使っていると自然に覚えられるものです。なので、次の章からは各タグを使った例文を実装しながら一つ一つ覚えて行きましょう！

Web開発-初めてのシリーズ

プログラミングメイン

プログラミング
このサイトを運営しながら勉強したものです。どなたでもいいですので役に立ってたら幸いです。Web開発 プログラミング初心者にもおすすめできるWeb開発の講座です。 初めてのWeb開発の基本初めてのHTML初めてのCSS初めてのJavaScriptJSP入門JSPWebゲーム開発canvasの...