HTML基本知識,標籤 ,屬性名稱,簡介

網友們是否覺得如何造出網頁,一點頭緒都沒有其實非常簡單,我們可以利用記事本,WORDPAD編寫HTML,製作網頁!

認識一下HTML

瀏覽器對整個HTML程式的解讀都是靠著由<....>,</....>這一類對稱的,我們稱之為標籤的東西來控制的,底下就列出幾個基本的標籤,及其對應的標籤,再各別加以解說

綜合以上各點,一個網頁的基本結構如下:
<html>
<head><title>我的網頁</title></head>
<body>
用記事本打入試試吧!
</body>
</html>
只要在記事本中打入這些標籤和你所要的內容再將它存檔成純文字文件 ,並將副檔名設為.htm或是.html即可成為最最最簡陋的網頁! 試範圖

基本

如何在網頁上顯示出不同字型,大小,顏色字型大小方面有兩種方法:
第一種係試用<h?>,問號係數字,放入不同數字有不同大小,1為最大,6為最細
第二種方法係試用size方法,但試用size方法則要在放左FONT裡,例如<font size=?>問題號係數字,1為最細,7為最大,緊記用左<font>要記住</font>

<H1>??</H1>

<H2>??</H2>

<H3>??</H3>

<H4>??</H4>

<H5>??</H5>
<H6>??</H6>

<font size=7>??</font>
<font size=6>??</font>
<font size=5>??</font>
<font size=4>??</font>
<font size=3>??</font>
<font size=2>??</font>
<font size=1>??</font>字型顏色方面我們同樣利用FONT中的color,例如<font color=red,color=?>,問號那裡可以放入英文顏色字串,或16制顏色,例如color='#000ff0'
<font color=red>紅色</font> <font color=yellow>黃色</font> <font color=blue>藍色</font> <font color=gold>金色</font> 我想您現在有些頭緒了,繼續努力
字型方面我們同樣利用FONT中的face,例句<font face=標楷體>,看看下面的例子 <font face=標楷體>標楷體</font> <font face=impact>only use in english</font>
字體還有好幾種類別,例如細明體,Arial,華康中黑體等等,在這裡我們可以把face,color,size同時間放在FONT裡例如<font size=1 color=red face=impact>
<font size5 color=yellow face=標楷體>我的大小是5,顏色是黃,字型是標楷體<font>
<font size2 color=red face=impact>我的大小是2,顏色是紅,字型是impact<font>

好了到了第二個題目了,我們可以在網頁上加上粗字,斜字,字下有線字等等..
粗字是<b>粗粗粗</b>
斜字是<i>斜斜斜</i>
字下有線字<u>線線線<u>
上方位10<sup>12</sup>=212
下方位10<sub>12</sub>=212
大字<big>大大大</big>
小字<small>小小小</small>
<br>這是轉到下一行的意思
<p>也是轉到下一行的意思啊
<hr>是分隔線
<align>屬性是可設定物件的方向其中有<align=center>,<align=left>,<align=right>

左<h4 align=left>左</h4>

中<h4 align=center>中</h4>

右<h4 align=right>右</h4>

跑馬燈

想知道馬跑燈是甚麼嗎?我就是跑馬燈了!其語法為:
<MQRQUEE>想知道馬跑燈是甚麼嗎?我就是跑馬燈了</MARQUEE>
捲動的背景顏色 我是跑馬燈啊!<marquee bgcolor=yellow>我是跑馬燈啊!</marquee>
想設定跑馬燈的背景可以使用bgcolor=??,隨您喜歡加上任何顏色
捲動方向 我是跑馬燈啊!
<marquee bgcolor=yellow direction=right>我是跑馬燈啊!</marquee>
設定其捲動方向我們可以使用direction=方向,方向有二種:right,left
捲動方式 我是跑馬燈啊!
<marquee bgcolor=yellow behavior=alternate>我是跑馬燈啊!</marquee>
設定其捲動的行為,其共有三種變化:
Scroll讓文字從螢幕的一邊從頭開始秀出來,再從男一邊出去消失不見!如此為一般的捲動效果!
Silde讓文從螢幕的一邊從頭開始捲動,直到文字碰螢幕的另一邊後就停下來不動
Alternate讓文字在螢幕兩邊來回捲動
捲動寬度與高度值 我是跑馬燈啊!
<marquee bgcolor=yellow width=300 height=40>我是跑馬燈啊!</marquee>
用來控制捲動文字的高度與寬度,可以設定為螢幕高度和寬度的百分比例,或實際以pixel(像素)值表示!
捲動的像素大小 我是跑馬燈啊!
<marquee bgcolor=yellow scrollamount=4>我是跑馬燈啊!</marquee>

圖案

