從0到1 - 前端不可怕

第一堂 HTML+CSS

世新創聯會

部分引用台大開源社課程內容

何謂前端？

JavaScript 可以跟你互動的功能

HTML 架起頁面的結構

CSS 引入頁面的外觀

以某個網頁為例

HTML+CSS+JS 是在瀏覽器提供使用者介面

(表現層)又稱之為前端(Fornt-End)

相對而言

在網站伺服器、資料庫等產生之結果與技術

稱之為後端(Back-End)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

範例測試

文字編輯器

Sublime

https://www.sublimetext.com/

ATOM

https://atom.io/

Adobe Brackets

http://brackets.io/

CodePen

http://codepen.io/

Jsbin

https://jsbin.com/

Thimble by Mozilla

https://thimble.mozilla.org/zh-TW/

線上

jsfiddle.net

jsfiddle

什麼是HTML

HyperText Markup Language

超文本標籤語言由 W3C 定義和維護

W3C：World Wide Web Consortium，全球資訊網協會

HTML 基本結構

<元素的名稱 屬性="屬性的值"> 元素的內容 </元素的名稱>
<    起   始   標   籤    >           < 終止 標籤 >
<               H  T  M  L  元  素              >

<a href="https://www.google.com.tw/">Google 首頁</a>

<h1>HTML 基本結構</h1>

<img src="./img/PPAP.png" />

網頁 HTML 基本結構

<!DOCTYPE html>
<html>
    <head>
        
        網頁的各種資訊
        
    </head>
    <body>
        
        網頁的內容
        
    </body>
</html>

起始標籤

結束標籤

Head 元素

<head>
    <!-- 網頁的各種資訊 -->
    
    <title>NTUOSC | 從零開始 HTML、CSS</title>
      <!-- title 元素：網頁的標題名稱 -->
      
    <meta charset="utf-8" />
      <!-- meta 元素：一些網頁資訊
             其中 charset 用來宣告網頁使用的編碼 -->
</head>

主要用於敘述HTML文件

通常有 title, meta, style, script

meta，因無內容，不需結束標籤，稱為空元素

Body 元素

<html>
    <head>
    .....(HTML文件資訊、表頭)
    </head>

    <body>
        <h1>My First JavaScript</h1>
        <!-- HTML文件內容 -->
    </body>
</html>

body內部為顯示內容的地方

行內元素

<a href="URL"> 點這邊 </a>

<img src="URL" />

<br />

超連結

圖片

換行

<hr>

水平分隔線

<code>...</code>

顯示程式碼

<pre>...</pre>

維持在html樣式

區塊元素

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

章節標題

段落文字

<p> PPAP </p>

文字class用

<span> PPAP </span>

效果元素

斜體字

<em> PPAP </em>

粗體字

<strong> PPAP </strong>

標示

<mark> PPAP </mark>

<u> PPAP </u>

加上底線

建立清單

<ul>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ul>

<ol>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ol>

無序號清單

有序號清單

建立清單

有序號清單

<ol type="1">...</ol>
<ol type="A">...</ol>
<ol type="a">...</ol>
<ol type="I">...</ol>
<ol type="i">...</ol>

<ol start="100">...</ol>
<ol reversed>...</ol>

課堂練習

1. 世新大學

2. 系所

a. 資管系

b. 法律系

3. 單位

a.學務處

i. 課外組

b.教務處

建立表格

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
<table>
  <tr>
    <th>吳東叡</th>
    <th>施怡婷</th>
    <th>黃誠</th>
  </tr>
  <tr>
    <td>徐名嶸</td>
    <td>陳富瑜</td>
    <td>陳松煒</td>
  </tr>
  <tr>
    <td>林曼婷</td>
    <td>蔡承諴</td>
    <td>何浩宇</td>
  </tr>
</table>

吳東叡	施怡婷	黃誠
徐名嶸	陳富瑜	陳松煒
林曼婷	蔡承諴	何浩宇

建立表格

