Web 初學者的第二堂課

基礎 HTML

簡單複習一下

上禮拜我們提到了...

在這之前..

環境安裝

Sublime

http://docs.sublimetext.tw/

環境設定

Package Control

按下 Ctrl + ` 組合鍵開啟

要安裝的套件有

  • ConvertToUTF8 
  • Emmet
  • HTMLBeautify (optional)

個人化設定

"translate_tabs_to_spaces": true

本課程授課內容為

HTML5

HTML

超文件標記語言

所謂標記語言

MarkUp Language

標記語言

  • GenCode
  • TeX
  • XML
    • SVG
    • RSS
  • HTML

大概長這樣

<?xml version="1.0"?>
<資訊創意研究社>
  <社課>
    <課程內容>Web 系列課程</課程內容>
    <適合難度>新手！</適合難度>
  </社課>
  <期末大會>
    <活動宗旨>吃好料的</活動宗旨>
    <給學校看的>促進社員團結、培養向心力</給學校看的>
  </期末大會>
</資訊創意研究社>

JSON?

We'll talk about it later

終於要開始講 HTML 了

基礎 HTML 架構

<!DOCTYPE html>
<html lang="zh-tw">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
</head>
<body>
  <h1>第一次寫 HTML 就上手</h1>
  <p>好社課不上嗎？</p>
  <a href="http://ttucscec.club">前往社網瞭解更多</a>
  <img src="http://i.imgur.com/QHdJy0Q.png" alt="cat">
  <script>
    // A $( document ).ready() block.
    $( document ).ready(function() {
      console.log( "ready!" );
    });
  </script>
</body>
</html>

什麼東西應該寫在頭

  • Meta Information
  • Title
  • Style Sheets
  • Javascript?

什麼東西應該寫在身體

  • Headings
  • Paragraphs
  • Links
  • Images
  • and so on...

小問題

  • JS 放在頭跟身體的差異？
  • 如果不把元素放在身體？
  • 元素沒有閉合會怎樣？

DOCTYPE

  • <!DOCTYPE html>

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

META

  • <meta charset="UTF-8">
  • <meta name="description" content="Free Web tutorials">
  • <meta name="author" content="Hege Refsnes">
  • <meta name="viewport" content="width=device-width, initial-scale=1" />
  • <meta http-equiv="refresh" content="30">
  • <meta property="og:title" content="大同資訊創意研究社">
  • <meta property="og:image" content="http://ttucscec.club/images/logo.png">
  • <meta property="og:description" content="提升大同學生資訊能力水準，讓大家都知道寫程式是怎麼一回事！">
  • <meta property="og:url" content="http://ttucscec.club/">

URL Encode

  •     %20
  • !   %21
  • "   %22
  • #   %23
  • $   %24
  • %   %25
  • &   %26
  • '   %27
  • (   %28
  • )   %29
  • *   %2A
  • +   %2B
  • ,   %2C
  • -   %2D
  • .   %2E
  • /   %2F

Comment

<!-- 我是註解 -->

Headings

  • <h1>This is a heading</h1>
  • <h2>This is a heading</h2>
  • <h3>This is a heading</h3>
  • <h4>This is a heading</h4>
  • <h5>This is a heading</h5>
  • <h6>This is a heading</h6>

Paragraphs

  • <p>This is a paragraph.</p>

  • <p>This is another paragraph.</p>

Links

<a href="http://www.w3schools.com">This is a link</a>

Images

  • src
  • alt
  • width
  • height
  • onerror?

行內元素 (Inline Element)

  • 起始在隔壁元素的旁邊

  • 元素的寬度、高度與上下間距一般無法控制

  • 寬度為內容的大小，一般無法控制

行內元素 (Inline Element)

  • a

  • br

  • code

  • dfn

  • em

  • i

  • img

  • input

  • label

  • select

  • strong

  • textarea

區塊元素 (Block Element)

  • 起始為新的一行

  • 可控制元素的寬度、高度與間距

  • 未設定寬度時，元素預設為100%

區塊元素 (Block Element)

  • blockquote

  • div

  • form

  • h1~h6

  • hr

  • ol

  • p

  • pre

  • table

  • ul

空元素 (Empty Element)

  • 沒有內容

  • 可以不用關閉（或者說自我關閉）

空元素 (Empty Element)

  • <br />

  • <hr />

  • <img src="http://i.imgur.com/LLIIhgO.jpg" />

  • <link href="style.css" />

TABLE

  • table
  • thead, tbody, tfoot
  • th, tr, td

TABLE

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

INPUT

  • autocomplete (on/off)
  • autofocus
  • checked (for type="checkbox" or type="radio")
  • disabled
  • type
  • button
  • checkbox
  • color
  • date 
  • datetime 
  • datetime-local 
  • email 
  • file
  • hidden
  • image
  • month 

INPUT TYPE

  • number 
  • password
  • radio
  • range 
  • reset
  • search
  • submit
  • tel
  • text
  • time 
  • url
  • week

FORM

  • action
  • method

FORM

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

HTML5

有些功能還沒被完全支持

HTML5TEST

https://html5test.com/

下禮拜再告訴你

Web 初學者的第二堂課

By Albert Hsieh

Made with Slides.com

Web 初學者的第二堂課

大同大學資訊創意研究社系列社課

  • 1,302

More from Albert Hsieh