第3章　文章とリンク

# **文章とリンク**
***

## **1.HTMLドキュメント**

HTML文章（HTMLソース）は、タグと言うものを使って書いていきます。
テキストファイルと同じように改行、段落分けができます。HTML文章で思うように文章を書くために必要なタグを認識しましょう。

### **HTMLタグ**

+ **見出し（```<h1>～<h6>```タグ）**

#### **例**
    [sample3-1.html]
    ```
    <h1>
    I am H1
    </h1>

<h2>
    I am H2
    </h2>
    ```
    #### **実行結果**
    <!DOCTYPE html><html><head><title>Page Title</title></head><body><h1>I am H1</h1><h2>I am H2</h2></body></html>

<br><br>
    #### **例題の説明**
    + ```<h1>``` はh1の開始タグ
    + ```</h1>``` はh1の終了タグ
    + ```I am H1 ```はh1効果対象内容
    <br><br>
+ **段落（```<p>```タグ）**

#### **例**
    [sample3-2.html]
    ```
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>

```
    #### **実行結果**
    <!DOCTYPE html><html><head><title>Page Title</title></head><body><p>This is a paragraph</p>
    <p>This is another paragraph</p><br></body></html>

+ **改行（```<br>或いは<br/>```タグ）**
    文字を改行します。
    #### **例**
    [sample3-3.html]
    ```
    <p>This is another<br> paragraph</p>

```
    #### **実行結果**
    <!DOCTYPE html><html><head><title>Page Title</title></head><body><p>This is another<br> paragraph</p><br></body></html>

## **2.文章のリンク**
HTMLリンクはハイパーリンクで、```<a>```タグを使用します。

リンクをクリックして他のページにジャンプすることができます。

リンクはテキストである必要はありません。画像またはその他のHTML要素です。

#### **例**
[sample3-4.html]
<br>
下記コードでGoogleページにリンクできます
```
<body>
    <a href="https://www.google.co.jp/">ＧＯＯＧＬＥリング</a>
</body>
```

#### **実行結果**
<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Google</title></head><body><a href="https://www.google.co.jp/">ＧＯＯＧＬＥリング</a><br></body></html>

<br>

## **3.HTML構文**
[sample3-5.html]
```
<!DOCTYPE html>
<html>
<head>

<title>
Title
</title>

</head>

<body>
<h1>
画面に表示するものはすべてボディタグの中に書きます。
</h1>

<a href="https://www.google.co.jp/">ＧＯＯＧＬＥリング</a>

</body>         
</html>　
```

**実行結果**
<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>
<meta charset="utf-8">
</head>        
<body>
<h1>
画面に表示するものはすべてボディタグの中に書きます。
</h1>
<p>段落中に<br> 改行</p>
<a href="https://www.google.co.jp/">ＧＯＯＧＬＥリング</a>

</body>         
</html>
<br>
**例題の説明**
+ ```<!DOCTYPE html>``` は文書型宣言タグ、これはhtmlファイルですよと言う意味です
+ ```<html>``` はhtml開始タグ、htmlのについての内容はこの中に書きます
+ ```<head>``` はヘッドタグ、このhtmlファイルの属性設定をこの中に書きます
+ ```<title>``` はタイトル属性タグ、ブラウザータイトル設定できます
+ ```<meta charset="utf-8">``` は文字化け防止のため、このhtmlファイルの文字コードをutf-8に指定します
+ ```<body>``` はボディタグ
+ ```<a href=...>``` は```<a>```タグのhref属性に遷移先URLを指定します
<br><br>

***

> **練習**
>> **問題**[ex3-1.html]
<br>
リンクをクリックしたらGoogleの本ページが開けるように下記のページを作成してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習</title>
</head>
<body>
    <h1 style="color:red;">
           赤(h1タグ)
    </h1>
    <h2 style="color:blue;text-align: center;">
        中央寄せ(h2タグ)
    </h2>
    <p>段落１(pタグ)</p>
    <p>段落2(pタグ)</p>
    <h4 style="text-align: right;"><a href="https://www.google.co.jp/">
        ここはGoogleへのリンクです(h4、aタグ)
    </a></h4>
</body>
</html>

content

第3章 文章とリンク

第3章　文章とリンク