我的位置:首頁 >   > 

    程式語言教學-HTML篇-02

    發表時間:
    HTML 教學第二篇開始啦
    相信讀過第一篇的朋友,一定可以感受到HTML其實不困難
    你怎麼寫~瀏覽器就怎麼顯示
    所以請抱持著輕鬆的心情來學習這第二篇
    接下來的幾篇,我會針對一些比較常用的HTML標籤來解說
    老規矩~親手打!不要複製貼上
    1.換行標籤<br />
    在HTML中要換行可不能直接打enter換行
    必須得要用到換行標籤
    範例:
    <html>
        <head>
            <title>第一個範例</title>
        </head>
        <body>
            HELLO~<br />WORLD!!
        </body>
    </html>
    這樣HELLO和WORLD就會換成兩行了!打得越多,間隔越大




    2.水平線標籤<hr />
    簡單來說就是畫一條水平線
    用一些設定值可以改變這條線的樣子
    size:高度
    width:寬度
    color:顏色
    align:位置(left:左,right:右,center:中間)
    範例:
    <html>
        <head>
            <title>第一個範例</title>
        </head>
        <body>
            HELLO~
            <hr size='5px' width='100px' color='blue' align='left' />
            WORLD!!
        </body>
    </html>
    可以試試看改變參數裡面的值,玩一玩!!
    hr會上下換行,所以不用加上<br />
    至於為什麼會上下換行,可以去查查HTML的塊狀元素




    3.標題標籤<h1>~<h6>(這個標籤要結尾喔~)
    所謂的標題通常都是要很顯眼,顯眼當然就是大XDD
    h1~h6會讓字體變大,h1最大
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    <h1>我</h1>
    <h2>是</h2>
    <h3>工</h3>
    <h4>程</h4>
    <h5>師</h5>
    <h6>唷</h6>
    </body>
    </html>
    這個標籤會幫你換兩行!等同於加上兩次<br />




    4.段落標籤<p>
    基本上段落標籤就是幫你加上兩個<br />
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    <p>我</p>
    <p>是</p>
    <p>工</p>
    <p>程</p>
    <p>師</p>
    <p>唷</p>
    </body>
    </html>


    這種用法跟下面這種呈現出來的樣子是一樣的


    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    我<br /><br />
    是<br /><br />
    工<br /><br />
    程<br /><br />
    師<br /><br />
    唷<br /><br />
    </body>
    </html>


    5.粗體<strong>
    用來加強重點文字
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    我是工程師唷<br />
    <strong>我是工程師唷</strong>
    </body>
    </html>


    6.斜體<em>
    就是把字用斜...
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    我是工程師唷<br />
    <em>我是工程師唷</em>
    </body>
    </html>


    7.置中<center>
    就是把這標籤中的所有東西置中
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    <center>我是工程師唷</center>
    </body>
    </html>


    8.格式標籤<pre>
    還記得上面有說過要換行要加<br />
    要加空白得用&nbsp;
    但是在這個標籤內
    你怎麼打,畫面就怎麼呈現
    但是如果像範例中這樣打的話,會把縮排用的TAB也算進去!!
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    <pre>
    今天風很大~      所以肚子很餓

    啦啦啦啦啦~~~

    我要吃消夜
    </pre>
    </body>
    </html>


    9.圖片標籤<img>
    這個標籤一定要有一個參數src(圖片網址)
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    <img src="www.twstar.biz/bbs/img/G1.jpg" />
    </body>
    </html>


    10.超連結<a>
    相信大家對於超連結這種東西不陌生
    就是點了一個東西就會幫你連過去網址
    這個標籤一定要有一個參數href(網址)
    在這個標籤中放入的東西就是點擊後會觸發超連結,可以是文字,按鈕,圖片...等等
    範例:
    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    請按<a href="http://www.google.com.tw">連結</a>到GOOGLE
    </body>
    </html>






    今天就先解說這10種常用到的標籤吧


    之後幾篇也會像這種方式,介紹標籤然後給範例,等到大家都差不多熟悉後就會更進一步


    另外標籤中也可以套入標籤唷~


    比如說


    <html>
    <head>
    <title>第一個範例</title>
    </head>
    <body>
    <pre>
    今天<a href="http://www.google.com.tw">風</a>很大~      <strong>所以<em>肚子</em>很餓</strong>

    啦啦啦啦啦~~~

    我要吃消夜
    </pre>
    </body>
    </html>


    範例中的"風"會超連結到GOOGLE,"所以肚子很餓"會變粗體,其中的"肚子"又會變斜體


    所以等到三篇出來之前~就把這十種標籤蹦出新滋味吧~~


    要熟悉一件事情,就是要常常去碰去摸~不然很快就會忘記!!


    那各位~下次見啦