網頁基礎

Eating

網頁基礎

網頁基礎

講師

Eating

藍翊庭

講師

jx06

Typescript

React

Tailwind

Python  

DC bot

Machine Learning

UI/UX

競程菜

網頁

地社

目錄

目錄

  1. 網頁是啥
  2. HTML 為啥出現
  3. HTML 標籤
  4. HTML 結構
  5. 寫網頁
  6. F12
  7. Github

網頁是啥

網頁是啥

HTML 為啥出現

HTML 為啥出現

HTML 標籤

HTML 標籤

HTML標籤

HTML標籤

<h1>這是標題</h1>
<p>這是段落文字</p>
<button>
  	<span>點我</span>
	<img src="photo.jpg" alt="照片">
</button>
<input type="text" placeholder="請輸入文字">

上面這些用 大於小於 框起來的東西我們稱為「HTML 標籤」

而 大於小於 中間的文字就是標籤的「名稱」

舉例來說 <h1> 會被稱為 H1 標籤或是標題標籤

另外由 大於和斜線加上小於 框起來的東西則是「結尾標籤」

所以 </h1> 就是 H1 標籤的結尾標籤

標籤和結尾標籤中間放的東西則稱為「內容」

標籤

內容

結尾標籤

HTML標籤

HTML標籤

<h1>這是標題</h1>
<p>這是段落文字</p>
<button>
  	<span>點我</span>
	<img src="photo.jpg" alt="照片">
</button>
<input type="text" placeholder="請輸入文字">

像是這個就是「P 標籤」或是稱為「段落標籤」

標籤

內容

結尾標籤

效果範例

HTML標籤

HTML標籤

<h1>這是標題</h1>
<p>這是段落文字</p>
<button>
  	<span>點我</span>
	<img src="photo.jpg" alt="照片">
</button>
<input type="text" placeholder="請輸入文字">

透過結尾標籤，我們可以把更多東西放在標籤中變成內容。

像是這個 按鈕標籤 的 內容 就包含了 span標籤 和 img 標籤

標籤

內容

效果範例

結尾標籤

HTML標籤

HTML標籤

<h1>這是標題</h1>
<p>這是段落文字</p>
<button>
  	<span>點我</span>
	<img src="photo.jpg" alt="照片">
</button>
<input type="text" placeholder="請輸入文字">

除了 內容 外，標籤還可能會包含其他的「屬性」，屬性就是一些可以額外設定的東東，像是 input 標籤其中一個屬性是 type 我們要設定他的時候就會寫 type="要設定的值" 像是 type="text" 意思就是設定這個輸入框的種類為「文字」

屬性>type

沒有結尾標籤

屬性>placeholder

type="text"

type="date"

type="color"

H1標籤

<h1>這是標題</h1>
<h2>這是次標題</h2>

沒啥好說，有 h1、h2 到 h6 可以用，理論上會越來越小

H1標籤

P標籤

<p>這是文字段落，這是文字段落，這是文字段落</p>

沒啥好說，裡面可以放文字或是其他標籤。

文章的不同段落應該要放在不同的 p 標籤中

P標籤

Button標籤

<button name="button">Press!</button>
<button type="reset" disabled >按我</button>

常用的屬性有一個是 disabled 加上去之後就代表按鈕不能點

然後 name 和 type 屬性有點複雜可以參考：

<form>：表單元素 - HTML：超文本標記語言 | MDN

啊先不要管他也行

Button標籤

Input標籤

<input type="text" required minlength="4" maxlength="8" size="10" placeholder="請輸入4~8個字"/>

有超多屬性，除了剛剛講的 type 屬性以外，不同 type 的 input 還會有各自的屬性。上面的例子是文字輸入框的其他屬性。

大概意思是 必填 要輸入 4~8 個字 預設大小是 10 個字寬 並且會提示使用者輸入 4~8 個字。

Input標籤

佔位符

Div標籤

<div>
  <div></div>
  <div></div>
</div>

div (Division) 標籤不會顯示東西，他是拿來把其他標籤分組用的。

會用 div 排出布局後再填入按鈕之類的東西。

Div標籤

A標籤

<a href="https://www.google.com" target="_blank">前往 Google</a>
<a href="about.html">關於我們</a>

a 是 Anchor，反正叫他超連結標籤，啊 href 就是超連結要連到的地方，可以填完整網址如果不填完整網址就代表是連結到這個網站的其他頁面。

target="_blank" 的意思就是在新分頁開啟連結，很常用。

A標籤

Img標籤

<img src="https://placehold.co/600x400" alt="600x400 灰色佔位圖片">
<img src="images/cat.png" alt="一隻貓躺在沙發">

顯示圖片，src (Source) 代表圖片的來源路徑，可以填完整網址他就會顯示那個網址代表的圖片。也可以填寫不完整的網址，代表顯示的圖片是在本地。

alt 則是替代文字 (Alternative Text)，當圖片顯示不出來的時候（可能網路不好）替代文字就會顯示，此外螢幕閱讀程式也會朗讀 alt 屬性的文字。

Img標籤

圖片路徑無效時也會顯示替代文字

Ul、Ol、Li標籤

