Menu

Photo: Silverton Lookout, BC

HTML Basics

December 18, 2017

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

我的第一個用程式寫的網站在這裡：http://html01.joyofliving.site/

在Subdomain裡開檔的步驟：

cPanel > File Manager > New File > index.html

剛太緊張，居然寫html.index，真是菜鳥笨蛋呀！

開始上課：

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

Resources:

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   

     

      • – 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