2015年1月28日 星期三

HTML/CSS

Overview & Updates

在接下來會介紹HTML5的更新，下面先介紹HTML5的更新項目
  • Doctype 
  • Meta declaration
  • Script tag
  • Link tag

Doctype(Document Type)文件類型定義

Doctype是用來宣告，該網頁的 HTML、XHTML 所用標籤是採用什麼樣的 (X)HTML 版本。
宣告DTD文檔類型，裡頭包含了 HTML、XHTML 標籤規則，瀏覽器依據 DTD 來分析 HTML 的編碼，在HTML5簡化為<!DOCTYPE html>

Meta declaration

過去我們宣告網站內容的種類與編碼，要在寫入
<meta  http-equiv="Content-Type" content="text/html; charset=UTF-8">

在HTML5只要寫
<meta charset="UTF-8">
就有一樣的效果了

Script tag

HTML5在加入js檔也變得更簡單了，過去是
<script type="text/javascript" src="file.js"></script>

而現在不需要寫type了，瀏覽會自動判讀
<script src="file.js">

Link tag

以前載入CSS檔案需要打
<link rel="stylesheet"  type="text/css" href="main.css">

現在只需要
<link rel="stylesheet" href="main.css">

張貼者： 於 沒有留言:

2015年1月27日 星期二

HTML/CSS

Font

網頁製作中除了之前介紹的圖片、排版等，必定會用到文字，在word上有的基本字型設定，在CSS都可以做到

font-family:Helvetica,Arial;   --設定文字字體，要注意的是如果使用者沒有第一個字體會套用下一個字體，所有可多設定幾個字體作為備用

font-size:20px;   --設定文字大小，屬性如下
  • 固定數值15px、1em、1.2cm
  • small(小)、large(大)
  • 120%(比上一層的120%)、smaller(比上一層更小)、larger(比上一層更大)
font-weight:bold;
  • normal  --正常
  • bold      --粗體
  • bolder   --比粗體更粗
  • lighter   --細體
  • 100,200...,900   --粗度
font-style:italic;   --設定文字的樣式
  • normal     --正常
  • italic        --斜體
  • oblique    --傾斜
font-transform:uppercase;    --設定英文單字的大小寫
  • uppercase    --所有英文單字字母都是大寫
  • lowercase    --所有英文單字字母都是小寫  
  • capitalize     --英文單字的第一個字母是大寫，其餘是小寫
line-height: 1;   --設定文字行間距
  • normal    --預設值 
  • 1、2...    --字體大小乘以此數值設定為行高 
  • 25px       --兩行間距20px 
  • 120%      --字體大小乘以此數值設定為行高
text-decoration:underline;    --替文字加上特效
  • none              --預設值，沒有特效
  • overline         --增加上線
  • underline       --增加底線
  • line-through   --增加刪除線
text-align:center;     --設定文字的對齊
  • left         --靠左對齊
  • right       --靠右對齊
  • center    --置中對齊
  • justified  --左右對齊

Form

如果網頁需要使用者輸入的資料時(登入帳密、填寫會員資料)，我們會使用到form表單，form裡會放入需要被送到server端的tag，比如說明文字的label、輸入帳號的input tag、勾選用的checkbox、輸入資料的text area以及送出的submit

 input    --輸入相關tag，在input只能輸入單行資料
  • text            --常見的輸入方塊(帳號)，只有單行
  • button        --按鈕，在按下後可執行某些動作
  • checkbox   --勾選的方塊，可以複選
  • radio          --多選一的選單，不可複選
  • password   --密碼的輸入方塊，輸入值在畫面上是顯示＊
  • submit       --點擊後會送出所在的form表單
  • file             --點擊後會跳出開啟檔案的視窗
-------------------------------------------------------------
<form>
     <label for="usrname">使用者名稱</label>     
     <input type="text" id="usrname" >          --上面有紹input type的屬性值
</form>

label    --標記文字，說明要填入的資訊為何
-------------------------------------------------------------
<form>
     <label for="usrname">使用者名稱</label>     --for要輸入想要標記的tag的id
     <input type="text" id="usrname" >
</form>

textarea     --文字區塊，在input只能輸入單行的資料，而textarea可以輸入多行，在textarea裡也可以使用font設定其字型
-------------------------------------------------------------
<form>
     <label for="proposal">建議</label>     
     <textarea id="proposal" ></textarea>
     <input type="text" type="submit" value="確定">    --value值為使用者所看到的文字
</form>

