Scribd
Upload
46 views10 pages

Code Web HTML Css Js Full

web frontend

Uploaded by

ĐẠT PSLOVE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views10 pages

Code Web HTML Css Js Full

web frontend

Uploaded by

ĐẠT PSLOVE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

SVTH 10

Trường Đại học Sư phạm Kỹ thuật Đà Nẵng

BÀI TẬP
MÔN THIẾT KẾ WEB
Giáo viên:
Sinh viên:
MSV:

BT TKW lần 1
SVTH 10

1. Bài 1: Thẻ images


a) Mã nguồn:
-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bài tập thiết kế website</title>
</head>
<body>
<h1 style="color: #F71013">Image Maps</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src= "Pictures/maps.jpg" alt="image maps" usemap="#image maps" width="400"
height="379">
<map name="image maps">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html"
tarrget="blank">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html"
target="blank">
<area shape="circle" coords="337,300,44" alt="Coffee" href="cafe.html" target="blank">
</map>
</body>
</html>
-computer.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2 style="color: blue"> Computer </h3>

BT TKW lần 1
SVTH 10

<img src= "Pictures/maytinh.jpg" style="width:600px;max-width:100%;">


<p>Wikipedia says:</p>
<blockquote cite="https://en.wikipedia.org/wiki/Computer"><i>A computer is a device that can
be instructed to carry out arbitrary sequences of arithmetic or logical operations
automatically.</i></blockquote>
<p>Read more about computer on <a href="https://en.wikipedia.org/wiki/Computer"
target="blank">https://en.wikipedia.org/wiki/Computer</a></p>
</div>
</body>
</html>
-phone.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/w3css/4/w3.css">
<body>
<div class="w3-container">
<h3 style="color: forestgreen">Phone</h3>
<img src= "Pictures/dienthoai.jpg" style="width:600px;max-width:100%;">
<p>Wikipedia says:</p>
<blockquote cite="https://en.wikipedia.org/wiki/Telephone"><i>A telephone, or phone, is a
telecommunications device that permits two or more users to conduct a conversation when they
are too far apart to be heard directly.</i></blockquote>
<p>Read more about phone on <a href="https://en.wikipedia.org/wiki/Telephone"
target="blank">https://en.wikipedia.org/wiki/Telephone</a></p>
</div>
</body>
-cafe.html
<!DOCTYPE html>
<html>
<link rel=" stylesheet " href=" /w3css/4/w3.css ">

BT TKW lần 1
SVTH 10

<body>
<div class=" w3-container ">
<h1 style="color: orangered"> Cafe </h1>
<img src= "Pictures/cafe.jpg" style="width:600px;max-width:100%;">
<p>Wikipedia says:</p>
<blockquote cite="https://en.wikipedia.org/wiki/Coffee"><i>Coffee is a brewed drink prepared
from roasted coffee beans, which are the seeds of berries from the Coffea
plant.</i></blockquote>
<p>Read more about coffee on <a href="https://en.wikipedia.org/wiki/Coffee"
target="blank">https://en.wikipedia.org/wiki/Coffee</a></p>
</div>
</body>
</html>
b) Kết quả:

BT TKW lần 1
SVTH 10

2. Bài 2
a) Mã nguồn:
<!DOCTYPE html>
<html lang="en">
<head>
<title>BÀI TẬP IFRAME</title>
</head>
<body>
<h2 align="center" style ="color: #F80000 ">BÀI TẬP IFRAME</h2>
<div>
<iframe src="https://vnexpress.net" width="727" height="300" align="right"></iframe>
<iframe src="https://www.24h.com.vn" width="727" height="300"
align="right"></iframe>
<iframe src="https://ute.udn.vn/default.aspx" width="595" height="600"></iframe>
</div>
</body>
</html>
b) Kết quả:

BT TKW lần 1
SVTH 10

3. Bài 3
a) Mã nguồn:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bài Tập Bảng</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" style="width:300px;
height: 300px ">
<tr>
<td align="center"><b>1</b></td>
<td colspan="3" align="center"><b>2</b></td>
</tr>
<tr>
<td align="center" colspan="2" rowspan="2"><b>3</b></td>
<td align="center"><b>4</b></td>
<td align="center"><b>5</b></td>
</tr>
<tr>
<td align="center"><b>6</b></td>
<td align="center"><b>7</b></td>
</tr>
<tr>
<td align="center"><b>8</b></td>
<td colspan="2" align="center"><b>9</b></td>
<td align="center"><b>10</b></td>
</tr>
</table>

BT TKW lần 1
SVTH 10

</body>
</html>
b) Kết quả:

4. Bài 4
a) Mã nguồn:
<!DOCTYPE html>
<html lang="en">
<head>
<title>From đặt hàng online</title>
</head>
<body>
<h3 style="color: blue">CHÀO MỪNG BẠN ĐẾN VỚI SHOP HOALONGTC </h3>
<h1 style="color: red">HÓA ĐƠN ĐẶT HÀNG OLINE</h1>
<div class="baitap4">

BT TKW lần 1
SVTH 10

<p><ul><label>Họ và tên(*):<input type="text"


name="usename"></label></ul></p>
<p><ul><label>Email (*): <input type="text" name="gmail"></label></ul></p>
<p><ul><label>Điện thoại: <input type= "number" name="phone"></label></ul></p>
<p><ul>Giới tính(*): <input type= "radio" name="gioitinh" id="Nam">Nam
<input type= "radio"
name="gioitinh" id="Nữ">Nữ</ul></p>
<p><ul><label>Ngày sinh(*):
<select name="day">
<option value="Ngay1">Ngày 1</option>
<option value="Ngay2">Ngày 2</option>
<option value="Ngay3">Ngày 3</option>
<option value="Ngay4">Ngày 4</option>
<option value="Ngay5">Ngày 5</option>
</select>
<select name="month">
<option value="Thang1">Tháng 1</option>
<option value="Thang2">Tháng 2</option>
<option value="Thang3">Tháng 3</option>
<option value="Thang4">Tháng 4</option>
<option value="Thang5">Tháng 5</option>
</select>
<select name="year">
<option value="Nam2021">Năm 2021</option>
</select>
</label>
<p><label>Địa chỉ người nhận(*):
<p><textarea cols="40" rows="5"></textarea></p></label>
</p>

BT TKW lần 1
SVTH 10

<p><label>Chọn đồ mà bạn muốn mua:</p>


<input type="checkbox" name="thucan">Thức ăn
<input type= "checkbox" name="douong">Nước uống
<input type="checkbox" name="quanao">Quần áo
<input type="checkbox" name="mu">Mũ
<input type="checkbox" name="dep">Giày dép
</label>
</p>
<p><label>Tên sản phẩm: <input type="text" name="namesp"></label></p>
<p><label>Số lượng sản phẩm: <input type="number" name="sl"></label></p>
<p>Tổng số tiền cần thanh toán: </p>
</div>
<h2 style="color: red">Cảm ơn quý khách đã ủng hộ Shop của chúng tôi</h2>
<ul><h3 style="color: blue">Mọi thắc mắc xin vui lòng liên hệ sdt:
0336586302</h3></ul>

</body>
</html>
b) Kết quả:

BT TKW lần 1
SVTH 10

BT TKW lần 1

You might also like