從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

課堂練習

製作出一 單一履歷頁面

  1. 基本資料
  2. 履歷
  3. 技能
  4. 自我簡介

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

作業

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

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

讀書會作業

心得500字內

  1. 姓名
  2. 系級
  3. 學號

範例

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

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

決定下次讀書會日期

期待大家的作業

謝謝大家

Made with Slides.com