Bài trước: Web front-end (25) - HTML - Tập làm dự án_DA1 (lập trình)
-----
Viết mã nguồn cho trang thoiGianMoCua.html
Vì giao diện của trang thoiGianMoCua.html có phần header và
footer giống với trang index.html. Nên chúng ta chỉ cần viết mã cho vùng main,
<h3>Thời gian mở cửa</h3>
<dl>
<dt>Thứ 2 > Thứ 6</dt>
<dd>Từ 8h:00 > 19h:00</dd>
<dt>Thứ 7</dt>
<dd>Từ 8h:00 > 17h:00</dd>
<dt>Chủ nhật</dt>
<dd>Nghỉ</dd>
</dl>
<p>
<a href="#">Trở về đầu trang</a>
</p>
Tuy nhiên, chúng ta phải điều chỉnh một chút mã nguồn của
menu,
<li>
<a href="index.html#gt-ve-tiem-sach">Giới thiệu về tiệm sách</a>
</li>
<li>
<a href="index.html#danh-muc-sach">Các loại sách đang bán</a>
</li>
<li>
<a href="#">Thời gian mở cửa</a>
</li>
Viết mã nguồn cho trang lienHe.html
Vì giao diện của trang lienHe.html có phần header và footer
giống với trang index.html. Nên chúng ta chỉ cần viết mã cho vùng main:
Tạo một tiêu đề,
<h2>Liên hệ với tiệm sách</h2>
Tạo form để người dùng có thể liên hệ với tiệm sách. Vì chưa
học tới phần web back-end, nên sẽ thực hiện gửi thông tin của form về một dịch
vụ có sẵn trên mạng. Trang web http://httpbin.org/get
sẽ nhận thông tin của form, sau đó hiển thị dữ liệu lên một giao diện web, giúp
bạn có thể trải nghiệm với hoạt động của form.
<h2>Liên hệ với tiệm sách</h2>
<form action="http://httpbin.org/get" method="get">
<fieldset>
<legend>Liên hệ với tiệm sách</legend>
<p>
<label for="ten">Tên:</label>
<input type="text" name="ten" id="ten" placeholder="Tên của bạn" required>
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email" placeholder="Email của bạn" required>
</p>
<p>
<label for="dien-thoai">Điện thoại:</label>
<input type="tel" name="dien-thoai" id="dien-thoai" placeholder="Điện thoại của bạn">
</p>
<p>
<label for="loi-nhan">Lời nhắn:</label>
<br>
<textarea name="loi-nhan" id="loi-nhan" cols="30" rows="10" placeholder="Để lại lời nhắn ở đây"></textarea>
</p>
</fieldset>
<button type="submit">Gửi</button>
<button type="reset">Xóa</button>
</form>
<p>
<a href="#">Trở về đầu trang</a>
</p>
Sau khi lập trình form xong, bạn mở giao diện trên trang
web, nhập vào các trường và bấm nút Gửi. Bạn sẽ thấy thông tin do người dùng nhập
vào được gửi tới trang http://httpbin.org/get.
Ví dụ,
{ "args": {"dien-thoai": "123456",
"email": "levanti@gmail.com",
"loi-nhan": "tiem sach co cuon Dung viec khong?",
"ten": "le van ti"
},
"headers": {…
Chúng ta cần điều chỉnh một chút mã nguồn của menu,
<nav>
<ul>
<li>
<a href="index.html#gt-ve-tiem-sach">Giới thiệu về tiệm sách</a>
</li>
<li>
<a href="index.html#danh-muc-sach">Các loại sách đang bán</a>
</li>
<li>
<a href="thoiGianMoCua.html">Thời gian mở cửa</a>
</li>
<li>
<a href="#">Liên hệ</a>
</li>
</ul>
</nav>
Một vài hình ảnh của trang web sau khi hoàn thành.
Trang chủ,
----
-----