基礎前端(上) - HTML

帶領無基礎、文組生、對網頁設計有興趣的人,進入網站工程領域的基礎課。將從最基礎的 HTML 語出發。本門課榮獲台灣大學對內教育採用,課號(CSX1001)

100 %
1169 人
教師: Adam
開放課程
  • 課程水平 入門
  • 使用語言 中文
  • 總節數 33
  • 時數 2小時50分
  • 26 支影片
  • 7 道練習題
  • 課程內專案
  • 無限次觀看

課程介紹

你曾經想學做網頁,卻猶豫不定嗎?

我遇過周遭的許多朋友,其中有 設計、商科、財經相關或是與 "程式" 這兩個字八竿子打不著的領域。都曾經夢想建造自己的網站,讓他們的朋友以及全世界看見。
但卻始終猶豫不前。為什麼呢? ?
理由大多是覺得自己不是那塊料,根本學不會。或是一看到自己看不懂的符號就暈頭轉向。頭腦一片混亂。

為此,我製作了這門課,透過結合生活化的案例
來讓你了解前端網頁設計入門到底是怎麼一回事。
你可以很輕鬆地跟著我一起學習,一起動手做,完成自己的簡單頁面。
這門課將專注在講解,要製作網頁的基礎,以及基礎中的基礎。

從零開始。跟著我快速學習吧 !!
你不需要事先學習任何的會令你感到陌生的知識(例如某某某語法,blablabla....)。
只要想學,就儘管加入 !

 

短時間內,就能架構出簡單的頁面

 

 

網站套版 ? 先別說這個了 ,你有聽過HTML 嗎 ?

HTML 語法 是我們在學習前端網頁設計時,第一個須要學習的事務
而且它非常地容易學習。不管你是什麼背景出身的專業。
只要看靜下心來學習,絕對能夠掌握。

如果學習英文和國小數學的難度是100分
那學習它的難度就是 10分

你只須要認識他們,懂特性與概念。就能做出一個簡單的頁面 !

什麼是HTML,為什麼要先學它?

HTML 語法是網站的骨架,就像蓋房子時的鋼筋水泥一樣。
因此在開始製作你的網站之前,必須先了解HTML 語法內,不同的元素和特性。
就像認識蓋房子的材料一樣。木材、石板、磚瓦、各有不同的功用。
當你掌握了材料和用法,就可以開始規劃並建置你想要的網頁內容 !

 

自學網站前端不是夢

比起冗長的線下課程,我的課程將都進行重點式的學習,讓你快速理解概念之外,也能從實作獲得經驗,若有任何不清楚的地方,也可以隨時的倒帶重複複習,無限觀看 !

加入這門課,我將帶領各位開始進入網頁製作的領域,課程內會有一些專案與練習,

你可以透過完成它們來進行有效率的學習,有任何問題也可以在討論區留言與我交流喔 !

 

課程特色

  • 線上老師解答,有問必答
  • 淺顯易懂的方式,讓非資工相關科系的人也能快速理解網頁記得核心概念與輪廓
  • HTML 基礎實作專案

適合我嗎?需要那些課程準備?

適用對象

  • 從 0 開始的無基礎者
  • 非相關科系,文組生,想進入網頁程式領域的人
  • 本身對於網站架設一無所知的人
  • 想成為前端工程師的人

工具準備

  • 電腦

知識準備

  • 不需要

課程章節表

第1章

基礎概念
1
網頁的構成要素
8:05
2
學習工具:Codepen 介紹 - 註冊
7:19
3
網頁編輯器與常用快捷鍵
6:10
4
網頁設計 V.S 平面設計
3:48
5
如何開始你的網頁設計
4:34
6
課程中如何與我交流?
2:24

第2章

網頁 HTML 基本概念與特性
1
什麼是 HTML ?
6:45
2
網頁基礎架構
7:53
3
練習 - 基礎架構
4
HTML 父與子 的巢狀特性
6:50
5
練習 - 巢狀特性
6
Class 與 ID
6:58
7
練習 - class 與 id
8
區塊(Block)元素與水平(inline)元素 概念
7:41
9
範例 - inline 元素 與 block 元素
10
HTML style 屬性
5:23

第3章

HTML 標籤介紹
1
標題 h1 ~ h6
3:10
2
文字 與 段落
3:54
3
範例 - 標題文字與段落
4
表格 I - 創建表格
6:38
5
表格 II - 表格屬性
8:49
6
區塊容器 與水平容器
4:40
7
範例 - 正確地使用區塊容器 與 水平容器
8
連結
8:48
9
練習 - a 標籤的錨點
10
清單元素
6:41
11
圖片
5:55
12
內嵌網頁 iFrame
4:07
13
跑馬燈
2:38
14
表單 l
9:44
15
表單 ll
5:54

第4章

簡單 HTML 頁面實作
1
個人介紹頁面實作
22:52
2
學習資源
2:28

您將會學到的

  • 網頁設計,基礎知識。
  • CSS , Javascript 概念與知識
  • 能做出一個基礎的HTML 網頁
  • HTML 語法,概念實作能力

教師簡介

喜歡自學新技能。熱愛體驗、交流、分享有點意思的事物。期盼透過解決自學的問題影響世界。相信跨領域學習,將激發更多不同的社會價值。

100%

68個評價
簡單易懂!
2 天前
容易學習!
1 周前
非常棒的課程!
1 周前
淺顯易懂!
3 周前
OK
4 周前

其他人也參加了這些課程

收藏

輕鬆上雲端 - AWS 網站建置術

收藏

基礎前端(下) - CSS

收藏

illustator 輕鬆學

收藏

一次搞懂 CSS z-index 層疊特性