HTML ハンズオンpart1

HTML

Posted at 2025-10-05

イントロダクション

この記事では、以下を参考記事等を活用しながらHTMLのハンズオンした内容をまとめます。
書籍『改訂版演習 Webプログラミング入門』
Youtubeチャネル：セイト先生のWeb・ITエンジニア転職ラボ【HTML/CSS】実践！Webサイト作成から公開までの過程を解説！ #プログラミング

1. 基本的なHTML構造

Youtubeチャネル：セイト先生のWeb・ITエンジニア転職ラボ【HTML/CSS】実践！Webサイト作成から公開までの過程を解説！ #プログラミングを視聴して以下について初めて知りました！
Visual Studio Code（VS Code）ではhtml:5と入力すると以下のHTMLの基本的な構造のドキュメントを表示させることができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

説明:

<!DOCTYPE html>: このファイルがHTML文章であることと
-HTMLのバージョンを宣言します。絶対に1行目に書きます。
<html>: すべてのコンテンツをhtmlタグで囲みます。絶対に2行目に書きます。
<head>: ドキュメントに関するメタ情報(head内に書いたコードはユーザーからは見えない)を含みます。
<meta>:Webページを存在させるために重要な情報を記載するタグです。
<meta charset="UTF-8">: ドキュメントの文字コードを設定します。ここではUTF-8で従ってます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: スマホやPCなど異なるデバイスの大きさに合わせてWebサイトを表示させます。
<title>: Webタブに出てる文言です。
<body>: ウェブページの表示コンテンツを含みます。(body内に書いたコードはユーザーから見える)

2. HTMLファイル作成part1

書籍『改訂版演習 Webプログラミング入門』2-1-2 HTMLファイル作成方法例題1のからWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>基本</title>
</head>
<body>
<p>
Webプログラミングを開始します。<br>
これから入力作業が増えるでしょう。<br>
がんばってください。
</p>
</body>
</html>

以下のWebページが作成されます！

説明:

<p>: 段落をしてします。段落の前後に1行分のから空白行(スペース行)が作成されます。
<br>: 文章を改行させます。終了タグがないので空要素です。

3. HTMLファイル作成part2

書籍『改訂版演習 Webプログラミング入門』2-1-4 HTMLファイル作成方法練習問題1-1のからWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>テキスト</title>
</head>
<body>
<p>
今日は月曜日です。<br>
今日からホームぺーズ作成練習を始めます。
</p>
</body>
</html>