Skip to content

Latest commit

 

History

History
91 lines (71 loc) · 2.24 KB

chapter2.md

File metadata and controls

91 lines (71 loc) · 2.24 KB

插入圖像 image

利用<img>標籤插入圖片，於src屬性內填上圖片的連結。

<img src="圖片的超連結">

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>My Sandwiches</title>
  </head>
  <body>
    <h1>三文治</h1>
    <img src="http://bit.ly/RhrMEn">
    <p>我好鐘意蛋</p>
    <p>仲有火腿!</p>
    <p>這是我最愛的三文治.</p>
  </body>
</html>

以上的html文件，於瀏覽器中開啟，便會得出以下結果。

image01

堂課1

仿照學校網頁中 學校簡介 -> 辦學方針及目標，制作一個html文本，文本名稱為 heading.html。

P:/
└── html
    ├── basic.html
    └── heading.html

學校網頁： heading01

堂課結果： heading02

工具：

提示1：同學可到學校網頁，堂課所用的文字，可於網頁中複製使用。

提示2*：文中的圖片的超連結，亦可於學校網頁，點擊右鍵，複製圖片超連結。

提示3：共有六個不同的HTML標題，<h1> - <h6> 標簽可定義標題。<h1>定義最大的標題。<h6>定義最小的標題。同學可複製以下標籤碼到 basic.html 看看其效果。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

同學可利用以下範本，完成heading.html。

<html>
  <head>
    <meta charset="utf8">
    <title>This is title</title>
  </head>
  <body>
    <h1>Heading 1</h1>

    <h2>Heading 2</h2>
    <img src="http://link/to/your/image1.png">
    <img src="http://link/to/your/image2.png">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

    <h2>Heading 2</h2>
    <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>

    <h2>Heading 2</h2>
    <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </body>
</html>