# HTML5 and CSS: 21-30

21 Link to External Pages with Anchor Elements

* Anchor Element `<a>` 錨點
* `<a href="http://freecatphotoapp.com">cat photos</a>`

```markup
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>


<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<a href="http://freecatphotoapp.com">cat photos</a>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
```

22 - Nest an Anchor Element within a Paragraph

* 例子

```markup
<p>View more cat photos
<a href="http://www.freecatphotoapp.com">cat photos</a>
</p>
```

* 作業

```markup
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>View more cat photos
<a href="http://www.freecatphotoapp.com">cat photos</a>
</p>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
```

23 - Make Dead Links using the Hash Symbol

* 不想那麼早放上連結，就用 `#` 井字號代替

```markup
<p>Click here for <a href="#">cat photos</a>.</p>
```

24 - Turn an Image into a Link

```markup
<a href="#">
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
</a>
```

25 - Create a Bulleted Unordered List

```markup
<ul>
  <li>魚</li>
  <li>老鼠</li>
  <li>紙箱子</li>
</ul>
```

26 - Create an Ordered List

```markup
<p>Top 3 things cats hate:</p>
<ol>
  <li>水</li>
  <li>蛇</li>
  <li>小黃瓜</li>
</ol>
```

27 - Create a Text Field

* 原來建立輸入方塊這麼簡單 @@
* `<input type="text">`

28 - Add Placeholder Text to a Text Field

* 能預先顯示佔位符，當作預先定義文本
* `<input type="text" placeholder=" cat photo URL">`

29 - Create a Form Element

* 能夠傳送表單，`action` 定義傳送的方式
* 像範例，回車後，會傳送一個網址

```markup
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" >
</form>
```

30 - Add a Submit Button to a Form

* 透過 button 的 type="submit"，點擊 button 後，可以將資料透過 form 的 acton="path"，傳送到某個位址上

```markup
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>
```

&#x20; Submit


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/html5-and-css/html5-and-css-21-30.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.