HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

HTMLの復習をしよう！

今日は、HTMLの復習をしましょう。

 

次に入力について

•開始タグと終了タグをセットで入力する

・半角と全角の違いに注意（日本語の入力後にそのまま入力すると「アングルブラケット」や「ダブルクォート」が全角になってしまいます。）

 

（1）HTMLの構造を入力

<html>

 

</html>

 

（2）head要素とbody要素を入力

  • head部はUAのための記述（非表示）
  • body部は閲覧者のための記述（表示）

<html>

<head>

</head>

<body>

</body>

</html>

 

（3）title要素を入力

  • title要素は、UAの上部に表示される（必須）

<html>

<head>

<title>ページのタイトル</title>

</head>

<body>

</body>

</html>

 

（4）meta要素を入力

<html>

<head>

<metacharset="UTF-8">

<title>ページのタイトル</title>

</head>

<body>

</body>

</html>

 

（5）h要素とp要素を入力

  • 見出しと本文をセットで記述する

<html>

<head>

<metacharset="UTF-8">

<title>ページのタイトル</title>

</head>

<body>

<h1>優先順位の高い見出し</h1>

<p>テーマの本文</p>

</body>

</html>

 

  • 必然性により、下位構造も記述する
  • h2～h6は、複数回の使用可

<html>

<head>

<metacharset="UTF-8">

<title>ページのタイトル</title>

</head>

<body>

<h1>優先順位の高い見出し</h1>

<p>テーマの本文</p>

<h2>次に優先順位の高い見出し</h2>

<p>テーマ内の項目の本文</p>

<h2>次に優先順位の高い見出し</h2>

<p>テーマ内の項目の本文</p>

<h3>次の次に優先順位の高い見出し</h3>

<p>テーマ内の項目の本文</p>

</body>

</html>

 

（6）本文の内容を、絞ってわかりやすくするために箇条書きにする

  • 番号なしと番号付きがある

<ul>

<li>番号なし箇条書き</li>

<li>番号なし箇条書き</li>

<li>番号なし箇条書き</li>

</ul>

<ol>

<li>番号なし箇条書き</li>

<li>番号なし箇条書き</li>

<li>番号なし箇条書き</li>

</ol>

 

（7）語句説明や日付のある箇条書きにして、よりわかりやすくする

  • 定義型リストを利用する

<dl>

<dt>求職者支援訓練</dt>

<dd>離職者が仕事に就くための訓練制度</dd>

</dl>

<dl>

<dt>2012年12月22日</dt>

<dd>授業開始</dd>

</dl>

 

（8）まとめるとわかりやすいものは、表組みにする

  • table要素を利用する
  • tr要素で「行」をまとめると記述しやすい
  • 属性はCSSで指定しますが、この段階では入力します

<tablewidth="400"border="1">

<tr>

<th>１日目</td><th>２日目</th><th>３日目</th>

</tr>

<tr>

<td>基本構造</td><td>画像とリンク</td><td>Illustratorの基礎</td>

</tr>

<tr>

<td>各要素と役割</td><td>Illustratorの基礎</td><td>まとめ</td>

</tr>

 

</table>

HTMLで問い合わせフォームを作る勉強

今回は、HTMLで問い合わせフォームを作る勉強をしましょう。

フォームは、利用者の情報を収集するために作られるものです。

資料の請求をしてもらったり、サービスに対する質問をしてもらったり。

ホームページには必須のものです。

完璧な問い合わせフォームを作るには、PHPが必要になりますが、一旦はHTMLで書けるところまでを紹介します。

 

お問い合わせフォーム

※actionには、PHPを入力する必要があるので、一旦、NULLを入れています。

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<formaction="#"method="post">
<p>名前：<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p>
<p>内容：<textareaname="subject"rows="5"cols="40">お問い合せ内容</textarea></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

 

ラジオボタン

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<formaction="#"method="post">
<p>性別：
  <inputtype="radio"name="sex"value="male"checked>男性
  <inputtype="radio"name="sex"value="female">女性
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

 

