Bài tập html cơ bản có lời giải

Cung cấp cho Sinh viên tập làm quen với HTML bằng các thẻ cơ bản như u, i, b, sup, sub.

Tải các file đính kèm bên dưới về máy và giải nén.

Mở phần mềm Dreamweaver và tạo mới website để tiến hành thực hành. Ứng với mỗi bài tập là một tệp có phần mở rộng .HTML.

• Tạo cây thư mục có cấu trúc như sau, lưu giữ các tập tin HTM vào thư mục HTML • Nội dung văn bản sử dụng bảng mã Unicode • Mỗi thư mục sẽ lưu 1 loạI tập tin. Lưu giữ bài tập để sử dụng về sau. BÀI TẬP 01 Sử dụng trình soạn thảo NotePad soan thảo nội dung sau lưu vào thư mục HTML • Đặt tên là: Wellcome.html • Save as type: All Files • Encoding: UTF-8 • Mở xem kết quả trang HTML • Xem Source Code trang web từ trình duyệt • Mở tập tin HTML từ trình soạn thảo và lưu lạI với tên khác là: Wellcom2.HTML Điều chỉnh nội dung hiện thị trong trang là: Chúc các bạn học tốt ngôn ngữ HTML BÀI TẬP 02 [Lưu tập tin tên Cohaimo.html] Sử dụng ngôn ngữ HTML soạn thảo trang Web có nội dung và định dạng theo mẫu Yêu cầu: • Có nộI dung thanh tiêu đề, định dạng đậm, nghiêng, gạch chân, gạch ngang chữ, • Có phân cách các đoạn, xuống dòng cho mỗi câu thơ, có câu ghi chú • Cố định nội dung bài thơ không bị rớt dòng khi độ rộng cửa sổ trình duyệt không đủ, BÀI TẬP 03 [Lưu tập tin tên: ChisoTrenduoi.htm] Yêu cầu: Dòng 1 cỡ chữ 4 in đậm Hướng dẫn: Tạo chỉ số Trên/Dưới • Văn bản : F 0 E 8 Tạo chỉ số trên cho văn bản. • Văn bản : F 0 E 8 Tạo chỉ số dưới cho văn bản.

• Tạo cây thư mục có cấu trúc như sau, lưu giữ các tập tin HTM vào thư mục HTML • Nội dung văn bản sử dụng bảng mã Unicode • Mỗi thư mục sẽ lưu 1 loạI tập tin. Lưu giữ bài tập để sử dụng về sau. BÀI TẬP 01 Sử dụng trình soạn thảo NotePad soan thảo nội dung sau lưu vào thư mục HTML • Đặt tên là: Wellcome.html • Save as type: All Files • Encoding: UTF-8 • Mở xem kết quả trang HTML • Xem Source Code trang web từ trình duyệt • Mở tập tin HTML từ trình soạn thảo và lưu lạI với tên khác là: Wellcom2.HTML Điều chỉnh nội dung hiện thị trong trang là: Chúc các bạn học tốt ngôn ngữ HTML BÀI TẬP 02 [Lưu tập tin tên Cohaimo.html] Sử dụng ngôn ngữ HTML soạn thảo trang Web có nội dung và định dạng theo mẫu Yêu cầu: • Có nộI dung thanh tiêu đề, định dạng đậm, nghiêng, gạch chân, gạch ngang chữ, • Có phân cách các đoạn, xuống dòng cho mỗi câu thơ, có câu ghi chú • Cố định nội dung bài thơ không bị rớt dòng khi độ rộng cửa sổ trình duyệt không đủ, BÀI TẬP 03 [Lưu tập tin tên: ChisoTrenduoi.htm] Yêu cầu: Dòng 1 cỡ chữ 4 in đậm Hướng dẫn: Tạo chỉ số Trên/Dưới • Văn bản : F 0 E 8 Tạo chỉ số trên cho văn bản. • Văn bản : F 0 E 8 Tạo chỉ số dưới cho văn bản. BÀI TẬP 04 Ký tự đặc biệt [Lưu tập tin tên: Kyhieudacbiet.html] Nhập Mã tên hay Mã số của ký tự tương ứng

Đây là bài tập HTML CSS cơ bản đầu tiên mà chúng ta nên làm .Ở bài viết này mình sẽ hướng dẫn các bạn sẽ làm trang Zing.vn bằng HTML và CSS. Nói nghe ghê vậy thối chứ chúng ta sẽ làm một phần nhỏ trước :D, mình sẽ bắt đầu luôn.