Inline&Block

label與input是inline-level，在使用為求美觀，通常會設定成block-level(display:block)；inline-level與block-level最大的差異是block-level有margin、padding、border等屬性，而inline-level沒有
-------------------------------------------------------------
input{
     diplay:block;
}

Attribute selectors

在設定指定tag時也可以指定某一個tag的特定屬性，比如指定input tag的屬性為type值為submit，給予其CSS設定(如下)
-------------------------------------------------------------
input[type=text]{      --在tag名稱後面打上中括弧，括弧中寫上屬性名稱=屬性值
     border:2px solid #f41342;
     font-size:18px;
     padding:5px;
}

張貼者： 於 沒有留言:

2015年1月26日 星期一

HTML/CSS

Images

在網頁中我們常會使用到圖片，圖片分為三種content images、layout images、user interface images，在下面會分別進行介紹

Content Images

是指網頁中內容的一部分，比如購物網站上的商品圖片，圖片的tag是img，圖片、網頁要放在相同資料夾
---------------------------------------------------
<img src="cat.png">  --src後面加上圖片的名稱及副檔名，副檔名一定要打

但是一個網頁中會有多張圖片，如果全部都放在資料夾內會難以整理，這時我們可以將圖片放在各個資料夾，在src中加上資料夾名稱
---------------------------------------------------
<img src="animal/cat.png">   --讀取animal資料夾內的cat.png

有時候網站會無法讀取圖片，所以最好在圖片內加上說明，指出這張圖片是什麼，或是其作用
---------------------------------------------------
<img src="animal/cat.png" alt="這是一隻貓">   --在alt內輸入說明的文字

也可以將圖片放入清單內，但是清單前面都會有一個項目符號，且每張圖都換行，這時可以這樣修改
---------------------------------------------------
ul{
     list-style-type:none;   --將項目符號關閉
     padding:0;
}
ul li{
     display:inline;   --將圖片設定為同一行，不換行
}

我們也可以將LOGO變為圖片，但這時想要將圖片置中，並不能使用center，因為img是屬於inline，這時需要修改display屬性與margin
---------------------------------------------------
img{
     display:block;   --將img改為block，這樣就可以設定margin
     marign:0 auto 0 auto;   --之前提到的置中效果
}

Layout Images

layout images通常是指非內容的圖片，通常是指背景圖片，藉由backgroung來設定背景圖
---------------------------------------------------
background-color:#ffffff   --設定背景顏色為#ffffff
background-image:url(image/home.jpg);   --url的括弧內是圖片的位置與檔名
background-position:(top center bottom)(left center right);   --設定背景圖片出現的地方，這裡有兩個值，下圖是該屬性表示的意思
－－－－－－－－－－－－－－－－－－－
｜  top   left  ｜ top    center  ｜  top    right  ｜
｜－－－－－－－－－－－－－－－－－｜
｜center left ｜center center  ｜center   right｜
｜－－－－－－－－－－\－－－－－－－｜
｜bottom left｜bottom center｜bottom right｜
－－－－－－－－－－－－－－－－－－－

background-repeat:(repeat repeat-x repeat-y no-repeat);   --若圖片太小會無法覆蓋網頁，可以設定該屬性，讓背景圖重複出現，這是圖片出現的不同方式
repeat   --會讓背景圖重複出現在X軸與Y軸，即覆蓋整個頁面
repeat-x   --背景圖只在X軸重複
repeat-y   --背景圖只在Y軸重複
no-repeat   --背景圖不重複

background:#ffffff url(image/home.jpg) top left repeat;   --也可以簡化成這樣

在輸入英文時會更改其大小寫，使用這個屬性會更方便
---------------------------------------------------
text-transform   --設定英文的大小寫，有三種
uppercase   --所有字母都是大寫
lowercase   --所有字母都是小寫
capitalize    --每個單字的第一個字母是大寫，其餘是小寫

Floating Images

float浮動是現在網頁製作時常會使用到的屬性，由其是使用在div，float可以更好的進行版面的調整、配色等，對於美工更加方便、有彈性
---------------------------------------------------




<ul class="flt">
     <li>
          <img src="image/home.jpg">
          <h3><a href="...">MyCat</a></h3>
          <p>......</p>
     </li>
</ul>

.flt{
     float:left;   --float使圖片浮向右邊，字就會自動上移
}
張貼者： 於 沒有留言:

2015年1月24日 星期六

Ruby 初階課程