<ul>
  <li>第一個項目</li>
  <li>第二個項目</li>
  <li>第二個項目</li>
</ul>
<ol>
  <li>第一個項目</li>
  <li>第二個項目</li>
</ol>

ul (Unordered List) 是無序清單，ol 則是有序清單，清單裡面每一項就是 li (List Item)

Ul、Ol、Li標籤

Table標籤

<table>
  <tr>
    <th>課程名稱</th>
    <th>時數</th>
    <th>價格</th>
  </tr>
  <tr>
    <td>HTML 入門</td>
    <td>1.5 小時</td>
    <td>$1,000</td>
  </tr>
 	...
</table>

Table標籤

其他標籤

span

select

link

hr

br

pre

audio

video

form

strong

code

b

其他標籤

i

textarea

details

搜尋 MDN + 要查的標籤就會有完整介紹

HTML 結構

HTML 結構

<!DOCTYPE html> <!-- 告訴瀏覽器這是 HTML 格式 -->
<html lang="en"> <!-- 告訴瀏覽器整份文件的開頭 -->
<head> <!-- 放一些偏向設定的資料 -->
  
  	<!-- 設定網頁的編碼為 UTF-8，支援中文 -->
    <meta charset="UTF-8"> 
    
  	<!--讓網頁顯示正常縮放之類的 -->
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>網頁標題</title>
  
  	<!--引入 css -->
    <link rel="stylesheet" href="/style.css">

</head>
<body> <!--放使用者真正看的到的東西的地方 -->
    
  	<h1>主標題</h1> <!-- 標題 -->
    <p>段落文字</p>

</body>
</html> <!-- 整份文件的結束 -->

網站設定

網站內容

網站標題

來做網站吧!

  1. 裝 vs code
  2. 寫一個介紹自己的網站
  3. 盡量用到上面介紹的標籤
  4. 之後會教你們美化他然後讓你們可以分享給別人

來做網站吧!

寫網頁

寫網頁

寫網頁

打開那個全白的網頁後就可以開始寫自我介紹

不知道有甚麼能寫的話可以隨便寫某個別的東西的介紹

 

你可以：

先放張圖片

寫一下你的名字

介紹一下自己（記得分段）

列出你的興趣

放一些超連結給別人

或放個表格但我也不知道要寫啥

 

範例：關於建中

寫網頁

F12

F12

Github

Github

Github

我們要把今天做的東西用到 github 上

github 是一個很方便的雲端硬碟（？

他與 git 版本管理系統整合，是每個寫程式的人必須要會的技能

等一下會用最簡單的方式把剛剛寫好的程式碼存到上面

下周會再跟大家說怎麼把它「正確的」下載下來

如果有人想在家繼續做的話可以先看：

VSCode與Github新專案設定詳細步驟紀錄 - 陳國仁 - Medium

Git 與 GitHub 起手式 - Medium

有問題去 DC 問

Github

GitHub 官網：https://git-scm.com/

下載他

一直按 NEXT 直到右下這頁可以把設定改成這樣，然後繼續一直按 NEXT 就好

最後這兩個不要勾，按 Install

沒註冊過的就註冊！然後登入

記住你用來註冊的 Email !

去查 GitHub 官網

點這個

然後吃 error

去終端機輸入指令

git config --global user.email "你 github 帳號的 email"
git config --global user.name "你 github 帳號的名字"

再點一次這個

然後點這個

然後按這個

換吃這個通知不管他按 Allow 就對了

他就會跳到瀏覽器要你登入

在這裡寫點東西

最後點下面這個

看看他是否出現在這

區域網路

區域網路

區域網路

反正就是，前面有說 Live Server 這個擴充可以暫時的把你的電腦變成伺服器，那是不是說我今天也可以像看其他網站一樣透過手機連接剛剛自己寫的網站呢？

其實沒那麼簡單，現在有太多個裝置連到網路上了，如果每個裝置都能夠被其他任意裝置連接到第一是不安全，第二是 ip 的地址很有可能不夠用。

所以現實的情況是：

區域網路

大家都能連的網路

區域網路

有自己的內部 ip

有定位伺服器的 ip

區域網路

局域網路中的 ip 通常是「192.168.𝑥.𝑥」

像現在這個電腦教室中的所有電腦都是在同一個區域網路下

而外部網路的 ip 比較沒有固定格式

像是「163.21.241.35」就是台北市政府的 ip

 

要怎麼看自己的 ip 呢？右鍵點左下角跳出的選單點終端機，然後輸入：

區域網路

區域網路

所以說，其實你們可以透過電腦去看別人的網站！

（只要他 Live Server 開著而且有作下面這個設定）

只要在瀏覽器輸入對方電腦的 ip加上:5500 就好）

區域網路

修改後要重開

耶講完了

Eating

耶講完了

耶講完了

丟些參考和好看的

  1. web我的暑訓簡報
  2. Document 這個簡報中的範例
  3. Publish a Git Repository from VSCode to GitHub 前面步驟的影片版
  4. Coding2GO - YouTube 好頻道
  5. Progress Bar 進度條線上課程 - YouTube 很多東西，品質我也不知道

web-1

By 翊庭jx06 T

Made with Slides.com

web-1

  • 57

More from 翊庭jx06 T