Let's Coding
0%

Posted on Edited on

  • 標記式語言，也就是透過標籤來建立
  • 目前的規範版本為 HTML 5

    建立第一個網頁

html:5,! 建立HTML雛形

  • 輸入標題

  • 將建立的html放到瀏覽器

HTML的文件架構

Luka 程式柴教學

  • 字元集(charset)：UTF-8,Big5

HTML的元素

1.h1

<head> </head>網頁中的頭，它的任務是要容納文件的 metadata

<h1>Heading 1 </h1>網頁中的標題 headings

2.<p>

一個段落是一個block元素，段落與段落間有距離
例如：
html有block(<p>,<div>),inline(<span>)元素
<br>換行，可與文內進行段落的區分

如圖：

3.圖片 <img>

<img src="pic_trulli.jpg" alt="Italian Trulli">

src=圖片的網址
alt 圖片代表的意思，特別對SEO優化有幫助，且在圖片無法顯示時，能呈 現基本資訊

4.連結標籤 <a>

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

  • href= 連結要去的網址位置
  • <a href="/html/default.asp">HTML tutorial</a>
    -> 也可以連結同一個檔案、目錄下的資料
  • <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
  • Target="_blank"開啟一個新的視窗，不會蓋掉前面已開啟的舊視窗，但要注意的是當開了新的視窗後，可能會影響原本視窗的運作
    建議你要加上 rel=”noreferrer noopener”

5.表格 <table>

使用的標籤有table,th,td，要使用時再去複製語法修改比較快～

簡易示意圖，清楚標籤所對應的表格位置：

6.<form> 如：登入,會員註冊

1) action 定義數據的發送位置
範例：沒有action 屬性，數據將發送到和表單所在的同一頁面<form></form>
範例：數據將發送到指定的URL位置(也就是web server位置)<form action="http://foo.com"></form>

2) <input> </input>表單輸入的設定
其中：
name 屬性用來指定送出去的該筆資料要用什麼名稱
type 建立表單元件，”text”文字,”password”密碼輸入,”checkbox”核取方塊,”submit” 表單的送出按鈕
placeholder 輸入的提示訊息
value 指定初始值 (default value)

參考資料
W3SCHOOL
Target=”_blank”的安全性風險
你不曾察覺的隱患：危險的 target=”_blank” 與 “opener”
JS - <form> 表單
HTML 表單元件 - <input> 標籤 (tag)

Posted on Edited on

此篇文章主要再介紹HTML的元素、屬性，以及簡介在前端開發中常使用的css和javascript是如何和HTML搭配使用。

HTML 元素 (Element)

1
<p>This is paragraph.</p>
  • 完整的標籤會有開始、結尾：<p>,</p>:分別為opening tag以及closing tag
  • 標籤中間包圍的This is paragraph.是內容
  • 起始標籤 + 內容 + 結束標籤:表示一個 HTML元素。

HTML 標籤屬性 (Attribute)

  • <p class="myP">This is paragraph.</p>
  • 有些Attribute是HTML內建，如：<a href="./first.html">
  • 有些是為了用於css或是javascript的部分所加上去。如：class與id的使用。
    • 補充： class與id
      是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次;ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。

css, javascript與HTML 搭配

1.css如何跟 HTML 搭配使用

(1).inline CSS

  • 在html中加入style屬性，來撰寫CSS
    1
    2
    <h1 style="color:blue;">A Blue Heading</h1>
    <p style="color:red;">A red paragraph.</p>
    ps:此方式不建議使用，會造成維護的困難

(2).internal CSS

在html檔案中，建立<style> </style>區塊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

(3).external CSS

用link的方式，連結到另一個css檔案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  /*This example links to a
  style sheet located in the same folder as the current page*/
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<link rel="value">,”stylesheet”文檔的外部樣式表

2.HTML 中使用 javascript

在html的body尾端

1
2
3
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

創立.js檔案，並引入

  • 放在<head> 前面