Ruby是一個物件導向的程式語言，是由日本人松本行弘(Matz)設計開發的，減少編程時候的不必要的瑣碎時間，讓編寫程式的人高興是設計Ruby語言的Matz的一個首要的考慮；其次是良好的介面設計。他強調系統設計必須強調人性化，而不是一味從機器的角度設想

 人們特別是電腦工程師們，常常從機器著想。他們認為：「這樣做，機器就能執行的更快；這樣做，機器執行效率更高；這樣做，機器就會怎樣怎樣怎樣。」實際上，我們需要從人的角度考慮問題，人們怎樣編寫程式或者怎樣使用機器上應用程式。我們是主人，他們是僕人。
因此Ruby的語法很直觀，較容易理解，與其他程式語言有較大的差異，現行使用版本通常為2.0以上，課程中所使用編輯器為sublime text

使用指令：

gem list  --目前安裝的套件
gem unpack PACKAGE_NAME  --查看該套件的位置

Ruby 基礎

Ruby是完全物件導向的程式語言
Ruby 中所有東西都是物件，除了block
Ruby 中所有東西都是物件，除了block
變數不需要進行宣告，不用打String x=1;，可以直接寫x=1

變數­­­

@+NAME　 --實體變數
@@+NAME  --類別變數
Ex:name="abc"   --區域變數
Ex:Name="abc"   --常數以大寫字母開頭，可以被改變

$+NAME  --全域變數

基礎用法

if

if x==1
        puts "1"
else
        puts "2"  
end
在Ruby中的if用法是If elsif end
其他也有case...when...end
---------------------------------------------------------------------------------------------

陣列

friends =[1,2,3]   --宣告陣列，陣列中有1、2、3
印出陣列程式碼
for friend in friends
        puts friend
end 
friends.each do |friend|
        puts friend

end
這兩種寫法是一樣的，通常使用下面的each寫法

陣列的指定
指定第一個位置為friendds[0]、friends.first，最後為friends.last
p friend　可以印出該陣列的值
(1..52).to_a  --會宣告一個1~52的陣列
---------------------------------------------------------------------------------------------

迴圈

分別印出從1~10與10~1 的迴圈

1.upto(10) do |i|                --將1~10照順序帶入變數i
        puts "ht,ruby #{i}"   --印出十次
end

10.downto(1) do |i|             --將10~1照順序帶入變數i
        puts "hi,ruby #{i}"     --印出十次
end

 宣告一個1~100的陣列並加總
(1..100).to_a.each do|i|      --將1~100照順序帶入變數i
        sum+=i              --將sum+i，也就是1+2+...+100

end
---------------------------------------------------------------------------------------------

宣告mothed方法

def say_hello_to(name,age)                   --宣告一方法say_hello_to，且有輸入值name、age
    puts "hello, #{name},I am #{age}"   --印出子串，並帶入變數
end
say_hello_to("abc",18)     --這行呼較叫say_hello_to並帶入兩變數


結果為hello, abc ,I am 18
puts ""中的#{name}表示在字串中帶入變數name的值
---------------------------------------------------------------------------------------------

yield 控制權移出

def do_something
        puts "1"
        yield "xyz", 12        --移出並帶入變數
        puts "2"
end

do_something do |i,j|
        puts "Hello #{i} ,#{j}"
end

結果為 1  Hello xyz,12    2
當執行到 yield時，自動執行do_something，如果沒有打do_something，並不會執行do_something

if block_given
        yield
end

也可以寫成  yield if block_given?
---------------------------------------------------------------------------------------------

Class

class Animal  --宣告class 變數字首必須要大寫
        def sleep
                puts "z~z~z~"
        end
end

class Cat < Animal   --代表Cat繼承Animal
end

class Dog < Animal  --代表Dog繼承Animal
end

dd=Dog.new
dd.sleep   --因為繼承Animal，所以有sleep
cc=Cat.new

cc.sleep   --因為繼承Animal，所以有sleep
---------------------------------------------------------------------------------------------
class Dog
end

dd=Dog.new
def dd.sleep   --宣告dd.sleep，只有dd可用其他的不可以用
        puts "zzzz"
end


dd.sleep
結果為 zzzz

 cc=Dog.new
cc.sleep   --因為只有dd.sleep，所以cc會找不到sleep方法
---------------------------------------------------------------------------------------------

類別方法

class Dog
def self.fly   --self 可以寫成Dog
puts "aa"
end
end

dd=Dog.new

