Scribd
Upload
30 views

Code Web HTML Css Js Full

web frontend

Uploaded by

ĐẠT PSLOVE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

Code Web HTML Css Js Full

web frontend

Uploaded by

ĐẠT PSLOVE
Copyright
© © All Rights Reserved
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