<table>
  <thead>
    <tr>
      <th></th>
      <th>組長</th>
      <th colspan="2">組員</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <th>女</th>
    <th>陳富瑜</th>
    <th>施怡婷</th>
    <th>林曼婷</th>
  </tr>
  <tr>
    <th rowspan="2">男</th>
    <th>徐名嶸</th>
    <th>吳東叡</th>
    <th>陳松煒</th>
  </tr>
  <tr>
    <th>黃誠</th>
    <th>蔡承諴</th>
    <th>何浩宇</th>
  </tr>
 </tbody>
 <tfoot>
   <tr>
     <td colspan="3">總共</td> 
     <td>9人</td> 
   </tr>
 </tfoot>
</table>

建立表單

<form>
    帳號：<input ...>
    密碼：<input ...>
</form>

Form 元素建立表單

input 元素建立輸入欄位

輸入欄位

<input type="text" name="account" value="Wei" placeholder="Wei">

欄位種類

欄位名稱

預先填入值

提示值

文字

<!--文字欄位-->
姓名：<input type="text" placeholder="Wei"><br>

<!--信箱欄位-->
電子信箱：<input type="email" placeholder="email"><br>

<!--密碼欄位-->
密碼：<input type="password" placeholder="passsword"><br>

<!--網址欄位-->
個人網站：<input type="url" placeholder="http://google.com"><br>

<!--電話欄位-->
電話：<input type="tel" placeholder="09-12344556"><br>

<!--數字欄位-->
年齡：<input type="number" placeholder="21">

單/多/滑動/顏色

<!--單選欄位-->
<input type="radio" value="男">男
<input type="radio" value="女">女
<input type="radio" value="其他">其他

<hr>

<!--多選欄位-->
<input type="checkbox" value="生理男">生理男
<input type="checkbox"  value="生理女">生理女

<hr>

<!--滑動欄位-->
不喜歡 <input type="range" name="score" min="1" max="5"> 不喜歡

<hr>

<!--顏色欄位-->
顏色：<input type="color">

年月/日期/時間

<!--選擇 年月日 / 時分-->
年月日：<input type="date"> 時分：<input type="time">

<hr>

<!--選擇日期時間-->
日期時間：<input type="date-time local">

<hr>

<!--選擇 月 / 週-->
月：<input type="month"> 週：<input type="week">

下拉式選單

<!--下拉式選單-->
<select>
  <option>1
  <option>2
  <option>3
</select>

<hr>

<!--層級式 下拉式選單-->
<select>
  <optgroup label="hi">
    <option>1
    <option>2
    <option>3
  </optgroup>
  <optgroup label="嗨">
    <option>1
    <option>2
    <option>3
  </optgroup>
</select>

多文字內容欄位

<!-- 多文字欄位 -->
<textarea rows="5" cols="5"></textarea>

表單按鈕

<form>

<!-- 清除按鈕 -->
<input type="reset" name="reset">

<!-- 送出按鈕 -->
<input type="submit" name="submit">

</form>

課堂練習

請做出一個飯店訂購表單

姓名 (文字欄位)
電話 (電話欄位)
信箱 (信箱欄位)
年齡 (數字欄位)

入住人數 (下拉式選單)
入住房間顏色 (顏色欄位)
房型選擇 (多層下拉式選單)
訂房日期 (日期選單)

訂房日期 (日期欄位)
入住時間 (時間欄位)
備註 (多文字欄位)

清除
送出

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <style>
  h1   {color: blue;}
  p    {color: red;}
  </style>
</head>