Dog.fly
結果為aa
---------------------------------------------------------------------------------------------

Protected

class Dog
        def sleep
                secret   --secret、self.secret皆可以
                self.secret   --secret、self.secret皆可以
        end
        protected
        def secret
                puts "heyhey"
        end
end
dd.sleep
---------------------------------------------------------------------------------------------

Private

class Dog
        def sleep
                puts "aa"
        end
        private
        def secret
                puts "heyhey"
        end
end

dd=Dog.new
dd.secret    --因為是pirvate程式，所以會錯誤
dd.send(:secret)    --可以直接呼叫private的程式

 改成這樣就可以
class Dog
        def sleep
                secret   --前面沒有東西，不可以用self.secret
        end
        private
        def secret
                puts "heyhey"
        end

end
dd.sleep
---------------------------------------------------------------------------------------------
class Dog
        def initialize(name)
                @name=name
        end
        def name
                @name
        end
        def name=(new_name)
                @name=new_name
        end
end

dd=Dog.new("lucky")

puts dd.name
-    -    -    -    -    -    -    -    -    -    -    -
class Dog
        attr_accessor:name
        def name
                @name
        end
        def name=(new_name)
                @name=new_name
        end
end

dd=Dog.new("lucky")

puts dd.name

以上兩個是相同的意思，只是縮寫
---------------------------------------------------------------------------------------------

Module 模組

有時會我們會需要需要一些特別的方法，但又不想要使用繼承，這時候可以使用Module

模組無法繼承
模組無法實體化

module Flyable      --宣告模組flyable
        def fly
                puts "I can fly"
        end
end

class Dog
        include Flyable     --組入模組flyable
end

Dog.new.fly
---------------------------------------------------------------------------------------------

特殊用法&注意

a ||=10     --表示若a沒有宣告即為10，若有就沒做動作
#              --後面是註解
5 time{}  --代表將{}內程式執行5次
nil            --等於空、沒有的意思
10/3         --為3因為前後都是整數
10/3.0      --為3.333....

字串宣告為單引號''、雙引號""，單引號內不可以呼叫變數，雙引號可以"hello, #{name}"
字串宣告也可以用%q(a) ==  'a'、%Q(a) = "a"

陣列內不一定要存放相同的類型，可以同時存數字與文字

 10 ** 2             --是指10的2次方
xxx.superclass  --會印出xxx繼承自誰
open Class        --Ruby可以更改class包含預設的，如+、-、*、/
---------------------------------------------------------------------------------------------
之前在學校都是使用java、javascript，今天了解了Ruby發現它真的是一個很特別的語言，與之前看過的程式語言都不太一樣，因差異太大，有學過java反而有點難懂，如果熟練了之後，寫程式可以更快更方便
張貼者： 於 沒有留言:

Git

在進行程式開發時，我們經常會備份以防止意外，備份常常是在檔名後加上日期，若一天有多次修改甚至會有_1_2，或是有時候需要進行重大的修改，又要複製整個程式，Git可以解決這一個問題。

Linus Torvalds是Linux核心的最早作者，他也是Git的主要開發者，Git是為了更好管理Linxux核心所設計的；Git是一個版本控制系統，它可以開很多branch(分支)，給多個開發者使用，能讓程式開發工作更順利。

下列是基本的指令

git --version  --查看目前Git版本

git config --global user.name "......"  --設定user的名稱

git config --global user.email ....@....com  --設定user的email

git clone https://github.com/.... --下載該網址的檔案

git init --將目前所在資料夾初始化

touch xxxx.rb  --建立檔案xxxx.rb

git status  --查看在各區域的檔案(工作區=紅色，暫存區=綠色)

git add xxxxx.rb xxx.rb… --將檔案xxxxx.rb 與 xxx.rb 加入暫存區(綠色)

git add –all  --將所有檔案加到暫存區

git rm --cached xxxxx.rb  --將暫存區裡xxxxx.rb的檔案刪除

git commit –m “xxxxx”  --將檔案存檔”註記文字”

nano xxxxx.rb  --以nano編輯器開啟xxxxx.rb檔案

新建的檔案及變動過的檔案會自動進入工作區(紅色)
經由add指令可以將檔案加入暫存區(綠色)，但是暫存區的檔案並沒有備份，
必須要在使用commit指令存入倉庫區，才有備份成功

git log  --可看歷史使用紀錄(如果檔案出問題可以在此觀看是誰改了)

git commit –amend  --可以修改commit訊息(註記)，重要的辨識資訊

