Photo: Silverton Lookout, BC

HTML Basics

December 18, 2017

今年的10月份開始上這堂 HTML Basics的課,上了一星期中斷,今天再次重上,把筆記寫在這裡,期勉自己有規劃的完成它.順便也開個 Subdomain,實際演練 HTML的過程.



cPanel > File Manager > New File > index.html



Section 1: Getting Started in HTML

1. What is HTML?

A webpage is made up of three layers:
1. Content Layer – HTML (Hypertext Markup Language)
2. Presentation Layer – CSS (Cascading Style Sheets)
3. Behavior Layer – JavaScrip

 2. Global Structure of HTML Document


head -> Page Title (in the window tab)
body -> Content


3. Intro to HTML Review (6 Questions)

* A Markup Language provides meaning to text in a document, using instructions that describe how text should be structured and formatted.

4. Headings and Paragraphs

5. Headings and Paragraphs Challenges

6. Creating Lists
 HTML Lists:   

      • – Unordered List   


      1. – Ordered List   
– Description List

    ** list item

7. Creating Links
  ** anchor link
  ** Absolute URL: contain full web url address, begins with http:// or https://
  ** href is an anchor element attribute that points to a location.  Attribute is followed by an equal sign and a value inside the quotes

8. Lists and Links Challenge

Section 2: Structuring Your Content

1. Semantic HTML: <header>, <footer> and <section>

  • HTML’s role in web design and development is to provide structure and meaning to content. 
  • Semantic 語義:stock/group together; the meaning behind words, phrases, or any text
  • Semantic markup should describe the meaning of the content rather than how it looks.
  • A typical webpage conatins:
    1. Header: Site logo, main heading, navigation, site description
    2. Footer: Company address, site authors, copyright date, other navigation
    3. Main Content: Anything between header and footer like: blog entries, videos, news articles, photo galleries, recipes and so on.

2. Sectioning Content with <article> <nav> and <aside>

3. Structuring Content Challenge (1.1.2018)

4. Marking Up a Blog Post