ラジオボタン

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<formaction="#"method="post">
<p>言語：
<selectname="language">
  <optionvalue=""selected>以下の言語を選択してください</option>
  <optionvalue="1">日本語</option>
  <optionvalue="2">英語</option>
  <optionvalue="3">フランス語</option>
  <optionvalue="4">スペイン語</option>
  <optionvalue="5">韓国語</option>
</select>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

HTMLの表組みについて勉強しよう

今回は、HTMLの表組みについて勉強していきましょう。

表組みは、エクセルで作るような表を表示させることが出来、

とても役に立ちますので、必ず身につけておきましょう。

 

それでは、下記のようにHTMLを記述していきましょう。

<!DOCTYPE html>

<html lang="ja">

 

<head>

<meta charset="UTF-8">

<title>HTMLの勉強</title>

</head>

 

<body>

<h1>大見出し</h1>

<p>初めてのHTML</p>

 

<h2>売上データ</h2>

<table>

<tr><th>事業部</th><th>2011年</th><th>2012年</th><th>2013年</th></tr>

<tr><td>販売部</td><td>300</td><td>350</td><td>200</td></tr>

<tr><td>営業部</td><td>500</td><td>240</td><td>300</td></tr>

</table>

</body>

 

</html>

 

記述しましたか？

下記のように表示されるはずです。

f:id:htmlnobennkyou:20130505205429j:plain

枠線を表示させたり、見た目やレイアウトの調整はCSSで行うのが望ましいです。

どんどんWebサイトが作れるようになってきましたね！

HTMLはプログラムではなく、文書構造ですので、理解できるように頑張りましょう！

HTMLのリストタグの勉強

今回は、HTMLのリストについて勉強していきましょう。

リストタグは、箇条書きの表記をしたり、便利なタグです。

 

今回もいつものように、下記のように記述していきましょう。

 

<!DOCTYPE html>

<html lang="ja">

 

<head>

<meta charset="UTF-8">

<title>HTMLの勉強</title>

</head>

 

<body>

<h1>大見出し</h1>

<p>初めてのHTML</p>

 

<h2>お魚リスト</h2>

<ul>

<li>サンマ</li>

<li>マグロ</li>

<li>イワシ</li>

</ul>

 

</body>

</html>

 

ブラウザで表示をすると下記のようになると思います。

f:id:htmlnobennkyou:20130505204051j:plain

 

ちなみに、OLにすると順位づけて表示してくれます。

f:id:htmlnobennkyou:20130505204107j:plain

 

 

どうでしたか？

次回は、表組みを作っていきましょう！

リンクの張り方を勉強しよう

今日は、HTMLの勉強の中でも、リンクについて勉強していきましょう。

サイトでは、そのページだけでは説明できない内容や、

より詳細の情報を伝えたい場合に、別のページへリンクをして、ユーザーにとって見やすいサイトを作ってあげる必要があります。

 

今日は、リンクの張り方について勉強していきましょう。

今回は、ヤフーのトップページへリンクを張る方法をお伝えしていきます。

 

まずは、下記のようにHTMLを記述していきましょう。

 

<!DOCTYPE html>

<html lang="ja">

 

<head>

<meta charset="UTF-8">

<title>HTMLの勉強</title>

</head>

 

<body>

<h1>大見出し</h1>

<p>初めてのHTML</p>

<p>Yahoo!は<a href="http://www.yahoo.co.jp/">こちら</a>から</p>

</body>

 

</html>

 

リンクを張るには、<a href=""></a>というアンカータグを使用します。

""の中にリンクをさせたいurlを入力することにより、リンクをさせることが出来ます。

今回は、とても簡単でしたね！

画像が表示できて、リンクが張れればかなりWebサイトっぽくなりますよね！

 

次回は、少し難易度が上がるリストを作っていきましょう！

HTMLで画像を表示する

前回は、見出しについて勉強しました。

今回は、HTMLで画像を表示する勉強をしましょう。

 

さて、前回使ったHTMLを使用して勉強していきます。

まずは、画像を用意しましょう。

パソコンの中に画像のデータがあれば、それを利用しましょう。