我們再深入一些吧,那我們可以學學貼圖了 <img src="??">,問號可以寫上張圖的網址或寫上圖案的立置,而這個寫法比一般的有些特別,像是<big>就要加上結尾</big>,而圖案則不用寫上結尾,我們試試吧
<img src=""> 圖案可以放大或放細,那麼我們便要加上height,width.那怎樣寫呢,寫法如下

<img scr="" height="50" width="50">


我是alt寫出的可們也可以加上alt指令,alt指令是當圖片不能顯示時可以告訴別人知那是甚麼<img scr="" height="10" width="10" alt=我是alt寫出的>(把滑鼠放在左邊的圖上)

圖案出現邊框怎樣消除它呢?
我們可以加上<BORDER=0>,其語法是<img scr="" border=0>

超連結

學完圖案那我們再深一層了,那我們學一學超連結吧!
<A HREF="">這個位置可寫上任何字句</A>這是超連結的寫法,記住要加上</A>否則沒有反應啊!
網友們試試按一按我當網友們按下後,本視窗便會顯視出我連結的網頁!而本範例其html code係<a href="">網友們試試按一按我</a>
超連結方面有target指令,target係指定連結視窗出現的方式,其有幾種屬性_BLANK,_SELF,_TOP,_PARENT!
_BLANK是開一個新視窗出現的意思
_SELF是在同一視窗出現
_TOP是全個畫面的連結
_PARENT連結之文件會出現在其母視窗之中如我們沒有設定TARGET,其預設為_SELF
範例<a href="http://www.talking.f4w.net/"target=_blank>按按如何</a> 按下試試
在這個連結裡,我們按下"按下試試"之後就由一個新窗視表示!
還有當我們想連結到電子郵箱,其寫法如下<a href="mailto:e_mail地址">請奇信給我</a>

清單


  1. 第一個
  2. 第二個
  3. 第三個

