Web 0x1

點開你的網頁技能樹

講者：YuKAi

前測表單

Outline

認識網頁組成
HTML
CSS
Git & GitHub

環境設定

VS Code

Live Server

Dev Tools

Live Server 另一種安裝方式

從 VS Code 插件安裝

於 VS Code 擴充元件搜尋 Live Server

將 Live Server 設為 Enabled

開啟資料夾並創建 index.html 檔案

可以點擊右下角的 Go Live 來查看網頁畫面

接下來每修改完程式記得要 Ctrl + S 存檔，瀏覽器才會自動幫你重新整理

Git

Github

網頁組成

網頁前端三寶

當你寫網頁越久後會發現...

Hyper Text Markup Language

組成網頁的架構
由許多 Element 組成
~~程式語言~~

HTML 語法結構

Opening Tag

Closing Tag

Content

Element

Attribute

來寫億點 HTML 吧

HTML Base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

# HTML CODE

VS Code 小技巧 html:5

HTML Base 到底寫了啥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - Doctype

用來定義這份 HTML 是基於什麼規則寫的

其他例如：定義以 XML 1.0 寫成

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML Basic 1.0//EN"
  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - html

HTML 的根元素（Root Element），也就是最外層

常見 Attribute

lang：表示網頁以什麼語言為主

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - head

存放網頁的重要資訊

以下為幾種常見重要資訊的類型

Metadata
Title
Link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - metadata

用來提供網頁附加訊息，不會顯示在網頁上

charset：字元編碼方式
viewport：網頁縮放規則
author：作者
description：網頁說明
keywords：網頁關鍵字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - metadata

網頁的標題，用於搜尋結果、網頁的 Tab、書籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  	<link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" />
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - link

網頁引入外部檔案

rel：與網頁的關係
- stylesheet：樣式表
- icon：網頁圖標
href：外部檔案來源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  	<link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" />
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
</html>

HTML Base - body

主要寫網頁 HTML 的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  	<link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" />
</head>
<body>
    <!--網頁內容的 HTML 寫在這裡-->
</body>
<style></style>
<script src="main.js"></script>
</html>

HTML Base - style、script

style：可以在 HTML 裡面寫 CSS 的地方
script：可以在 HTML 裡面寫 JavaScript 的地方，也可以用來引入外部 JavaScript 檔案

常見的 HTML Element

Text： <h1> ~ <h6>、<p>

# HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>I'm H1</h1>
    <h2>I'm H2</h2>
    <h3>I'm H3</h3>
    <h4>I'm H4</h4>
    <h5>I'm H5</h5>
    <h6>I'm H6</h6>
    <p>I'm p</p>
</body>
</html>

Link： <a>

# HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://hackersir.org">黑客社網站</a>
</body>
</html>

Image： <img>

# HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://truth.bahamut.com.tw/s01/202208/30977096791cc69a2e9cf793266c9623.JPG?w=1000" width="300" height="300"/>
</body>
</html>

<a> + <img>

# HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://http.cat/" target="_blank">
        <img width="300" height="300" src="https://imgur.com/syuF8BI.jpg">
    </a>
</body>
</html>

區塊的 HTML Element

<div>

# HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img width="200" height="200" src="https://hackersir.org/2022/static/image/HackerSir_Circle.png" alt="">
    </div>
    <div>
        <h1>小黑</h1>
        <p>他很可愛</p>
    </div>
</body>
</html>

其他區塊類型的 Element

section

header

footer

span

nav

article

...

互動類的 Element

input

button

dialog

textarea

form

...

Code Link

Cascading Style Sheets

讓你的網頁好看很多
定義 Element 長怎樣
也不是程式語言，所以我都寫 SASS

Code Link

CSS 語法結構

來寫「億」點 CSS 吧

將 CSS 加入 HTML

在 HTML 的 <style>

<style>
    h1{
        color: red;
        background-color:cyan;
    }
    p{
        color:green;
    }
</style>

用 Attribute 設定

<body>
    <div>
        <img width="200" height="200" src="https://hackersir.org/2022/static/image/HackerSir_Circle.png" alt="">
    </div>
    <div>
        <h1 style="color: red; background-color: cyan;">小黑</h1>
        <p style="color: green">他很可愛</p>
    </div>
</body>

外部引入 CSS

h1{
    color: red;
    background-color:cyan;
}
p{
    color:green;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>
</head>