Try   HackMD

認識 HTML、CSS 與實作第一個網頁

HTML是什麼?

HTML(HyperText Markup Language)，是一種超文本標記語言，它扮演著網頁骨架的重要角色，目前的規範版本為HTML5。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

CSS 是什麼？

CSS（Cascading style Sheets）是 「層疊樣式表單」的意思，也可以叫作「層疊樣式表」，實際上CSS語言是一組樣式，是一個用於網頁排版的標記性語言。

CSS主要的用途是對網頁中字體、顏色、背景、圖像及其他各種元素的控制，使網頁能夠完全按照設計者的要求來顯示。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

試著用command line 去完成任務建立第一個自己的網頁

1.先啟動iterm，先使用ls指令搜尋目前文件裡所有檔案，找到先前存放網頁檔案的資料夾。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2.使用touch創一個新的html檔案，然後再使用ls檢查是否有創建好新的檔案。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3.輸入code + index.html去開啟VScode。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

4.開啟VScode，，輸入!+tab之後就會顯示html的架構出來。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

展開後

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • title中輸入你要的網頁標題
  • h1打上你要表頭
  • p打上你要的段落

輸入完成後做儲存的動作。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

6.回到iterm，打開網頁瀏覽。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

完成第一個網頁製作！！

Last changed by 
 
Aiden Lin
0
302

Read more

HackMD介紹

HackMD網站位置：https://hackmd.io/recent HackMD 是個跨平台的 Markdown 即時協作筆記，可以在電腦、平板甚至是手機與其他人做筆記！ 同時也可以透過 Facebook、Twitter、GitHub、Dropbox 登入。 Markdown的目標是實現「易讀易寫」。 一、常用功能 斜體：在兩邊加上 *星號* 或是 _底線_ 左上角的I

Oct 6, 2024
使用 Github Pages 上傳你的第一個網頁

首先開啟iterm輸入cd project(前往我們創建好的資料夾)。 創建一個html檔案，輸入touch index.html在輸入ls檢查有美有創建成功。 輸入git status確認狀態，看到呈現的結果是紅色的，代表檔案還沒被加入git 輸入git add index.html 將html加入，再次輸入git status確認狀態，可以在圖中發現狀態變成綠色 接著準備git commit(commit代表我們將檔案從暫存提交至檔案庫) 輸入git commit -m "add index.html" (" " 裡盡量放動詞＋名詞讓人知道你做了啥）

Feb 13, 2023
Command Line基本理解

command line 也被稱作 命令行 或 命令行介面 是一個純文字的應用程式，可以查看，處理電腦裡的檔案，我們平常習慣了圖形使用者介面（Graphical User Interface，GUI）的操作，其實背後也都是這些命令列介面（Command Line Interface，CLI）所構成的。 使用CLI的優勢： 有些功能只能靠 CLI 達成。 有時候使用 CLI 更快達成目的。 Command Line常用基本指令 介紹常用的command line指令，讓自己更熟悉使用commandline 跟電腦溝通。

Nov 13, 2020
安裝Shell

什麼是Shell環境? 殼層(shell)，替我們工作的是「硬體」，控制硬體的「核心」，我們則利用「shell」控制核心提供工具來使硬體正確工作。! 安裝iterm2 官網載點：https://www.iterm2.com/ 安裝 powerlevel10k powerlevel10k github repo 先進到 powerlevel10k github 的連結裡搜尋安裝方法。

Nov 13, 2020
Read more from Aiden Lin
Published on HackMD