Powered by GitBook

1032 TMU-HCA 網路程式設計概論

Week11- 終於可以動手開始寫網頁了! HTML與CSS教學

[參考網站]

  1. HTML 教學 http://www.w3schools.com/html/

  2. CSS 教學 http://www.w3schools.com/html/html_css.asp

  3. 線上學習與測試 http://codepen.io/ ； https://jsfiddle.net/

  4. Html Color Codes: http://html-color-codes.info/

  5. CSS tool (有圓角、陰影等等的小功能) http://www.cssmatic.com/

  6. Sublime Text 網頁編輯器軟體下載 http://www.sublimetext.com/

今日作業範例：

<html>
    <head>
        <meta charset="UTF-8">
        <title>蛋黃哥</title>
        <style>
            img{

              border:10px solid #721E1E;
              width:200px;
              height:200px;
              border-radius: 50%;
              -moz-border-radius: 50%;
              -webkit-border-radius: 50%;
            }

        </style>
    </head>
    <body>
        <h1>這裡是H1</h1>
        <h2>這裡是H2</h2>
        <h3>這裡是H3</h3>
        <h4>這裡是H4</h4>
        <h5>這裡是H5</h5>
        <h6>這裡是H6</h6>
        <a href="http://www.google.com">我是超聯結</a>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/bS2mmJuMwdg" frameborder="0" allowfullscreen></iframe>
        <img src="http://www.niusnews.com/upload/imgs/default/14MayC/GRDETAMA/11.png">
    </body>
</html>

請注意，作業內容應包含:

  1. 標題
  2. 有編輯過的圖片(請使用css matics)
  3. 附上一個超連結
  4. 附上一支YOUTUBE影片

再注意:

  1. 要加萬國碼
  2. 語法要縮排
  3. 請上傳HTML檔案至my2，打完收工!