HTTPプロトコルとHTMLの基礎知識

Web開発の基本概念

ソフトウェアアーキテクチャ

Webアプリケーション開発では、主に2つのアーキテクチャパターンが存在します：

C/S（クライアント/サーバー）アーキテクチャ
B/S（ブラウザ/サーバー）アーキテクチャ

現代のWeb開発では、B/Sアーキテクチャが主流となっています。モバイル端末でも、微信や支付宝のようなアプリは内部的に多数のミニプログラムを埋め込み、実質的にB/Sアーキテクチャに近づいています。

インターネットの特徴

インターネットサービスの開発では、市場占有率を迅速に獲得することが重要です。Pythonのような開発効率の高い言語が選ばれる理由の一つです。

Webサービスの本質

ブラウザがURLにアクセスする際の基本的な流れ：

ドメイン名解決 → IPアドレスとポート番号の特定
サーバーへのリクエスト送信
サーバーでのリクエスト処理
レスポンスの生成と送信
ブラウザによるレスポンスの受信とレンダリング

HTTPプロトコル詳細

HTTP（HyperText Transfer Protocol）は、Web通信の基礎となるプロトコルです。

主な特徴

TCP/IP上で動作するアプリケーション層プロトコル
リクエスト・レスポンスモデルに基づく動作
ステートレス性：各リクエストは独立して処理
コネクションレス：リクエスト/レスポンスの都度接続確立

リクエスト形式

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html

[リクエストボディ]

レスポンス形式

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

[レスポンスボディ]

ステータスコード

1xx：処理中
2xx：成功（200：OK）
3xx：リダイレクト
4xx：クライアントエラー（404：Not Found）
5xx：サーバーエラー（500：Internal Server Error）

HTML基礎

HTML（HyperText Markup Language）は、Webページの構造を定義するマークアップ言語です。

基本的な文書構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

headセクションの主要タグ

<title>：ページタイトル
<meta>：メタ情報
<link>：外部CSSファイルの読み込み
<style>：内部CSSスタイル
<script>：JavaScriptコード

bodyセクションの主要タグ

テキスト関連

<h1>見出し1</h1>
<h2>見出し2</h2>
<p>段落テキスト</p>
<strong>太字</strong>
<em>斜体</em>
<del>取り消し線</del>
<ins>下線</ins>
<br> <!-- 改行 -->
<hr> <!-- 水平線 -->

特殊文字

&nbsp; <!-- 空白 -->
&lt; &gt; <!-- < > -->
&amp; <!-- & -->
&copy; <!-- © -->
&yen; <!-- ¥ -->

ブロック要素とインライン要素

HTML要素にはブロックレベル要素とインライン要素があります：

ブロック要素：div, p, h1-h6など（幅100%、改行あり）
インライン要素：span, a, imgなど（内容に依存する幅）

重要なタグ

リンク（アンカー）

<a href="https://example.com" target="_blank">外部リンク</a>

<a href="#section1">セクション1へ</a>
<div id="section1">セクション1の内容</div>

画像

<img src="image.jpg" alt="代替テキスト" title="ツールチップ" width="300">

HTMLのコメント

<!-- 単一行コメント -->

<!--
    複数行コメント
    コンテンツの区切りを示す
-->

実践的なHTML構築

Webページの基本構造はdivとspanタグを組み合わせて構築します。divをコンテナとして使用し、spanでテキストの一部を囲むことで、柔軟なレイアウトが可能になります。

要素の属性

主要な属性には以下があります：

id：文書内で一意の識別子
class：スタイルを適用するクラス名（複数指定可能）
style：インラインCSSスタイル

これらの基本概念を理解することで、効果的なWebページの構築が可能になります。

8月27日 22:04 投稿

異端開発室