HTML&CSS
by Welly
注意事項
注意事項
1.簡報大多來源是從網路截下來的，所以有在下方有放上原文網址及連結
2.講師如果語速過快可以跟講師反應，如果害羞可以連續按兩下舉手，就看不到你的名子拉~
3.如果對課堂有人麼疑問可以提出，最好直接開麥，但害羞還是可以打字 ，但就未必能答覆(因為我會看不到>____<
簡介
introduce!
超文本標記語言(HTML
- 簡單而言就是一種可用以建立網頁的標記語言，其內容包括嵌入圖像、建立表單、表格等等。
- 可與CSS、Javascript合用，最近流行使用HTML編撰架構，以CSS補上外觀等細節
- 語言形式為以尖括號包圍的HTML元素
編譯器
compiler
線上編譯器
編譯器
其實用電腦裡的記事本就可以完成了!
使用記事本編輯html
- 打開你的記事本
- 編輯內容
- 儲存(記得編碼要改成UTF-8!!!
- 將副檔名改為"html"
- 打開試試~
實作一次八~(5min
註解
comments
<!--註解-->
起手式
每次必打!背下來就對了
起手式
<!DOCTYPE HTML> <!--告訴瀏覽器接下來要處理的是HTML內容-->
<html> <!--表示HTML內容的開始-->
<head> <!--就是要打www-->
<meta charset="utf-8"/><!--聲明此頁面使用的編碼是UTF-8編碼-->
<title>最基本的空白頁</title> <!--一定要打-->
<style type="text/css"> <!--CSS的內容-->
</style>
<script>
<!--稍後會提-->
</script>
</head>
<body>
<!--網頁內文-->
</body>
</html>起手式--乾淨版(?
<!DOCTYPE HTML> <!--告訴瀏覽器接下來要處理的是HTML內容-->
<html> <!--表示HTML內容的開始-->
<head> <!--就是要打www-->
<meta charset="utf-8"/><!--聲明此頁面使用的編碼是UTF-8編碼-->
<title>最基本的空白頁</title> <!--一定要打-->
</head>
<body>
<!--網頁內文-->
</body>
</html>實際打一次八~(5min
元素
element
元素(element
元素是一種向瀏覽器說明文檔內容的工具，其效果體現在內容之上。不同的元素有不同的確切含意。
-->
簡單來說就是告訴電腦包在中間的這個東東是甚麼www
(標籤+內容+標籤=元素!)
special thank:HTML5權威指南
元素
code元素
physical base
又稱格式標籤
所夾內容無特別意義僅為了改變外觀(ex.<b>)
-->可加粗但無特別意義
content base
又稱語意標籤
所夾內容具特殊意義，系統可依其特殊意義作出外觀上的應對 (ex.<strong>)
-->表示強調，系統會知道這別重要
常用標籤
| 標籤 | 用途 |
|---|---|
| <p> | 段落文字 |
| <h1>~<h6> | 標題(數字越小字越大 |
| <img> | 嵌入圖片 |
| <a> | 超連結 |
| <div> | 區塊元素 |
| <span> | 行內元素 |
| <script> | 可用以加入程式碼(Javascript |
| <title> | 設置文檔的標題或名稱 |
| <input> | 供用戶輸入資料 |
| <button> | 提交表單 |
| <a> | 產生超連結 |
段落文字<p>
- <p>標籤是呈現網頁段落文字的標籤，文字段落大多都使用這個標籤，所以你在的網頁原始碼中，會看到許多<p></p>的標籤，以讓瀏覽器呈現出各個段落文字在網頁上。
- 使用p來代表段落文字是來自於paragraph這個單字，以第一個字母p來代表。
- ex：<p>文字</p>
標題<h1>~<h6>
-
代表標題的標籤有六個，分別從<h1>、<h2>依序到<h6>，<h1>代表這個網頁中主要標題。就像是文章的題目、一份工作報告的標題，都只會有一個，所以網頁的<h1>建議只用1次，瀏覽器與搜尋引擎才會知道你的主要標題是什麼，有利於搜尋引擎優化(SEO)。
-
數字越小，字越大
-
使用h來代表標題主要是使用標題的英文heading來表示，取單字的第一個字母h作為標題的標籤。
-
h6比p小 www
-
ex：<h3>標題</h3>
圖片<img>
- 想在網頁放上圖片，你可以使用<img>標籤，這個標籤不需要開頭與結尾標籤，<img>只需要單獨一個標籤就可以發揮功能了。
- <img>標籤的使用上，主要在使用標籤的屬性(attributes)，屬性包括圖片檔案來源src、圖片替代文字alt、高度height、寬度width。
- img其實就是圖片的英文單字image之意，取這個單字的前三個字母代表。同樣的，屬性名稱src就是來源檔案的意思source file，alt是alternative text替代文字，height與width則是高度與寬度的英文。
圖片<img>
- ex：<img src="dog.jpg" alt="dog" height="100" width="150">
區塊元素<div>
- 大致等於<p>
- division是區分的意思，<div>標籤主要的功能就是在形成一個個的區塊
行內元素<span>
- HTML span 標籤是一個＂區域＂形態，也就是一個 span 標籤組只會佔用自己本身的空間，不會像 DIV 標籤那樣一次佔掉一整行的空間
<span> v.s <div>
小小實作~
要求
1.內容:自我介紹
2.名字要用紅色背景
(參考上上一張會有小驚喜~
3.要用到一次換行
(不能用分開的p! > <
4.至少一張圖片
(關於甚麼的都可以
*參考*底線是<hr>
10min實作~
答案
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>最基本的空白頁</title>
<style type="text/css">
</style>
</head>
<body>
<h1>我</h1>
<hr>
<p>我的名字是<span style="background-color:#F9D9CA">胡恩綺</span></p>
<p>我喜歡<div>看梗圖</div>!</p>
<p/>
<img src="meme.jpg" alt="meme">
<!--網頁內文-->
</body>
</html>腳本<script>
- 使用<script>元素可嵌入或引入腳本(程式碼?)(常用Javascript)
- ex.<script>
document.write("This is form the script");
</script>
(內嵌)
- 要用引入則需要使用src
Javascript語法
special thank:HTML5權威指南
標題<title>
- title元素的作用是設置文檔的標題或名稱，瀏覽器通常將該元素的內容顯示在其窗口頂部或標籤頁的標籤上，放在<head>裡面
- ex.<title>Youtube</title>
special thank:HTML5權威指南
標題--YT
輸入(? <input>
- <input> 標籤可以說是表單 <form> 裡面最重要的標籤了，<input> 可以用來建立非常多不同用途的表單控制元件 (form control)
按鈕(? <button>
- 在button 元素內部，可以放置內容，比如文本或圖像。這是該元素與使用input 元素創建的按鈕之間的不同之處。
- <button> 與</button> 標籤之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，圖像或文字都可以。
- 可以用以送出表單
https://www.fooish.com/html/input-tag.html --><button>
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input/submit --><input type="button">
按鈕(? <button>
- <button>想在按鈕上顯示的文字</button>-->按鈕上為文字
- <button><img src="圖片網址"></button>-->按鈕上為圖片
超連結 <a>
- 可以用以生成超連結
- ex.<a href="網址">連結名稱</a>
超連結
小小實作~
要求:惡搞校網就對了www
(5min
屬性
Attributes
屬性(Attributes
HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。
屬性(Attributes
HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。
屬性(Attributes
-->簡單而言(?：對元素進行配置
常用屬性
| 屬性 | 用途 |
|---|---|
| name | 分配標示符給元素 |
| id | 分配唯一的標示符給元素 |
| class | 將元素歸類 |
| href | 連結網址 |
id
- 幫元素取編碼的概念
- 一串id只能給一個元素
- 方便搜索或對其進行配置
- 身份證字號的感覺
name
- 幫元素取名子的感覺
- 一個元素可以取很多名子
- 方便搜索或對其進行配置
- 跟名子一樣可以有很多個
類別(class
- class屬性可以用以將元素分類
- 一個元素可以同時歸在很多類
- 可以使用class將很多屬於同一類的東西進行配置
special thank:HTML5權威指南
class
href
- <a> 標籤的href 屬性用於指定超鏈接目標的URL。
- href 屬性的值可以是任何有效文檔的相對或絕對URL，包括片段標識符和JavaScript 代碼段。如果用戶選擇了<a> 標籤中的內容，那麼瀏覽器會嘗試檢索並顯示href 屬性指定的URL 所表示的文檔，或者執行JavaScript 表達式、方法和函數的列表。
-->
簡單來說就是放網址的地方www
href
input元素常用用法
用戶資料加密(type="password"
- type屬性為password的input元素是用來為用戶輸入密碼時加密用的，會使用戶輸入內容如以下列方式呈現
- 此方法的安全度較低
(雖然gmail不是用password www
按鈕大雜燴
- type="submit"-->用以生成提交表單內容的按鈕
- type="reset"-->用以生成重新載入表單的按鈕
- type="button"-->用以生成不執行任何動作的按鈕
按鈕--提交(type="submit"
- type屬性為submit的input元素通常是用於表單資料的送出時按的按鈕
按鈕--重置表單(type="reset"
- type屬性為reset的input元素通常是用於要求重新載入空白表單時按的按鈕
按鈕--自訂(type="button"
- type屬性為button的input元素可用於自訂用戶按下後執行的動作 (可用onclick進行設置
小小實作~(10min
提示
1.利用value可以設置button
上面的內容
2.按下按鈕出現"辦理成功"可以偷用document.write("")完成
*其實可以參考有按鈕的那頁，點他的"HTML"按鈕會有異想不到的收穫~
答案
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>最基本的空白頁</title>
<style type="text/css">
</style>
</head>
<body>
<h1>辦帳號系統</h1>
<hr>
<span>帳號:</span><input>
<p/>
<span>密碼:</span><input>
<p/>
<input type="button" value="submit" onclick=document.write("辦理成功")>
<!--網頁內文-->
</body>
</html>CSS
Cascading Stylesheets
階層樣式表 CSS)
跟 HTML 一樣，CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）：它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。
階層樣式表 (CSS)
CSS基本概念
宣告（Declaration）
單一個規則，例如 color: red; 指定了這個元素的呈現樣貌。
屬性 (Properties)
修改屬性是改變你HTML元素的一種方法 . (在這範例中, color 是段落（p）元素的一種屬性.) 在CSS中, 你可以選擇使用哪些屬性來達成你想要的配置
屬性值 (Property value)
屬性值 就是位於屬性右邊，在冒號（:）之後，從眾多的可能樣式選出一個給予屬性（範例中就是從眾多的 color 樣式中選出 red）
選擇器（Selector）
在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響（在這個範例中,就是 段落元素 p）。若要改變欲影響的元素，只要更改選擇器就行了。
注意語法其他重要的部分：
- 在每一個宣告裡面，屬性跟屬性值之間必須用冒號(:) 做區分。
- 在每一個規則裡面可以包含有許多宣告，但不同的宣告之間必須使用分號 (;) 來區分。
