HTMLの入力練習をして勉強しましょう！ - HTMLの勉強|Webサイト作りの基礎

さて、今回は、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

はじめての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>

<!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>