読者です 読者をやめる 読者になる 読者になる

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

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

HTMLの入力練習をして勉強しましょう!

さて、今回は、HTMLの入力練習をして、勉強してみましょう。

HTMLや、CSSはとにかく書きまくるのが大切です。

下記に、書いていますので、なぞるように書いていってください。

 

基本構造

  • Firefox で表示(文法チェック)

 

ここに書いた文字がブラウザのタイトルバーに表示される
この中にタグでマークアップされた文書や画像が、ブラウザーで表示される。

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ここに書いた文字がブラウザのタイトルバーに表示される</title>
</head>
<body>
<p>この中にタグでマークアップされた文書や画像が、ブラウザーで表示される。</p>
</body>
</html>

※何も見ないで入力できるまで繰り返すこと。

 

head
  • description(詳細)
  • shortcut icon(ブラウザアイコン)
  • link(外部リンク)
  • script(スクリプトの読み込み)

 

はじめてのHTML入力の練習です。
はじめてのHTML:ヘッド内の記述
こんにちは

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="description"content="はじめてのHTML入力の練習です。">
<title>はじめてのHTML:ヘッド内の記述</title>
<linkrel="stylesheet"href="style.css">
<linkrel="shortcut icon"href="favicon.icon">
<scriptsrc="myscript.js"></script>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

 

body
  • コメントアウト
  • 大見出し
  • 改行

 

はじめてのHTML:コメントアウトと見出しと改行
コメントアウト、見出しと本文、改行の記述
大見出し
こんにちは
改行ありの こんにちは

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:コメントアウトと見出しと改行</title>
</head>
<body>
<!-- コメントアウト、見出しと本文、改行の記述 -->
<h1>大見出し</h1>
<p>こんにちは</p>
<p>改行ありの<br>こんにちは</p>
</body>
</html>

 

画像を表示

  • img:Image
  • src:Source

f:id:web-lesson:20121117152943j:image

 

はじめてのHTML:画像を表示
大見出し
こんにちは
眼鏡

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:画像を表示</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></p>
</body>
</html>

 

リンク

  • link(テキストリンク・画像リンク)
  • target(別ページで開く場合は、_blank)

 

はじめてのHTML:リンク
大見出し
こんにちは
Googleの検索はこちらから
眼鏡

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:リンク</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p>Googleの検索は<ahref="http://google.com"target="_blank">こちら</a>から</p>
<p><ahref="http://google.com"target="_blank"><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></a></p>
</body>
</html>

 

リスト

  • ul:Unordered List (順序のないリスト) → 箇条書きリスト
  • ol:Ordered List (順序のあるリスト) → 番号付きリスト
  • li:List Item (リストの項目)

 

番号なしリスト
はじめてのHTML:番号なしリスト
大見出し
こんにちは
眼鏡
新製品の特徴

PCに最適
軽い
安い

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:番号なしリスト</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p><ahref="http://google.com"target="_blank"><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></a></p>
<h2>新製品の特徴</h2>
<ul>
<li>PCに最適</li>
<li>軽い</li>
<li>安い</li>
</ul>
</body>
</html>

 

番号付きリスト
はじめてのHTML:番号付きリスト
大見出し
こんにちは
眼鏡
購入の手順
フレームを選択する
検眼する
微調整する

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:番号付きリスト</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p><ahref="http://google.com"target="_blank"><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></a></p>
<h2>購入の手順</h2>
<ol>
<li>フレームを選択する</li>
<li>検眼する</li>
<li>微調整する</li>
</ol>
</body>
</html>