Web Practice #0
Published in
5 min readJul 10, 2019
哈囉大家好
最近想複習一下並且做一點給完全零基礎的新手的練習教學
為什麼是#0呢？
大家都知道，工程師在寫程式前都必須要有些準備，那這篇就會來介紹一下該做哪些準備 xD
準備
* 一台電腦 (Windows / Linux / Mac) < 有Mac當然最好:) >* 一個有聽過的編輯器(Sublime / Atom / Vscode)* 200ok (Chrome插件) / Xampp (一鍵式架站 // 越來越少人使用 XD)* Web相關資訊* Git* 還有好好學習的心 XD (有任何問題歡迎多問)
前期的Javascript，我不會談到資料庫（Database），所以使用200ok就行勒!
Web
廣義來說我們看到的所有網頁都稱之為Web(網頁)，而Web有各路門派。
我舉個大家比較知道的大宗 ：
- 前端（Front-End）: HTML / Js / Css
- 後端（Back-End ）: Php / Go / NodeJs
很多新人一開始都會問到底要學哪種語言?
我都會推薦從網頁學起，因為Web賽高(X)
- 新手都會怕看不到結果而害怕去做，那Web就可以讓你即時查看
- 新手也會怕很多繁瑣準備，而網頁只需要一台電腦有辦法跑localhost就可以勒 XD
基本上，現在大學課程都會教一套式的網頁(HTML / Js / Css / Php / Apache )
有興趣也可以拿本書來翻看看，切記勿買組合包 XD
編輯器
編輯器就等於是工程師的武器，等於汪大東的龍紋熬，沒有編輯器工程師彷彿沒有靈魂(X)
- Vscode : 目前最愛好之編輯器！微軟所推出的編輯器支援相當多功能套件，有支援繁體中文。
- Sublime：我最初寫程式即是使用Sublime，簡潔的畫面強大的功能當初深深吸引我，雖然現在還是跳槽去Vscode XDD
當然還有許多種編輯器，有興趣的可以去查查看看～
Server
很多時候都會看到工程師說 localhost / 127.0.0.1，大家都會問這是什麼？
那我們要怎樣去開啟我們的網頁呢？
下載完200ok，點開它後會看到這樣的頁面 ：
- 在Desktop(桌面)，新增helloweb的資料夾
- 點擊 Choose Folder 至桌面選helloweb資料夾按下open，將200ok縮小即可
- 之後要開啟web，只需要在搜尋列輸入localhost:8887即可～
Work
說了一堆的廢話，該來進入實作勒！
第一篇當然就是做熟悉的HelloWorld勒 XD
- 開啟您喜愛的編輯器，開啟資料夾(desktop/helloweb)，新增檔案取名為index.html
- 將底下這些內容複製貼上至index.html中，並且存檔！
<!DOCTYPE html><html><head><title>Hello World</title></head><body><h1>Hello My name is Panda</h1><h2>Hello World! </h2><!-- 請自由把自己的名稱填上 XD --></body></html>
- 至瀏覽器輸入localhost:8887
Contact Me
Hello, I am Panda . 一個大部分時間都沒在寫程式的假工程師Q_Q
現在為高科大區塊鏈研究社社長 / ASMOND CTO :|
補充連結：
- h1 — h6 標籤 https://www.wibibi.com/info.php?tid=354
- HTML常用語法標籤 http://mail.lsps.tp.edu.tw/~gsyan/notes/html.htm