<body>

  <h1>This is a Heading</h1>
  <hr>
  <form>
      <!--文字欄位-->
  姓名：<input type="text" placeholder="Wei"><br>

  <!--信箱欄位-->
  電子信箱：<input type="email" placeholder="email"><br>

  <!--密碼欄位-->
  密碼：<input type="password" placeholder="passsword"><br>

  <!--網址欄位-->
  個人網站：<input type="url" placeholder="http://google.com"><br>

  <!--電話欄位-->
  電話：<input type="tel" placeholder="09-12344556"><br>

  <!--數字欄位-->
  年齡：<input type="number" placeholder="21"><br>
  不喜歡 <input type="range" name="score" min="1" max="5"> 不喜歡<br>

  <hr>

  <!--選擇日期時間-->
  日期時間：<input type="date-time local">


  <!--層級式 下拉式選單-->
  <select>
    <optgroup label="hi">
      <option>1
      <option>2
      <option>3
    </optgroup>
    <optgroup label="嗨">
      <option>1
      <option>2
      <option>3
    </optgroup>
  </select><br>

    <hr>
    
  <!-- 多文字欄位 -->
  <textarea rows="2" cols="10"></textarea><br>

  <!-- 按鈕 -->
  <input type="reset" name="reset">
  <input type="submit" name="submit">

  </form>

</body>

</html>

HTML 通用屬性

<div> O </div>
<div class="a"> A </div>
<div class="b"> B </div>
<div class="a b"> AB </div>

<span id="ntuosc"> 臺灣大學開源社 </span>

class

ID 不得重複

CSS

Cascading Style Sheets，層疊樣式表
為 HTML 文件添加樣式的電腦語言
由 W3C 定義和維護

CSS

<!--引入CSS檔-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<!--直接在HTML上定義-->
<head>
p{
font-size: 100px;
}
</head>

<!--在某CSS檔內匯入-->
@import url("main.css");

<link>：用來連接外部的網頁資源
href 屬性：外部資源的 URL 位址
rel 屬性：relationship，資源與目前網頁的關係

CSS

<!--直接在HTML上定義-->
<head>
  <style>
    p{
        font-size: 100px;
    }
  </style>
</head>

<!--在某CSS檔內匯入-->
@import url("main.css");

CSS 選擇器

h3 {color:green;}

選擇器

Selector

屬性

Property

值

Value

大括號的部分就是宣告(Declaration)

元素選擇器

h3 {color:green;}

以HTML元素為選擇對象

類別選擇器

.h3 {color:green;}

以 HTML 元素中的

class="類別名稱"

為選擇對象

類別選擇器

.h3 {color:green;}

以 HTML 元素中的

class="類別名稱"

為選擇對象

*.xxx

指所有的.xxx類別都會有同樣效果

h3.other

指屬於other類別的h3元素才會有效果

識別碼選擇器 ID Selector

<style>
    #net { color:blue }
    #prog { color:green }
    #algo { color:red }
</style>

<body>
    <h3>嗨大家好</h3>
    <ul>
        <li id="net">黃緯易</li>
        <li id="prog">吳東叡</li>
        <li id="algo">施怡婷</li>
    </ul>    
</body>

組合選擇器

<A>
   <B>...</B>
   <C>
      <B>...</B>
   </C>
   <B>...</B>
</A>

A B {...} = A元素內的所有後代B

A > B {...} = A元素之子元素B

<B>...</B>
<A>...</A>
<B>...</B>
<C>...</C>
<B>...</B>

A + B {...} = A元素同層且相鄰的B元素

A ~ B {...} = 所有與A元素同層的B元素

虛擬類別

<style>
   ：first-child {color:green};
    li:hover {color:red};
</style>

li元素，滑鼠滑至元素後套用藍色

所有元素的第一個子元素套用綠色

CSS 類別宣告

h3 { color:green };
h3 { text-align:left };

h3 { 
    color:green 
    text-align:left
};

h1 { color:green };
h2 { color:green };
h3 { color:green };

h1, h2, h3 { color:green };

CSS 單位

長度單位

分類	單位	名稱	說明
絕對長度	`px`	CSS 像素	和螢幕像素不同 = 1/96 in
	`pt`	點	文書編輯器中常見 = 1/72 in
	`in`	英吋
相對長度	`em`	字體尺寸	目前元素的字體大小
	`rem`	根 em	`<html>` 的字體大小
	`%`	百分比	不同屬性不同設定

常見 CSS 屬性

CSS 的樣式屬性百百種
不同的屬性專門處理不同的部分