git checkout xxxxx.rb  --取消之前指令，若不小心刪除檔案可以以此恢復

branch 是Git中一個重要的功能，如果程式有實驗性的新功能、Bug的修正等...，可以使用branch，在branch上的修改並不會影響到主線，因此分支可以任意修改，在任何時候都可以將分支Merge(合併)，在進行程式開發工作時這個功能十分方便

git branch  --可查看目前分支

git branch xxxx  --新建分支xxxx

git checkout xxxx _切換至分支xxxx

git merge xxxx -合併分支(將xxxx分支併入目前所在分支)

git branch –D xxxx  --刪除分支xxxx

git push origin master  --將倉庫區的檔案上傳至Github

git pull  --從遠端更新本地端的檔案，clone是下載、pull是更新，兩者不同

張貼者： 於 沒有留言:

2015年1月21日 星期三

HTML/CSS

Classes and Layout

Class

在網頁製作的過程中，我們常會使用CSS進行網頁介面的美化，但若每一種tag只能有一種樣式，實在太不人性了，因此我們可以使用Class來指定設定某些tag，藉由class套用格式，讓網頁製作更為方便、快速

如果要套用CSS格式，我們可以這樣
---------------------------------------------------
ul{color:#000000}    --修改所有ul的文字顏色改為#000000
ul li{color:#000000}   --修改所有ul中的li，將文字顏色改為#000000

或是指定特定項目
---------------------------------------------------
ul li:first-child{color:#000000}   --修改ul中的第一個li的文字顏色

但是只有這樣還是不夠，藉由class能改變特定某幾個tag，讓製作更為方便
---------------------------------------------------
<ul class="nav">   --將ul套用class:nav
<p class="nav">   --將p套用class:nav
.nav{color:#000000}   --在style裡設定classs:nav的屬性，套用到所有class:nav的tag，在class名稱最前面要加一個點

只有有指定class的tag會被改變，其他tag並不會被改變(在這裡只有這個ul、p會改變，其他的ul、p不會改變)

當然也可以指定class下的某個tag
---------------------------------------------------
.nav a{color:#000000}   --這樣子會套用到所有class:nav裡的a，比如
<ul class="nav">
     <li><a href="......">abc</a></li>    --會改變a的顏色
     <li><a href="......">123</a></li>    --會改變a的顏色
</ul>

如果同時有兩種CSS會依照順序，後面蓋掉前面，比如
---------------------------------------------------
<ul class="nav">......</ul>
.nav{padding-left:0;}
ul{padding-left:10px}

以上情況該ul的padding-left為10，因為後面的會將前面的覆蓋，所以通常會將class許在後面
---------------------------------------------------
ul{padding-left:10px}
.nav{padding-left:0;}

Move CSS to a single file

有時候多的網頁會使用部分相同的CSS，但如果要複製到每一個網頁十分麻煩，且不易進行維護，所以我們可以將CSS單獨變成一個檔案.css
---------------------------------------------------
abc.html
<head>
<style type="text/css">
     h1{
          color:#000000;
          padding-left:10px;
     }
     .
     .
     .
</style>

我們可以將CSS單獨存入一個檔案main.css
---------------------------------------------------
main.css
 h1{
          color:#000000;
          padding-left:10px;
     }
     .
     .
     .

將原本abc.html內的css刪除，加入<link>，rel是relationship的縮寫
---------------------------------------------------
abc.html
<head>
     <link type="text/css" rel="stylesheet" href="main.css">
</head>

只要將css檔與html檔放在一起，且加上link，便可以將css套用到多個html，至於css的寫法與之前完全一樣，不須做更動，只要更改css檔案，便可以變更多個html

Div division tag

在排版的時候除了上述的方式，還有div tag，這個tag能將版面分為多個部分
---------------------------------------------------
<div class="nav">   --div也可以指定class
     <ul class="nav">
          <li><a href="......">abc</a></li>    --會改變a的顏色
          <li><a href="......">123</a></li>    --會改變a的顏色
     </ul>
</div>

置中
如果設定div的寬度小於網頁寬度，可以將margin的左右都設定為auto，這樣div就會置中了
.nav{margin:3px auto 3px auto;}
.nav{text-align:center;}   --text-align可以將文字置中



張貼者： 於 沒有留言:

2015年1月19日 星期一

CSS -selectors&colors&box model

層疊樣式表(Cascading Style Sheets，簡寫CSS)，在網頁中我們常會使用CSS來調整我們的版面

CSS selectors

通常我們會將CSS寫在<style></style>中，並將style放在<head><head>裡面
<head>
    <style="text/css">
          ul{
              color:black;
          }
    </style>
</head>
這段表示將所有的<ul></ul>tag中的文字顏色改為黑色，當然也可以指定套用特定項目
<head>
    <style="text/css">
          ul  li{
              color:black;
          }
    </style>
</head>
這段是指將所有<ul>裡的<li>中的文字顏色改為黑色，如果我們只要改第一個項目
<head>
    <style="text/css">
          ul  li:first-child{
              color:black;
          }
    </style>
</head>

CSS Hexadecimal colors

在上面我們是使用預設的顏色，有時候我們會希望能使用更多的顏色，CSS也提供以十六進制指定RGB顏色
<head>
    <style="text/css">
          ul  li:first-child{
              color:#000000;
          }
    </style>
</head>
同樣是黑色，但在這裡以十六進制指定RGB顏色，指定顏色要在前面加上#，#後面要加上6個位數，這裡的6位數是有意義的，每兩個位數代表RGB的數值，如#1A3B5C表示R是1A、G是3B、B是5C，R是紅色Red、G是綠色Green、B是藍色Blue，又這裡的數值是以十六進制表示，通常我們使用十進制
57=5X10+7X1
而這裡使用的是十六禁制
10=A,11=B,12=C,13=D,14=E,15=F
1A=16+10,3B=16*3+11,5C=5*16+12
依據不同的組合可以產生各種顏色
如果都是零就是黑色(#000000)，相反則是白色(#FFFFFF)

CSS The Box Model

在排版中我們通常會用到Box Model 的觀念，藉由Padding、Border、Margin來建造自己所想要的版面，下面三個屬性的設定方式
h2{
    padding-top:6px;  --設定上方寬度
    padding-right:4px;  --設定右方寬度
    padding-bottom:0;  --設定下方寬度
    padding-left0;  --設定左方寬度
 
    border-width:4px;  --邊框寬度
    border-style:solid;  --邊框類型(實線)
    border-color:black;  --邊框顏色

     margin-top:7px;  --設定上方寬度
    margin-right:0;  --設定右方寬度
    margin-bottom:7px;  --設定下方寬度
    margin-left0;  --設定左方寬度
}
也可以寫成
h2{
    padding:6px 4px 0 0;  --依序設定上右左下寬度
    border:4px solid black;--依序設定邊框框度、類型、顏色
    margin:7px 0 7px 0;  --依序設定上右左下寬度
}


張貼者： 於 沒有留言:

HTML -tags&links

超文件標示語言(HyperText Markup Languag)又名HTML

HTML tags

HTMLtags 需要被包在< >中，以< >，以</>為結束，例如<html></html>
以下是範例
<!DOCTYPE html>
<html> --在網頁中只會有一個html標籤，所有東西都放在這標籤下
  <head> --html網頁的標頭
  </head> --head結束
  <body> --我們看到的網頁內容放在這裡
     <h1>蛋糕食譜</h1> --h1~h6表示標題，具有層遞性
     <h2>布朗尼</h2>
     <h3>材料</h3>
          <ul>  --<ul>是沒有順序的清單
              <li>雞蛋2顆</li> --清單中的項目
              <li>麵粉45克</li>
          </ul> --<ul>結束
    <h3>作法</h3>
    <p>先趁好材料....</p> --<p>表示一個段落
          <ol> --<ol>是具有順序性的清單
              <li>分離蛋黃蛋白</li> --清單中的項目
              <li>將麵粉過篩</li> 
              <li>將巧克力與奶油融化</li>
          </ol> --<ol>結束 </body> --<body>結束 </html> --<html>結束

HTML links

HTML links包含一般常見的超連結，超連結的tag是<a>
如果我要建立一個超連結，連結名稱是google，網址是www.google.com
寫法是<a href="http://www.google.com" target="_self">google</a>
在<a></a>中間的是超連結的東西(可能是文字、圖片)
href 後面的http://www.google.com是連結的網址，這是連到外部網站的寫法(絕對位置)，如果是網站內部可以直接寫網頁名稱(如:page2.html 相對位置)
target表示要如何開啟連結，常用的是_blank在新網頁開啟、_self在目前網頁開啟
target 也可以不寫
如果不寫target， <a href="http://www.google.com">google</a> ，預設是_self
張貼者： 於 沒有留言:
訂閱： 意見 (Atom)