Vòng xoay cao tốc 34.500 tỷ sụt lún quá mức, cần 300 ngày khắc phục

Đại diện Ban quản lý dự án cao tốc Đà Nẵng - Quảng Ngãi thừa nhận vòng xoay cao tốc ở huyện Bình Sơn đang lún quá mức cho phép và cần 300 ngày để khắc phục.

  • Nữ sinh lớp 5 gây chú ý vì không muốn học Harvard, chỉ cần hạnh phúc
  • Hiệu trưởng đại học ở Sài Gòn bị miễn nhiệm vì nghi vấn bằng cấp

Phát ngôn ấn tượng trong 3 ngày Quốc hội chất vấn 'theo lời hứa'

Trưởng đoàn ĐT Việt Nam: Cần giải quyết vấn đề tâm lý ở AFF Cup 2018

Việt Nam hơn 20 năm không thắng Indonesia: Nỗi sợ lớn hơn cả Thái Lan?

Code css:

{ margin:0; padding:0; border:none; } /*reset css/ a{ text-decoration:none; color:black; } /bỏ gạch chân tất cả link liên kết và để chữ màu đen/ section{ width: 485px; height: 600px; margin-left: 185px; } /Đặt kích thước cho khối to section và dịch lề trái 185px/ article{ width:153px; height: 190px; float:left; padding-right: 8px; } /Đặt kích thước cho các khối nhỏ và căn trái / article img{ width:153px; height: 114px; } /Đặt kích thước cho các ảnh trong khối nhỏ/ article p{ font-family: arial; font-weight: lighter; font-size: 12px; } /Đặt font chữ , định dạng đậm và kích cỡ chữ của thẻ p trong khối nhỏ / div img{ width:475px; height: 260px; } /Đặt kích thước cho ảnh trong khối to/ ul{ margin-top:5px; margin-bottom: 17px; } /Căn lề dưới và lề trên cho ul/ ul li{ margin-right: 15px; display: inline; font-size: 12px; font-style:italic; } /Định dạng danh sách / div h2{ font-size:20px; margin-bottom: 10px; } /Đặt kích thước cho thẻ h2 trong khối div và dãn lề dưới / div p{ font-size:14px; /Đặt kích thước cho thẻ p trong khối div / } i{ color:gray; font-size: 12px; } /Định dạng icon/

Okê xong rồi đấy, các bạn cứ làm giống như mình đã phân tích. Trong bài thì mình đã chèn icon cái máy quay vào nếu ai chưa biết mình sẽ hướng dẫn luôn

Thêm thẻ này vào phần

{ margin:0; padding:0; border:none; } /*reset css/ a{ text-decoration:none; color:black; } /bỏ gạch chân tất cả link liên kết và để chữ màu đen/ section{ width: 485px; height: 600px; margin-left: 185px; } /Đặt kích thước cho khối to section và dịch lề trái 185px/ article{ width:153px; height: 190px; float:left; padding-right: 8px; } /Đặt kích thước cho các khối nhỏ và căn trái / article img{ width:153px; height: 114px; } /Đặt kích thước cho các ảnh trong khối nhỏ/ article p{ font-family: arial; font-weight: lighter; font-size: 12px; } /Đặt font chữ , định dạng đậm và kích cỡ chữ của thẻ p trong khối nhỏ / div img{ width:475px; height: 260px; } /Đặt kích thước cho ảnh trong khối to/ ul{ margin-top:5px; margin-bottom: 17px; } /Căn lề dưới và lề trên cho ul/ ul li{ margin-right: 15px; display: inline; font-size: 12px; font-style:italic; } /Định dạng danh sách / div h2{ font-size:20px; margin-bottom: 10px; } /Đặt kích thước cho thẻ h2 trong khối div và dãn lề dưới / div p{ font-size:14px; /Đặt kích thước cho thẻ p trong khối div / } i{ color:gray; font-size: 12px; } /Định dạng icon/

9 để sử dụng được icon trên trang fontawesome.com

Bạn có thể lấy thẻ này bằng cách tra google từ khóa get fontawesome rồi coppy paste thôi.

Sau đó vào trang fontawesome.com để tìm kiếm icon muốn thêm ví dụ ở trên mình chọn icon camera bằng cách :

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề