因為部分內容與網頁設計重疊，因此直接附上網頁設計相關內容。

主架構：

<html>
  <head>
  </head>
  <body>
  </body>
</html>

<a href=”https://www.google.com.tw”>Google</a>

<!DOCTYPE html>

<meta charset=’utf-8’>

這是學習 W3schools 網站上 HTML 時所做的英文筆記
(註：因為原文為英文，為避免翻譯與用詞的出入，故筆者選擇以英文撰寫筆記，但部分文法可能不太正確，請見諒。）

2.HOME

3.Introduction

What’s HTML?
- HTML elements are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
common HTML tag
- <!DOCTYPE html> defines this document to be html5 (solved)
- <html> root element
- <head> contains meta(?) information
- <body> contain the visible page content
- <h1> defines a large heading
- <p> defines a paragraph
Web Browsers
- e.g.Chrome
- don’t display HTML tags, but uses them to determine how to display.
Page Structure
<!DOCTYPE> Declaration
- represent the document type
- must appear once, at the top of the page (before any HTML tags
- not case sensitive (區分大小寫)
HTML Versions

Save the HTML Page
- encode toUTF-8(preferred encoding for HTML files)
- can useeither .htm or .htmlas file extension(副檔名), there’s no difference.

HTML Links
- e.g.<a href=”https://www.google.com.tw”>Click to enter Google</a>
HTML Images
- e.g.<img src=”hello.jpg” alt=”alternative word” title=”popup” width=”160” height=”90”>

以下元素代表意義相等：
- <hr></hr>
- <hr />
- <hr>
Don’t forget the end tag
- some HTML elements will display correctly, even if I forget the end tag
- BUT don’t rely on this. It might produce some unexpected result and/or errors
- Empty HTML elements
elements with no content
- e.g.<br> element
- Empty elements “closed” like : <br/>
- HTML5 don’t require it to be closed.
- But if
  - you want stricter validation
  - make document readable by XML parser
- must close all elements properly
Recommend
- Use lowercase tags
  - O:<title>
  - X:<TITLE>
- Quote Attribute Values(sometimes even necessary to use)
  - O:<a href=”https://www.google.com”>
  - X:<a href=https://www.google.com>
- Single or Double Quotes?
  - Double are the most common, but single can also be used
  - 雙層結構(外雙引號,內單引號)
  - e.g.<p title="John 'ShotGun' Nelson">

HTML Attributes
- all HTML elements have attributes
- always specified in thestart tag
- pairs like:name=”value”
The lang Attribute
- declared in the<html>tag
- declaring a language is crucial foraccessibility(無障礙) application (screen readers)andsearch engines
- en-us
  - en: specify the language
  - us: dialect(方言) (*not necessary)
The title Attribute
- declared in the<p>element
- the value will be displayed as a tooltip(提示信息) when mouse over the paragraph
The alt Attribute
- showed
  - when an image cannot be displayed
  - for a blind person to “hear” the element
The href Attribute
- HTML links are defined with the<a>tag
Size Attributes
- defined with the<img>tag
HTML Attributes

HTML Headings
- <h1>~<h6>
- browsers automatically add some white space (a margin(邊緣)) before and after a heading
Headings Are Important
- search engines use headings to index the structure
- Use HTML headings for headings only. Don’t use headings to make text BIG or Bold *HTML Horizontal Rules (水平線)
- <hr> is used to separate content
The HTML <head> Element
- Has nothing to do with HTML headings
- Is a container for metadata
- Placed between <html> and <body>
- Metadata define
  - Document title
  - Character set
  - Styles
  - Links
  - Scripts
HTML Tag Reference

<p> defines a paragraph
- Browsers automatically add some white space (a margin) before and after a paragraph
HTML Display
- You cannot change the output by adding extra spaces or extra lines
- The browser will remove any extra spaces and extra lines
Don’t forget the end tag
- Dropping the end tag can produce unexpected results or errors
HTML Line Breaks
- <br> defines a line break
- Use <br> if you want a line break (a new line) without starting a new paragraph
The HTML <pre> Element
- Defines preformatted text
- The text inside a <pre> displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
- Appropriate for poem