Archive


Category: 來玩HTML

  • [HTML] HTML的學習課程-第三章 表格元素

    HTML的學習課程-第一章 架構的認識 HTML的學習課程-第二章 標籤的類別 本文我們將接續上一章,來介紹常用的標籤,表格元素是非常重要的一環,所以我們先介紹這個元素. 首先先說明它的位置,它會放在<body></body>中間,表格元件包含幾個標籤,介紹如下 <table></table>這個標籤是表格的最外層,是告訴瀏覽器我現在要顯示一個表格,如果你的body內有二個table,就表示同一個網頁裡有二個獨立的表格. <tr></tr>這個標籤會放在<table></table>裡,告訴瀏覽器表格內有幾列(橫的叫列),若一個table裡有三對<tr></tr>,就表示有這個表格內有三列. <td></td>這個標籤會放在<tr></tr>裡,告訴瀏覽器每一列中有幾個欄位,假如一個tr裡有三對<td></td>,就表示一列包含三個欄位. <th></th>這個標籤基本上和td相同,但它會以表頭方式顯示,內容文字會加粗字體. 現在我們利用這些標籤來實作一個例子,做一個3列X3欄的表格 建立三列三欄的表格 <table border=”1″>   <tr>        <td>第一列的第一欄</td>        <td>第一列的第二欄</td>        <td>第一列的第三欄</td>    </tr>    <tr>        <td>第二列的第一欄</td>        <td>第二列的第二欄</td>        <td>第二列的第三欄</td>    </tr>    <tr>        <td>第三列的第一欄</td>        <td>第三列的第二欄</td>  […]

  • [HTML] HTML的學習課程-第二章 標籤的類別

    HTML的學習課程-第一章 架構的認識 前面我們講過了HTML的基本架構,現在我們來說明一下其他HTML的標籤,來美化我們的網頁. 首先我們來認識一下標籤的類別,依標籤的用途來分,可以分為「內容顯示標籤」和「結構標籤」 「內容顯示標籤」是用來改變內容的顯示方法,比如說字要大一點,背景要改變顏色,這邊我要斷行等等. 以下為幾個「內容顯示標籤」的例子 <h1></h1>標題顯示 <h1>這是h1的顯示</h1> 以標題方式顯示內容,HTML會顯示如下,是不是明顯放大呢?? 這是h1的顯示 <p></p>來進行文章的分段  <p>這是一段很長的文章</p><p>長到無法分段落</p><p>很難閱讀</p> 我們透過使用<p></p>段落標籤來替文章進行分段,顯示結果如下是不是比較容易閱讀了呢?? 這是一段很長的文章 長到無法分段落 很難閱讀 <br>來進行文章的換行 這是一段很長的文章<br>長到無法分段落<br>很難閱讀 使用<br>可以讓文章在需要的地方換到下一行,它和<p></p>不同的是,換行中間的間隔比較小,顯示結果如下 這是一段很長的文章長到無法分段落很難閱讀 那「結構標籤」則是用來建立表格,區塊,清單樣式等容器,再將內容放到容器內顯示給使用者,以下為幾個「結構標籤」的例子 <table>用來建立表格 <table border=”1″>    <tr>            <td>內容1</td>            <td>內容2</td>    </tr>    <tr>            <td>內容3</td>            <td>內容4</td>    […]

  • [HTML] HTML的學習課程-第一章 架構認識

    HTML是「HyperText Markup Language」的縮寫,它是運作在每個人的電腦的瀏覽器(IE,Firefox,Chrome,Safari),因為所使用的瀏覽器的不同,每個人看到的效果會有些許的差異. 而HTML的用法是利用「標籤」來告訴使用者的瀏覽器如何顯示內容,下面將介紹HTML的最基本的標籤. HTML基本架構 <html>        <head>        </head>        <body>        </body></html> <html></html>是一對的,是告訴瀏覽器在這對標籤中的內容請用HTML語法來解讀. <head></head>是一對的,裡面包含一些定義方面的內容,比如說「標題」,或編碼等,或者CSS(排版),JavaScript(網頁互動)都有可能放在這裡. <body></body>是一對的,裡面就是放我們要顯示給使用者的內容. 這裡我們可以觀察到HTML的標籤都是一對的(其實是大部分,有些例外),而開頭一定是<xxx>包住,結尾則是</xxx>,中間的xxx則替換為標籤. 那我們來做第一個HTML的例子,請依下面步驟操作 1.使用「記事本」輸入以下的內容,並儲存成first.html(HTML的檔案我們都會儲存為副檔名html或htm的檔案)   2.使用你的瀏覽器開啟這個檔案,就可以看到HTML的結果了   所以你只要在<body></body>中,加入任何你要顯示的內容,一個最基本的網頁就算完成了.你一定會問那為什麼別的的網頁那麼漂亮呢??這是因為除了本文所介紹的三個標籤外,還有許多的標籤來美化網頁,我們將在其他的文章做後續的介紹. HTML的學習課程-第二章 標籤的類別

  • [HTML] nobr的用法

    <nobr> – 禁止换行 <nobr>不管這行文字有多長,瀏覽器都會以一行來顯示,如果沒有加nobr,瀏覽器會視視窗大小依可視性而自動分行。</nobr>  

  • [HTML] 為你的按鈕定義熱鍵-accesskey

    <html><head><title>為你的按鈕定義熱鍵</title></head><body><form action=”” method=”get” name=”form1″><textarea rows=10 cols=50></textarea><br><input type=”submit” accessKey=”S” value=”提交(Alt+s)”></form> </body></html>

  • [HTML] 建立無邊框的平面按鈕

    <html><head><title>無邊框平面按鈕</title></head><body><input type=submit value=保存 style=”border:1px ;solid:#666666; height:35px; width:50px; font-size:15pt; background-color : #FFFFFF; color:#666666″ name=”submit”></body></html>

  • [HTML] 使用meta定義網頁關鍵字

    <html><head><title>定義關鍵字</title><meta name=”Keywords” content=”pixnet,charleslin74,blog”>關鍵字是pixnet,charleslin74,blog</head><body></body></html>

  • [HTML] frameset框架的用法

    <html> <frameset cols=”25%,50%,25%”> <frame src=”frame_a.htm” /> <frame src=”frame_b.htm” /> <frame src=”frame_c.htm” /></frameset> </html>

  • [HTML] 指定瀏覽器的編碼

    <head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /></head> 大陸的 <head><meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ /></head> 台灣的 <head><meta http-equiv=”Content-Type” content=”text/html; charset=Big5″ /></head>