サイトを公開しないのであれば、ネットから拾ってきた画像でも大丈夫です。

（ネットで拾った画像は練習用だけにして、無許可で公開することはしないようにしましょう。）

 

私は、自分の飼っている愛犬であるチビという犬の写真を使用します。

チビの写真の名前は(dog.jpg)という名前のデータです。

写真が用意出来たら、分かりやすいようにデスクトップに保存してください。

 

さて、次はHTMLです。

まずは、私のHTMLの記述を元に下記のように書いてみましょう。

 

<!DOCTYPE html>

<html lang="ja">

 

<head>

<meta charset="UTF-8">

<title>HTMLの勉強</title>

</head>

 

<body>

<h1>大見出し</h1>

<p>初めてのHTML</p>

 

<img src="dog.jpg" width="220" height="167" alt="犬の写真">

 

</body>

</html>

 

タグの説明をしていきます。

 

<!DOCTYPE html>

<html lang="ja">

 

<head>

<meta charset="UTF-8">

<title>HTMLの勉強</title>

</head>

 

<body>

<h1>大見出し</h1>

<p>初めてのHTML</p>

 

<img src="dog.jpg" width="220" height="167" alt="犬の写真">

→こちらのタグが写真を紐づける写真になります。

img srcの後に続く""の中に入るデータが保存した写真の名前になります。

この名前は、日本語では表示がされないので、必ずアルファベットで名前をつけてください。

widthは写真の幅の指定、heightは高さの指定になります。

altは写真につける概要の説明になります。

音声読み上げソフトなどの場合に読み上げてくれるのので、入れるようにしましょう。

 

</body>

</html>

 

ここまで表示できたら、index.htmlという名前をつけて、写真を保存している場所と同じ場所に保存しましょう。

※今回は、画像をデスクトップに保存しているので、HTMLもデスクトップに保存しましょう。

 

画像データとHTMLが同じ場所に表示されていることが確認出来たら、HTMLをブラウザにドラック＆ドロップをしましょう。

すると下記のように表示されます。

※画像が表示されていない場合は、写真のデータの保存名とHTMLの名前が違う。

もしくは、画像データとHTMLの保存場所が違う。

この2つの理由が最も多いです。

 

f:id:htmlnobennkyou:20130425184521j:plain

画像が表示できるようになると急にWebサイトっぽくなりますよね！

次回は、リンクを張って、ページを飛ばせるようにしましょう！

 

HTMLの本文に使えるタグを勉強しましょう。

前回headタグについて勉強しました。

今回は、HTMLの中のbodyタグについて勉強していきましょう。

bodyは、本文を入力します。

その際に、見出しをつけることができます。

見出しは、<h1></h1>というように表記されます。

<h1></h1>は、大見出し

<h2></h2>は、中見出し

<h3></h3>は、小見出しとなっており、最大で6つの見出しを作ることが出来ます。

 

なお、実際にHTMLを書いていく際には、必ずコメントを入れる癖づけをしましょう。

コメントを入れる方法は、<!-- -->というタグになります。

何十行、何百行となると、修正したい箇所を見つけるだけで時間がかかってしまいます。

すぐに見つけられるように、<!--ここからサイドバー-->、<!--フッターはここから-->

というように、コメントを入れていきましょう。

※コメントは、ブラウザ上には反映されませんので、安心してください。

試しに見出しと、コメントを入れたHTMLを書いてみました。

下記を参考に、HTMLを書いてみてください。

 

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>HTMLの勉強</title>

</head>

<body>

  <!--HTMLの見出しと本文について勉強します。-->

  <h1>大見出し</h1>

  <p>初めてのHTML</p>

  <h2>中見出し</h2>

  <p>初めてのHTML</p>

  <h3>小見出し</h3>

  <p>初めてのHTML</p>

</body>

</html>

 

下記のようなページが確認できれば成功です！

見出しの大きさが違うこと、コメントが表示されていないことが確認できると思います。

f:id:htmlnobennkyou:20130414164646j:plain

少しずつ表示できる項目が増えてきましたね！

次回は、いよいよ画像を表示させてみましょう！