怎樣寫的呢?首先清單起始的語法是<OL>,而項目位用<LI>,最後記住結束</OL>
而這個清單的語法是
<OL>
<LI>第一個
<LI>第二個
<LI>第三個
</OL>
除以上表示外還有:

  • 第一個
  • 第二個
  • 第三個

    • 怎樣寫的呢?首先清單起始的語法是<MENU>,而項目位用<LI>,最後記住結束</MEUN>
    而這個清單的語法是
    <MEUN>
    <LI>第一個
    <LI>第二個
    <LI>第三個
    </MEUN>
    還有其他表示方法啊:

    1. 我們可
    2. 以用英
    3. 文母來
    4. 代替啊

    怎樣寫的呢?首先清單起始的語法是 <OL TYPE=A>,而項目位用<LI>,黑色正方用<LI TYPE=square>,白色圓形<LI TYPE=circle>,黑色圓形<LO TYPE=disc>最後記住結束</OL>
    而這個清單的語法是:
    <OL TYPE=A>
    <LI>我們可
    <LI>以用英
    <LI>文母來
    <LI>代替啊
    <UL>
    <LI TYPE=square>黑色正方啊
    <LI TYPE=circle>白色圓形啊
    <LI TYPE=disc>黑色圓形啊
    </UL>
    </OL>

    表格


    對於我來說表格較難表白,代我想到如何表白後才寫上來吧^^!

    HTML進階 現在您以對html有著基本的認識,現在教您們如何造出自己的網站吧!
    一個完整的網頁分別要有<HTML>以及</HTML>這個是又頭包到底的語言,是起始與結束html,一定要有啊!
    <HEAD>以及</HEAD>是html文件的起頭符號,可讓閱讀文件者了解此為程式的標頭!
    <TITTLE>以及</TITTLE>此為home page的名稱,它會出現在瀏覽器上的標題列中,讓讀者明確了解文件的內容!
    <BODY>以及</BODY>是文件的內文部分,包含文字,圖案及背景部分!
    首先我們要學的是---------    分割視窗

    基本補充:
    背景顏色:    <BODY BGCOLOR="顏色">
    文字顏色:    <BODY TEXT="顏色" LINK="顏色" ALINK="顏色" VLINK="顏色">

    背景圖案:<BODY BACKGROUND="name.gif">
    背景音樂:    <BODY BGSOUND="NAME.MIDI" LOOP=INFINITE>或者<EMBED SRC="NAME.MID" AUTOSTART=TRUE HIDDEN=TRUE LOOP=1>
    當中    <BODY BGSOUND="NAME.MIDI" LOOP=INFINITE>的<LOOP=INFINITE>是代表不停地播放歌曲
    而    <EMBED SRC="NAME.MID" AUTOSTART=TRUE HIDDEN=TRUE LOOP=1>

    用了<EMBED SRC="http://bluewong.virtualave.net/yesterday.mid">會出現內崁式聲音檔如下圖,但BGSOUND則不會出現圖檔!

    其語法為    <EMBED SRC="http://bluewong.virtualave.net/1.mid" HEIGHT=40 WIDTH=70 AUTOSTART=FALSE>

    視窗分割

    分割視窗的語法為<FRAMESET>,至於<FRAME>則用來宣告個別視窗的內容,<FRAMESET>以及</FRAMESET>標記是用來定義各視窗的大小,它有二個屬性,一是[COLS],一是[ROWS]! [COL]用來定義每一個視窗在螢幕上配置的欄數,也就是設定水平力向的視窗分割數目.其值可以為數字,百分比值,所以[*]來指定對應的視窗要接收所有剩餘空間!
    範列一:
    <HTML>
    <HEAD><TITTLE>視窗一</TITTLE></HEAD>
    <FRAMESET COLS="1,1">
    <FRAME SRC="1.HTM">
    <FRAME SRC="2.HTM">
    </FRAMESET>
    </HTML>
    這樣便把一個視窗分成二個視窗,一左一右!    按下這裡看看
    範列二:
    <HTML>
    <HEAD><TITTLE>視窗二</TITTLE></HEAD>
    <FRAMESET COLS="1,2,1">
    <FRAME SRC="">
    <FRAME SRC="">
    <FRAME SRC="">
    </FRAMESET>
    </HTML>
    這個視窗會分為三份!    按下看看
    範列三:
    <HTML>
    <HEAD><TITTLE>
    </TITTLE></HEAD>
    <FRAMESET COLS="30%,70%">
    <FRAME SRC="">
    <FRAME SRC="">
    </FRAMESET>
    </HTML>
    這個用%來定大小位置的,是根據您視窗大小而用%分割!    按下看看
    學完COLS的分割原理後,我們試試學學ROWS的分割原理吧!
    範列一:
    <HTML>
    <HEAD><TITTLE>
    </TITTLE></HEAD>
    <FRAMESET ROWS="40%,60%">
    <FRAME SRC="">
    <FRAME SRC="">
    </FRAMESET>
    </HTML>
    ROWS與COLS有好大地方相似,其實他們只是水平分割與橫向分割!    看下看看這個視窗
    看多一個例子吧:
    <HTML>
    <HEAD><TITTLE>
    </TITTLE></HEAD>
    <FRAMESET ROWS="100.*">
    <FRAME SRC="">
    <FRAME SRC="">
    </FRAMESET>
    </HTML>
    這個*號是甚麼呢?之前100以經佔了100個piexl,而*是代表其後的面積.假若piexl愈大,*的位置相應的少了!    按下看看
    我們再學一些有關分割視窗的屬性吧!    FRAMEBORDER是視窗與視窗的邊線,我們有兩種設定YES或NO
    <HTML> <HEAD>
    <TITTLE>
    </TITTLE>
    </HEAD>
    <FRAMESET FRAMEBORDER="NO" COLS="1,1">
    <FRAME SRC="">
    <FRAME SRC="">
    </FRAMESET>
    </HTML>
    按下看看怎麼樣!看到嗎本來是兩個視窗的啊,本應中間會出現一條分隔線的,但用了FRAMEBRODER=NO後分隔線不見了
    如何按左邊的視窗項目,而在右邊視窗出現呢?
    洗先我們要做出兩個HTML
    第一個視窗:
    <HTML>
    <HEAD>
    <TITTLE>
    </TITTLE>
    </HEAD>
    您按了我啊!
    </HTML>
    第二個視窗:
    <HTML>
    <HEAD>
    <TITTLE>
    </TITTLE>
    </HEAD>
    <BODY>
    <a href="BACKGROUND="http://bluewong.virtualave.net/text.html"target="TEXT2">按下我吧</a>
    </BODY>
    </HTML>
    第三個視窗:
    <html>
    <head>
    </head>
    <body>
    您未按左邊個"按下我吧"!
    </body>
    </html>
    主要視窗:
    <HTML>
    <HEAD>
    <TITTLE>
    </TITTLE>
    </HEAD>
    <FRAMESET FRAMEBORDER="yes" COLS="1,4">
    <FRAME SRC="BACKGROUND="http://bluewong.virtualave.net/test1.html">
    <FRAME NAME=TEXT2 SRC="http://bluewong.virtualave.net/test2.html">
    </FRAMESET>
    </HTML>
    留意到這句嗎?
    <FRAME NAME=TEXT2 SRC="BACKGROUND="http://bluewong.virtualave.net/test2.html">
    當中的NAME=TEXT2是我命名的,NAME有好幾種特性!而我們把右邊的視窗叫做TEXT2!
    而第二視窗中的:
    <a href="http://bluewong.virtualave.net/text.html"target="TEXT2">按下我吧</a>
    您也留意到這句嗎?TARGET是TEXT2!即是右邊視窗
    按下看看
    補充:還有一些特別的屬性NORESIZE,SCROLLING


    最後我再教大家造出一個線上視窗(Inline Frame)!

    怎樣了!奇怪嗎!?想學下嗎?其語法如下:
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <CENTER>
    <IFRAME SRC="http://bluewong.virtualave.net/" FRAMEBORDER=20 HEIGHT=70% WIDTH=50% SCROLLING=YES>
    請使用Internel Explorer才能到Inline Frame的效果!
    </IFRAME>
    </CENTER>
    <BODY>
    </HTML>
    等我解釋一下吧!
    線上視窗的的語法是    <IFRAME>以及</IFRAME>

    如果您不是用IE來看IFRAME,那麼就不會看到了!!
    大概聰明的網友們,應該明白了!

    自動換頁

    經常瀏覽網際網路的朋友,相信都曾經看過網頁在幾秒後自動換,頁如果您是第一次看到這稗效果,您也會為之驚奇!
    事實上,想要讓網頁自動換並不難,只要在    <HEAD>標記中加入<META>的標記,再配合其屬性的變化,就能讓您的網頁換頁!
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="REFRESH"
    CONTENT=5;URL="http://bluewong.virtualave.net/">
    </HEAD>
    <BODY>
    <CENTER>
    <H3>五秒後自換頁</H3>
    </CENTER>
    </BODY>
    </HTML>
    按下看看例子
    標記說明:

    表單的認識

    要建立一個表單並非想像中那麼困難,基本上只要在文件加上<FORM>的標記,再配合INPUT的標記,如文字欄位(Text field),查核方塊(Check box),選擇圓鈕(Radio button),以及下拉式選單(pop-up meuu),就可以完成種種不同的表單
    在    <BODY>與</BODY>之間加入<FORM>及</FORM>的標記,其基本語法的結構如下:
    <FORM METHOD="POST" ACTION"URL" ENTYPE="TYPE">
    表單內容
    <FORM>
    METHOD屬性的設定
    指定傳輸表單中的資料到WWW伺服器的方式,它有選擇方式有兩種: GET:將資料附在URL的地址後面當作一般的查詢字串 POST:將資料本身當作主體來傳遞,數的表單設計者比較偏好此方式
    ACTION屬性的設定
    為了能接受瀏覽者所送出的資料,在WWW伺服器內必須有一個服務的程式(Commom Gatewaty Interface)來接收!而action的屬性則可以指定處理表單資料的所在位置
    ENCTYPE屬性的設定
    是指定資料是否經過編碼,此屬性只有在METHOD為POST時才會生效,目前所能接受的值只有"application/x-www-form-urlencoded"

    METHOD,ACTION,ENCTYPE三個屬性都是選擇性的,可是為了清楚起見,METHOD和ACTION最好一定要!
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <FORM METHOD="POST" ACTION="/CGI/BIN/MY_CCRIPT">
    請輸入您的名字:
    <INPUT TYPE=TEXT NAME="NAME" SIZE=30 VALUE="小明">
    </FORM>
    </BODY>
    </HTML>


    請輸入您的名字:
    現在,您的文件內容應該和上面一樣

    表單(一)

    輸入元件的設定--INPUT

    利用<INPUT>的標記,可以設定多種形態輸入方式,我們使用TYPE的屬性來指定,其方式有二: 核取方塊:選取方式有單選(TYPE=RADIO)和復選(TYPE=CHECKBOX)二種 輸入區輸:選取方式有文字(TYPE=TEXT),密碼(TYPE=RASSWORD),數字(TYPE=INT)以及按鍵(TYPY=SUBMIT)及(TYPE=RESET)

    表單(二)

    上面的語法是:
    <TEXTAREA ROWS=3% COLS=80% READONLY>
    怎樣了!網友們我是由<TEXTAREA>做成的!現在我想您經以知道TEXTAREA的效果了!
    <TEXTAREA>
    讓我解釋一下吧!
    TEXTAREA的大小我們用了COLS以及ROWS來設定可以用像素表示亦可以用%表示
    當中的READONLY是設定不可以改變TEXTAREA內的內容

    非常的簡單實用!網友們可利用這個TEXTAREA效果來對到訪自己網站的瀏覽者表示一些新資迅!

    表單(三

    今次教的是下拉式選單的設定----SELECT
    <SELECT>和</SELECT>標記可以建立一個下拉式的選單,裡面的內容則用<OPTION>標記出每一個選項!
    範例:
    <SELECT NAME=CHOICE>
    <OPTION>哈
    <OPTION>嘻
    <OPTION>呵
    <OPTION>嘿
    <OPTION>唉
    </SELECT&G

    是不是很簡單呢我們還可以控制它的大小啊!
    <SELECT NAME=CHOICE SIZE=4>
    <OPTION>哈
    <OPTION>嘻
    <OPTION>呵
    <OPTION>嘿
    <OPTION>唉
    </SELECT>

    是不是非常的易學呢!