CSS 文字設定

字型

屬性描述屬性值描述

Font-Family 字體字體名稱

以逗號隔開多的會一個個嘗試

serif 襯線體

sans-serif 無襯線體

Font-size 大小各種長度值

Font-weight 字重 100 ~ 900

其他樣式

屬性描述屬性值描述

text-decoration 文字裝飾 none

無樣式

underline 底線

line-through 刪除線

text-align 文字對齊 center 置中

left 置左

right 置右

範例

body {
    text-align: center;
    font-family: "Noto Sans CJK TC", "微軟正黑體", sans-serif;
}
a {
    text-decoration: none;
}
.strong {
    font-weight: 700;
}

CSS 顏色設定

顏色

屬性描述屬性值

color 主要顏色(文字) 各種顏色值

background- color 背景顏色

範例

.magic-text {
    background-color: #0285f4;
    color: black;
}
.magic-text:hover {
    background-color: #673a87;
    color: white;
}

CSS 尺寸設定

尺寸

屬性描述屬性值

height 高度各種長度值

weight 寬度

max-height 最大高度

max-weight 最大寬度

min-height 最小高度

min-weight 最小寬度

範例

.size-1 {
    background-color: #0285f4;
    width: 50px;
    height: 50px;
}
.size-2 {
    background-color: #34a853;
    width: 100px;
    height: 100px;
}

CSS 盒子模型

（BOX MODEL）

Ｍargin

Border

Padding

content

上下左右的寫法

Ｍargin

Padding

寫法上下左右描述

a b c d a b c d 全部分別設定

a a a a a 全部相同

a b a b a b 上下一組左右一組

a b c a b c b 左右一組上下分別設定

邊框 Border

範例

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

留白 PADDING

留白在內

範例

http://www.w3schools.com/css/tryit.asp?filename=trycss_padding_shorthand2

邊距 MARGIN

邊距在外

範例

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_shorthand

屬性 POSITION

版面配置中威力強大的屬性
決定元素擺放的定位方式，影響網頁排版

屬性 POSITION

屬性值	描述	如何看待上下左右屬性
`static`	預設	無視
`relative`	相對定位	以自己的原位為基準移動的距離
`absolute`	絕對定位	和父元素邊界的距離
`fixed`	固定	和視窗邊界的距離
上下左右屬性： `top, bottom, right, left`

範例

http://www.w3schools.com/css/css_positioning.asp

DISPLAY 屬性

版面配置中威力強大的屬性
每一個元素都有預設的 Display
決定顯示模式，影響網頁排版

DISPLAY 屬性

屬性值	描述
`block`	區塊，就像平常的`<div>`
`inline`	行內，就像平常的`<span>`
`inline-block`	行內區塊
`none`	無，不會被顯示出來

http://www.w3schools.com/css/css_display_visibility.asp

範例

什麼是 RWD

Responsive Web Design

RWD

指設計在不同裝置

(桌機、筆電、手機、平板)

上都能正常顯示瀏覽、檢視，並獲得相同資訊。

Bootstrap 模版套用

網頁設計框架

Bootstrap

http://getbootstrap.com/

開始套用

用模板製作履歷

startbootstrap

課堂練習

製作出一單一履歷頁面

基本資料
履歷
技能
自我簡介

Git 上傳作業

Github

https://github.com/

Github

git init

git status

git commit -m "first commit"

git remote add origin xxxxxxxx

git push -u origin master

作業

將剛剛的履歷頁面做好，並加上其他頁面，做成完整的一個獨立靜態網站

關於我(一頁)
部落格(一頁)
聯絡我(一頁)
設計作品(一頁，沒就放日常生活照)

讀書會作業

心得500字內

姓名
系級
學號

範例

https://blackrockdigital.github.io/startbootstrap-clean-blog/index.html

https://blackrockdigital.github.io/startbootstrap-agency/

決定下次讀書會日期

期待大家的作業

謝謝大家

Copy of 【第一堂】從0到1 - 前端不可怕

By boxcore