Web Design Tools 網站/網群開發語言

工具篇介述各種網站和網路社群的開發工具，分為語言層次和軟體層次工具。語言層次工具通常又包括3類：HTML，CSS，DOM/Java。

最新發展中的是HTML 5 版，於2014年底完成 HTML 5.0，雖然已公佈新版命令與規範，但持續進化，在2016完成 HTML 5.1 「推薦版 Recommendation」，同時，已在 2017 年推出 HTML 5.2「試用版 Working Draft」與 HTML 5.2「解說版 Editor’s Draft」。

在軟體層次的各種編輯器方面，當前為配合微軟教學上的優勢，本系列將講述微軟的網站開發軟體 Expression Web，並兼及前代的 SharePoint Designer 與 FrontPage。

HTML 5 的發展與未來

標註語言：功能命令 HTML's Functional Tags

HTML (Hyper Text Markup Language)為超文字標註語言，其加強延伸功能版為 xHTML ，但應用上常合併以 HTML 表示。

HTML, xHTML 的用途為網頁的功能指令，其中的標註 (Markup)，即表示以〈標籤〉的形式應用。

而通常以〈標籤〉〈/標籤〉的成對的形式出現，也有單獨使用的〈標籤/〉。其中的 / ，都表示結束符號。

最常用的〈標籤〉包括以下例子：

<h1>標題1</h1>

斷行<br/>

還有其他的標註語言，如：xml, shml…等，但網頁設計上仍以 HTML, xHTML應用最廣。

〈標籤〉的 4 類元素

〈標籤〉命令的對象又分為 4 類元素：區域元素標籤、行內元素標籤，群體標籤和 HTML5 新訂的語義元素。

HTML Block Elements 區域元素標籤

Most HTML elements are defined as block level elements or as inline elements.

Block level elements normally start (and end) with a new line when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements 行內元素標籤

Inline elements are normally displayed without starting a new line.

Examples: <b>, <td>, <a>, <img>

HTML Grouping Tags 群體標籤

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

New Semantic Elements in HTML5 語義元素

語義元素是 HTML5 新訂的標籤類別，將在「網頁最新語言HTML5簡介」中再整合HTML 5 技術與思想的發展，一併介述。

W3C: Full language W3Schools

程式碼介面精華篇 An introduction to the "Code View"

程式碼介面可以看出網頁結構與對網頁行為的控制。

網頁結構

網頁結構分作：宣告、協定、頁頭、內容。

<!DOCTYPE>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

<!DOCTYPE>宣告文件版本與類型

以 <!DOCTYPE>宣告文件版本與類型。

The purpose of a DTD (Document Type Definition) is to define the legal building blocks of an XML document.

HTML5

The current Html5 is:

<!DOCTYPE html>

HTML4

SP will start with DTD (HTML <!DOCTYPE> Declaration) such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

Then, it declares the version of the HTML, the xHTML is:
<HTML xmlns="http://www.w3.org/1999/xHTML">

<head>常用設定

<head>

</head>

Meta Tags and Metadata

什麼是Meta Tag？

Tag 是標注語言的標注命令，Meta 直譯是「超」，大陸習慣譯「元」，真正的意義是「標注的標注」，用途不是一般作為網頁呈現的標注命令，而是對網頁描述、行為的標注。所以譯為「統合標注」似可達意，正如 Meta Analysis的用法。

Meta Tag 的位置是放在<head>…</head>之間。

3 大<head>命令

<head>內是設定對SEO 與網站管理影響深遠，但對一般使用者而言，實務需求應用就較少，常用的就是標題、摘要、關鍵字、字碼設定、重新導向等，其中多個是 Meta Tag。

一定要設定的就是：

<title></title>設定

網頁虛擬名稱：以區域語言、即中文設定。

index.htm 避免命名為「首頁」，必須個人化。

這是1頂 SEO 非常重要的「帽子」，Google 排行榜差異可能在百萬頁以上。

<meta name="keywords" content=","/>設定

網頁內容最重要的（約5個）關鍵字。

<meta name="description" content=""/>設定

網頁內容簡介，約80字。

The META tag provides metadata such as a document's keywords, description, and author. Any number of META elements may be contained in the HEAD of a document.

META's NAME attribute provides a property name while the CONTENT attribute gives the corresponding value. The CONTENT attribute value may contain text and entities, but it may not contain HTML tags.

The HTTP-EQUIV attribute may be used in place of the NAME attribute to indicate that the property should be treated as (equivalent) an HTTP header.

The optional SCHEME attribute gives the format of the property value. For example, a date property may require SCHEME="Month-Day-Year" to disambiguate the date from other formats such as SCHEME="Day-Month-Year".

3 <head>作者資訊命令

如果作者是多產作家，則可加設作者資訊的3個設定：

<meta name="author" content=""/>設定

作者姓名，如：

<link rev="made" href="mailto:"/>設定

作者電子郵件，如：

其中的 rev=，表示正相關。

<link rev="made" href="http://"/>設定

作者網站，如：

程式碼介面進階設定

可參考更多資料如以下連結。

More Info

HTML Syntax

Index of HTML Elements.

Index of HTML Attributes.

HTML Canon: A Quick Tip

Web Design Tools 網站/網群開發語言

HTML 5 的發展與未來

標註語言：功能命令 HTML's Functional Tags

<h1>標題1</h1>

〈標籤〉的 4 類元素

HTML Block Elements 區域元素標籤

HTML Inline Elements 行內元素標籤

HTML Grouping Tags 群體標籤

The HTML <div> Element

The HTML <span> Element

New Semantic Elements in HTML5 語義元素

W3C: Full language W3Schools

程式碼介面精華篇 An introduction to the "Code View"

網頁結構

<!DOCTYPE>宣告文件版本與類型

HTML5

HTML4

<head>常用設定

Meta Tags and Metadata

3 大<head>命令

<title></title>設定

<meta name="keywords" content=","/>設定

<meta name="description" content=""/>設定

3 <head>作者資訊命令

<meta name="author" content=""/>設定

<link rev="made" href="mailto:"/>設定

<link rev="made" href="http://"/>設定

程式碼介面進階設定

HTML Syntax

英文大小寫轉換器

網頁最新語言HTML5簡介

Cascading Style Sheets, CSS: Presentation

簡捷建站程序

Web Design Tools 網站/網群開發語言

HTML 5 的發展與未來

標註語言：功能命令 HTML's Functional Tags

<h1>標題1</h1>

〈標籤〉的 4 類元素

HTML Block Elements 區域元素標籤

HTML Inline Elements 行內元素標籤

HTML Grouping Tags 群體標籤

The HTML <div> Element

The HTML <span> Element

New Semantic Elements in HTML5 語義元素

W3C: Full language W3Schools

程式碼介面精華篇 An introduction to the "Code View"

網頁結構

<!DOCTYPE>宣告文件版本與類型

HTML5

HTML4

<head>常用設定

Meta Tags and Metadata

3 大<head>命令

<title></title>設定

<meta name="keywords" content=","/>設定

<meta name="description" content=""/>設定

3 <head>作者資訊命令

<meta name="author" content=""/>設定

<link rev="made" href="mailto:"/>設定

<link rev="made" href="http://"/>設定

程式碼介面 進階設定

HTML Syntax

英文大小寫轉換器

網頁最新語言HTML5簡介

Cascading Style Sheets, CSS: Presentation

簡捷建站程序

程式碼介面進階設定