├── .gitignore
├── 01_HelloHTML
    ├── img
    │   └── 1-1.png
    ├── index.html
    └── readme.md
├── 02_Element
    ├── index.html
    └── readme.md
├── 03_Text
    ├── index.html
    └── readme.md
├── 04_List
    ├── index.html
    └── readme.md
├── 05_Form
    ├── index.html
    └── readme.md
├── 06_Hyperlink
    ├── index.html
    └── readme.md
├── 07_Img
    └── readme.md
├── 08_SemanticElements
    ├── img
    │   ├── 8-1.png
    │   └── 8-2.png
    └── readme.md
├── 09_HTML5
    └── readme.md
├── 10_Responsive
    └── readme.md
├── 11_JavaScript
    └── readme.md
├── 12_CSS
    └── readme.md
├── 13_UniswapHTML
    ├── Uniswap.html
    ├── img
    │   ├── 9-1.jpg
    │   ├── 9-2.jpg
    │   ├── 9-3.jpg
    │   ├── 9-4.jpg
    │   ├── 9-5.jpg
    │   ├── 9-6.png
    │   ├── arrow.png
    │   ├── ethereum.png
    │   ├── icon.png
    │   └── setup.png
    └── readme.md
├── 14_BAYCHTML
    ├── BAYC.html
    ├── img
    │   ├── 10-1.png
    │   ├── 10-10.png
    │   ├── 10-11.png
    │   ├── 10-2.jpg
    │   ├── 10-3.png
    │   ├── 10-4.png
    │   ├── 10-5.png
    │   ├── 10-6.png
    │   ├── bayc-footer.webp
    │   ├── bayc-logo.webp
    │   ├── discord.png
    │   ├── icon.png
    │   ├── instagram.png
    │   ├── twitter.png
    │   └── youtube.png
    └── readme.md
├── LICENSE.md
├── README.md
└── languages
    └── en
        ├── 01_HelloHTML
            ├── img
            │   └── 1-1.png
            ├── index.html
            └── readme.md
        ├── 02_Elements
            ├── index.html
            └── readme.md
        ├── 03_Text
            ├── index.html
            └── readme.md
        ├── 04_List
            ├── index.html
            └── readme.md
        ├── 05_Form
            ├── index.html
            └── readme.md
        ├── 06_Hyperlink
            ├── index.html
            └── readme.md
        ├── 07_Img
            └── readme.md
        ├── 08_SemanticElements
            ├── img
            │   ├── 8-1.png
            │   └── 8-2.png
            └── readme.md
        ├── 09_HTML5
            └── readme.md
        ├── 10_Responsive
            └── readme.md
        ├── 11_Javascript
            └── readme.md
        ├── 12_CSS
            └── readme.md
        ├── 13_UniswapHTML
            ├── Uniswap.html
            ├── img
            │   ├── 9-1.png
            │   ├── 9-2.png
            │   ├── 9-3.jpg
            │   ├── 9-4.jpg
            │   ├── 9-5.jpg
            │   ├── 9-6.png
            │   ├── arrow.png
            │   ├── ethereum.png
            │   ├── icon.png
            │   └── setup.png
            └── readme.md
        ├── 14_BAYCHTML
            ├── BAYC.html
            ├── img
            │   ├── 10-1.png
            │   ├── 10-10.png
            │   ├── 10-11.png
            │   ├── 10-2.jpg
            │   ├── 10-3.png
            │   ├── 10-4.png
            │   ├── 10-5.png
            │   ├── 10-6.png
            │   ├── bayc-footer.webp
            │   ├── bayc-logo (1).webp
            │   ├── bayc-logo.webp
            │   ├── discord.png
            │   ├── icon.png
            │   ├── instagram.png
            │   ├── twitter.png
            │   └── youtube.png
            └── readme.md
        └── readme.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | **.DS_Store
 2 | .DS_Store
 3 | node_modules
 4 | cache
 5 | typechain-types
 6 | artifacts
 7 | .idea
 8 | .history
 9 | **node_modules**
10 | **cache**
11 | **artifacts**


--------------------------------------------------------------------------------
/01_HelloHTML/img/1-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/01_HelloHTML/img/1-1.png


