HTML

給第一次接觸資訊技術的你/妳

在開始前

別怕! 問問題我不會吃了你

這次課程只會非常簡單的為各位介紹最基本的部分

如果講了冷笑話要記得...要笑

自由進出上廁所或睡覺

有問題可以先向身邊的學長姐求救

HI~ 我是杜杰

興趣使然的見習工程師

中興大學 資工系

中興大學 資訊社 打雜部門社長

希望能成為貓奴

FB: fb.me/jd615645

Email: jd615645@gmail.com

<HTML>

簡單

連我阿嬤都會

看得到

絕對不會完全沒有畫面

到處都用的到

超文件標示語言

(H yper T ext M arkup L anguage)

是一種用於建立網頁的標準標記式語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面

副檔名為 .htm 或 .html

HTML5 已在 2014/10/28正式發布

增加了新的元件以及淘汰過時的語法

Flash 掰！

那我們開始吧ヽ(✿ﾟ▽ﾟ)ノ

簡介與題目

打code的地方

即時預覽

Sublime Text

支援多種不同程式語言的文字編輯器

圍堵標籤

<body>   </body>

<div>       </div>

<h1>         </h1>

單獨標籤

<input>

<img>

<br>

<hr>

成雙成對(´,,•ω•,,)♡

沒有碰友・゜・(PД`q｡)・゜・

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 文件資料元素 -->
  </head>
  <body>
    <!-- 文件內容 -->
  </body>
</html>
<head>
  <!--網頁標題-->
  <title>2016 中興大學 資工營</title>

  <!--網頁簡短敘述，這是給瀏覽器跟搜尋引擎看的-->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="2016中興資工營 不法資徒">
  <meta name="author" content="Sakamoto">

  <!--外掛的其他樣式-->
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

來看個範例

http://nchu_cse_camp.nchuit.cc/

文章標題

內文

圖片

一些按鈕

標題

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

內文

<p>...</p>

文字裝飾

標記 <mark>...</mark>

大家看到沒有，一大堆的 香蕉

刪除線 <del>...</del>、<s>...</s>

糾團參加阿帕契優

然後就死掉了

底線 <ins>...</ins>、<u>...</u>

鹿茸是鹿耳多朵裡的毛

縮小字體 <small>...</small>

好!下去領 五百!

粗體 <strong>...</strong>

斜體 <em>...</em>

肚臍的英文是 umbilicus

文字控制

強制換行 <br>

分隔線 <hr>

區塊標籤

<div>
  <h1>標題</h1>
  <p>內文</p>
</div>
<img src="圖片連結" alt="若圖片連結失效會顯示的東西">

圖片

<img>

連結

連結

<a>

<a href="http://nchu_cse_camp.nchuit.cc/">不法資徒官網</a>

無序表單

無序表單

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

有序表單

<ol>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>
  • Coffee
  • Tea
  • Me
  1. Coffee
  2. Tea
  3. Me

表格

<table>
  <tr>
    <th>姓名</th>
    <th>Pusheen</th>
  </tr>
  <tr>
    <td>物種</td>
    <td>花貓</td>
  </tr>
  <tr>
    <td>性別</td>
    <td>母的</td>
  </tr>
  <tr>
    <td>興趣</td>
    <td>吃</td>
  </tr>
</table>
姓名 Pusheen
物種 花貓
性別 母的
興趣 吃

來個小測驗吧

不自殺聲明

試著用剛剛所學 完成它

有點單調? 改變點樣式吧

CSS 就是來幫助你的

用來詳細設定一個 HTML 元件的顯示方式

<h1 style='color: lightblue; font-size: 18px;'>Hello, World!</h1>

幫你的HTML tag增加一個名為style的元素

你的 人生網頁就從黑白變成彩色的了ヽ(✿ﾟ▽ﾟ)ノ

文字用屬性

除了上面的大小顏色之外，還有字體及文字排列方式等

color: lightblue;
font-size: 14px;
font-family: '微軟正黑體';
font-weight: bolder;
text-align: center;

關於 <div>

前面提到除了當作文字區塊外，常常用來裝元件、排版

position / width / height /top / left / reght /bottom

還有很多更猛的屬性

但是小弟不才，也沒有全部都會

有興趣可以 點這裡 看看更多CSS屬性

CSS小小兵

如果樣式太多會造成版面混亂

<h1 style='color: lightblue;'>Hi~</h1>
<h1 style='color: lightblue;'>I'm</h1>
<h1 style='color: lightblue; font-size: 20px;'>Sakamoto</h1>

而且很多東西會重複打很多次

有東西叫做 class, id

讓你把 CSS 屬性整理在同個地方

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 文件資料元素 -->
    <style>
      <!-- CSS要寫在這裡呦 -->
    </style>
  </head>
  <body>
    <!-- 文件內容 -->
  </body>
</html>

Step 1: 幫 HTML 加上 class / id 屬性

Step 2: 在<head>中加上<style> tag

Step 3: 使用下方語法建立規則

css-selector { attributes ... }

等等好像出現了奇怪的東西 ((ﾟДﾟ;))

CSS selector?

CSS 透過它來選取HTML個元件

便能對其添加樣式

.classname 便能選到 class

<h1>Hello, World!!</h1>
h1 { ... }
<h1 id='my-id'>Hello, World!!</h1>
#my-id { ... }
<h1 class='my_class'>Hello, World!!</h1>
.my_class { ... }

直接寫tag name 便直接能選取到tag

.idname 便能選到 id

來玩玩看吧

到第7關就好

這裡提供一個小遊戲讓大家練習

FreeCodeCamp

有問題我該如何自己解決

http://www.w3schools.com/

w3cschool

https://developer.mozilla.org/en-US/

MDN

工商時間

https://www.facebook.com/it.nchu

http://nchuit.cc

工商時間

高中生解題系統

http://zerojudge.tw/

Made with Slides.com