HTML 5 學習心得

#第一週

介紹

HTML (Hyper Text Markup Language；簡稱HTML） 是一種創建網頁的一種標記語言（markup language ）我們可以通過學習HTML來製作一個屬於自己的網頁～～

HTML 5 是HTML最新的修訂版本，它於2014年10月完成標準制定，目標是取代1999年所製定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到符合當代的網絡需求。義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要插件的豐富性網絡應用服務（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，並且提供更多能有效加強網絡應用的標準集。

HyperText/HyperLink

超文本（HyperText) 或者超連接（HyperLink）起初剛開始接觸這些東西東西的時候還不知道是HyperText，什麼是HyperLink，上完課以後才知道原來這兩樣東西與我們日常生活中每天接觸到的網頁鏈接是息息相關的。每當我們打開一個網頁時（例如FB、Youtube、Twitter等等），我們都可以看到網頁上面有很多可以讓我們點擊或選擇的“按鈕”或者是"link“，這一些就是超連接及超文本，當我們點擊下去時，系統會帶我們從一個網頁轉去另一個網頁，這些超連接就是這些網頁的入口。link或按鈕的背後就是一個網頁的地址，我們點擊以後，系統就會執行當初設定好的指令，連接到另一個網頁，完成網頁間的切換，加上一些特效以後，可以使這個網頁間的切換變得十分流暢。HyperLink的歷史已經很悠久了，在網絡剛開發時就開始流行使用HyperLink了，如果有興趣的話可以點擊樓下的按鈕～～

編譯器（COMPILER)

在開始學習一個語言之前，選擇一款適合自己的編譯器是最重要的，一個好用的編輯器可以讓你在編程程式的過程中起到很大的幫助～～

#我現在使用的是Notepad++這款軟件

善用網絡資源

在開始之前先說明件事，現在網絡很發達，網絡資源很豐富，如果有什麼不會的地方或者是想搞明白的東西，其實都可以上網去尋找答案，我覺得使用網絡來搜尋資料是現代年輕人必備的一項技能。如果想要快速的創建一個網站，網絡上有很多的免費的Template，大家可以自己上網下載下來使用。效率與時間，我們可以不必將每一句程式都靠自己寫出來，如果今天公司給了你一份Project，希望你能在短時間內網站完成一個介紹網站，這些網絡資源可以給予你很大的幫助，你只需要修改其中的資料，就能快速完成一個網頁的設計，方便 + 高效率。

認識基本結構

在HTML裡，許多的指令都是成雙成對的，目的是為了讓系統能準確的知道我們想表達的意思已經我們想要呈現的效果，所以在寫程式時要注意，許多的指令都是成雙成對的，在輸入了一個指令後不可忘記它的另一半。

#慢慢來不要急！切記要一步步按部就班來！不懂就立刻上網google一下，去明白整個程式的結構

最基本的HTML結構包括：

  1. <!DOCTYPE>
  2. <html> 和 </html>
  3. <title> 和 </title>
  4. <body> 和 </body>

<!DOCTYPE>

  • <!DOCTYPE> 必須是 HTML 文檔的第一行，位於 <html> 標籤之前。<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。

<html> 和 </html>

在HTML一般會用 ”/” 斜杠來表達一段語句的結束，中間被他們夾住的“東西”就是這一個指令所要表達或概括的，所以開頭和結尾都要有對的指令，才算正確。這句話很重要，以後不會重複概述

  • <html> 是整個程式主要結構的部分，要將這個指令放置與最上端（第二排，得放在其他指令的前面）以及最後一排（像圖片裡的那樣；放</html>）。其中第三排到第十一排就是這段 <html> 指令所要表達的東西。

<head> 和 </head>


  • 標題區域（HTML的頭部），用於定義文檔的頭部，它是所有“頭部元素”的容器。 <head> 中的元素可以引用腳本、指示瀏覽器在哪裡找到樣式表、提供元信息等等。我本人會在這裡先宣告（或者說定義）接下來一些指令要調整的參數等等（也許以後會提到哈哈）。
  • 圖中，我沒有設定任何的參數，我只設置了<title>這個指令在這

<title> 和 </title>

  • <title> 是用來表達頁簽上面的字眼『圖中紅色圈圈標記的地方』，用<title>來給自己的網頁定一個名字，讓你的網頁看起來比較專業！！（雖然看起來沒有專業到哪裡去= =）

<body> 和 </body>

  • <body> 指的是文档主体元素，也可以說是網頁的內容區，在這裡寫上網頁裡的內容。在圖中我網頁的內容就是第7-10排，到時候網頁裡就會呈現“我的第一標題”及“我的第一個段落”兩個內容。
  • 在body裡面我們最常用的是<h> 跟 <p> 這兩個指令了


<h> (Heading)

  • <h>指令有分成 <h1>、<h2>... <h6>，<h1>是代表最重要的標題。所以它會被特別放大，而<h6>是代表較為不重要的標題，所以它跟 <h1><h2> 他們放在一起，呈現的效果如圖顯示。

<P> (Paragraph）

  • <p> 區間裡的內容就是網頁段落的內容，只是要注意的我們寫段落時要注意排版。
  • 因為我們無法確定HTML的顯示方式，大屏幕或小屏幕以及調整大小的窗口將產生不同的結果。使用HTML，我們無法通過在HTML代碼中添加額外的空格或額外行來更改輸出。當頁面顯示時，瀏覽器將刪除任何額外的空格和額外的行。

網頁完成

  • 完成以上這幾個步驟，我們最初版也是最簡單的網頁就設計好了～～這就是一個網頁最基本的模樣了

第一篇上課心得想分享下一個網頁的基本製作流程，上課當中收穫了很多的東西，很喜歡上這堂課～～製作網頁是我一次接觸到的東西，是我中學裡沒學過的，當自己完成了一個屬於自己的網頁後，心中有種說不出的滿足感。我最大的感慨就是：可惜一天只有24小時，想學的東西還有很多很多，時間對我而言真的很不夠很不夠！看到別人 自己製作的網頁再對比下自己的，發現自己要學的東西真的還有很多很多。我有很多的想法，但目前以我自己的能力還做不到，我要多多努力，逆流而上，期許老師能教我們更多的知識，讓我們收穫更多，以後我要製作一個屬於自己“很厲害”的網頁。在大學裡，我希望我的時間沒有一刻是被浪費的，把握時間去學自己想學的。