--------------------------------------------------------------------------------
/01_HelloHTML/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>This is the head</title>
 5 |   </head>
 6 |   <body>
 7 |     <p>Hello <strong>HTML</strong>.</p>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/01_HelloHTML/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 1. Hello HTML （9行代码）
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 这一讲，我们介绍HTML基础，并写第一个HTML程序：Hello HTML（9行代码）。你也可以直接阅读[MDN HTML基础](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics)。
 14 | 
 15 | 
 16 | ## 什么是 HTML ？
 17 | 
 18 | 网络，或更具体的说，万维网（World Wide Web）是由很多链接在一起的文档和资源构成的。这些文档和资源是用HTML（**H**yper**t**ext **M**arkup **L**anguage，超文本标记语言）编写的，它们被称为网页。HTML是网页的基础，定义了网页的结构和内容。
 19 | 
 20 | 当你在浏览器中输入一个网址（例如，www.example.com）时，浏览器会发送一个请求到提供该网页的服务器。服务器会响应这个请求，并将请求的网页（也就是一些HTML）发送回浏览器。然后，浏览器会解析这些HTML，并将它们显示为你通常看到的网页。
 21 | 
 22 | HTML 不是一门编程语言，而是一种用于定义内容结构的*标记语言*。HTML 由一系列的**元素**（`element`）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（`tag`）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如下面内容：
 23 | 
 24 | ```plain
 25 | My cat is very grumpy
 26 | ```
 27 | 
 28 | 可以将这行文字封装成一个段落（**p**aragraph）元素来使其在单独一行呈现：
 29 | 
 30 | ```html
 31 | <p>My cat is very grumpy</p>
 32 | ```
 33 | 
 34 | ## HTML、CSS和JavaScript的区别
 35 | 
 36 | - **HTML**：HTML是用来定义网页的结构和内容的。它由一系列的元素组成，元素可以包含文本、链接、图片等。
 37 | 
 38 | - **CSS**：CSS（Cascading Style Sheets，级联样式表）是一种样式表语言，用于描述HTML元素的样式，包括颜色、布局和字体等。CSS可以使你的网页看起来更漂亮，也可以实现响应式设计，使你的网页在不同的设备上看起来都很好。
 39 | 
 40 | - **JavaScript**：JavaScript是一种编程语言，可以使网页具有交互性。例如，JavaScript可以使网页对用户的行为做出反应，如点击按钮、提交表单等。
 41 | 
 42 | ## HTML 元素
 43 | 
 44 | HTML文档由HTML元素组成。HTML元素由标签、内容和结束标签组成。例如，一个段落元素如下所示：
 45 | 
 46 | ```html
 47 | <p>This is a paragraph.</p>
 48 | ```
 49 | 
 50 | 浏览器中效果：
 51 | 
 52 | <p>This is a paragraph.</p>
 53 | 
 54 | 
 55 | 在这个例子中，`<p>`是开始标签，`This is a paragraph.`是内容，`</p>`是结束标签。
 56 | 
 57 | HTML元素可以有属性，属性提供了元素的额外信息，例如，一个链接元素如下所示：
 58 | 
 59 | ```html
 60 | <a href="https://www.example.com">This is a link</a>
 61 | ```
 62 | 
 63 | 浏览器中效果：
 64 | 
 65 | <a href="https://www.example.com">This is a link</a>
 66 | 
 67 | 在这个例子中，`href`是一个属性，它指定了链接的目标地址。
 68 | 
 69 | ## 开发工具
 70 | 
 71 | 我们建议大家使用 [VSCode](https://code.visualstudio.com/download) 开发 HTML，并用浏览器（Chrome）打开`.html`文件进行浏览。
 72 | 
 73 | ## Hello HTML
 74 | 
 75 | 现在我们要写第一个 HTML 程序：Hello HTML（9行代码），看看单个元素如何彼此协同构成一个完整的 HTML 页面。
 76 | 
 77 | ```html
 78 | <!DOCTYPE html>
 79 | <html>
 80 |   <head>
 81 |     <title>This is the head</title>
 82 |   </head>
 83 |   <body>
 84 |     <p>Hello <strong>HTML</strong>.</p>
 85 |   </body>
 86 | </html>
 87 | ```
 88 | 
 89 | ![Hello HTML](./img/1-1.png)
 90 | 
 91 | Hello HTML中包括以下元素：
 92 | 
 93 | - `<!DOCTYPE html>` — 文档类型，保证文档正常读取。。
 94 | - `<html></html>` — `html` 元素，包含整个页面的内容，也称作根元素。
 95 | - `<head></head>` — `head` 元素，它的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keyword）、页面描述、CSS 样式表和字符编码声明等。
 96 | - `<title></title>` — `title` 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
 97 | - `<body></body>` — `body` 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
 98 | - `<p></p>` - 段落元素，表示文本的一个段落，通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
 99 | 
100 | ## 总结
101 | 
102 | 这一讲我们介绍了什么是HTML，HTML的元素和开发工具，并且写了第一个HTML程序：Hello HTML。


--------------------------------------------------------------------------------
/02_Element/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>Element</title>
 4 | </head>
 5 | <body>
 6 |     <p>My cat is <strong>very</strong> grumpy.</p>
 7 |     <p>My cat is <strong>very grumpy.</p></strong>
 8 |     <img src="images/firefox-icon.png" alt="My test image">
 9 |     <div>我是div</div>
10 |     <div>我也是div</div>
11 |     <span>我是span</span>
12 |     <span>我也是span</span>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/02_Element/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 2. Element
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 在我们了解了HTML的基础概念后，我们将深入讨论HTML的元素。
 14 | 
 15 | 
 16 | ## 元素的属性
 17 | 
 18 | HTML 元素可以拥有属性（Attribute），它们提供了有关元素的更多信息，或者定义了元素的某些行为。属性总是在开始标签中定义，常常使用 "属性名=属性值" 的形式出现。例如，链接（`a`）元素可以使用 `href` 属性指定链接的目标地址：
 19 | 
 20 | ```html
 21 | <a href="https://www.example.com">Visit our website</a>
 22 | ```
 23 | 
 24 | 浏览器中效果：
 25 | 
 26 | <a href="https://www.example.com">Visit our website</a>
 27 | 
 28 | 
 29 | 在上述代码中，`a` 元素的 `href` 属性的值为 `"https://www.example.com"`，这意味着当点击该链接时，浏览器将导航到该 URL。
 30 | 
 31 | 属性应该包含：
 32 | 
 33 | 1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
 34 | 2. 属性的名称，并接上一个等号。
 35 | 3. 由引号所包围的属性值。
 36 | 
 37 | 常用的属性：
 38 | 
 39 | 1. `id`:为元素提供一个唯一标识符。
 40 | 2. `class`：为元素提供一个或多个类名，不同的元素可以添加相同的类名。
 41 | 3. `style`:为元素提供内联样式。
 42 | 
 43 | 
 44 | ## 嵌套元素
 45 | 
 46 | HTML 元素可以嵌套在其他元素中。这意味着你可以在一个元素内部放置另一个或多个元素，以创建更复杂的内容结构。例如，你可能会在一个段落元素内部包含一个或多个链接元素：
 47 | 
 48 | ```html
 49 | <p>My cat is <strong>very</strong> grumpy.</p>
 50 | ```
 51 | 浏览器中效果:
 52 | 
 53 | <p>My cat is <strong>very</strong> grumpy.</p>
 54 | 
 55 | 必须保证元素嵌套次序正确：本例首先使用`<p>`标签，然后是`<strong>`标签，因此要先结束`<strong>`标签，最后再结束`<p>`标签。这样是不对的：
 56 | 
 57 | ```html
 58 | <p>My cat is <strong>very grumpy.</p></strong>
 59 | ```
 60 | 
 61 | 浏览器中效果:
 62 | 
 63 | <p>My cat is <strong>very grumpy.</p></strong>
 64 | 
 65 | 因此元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！
 66 | 
 67 | ## 空元素
 68 | 
 69 | HTML 中有一些元素没有内容，也不需要结束标签，这些被称为空元素（Empty Elements）。比如 `<br>` 标签插入一个换行，`<img>` 标签用来插入图片。
 70 | 
 71 | ```html
 72 | <br>
 73 | <img src="image.jpg" alt="My Image">
 74 | ```
 75 | 
 76 | ## 块级元素
 77 | 
 78 | 块级元素（Block-level Elements）在页面中以块的形式显示，常常用作结构元素。常见的块级元素有：`<div>`、`<p>`、`<h1>`-`<h6>` 和 `<ul>` 等。块级元素的特点是：
 79 | 
 80 | 1. 独占一行
 81 | 2. 元素的宽高可以设置
 82 | 3. 默认宽度是它父容器的100%
 83 | 4. 与其他块级元素上下堆叠
 84 | 
 85 | ```html
 86 | <div>我是div</div>
 87 | <div>我也是div</div>
 88 | ```
 89 | 
 90 | 浏览器中效果:
 91 | <div>我是div</div>
 92 | <div>我也是div</div>
 93 | 
 94 | 
 95 | ## 行内元素
 96 | 
 97 | 行内元素（Inline Elements）不会开始新的一行，它们在文本中流动，仅占据它们包含的内容所需要的宽度。常见的行内元素有：`<span>`、`<a>` 和 `<img>` 等。行内元素的特点是：
 98 | 
 99 | 1. 可以与相邻的行内元素排列在同一行
100 | 2. 元素的宽高不可设置
101 | 3. 元素宽度会被内容撑开
102 | 
103 | ```html
104 | <span>我是span</span>
105 | <span>我也是span</span>
106 | ```
107 | 
108 | 浏览器中效果:
109 | 
110 | <span>我是span</span>
111 | <span>我也是span</span>
112 | 
113 | 
114 | ## 总结
115 | 
116 | 这一讲我们具体分析了HTML中的元素，包括元素的属性、嵌套元素、空元素、块级元素和行内元素。
117 | 


--------------------------------------------------------------------------------
/03_Text/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>Text</title>
 4 | </head>
 5 | <body>
 6 |     <h1>主标题</h1>
 7 |     <h2>顶层标题</h2>
 8 |     <h3>子标题</h3>
 9 |     <h4>次子标题</h4>
10 | 
11 |     <p>我是一个段落，千真万确。</p>
12 | 
13 |     <p><span>一些文字</span></p>
14 | 
15 |     Mozilla Foundation<br>
16 |     1981 Landings Drive<br>
17 |     Building K<br>
18 |     Mountain View, CA 94043-0801<br>
19 | 
20 |     <p>I am <em>glad</em> you weren't <em>late</em>.</p>
21 |     
22 |     <p>This liquid is <strong>highly toxic</strong>.</p>
23 |     <p>I am counting on you. <strong>Do not</strong> be late!</p>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/03_Text/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 3. 常用文本标签
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | HTML 提供了大量的文本标签，以供我们在制作网页时使用。这些标签可以帮助我们更好地组织和格式化我们的文本内容。以下是一些常用的 HTML 文本标签。
 14 | 
 15 | ## `<p>`：段落标签
 16 | 
 17 | `<p>` 标签用于定义一个段落。它会在前后各添加一个换行，使得段落之间有明显的区分。
 18 | 
 19 | ```html
 20 | <p>这是一个段落。</p>
 21 | <p>这是另一个段落。</p>
 22 | ```
 23 | 
 24 | 浏览器中效果：
 25 | 
 26 | <p>这是一个段落。</p>
 27 | <p>这是另一个段落。</p>
 28 | 
 29 | 
 30 | 
 31 | ## `<h1>` 到 `<h6>`：标题标签
 32 | 
 33 | 这些标签用于定义 HTML 标题。`<h1>` 定义最大的标题，`<h6>` 定义最小的标题。
 34 | 
 35 | ```html
 36 | <h1>这是一个 h1 标题</h1>
 37 | <h2>这是一个 h2 标题</h2>
 38 | ...
 39 | <h6>这是一个 h6 标题</h6>
 40 | ```
 41 | 
 42 | 浏览器中效果：
 43 | <h1>这是一个 h1 标题</h1>
 44 | <h2>这是一个 h2 标题</h2>
 45 | ...
 46 | <h6>这是一个 h6 标题</h6>
 47 | 
 48 | ## `<br>`：换行标签
 49 | 
 50 | `<br>` 标签用于插入一个简单的换行符。
 51 | 
 52 | ```html
 53 | <p>这是一个段落。<br>这是同一个段落的新一行。</p>
 54 | ```
 55 | 
 56 | 浏览器中效果：
 57 | 
 58 | <p>这是一个段落。<br>这是同一个段落的新一行。</p>
 59 | 
 60 | ## `<strong>`：加粗标签
 61 | 
 62 | `<strong>` 标签用于定义强调文字，浏览器通常会将其显示为粗体。
 63 | 
 64 | ```html
 65 | <p>这是一个<strong>加粗</strong>的文字。</p>
 66 | ```
 67 | 
 68 | 浏览器中效果：
 69 | 
 70 | <p>这是一个<strong>加粗</strong>的文字。</p>
 71 | 
 72 | ## `<em>`：斜体标签
 73 | 
 74 | `<em>` 标签用于定义强调文字，浏览器通常会将其显示为斜体。
 75 | 
 76 | ```html
 77 | <p>这是一个<em>斜体</em>的文字。</p>
 78 | ```
 79 | 
 80 | 浏览器中效果：
 81 | 
 82 | <p>这是一个<em>斜体</em>的文字。</p>
 83 | 
 84 | 
 85 | ## `<u>`：下划线标签
 86 | 
 87 | `<u>` 标签用于定义下划线文本。
 88 | 
 89 | ```html
 90 | <p>这是一个<u>带下划线</u>的文字。</p>
 91 | ```
 92 | 
 93 | 浏览器中效果：
 94 | <p>这是一个<u>带下划线</u>的文字。</p>
 95 | 
 96 | ## `<del>`：删除线标签
 97 | 
 98 | `<del>` 标签用于展示已经被删除的文字，浏览器通常会在其上添加一条横线。
 99 | 
100 | ```html
101 | <p>这是一个<del>已删除</del>的文字。</p>
102 | ```
103 | 
104 | 浏览器中效果：
105 | <p>这是一个<del>已删除</del>的文字。</p>
106 | 
107 | ## `<mark>`：高亮标签
108 | 
109 | `<mark>` 标签用于定义标记或高亮的文本。
110 | 
111 | ```html
112 | <p>这是一个<mark>高亮</mark>的文字。</p>
113 | ```
114 | 浏览器中效果：
115 | <p>这是一个<mark>高亮</mark>的文字。</p>
116 | 
117 | 
118 | ## `<sub>` 和 `<sup>`：下标和上标标签
119 | 
120 | `<sub>` 用于定义下标文本，`<sup>` 用于定义上标文本。
121 | 
122 | ```html
123 | <p>这是一个<sub>下标</sub>和<sup>上标</sup>的例子。</p>
124 | ```
125 | 浏览器中效果：
126 | <p>这是一个<sub>下标</sub>和<sup>上标</sup>的例子。</p>
127 | 
128 | ## 总结
129 | 
130 | 这一讲我们介绍了一些常用的 HTML 文本标签，合理使用这些标签可以帮助我们更好地组织和展示我们的网页内容。


--------------------------------------------------------------------------------
/04_List/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <head>
  4 |     <title>Element</title>
  5 | </head>
  6 | 
  7 | <body>
  8 |     <!-- 无序列表 -->
  9 |     <ul>
 10 |         <li>BTC</li>
 11 |         <li>ETH</li>
 12 |         <li>SHIB</li>
 13 |     </ul>
 14 | 
 15 |     <!-- 有序列表 -->
 16 |     <ol>
 17 |         <li>BTC</li>
 18 |         <li>ETH</li>
 19 |         <li>SHIB</li>
 20 |     </ol>
 21 | 
 22 | 
 23 |     <!-- 定义列表 -->
 24 |     <dl>
 25 |         <dt>BTC</dt>
 26 |         <dd>- desc1</dd>
 27 |         <dd>- desc2</dd>
 28 |         <dt>ETH</dt>
 29 |         <dd>- desc1</dd>
 30 |         <dd>- desc2</dd>
 31 |     </dl>
 32 | 
 33 | 
 34 |     <!-- 表格基本使用 -->
 35 |     <table>
 36 |         <tr>
 37 |             <th>Name</th>
 38 |             <th>Code</th>
 39 |             <th>Price</th>
 40 |         </tr>
 41 |         <tr>
 42 |             <td>比特币</td>
 43 |             <td>BTC</td>
 44 |             <td>19969</td>
 45 |         </tr>
 46 |         <tr>
 47 |             <td>以太币</td>
 48 |             <td>ETH</td>
 49 |             <td>1,354</td>
 50 |         </tr>
 51 |     </table>
 52 | 
 53 | 
 54 |     <!-- thead,tbody,tfoot -->
 55 |     <table>
 56 |         <thead>
 57 |             <tr>
 58 |                 <th>Token</th>
 59 |                 <th>Cost</th>
 60 |             </tr>
 61 |         </thead>
 62 |         <tfoot>
 63 |             <tr>
 64 |                 <td>Total</td>
 65 |                 <td>180</td>
 66 |             </tr>
 67 |         </tfoot>
 68 |         <tbody>
 69 |             <tr>
 70 |                 <td>BTC</td>
 71 |                 <td>100</td>
 72 |             </tr>
 73 |             <tr>
 74 |                 <td>ETH</td>
 75 |                 <td>80</td>
 76 |             </tr>
 77 |         </tbody>
 78 |     </table>
 79 | 
 80 | 
 81 | 
 82 |     <!-- 合并表格项，colspan和rowspan -->
 83 |     <table>
 84 |         <tr>
 85 |             <th>Token</th>
 86 |             <th>Price</th>
 87 |             <th>Total</th>
 88 |         </tr>
 89 |         <tr>
 90 |             <td>BTC</td>
 91 |             <td>100</td>
 92 |             <td rowspan="2">300</td>
 93 |         </tr>
 94 |         <tr>
 95 |             <td>ETH</td>
 96 |             <td>200</td>
 97 |         </tr>
 98 |     </table>
 99 | 
100 | </body>
101 | 
102 | </html>


--------------------------------------------------------------------------------
/04_List/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 4. 列表和表格
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 
 14 | HTML 中的列表和表格标签是构建网页的重要工具，它们可以帮助我们组织和显示数据。以下是关于列表和表格的一些基本信息。
 15 | 
 16 | 
 17 | ## 列表
 18 | 
 19 | 在HTML中，有三种类型的列表：
 20 | 
 21 | 1. 无序列表（Unordered list）：使用`<ul>`元素来创建，每个列表项都要用`<li>`元素来表示。
 22 | 2. 有序列表（Ordered list）：使用`<ol>`元素来创建，列表项同样用`<li>`元素来表示，不同的是它们会自动添加序号。
 23 | 3. 定义列表（Definition list）：使用`<dl>`元素创建，包含`<dt>`（定义标题）和`<dd>`（定义描述）元素。
 24 | 
 25 | 下面我们详细介绍每种列表的用法和特点。
 26 | 
 27 | ### 无序列表
 28 | 
 29 | 无序列表是最常见的列表类型，它在每个列表项前添加一个小圆点（也叫做列表符号）。它使用 `<ul>` 作为列表的容器，而 `<li>` 作为描述具体的列表项。例如：
 30 | 
 31 | ```html
 32 | <ul>
 33 |   <li>BTC</li>
 34 |   <li>ETH</li>
 35 |   <li>SHIB</li>
 36 | </ul>
 37 | ```
 38 | 
 39 | 
 40 | 浏览器中效果：
 41 | 
 42 | <ul>
 43 |   <li>BTC</li>
 44 |   <li>ETH</li>
 45 |   <li>SHIB</li>
 46 | </ul>
 47 | 
 48 | 
 49 | ### 有序列表
 50 | 
 51 | 相对于无序列表，有序列表的每个列表项会使用数字进行标记。有序列表始使用 `<ol>` 作为列表的容器，同样使用 `<li>` 描述具体的列表项。例如：
 52 | 
 53 | ```html
 54 | <ol>
 55 | <li>BTC</li>
 56 | <li>ETH</li>
 57 | <li>SHIB</li>
 58 | </ol>
 59 | ```
 60 | 
 61 | 浏览器中显示如下：
 62 | 
 63 | <ol>
 64 | <li>BTC</li>
 65 | <li>ETH</li>
 66 | <li>SHIB</li>
 67 | </ol>
 68 | 
 69 | 
 70 | ### 定义列表
 71 | 
 72 | 定义列表由`<dl>`（定义列表）、`<dt>`（定义项）和`<dd>`（定义描述）元素组成。定义列表通常用来展示一组术语和它们的定义。
 73 | 
 74 | ```html
 75 | <dl>
 76 |   <dt>BTC</dt>
 77 |   <dd>- desc1</dd>
 78 |   <dd>- desc2</dd>
 79 |   <dt>ETH</dt>
 80 |   <dd>- desc1</dd>
 81 |   <dd>- desc2</dd>
 82 | </dl>
 83 | ```
 84 | 
 85 | 浏览器显示如下：
 86 | 
 87 | <dl>
 88 |   <dt>BTC</dt>
 89 |   <dd>- desc1</dd>
 90 |   <dd>- desc2</dd>
 91 |   <dt>ETH</dt>
 92 |   <dd>- desc1</dd>
 93 |   <dd>- desc2</dd>
 94 | </dl>
 95 | 
 96 | 
 97 | ## 表格
 98 | 
 99 | ### 基础表格
100 | 
101 | 表格可以用于展示二维的数据，它使用 `<table>`作为表格的容器
102 | 
103 | 内部使用 `<tr>`(table row)表示一行的数据
104 | 
105 |  `<tr>`内部使用 `<th>`表示表格每列的标题，使用 `<td>`表示该行每列，存放具体的数据；
106 | 
107 | 具体示例如下：
108 | 
109 | ```html
110 | <table>
111 |   <tr>
112 |     <th>Name</th>
113 |     <th>Code</th>
114 |     <th>Price</th>
115 |   </tr>
116 |   <tr>
117 |     <td>比特币</td>
118 |     <td>BTC</td>
119 |     <td>19969</td>
120 |   </tr>
121 |   <tr>
122 |     <td>以太币</td>
123 |     <td>ETH</td>
124 |     <td>1,354</td>
125 |   </tr>
126 | </table>
127 | ```
128 | 
129 | 浏览器显示如下：
130 | 
131 | <table>
132 |   <tr>
133 |     <th>Name</th>
134 |     <th>Code</th>
135 |     <th>Price</th>
136 |   </tr>
137 |   <tr>
138 |     <td>比特币</td>
139 |     <td>BTC</td>
140 |     <td>19969</td>
141 |   </tr>
142 |   <tr>
143 |     <td>以太币</td>
144 |     <td>ETH</td>
145 |     <td>1,354</td>
146 |   </tr>
147 | </table>
148 | 
149 | 
150 | ### `<thead>`、`<tbody>`和 `<tfoot>`
151 | 
152 | `<thead>`、`<tbody>`和 `<tfoot>`元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）
153 | 
154 | 示例如下：
155 | 
156 | ```html
157 | <table>
158 |   <thead>
159 |     <tr>
160 |       <th>Token</th>
161 |       <th>Cost</th>
162 |     </tr>
163 |   </thead>
164 |   <tfoot>
165 |     <tr>
166 |       <td>Total</td>
167 |       <td>180</td>
168 |     </tr>
169 |   </tfoot>
170 |   <tbody>
171 |     <tr>
172 |       <td>BTC</td>
173 |       <td>100</td>
174 |     </tr>
175 |     <tr>
176 |       <td>ETH</td>
177 |       <td>80</td>
178 |     </tr>
179 |   </tbody>
180 | </table>
181 | ```
182 | 
183 | 浏览器显示如下：
184 | 
185 | <table>
186 |   <thead>
187 |     <tr>
188 |       <th>Token</th>
189 |       <th>Cost</th>
190 |     </tr>
191 |   </thead>
192 |   <tfoot>
193 |     <tr>
194 |       <td>Total</td>
195 |       <td>180</td>
196 |     </tr>
197 |   </tfoot>
198 |   <tbody>
199 |     <tr>
200 |       <td>BTC</td>
201 |       <td>100</td>
202 |     </tr>
203 |     <tr>
204 |       <td>ETH</td>
205 |       <td>80</td>
206 |     </tr>
207 |   </tbody>
208 | </table>
209 | 
210 | 
211 | 
212 | ### 合并表格
213 | 
214 | 合并表格可以使用 `<td>`和`<th>`的`colspan`和`rowspan`属性，其中`colspan`用于水平合并多行，`rowspan`用于垂直合并多列。
215 | 
216 | 示例如下：
217 | 
218 | ```html
219 | <table>
220 |   <tr>
221 |     <th>Token</th>
222 |     <th>Price</th>
223 |     <th>Total</th>
224 |   </tr>
225 |   <tr>
226 |     <td>BTC</td>
227 |     <td>100</td>
228 |     <td rowspan="2">300</td>
229 |   </tr>
230 |   <tr>
231 |     <td>ETH</td>
232 |     <td>200</td>
233 |   </tr>
234 | </table>
235 | ```
236 | 
237 | 
238 | 浏览器显示如下：
239 | 
240 | <table>
241 |   <tr>
242 |     <th>Token</th>
243 |     <th>Price</th>
244 |     <th>Total</th>
245 |   </tr>
246 |   <tr>
247 |     <td>BTC</td>
248 |     <td>100</td>
249 |     <td rowspan="2">300</td>
250 |   </tr>
251 |   <tr>
252 |     <td>ETH</td>
253 |     <td>200</td>
254 |   </tr>
255 | </table>
256 | 
257 | 
258 | ## 总结
259 | 
260 | 这一讲我们介绍了 HTML 中的列表和表格。通过学习这些标签，你已经能够创建结构化的列表和表格，这是构建高质量网页的重要步骤。


--------------------------------------------------------------------------------
/05_Form/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Element</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <!-- 文本域 -->
 9 |     <form>
10 |         First name: <input type="text" name="firstname"><br>
11 |         Last name: <input type="text" name="lastname">
12 |     </form>
13 | 
14 |     <!-- 密码 -->
15 |     <form>
16 |         Password: <input type="password" name="pwd">
17 |     </form>
18 |     <!-- 单选按钮 -->
19 |     <form action="">
20 |         ACCOUNT:
21 |         <input type="radio" name="address" value="addr1">0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br>
22 |         <input type="radio" name="address" value="addr2">0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
23 |     </form>
24 |     <!-- 复选按钮 -->
25 |     <form>
26 |         Token value <br>
27 |         <input type="checkbox" name="token_value" value="Wei">Wei<br>
28 |         <input type="checkbox" name="token_value" value="GWei">GWei<br>
29 |         <input type="checkbox" name="token_value" value="Ether">Ether<br>
30 |     </form>
31 |     <!-- 下拉框 -->
32 |     <form action="">
33 |         Contract
34 |         <select>
35 |             <option>Facucet.sol</option>
36 |             <option>ERC20.sol</option>
37 |             <option>ERC721.sol</option>
38 |         </select>
39 |     </form>
40 |     <!-- 提交按钮 -->
41 |     <form name="input" action="action.php" method="get">
42 |         <input type="submit" value="Deploy">
43 |         <input type="text" name="user" placeholder='address'>
44 |     </form>
45 | </body>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/05_Form/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 5. 表单
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 表单是 HTML 中非常重要的一部分，它能让用户在网页上输入信息，并将信息提交到服务器。在这一章节中，我们将详细介绍如何使用`<form>`、`<input>`、`<textarea>`等标签来创建表单。
 14 | 
 15 | ## 表单的创建
 16 | 
 17 | 在 HTML 中，表单的创建主要由`<form>`元素完成。`<form>`元素定义了用户输入数据的区域，并且可以包含不同类型的输入元素，如文本字段、选择框、复选框、单选框和按钮等。
 18 | 
 19 | 一个基本的表单结构如下：
 20 | 
 21 | ```html
 22 | <form>
 23 |   <!-- 表单元素放在这里 -->
 24 | </form>
 25 | ```
 26 | 
 27 | 在`<form>`元素中，你可以添加属性`action`和`method`。`action`属性定义表单数据提交到服务器后的处理文件的 URL。`method`属性定义数据如何发送到服务器，常用的值有 "get" 和 "post"。
 28 | 
 29 | ## 文本输入
 30 | 
 31 | 在表单中，我们经常需要用户输入文本。这可以通过`<input>`元素完成，其`type`属性设置为 "text"。
 32 | 
 33 | 例如：
 34 | 
 35 | ```html
 36 | <form>
 37 | First name: <input type="text" name="firstname"><br>
 38 | Last name: <input type="text" name="lastname">
 39 | </form>
 40 | ```
 41 | 
 42 | 浏览器效果：
 43 | 
 44 | <form>
 45 | First name: <input type="text" name="firstname"><br>
 46 | Last name: <input type="text" name="lastname">
 47 | </form>
 48 | 
 49 | ## 密码
 50 | 
 51 | 如果你需要用户输入密码，可以将`<input>`元素的`type`属性设置为 "password"，输入的内容会被隐藏起来。
 52 | 
 53 | 例如：
 54 | 
 55 | ```html
 56 | <form>
 57 | Password: <input type="password" name="pwd">
 58 | </form>
 59 | ```
 60 | 
 61 | 浏览器效果：
 62 | 
 63 | <form>
 64 | Password: <input type="password" name="pwd">
 65 | </form>
 66 | 
 67 | ## 单选按钮（Radio Buttons）
 68 | 
 69 | 单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的`type`属性值为 "radio"。
 70 | 
 71 | ```html
 72 | <form action="">
 73 | ACCOUNT:
 74 | <input type="radio" name="address" value="addr1">0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br>
 75 | <input type="radio" name="address" value="addr2">0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
 76 | </form>
 77 | ```
 78 | 
 79 | 浏览器效果：
 80 | 
 81 | <form action="">
 82 | ACCOUNT:
 83 | 
 84 | <input type="radio" name="address" value="addr1">0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br>
 85 | <input type="radio" name="address" value="addr2">0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
 86 | </form>
 87 | 
 88 | ### 复选框（Checkboxes）
 89 | 
 90 | 复选框可以选取一个或多个选项，使用 **`<input type="checkbox">`** 定义
 91 | 
 92 | 示例如下：
 93 | 
 94 | ```html
 95 | <form>
 96 |   Token value <br>
 97 |   <input type="checkbox" name="token_value" value="Wei">Wei<br>
 98 |   <input type="checkbox" name="token_value" value="GWei">GWei<br>
 99 |   <input type="checkbox" name="token_value" value="Ether">Ether<br>
100 | </form>
101 | ```
102 | 
103 | 浏览器效果：
104 | 
105 | <form>
106 |   Token value <br>
107 |   <input type="checkbox" name="token_value" value="Wei">Wei<br>
108 |   <input type="checkbox" name="token_value" value="GWei">GWei<br>
109 |   <input type="checkbox" name="token_value" value="Ether">Ether<br>
110 | </form>
111 | 
112 | 
113 | ### 下拉列表（select）
114 | 
115 | 下拉列表可以让用户从多个选项中选择一个。它由`<select>`元素创建，并使用`<option>`元素来定义选项。
116 | 
117 | 示例如下：
118 | 
119 | ```html
120 | <form action="">
121 |   Contract
122 |   <select>
123 |     <option>Facucet.sol</option>
124 |     <option>ERC20.sol</option>
125 |     <option>ERC721.sol</option>
126 |   </select>
127 | </form>
128 | ```
129 | 
130 | 浏览器效果：
131 | 
132 | <form action="">
133 |   Contract
134 |   <select>
135 |     <option>Facucet.sol</option>
136 |     <option>ERC20.sol</option>
137 |     <option>ERC721.sol</option>
138 |   </select>
139 | </form>
140 | 
141 | ### 提交按钮（Submit）
142 | 
143 | 表单通常需要一个提交按钮来提交用户的输入。这可以通过设置`<input>`元素的`type`属性为 "submit" 来完成。
144 | 
145 | 示例如下：
146 | 
147 | ```html
148 | <form name="input" action="action.php" method="get">
149 |   <input type="submit" value="Deploy">
150 |   <input type="text" name="user" placeholder='address'>
151 | </form>
152 | ```
153 | 
154 | 浏览器效果：
155 | 
156 | <form name="input" action="action.php" method="get">
157 |   <input type="submit" value="Deploy">
158 |   <input type="text" name="user" placeholder='address'>
159 | </form>
160 | 
161 | ## 表单其他元素
162 | 
163 | 还有一些表表单常见的元素属性：
164 | 
165 | - **name**：表单的名称。该值不能是空字符串，并且在它所在的表单集合中需要是唯一的
166 | 
167 | - **action** ：指定表单内容的送达地址，实现对输入数据的处理
168 | 
169 | - **method**：定义表单数据的提交方式，可以是以下值：
170 | 
171 |   - **post**：HTTP POST 方法，表单数据会包含在表单体内发送给服务器，可以用于提交敏感数据，如用户名与密码等
172 |   - **get**：默认值， HTTP GET 方法，表单数据会附加在 **action** 属性的 URL 中，并以 **?** 作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.wtfacademy.com/?currentPage=1，这里的 currentPage=1 就是 get 方法提交的数据
173 | 
174 | 
175 | ## 总结
176 | 
177 | 以上就是 HTML 表单的基本用法。通过学习这些标签和属性，你应该已经能够创建基本的 HTML 表单了。


--------------------------------------------------------------------------------
/06_Hyperlink/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>Hyperlink</title>
 4 | </head>
 5 | <body>
 6 |     <p>我创建了一个指向
 7 |         <a href="https://wtf.academy/">WTFAcademy 主页</a>的超链接。
 8 |     </p>
 9 | 
10 |     <p>我创建了一个指向
11 |         <a href="https://wtf.academy/" title="面向Web2开发者的Web3开源学院。">WTFAcademy 主页</a>的超链接。
12 |     </p>
13 | 
14 |     <a href="https://wtf.academy/">外部链接</a>
15 | 
16 |     <a href="#什么是超链接？">相同页面链接的描述</a>
17 | 
18 |     <a href="https://wtf.academy/">
19 |         <img src="https://wtf.academy/img/wtflogo.png" alt="WTFAcademy logo" />
20 |     </a>
21 | 
22 |     <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
23 | 
24 |     <a href="tel:+491570156">+49 157 0156</a>
25 | 
26 |     <a href="https://github.com/WTFAcademy/WTF-HTML/blob/main/06_Hyperlink/img/6-2.png" download="wtflogo">下载 WTFAcademy logo</a>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/06_Hyperlink/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 6. Hyperlink 超链接
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 超链接是 HTML 中的一项基本功能，它可以链接到网页的其他部分，或者链接到其他网页，甚至是其他网站。在这一章节，我们将详细介绍如何在 HTML 中使用超链接。
 14 | 
 15 | 
 16 | ## 创建超链接
 17 | 
 18 | 超链接在 HTML 中主要通过 `<a>` 标签来创建。`<a>`标签内部一般包含一些文本或者图片，这些内容将成为链接的可点击部分。同时，我们通过`<a>`标签的 `href` 属性指定链接的目标地址。
 19 | 
 20 | ```html
 21 | <a href="https://wtf.academy">访问 WTF Academy 的官网</a>
 22 | ```
 23 | 
 24 | 浏览器效果：
 25 | 
 26 | <a href="https://wtf.academy">访问 WTF Academy 的官网</a>
 27 | 
 28 | ## 使用 `title` 属性添加支持信息
 29 | 
 30 | 你可能要添加到你的链接的另一个属性是 title（标题）；这旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情。
 31 | 
 32 | ```html
 33 | <a href="https://wtf.academy/" title="面向开发者的Web3开源学院。">访问 WTF Academy 的官网</a>
 34 | ```
 35 | 
 36 | 结果如下（当鼠标指针悬停在链接上时，标题将作为提示信息出现）：
 37 | 
 38 | <a href="https://wtf.academy/" title="面向开发者的Web3开源学院。">访问 WTF Academy 的官网</a>
 39 | 
 40 | > **Note**
 41 | >
 42 | > 链接的标题仅当鼠标悬停在其上时才会显示，这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要，你应该使用所有用户能都方便获取的方式来呈现，例如放在常规文本中。
 43 | 
 44 | ## 设置链接打开方式
 45 | 
 46 | 有时，我们希望点击链接后在新的浏览器窗口或者标签页中打开，而不是在当前页面打开。这可以通过 `<a>` 标签的 `target` 属性来实现。如果我们希望链接在新的标签页打开，可以将 `target` 属性设置为 `_blank`。
 47 | 
 48 | 例如：
 49 | 
 50 | ```html
 51 | <a href="https://wtf.academy" target="_blank">访问 WTF Academy 的官网</a>
 52 | ```
 53 | 
 54 | 浏览器效果：
 55 | 
 56 | <a href="https://wtf.academy" target="_blank">访问 WTF Academy 的官网</a>
 57 | 
 58 | 这个超链接点击后将在新的浏览器标签页中打开 WTF Academy 的官网。
 59 | 
 60 | ## 锚点链接
 61 | 
 62 | 在一个长的网页中，我们可能希望创建链接到页面内部某个部分的链接。这可以通过锚点链接来实现。首先，我们需要使用 `<a>` 标签的 `name` 或 `id` 属性来标记目标位置，然后在链接的 `href` 属性中使用 `#` 加上目标的 `name` 或 `id` 值来创建链接。
 63 | 
 64 | 例如：
 65 | 
 66 | ```html
 67 | <a name="section1"></a>
 68 | <!-- 一些内容 -->
 69 | <a href="#section1">跳转到 section1</a>
 70 | ```
 71 | 
 72 | 浏览器效果：
 73 | 
 74 | <a name="section1"></a>
 75 | <a href="#section1">跳转到 section1</a>
 76 | 
 77 | 
 78 | 这个超链接点击后将会跳转到页面的 `section1` 部分。
 79 | 
 80 | 
 81 | ## 邮箱链接
 82 | 
 83 | 除了链接到其他网页，`<a>` 标签还可以链接到电子邮件地址。通过在 `href` 属性值前面添加 `mailto:`，可以创建一个点击后会启动用户默认的邮件客户端，并创建一封新邮件的链接。
 84 | 
 85 | 例如：
 86 | 
 87 | ```html
 88 | <a href="mailto:example@example.com">发送邮件到 example@example.com</a>
 89 | ```
 90 | 
 91 | 这个超链接点击后将启动用户的邮件客户端，并创建一封发送到 `example@example.com` 的新邮件。
 92 | 
 93 | ## 下载链接
 94 | 
 95 | ```html
 96 | <a href="https://wtf.academy/img/wtflogo.png" download="wtflogo">下载 WTFAcademy logo</a>
 97 | ```
 98 | 
 99 | <a href="https://wtf.academy/img/wtflogo.png" download="wtflogo">下载 WTFAcademy logo</a>
100 | 
101 | 
102 | ## 总结
103 | 
104 | 在这一章节中，我们介绍了如何在 HTML 中创建和使用超链接，包括普通链接、在新标签页打开的链接、邮箱链接和锚点链接。理解和掌握超链接是学习 HTML 的一个重要步骤，它能使你的网页和其他网页或者页面内部的其他部分相互连接。


--------------------------------------------------------------------------------
/07_Img/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML 极简教程: 7. 图片
 2 | 
 3 | WTF HTML 教程，帮助新人快速入门 HTML。
 4 | 
 5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | 所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | 在网页中，图片是一种非常重要的媒体类型，能够提升用户体验，使信息传递更为直观和生动。本章节将介绍如何在 HTML 中嵌入和处理图片。
14 | 
15 | ## 插入图片
16 | 
17 | 在 HTML 中，我们使用 `<img>` 标签来插入图片。`<img>` 标签是自闭合标签，也就是说它没有结束标签。图片的地址通过 `<img>` 标签的 `src`（source）属性指定。
18 | 
19 | 例如：
20 | 
21 | ```html
22 | <img src="https://wtf.academy/img/wtflogo.png">
23 | ```
24 | 
25 | 浏览器效果：
26 | 
27 | <img src="https://wtf.academy/img/wtflogo.png">
28 | 
29 | ## 设置图片属性
30 | 
31 | `<img>` 标签还有一些其他的属性，可以用来设置图片的大小、替代文本等。
32 | 
33 | ### 设置图片大小
34 | 
35 | 我们可以通过 `<img>` 标签的 `width` 和 `height` 属性来设置图片的宽度和高度。这两个属性的值可以是具体的像素值，也可以是百分比。
36 | 
37 | 例如：
38 | 
39 | ```html
40 | <img src="https://wtf.academy/img/wtflogo.png" width="200" height="100">
41 | ```
42 | 
43 | 浏览器效果：
44 | 
45 | <img src="https://wtf.academy/img/wtflogo.png" width="200" height="100">
46 | 
47 | 
48 | 这将会设置图片的宽度为 200 像素，高度为 100 像素。
49 | 
50 | 需要注意的是，如果同时设置了图片的宽度和高度，而这两个值的比例与图片本身的比例不一致，那么图片可能会被拉伸或压缩，造成形变。因此，在设置图片大小的时候，我们一般只设置宽度或者高度中的一个，另一个保持自动。
51 | 
52 | ### 设置替代文本
53 | 
54 | 替代文本（alt text）用来在图片无法加载的时候显示，也被屏幕阅读器用来读出图片的内容，帮助视力障碍者理解图片。我们通过 `<img>` 标签的 `alt` 属性来设置替代文本。
55 | 
56 | 例如：
57 | 
58 | ```html
59 | <img src="https://www.example.com/path/to/image.jpg" alt="A description of the image">
60 | ```
61 | 
62 | 浏览器效果：
63 | 
64 | <img src="https://www.example.com/path/to/image.jpg" alt="A description of the image">
65 | 
66 | 
67 | 如果图片无法加载，那么页面上将显示 "A description of the image"。
68 | 
69 | 
70 | ### 图片链接
71 | 
72 | 图片也可以被用作超链接。我们只需要把 `<img>` 标签放在 `<a>` 标签内部，就可以创建一个图片链接。
73 | 
74 | ```html
75 | <a href="https://wtf.academy/">
76 |   <img src="https://wtf.academy/img/wtflogo.png" alt="WTFAcademy logo" />
77 | </a>
78 | ```
79 | 
80 | 浏览器效果：
81 | 
82 | <a href="https://wtf.academy/">
83 |   <img src="https://wtf.academy/img/wtflogo.png" alt="WTFAcademy logo" />
84 | </a>
85 | 
86 | ## 总结
87 | 
88 | 在这一章节中，我们介绍了如何在 HTML 中插入图片，以及如何设置图片的属性，包括大小和替代文本。我们还讲解了如何创建图片链接。通过学习这些内容，你已经可以在你的网页中自由地使用图片了。


--------------------------------------------------------------------------------
/08_SemanticElements/img/8-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/08_SemanticElements/img/8-1.png


--------------------------------------------------------------------------------
/08_SemanticElements/img/8-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/08_SemanticElements/img/8-2.png


--------------------------------------------------------------------------------
/08_SemanticElements/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML极简教程: 8. 语义元素
 2 | 
 3 | WTF HTML教程，帮助新人快速入门HTML。
 4 | 
 5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
 6 | 
 7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | 语义化的 HTML 是指通过使用恰当的标签来传达内容的含义和结构，这样可以使得你的代码更易读易懂，同时也有助于搜索引擎优化 (SEO)。在 HTML5 中，引入了一系列新的语义标签，这些标签可以更清晰地描述你的内容和页面结构。在这一章节中，我们会介绍一些常见的语义标签。
14 | 
15 | ## 常见的语义元素：
16 | 
17 | ### 文本类：
18 | 
19 | 一个页面结构通常包含：页眉、页脚、标题、导航、内容、侧边栏等等。
20 | 
21 | 我们可以这样来编写页面，如下图所示。
22 | 
23 | ![非语言化布局图](./img/8-1.png)
24 | 
25 | 如上图所示，只需要使用 `<div>` 元素就可以完成一个页面的布局。甚至文本内容，例如标题、段落等等，也可以使用 `<div>` 来编写。
26 | 
27 | 但是这样会产生两个很明显问题：
28 | 1. 不利于开发人员编写代码，当你面对满屏幕的 `<div>` 元素时，你很难快速分清楚他们所代表的含义。
29 | 2. 不利于搜索引擎优化（SEO），浏览器只知道你用了 `<div>` 元素，而 `div` 元素本身不具有任何含义，它只是一个容器。
30 | 
31 | 这时候我们可以通过使用语义元素来解决这两个问题，如下图所示。
32 | 
33 | ![语言化布局图](./img/8-2.png)
34 | 
35 | 我们分别使用了 `<header>`  `<nav>`  `<main>`  `<aside>`  `<footer>` 来分别表示页面中不同的区域。
36 | 
37 | 使用这些标签让页面具有良好的语义和结构，从而方便开发人员和浏览器都能快速理解网页内容。
38 | 
39 | 这并不表示你不可以使用 `<div>` 元素 来编写页面，只是我们可以在页面特定的内容上，可以使用一些语义元素来替代 `<div>` 元素。这就是开头所说的让正确的元素做正确的事情。
40 | 
41 | 下面我们来简单介绍一下这些标签。
42 | 
43 | - `<header>` 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
44 | 
45 | - `<nav>` 表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
46 | 
47 | - `<main>` 呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
48 | 
49 | - `<aside>` 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
50 | 
51 | - `<footer>` 通常用来表示页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
52 | 
53 | - `<address>` 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
54 | 
55 | - `<article>` 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。​​
56 | 
57 | - `<section>` 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
58 | 
59 | 例如：
60 | 
61 | ```html
62 | <header>
63 |   <h1>Site Name</h1>
64 |   <nav>
65 |     <ul>
66 |       <li><a href="/">Home</a></li>
67 |       <li><a href="/about">About</a></li>
68 |       <li><a href="/contact">Contact</a></li>
69 |     </ul>
70 |   </nav>
71 | </header>
72 | 
73 | <main>
74 |   <article>
75 |     <h2>Blog Post Title</h2>
76 |     <p>Blog post content...</p>
77 |   </article>
78 | 
79 |   <aside>
80 |     <h3>About the author</h3>
81 |     <p>Author information...</p>
82 |   </aside>
83 | </main>
84 | 
85 | <footer>
86 |   <p>&copy; 2023 Site Name</p>
87 | </footer>
88 | ```
89 | 
90 | ## 为什么需要语义元素？
91 | 1. 更便于开发。如上所述，你所编写的 HTML 代码更易于理解，可读性更高。
92 | 2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
93 | 3. 更便于 SEO 优化。比起使用非语义化的 `<div>` 标签，使用语义化可使网页更容易被用户搜索到。
94 | 
95 | 
96 | ## 总结
97 | 
98 | 在这一章节中，我们介绍了语义化的 HTML 以及一些常见的语义标签。通过使用语义标签，你可以创建出更具可读性、易于维护，并且对搜索引擎友好的代码。


--------------------------------------------------------------------------------
/09_HTML5/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 9. HTML5新特性
  2 | 
  3 | WTF HTML 教程，帮助新人快速入门 HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | HTML5 是 HTML 的最新版本，它引入了许多新的标签、属性和功能，大大增强了 web 的功能和互动性。在这一章节中，我们将介绍一些 HTML5 的新特性，包括新的标签和属性，以及新的表单类型和属性。
 14 | 
 15 | ## 新的标签和属性
 16 | 
 17 | HTML5 引入了一系列新的标签和属性，以提供更丰富的内容展示和更强大的功能。
 18 | 
 19 | ### `<video>` 和 `<audio>`
 20 | 
 21 | `<video>` 和 `<audio>` 标签使得在网页上嵌入视频和音频变得更加简单。你可以使用 `<source>` 标签指定多个音频或视频源，浏览器将会选择第一个它支持的源。
 22 | 
 23 | 以下是一个 `<video>` 标签的示例：
 24 | 
 25 | ```html
 26 | <video controls width="500">
 27 |   <source src="movie.mp4" type="video/mp4">
 28 |   <source src="movie.ogg" type="video/ogg">
 29 |   Your browser does not support the video tag.
 30 | </video>
 31 | ```
 32 | 浏览器效果：
 33 | 
 34 | <video controls width="500">
 35 |   <source src="movie.mp4" type="video/mp4">
 36 |   <source src="movie.ogg" type="video/ogg">
 37 |   Your browser does not support the video tag.
 38 | </video>
 39 | 
 40 | 
 41 | 以下是一个 `<audio>` 标签的示例：
 42 | 
 43 | ```html
 44 | <audio controls>
 45 |   <source src="audio.mp3" type="audio/mpeg">
 46 |   <source src="audio.ogg" type="audio/ogg">
 47 |   Your browser does not support the audio tag.
 48 | </audio>
 49 | ```
 50 | 
 51 | 浏览器效果：
 52 | 
 53 | <audio controls>
 54 |   <source src="audio.mp3" type="audio/mpeg">
 55 |   <source src="audio.ogg" type="audio/ogg">
 56 |   Your browser does not support the audio tag.
 57 | </audio>
 58 | 
 59 | 
 60 | ### `<canvas>`
 61 | 
 62 | `<canvas>` 标签用于在网页上绘制图形，它为图像提供了一个可编程的环境。与 `<img>` 标签不同，`<canvas>` 允许你通过 JavaScript 动态生成图像。
 63 | 
 64 | 以下是一个使用 `<canvas>` 绘制矩形的示例：
 65 | 
 66 | ```html
 67 | <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
 68 | Your browser does not support the HTML5 canvas tag.
 69 | </canvas>
 70 | 
 71 | <script>
 72 | var canvas = document.getElementById("myCanvas");
 73 | var ctx = canvas.getContext("2d");
 74 | ctx.fillStyle = "#000000";
 75 | ctx.fillRect(0, 0, 80, 80);
 76 | </script>
 77 | ```
 78 | 
 79 | ## 新的表单类型和属性
 80 | 
 81 | HTML5 引入了一些新的输入类型和属性，以增强表单的功能和易用性。
 82 | 
 83 | ### 新的输入类型
 84 | 
 85 | HTML5 提供了一些新的输入类型，如 `email`、`number`、`date` 等。这些新的输入类型可以提供更好的输入控制和验证。
 86 | 
 87 | 以下是一些新的输入类型的示例：
 88 | 
 89 | ```html
 90 | <form>
 91 |   <label for="email">Email:</label>
 92 |   <input type="email" id="email" name="email">
 93 | 
 94 |   <label for="quantity">Quantity (between 1 and 5):</label>
 95 |   <input type="number" id="quantity" name="quantity" min="1" max="5">
 96 | 
 97 |   <label for="birthday">Birthday:</label>
 98 |   <input type="date" id="birthday" name="birthday">
 99 | </form>
100 | ```
101 | 
102 | 浏览器效果：
103 | <form>
104 |   <label for="email">Email:</label>
105 |   <input type="email" id="email" name="email">
106 | 
107 |   <label for="quantity">Quantity (between 1 and 5):</label>
108 |   <input type="number" id="quantity" name="quantity" min="1" max="5">
109 | 
110 |   <label for="birthday">Birthday:</label>
111 |   <input type="date" id="birthday" name="birthday">
112 | </form>
113 | 
114 | 
115 | ### 新的输入属性
116 | 
117 | HTML5 还引入了一些新的输入属性，如 `placeholder`、`required` 等。
118 | 
119 | `placeholder` 属性可以为输入字段提供一个提示，而 `required` 属性可以使输入字段变得必需。
120 | 
121 | 以下是一些新的输入属性的示例：
122 | 
123 | ```html
124 | <form>
125 |   <label for="fname">First name:</label>
126 |   <input type="text" id="fname" name="fname" placeholder="Your first name" required>
127 | 
128 |   <label for="lname">Last name:</label>
129 |   <input type="text" id="lname" name="lname" placeholder="Your last name">
130 | </form>
131 | ```
132 | 
133 | 浏览器效果：
134 | 
135 | <form>
136 |   <label for="fname">First name:</label>
137 |   <input type="text" id="fname" name="fname" placeholder="Your first name" required>
138 | 
139 |   <label for="lname">Last name:</label>
140 |   <input type="text" id="lname" name="lname" placeholder="Your last name">
141 | </form>
142 | 
143 | 
144 | ## 总结
145 | 
146 | 在这一章节中，我们介绍了一些 HTML5 的新特性，包括新的标签和属性，以及新的表单类型和属性。通过学习和使用这些新特性，你可以创建出更丰富、更强大的 web 页面。


--------------------------------------------------------------------------------
/10_Responsive/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML极简教程: 10. 响应式设计和移动HTML
 2 | 
 3 | WTF HTML 教程，帮助新人快速入门 HTML。
 4 | 
 5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | 所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | 响应式设计是一种让网站设计能够对不同设备和屏幕大小进行优化的方法，使得网站在任何设备上都能提供良好的用户体验。这种设计方法的核心包括视图窗口(viewport)，设备独立像素，媒体查询，以及对图片和表格的响应式设计。
14 | 
15 | ## 视图窗口(viewport)和设备独立像素
16 | 
17 | 视图窗口是用户在浏览器中可以看到的网页的区域。在移动设备上，视图窗口的宽度通常等于设备的物理屏幕宽度。
18 | 
19 | 为了在所有设备上创建统一的布局，我们需要使用设备独立像素。设备独立像素是一个虚拟像素单位，用于在不同的设备上提供一致的布局，而不是依赖于设备的实际物理像素。
20 | 
21 | 在HTML中，可以使用`<meta>`标签设置视图窗口的宽度和初始缩放级别：
22 | 
23 | ```html
24 | <meta name="viewport" content="width=device-width, initial-scale=1">
25 | ```
26 | 
27 | ## 媒体查询
28 | 
29 | 媒体查询是CSS3的一部分，它允许内容对不同的设备或视窗条件进行响应。例如，你可以使用媒体查询在小屏幕和大屏幕设备上应用不同的样式：
30 | 
31 | ```css
32 | /* 在宽度小于 600px 的设备上应用的样式 */
33 | @media only screen and (max-width: 600px) {
34 |   body {
35 |     background-color: lightblue;
36 |   }
37 | }
38 | ```
39 | 
40 | ## 图片和表格的响应式设计
41 | 
42 | 对于图片，可以使用 CSS 的 `max-width` 属性来确保图片不会超过其容器的宽度：
43 | 
44 | ```css
45 | img {
46 |   max-width: 100%;
47 |   height: auto;
48 | }
49 | ```
50 | 
51 | 对于表格，响应式设计的方法各异，一种常见的方法是在小屏幕设备上将表格转换为一个键值对列表：
52 | 
53 | ```css
54 | @media only screen and (max-width: 600px) {
55 |   td:before {
56 |     content: attr(data-label);
57 |     float: left;
58 |     text-transform: uppercase;
59 |     font-weight: bold;
60 |   }
61 | }
62 | ```
63 | 
64 | 在上述 CSS 中，`attr(data-label)` 会把每个 `td` 元素前面的内容替换为它的 `data-label` 属性的值。
65 | 
66 | ## 总结
67 | 
68 | 响应式设计和移动HTML是现代web开发的重要组成部分。通过理解和运用视图窗口，设备独立像素，媒体查询，以及对图片和表格的响应式设计，你可以创建在任何设备和屏幕大小上都能提供优良用户体验的网站。


--------------------------------------------------------------------------------
/11_JavaScript/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML极简教程: 11. HTML和JavaScript
 2 | 
 3 | WTF HTML 教程，帮助新人快速入门 HTML。
 4 | 
 5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | 所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | JavaScript 是一种轻量级的编程语言，经常与 HTML 和 CSS 一起使用，用于创建交互式的网站。在本章，我们将介绍如何使用 `<script>` 标签在 HTML 中插入 JavaScript，HTML DOM模型，以及如何使用 JavaScript 操作 HTML 元素。
14 | 
15 | ## 使用 `<script>` 标签插入 JavaScript
16 | 
17 | 在 HTML 中，我们可以使用 `<script>` 标签插入 JavaScript 代码。`<script>` 标签可以放在 HTML 文档的 `<head>` 或 `<body>` 部分。通常，为了避免阻塞页面的渲染，我们会将 `<script>` 标签放在 `<body>` 标签的末尾。
18 | 
19 | 下面是一个简单的示例：
20 | 
21 | ```html
22 | <!DOCTYPE html>
23 | <html>
24 | <body>
25 | 
26 | <h2 id="demo">HTML 和 JavaScript 示例</h2>
27 | 
28 | <button onclick="displayDate()">显示日期</button>
29 | 
30 | <script>
31 | function displayDate() {
32 |   document.getElementById("demo").innerHTML = Date();
33 | }
34 | </script>
35 | 
36 | </body>
37 | </html>
38 | ```
39 | 
40 | 在这个示例中，当用户点击按钮时，JavaScript 函数 `displayDate()` 会被执行，显示当前的日期和时间。
41 | 
42 | ## HTML DOM模型
43 | 
44 | DOM (Document Object Model) 是一个跨平台和语言独立的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。
45 | 
46 | HTML DOM 是一个标准对象模型和编程接口。它将 HTML 文档转化为一个树形结构，其中每个节点都是一个对象，代表了 HTML 文档的一部分。
47 | 
48 | ## 使用JavaScript操作HTML元素
49 | 
50 | JavaScript 可以通过 HTML DOM 来访问和更改 HTML 元素。下面是一些常用的 DOM 方法：
51 | 
52 | - `document.getElementById(id)`：返回对拥有指定 id 的第一个对象的引用。
53 | - `document.getElementsByClassName(name)`：返回一个包含所有带有指定类名的元素的 NodeList。
54 | - `document.getElementsByTagName(name)`：返回一个包含所有带有指定标签名的元素的 NodeList。
55 | - `document.querySelector(cssQuery)`：返回文档中匹配指定 CSS 选择器的第一个元素。
56 | - `document.querySelectorAll(cssQuery)`：返回文档中匹配指定 CSS 选择器的所有元素的 NodeList。
57 | 
58 | 这些方法可以用来获取 HTML 元素，然后可以使用 DOM 属性和方法修改这些元素，比如改变元素的文本内容、属性值或样式。
59 | 
60 | 例如，下面的 JavaScript 代码使用 `getElementById` 方法获取了一个元素，并修改了该元素的文本内容：
61 | 
62 | ```html
63 | <!DOCTYPE html>
64 | <html>
65 | <body>
66 | 
67 | <h1 id="myHeading">Hello World!</h1>
68 | 
69 | <button onclick="changeText()">点击改变文本</button>
70 | 
71 | <script>
72 | function changeText() {
73 |   var heading = document.getElementById("myHeading");
74 |   heading.innerHTML = "Hello WTF!";
75 | }
76 | </script>
77 | 
78 | </body>
79 | </html>
80 | ```
81 | 
82 | 当用户点击按钮时，页面上的标题会从 "Hello World!" 变为 "Hello WTF!"。
83 | 
84 | ## 总结
85 | 
86 | HTML和JavaScript是紧密配合的两个技术，JavaScript提供了操作HTML元素的能力，而HTML DOM模型则为我们提供了一种标准的方式来表示和操作HTML文档。掌握这两个技术，可以帮助你创建更加动态和交互式的网站。
87 | 


--------------------------------------------------------------------------------
/12_CSS/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 12. HTML和CSS
  2 | 
  3 | 
  4 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_) ｜ [@0xAA_Science](https://twitter.com/0xAA_Science)
  5 | 
  6 | **WTF Academy 社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity 教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  7 | 
  8 | 所有代码和教程开源在 github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
  9 | 
 10 | ---
 11 | 
 12 | CSS (Cascading Style Sheets) 是一种样式表语言，用于描述 HTML 或 XML 文档的外观和格式。在本章中，我们将介绍如何在 HTML 中使用 `<style>` 和 `<link>` 插入 CSS，了解 CSS 的选择器和特性，以及如何使用 CSS 布局 HTML 元素。
 13 | 
 14 | ## 使用 `<style>` 和 `<link>` 插入 CSS
 15 | 
 16 | 在 HTML 中，我们可以使用 `<style>` 和 `<link>` 标签来插入 CSS。使用 `<style>` 标签，可以在 HTML 文档内部书写 CSS 代码，而 `<link>` 标签则用于链接到外部的 CSS 文件。
 17 | 
 18 | 这是一个 `<style>` 标签的例子：
 19 | 
 20 | ```html
 21 | <!DOCTYPE html>
 22 | <html>
 23 | <head>
 24 |   <style>
 25 |     body {
 26 |       background-color: lightblue;
 27 |     }
 28 |     h1 {
 29 |       color: white;
 30 |       text-align: center;
 31 |     }
 32 |   </style>
 33 | </head>
 34 | <body>
 35 | 
 36 | <h1>使用style标签插入CSS</h1>
 37 | 
 38 | </body>
 39 | </html>
 40 | ```
 41 | 
 42 | 这是一个 `<link>` 标签的例子：
 43 | 
 44 | ```html
 45 | <!DOCTYPE html>
 46 | <html>
 47 | <head>
 48 |   <link rel="stylesheet" href="styles.css">
 49 | </head>
 50 | <body>
 51 | 
 52 | <h1>使用link标签链接到外部CSS文件</h1>
 53 | 
 54 | </body>
 55 | </html>
 56 | ```
 57 | 
 58 | 在这个例子中，"styles.css" 是外部 CSS 文件的路径。
 59 | 
 60 | ## CSS选择器和特性
 61 | 
 62 | CSS 选择器是用于选择想要给样式的 HTML 元素。最常见的选择器有元素选择器、类选择器、ID选择器、属性选择器等。
 63 | 
 64 | CSS 属性定义了元素的样式。每个 CSS 声明总是包含一个属性和一个值，属性和值之间用冒号 `:` 分隔。
 65 | 
 66 | 这是一个 CSS 选择器和属性的例子：
 67 | 
 68 | ```css
 69 | body {
 70 |   background-color: lightblue;
 71 | }
 72 | h1 {
 73 |   color: white;
 74 |   text-align: center;
 75 | }
 76 | ```
 77 | 
 78 | 在这个例子中，"body" 和 "h1" 是选择器，"background-color", "color" 和 "text-align" 是属性，"lightblue", "white" 和 "center" 是属性的值。
 79 | 
 80 | ## 使用CSS布局HTML元素
 81 | 
 82 | CSS 提供了多种布局方式，包括流式布局、定位布局、flex布局、网格布局等。在这里，我们简单介绍一下流式布局和定位布局。
 83 | 
 84 | 流式布局是 CSS 的基础布局方式，所有的元素默认都在一个流的状态中，从上至下，从左至右，像水一样流动。元素的宽度和高度可以通过 CSS 的 "width" 和 "height" 属性来设置。
 85 | 
 86 | 定位布局使用 CSS 的 "position" 属性，它可以将元素定位到相对或绝对的位置。"position" 属性的值可以是 "static"、"relative"、"absolute" 或 "fixed"。
 87 | 
 88 | 以下是一个使用定位布局的例子：
 89 | 
 90 | ```html
 91 | <!DOCTYPE html>
 92 | <html>
 93 | <style>
 94 | div.relative {
 95 |   position: relative;
 96 |   width
 97 | 
 98 | : 400px;
 99 |   height: 200px;
100 |   border: 3px solid #73AD21;
101 | } 
102 | 
103 | div.absolute {
104 |   position: absolute;
105 |   top: 80px;
106 |   right: 0;
107 |   width: 200px;
108 |   height: 100px;
109 |   border: 3px solid #73AD21;
110 | }
111 | </style>
112 | <body>
113 | 
114 | <h2>使用CSS布局HTML元素</h2>
115 | 
116 | <div class="relative">
117 |   <div class="absolute">This div element has position: absolute;</div>
118 | </div>
119 | 
120 | </body>
121 | </html> 
122 | ```
123 | 
124 | 在这个例子中，内部的 div 元素是相对于外部 div 元素进行定位的。
125 | 
126 | ## 总结
127 | 
128 | HTML 和 CSS 是网页开发的基石。通过学习本章内容，你应该已经了解了如何在 HTML 中插入 CSS，以及如何使用 CSS 选择器、特性和布局技术。掌握这些知识，将有助于你创建更具样式和布局的网页。


--------------------------------------------------------------------------------
/13_UniswapHTML/Uniswap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="icon" href="./img/icon.png">
 5 |     <title>Uniswap Interface</title>
 6 | </head>
 7 | <body>
 8 |     <div class="header">
 9 |         <img src="./img/icon.png" width="25"  alt="icon">
10 |         <div class="switchPage">
11 |             <a>兑换</a>
12 |             <a>流动池</a>
13 |             <a>投票</a>
14 |             <a>图标</a>
15 |         </div>
16 |         <div class="right">
17 |             <span class="changeNetwork">
18 |                 <img src="./img/ethereum.png" width="25" alt="eth">
19 |                 <span>Ethereum</span>
20 |             </span>
21 |             <button>连接钱包</button>
22 |             <button>···</button>
23 |         </div>
24 |     </div>
25 |     <div class="body">
26 |         <div class="swap-page">
27 |             <div class="swap-page-header">
28 |                 <span>兑换</span>
29 |                 <button>
30 |                     <img src="./img/setup.png" width="25"  alt="setup">
31 |                 </button>
32 |             </div>
33 |             <div class="swap-page-body">
34 |                 <div class="token1">
35 |                     <input type="text" inputmode="decimal" placeholder="0.0">
36 |                     <button>
37 |                         <div class="token-info">
38 |                             <img src="./img/ethereum.png" width="25" alt="eth">
39 |                             <span>ETH</span>
40 |                         </div>
41 |                     </button>
42 |                 </div>
43 |                 <button>
44 |                     <img src="./img/arrow.png" width="25" alt="arrow">
45 |                 </button>
46 |                 <div class="token2">
47 |                     <input type="text" inputmode="decimal" placeholder="0.0">
48 |                     <button>
49 |                         <div class="token-info">
50 |                             <span>选择令牌</span>
51 |                         </div>
52 |                     </button>
53 |                 </div>
54 |             </div>
55 |             <div class="swap-page-footer">
56 |                 <button>连接钱包</button>
57 |             </div>
58 |         </div>
59 |         <div class="chooseLanguage">
60 |             <span>Uniswap可用：</span>
61 |             <a href="">English</a>
62 |         </div>
63 |         <div class="gasPriceAndBlockNumber">
64 |             <a href="https://etherscan.io/gastracker"> 3 gwei</a>
65 |             <a href="">15687194</a>
66 |         </div>
67 |     </div>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/13_UniswapHTML/img/9-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/9-1.jpg


--------------------------------------------------------------------------------
/13_UniswapHTML/img/9-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/9-2.jpg


--------------------------------------------------------------------------------
/13_UniswapHTML/img/9-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/9-3.jpg


--------------------------------------------------------------------------------
/13_UniswapHTML/img/9-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/9-4.jpg


--------------------------------------------------------------------------------
/13_UniswapHTML/img/9-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/9-5.jpg


--------------------------------------------------------------------------------
/13_UniswapHTML/img/9-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/9-6.png


--------------------------------------------------------------------------------
/13_UniswapHTML/img/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/arrow.png


--------------------------------------------------------------------------------
/13_UniswapHTML/img/ethereum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/ethereum.png


--------------------------------------------------------------------------------
/13_UniswapHTML/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/icon.png


--------------------------------------------------------------------------------
/13_UniswapHTML/img/setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/13_UniswapHTML/img/setup.png


--------------------------------------------------------------------------------
/13_UniswapHTML/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 13. Uniswap页面
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 这一讲，我们将对前 8 讲的知识进行组合应用，并编写去中心化交易所 [Uniswap](https://app.uniswap.org) 的极简HTML页面
 14 | 
 15 | >Uniswap前端页面是用React编写的，在此我们降低难度用HTML编写。
 16 | 
 17 | 
 18 | ## 分析页面结构
 19 | 
 20 | HTML文件决定了页面的结构，因此当我们拿到一个页面后，在编写前首先要分析它的结构。
 21 | 
 22 | ![原图](./img/9-1.jpg)
 23 | 
 24 | 我们可以将Uniswap的页面拆分成如下结构（相同颜色的框为同一级）：
 25 | 
 26 | ![结构](./img/9-2.jpg)
 27 | 
 28 | 然后我们就可以画出该页面的结构树：
 29 | 
 30 | ![结构树](./img/9-3.jpg)
 31 | 
 32 | 得到结构树后页面的结构就十分清晰了，下面我们就开始编写代码。
 33 | 
 34 | ## 编写代码
 35 | 
 36 | ### `<head>`
 37 | 
 38 | 在 `<head>` 中我们可以设置页面的 `title` 和图标。
 39 | 
 40 | ```html
 41 | <link rel="icon" href="./img/icon.png">
 42 | <title>Uniswap Interface</title>
 43 | ```
 44 | 
 45 | ### 头部结构
 46 | 
 47 | 首先我们处理头部的结构，头部里包含三个子元素。左边只有一个icon，中间是切换页面的超链接，四个超链接用一个`div`包裹，右边有网络、连接钱包按钮和菜单按钮，这三个元素也用一个`div`包裹。网络里面包含了ETH的`img`和`span`。
 48 | 
 49 | ```html
 50 | <header>
 51 |     <img src="./img/icon.png" alt="icon">
 52 |     <div class="switchPage">
 53 |         <a>兑换</a>
 54 |         <a>流动池</a>
 55 |         <a>投票</a>
 56 |         <a>图标</a>
 57 |     </div>
 58 |     <div class="right">
 59 |         <span class="changeNetwork">
 60 |             <img src="./img/ethereum.png" alt="eth">
 61 |             <span>Ethereum</span>
 62 |         </span>
 63 |         <button>连接钱包</button>
 64 |         <button>···</button>
 65 |     </div>
 66 | </header>
 67 | ```
 68 | 
 69 | > Tips: 在复杂页面中，我们可以用 HTML `class` 属性来指定元素的类，之后 `CSS` 和 `JavaScript` 可以通过它来访问和操作具有特定类名的元素。
 70 | 
 71 | 页面效果如下：
 72 | 
 73 | ![效果](./img/9-4.jpg)
 74 | 
 75 | ### 中间结构
 76 | 
 77 | 然后是中间部分，中间部分也包含三个直接相邻的子元素，分别是交换 token 的页面、选择语言和右下角的 gasFee 和 blockNumber 。
 78 | 
 79 | 兑换 token 的页面比较复杂，它里面还有设置、选择token、连接钱包三个部分。
 80 | 
 81 | 设置里面包含了一个内容为 `兑换` 的 `span` 和一个用于改变设置的`button`，`button`中包含一个`img`。
 82 | 
 83 | ```html
 84 | <div class="swap-page-header">
 85 |     <span>兑换</span>
 86 |     <button>
 87 |         <img src="./img/setup.png" alt="setup">
 88 |     </button>
 89 | </div>
 90 | ```
 91 | 选择token这部分上下代码是差不多的，我们只需要分析一半即可。
 92 | 
 93 | 上半部分包含了一个`input`和一个`button`，`button`里面包含了ETH的`img`和`span`,这两个元素可以用一个`div`包裹起来，`class`设置为`token-info`。
 94 | 
 95 | ```html
 96 | <div class="token1">
 97 |     <input type="text" inputmode="decimal" placeholder="0.0">
 98 |     <button>
 99 |         <div class="token-info">
100 |             <img src="./img/ethereum.png" alt="eth">
101 |             <span>ETH</span>
102 |         </div>
103 |     </button>
104 | </div>
105 | ```
106 | 
107 | 最下面连接钱包的结构比较简单，里面只有一个`button`。
108 | 
109 | ```html
110 | <div class="swap-page-footer">
111 |     <button>连接钱包</button>
112 | </div>
113 | ```
114 | 
115 | 选择语言部分包含了一个`span`和一个超链接，用于改变页面的语言，超链接的`href`需要填写一个英文版的Uniswap网页链接，在此我们就不填。
116 | 
117 | ```html
118 | <div class="chooseLanguage">
119 |     <span>Uniswap可用：</span>
120 |     <a href="">English</a>
121 | </div>
122 | ```
123 | 
124 | gasFee和blockNumber部分包含了两个超链接，用于跳转到相应的 etherscan 页面。第二个超链接的`href`是由 JavaScript 动态调整的，在此我们就不填。同时两个超链接中的内容也是由 JavaScript 动态输入的，在此我们暂时先填入固定的数值。
125 | 
126 | ```html
127 | <div class="gasPriceAndBlockNumber">
128 |     <a href="https://etherscan.io/gastracker">3 gwei</a>
129 |     <a href="">15687194</a>
130 | </div>
131 | ```
132 | 
133 | 到此Uniswap的极简HTML页面代码就写完了，我们可以在页面中打开查看效果。
134 | 
135 | ![效果](./img/9-5.jpg)
136 | 
137 | 可以看到，我们的页面是非常丑陋的，同时基本上没有任何功能，这需要我们后期再给它加上 CSS 和 JavaScript。
138 | 
139 | ## 习题
140 | 
141 | 修改 HTML 代码，将极简 Uniswap 页面改为 [SushiSwap](https://www.sushi.com/swap) 页面。
142 | 
143 | ![](./img/9-6.png)
144 | 
145 | ## 总结
146 | 
147 | 这一讲我们用前8讲所学的 HTML 知识编写出了一个 Uniswap 的极简 HTML 页面。我们将在之后的 `WTF-CSS` 和 `WTF-JavaScript` 中继续完善它。
148 | 


--------------------------------------------------------------------------------
/14_BAYCHTML/BAYC.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <link rel="icon" href="./img/icon.png">
 7 |     <title>BAYC</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="header">
12 |         <img src="./img/bayc-logo.webp" alt="bayc-logo">
13 |         <div class="socialMedia">
14 |             <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
15 |                 <img src="./img/youtube.png" alt="youtube">
16 |             </a>
17 |             <a href="https://boredapeyachtclub.com/#/">
18 |                 <img src="./img/instagram.png" alt="instagram">
19 |             </a>
20 |             <a href="https://discord.com/invite/3P5K3dzgdB">
21 |                 <img src="./img/discord.png" alt="discord">
22 |             </a>
23 |             <a href="https://twitter.com/BoredApeYC">
24 |                 <img src="./img//twitter.png" alt="twitter">
25 |             </a>
26 |         </div>
27 |     </div>
28 |     <div class="body">
29 |         <div class="welcome">
30 |             <video autoplay loop>
31 |                 <source src="https://ik.imagekit.io/bayc/assets/club-landing.mp4" type="video/mp4">
32 |             </video>
33 |             <div class="mint">
34 |                 <h1>
35 |                     WELCOME TO <br />THE BORED APE<br /> YACHT CLUB
36 |                 </h1>
37 |                 <button>Mint</button>
38 |             </div>
39 |         </div>
40 |         <div class="description">A limited NFT collection where the token itself doubles as your membership to a
41 |             swamp club for apes. The club is open! Ape in with us.
42 |         </div>
43 |     </div>
44 |     <div class="footer">
45 |         <div class="line"></div>
46 |         <div class="info">
47 |             <div class="email">
48 |                 <div class="get-on-the-list">GET ON THE LIST</div>
49 |                 <div class="getEmail">
50 |                     <input type="email" placeholder="Email Address" required value>
51 |                     <button type="submit">➡</button>
52 |                 </div>
53 |             </div>
54 |             <img src="./img/bayc-footer.webp" alt="bayc-footer">
55 |             <div class="others">
56 |                 <div>
57 |                     <div class="socialMedia">
58 |                         <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
59 |                             <img src="./img/youtube.png" alt="youtube">
60 |                         </a>
61 |                         <a href="https://boredapeyachtclub.com/#/">
62 |                             <img src="./img/instagram.png" alt="instagram">
63 |                         </a>
64 |                         <a href="https://discord.com/invite/3P5K3dzgdB">
65 |                             <img src="./img/discord.png" alt="discord">
66 |                         </a>
67 |                         <a href="https://twitter.com/BoredApeYC">
68 |                             <img src="./img//twitter.png" alt="twitter">
69 |                         </a>
70 |                     </div>
71 |                 </div>
72 |                 <div>
73 |                     <div class="copyright">
74 |                         © 2021 Yuga Labs LLC
75 |                     </div>
76 |                 </div>
77 |                 <div>
78 |                     <a href="https://boredapeyachtclub.com/#/terms">BAYC Terms & Conditions</a>
79 |                 </div>
80 |                 <div>
81 |                     <a href="https://boredapeyachtclub.com/#/mayc/terms">MAYC Terms & Conditions</a>
82 |                 </div>
83 |             </div>
84 |         </div>
85 |     </div>
86 | </body>
87 | 
88 | </html>


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-1.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-10.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-11.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-2.jpg


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-3.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-4.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-5.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/10-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/10-6.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/bayc-footer.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/bayc-footer.webp


--------------------------------------------------------------------------------
/14_BAYCHTML/img/bayc-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/bayc-logo.webp


--------------------------------------------------------------------------------
/14_BAYCHTML/img/discord.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/discord.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/icon.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/instagram.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/twitter.png


--------------------------------------------------------------------------------
/14_BAYCHTML/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/14_BAYCHTML/img/youtube.png


--------------------------------------------------------------------------------
/14_BAYCHTML/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML极简教程: 14. BAYC官网
  2 | 
  3 | WTF HTML教程，帮助新人快速入门HTML。
  4 | 
  5 | **推特**：[@WTFAcademy_](https://twitter.com/WTFAcademy_)  ｜ [@0xAA_Science](https://twitter.com/0xAA_Science) 
  6 | 
  7 | **WTF Academy社群：** [官网 wtf.academy](https://wtf.academy) | [WTF Solidity教程](https://github.com/AmazingAng/WTFSolidity) | [discord](https://discord.gg/5akcruXrsk) | [微信群申请](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | 所有代码和教程开源在github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | 这一讲，我们将编写一个 [BAYC官网](https://boredapeyachtclub.com/) 的极简HTML页面
 14 | 
 15 | >BAYC官网也是用React编写的，在此我们降低难度用HTML编写。
 16 | 
 17 | ## 分析页面结构
 18 | 
 19 | HTML文件决定了页面的结构，因此当我们拿到一个页面后，在编写前首先要分析它的结构。
 20 | 
 21 | ![原图](./img/10-1.png)
 22 | 
 23 | 我们可以将Uniswap的页面拆分成如下结构（相同颜色的框为同一级）：
 24 | 
 25 | ![结构](./img/10-2.jpg)
 26 | 
 27 | 然后我们就可以画出该页面的结构树：
 28 | 
 29 | ![结构树](./img/10-3.png)
 30 | 
 31 | 得到结构树后页面的结构就十分清晰了，下面我们就开始编写代码。
 32 | 
 33 | ## 编写代码
 34 | 
 35 | ### `<head>`
 36 | 
 37 | 在 `<head>` 中我们可以设置页面的 `title` 和图标。
 38 | 
 39 | ```html
 40 |     <link rel="icon" href="./img/icon.png">
 41 |     <title>BAYC</title>
 42 | ```
 43 | ### 头部结构
 44 | 
 45 | ![头部](./img/10-4.png)
 46 | 
 47 | 首先我们处理头部结构，这部分包括一个bayc-logo和社交媒体，社交媒体全部包含在一个类名为`socialMedia`的`div`中，每个社交媒体的结构都为一个`a`嵌套一个`img`
 48 | 
 49 | ```html
 50 |     <div class="header">
 51 |         <img src="./img/bayc-logo.webp" alt="bayc-logo">
 52 |         <div class="socialMedia">
 53 |             <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
 54 |                 <img src="./img/youtube.png" alt="youtube">
 55 |             </a>
 56 |             <a href="https://boredapeyachtclub.com/#/">
 57 |                 <img src="./img/instagram.png" alt="instagram">
 58 |             </a>
 59 |             <a href="https://discord.com/invite/3P5K3dzgdB">
 60 |                 <img src="./img/discord.png" alt="discord">
 61 |             </a>
 62 |             <a href="https://twitter.com/BoredApeYC">
 63 |                 <img src="./img//twitter.png" alt="twitter">
 64 |             </a>
 65 |         </div>
 66 |     </div>
 67 | ```
 68 | 
 69 | ### 中间结构
 70 | 
 71 | ![中间](./img/10-5.png)
 72 | 
 73 | 然后是中间部分，中间部分包含了一个欢迎界面和一段自我描述。自我描述非常简单，用`div`或者`p`都可以；欢迎界面的背景是一个`video`，然后左下角是`mint`界面，包含了一条欢迎语和一个`button`，欢迎语用`div`、`p`、`h1`都可以
 74 | 
 75 | ```html
 76 |     <div class="body">
 77 |         <div class="welcome">
 78 |             <video autoplay loop>
 79 |                 <source src="https://ik.imagekit.io/bayc/assets/club-landing.mp4" type="video/mp4">
 80 |             </video>
 81 |             <div class="mint">
 82 |                 <h1>
 83 |                     WELCOME TO <br />THE BORED APE<br /> YACHT CLUB
 84 |                 </h1>
 85 |                 <button>Mint</button>
 86 |             </div>
 87 |         </div>
 88 |         <div class="description">A limited NFT collection where the token itself doubles as your membership to a
 89 |             swamp club for apes. The club is open! Ape in with us.
 90 |         </div>
 91 |     </div>
 92 | ```
 93 | 
 94 | ### 尾部结构
 95 | 
 96 | ![尾部](./img/10-6.png)
 97 | 
 98 | 尾部所占的空间比较少，但内容比较多，结构也比较复杂
 99 | 
100 | 首先可以粗略地分为上面一条分割线和剩余的类名为`info`的`div`
101 | 
102 | 分割线的代码写`<div class="line"></div>`即可，标签里面的内容留空，后面可以通过CSS把这条线画出来
103 | 
104 | `info`中可以分为三部分——左边的邮箱、中间的`img`和右边的其他信息
105 | 
106 | 邮箱部分分为上面的一个提示语`GET ON THE LIST`和下面的填写框，填写框里包含一个`input`和值为`➡`的`button`
107 | 
108 | 最后就是右边的其他信息，每一行用`div`编写即可。第一行也是社交媒体，结构与上面类似因此这里就不再赘述
109 | 
110 | ```html
111 |     <div class="footer">
112 |         <div class="line"></div>
113 |         <div class="info">
114 |             <div class="email">
115 |                 <div class="get-on-the-list">GET ON THE LIST</div>
116 |                 <div class="getEmail">
117 |                     <input type="email" placeholder="Email Address" required value>
118 |                     <button type="submit">➡</button>
119 |                 </div>
120 |             </div>
121 |             <img src="./img/bayc-footer.webp" alt="bayc-footer">
122 |             <div class="others">
123 |                 <div>
124 |                     <div class="socialMedia">
125 |                         <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
126 |                             <img src="./img/youtube.png" alt="youtube">
127 |                         </a>
128 |                         <a href="https://boredapeyachtclub.com/#/">
129 |                             <img src="./img/instagram.png" alt="instagram">
130 |                         </a>
131 |                         <a href="https://discord.com/invite/3P5K3dzgdB">
132 |                             <img src="./img/discord.png" alt="discord">
133 |                         </a>
134 |                         <a href="https://twitter.com/BoredApeYC">
135 |                             <img src="./img//twitter.png" alt="twitter">
136 |                         </a>
137 |                     </div>
138 |                 </div>
139 |                 <div>
140 |                     <div class="copyright">
141 |                         © 2021 Yuga Labs LLC
142 |                     </div>
143 |                 </div>
144 |                 <div>
145 |                     <a href="https://boredapeyachtclub.com/#/terms">BAYC Terms & Conditions</a>
146 |                 </div>
147 |                 <div>
148 |                     <a href="https://boredapeyachtclub.com/#/mayc/terms">MAYC Terms & Conditions</a>
149 |                 </div>
150 |             </div>
151 |         </div>
152 |     </div>
153 | ```
154 | 
155 | 到此BAYC的极简HTML页面代码就写完了，我们可以在页面中打开查看效果。
156 | 
157 | ![效果](./img/10-10.png)
158 | 
159 | 可以看到，我们的页面是非常丑陋的，同时基本上没有任何功能，这需要我们后期再给它加上 CSS 和 JavaScript。
160 | 
161 | ## 习题
162 | 
163 | 修改 HTML 代码，将极简 BAYC 页面改为 [doodles](https://doodles.app/) 页面。
164 | 
165 | ![](./img/10-11.png)
166 | 
167 | ## 总结
168 | 
169 | 这一讲我们用所学的 HTML 知识编写出了一个 BYAC 的极简 HTML 页面。我们将在之后的 `WTF-CSS` 和 `WTF-JavaScript` 中继续完善它。
170 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2022-2023 WTF Academy
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WTF-HTML
 2 | 
 3 | WTF HTML教程，，帮助新人快速入门HTML，并完成一个极简版[Uniswap页面](https://github.com/WTFAcademy/WTF-HTML/blob/main/09_UniswapHTML/readme.md)。
 4 | 
 5 | ---
 6 | 
 7 | ## 开发工具
 8 | 
 9 | 我们建议大家使用 [VSCode](https://code.visualstudio.com/download) 开发 HTML，并用浏览器（Chrome）打开`.html`文件进行浏览。
10 | 
11 | ## 入门
12 | 
13 | **第1讲：Hello HTML** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/01_HelloHTML)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/01_HelloHTML/readme.md)】
14 | 
15 | **第2讲：HTML元素** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/02_Element)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/02_Element/readme.md)】
16 | 
17 | **第3讲：常用文本标签** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/03_Text)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/03_Text/readme.md)】
18 | 
19 | **第4讲：列表和表格** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/04_List)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/04_List/readme.md)】
20 | 
21 | **第5讲：表单** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/05_Form)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/05_Form/readme.md)】
22 | 
23 | **第6讲：超链接** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/06_Hyperlink)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/06_Hyperlink/readme.md)】
24 | 
25 | **第7讲：图片** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/07_Img)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/07_Img/readme.md)】
26 | 
27 | **第8讲：语义元素** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/08_SemanticElements)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/08_SemanticElements/readme.md)】
28 | 
29 | **第9讲：HTML5** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/09_HTML5)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/09_HTML5/readme.md)】
30 | 
31 | **第10讲：响应式设计** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/10_Responsive)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/10_Responsive/readme.md)】
32 | 
33 | **第11讲：HTML与JavaScript** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/11_JavaScript)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/11_JavaScript/readme.md)】
34 | 
35 | **第12讲：HTML与CSS** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/12_CSS)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/12_CSS/readme.md)】
36 | 
37 | **第13讲：Uniswap页面** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/13_UniswapHTML)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/13_UniswapHTML/readme.md)】
38 | 
39 | **第14讲：BAYC页面** ：【[代码](https://github.com/WTFAcademy/WTF-HTML/blob/main/14_BAYCHTML)】 【[教程](https://github.com/WTFAcademy/WTF-HTML/blob/main/14_BAYCHTML/readme.md)】
40 | 
41 | ## 资源
42 | 
43 | MDN HTML教程：[链接](https://developer.mozilla.org/zh-CN/docs/Learn/HTML)
44 | 
45 | ## WTF HTML贡献者
46 | <div align="center">
47 |   <h4 align="center">
48 |     贡献者是WTF学院的基石
49 |   </h4>
50 |   <a href="https://github.com/WTFAcademy/WTF-HTML/graphs/contributors">
51 |     <img src="https://contrib.rocks/image?repo=WTFAcademy/WTF-HTML" />
52 |   </a>
53 | </div>
54 | 


--------------------------------------------------------------------------------
/languages/en/01_HelloHTML/img/1-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/01_HelloHTML/img/1-1.png


--------------------------------------------------------------------------------
/languages/en/01_HelloHTML/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>This is the head</title>
 5 |   </head>
 6 |   <body>
 7 |     <p>Hello <strong>HTML</strong>.</p>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/languages/en/01_HelloHTML/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 1. Hello HTML (9 lines of code)
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | In this lecture, we introduce the basics of HTML and write the first HTML program: Hello HTML (9 lines of code). You can also read directly [MDN HTML Basics](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics).
 14 | 
 15 | 
 16 | ## What is HTML?
 17 | 
 18 | The Internet, or more specifically the World Wide Web, is made up of many documents and resources that are linked together. These documents and resources are written in HTML (**H**yper**t**ext **M**arkup **L**anguage, Hypertext Markup Language), and they are called web pages. HTML is the basis of web pages and defines the structure and content of web pages.
 19 | 
 20 | When you enter a URL (for example, www.example.com) into your browser, the browser sends a request to the server that serves the page. The server will respond to this request and send the requested web page (that is, some HTML) back to the browser. The browser then parses this HTML and displays it as the web pages you normally see.
 21 | 
 22 | HTML is not a programming language, but a markup language used to define the structure of content. HTML consists of a series of elements that can be used to surround different parts of content and make it appear or work in a certain way. A pair of tags (`tag`) can add a hyperlink to a piece of text or an image, italicize the text, change the font size, etc. For example:
 23 | 
 24 | ```plain
 25 | My cat is very grumpy
 26 | ```
 27 | 
 28 | You can encapsulate this line of text into a paragraph (**p**aragraph) element to render it on a single line:
 29 | 
 30 | ```html
 31 | <p>My cat is very grumpy</p>
 32 | ```
 33 | 
 34 | ## The difference between HTML, CSS and JavaScript
 35 | 
 36 | - **HTML**: HTML is used to define the structure and content of web pages. It consists of a series of elements, which can include text, links, images, etc.
 37 | 
 38 | - **CSS**: CSS (Cascading Style Sheets, cascading style sheets) is a style sheet language used to describe the style of HTML elements, including colors, layouts, fonts, etc. CSS can make your web page look more beautiful and can also implement responsive design so that your web page looks good on different devices.
 39 | 
 40 | - **JavaScript**: JavaScript is a programming language that makes web pages interactive. For example, JavaScript can make web pages respond to user actions, such as clicking buttons, submitting forms, etc.
 41 | 
 42 | ## HTML elements
 43 | 
 44 | HTML documents are composed of HTML elements. HTML elements consist of tags, content and closing tags. For example, a paragraph element looks like this:
 45 | 
 46 | ```html
 47 | <p>This is a paragraph.</p>
 48 | ```
 49 | 
 50 | Effect in browser:
 51 | 
 52 | <p>This is a paragraph.</p>
 53 | 
 54 | 
 55 | In this example, `<p>` is the opening tag, `This is a paragraph.` is the content, and `</p>` is the closing tag.
 56 | 
 57 | HTML elements can have attributes, which provide additional information about the element. For example, a link element looks like this:
 58 | 
 59 | ```html
 60 | <a href="https://www.example.com">This is a link</a>
 61 | ```
 62 | 
 63 | Effect in browser:
 64 | 
 65 | <a href="https://www.example.com">This is a link</a>
 66 | 
 67 | In this example, `href` is an attribute that specifies the target address of the link.
 68 | 
 69 | ## development tools
 70 | 
 71 | We recommend that you use [VSCode](https://code.visualstudio.com/download) to develop HTML, and use a browser (Chrome) to open the `.html` file for browsing.
 72 | 
 73 | ## Hello HTML
 74 | 
 75 | Now we are going to write our first HTML program: Hello HTML (9 lines of code) and see how the individual elements cooperate with each other to form a complete HTML page.
 76 | 
 77 | ```html
 78 | <!DOCTYPE html>
 79 | <html>
 80 |    <head>
 81 |      <title>This is the head</title>
 82 |    </head>
 83 |    <body>
 84 |      <p>Hello <strong>HTML</strong>.</p>
 85 |    </body>
 86 | </html>
 87 | ```
 88 | 
 89 | ![Hello HTML](./img/1-1.png)
 90 | 
 91 | Hello HTML includes the following elements:
 92 | 
 93 | - `<!DOCTYPE html>` — document type, ensuring that the document can be read normally. .
 94 | - `<html></html>` — The `html` element, which contains the content of the entire page, is also called the root element.
 95 | - `<head></head>` — The `head` element, whose content is invisible to users, contains, for example, search keywords for search engines, page descriptions, CSS style sheets, and character encoding declarations.
 96 | - `<title></title>` — The `title` element. This element sets the title of the page, which is displayed on the browser tab and also serves as the description text of the favorite web page.
 97 | - `<body></body>` — The `body` element. This element contains the content you expect users to see when they visit the page, including text, images, videos, games, playable audio tracks, or other content.
 98 | - `<p></p>` - The paragraph element represents a paragraph of text, usually appearing as a block of text separated from adjacent text, either by vertical white space or by a first line indent.
 99 | 
100 | ## Summary
101 | 
102 | In this lecture, we introduced what HTML is, its elements and development tools, and wrote the first HTML program: Hello HTML.
103 | 


--------------------------------------------------------------------------------
/languages/en/02_Elements/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Element</title>
 5 | </head>
 6 | <body>
 7 |     <p>My cat is very grumpy.</p>
 8 |     <p>My cat is very grumpy.</p>
 9 |     <img src="images/firefox-icon.png" alt="My test image">
10 |     <div>I am div</div>
11 |     <div>I am also div</div>
12 |     <span>I am span</span>
13 |     <span>I am also span</span>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/languages/en/02_Elements/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 2. Element
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | After we understand the basic concepts of HTML, we will discuss the elements of HTML in depth.
 14 | 
 15 | 
 16 | ## Attributes of elements
 17 | 
 18 | HTML elements can have attributes, which provide more information about the element or define certain behaviors of the element. Properties are always defined in the start tag, often using the form "property name = property value". For example, a link (`a`) element can use the `href` attribute to specify the target address of the link:
 19 | 
 20 | ```html
 21 | <a href="https://www.example.com">Visit our website</a>
 22 | ```
 23 | 
 24 | Effect in browser:
 25 | 
 26 | <a href="https://www.example.com">Visit our website</a>
 27 | 
 28 | 
 29 | In the above code, the value of the `href` attribute of the `a` element is `"https://www.example.com"`, which means that when the link is clicked, the browser will navigate to that URL.
 30 | 
 31 | Properties should contain:
 32 | 
 33 | 1. A space between the attribute and the element name (or the previous attribute if there is more than one attribute).
 34 | 2. The name of the attribute, followed by an equal sign.
 35 | 3. The attribute value surrounded by quotation marks.
 36 | 
 37 | Commonly used properties:
 38 | 
 39 | 1. `id`: Provide a unique identifier for the element.
 40 | 2. `class`: Provide one or more class names for the element. Different elements can add the same class name.
 41 | 3. `style`: Provides inline styles for elements.
 42 | 
 43 | 
 44 | ## Nested elements
 45 | 
 46 | HTML elements can be nested within other elements. This means you can place another element or elements inside one element to create more complex content structures. For example, you might include one or more link elements inside a paragraph element:
 47 | 
 48 | ```html
 49 | <p>My cat is <strong>very</strong> grumpy.</p>
 50 | ```
 51 | Effect in browser:
 52 | 
 53 | <p>My cat is <strong>very</strong> grumpy.</p>
 54 | 
 55 | It is necessary to ensure that the nesting order of elements is correct: in this example, the `<p>` tag is used first, and then the `<strong>` tag, so the `<strong>` tag must be ended first, and then the `<p>` tag. This is not right:
 56 | 
 57 | ```html
 58 | <p>My cat is <strong>very grumpy.</p></strong>
 59 | ```
 60 | 
 61 | Effect in browser:
 62 | 
 63 | <p>My cat is <strong>very grumpy.</p></strong>
 64 | 
 65 | Therefore elements must start and end correctly to clearly show the correct nesting level. Otherwise the browser will have to guess on its own, and although it will try its best, it will most likely not give you the results you expect. So be sure to avoid it!
 66 | 
 67 | ## Empty element
 68 | 
 69 | There are some elements in HTML that have no content and do not require closing tags. These are called empty elements. For example, the `<br>` tag inserts a line break, and the `<img>` tag is used to insert an image.
 70 | 
 71 | ```html
 72 | <br>
 73 | <img src="image.jpg" alt="My Image">
 74 | ```
 75 | 
 76 | ## Block level elements
 77 | 
 78 | Block-level elements (Block-level Elements) are displayed in the form of blocks on the page and are often used as structural elements. Common block-level elements include: `<div>`, `<p>`, `<h1>`-`<h6>` and `<ul>`, etc. The characteristics of block-level elements are:
 79 | 
 80 | 1. Own a line
 81 | 2. The width and height of the element can be set
 82 | 3. The default width is 100% of its parent container
 83 | 4. Stacked with other block-level elements
 84 | 
 85 | ```html
 86 | <div>I am div</div>
 87 | <div>I am also div</div>
 88 | ```
 89 | 
 90 | Effect in browser:
 91 | <div>I am div</div>
 92 | <div>I am also div</div>
 93 | 
 94 | 
 95 | ## Inline elements
 96 | 
 97 | Inline Elements do not start a new line; they flow within the text, taking up only the width required by the content they contain. Common inline elements include: `<span>`, `<a>` and `<img>`, etc. The characteristics of inline elements are:
 98 | 
 99 | 1. Can be arranged on the same line as adjacent inline elements
100 | 2. The width and height of the element cannot be set.
101 | 3. The width of the element will be stretched by the content
102 | 
103 | ```html
104 | <span>I am span</span>
105 | <span>I am also span</span>
106 | ```
107 | 
108 | Effect in browser:
109 | 
110 | <span>I am span</span>
111 | <span>I am also span</span>
112 | 
113 | 
114 | ## Summary
115 | 
116 | In this lecture, we specifically analyzed the elements in HTML, including element attributes, nested elements, empty elements, block-level elements and inline elements.
117 | 


--------------------------------------------------------------------------------
/languages/en/03_Text/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Text</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Main Title</h1>
 8 |     <h2>Top-level Title</h2>
 9 |     <h3>Sub Title</h3>
10 |     <h4>Sub Sub Title</h4>
11 | 
12 |     <p>I am a paragraph, absolutely.</p>
13 | 
14 |     <p><span>Some text</span></p>
15 | 
16 |     Mozilla Foundation<br>
17 |     1981 Landings Drive<br>
18 |     Building K<br>
19 |     Mountain View, CA 94043-0801<br>
20 | 
21 |     <p>I am <em>glad</em> you weren't <em>late</em>.</p>
22 |     
23 |     <p>This liquid is <strong>highly toxic</strong>.</p>
24 |     <p>I am counting on you. <strong>Do not</strong> be late!</p>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/languages/en/03_Text/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 3. Common text tags
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | HTML provides a large number of text tags for us to use when making web pages. These tags can help us better organize and format our text content. Below are some commonly used HTML text tags.
 14 | 
 15 | ## `<p>`: Paragraph tag
 16 | 
 17 | The `<p>` tag is used to define a paragraph. It adds a line break before and after the paragraph, making the paragraphs clearly distinguishable.
 18 | 
 19 | ```html
 20 | <p>This is a paragraph. </p>
 21 | <p>This is another paragraph. </p>
 22 | ```
 23 | 
 24 | Effect in browser:
 25 | 
 26 | <p>This is a paragraph. </p>
 27 | <p>This is another paragraph. </p>
 28 | 
 29 | 
 30 | 
 31 | ## `<h1>` to `<h6>`: title tags
 32 | 
 33 | These tags are used to define HTML titles. `<h1>` defines the largest heading, `<h6>` defines the smallest heading.
 34 | 
 35 | ```html
 36 | <h1>This is an h1 title</h1>
 37 | <h2>This is an h2 title</h2>
 38 | ...
 39 | <h6>This is an h6 title</h6>
 40 | ```
 41 | 
 42 | Effect in browser:
 43 | <h1>This is an h1 title</h1>
 44 | <h2>This is an h2 title</h2>
 45 | ...
 46 | <h6>This is an h6 title</h6>
 47 | 
 48 | ## `<br>`: line break tag
 49 | 
 50 | The `<br>` tag is used to insert a simple newline character.
 51 | 
 52 | ```html
 53 | <p>This is a paragraph. <br>This is a new line in the same paragraph. </p>
 54 | ```
 55 | 
 56 | Effect in browser:
 57 | 
 58 | <p>This is a paragraph. <br>This is a new line in the same paragraph. </p>
 59 | 
 60 | ## `<strong>`: Bold label
 61 | 
 62 | The `<strong>` tag is used to define emphasized text, which browsers usually display as bold.
 63 | 
 64 | ```html
 65 | <p>This is <strong>bold</strong> text. </p>
 66 | ```
 67 | 
 68 | Effect in browser:
 69 | 
 70 | <p>This is <strong>bold</strong> text. </p>
 71 | 
 72 | ## `<em>`: italic tag
 73 | 
 74 | The `<em>` tag is used to define emphasized text, which browsers usually display in italics.
 75 | 
 76 | ```html
 77 | <p>This is <em>italic</em> text. </p>
 78 | ```
 79 | 
 80 | Effect in browser:
 81 | 
 82 | <p>This is <em>italic</em> text. </p>
 83 | 
 84 | 
 85 | ## `<u>`: Underline tag
 86 | 
 87 | The `<u>` tag is used to define underlined text.
 88 | 
 89 | ```html
 90 | <p>This is <u>underlined</u> text. </p>
 91 | ```
 92 | 
 93 | Effect in browser:
 94 | <p>This is <u>underlined</u> text. </p>
 95 | 
 96 | ## `<del>`: strikethrough tag
 97 | 
 98 | The `<del>` tag is used to display text that has been deleted, and browsers usually add a horizontal line above it.
 99 | 
100 | ```html
101 | <p>This is <del>deleted</del> text. </p>
102 | ```
103 | 
104 | Effect in browser:
105 | <p>This is <del>deleted</del> text. </p>
106 | 
107 | ## `<mark>`: Highlight tags
108 | 
109 | The `<mark>` tag is used to define marked or highlighted text.
110 | 
111 | ```html
112 | <p>This is a <mark>highlighted</mark> text. </p>
113 | ```
114 | Effect in browser:
115 | <p>This is a <mark>highlighted</mark> text. </p>
116 | 
117 | 
118 | ## `<sub>` and `<sup>`: subscript and superscript tags
119 | 
120 | `<sub>` is used to define subscript text, and `<sup>` is used to define superscript text.
121 | 
122 | ```html
123 | <p>This is an example of <sub>subscript</sub> and <sup>superscript</sup>. </p>
124 | ```
125 | Effect in browser:
126 | <p>This is an example of <sub>subscript</sub> and <sup>superscript</sup>. </p>
127 | 
128 | ## Summary
129 | 
130 | In this lecture, we introduced some commonly used HTML text tags. Proper use of these tags can help us better organize and display the content of our web pages.
131 | 


--------------------------------------------------------------------------------
/languages/en/04_List/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <head>
  4 |      <title>Element</title>
  5 | </head>
  6 | 
  7 | <body>
  8 |      <!-- Unordered list -->
  9 |      <ul>
 10 |          <li>BTC</li>
 11 |          <li>ETH</li>
 12 |          <li>SHIB</li>
 13 |      </ul>
 14 | 
 15 |      <!-- Ordered list -->
 16 |      <ol>
 17 |          <li>BTC</li>
 18 |          <li>ETH</li>
 19 |          <li>SHIB</li>
 20 |      </ol>
 21 | 
 22 | 
 23 |      <!-- Definition list -->
 24 |      <dl>
 25 |          <dt>BTC</dt>
 26 |          <dd>- desc1</dd>
 27 |          <dd>- desc2</dd>
 28 |          <dt>ETH</dt>
 29 |          <dd>- desc1</dd>
 30 |          <dd>- desc2</dd>
 31 |      </dl>
 32 | 
 33 | 
 34 |      <!-- Basic use of tables -->
 35 |      <table>
 36 |          <tr>
 37 |              <th>Name</th>
 38 |              <th>Code</th>
 39 |              <th>Price</th>
 40 |          </tr>
 41 |          <tr>
 42 |              <td>Bitcoin</td>
 43 |              <td>BTC</td>
 44 |              <td>19969</td>
 45 |          </tr>
 46 |          <tr>
 47 |              <td>Ethereum</td>
 48 |              <td>ETH</td>
 49 |              <td>1,354</td>
 50 |          </tr>
 51 |      </table>
 52 | 
 53 | 
 54 |      <!-- thead,tbody,tfoot -->
 55 |      <table>
 56 |          <thead>
 57 |              <tr>
 58 |                  <th>Token</th>
 59 |                  <th>Cost</th>
 60 |              </tr>
 61 |          </thead>
 62 |          <tfoot>
 63 |              <tr>
 64 |                  <td>Total</td>
 65 |                  <td>180</td>
 66 |              </tr>
 67 |          </tfoot>
 68 |          <tbody>
 69 |              <tr>
 70 |                  <td>BTC</td>
 71 |                  <td>100</td>
 72 |              </tr>
 73 |              <tr>
 74 |                  <td>ETH</td>
 75 |                  <td>80</td>
 76 |              </tr>
 77 |          </tbody>
 78 |      </table>
 79 | 
 80 | 
 81 | 
 82 |      <!-- Merge table items, colspan and rowspan -->
 83 |      <table>
 84 |          <tr>
 85 |              <th>Token</th>
 86 |              <th>Price</th>
 87 |              <th>Total</th>
 88 |          </tr>
 89 |          <tr>
 90 |              <td>BTC</td>
 91 |              <td>100</td>
 92 |              <td rowspan="2">300</td>
 93 |          </tr>
 94 |          <tr>
 95 |              <td>ETH</td>
 96 |              <td>200</td>
 97 |          </tr>
 98 |      </table>
 99 | 
100 | </body>
101 | 
102 | </html>
103 | 


--------------------------------------------------------------------------------
/languages/en/04_List/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 4. Lists and tables
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | List and table tags in HTML are important tools for building web pages. They can help us organize and display data. Here is some basic information about lists and tables.
 14 | 
 15 | 
 16 | ## List
 17 | 
 18 | In HTML, there are three types of lists:
 19 | 
 20 | 1. Unordered list: Created using `<ul>` elements, and each list item must be represented by `<li>` elements.
 21 | 2. Ordered list: Created using `<ol>` elements. List items are also represented by `<li>` elements. The difference is that they will automatically add serial numbers.
 22 | 3. Definition list: Created using the `<dl>` element, including `<dt>` (definition title) and `<dd>` (definition description) elements.
 23 | 
 24 | Below we introduce the usage and characteristics of each type of list in detail.
 25 | 
 26 | ### Unordered list
 27 | 
 28 | Unordered lists are the most common list type and add a small dot (also called a list symbol) before each list item. It uses `<ul>` as the container for the list, and `<li>` as the description of the specific list item. For example:
 29 | 
 30 | ```html
 31 | <ul>
 32 |    <li>BTC</li>
 33 |    <li>ETH</li>
 34 |    <li>SHIB</li>
 35 | </ul>
 36 | ```
 37 | 
 38 | 
 39 | Effect in browser:
 40 | 
 41 | <ul>
 42 |    <li>BTC</li>
 43 |    <li>ETH</li>
 44 |    <li>SHIB</li>
 45 | </ul>
 46 | 
 47 | 
 48 | ### Ordered list
 49 | 
 50 | Compared to unordered lists, each list item in an ordered list is marked with a number. Ordered lists originally use `<ol>` as the container of the list, and also use `<li>` to describe specific list items. For example:
 51 | 
 52 | ```html
 53 | <ol>
 54 | <li>BTC</li>
 55 | <li>ETH</li>
 56 | <li>SHIB</li>
 57 | </ol>
 58 | ```
 59 | 
 60 | The browser displays the following:
 61 | 
 62 | <ol>
 63 | <li>BTC</li>
 64 | <li>ETH</li>
 65 | <li>SHIB</li>
 66 | </ol>
 67 | 
 68 | ### Definition list
 69 | 
 70 | A definition list consists of `<dl>` (definition list), `<dt>` (definition item) and `<dd>` (definition description) elements. Definition lists are often used to present a set of terms and their definitions.
 71 | 
 72 | ```html
 73 | <dl>
 74 |    <dt>BTC</dt>
 75 |    <dd>- desc1</dd>
 76 |    <dd>- desc2</dd>
 77 |    <dt>ETH</dt>
 78 |    <dd>- desc1</dd>
 79 |    <dd>- desc2</dd>
 80 | </dl>
 81 | ```
 82 | 
 83 | The browser displays the following:
 84 | 
 85 | <dl>
 86 |    <dt>BTC</dt>
 87 |    <dd>- desc1</dd>
 88 |    <dd>- desc2</dd>
 89 |    <dt>ETH</dt>
 90 |    <dd>- desc1</dd>
 91 |    <dd>- desc2</dd>
 92 | </dl>
 93 | 
 94 | 
 95 | ## sheet
 96 | 
 97 | ### Basic table
 98 | 
 99 | Tables can be used to display two-dimensional data. It uses `<table>` as the container of the table.
100 | 
101 | `<tr>`(table row) is used internally to represent a row of data
102 | 
103 |   `<tr>` internally uses `<th>` to represent the title of each column of the table, and uses `<td>` to represent each column of the row to store specific data;
104 | 
105 | Specific examples are as follows:
106 | 
107 | ```html
108 | <table>
109 |    <tr>
110 |      <th>Name</th>
111 |      <th>Code</th>
112 |      <th>Price</th>
113 |    </tr>
114 |    <tr>
115 |      <td>Bitcoin</td>
116 |      <td>BTC</td>
117 |      <td>19969</td>
118 |    </tr>
119 |    <tr>
120 |      <td>Ethereum</td>
121 |      <td>ETH</td>
122 |      <td>1,354</td>
123 |    </tr>
124 | </table>
125 | ```
126 | 
127 | The browser displays the following:
128 | 
129 | <table>
130 |    <tr>
131 |      <th>Name</th>
132 |      <th>Code</th>
133 |      <th>Price</th>
134 |    </tr>
135 |    <tr>
136 |      <td>Bitcoin</td>
137 |      <td>BTC</td>
138 |      <td>19969</td>
139 |    </tr>
140 |    <tr>
141 |      <td>Ethereum</td>
142 |      <td>ETH</td>
143 |      <td>1,354</td>
144 |    </tr>
145 | </table>
146 | 
147 | ### `<thead>`, `<tbody>` and `<tfoot>`
148 | 
149 | The `<thead>`, `<tbody>` and `<tfoot>` elements are used in combination to specify the various parts of the table (header, body, footer)
150 | 
151 | Examples are as follows:
152 | 
153 | ```html
154 | <table>
155 |    <thead>
156 |      <tr>
157 |        <th>Token</th>
158 |        <th>Cost</th>
159 |      </tr>
160 |    </thead>
161 |    <tfoot>
162 |      <tr>
163 |        <td>Total</td>
164 |        <td>180</td>
165 |      </tr>
166 |    </tfoot>
167 |    <tbody>
168 |      <tr>
169 |        <td>BTC</td>
170 |        <td>100</td>
171 |      </tr>
172 |      <tr>
173 |        <td>ETH</td>
174 |        <td>80</td>
175 |      </tr>
176 |    </tbody>
177 | </table>
178 | ```
179 | 
180 | The browser displays the following:
181 | 
182 | <table>
183 |    <thead>
184 |      <tr>
185 |        <th>Token</th>
186 |        <th>Cost</th>
187 |      </tr>
188 |    </thead>
189 |    <tfoot>
190 |      <tr>
191 |        <td>Total</td>
192 |        <td>180</td>
193 |      </tr>
194 |    </tfoot>
195 |    <tbody>
196 |      <tr>
197 |        <td>BTC</td>
198 |        <td>100</td>
199 |      </tr>
200 |      <tr>
201 |        <td>ETH</td>
202 |        <td>80</td>
203 |      </tr>
204 |    </tbody>
205 | </table>
206 | 
207 | 
208 | 
209 | ### Merge tables
210 | 
211 | Merging tables can use the `colspan` and `rowspan` attributes of `<td>` and `<th>`, where `colspan` is used to merge multiple rows horizontally, and `rowspan` is used to merge multiple columns vertically.
212 | 
213 | Examples are as follows:
214 | 
215 | ```html
216 | <table>
217 |    <tr>
218 |      <th>Token</th>
219 |      <th>Price</th>
220 |      <th>Total</th>
221 |    </tr>
222 |    <tr>
223 |      <td>BTC</td>
224 |      <td>100</td>
225 |      <td rowspan="2">300</td>
226 |    </tr>
227 |    <tr>
228 |      <td>ETH</td>
229 |      <td>200</td>
230 |    </tr>
231 | </table>
232 | ```
233 | 
234 | 
235 | The browser displays the following:
236 | 
237 | <table>
238 |    <tr>
239 |      <th>Token</th>
240 |      <th>Price</th>
241 |      <th>Total</th>
242 |    </tr>
243 |    <tr>
244 |      <td>BTC</td>
245 |      <td>100</td>
246 |      <td rowspan="2">300</td>
247 |    </tr>
248 |    <tr>
249 |      <td>ETH</td>
250 |      <td>200</td>
251 |    </tr>
252 | </table>
253 | 
254 | 
255 | ## Summary
256 | 
257 | In this lecture we introduced lists and tables in HTML. By learning these tags, you have been able to create structured lists and tables, an important step in building high-quality web pages.
258 | 


--------------------------------------------------------------------------------
/languages/en/05_Form/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |      <title>Element</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |      <!-- Text field -->
 9 |      <form>
10 |          First name: <input type="text" name="firstname"><br>
11 |          Last name: <input type="text" name="lastname">
12 |      </form>
13 | 
14 |      <!-- Password -->
15 |      <form>
16 |          Password: <input type="password" name="pwd">
17 |      </form>
18 |      <!-- Radio button -->
19 |      <form action="">
20 |          ACCOUNT:
21 |          <input type="radio" name="address" value="addr1">0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br>
22 |          <input type="radio" name="address" value="addr2">0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
23 |      </form>
24 |      <!-- Check button -->
25 |      <form>
26 |          Token value <br>
27 |          <input type="checkbox" name="token_value" value="Wei">Wei<br>
28 |          <input type="checkbox" name="token_value" value="GWei">GWei<br>
29 |          <input type="checkbox" name="token_value" value="Ether">Ether<br>
30 |      </form>
31 |      <!-- Drop-down box -->
32 |      <form action="">
33 |          Contract
34 |          <select>
35 |              <option>Facucet.sol</option>
36 |              <option>ERC20.sol</option>
37 |              <option>ERC721.sol</option>
38 |          </select>
39 |      </form>
40 |      <!-- Submit button -->
41 |      <form name="input" action="action.php" method="get">
42 |          <input type="submit" value="Deploy">
43 |          <input type="text" name="user" placeholder='address'>
44 |      </form>
45 | </body>
46 | 
47 | </html>
48 | 


--------------------------------------------------------------------------------
/languages/en/05_Form/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 5. Form
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | Forms are a very important part of HTML that allow users to enter information on a web page and submit the information to the server. In this chapter, we will introduce in detail how to use tags such as `<form>`, `<input>`, `<textarea>` to create forms.
 14 | 
 15 | ## Form creation
 16 | 
 17 | In HTML, form creation is mainly done by the `<form>` element. The `<form>` element defines the area where users enter data, and can contain different types of input elements, such as text fields, selection boxes, check boxes, radio buttons, and buttons.
 18 | 
 19 | A basic form structure is as follows:
 20 | 
 21 | ```html
 22 | <form>
 23 |    <!-- Form elements are placed here -->
 24 | </form>
 25 | ```
 26 | 
 27 | In the `<form>` element, you can add the attributes `action` and `method`. The `action` attribute defines the URL of the file to be processed after the form data is submitted to the server. The `method` attribute defines how data is sent to the server. Commonly used values ​​are "get" and "post".
 28 | 
 29 | ## Text input
 30 | 
 31 | In forms, we often need users to enter text. This can be done via an `<input>` element with its `type` attribute set to "text".
 32 | 
 33 | For example:
 34 | 
 35 | ```html
 36 | <form>
 37 | First name: <input type="text" name="firstname"><br>
 38 | Last name: <input type="text" name="lastname">
 39 | </form>
 40 | ```
 41 | 
 42 | Browser effect:
 43 | 
 44 | <form>
 45 | First name: <input type="text" name="firstname"><br>
 46 | Last name: <input type="text" name="lastname">
 47 | </form>
 48 | 
 49 | ## password
 50 | 
 51 | If you require the user to enter a password, you can set the `type` attribute of the `<input>` element to "password" and the input content will be hidden.
 52 | 
 53 | For example:
 54 | 
 55 | ```html
 56 | <form>
 57 | Password: <input type="password" name="pwd">
 58 | </form>
 59 | ```
 60 | 
 61 | Browser effect:
 62 | 
 63 | <form>
 64 | Password: <input type="password" name="pwd">
 65 | </form>
 66 | 
 67 | ## Radio Buttons
 68 | 
 69 | Radio buttons and checkboxes allow users to select one or more from multiple options. The radio button's `type` attribute value is "radio".
 70 | 
 71 | ```html
 72 | <form action="">
 73 | ACCOUNT:
 74 | <input type="radio" name="address" value="addr1">0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br>
 75 | <input type="radio" name="address" value="addr2">0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
 76 | </form>
 77 | ```
 78 | 
 79 | Browser effect:
 80 | 
 81 | <form action="">
 82 | ACCOUNT:
 83 | 
 84 | <input type="radio" name="address" value="addr1">0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br>
 85 | <input type="radio" name="address" value="addr2">0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
 86 | </form>
 87 | 
 88 | ### Checkboxes
 89 | 
 90 | A checkbox can select one or more options, defined using **`<input type="checkbox">`**
 91 | 
 92 | Examples are as follows:
 93 | 
 94 | ```html
 95 | <form>
 96 |    Token value <br>
 97 |    <input type="checkbox" name="token_value" value="Wei">Wei<br>
 98 |    <input type="checkbox" name="token_value" value="GWei">GWei<br>
 99 |    <input type="checkbox" name="token_value" value="Ether">Ether<br>
100 | </form>
101 | ```
102 | 
103 | Browser effect:
104 | 
105 | <form>
106 |    Token value <br>
107 |    <input type="checkbox" name="token_value" value="Wei">Wei<br>
108 |    <input type="checkbox" name="token_value" value="GWei">GWei<br>
109 |    <input type="checkbox" name="token_value" value="Ether">Ether<br>
110 | </form>
111 | 
112 | 
113 | ### Drop-down list (select)
114 | 
115 | A drop-down list allows the user to select one from multiple options. It is created from the `<select>` element and uses the `<option>` element to define options.
116 | 
117 | Examples are as follows:
118 | 
119 | ```html
120 | <form action="">
121 |    Contract
122 |    <select>
123 |      <option>Facucet.sol</option>
124 |      <option>ERC20.sol</option>
125 |      <option>ERC721.sol</option>
126 |    </select>
127 | </form>
128 | ```
129 | 
130 | Browser effect:
131 | 
132 | <form action="">
133 |    Contract
134 |    <select>
135 |      <option>Facucet.sol</option>
136 |      <option>ERC20.sol</option>
137 |      <option>ERC721.sol</option>
138 |    </select>
139 | </form>
140 | 
141 | ### Submit button (Submit)
142 | 
143 | Forms usually require a submit button to submit user input. This can be done by setting the `type` attribute of the `<input>` element to "submit".
144 | 
145 | Examples are as follows:
146 | 
147 | ```html
148 | <form name="input" action="action.php" method="get">
149 |    <input type="submit" value="Deploy">
150 |    <input type="text" name="user" placeholder='address'>
151 | </form>
152 | ```
153 | 
154 | Browser effect:
155 | 
156 | <form name="input" action="action.php" method="get">
157 |    <input type="submit" value="Deploy">
158 |    <input type="text" name="user" placeholder='address'>
159 | </form>
160 | 
161 | ## Other elements of the form
162 | 
163 | There are also some common element attributes of table forms:
164 | 
165 | - **name**: The name of the form. The value cannot be an empty string and needs to be unique within the form collection it is in
166 | 
167 | - **action**: Specify the delivery address of the form content to process the input data
168 | 
169 | - **method**: Define the submission method of form data, which can be the following values:
170 | 
171 |    - **post**: HTTP POST method, the form data will be included in the form body and sent to the server. It can be used to submit sensitive data, such as username and password, etc.
172 |    - **get**: Default value, HTTP GET method, form data will be appended to the URL of the **action** attribute, and **?** is used as the delimiter. It is generally used for insensitive information, such as paging, etc. . For example: https://www.wtfacademy.com/?currentPage=1, where currentPage=1 is the data submitted by the get method
173 | 
174 | 
175 | ## Summary
176 | 
177 | The above is the basic usage of HTML forms. By learning these tags and attributes, you should be able to create basic HTML forms.
178 | 


--------------------------------------------------------------------------------
/languages/en/06_Hyperlink/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |      <title>Hyperlink</title>
 4 | </head>
 5 | <body>
 6 |      <p>I created a link to
 7 |          Hyperlink to <a href="https://wtf.academy/">WTFAcademy home page</a>.
 8 |      </p>
 9 | 
10 |      <p>I created a link to
11 |          <a href="https://wtf.academy/" title="Web3 Open Source Academy for Web2 Developers.">Hyperlink to WTFAcademy homepage</a>.
12 |      </p>
13 | 
14 |      <a href="https://wtf.academy/">External links</a>
15 | 
16 |      <a href="#What is a hyperlink?">Description of the same page link</a>
17 | 
18 |      <a href="https://wtf.academy/">
19 |          <img src="https://wtf.academy/img/wtflogo.png" alt="WTFAcademy logo" />
20 |      </a>
21 | 
22 |      <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
23 | 
24 |      <a href="tel:+491570156">+49 157 0156</a>
25 | 
26 |      <a href="https://github.com/WTFAcademy/WTF-HTML/blob/main/06_Hyperlink/img/6-2.png" download="wtflogo">Download WTFAcademy logo</a>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/languages/en/06_Hyperlink/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 6. Hyperlink hyperlink
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | Hyperlinks are a basic feature in HTML that link to other parts of a web page, or to other web pages, or even other websites. In this chapter, we will explain in detail how to use hyperlinks in HTML.
 14 | 
 15 | 
 16 | ## Create hyperlink
 17 | 
 18 | Hyperlinks are primarily created in HTML through the `<a>` tag. The `<a>` tag generally contains some text or images, which will become the clickable part of the link. At the same time, we specify the target address of the link through the `href` attribute of the `<a>` tag.
 19 | 
 20 | ```html
 21 | <a href="https://wtf.academy">Visit WTF Academy’s official website</a>
 22 | ```
 23 | 
 24 | Browser effect:
 25 | 
 26 | <a href="https://wtf.academy">Visit WTF Academy’s official website</a>
 27 | 
 28 | ## Add supporting information using the `title` attribute
 29 | 
 30 | Another attribute you might want to add to your links is a title; this is intended to contain supplementary information about the link, such as what information the page contains or something to note.
 31 | 
 32 | ```html
 33 | <a href="https://wtf.academy/" title="Web3 open source academy for developers.">Visit the official website of WTF Academy</a>
 34 | ```
 35 | 
 36 | The result is as follows (when the mouse pointer hovers over the link, the title will appear as a tooltip):
 37 | 
 38 | <a href="https://wtf.academy/" title="Web3 open source academy for developers.">Visit the official website of WTF Academy</a>
 39 | 
 40 | > **Note**
 41 | >
 42 | > The title of a link is only displayed when the mouse is hovering over it, which means that it is difficult for people using a keyboard to navigate the page to obtain the title information. If title information is important to the page, you should present it in a way that is easily accessible to all users, such as in regular text.
 43 | 
 44 | ## Set the link opening method
 45 | 
 46 | Sometimes, we want to open a new browser window or tab after clicking a link instead of opening it on the current page. This can be achieved via the `target` attribute of the `<a>` tag. If we want the link to open in a new tab, we can set the `target` attribute to `_blank`.
 47 | 
 48 | For example:
 49 | 
 50 | ```html
 51 | <a href="https://wtf.academy" target="_blank">Visit WTF Academy’s official website</a>
 52 | ```
 53 | 
 54 | Browser effect:
 55 | 
 56 | <a href="https://wtf.academy" target="_blank">Visit WTF Academy’s official website</a>
 57 | 
 58 | Clicking on this hyperlink will open the official website of WTF Academy in a new browser tab.
 59 | 
 60 | ## Anchor link
 61 | 
 62 | In a long web page, we may want to create links to some part within the page. This can be achieved through anchor links. First, we need to mark the target location using the `name` or `id` attribute of the `<a>` tag, and then use `#` plus the `name` or `id` value of the target in the `href` attribute of the link to create the link.
 63 | 
 64 | For example:
 65 | 
 66 | ```html
 67 | <a name="section1"></a>
 68 | <!-- Some content -->
 69 | <a href="#section1">Jump to section1</a>
 70 | ```
 71 | 
 72 | Browser effect:
 73 | 
 74 | <a name="section1"></a>
 75 | <a href="#section1">Jump to section1</a>
 76 | 
 77 | 
 78 | Clicking this hyperlink will jump to the `section1` part of the page.
 79 | 
 80 | 
 81 | ## Email link
 82 | 
 83 | In addition to linking to other web pages, the `<a>` tag can also link to an email address. By adding `mailto:` before the `href` attribute value, you can create a link that when clicked launches the user's default mail client and creates a new email.
 84 | 
 85 | For example:
 86 | 
 87 | ```html
 88 | <a href="mailto:example@example.com">Send email to example@example.com</a>
 89 | ```
 90 | 
 91 | This hyperlink, when clicked, will launch the user's mail client and create a new email sent to `example@example.com`.
 92 | 
 93 | ## Download link
 94 | 
 95 | ```html
 96 | <a href="https://wtf.academy/img/wtflogo.png" download="wtflogo">Download WTFAcademy logo</a>
 97 | ```
 98 | 
 99 | <a href="https://wtf.academy/img/wtflogo.png" download="wtflogo">Download WTFAcademy logo</a>
100 | 
101 | 
102 | ## Summary
103 | 
104 | In this chapter, we introduce how to create and use hyperlinks in HTML, including normal links, links that open in new tabs, email links, and anchor links. Understanding and mastering hyperlinks is an important step in learning HTML. It allows your web pages to connect to other web pages or other parts within the page.
105 | 


--------------------------------------------------------------------------------
/languages/en/07_Img/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML Minimalist Tutorial: 7. Pictures
 2 | 
 3 | WTF HTML tutorial to help newcomers get started with HTML quickly.
 4 | 
 5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | In web pages, pictures are a very important media type that can improve user experience and make information delivery more intuitive and vivid. This chapter explains how to embed and manipulate images in HTML.
14 | 
15 | ## Insert picture
16 | 
17 | In HTML, we use the `<img>` tag to insert images. The `<img>` tag is a self-closing tag, which means it has no closing tag. The address of the image is specified through the `src` (source) attribute of the `<img>` tag.
18 | 
19 | For example:
20 | 
21 | ```html
22 | <img src="https://wtf.academy/img/wtflogo.png">
23 | ```
24 | 
25 | Browser effect:
26 | 
27 | <img src="https://wtf.academy/img/wtflogo.png">
28 | 
29 | ## Set image properties
30 | 
31 | The `<img>` tag also has some other attributes that can be used to set the size of the image, alternative text, etc.
32 | 
33 | ### Set image size
34 | 
35 | We can set the width and height of the image through the `width` and `height` attributes of the `<img>` tag. The values ​​of these two properties can be specific pixel values ​​or percentages.
36 | 
37 | For example:
38 | 
39 | ```html
40 | <img src="https://wtf.academy/img/wtflogo.png" width="200" height="100">
41 | ```
42 | 
43 | Browser effect:
44 | 
45 | <img src="https://wtf.academy/img/wtflogo.png" width="200" height="100">
46 | 
47 | 
48 | This will set the image's width to 200 pixels and its height to 100 pixels.
49 | 
50 | It should be noted that if the width and height of the image are set at the same time, and the ratio of these two values ​​​​is inconsistent with the ratio of the image itself, the image may be stretched or compressed, causing deformation. Therefore, when setting the image size, we generally only set one of the width or height, and keep the other automatic.
51 | 
52 | ### Set alternative text
53 | 
54 | Alt text is used to display when an image cannot be loaded. It is also used by screen readers to read the content of the image to help the visually impaired understand the image. We set the alternative text through the `alt` attribute of the `<img>` tag.
55 | 
56 | For example:
57 | 
58 | ```html
59 | <img src="https://www.example.com/path/to/image.jpg" alt="A description of the image">
60 | ```
61 | 
62 | Browser effect:
63 | 
64 | <img src="https://www.example.com/path/to/image.jpg" alt="A description of the image">
65 | 
66 | 
67 | If the image fails to load, "A description of the image" will appear on the page.
68 | 
69 | 
70 | ### image link
71 | 
72 | Images can also be used as hyperlinks. We only need to put the `<img>` tag inside the `<a>` tag to create an image link.
73 | 
74 | ```html
75 | <a href="https://wtf.academy/">
76 |    <img src="https://wtf.academy/img/wtflogo.png" alt="WTFAcademy logo" />
77 | </a>
78 | ```
79 | 
80 | Browser effect:
81 | 
82 | <a href="https://wtf.academy/">
83 |    <img src="https://wtf.academy/img/wtflogo.png" alt="WTFAcademy logo" />
84 | </a>
85 | 
86 | ## Summary
87 | 
88 | In this chapter, we introduced how to insert images in HTML and how to set the image's properties, including size and alt text. We also covered how to create image links. By learning these things, you can now freely use images in your web pages.
89 | 


--------------------------------------------------------------------------------
/languages/en/08_SemanticElements/img/8-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/08_SemanticElements/img/8-1.png


--------------------------------------------------------------------------------
/languages/en/08_SemanticElements/img/8-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/08_SemanticElements/img/8-2.png


--------------------------------------------------------------------------------
/languages/en/08_SemanticElements/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML minimalist tutorial: 8. Semantic elements
 2 | 
 3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
 4 | 
 5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | Semantic HTML is about conveying the meaning and structure of content through the use of appropriate tags, which makes your code easier to read and understand, and also helps with search engine optimization (SEO). In HTML5, a new set of semantic tags are introduced that describe your content and page structure more clearly. In this chapter, we will introduce some common semantic tags.
14 | 
15 | ## Common semantic elements:
16 | 
17 | ### Text class:
18 | 
19 | A page structure usually includes: header, footer, title, navigation, content, sidebar, etc.
20 | 
21 | We can write the page like this, as shown in the figure below.
22 | 
23 | ![Non-verbal layout diagram](./img/8-1.png)
24 | 
25 | As shown in the picture above, you only need to use the `<div>` element to complete the layout of a page. Even text content, such as headings, paragraphs, etc., can be written using `<div>`.
26 | 
27 | But this will cause two obvious problems:
28 | 1. It is not conducive for developers to write code. When you are faced with `<div>` elements that fill the screen, it is difficult for you to quickly distinguish what they represent.
29 | 2. It is not conducive to search engine optimization (SEO). The browser only knows that you have used the `<div>` element, and the `div` element itself has no meaning, it is just a container.
30 | 
31 | At this time we can solve these two problems by using semantic elements, as shown in the figure below.
32 | 
33 | ![Language layout diagram](./img/8-2.png)
34 | 
35 | We used `<header>` `<nav>` `<main>` `<aside>` `<footer>` to represent different areas in the page respectively.
36 | 
37 | Using these tags gives the page good semantics and structure, making it easier for both developers and browsers to quickly understand the web content.
38 | 
39 | This does not mean that you cannot use the `<div>` element to write pages, but we can use some semantic elements to replace the `<div>` element for specific content on the page. This is what I said at the beginning, getting the right elements to do the right thing.
40 | 
41 | Let's briefly introduce these tags.
42 | 
43 | - `<header>` is used to display introductory content, usually containing a set of introductory or useful elements to aid navigation. It may contain some title elements, but it may also contain other elements such as a logo, search box, author name, etc.
44 | 
45 | - `<nav>` represents a portion of a page whose purpose is to provide navigation links within the current document or other documents. Common examples of navigation sections are menus, catalogs, and indexes.
46 | 
47 | - `<main>` renders the body of the document or the main part of the application. The main part consists of content that is directly related to the document or extends to the central theme of the document or the main functional parts of the application.
48 | 
49 | - `<aside>` represents a section that has little to do with the rest of the page content, is considered an independent part of the content and can be separated independently without affecting the whole. It usually appears as a sidebar or callout box.
50 | 
51 | - `<footer>` is usually used to represent the footer. A footer usually contains information about the section author, copyright data, or links to the document.
52 | 
53 | - `<address>` means that the HTML provides contact information for a person or organization (etc.).
54 | 
55 | - `<article>` represents a self-contained structure within a document, page, application or website that is intended to be independently assignable or reusable, e.g. in a publication, it might be a forum post, magazine or news article, Blogs, user-submitted comments, interactive components, or other independent items of content. ​​
56 | 
57 | - `<section>` represents a generic independent section in an HTML document that has no more specific semantic elements to represent it. Typically a title will be included.
58 | 
59 | For example:
60 | 
61 | ```html
62 | <header>
63 |    <h1>Site Name</h1>
64 |    <nav>
65 |      <ul>
66 |        <li><a href="/">Home</a></li>
67 |        <li><a href="/about">About</a></li>
68 |        <li><a href="/contact">Contact</a></li>
69 |      </ul>
70 |    </nav>
71 | </header>
72 | 
73 | <main>
74 |    <article>
75 |      <h2>Blog Post Title</h2>
76 |      <p>Blog post content...</p>
77 |    </article>
78 | 
79 |    <aside>
80 |      <h3>About the author</h3>
81 |      <p>Author information...</p>
82 |    </aside>
83 | </main>
84 | 
85 | <footer>
86 |    <p>&copy; 2023 Site Name</p>
87 | </footer>
88 | ```
89 | 
90 | ## Why do we need semantic elements?
91 | 1. More convenient for development. As mentioned above, the HTML code you write is easier to understand and more readable.
92 | 2. Facilitate parsing by other devices (such as screen readers, blind readers, mobile devices) to render web pages in a semantic manner.
93 | 3. Easier for SEO optimization. Compared with using non-semantic `<div>` tags, using semantics can make web pages more searchable by users.
94 | 
95 | 
96 | ## Summary
97 | 
98 | In this chapter, we introduce semantic HTML and some common semantic tags. By using semantic tags, you can create code that is more readable, easier to maintain, and search engine friendly.
99 | 


--------------------------------------------------------------------------------
/languages/en/09_HTML5/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 9. HTML5 new features
  2 | 
  3 | WTF HTML tutorial to help newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | HTML5 is the latest version of HTML, which introduces many new tags, attributes and functions that greatly enhance the functionality and interactivity of the web. In this chapter, we'll introduce some of the new features of HTML5, including new tags and attributes, as well as new form types and attributes.
 14 | 
 15 | ## New tags and attributes
 16 | 
 17 | HTML5 introduces a series of new tags and attributes to provide richer content presentation and more powerful functionality.
 18 | 
 19 | ### `<video>` and `<audio>`
 20 | 
 21 | The `<video>` and `<audio>` tags make it easier to embed video and audio on web pages. You can specify multiple audio or video sources using the `<source>` tag, and the browser will choose the first one it supports.
 22 | 
 23 | Here is an example of a `<video>` tag:
 24 | 
 25 | ```html
 26 | <video controls width="500">
 27 |    <source src="movie.mp4" type="video/mp4">
 28 |    <source src="movie.ogg" type="video/ogg">
 29 |    Your browser does not support the video tag.
 30 | </video>
 31 | ```
 32 | Browser effect:
 33 | 
 34 | <video controls width="500">
 35 |   <source src="movie.mp4" type="video/mp4">
 36 |   <source src="movie.ogg" type="video/ogg">
 37 |   Your browser does not support the video tag.
 38 | </video>
 39 | 
 40 | 
 41 | Here is an example of an `<audio>` tag:
 42 | 
 43 | ```html
 44 | <audio controls>
 45 |    <source src="audio.mp3" type="audio/mpeg">
 46 |    <source src="audio.ogg" type="audio/ogg">
 47 |    Your browser does not support the audio tag.
 48 | </audio>
 49 | ```
 50 | 
 51 | Browser effect:
 52 | 
 53 | <audio controls>
 54 |   <source src="audio.mp3" type="audio/mpeg">
 55 |   <source src="audio.ogg" type="audio/ogg">
 56 |   Your browser does not support the audio tag.
 57 | </audio>
 58 | 
 59 | 
 60 | ### `<canvas>`
 61 | 
 62 | The `<canvas>` tag is used to draw graphics on web pages. It provides a programmable environment for images. Unlike the `<img>` tag, `<canvas>` allows you to dynamically generate images via JavaScript.
 63 | 
 64 | Here is an example of using `<canvas>` to draw a rectangle:
 65 | 
 66 | ```html
 67 | <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
 68 | Your browser does not support the HTML5 canvas tag.
 69 | </canvas>
 70 | 
 71 | <script>
 72 | var canvas = document.getElementById("myCanvas");
 73 | var ctx = canvas.getContext("2d");
 74 | ctx.fillStyle = "#000000";
 75 | ctx.fillRect(0, 0, 80, 80);
 76 | </script>
 77 | ```
 78 | 
 79 | ## New form types and properties
 80 | 
 81 | HTML5 introduces several new input types and attributes to enhance the functionality and ease of use of forms.
 82 | 
 83 | ### New input type
 84 | 
 85 | HTML5 provides some new input types, such as `email`, `number`, `date`, etc. These new input types provide better input control and validation.
 86 | 
 87 | Here are some examples of the new input types:
 88 | 
 89 | ```html
 90 | <form>
 91 |    <label for="email">Email:</label>
 92 |    <input type="email" id="email" name="email">
 93 | 
 94 |    <label for="quantity">Quantity (between 1 and 5):</label>
 95 |    <input type="number" id="quantity" name="quantity" min="1" max="5">
 96 | 
 97 |    <label for="birthday">Birthday:</label>
 98 |    <input type="date" id="birthday" name="birthday">
 99 | </form>
100 | ```
101 | 
102 | Browser effect:
103 | <form>
104 |    <label for="email">Email:</label>
105 |    <input type="email" id="email" name="email">
106 | 
107 |    <label for="quantity">Quantity (between 1 and 5):</label>
108 |    <input type="number" id="quantity" name="quantity" min="1" max="5">
109 | 
110 |    <label for="birthday">Birthday:</label>
111 |    <input type="date" id="birthday" name="birthday">
112 | </form>
113 | 
114 | 
115 | ### New input properties
116 | 
117 | HTML5 also introduces some new input attributes, such as `placeholder`, `required`, etc.
118 | 
119 | The `placeholder` attribute can provide a hint for an input field, while the `required` attribute can make an input field required.
120 | 
121 | Here are some examples of the new input properties:
122 | 
123 | ```html
124 | <form>
125 |    <label for="fname">First name:</label>
126 |    <input type="text" id="fname" name="fname" placeholder="Your first name" required>
127 | 
128 |    <label for="lname">Last name:</label>
129 |    <input type="text" id="lname" name="lname" placeholder="Your last name">
130 | </form>
131 | ```
132 | 
133 | Browser effect:
134 | 
135 | <form>
136 |    <label for="fname">First name:</label>
137 |    <input type="text" id="fname" name="fname" placeholder="Your first name" required>
138 | 
139 |    <label for="lname">Last name:</label>
140 |    <input type="text" id="lname" name="lname" placeholder="Your last name">
141 | </form>
142 | 
143 | 
144 | ## Summary
145 | 
146 | In this chapter, we introduce some of the new features of HTML5, including new tags and attributes, as well as new form types and attributes. By learning and using these new features, you can create richer, more powerful web pages.
147 | 


--------------------------------------------------------------------------------
/languages/en/10_Responsive/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML minimalist tutorial: 10. Responsive design and mobile HTML
 2 | 
 3 | WTF HTML tutorial to help newcomers get started with HTML quickly.
 4 | 
 5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | Responsive design is a method for website design to be optimized for different devices and screen sizes so that the website can provide a good user experience on any device. The core of this design approach includes viewports, device-independent pixels, media queries, and responsive design for images and tables.
14 | 
15 | ## Viewport and device-independent pixels
16 | 
17 | The view window is the area of ​​a web page that users can see in the browser. On mobile devices, the width of the view window is usually equal to the physical screen width of the device.
18 | 
19 | To create a consistent layout across all devices, we need to use device-independent pixels. A device-independent pixel is a virtual pixel unit used to provide a consistent layout across different devices, rather than relying on the actual physical pixels of the device.
20 | 
21 | In HTML, you can set the width and initial zoom level of the view window using the `<meta>` tag:
22 | 
23 | ```html
24 | <meta name="viewport" content="width=device-width, initial-scale=1">
25 | ```
26 | 
27 | ## Media Inquiries
28 | 
29 | Media queries are a part of CSS3 that allow content to respond to different device or viewport conditions. For example, you can use media queries to apply different styles on small and large screen devices:
30 | 
31 | ```css
32 | /* Styles to apply on devices with width less than 600px */
33 | @media only screen and (max-width: 600px) {
34 |    body {
35 |      background-color: lightblue;
36 |   }
37 | }
38 | ```
39 | 
40 | ## Responsive design for images and tables
41 | 
42 | For images, you can use the CSS `max-width` property to ensure that the image does not exceed the width of its container:
43 | 
44 | ```css
45 | img {
46 |    max-width: 100%;
47 |    height: auto;
48 | }
49 | ```
50 | 
51 | For tables, approaches to responsive design vary. A common approach is to convert the table into a list of key-value pairs on small screen devices:
52 | 
53 | ```css
54 | @media only screen and (max-width: 600px) {
55 |   td:before {
56 |     content: attr(data-label);
57 |     float: left;
58 |     text-transform: uppercase;
59 |     font-weight: bold;
60 |   }
61 | }
62 | ```
63 | 
64 | In the CSS above, `attr(data-label)` will replace the content before each `td` element with the value of its `data-label` attribute.
65 | 
66 | ## Summary
67 | 
68 | Responsive design and mobile HTML are important parts of modern web development. By understanding and using view windows, device-independent pixels, media queries, and responsive design for images and tables, you can create websites that provide a great user experience on any device and screen size.
69 | 


--------------------------------------------------------------------------------
/languages/en/11_Javascript/readme.md:
--------------------------------------------------------------------------------
 1 | # WTF HTML minimalist tutorial: 11. HTML and JavaScript
 2 | 
 3 | WTF HTML tutorial to help newcomers get started with HTML quickly.
 4 | 
 5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
 6 | 
 7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
 8 | 
 9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
10 | 
11 | ---
12 | 
13 | JavaScript is a lightweight programming language often used along with HTML and CSS to create interactive websites. In this chapter, we will introduce how to use the `<script>` tag to insert JavaScript in HTML, the HTML DOM model, and how to use JavaScript to manipulate HTML elements.
14 | 
15 | ## Insert JavaScript using the `<script>` tag
16 | 
17 | In HTML, we can insert JavaScript code using the `<script>` tag. The `<script>` tag can be placed in the `<head>` or `<body>` section of an HTML document. Usually, to avoid blocking the rendering of the page, we place the `<script>` tag at the end of the `<body>` tag.
18 | 
19 | Here's a simple example:
20 | 
21 | ```html
22 | <!DOCTYPE html>
23 | <html>
24 | <body>
25 | 
26 | <h2>HTML and JavaScript examples</h2>
27 | 
28 | <button onclick="displayDate()">Display date</button>
29 | 
30 | <script>
31 | function displayDate() {
32 |    document.getElementById("demo").innerHTML = Date();
33 | }
34 | </script>
35 | 
36 | </body>
37 | </html>
38 | ```
39 | In this example, when the user clicks the button, the JavaScript function `displayDate()` is executed, displaying the current date and time.
40 | 
41 | ## HTML DOM model
42 | 
43 | DOM (Document Object Model) is a cross-platform and language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.
44 | 
45 | The HTML DOM is a standard object model and programming interface. It converts the HTML document into a tree structure, where each node is an object representing a part of the HTML document.
46 | 
47 | ## Use JavaScript to manipulate HTML elements
48 | 
49 | JavaScript can access and change HTML elements through the HTML DOM. Here are some commonly used DOM methods:
50 | 
51 | - `document.getElementById(id)`: Returns a reference to the first object with the specified id.
52 | - `document.getElementsByClassName(name)`: Returns a NodeList containing all elements with the specified class name.
53 | - `document.getElementsByTagName(name)`: Returns a NodeList containing all elements with the specified tag name.
54 | - `document.querySelector(cssQuery)`: Returns the first element in the document that matches the specified CSS selector.
55 | - `document.querySelectorAll(cssQuery)`: Returns a NodeList of all elements in the document that match the specified CSS selector.
56 | 
57 | - These methods can be used to obtain HTML elements, which can then be modified using DOM properties and methods, such as changing the element's text content, attribute values, or styles.
58 | 
59 | For example, the following JavaScript code uses the `getElementById` method to obtain an element and modify the text content of the element:
60 | 
61 | ```html
62 | <!DOCTYPE html>
63 | <html>
64 | <body>
65 | 
66 | <h1 id="myHeading">Hello World!</h1>
67 | 
68 | <button onclick="changeText()">Click to change text</button>
69 | 
70 | <script>
71 | function changeText() {
72 |    var heading = document.getElementById("myHeading");
73 |    heading.innerHTML = "Hello WTF!";
74 | }
75 | </script>
76 | 
77 | </body>
78 | </html>
79 | ```
80 | 
81 | When the user clicks the button, the title on the page changes from "Hello World!" to "Hello WTF!".
82 | 
83 | ## Summary
84 | 
85 | HTML and JavaScript are two technologies that work closely together. JavaScript provides the ability to operate HTML elements, while the HTML DOM model provides us with a standard way to represent and operate HTML documents. Mastering these two techniques can help you create more dynamic and interactive websites.
86 | 


--------------------------------------------------------------------------------
/languages/en/12_CSS/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 12. HTML and CSS
  2 | 
  3 | 
  4 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  5 | 
  6 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  7 | 
  8 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
  9 | 
 10 | ---
 11 | 
 12 | CSS (Cascading Style Sheets) is a style sheet language used to describe the appearance and format of HTML or XML documents. In this chapter, we'll cover how to insert CSS in HTML using `<style>` and `<link>`, learn about CSS selectors and properties, and how to use CSS to lay out HTML elements.
 13 | 
 14 | ## Insert CSS using `<style>` and `<link>`
 15 | 
 16 | In HTML, we can insert CSS using `<style>` and `<link>` tags. Use the `<style>` tag to write CSS code inside an HTML document, while the `<link>` tag is used to link to external CSS files.
 17 | 
 18 | Here is an example of a `<style>` tag:
 19 | 
 20 | ```html
 21 | <!DOCTYPE html>
 22 | <html>
 23 | <head>
 24 |    <style>
 25 |      body {
 26 |        background-color: lightblue;
 27 |      }
 28 |      h1 {
 29 |        color: white;
 30 |        text-align: center;
 31 |      }
 32 |    </style>
 33 | </head>
 34 | <body>
 35 | 
 36 | <h1>Insert CSS using style tag</h1>
 37 | 
 38 | </body>
 39 | </html>
 40 | ```
 41 | 
 42 | Here is an example of a `<link>` tag:
 43 | 
 44 | ```html
 45 | <!DOCTYPE html>
 46 | <html>
 47 | <head>
 48 |    <link rel="stylesheet" href="styles.css">
 49 | </head>
 50 | <body>
 51 | 
 52 | <h1>Use the link tag to link to external CSS files</h1>
 53 | 
 54 | </body>
 55 | </html>
 56 | ```
 57 | 
 58 | In this example, "styles.css" is the path to the external CSS file.
 59 | 
 60 | ## CSS selectors and properties
 61 | 
 62 | CSS selectors are used to select HTML elements that you want to style. The most common selectors are element selectors, class selectors, ID selectors, attribute selectors, etc.
 63 | 
 64 | CSS properties define the style of an element. Each CSS declaration always contains a property and a value, separated by a colon `:`.
 65 | 
 66 | Here is an example of CSS selectors and properties:
 67 | 
 68 | ```css
 69 | body {
 70 |    background-color: lightblue;
 71 | }
 72 | h1 {
 73 |    color: white;
 74 |    text-align: center;
 75 | }
 76 | ```
 77 | 
 78 | In this example, "body" and "h1" are selectors, "background-color", "color" and "text-align" are attributes, and "lightblue", "white" and "center" are attribute values.
 79 | 
 80 | ## Layout HTML elements using CSS
 81 | 
 82 | CSS provides a variety of layout methods, including fluid layout, positioning layout, flex layout, grid layout, etc. Here, we briefly introduce flow layout and positioning layout.
 83 | 
 84 | Fluid layout is the basic layout method of CSS. All elements are in a flowing state by default, flowing from top to bottom, from left to right, like water. The width and height of an element can be set using the CSS "width" and "height" properties.
 85 | 
 86 | Positioned layout uses the CSS "position" property, which positions elements to relative or absolute positions. The value of the "position" attribute can be "static", "relative", "absolute", or "fixed".
 87 | 
 88 | Here is an example of using positioning layout:
 89 | 
 90 | ```html
 91 | <!DOCTYPE html>
 92 | <html>
 93 | <style>
 94 | div.relative {
 95 |    position: relative;
 96 |    width
 97 | 
 98 | : 400px;
 99 |    height: 200px;
100 |    border: 3px solid #73AD21;
101 | }
102 | 
103 | div.absolute {
104 |    position: absolute;
105 |    top: 80px;
106 |    right: 0;
107 |    width: 200px;
108 |    height: 100px;
109 |    border: 3px solid #73AD21;
110 | }
111 | </style>
112 | <body>
113 | 
114 | <h2>Layout HTML elements using CSS</h2>
115 | 
116 | <div class="relative">
117 |    <div class="absolute">This div element has position: absolute;</div>
118 | </div>
119 | 
120 | </body>
121 | </html>
122 | ```
123 | 
124 | In this example, the inner div element is positioned relative to the outer div element.
125 | 
126 | ## Summary
127 | 
128 | HTML and CSS are the cornerstones of web development. By studying this chapter, you should have learned how to insert CSS into HTML and how to use CSS selectors, properties, and layout techniques. Mastering this knowledge will help you create web pages with better style and layout.
129 | 


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/Uniswap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="icon" href="./img/icon.png">
 5 |     <title>Uniswap Interface</title>
 6 | </head>
 7 | <body>
 8 |     <div class="header">
 9 |         <img src="./img/icon.png" width="25"  alt="icon">
10 |         <div class="switchPage">
11 |             <a>Swap</a>
12 |             <a>Pool</a>
13 |             <a>Votes</a>
14 |             <a>Icons</a>
15 |         </div>
16 |         <div class="right">
17 |             <span class="changeNetwork">
18 |                 <img src="./img/ethereum.png" width="25" alt="eth">
19 |                 <span>Ethereum</span>
20 |             </span>
21 |             <button>Connect Wallet</button>
22 |             <button>···</button>
23 |         </div>
24 |     </div>
25 |     <div class="body">
26 |         <div class="swap-page">
27 |             <div class="swap-page-header">
28 |                 <span>Swap</span>
29 |                 <button>
30 |                     <img src="./img/setup.png" width="25"  alt="setup">
31 |                 </button>
32 |             </div>
33 |             <div class="swap-page-body">
34 |                 <div class="token1">
35 |                     <input type="text" inputmode="decimal" placeholder="0.0">
36 |                     <button>
37 |                         <div class="token-info">
38 |                             <img src="./img/ethereum.png" width="25" alt="eth">
39 |                             <span>ETH</span>
40 |                         </div>
41 |                     </button>
42 |                 </div>
43 |                 <button>
44 |                     <img src="./img/arrow.png" width="25" alt="arrow">
45 |                 </button>
46 |                 <div class="token2">
47 |                     <input type="text" inputmode="decimal" placeholder="0.0">
48 |                     <button>
49 |                         <div class="token-info">
50 |                             <span>Select Token</span>
51 |                         </div>
52 |                     </button>
53 |                 </div>
54 |             </div>
55 |             <div class="swap-page-footer">
56 |                 <button>Connect Wallet</button>
57 |             </div>
58 |         </div>
59 |         <div class="chooseLanguage">
60 |             <span>Available in Uniswap:</span>
61 |             <a href="">English</a>
62 |         </div>
63 |         <div class="gasPriceAndBlockNumber">
64 |             <a href="https://etherscan.io/gastracker"> 3 gwei</a>
65 |             <a href="">15687194</a>
66 |         </div>
67 |     </div>
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/9-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/9-1.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/9-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/9-2.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/9-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/9-3.jpg


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/9-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/9-4.jpg


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/9-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/9-5.jpg


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/9-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/9-6.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/arrow.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/ethereum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/ethereum.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/icon.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/img/setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/13_UniswapHTML/img/setup.png


--------------------------------------------------------------------------------
/languages/en/13_UniswapHTML/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 9. Uniswap page
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | In this lecture, we will combine and apply the knowledge from the previous 8 lectures and write a minimalist HTML page for the decentralized exchange [Uniswap](https://app.uniswap.org)
 14 | 
 15 | >Uniswap front-end page is written in React, here we reduce the difficulty and write it in HTML.
 16 | 
 17 | 
 18 | ## Analyze page structure
 19 | 
 20 | The HTML file determines the structure of the page, so when we get a page, we must first analyze its structure before writing.
 21 | 
 22 | ![Original image](./img/9-1.png)
 23 | 
 24 | We can split the Uniswap page into the following structure (boxes of the same color are at the same level):
 25 | 
 26 | ![Structure](./img/9-2.png)
 27 | 
 28 | Then we can draw the structure tree of the page:
 29 | 
 30 | ![Structure tree](./img/9-3.jpg)
 31 | 
 32 | After getting the structure tree, the structure of the page will be very clear. Let's start writing code.
 33 | 
 34 | ## Write code
 35 | 
 36 | ### `<head>`
 37 | 
 38 | In `<head>` we can set the `title` and icon of the page.
 39 | 
 40 | ```html
 41 | <link rel="icon" href="./img/icon.png">
 42 | <title>Uniswap Interface</title>
 43 | ```
 44 | 
 45 | ### Header structure
 46 | 
 47 | First we deal with the structure of the header, which contains three sub-elements. There is only one icon on the left, and a hyperlink for switching pages in the middle. The four hyperlinks are wrapped in a div. On the right, there are network, wallet connection buttons and menu buttons. These three elements are also wrapped in a div. The network contains `img` and `span` of ETH.
 48 | 
 49 | ```html
 50 | <header>
 51 |      <img src="./img/icon.png" alt="icon">
 52 |      <div class="switchPage">
 53 |          <a>Exchange</a>
 54 |          <a>Liquidity pool</a>
 55 |          <a>Vote</a>
 56 |          <a>icon</a>
 57 |      </div>
 58 |      <div class="right">
 59 |          <span class="changeNetwork">
 60 |              <img src="./img/ethereum.png" alt="eth">
 61 |              <span>Ethereum</span>
 62 |          </span>
 63 |          <button>Connect wallet</button>
 64 |          <button>···</button>
 65 |      </div>
 66 | </header>
 67 | ```
 68 | 
 69 | > Tips: In complex pages, we can use the HTML `class` attribute to specify the class of the element, and then `CSS` and `JavaScript` can use it to access and operate elements with specific class names.
 70 | 
 71 | The page effect is as follows:
 72 | 
 73 | ![Effect](./img/9-4.jpg)
 74 | 
 75 | ### Intermediate structure
 76 | 
 77 | Then there is the middle part, which also contains three directly adjacent sub-elements, namely the page for exchanging tokens, the language selection and gasFee and blockNumber in the lower right corner.
 78 | 
 79 | The page for redeeming tokens is relatively complicated. It has three parts: settings, token selection, and wallet connection.
 80 | 
 81 | The settings contain a `span` with the content `redeem` and a `button` used to change the settings. `button` contains an `img`.
 82 | 
 83 | ```html
 84 | <div class="swap-page-header">
 85 |      <span>Redeem</span>
 86 |      <button>
 87 |          <img src="./img/setup.png" alt="setup">
 88 |      </button>
 89 | </div>
 90 | ```
 91 | The code for selecting the token is almost the same, we only need to analyze half of it.
 92 | 
 93 | The upper part contains an `input` and a `button`. `button` contains `img` and `span` of ETH. These two elements can be wrapped with a `div` and `class` is set to` token-info`.
 94 | 
 95 | ```html
 96 | <div class="token1">
 97 |      <input type="text" inputmode="decimal" placeholder="0.0">
 98 |      <button>
 99 |          <div class="token-info">
100 |              <img src="./img/ethereum.png" alt="eth">
101 |              <span>ETH</span>
102 |          </div>
103 |      </button>
104 | </div>
105 | ```
106 | 
107 | The structure connected to the wallet at the bottom is relatively simple, with only one `button` inside.
108 | 
109 | ```html
110 | <div class="swap-page-footer">
111 |      <button>Connect wallet</button>
112 | </div>
113 | ```
114 | 
115 | The language selection part contains a `span` and a hyperlink, which is used to change the language of the page. The `href` of the hyperlink needs to fill in an English version of the Uniswap web page link, which we will not fill in here.
116 | 
117 | ```html
118 | <div class="chooseLanguage">
119 |      <span>Uniswap is available:</span>
120 |      <a href="">English</a>
121 | </div>
122 | ```
123 | 
124 | The gasFee and blockNumber parts contain two hyperlinks for jumping to the corresponding etherscan page. The `href` of the second hyperlink is dynamically adjusted by JavaScript, so we will not fill it in here. At the same time, the contents of the two hyperlinks are also dynamically input by JavaScript. Here we fill in fixed values ​​for the time being.
125 | 
126 | ```html
127 | <div class="gasPriceAndBlockNumber">
128 |      <a href="https://etherscan.io/gastracker">3 gwei</a>
129 |      <a href="">15687194</a>
130 | </div>
131 | ```
132 | 
133 | At this point, Uniswap’s minimalist HTML page code has been written, and we can open it in the page to view the effect.
134 | 
135 | ![Effect](./img/9-5.jpg)
136 | 
137 | As you can see, our page is very ugly and basically has no functions. This requires us to add CSS and JavaScript to it later.
138 | 
139 | ## Exercises
140 | 
141 | Modify the HTML code and change the minimalist Uniswap page to the [SushiSwap](https://www.sushi.com/swap) page.
142 | 
143 | ![](./img/9-6.png)
144 | 
145 | ## Summary
146 | 
147 | In this lecture, we use the HTML knowledge learned in the previous 8 lectures to write a minimalist HTML page for Uniswap. We will continue to improve it in `WTF-CSS` and `WTF-JavaScript` later.
148 | 


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/BAYC.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <link rel="icon" href="./img/icon.png">
 7 |     <title>BAYC</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <div class="header">
12 |         <img src="./img/bayc-logo.webp" alt="bayc-logo">
13 |         <div class="socialMedia">
14 |             <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
15 |                 <img src="./img/youtube.png" alt="youtube">
16 |             </a>
17 |             <a href="https://boredapeyachtclub.com/#/">
18 |                 <img src="./img/instagram.png" alt="instagram">
19 |             </a>
20 |             <a href="https://discord.com/invite/3P5K3dzgdB">
21 |                 <img src="./img/discord.png" alt="discord">
22 |             </a>
23 |             <a href="https://twitter.com/BoredApeYC">
24 |                 <img src="./img//twitter.png" alt="twitter">
25 |             </a>
26 |         </div>
27 |     </div>
28 |     <div class="body">
29 |         <div class="welcome">
30 |             <video autoplay loop>
31 |                 <source src="https://ik.imagekit.io/bayc/assets/club-landing.mp4" type="video/mp4">
32 |             </video>
33 |             <div class="mint">
34 |                 <h1>
35 |                     WELCOME TO <br />THE BORED APE<br /> YACHT CLUB
36 |                 </h1>
37 |                 <button>Mint</button>
38 |             </div>
39 |         </div>
40 |         <div class="description">A limited NFT collection where the token itself doubles as your membership to a
41 |             swamp club for apes. The club is open! Ape in with us.
42 |         </div>
43 |     </div>
44 |     <div class="footer">
45 |         <div class="line"></div>
46 |         <div class="info">
47 |             <div class="email">
48 |                 <div class="get-on-the-list">GET ON THE LIST</div>
49 |                 <div class="getEmail">
50 |                     <input type="email" placeholder="Email Address" required value>
51 |                     <button type="submit">➡</button>
52 |                 </div>
53 |             </div>
54 |             <img src="./img/bayc-footer.webp" alt="bayc-footer">
55 |             <div class="others">
56 |                 <div>
57 |                     <div class="socialMedia">
58 |                         <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
59 |                             <img src="./img/youtube.png" alt="youtube">
60 |                         </a>
61 |                         <a href="https://boredapeyachtclub.com/#/">
62 |                             <img src="./img/instagram.png" alt="instagram">
63 |                         </a>
64 |                         <a href="https://discord.com/invite/3P5K3dzgdB">
65 |                             <img src="./img/discord.png" alt="discord">
66 |                         </a>
67 |                         <a href="https://twitter.com/BoredApeYC">
68 |                             <img src="./img//twitter.png" alt="twitter">
69 |                         </a>
70 |                     </div>
71 |                 </div>
72 |                 <div>
73 |                     <div class="copyright">
74 |                         © 2021 Yuga Labs LLC
75 |                     </div>
76 |                 </div>
77 |                 <div>
78 |                     <a href="https://boredapeyachtclub.com/#/terms">BAYC Terms & Conditions</a>
79 |                 </div>
80 |                 <div>
81 |                     <a href="https://boredapeyachtclub.com/#/mayc/terms">MAYC Terms & Conditions</a>
82 |                 </div>
83 |             </div>
84 |         </div>
85 |     </div>
86 | </body>
87 | 
88 | </html>
89 | 


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-1.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-10.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-11.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-2.jpg


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-3.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-4.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-5.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/10-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/10-6.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/bayc-footer.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/bayc-footer.webp


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/bayc-logo (1).webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/bayc-logo (1).webp


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/bayc-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/bayc-logo.webp


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/discord.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/discord.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/icon.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/instagram.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/twitter.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WTFAcademy/WTF-HTML/20d8015e5ae888ea223f603964e623612cc3bfa8/languages/en/14_BAYCHTML/img/youtube.png


--------------------------------------------------------------------------------
/languages/en/14_BAYCHTML/readme.md:
--------------------------------------------------------------------------------
  1 | # WTF HTML minimalist tutorial: 14. BAYC official website
  2 | 
  3 | WTF HTML tutorial helps newcomers get started with HTML quickly.
  4 | 
  5 | **Twitter**: [@WTFAcademy_](https://twitter.com/WTFAcademy_) | [@0xAA_Science](https://twitter.com/0xAA_Science)
  6 | 
  7 | **WTF Academy Community:** [Official website wtf.academy](https://wtf.academy) | [WTF Solidity Tutorial](https://github.com/AmazingAng/WTFSolidity) | [discord](https: //discord.gg/5akcruXrsk) | [WeChat group application](https://docs.google.com/forms/d/e/1FAIpQLSe4KGT8Sh6sJ7hedQRuIYirOoZK_85miz3dw7vA1-YjodgJ-A/viewform?usp=sf_link)
  8 | 
  9 | All codes and tutorials are open source on github: [github.com/WTFAcademy/WTF-HTML](https://github.com/WTFAcademy/WTF-HTML)
 10 | 
 11 | ---
 12 | 
 13 | In this lecture, we will write a minimalist HTML page for [BAYC official website](https://boredapeyachtclub.com/)
 14 | 
 15 | >BAYC official website is also written in React. Here we reduce the difficulty and write it in HTML.
 16 | 
 17 | ## Analyze page structure
 18 | 
 19 | The HTML file determines the structure of the page, so when we get a page, we must first analyze its structure before writing.
 20 | 
 21 | ![Original image](./img/10-1.png)
 22 | 
 23 | We can split the Uniswap page into the following structure (boxes of the same color are at the same level):
 24 | 
 25 | ![Structure](./img/10-2.jpg)
 26 | 
 27 | Then we can draw the structure tree of the page:
 28 | 
 29 | ![Structure tree](./img/10-3.png)
 30 | 
 31 | After getting the structure tree, the structure of the page will be very clear. Let's start writing code.
 32 | 
 33 | ## Write code
 34 | 
 35 | ### `<head>`
 36 | 
 37 | In `<head>` we can set the `title` and icon of the page.
 38 | 
 39 | ```html
 40 |      <link rel="icon" href="./img/icon.png">
 41 |      <title>BAYC</title>
 42 | ```
 43 | ### Header structure
 44 | 
 45 | ![Head](./img/10-4.png)
 46 | 
 47 | First we deal with the header structure. This part includes a bayc-logo and social media. The social media are all contained in a `div` with a class name of `socialMedia`. The structure of each social media is a nested `a` an `img`
 48 | 
 49 | ```html
 50 |      <div class="header">
 51 |          <img src="./img/bayc-logo.webp" alt="bayc-logo">
 52 |          <div class="socialMedia">
 53 |              <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
 54 |                  <img src="./img/youtube.png" alt="youtube">
 55 |              </a>
 56 |              <a href="https://boredapeyachtclub.com/#/">
 57 |                  <img src="./img/instagram.png" alt="instagram">
 58 |              </a>
 59 |              <a href="https://discord.com/invite/3P5K3dzgdB">
 60 |                  <img src="./img/discord.png" alt="discord">
 61 |              </a>
 62 |              <a href="https://twitter.com/BoredApeYC">
 63 |                  <img src="./img//twitter.png" alt="twitter">
 64 |              </a>
 65 |          </div>
 66 |      </div>
 67 | ```
 68 | 
 69 | ### Intermediate structure
 70 | 
 71 | ![middle](./img/10-5.png)
 72 | 
 73 | Then there is the middle part, which contains a welcome screen and a self-description. Self-description is very simple, you can use `div` or `p`; the background of the welcome interface is a `video`, and then the lower left corner is the `mint` interface, which contains a welcome message and a `button`, the welcome message is ` div`, `p`, `h1` are all acceptable
 74 | 
 75 | ```html
 76 |      <div class="body">
 77 |          <div class="welcome">
 78 |              <video autoplay loop>
 79 |                  <source src="https://ik.imagekit.io/bayc/assets/club-landing.mp4" type="video/mp4">
 80 |              </video>
 81 |              <div class="mint">
 82 |                  <h1>
 83 |                      WELCOME TO <br />THE BORED APE<br /> YACHT CLUB
 84 |                  </h1>
 85 |                  <button>Mint</button>
 86 |              </div>
 87 |          </div>
 88 |          <div class="description">A limited NFT collection where the token itself doubles as your membership to a
 89 |              swamp club for apes. The club is open! Ape in with us.
 90 |          </div>
 91 |      </div>
 92 | ```
 93 | 
 94 | ### Tail structure
 95 | 
 96 | ![Tail](./img/10-6.png)
 97 | 
 98 | The tail occupies less space, but has more content and a more complex structure.
 99 | 
100 | First, it can be roughly divided into the above dividing line and the remaining `div` whose class name is `info`
101 | 
102 | The code for the dividing line can be written as `<div class="line"></div>`. Leave the content in the tag blank. You can draw this line through CSS later.
103 | 
104 | `info` can be divided into three parts - the mailbox on the left, `img` in the middle and other information on the right
105 | 
106 | The mailbox part is divided into a prompt `GET ON THE LIST` above and a fill-in box below. The fill-in box contains an `input` and a `button` with a value of `➡`
107 | 
108 | Finally, there is other information on the right. Each line can be written with `div`. The first line is also social media. The structure is similar to the above, so I won’t go into details here.
109 | 
110 | ```html
111 |      <div class="footer">
112 |          <div class="line"></div>
113 |          <div class="info">
114 |              <div class="email">
115 |                  <div class="get-on-the-list">GET ON THE LIST</div>
116 |                  <div class="getEmail">
117 |                      <input type="email" placeholder="Email Address" required value>
118 |                      <button type="submit">➡</button>
119 |                  </div>
120 |              </div>
121 |              <img src="./img/bayc-footer.webp" alt="bayc-footer">
122 |              <div class="others">
123 |                  <div>
124 |                      <div class="socialMedia">
125 |                          <a href="https://www.youtube.com/channel/UCB6R9NAjkgxQi_QEkc4O25Q">
126 |                              <img src="./img/youtube.png" alt="youtube">
127 |                          </a>
128 |                          <a href="https://boredapeyachtclub.com/#/">
129 |                              <img src="./img/instagram.png" alt="instagram">
130 |                          </a>
131 |                          <a href="https://discord.com/invite/3P5K3dzgdB">
132 |                              <img src="./img/discord.png" alt="discord">
133 |                          </a>
134 |                          <a href="https://twitter.com/BoredApeYC">
135 |                              <img src="./img//twitter.png" alt="twitter">
136 |                          </a>
137 |                      </div>
138 |                  </div>
139 |                  <div>
140 |                      <div class="copyright">
141 |                          © 2021 Yuga Labs LLC
142 |                      </div>
143 |                  </div>
144 |                  <div>
145 |                      <a href="https://boredapeyachtclub.com/#/terms">BAYC Terms & Conditions</a>
146 |                  </div>
147 |                  <div>
148 |                      <a href="https://boredapeyachtclub.com/#/mayc/terms">MAYC Terms & Conditions</a>
149 |                  </div>
150 |              </div>
151 |          </div>
152 |      </div>
153 | ```
154 | 
155 | At this point, BAYC's minimalist HTML page code has been written, and we can open it in the page to view the effect.
156 | 
157 | ![Effect](./img/10-10.png)
158 | 
159 | As you can see, our page is very ugly and basically has no functions. This requires us to add CSS and JavaScript to it later.
160 | 
161 | ## Exercises
162 | 
163 | Modify the HTML code to change the minimalist BAYC page to a [doodles](https://doodles.app/) page.
164 | 
165 | ![](./img/10-11.png)
166 | 
167 | ## Summarize
168 | 
169 | In this lesson, we used the HTML knowledge we learned to write a BYAC minimalist HTML page. We will continue to improve it in `WTF-CSS` and `WTF-JavaScript` later.
170 | 


--------------------------------------------------------------------------------
/languages/en/readme.md:
--------------------------------------------------------------------------------
1 | WTF HTML tutorial, helping beginners to quickly get started with HTML and complete a minimalist version of the Uniswap and BAYC page.
2 | 
3 | English traanslation reviewed by [@Mofasasi](https://twitter.com/mofasasi)
4 | 
5 | Join english community on [Discord](https://discord.gg/NszjsvgqkX)
6 | 


--------------------------------------------------------------------------------