1
2
3
4
5
6
//HTML4 與 （x）HTML
<script type="javascript.js"> </script>

//HTML5
<script src="javascript.js"> </script>

參考資料:
W3school
MDN

Posted on Edited on

學習Command Line可以幫助我們呼叫檔案、刪除檔案更加快速，此外也可以很快的查看資料夾內的所有檔案，不用透過電腦圖示一個個點選。透過指令的使用，可以更有效率，操作也可以更加廣泛
當然，除了上述的便利性之外，它還能夠有許多操作，下面會介紹一些基本指令。

Command Line 常用指令介紹

tip: 搜尋：linux cheat sheet，就可以查詢到指令的使用方法。(如：cd:change director (移動到…資料夾))

  1. pwd 現在位置
    pwd –help 會提供詳細使用資訊

  2. ls 列出資料夾內的東西
    ls -l 列出詳細資料
    ls -s
    ll 列出檔案權限的使用者

  1. touch 創建檔案

  2. cd 移動到..地方

  3. cd.. 回到上個資料夾

  4. q 離開

  5. ctrl +c 跳出進行的程序

  6. mkdir hello (make dir) 建立目錄(資料夾) 名稱為hello
    創建好的資料夾會放在..

    刪除

  7. rm index.html (指將整個檔案砍掉 不指是到垃圾桶)

  8. rmdir 刪除目錄

  9. rm -rf 強制刪除

複製、命名與移動

  1. cp hello.txt(複製檔案)
  2. mv hello.txt I_am_dir/ （將hello.txt 移到I_am_dir）
    也可以用來改名 mv hello_word.txt hello_luka.txt (將hello_word.txt改名為hello_luka.txt)

系統管理相關指令

  1. sudo:使用最高權限（superuser）執行指令
  2. kill：根據 Process ID 指定要終止程式
  3. open . 可開啟檔案總管
  4. code. 開啟 vs code

    其他補充

  5. cat 列出檔案內的內容
  6. who 顯示電腦user的名稱
  7. clear 清除終端機畫面的指令

TLDR

安裝 npm install -g tldr
安裝之後，輸入 tldr ls 就會說明指令的使用

參考資料：
https://blog.techbridge.cc/2017/12/23/linux-commnd-line-tutorial/
https://medium.com/starbugs/linux-%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80%E5%BF%85%E8%A3%9D-tldr-%E5%91%BD%E4%BB%A4%E5%88%97%E7%A5%9E%E5%85%B5-9fbba0d4f028
Command Line - Terminal、基本指令介紹 | Yakim shu
Mac OS X Terminal 終端機常用語法教學 | 梅問題．教學網

Posted on Edited on

由於之前電腦是window7,但實在有好多更新無法跑

所以！

我決定自己嘗試將電腦從window7更新到window10

第一步：勾選查看副檔名、顯示隱藏檔案

控制台>資料夾選項>將隱藏取消

第二步：下載window10 系統安裝光碟之iso映像檔

1.至微軟的官方網站下載 windows 10 系統安裝光碟之ISO映像檔>至下載到電腦的exe檔> 點選安裝> 選擇 建立另一部電腦的安裝媒體

2.將载好的iso存入usb隨身碟，開機安裝，或燒入光碟

USB 開機製作軟體， 教你該如何使用 Rufus 魯弗斯 製作［ Windows 10 作業系統 ］安裝 USB 隨身碟

3.到安裝碟內的sources資料夾，將gatherossate.exe複製到win7桌面，點擊，出現Genuine Ticket.xml 文件，此文件需好好保存，未來重灌時需要用到

4.成功放入 USB後，就插著電腦上 用BIOS 開啟方式 ACER(關機>開機時 按F2+電源紐)>BOOST>將你的隨身碟 案F5往上移到第一順位，在按F10 儲存/啟動

接著就會開始安裝，選擇完中文…等資料>選擇 自訂>下一步> 接著就讓它安裝