Giáo trình mô đun Thiết kế web cơ bản - Ngành: Thiết kế và quản lý website
ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH
TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH
GIÁO TRÌNH
MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN
NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE
TRÌNH ĐỘ: TRUNG CẤP
Thành phố Hồ Chí Minh, năm 2020
ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH
TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH
GIÁO TRÌNH
MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN
NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE
TRÌNH ĐỘ: TRUNG CẤP
THÔNG TIN CHỦ NHIỆM ĐỀ TÀI
Họ tên: Lê Thị Thu Thảo
Học vị: Thạc sĩ
Đơn vị: Khoa Công nghệ thông tin
Email: [email protected]
TRƢỞNG KHOA
TỔ TRƢỞNG
BỘ MÔN
CHỦ NHIỆM
ĐỀ TÀI
Lê Thị Thu Thảo
HIỆU TRƢỞNG
DUYỆT
Thành phố Hồ Chí Minh, năm 2020
TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được
phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham
khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh
doanh thiếu lành mạnh sẽ bị nghiêm cấm.
LỜI GIỚI THIỆU
Giáo trình “Thiết kế web cơ bản” được biên soạn nhằm phục vụ cho việc
học tập môn học “Thiết kế web cơ bản” đang được giảng dạy tại khoa Công nghệ
thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM.
Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn
học “Thiết kế web cơ bản” và dựa theo các tiêu chuẩn thiết kế web hiện hành.
Mục đích của giáo trình là cung cấp cho sinh viên các kiến thức cơ bản về
ngôn ngữ HTML, CSS, JavaScript, sử dụng phần mềm DreamWeaver để áp
dụng vào việc thiết kế web.
Xin chân thành cảm ơn các ý kiến đóng góp từ các đồng nghiệp đã giúp tôi
hoàn thành giáo trình này.
TP.HCM, ngày……tháng 08 năm 2020
Lê Thị Thu Thảo
MỤC LỤC
BÀI 1 - PHÁC THẢO WEBSITE...................................................................................1
1.1. Các khái niệm ....................................................................................................1
1.1.1. Internet và Word Wide Web .......................................................................1
1.1.3. Search Engine..............................................................................................2
1.1.4. Xuất bản web...............................................................................................2
1.2. Lập kế hoạch thiết kế website............................................................................3
1.3. Thiết kế bố cục trang web..................................................................................4
1.4. Bài tập áp dụng ..................................................................................................5
2.1. Tạo trang web đầu tiên.......................................................................................6
2.1.1. Khái niệm HTML........................................................................................6
2.1.2. Các thẻ của tập tin HTML...........................................................................6
2.1.3. Tạo trang web..............................................................................................7
2.1.4. Các thẻ định cấu trúc tài liệu HTML ........................................................10
2.2. Làm việc với văn bản trên trang web...............................................................12
2.2.1. Thẻ <b> .....................................................................................................12
2.2.2. Thẻ <strong> .............................................................................................12
2.2.3. Thẻ <i>......................................................................................................12
2.2.4. Thẻ <em> ..................................................................................................13
2.2.5. Thẻ <u> .....................................................................................................13
2.2.6. Thẻ <sup>..................................................................................................13
2.2.7. Thẻ <sub>..................................................................................................13
2.2.8. Thẻ <pre>..................................................................................................14
2.2.9. Thẻ <p> .....................................................................................................14
2.2.10. Thẻ <h1> đến <h6> ...............................................................................15
2.3. Làm việc với danh sách trên trang web ...........................................................16
2.3.1. Danh sách không có thứ tự........................................................................16
2.3.2. Danh sách có thứ tự...................................................................................17
2.4.1. Thẻ <img>.................................................................................................19
2.4.2. Thẻ <audio> ..............................................................................................20
2.4.3. Thẻ <video> ..............................................................................................21
2.4.4. Thẻ <object> .............................................................................................22
2.5. Làm việc với liên kết trên trang web ...............................................................23
2.5.1. Tạo liên kết đến tài liệu khác ....................................................................24
2.6. Làm việc với bảng biểu trên trang web ...........................................................26
2.6.1. Tạo bảng đơn giản.....................................................................................26
2.6.2. Tạo bảng có gộp ô.....................................................................................28
2.7. Làm việc với biểu mẫu trên trang web ............................................................29
2.7.1. Khái quát về Form.....................................................................................29
2.7.2. Thẻ <form> ...............................................................................................30
2.7.3. Thẻ <input>...............................................................................................32
2.7.4. Thẻ <select>..............................................................................................36
2.7.5. Thẻ <textarea> ..........................................................................................37
2.7.6. Thẻ <label> ...............................................................................................39
2.7.7. Thẻ <fieldset> ...........................................................................................40
2.8. Tạo Bố cục trang..............................................................................................42
2.8.1. Thẻ <header> ............................................................................................43
2.8.2. Thẻ <footer>..............................................................................................43
2.8.3. Thẻ <main> ...............................................................................................43
2.8.4. Thẻ <nav> .................................................................................................43
2.8.5. Thẻ <section>............................................................................................44
2.8.8. Thẻ <div>..................................................................................................44
2.8.9. Thẻ <span>................................................................................................45
2.9. Bài tập áp dụng ................................................................................................45
3.1. Tạo và quản lý website ....................................................................................47
3.1.1. Tạo một website ........................................................................................47
3.1.2. Quản lý website.........................................................................................50
3.1.3. Đưa website lên internet............................................................................51
3.1.4. Kiểm tra và sửa lỗi trang web ...................................................................51
3.2.2. Các thao tác cơ bản ...................................................................................54
3.2.3. Làm việc với văn bản................................................................................55
3.2.4. Làm việc với hình ảnh...............................................................................57
3.2.5. Làm việc với multimedia ..........................................................................58
3.2.6. Liên kết trang ............................................................................................58
3.2.7. Làm việc với bảng.....................................................................................59
3.2.8. Làm việc với form.....................................................................................63
3.3. Bài tập áp dụng ................................................................................................76
4.1. Tạo css cho trang web......................................................................................77
4.1.1. Khái niệm..................................................................................................77
4.1.2. Cú pháp CSS .............................................................................................77
4.1.3. Đơn vị đo trong CSS .................................................................................79
4.1.4. Phân loại CSS............................................................................................80
4.1.5. Tạo và sử dụng Internal style sheet...........................................................80
4.1.6. Tạo và sử dụng External style sheet..........................................................82
4.1.9. Định danh (ID) ..........................................................................................86
4.2. Định dạng văn bản bằng css.............................................................................87
4.2.1. Thuộc tính font..........................................................................................87
4.2.2. Thuộc tính text ..........................................................................................90
4.3. Định dạng danh sách bằng css .........................................................................93
4.3.1. Thuộc tính list-style-type: .........................................................................93
4.3.2. Thuộc tính list-style-image: ......................................................................94
4.3.3. Thuộc tính list-style-position: ...................................................................94
4.4. Định dạng thành phần ......................................................................................95
4.4.1. Thuộc tính background .............................................................................96
4.4.2. Thuộc tính border......................................................................................99
4.4.3. Thuộc tính box-shadow...........................................................................102
4.4.4. Thuộc tính margin...................................................................................102
4.4.5. Thuộc tính padding .................................................................................105
4.4.6. Thuộc tính height và width .....................................................................107
4.5. Định dạng hình ảnh bằng css .........................................................................110
4.6. Tạo bố cục trang web bằng mô hình hộp.......................................................113
4.7. Tạo thanh điều hướng cho trang web.............................................................120
4.7.1. Pseudo-classes cho liên kết .....................................................................120
4.7.2. Tạo thanh điều hướng dọc.......................................................................122
4.7.3. Tạo thanh điều hướng ngang...................................................................123
4.8. Định dạng bảng biểu bằng css .......................................................................125
4.9. Định dạng biểu mẫu bằng css ........................................................................127
4.10. Bài tập áp dụng...........................................................................................131
BÀI 5 - Ngôn ngữ JavaScript ......................................................................................132
5.1. Giới thiệu về JavaScript.................................................................................132
5.4. Làm việc với web form..................................................................................149
5.4.1. Xử lý sự kiện...........................................................................................149
5.5. Bài tập áp dụng ..............................................................................................153
TÀI LIỆU THAM KHẢO...........................................................................................154
PHỤ LỤC ....................................................................................................................155
GIÁO TRÌNH MÔ ĐUN
Tên mô đun: THIẾT KẾ WEB CƠ BẢN
Mã mô đun: MĐ2101411
Vị trí, tính chất của mô đun:
- Vị trí: là mô đun được bố trí ở học kỳ II (THCS), học kỳ I (THPT).
- Tính chất: là mô đun tích hợp thuộc nhóm mô đun chuyên ngành.
Mục tiêu của mô đun:
Về kiến thức:
- Trình bày được các bước lập kế hoạch thiết kế website.
- Trình bày được cú pháp các thẻ lệnh HTML, cú pháp CSS.
- Trình bày được các thuộc tính thường dùng trong CSS để định dạng trang
web.
- Trình bày được các đối tượng cơ bản trong JavaScript.
Về kỹ năng:
- Lập được kế hoạch thiết kế của một website.
- Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách,
hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web.
- Tạo và quản lý được website bằng Dreamweaver.
- Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang
web.
- Tạo và sử dụng được các kiểu CSS.
- Vận dụng được CSS để định dạng các đối tượng văn bản, hình ảnh, liên kết,
bảng biểu, biểu mẫu trên trang web.
- Tạo được bố cục trang web bằng mô hình hộp.
- Tạo được thanh định hướng cho trang web.
- Nhúng được đoạn mã JavaScript vào trang web.
- Tạo được tương tác cơ bản với trang web bằng JavaScript.
- Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web.
Về năng lực tự chủ và trách nhiệm:
- Yêu thích định dạng web bằng ngôn ngữ css
- Làm việc một cách tỉ mỉ và cẩn thận trong ngôn ngữ HTML
- Rèn luyện khả năng tự học, tư duy sáng tạo
- Phối hợp làm việc theo nhóm.
Bài 1 - Phác thảo website
BÀI 1 - PHÁC THẢO WEBSITE
Giới thiệu:
Trong bài học đầu tiên sẽ cung cấp cho người học một số kiến thức cơ bản
về internet và web. Bài học này cũng đồng thời giúp người học có cái nhìn tổng
quan về quá trình thiết kế một website.
Mục tiêu:
- Trình bày được các bước lập kế hoạch thiết kế website
- Lập được kế hoạch thiết kế của một website
- Thiết kế được bố cục của trang web
1.1. CÁC KHÁI NIỆM
1.1.1. Internet và Word Wide Web
- Internet: Internet là một hệ thống thông tin toàn cầu có thể được truy nhập
- World Wide Web (WWW): là một hệ thống liên kết giữa các tài liệu siêu
văn bản, được truy cập trên internet thông qua trình duyệt web và được cung
cấp bởi web server.
1.1.2. Web server, web browser và webpage
- Web server đơn giản là một máy tính nối vào Internet và chạy các phần
mềm được thiết kế để truyền tải nội dung dưới dạng trang HTML.
Máy chủ phải đủ mạnh để đáp ứng nhiều kết nối Internet đồng thời.
Thông qua trình duyệt web máy chủ sẽ cung cấp các dịch vụ được yêu cầu
đến máy dịch vụ.
- Web Browser: Web browser còn được gọi là trình duyệt web - là một phần
mềm được dùng để xem, quản lý và truy cập vào các trang web. Mỗi trình
duyệt có những đặc điểm khác nhau do đó những trang web được hiển thị
trên các trình duyệt khác nhau là không hoàn toàn giống nhau. Các trình
duyệt phổ biến hiện nay là: Microsoft Internet Explorer, Mozilla Firefox,
Apple Safari, Google Chrome, Opera.
- Webpage: trang web – một file văn bản chứa dữ liệu và các thẻ HTML hoặc
những đoạn mã mà trình duyệt web có thể hiểu và thông dịch được lưu với
phần mở rộng là .html hoặc .htm.
KHOA CÔNG NGHỆ THÔNG TIN
Trang 1
Bài 1 - Phác thảo website
- Website: là 1 tập hợp gồm nhiều trang web thể hiện thông tin của tổ chức, 1
chủ đề nào đó.
- Home page: trang chủ của 1 website
- Hyperlink: 1 liên kết chỉ đến trang web khác
- URL (Uniform Resource Locator): là địa chỉ của 1 website, 1 webpage trên
Internet.
Có dạng: protocol://domain_name/path
Protocol: tên giao thức http, ftp, file,…
Domain name: tên miền - là tên giao dịch của công ty hay tổ chức
trên Internet. Thường có dạng: yourcompany.com
Các tên miền cấp 1:
.com
.edu
.int
Các tổ chức thương mại, doanh nghiệp (commercial)
Các tổ chức giáo dục (education)
Các tổ chức Quốc tế (international organizations)
mạng không thuộc các loại phân vùng khác (Network)
.net
- Trang web tĩnh: trang web chứa nội dung cố định (thường là HTML, để
cập nhật nội dung phải cập nhật trực tiếp trên HTML), không cho phép sử
dụng tương tác, cập nhật dữ liệu trên trang web.
- Trang web động: trang web có khả năng tương tác với người sử dụng.
Trang web có kết hợp HTML và mã lệnh. Mã được thực thi trực tiếp trên
server, gửi kết quả là HTML về người sử dụng.
1.1.3. Search Engine
- Là công cụ tìm kiếm nhằm tìm ra các trang trên mạng Internet có nội dung
theo yêu cầu người dùng dựa vào các thông tin mà chúng có.
- Một số công cụ tìm kiếm mạnh trên thế giới hiện nay: Google.com,
Yahoo.com, Altavista.com,…
1.1.4. Xuất bản web
Xuất bản trên web (còn gọi là xuất bản trực tuyến) là quá trình xuất bản
nội dung trên Internet.
Nội dung xuất bản web bao gồm văn bản, video, hình ảnh, âm thanh,…và
các hình thức truyền thông khác.
Quy trình xuất bản web gồm:
+ Xây dựng website
KHOA CÔNG NGHỆ THÔNG TIN
Trang 2
Bài 1 - Phác thảo website
+ Tải website lên internet
+ Cập nhật các trang web và đăng các nội dung trực tuyến.
1.2. LẬP KẾ HOẠCH THIẾT KẾ WEBSITE
Các bước lập kế hoạch thiết kế website:
Bƣớc 1: Xác định mục đích của website
- Xác định mục tiêu cơ bản của website: mục tiêu đề ra phải khái quát,
ngắn gọn, rõ ràng. Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch
phát triển. Đây chính là công cụ hữu hiệu để đánh giá sự thành công của
một website.
- Xác định đối tượng phục vụ: để có thể thiết kế cấu trúc website phù hợp
với nhu cầu, mong muốn của người dùng thì cần phải xác định loại
người dùng chính của website. Cần tìm hiểu về sự hiểu biết, trình độ, sở
thích, kinh nghiệm duyệt web, lứa tuổi…của người dùng. Một hệ thống
được thiết kế tốt sẽ thích hợp cho một dải rộng trình độ, nhu cầu người
dùng.
- Xác định thể loại website: việc xác định thể loại website giúp định
hướng cho nhà thiết kế. Các thể loại website thường gặp: giáo dục, huấn
luyện (online trainning), tin tức, giải trí, diễn đàn, trao đổi thảo luận,
mua bán, quản lý….
Bƣớc 2: Xác định sơ đồ của website (sitemap)
- Việc xác định sơ đồ website giúp có cái nhìn tổng quát về thông tin của
website và các mối liên kết giữa các trang trên website.
- Sơ đồ website thường được phác thảo dưới dạng cấu trúc cây.
Hình 1.1. Sơ đồ website
KHOA CÔNG NGHỆ THÔNG TIN
Trang 3
Bài 1 - Phác thảo website
Bƣớc 3: Chuẩn bị nội dung website
- Chuẩn bị nội dung cho từng trang: nội dung phải viết ngắn gọn, súc tích,
sử dụng từ ngữ dễ hiểu, đúng chính tả. Nên đưa những thông tin mới, có
ích cho người xem.
- Hình ảnh đẹp, rõ, sắc nét. Phải lựa chọn hình ảnh phù hợp với nội dung.
Bƣớc 4: Bố cục cho trang web
- Lựa chọn bố cục phù hợp cho trang chủ và các trang con.
Bƣớc 5: Lựa chọn màu sắc cho trang web
- Màu sắc nên lựa chọn dựa theo nội dung trang web, nên sử dụng màu sắc
tương phản để làm nổi bật nội dung cần thể hiện. Không nên sử dụng
quá nhiều màu sắc.
Bƣớc 6: Chi tiết hóa trang web
- Phác thảo chi tiết cụ thể giao diện cho từng trang web
1.3. THIẾT KẾ BỐ CỤC TRANG WEB
• Bố cục phổ biến của một trang web
HEADER
NAVIGATION
SIDEBAR
CONTENT
FOOTER
Hình 1.2. Bố cục thông thƣờng của một trang web
- Header: là thành phần nằm ở vị trí đầu trên trang web, thường chứa tên
công ty, logo, câu khẩu hiệu, hình ảnh tiêu biểu…
- Navigation (điều hƣớng):là hệ thống menu liên kết giúp người dùng có
thể duyệt toàn bộ các trang trong một Website. Tùy từng bố cục, có thể
đặt menu này dạng ngang hoặc đứng.
- Content: là phần hiển thị nội dung chính của trang web.
- Sidebar: là phần hiển thị nội dung phụ của trang web như các menu phụ,
các bài viết liên quan, quảng cáo,… Tùy theo bố cục mà một website có
thể có một hoặc nhiều hơn một sidebar.
KHOA CÔNG NGHỆ THÔNG TIN
Trang 4
Bài 1 - Phác thảo website
- Footer: là thành phần nằm ở vị trí cuối trên trang web và được hiển thị ở
tất cả các trang trong website, thường chứa các thông tin về Website: bản
quyền, điều khoản sử dụng, tác giả, địa chỉ liên hệ,… Ngoài ra, Footer
còn được dùng như một menu liên kết cuối trang để tạo sự tiện lợi cho
người dùng.
Hình 1.3. Trang web có bố cục thông thƣờng
1.4. BÀI TẬP ÁP DỤNG
1. Phác thảo website giới thiệu Khoa Công nghệ thông tin
2. Phác thảo website bán hàng online
KHOA CÔNG NGHỆ THÔNG TIN
Trang 5
Bài 2 - Thiết kế trang web với HTML
BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML
Giới thiệu:
Trong bài học này sẽ cung cấp cho người học kiến thức cơ bản về các thẻ
lệnh HTML để tạo và định dạng các đối tượng trên một trang web.
Mục tiêu:
- Trình bày được cú pháp các thẻ lệnh HTML
- Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách,
hình ảnh, liên kết, bảng biểu và biểu mẫu trên trang web.
2.1. TẠO TRANG WEB ĐẦU TIÊN
2.1.1. Khái niệm HTML
- HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản
được thiết kế để xây dựng các trang web. HTML tồn tại như là các tập tin
văn bản có phần mở rộng là .htm hoặc .html được chứa trên các máy tính
nối vào mạng Internet. Các file này chứa các thành phần định dạng để báo
cho trình duyệt web biết cách để hiển thị một trang web.
- Một trang web thông thường gồm có 2 thành phần chính:
+ Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)
+ Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu hiển
thị trên trình duyệt.
2.1.2. Các thẻ của tập tin HTML
. Cấu trúc thẻ
- Thẻ HTML là 1 tập các ký hiệu được định nghĩa trong HTML, mỗi thẻ html
có ý nghĩa riêng. Các thẻ này dùng để điều khiển nội dung và hình thức trình
bày tài liệu HTML.
- Cấu trúc thẻ HTML thông thường gồm 2 phần: thẻ mở <tên thẻ> và thẻ
đóng </tên thẻ>
<tên thẻ [thuộc tính]> nội dung </tên thẻ>
+ Tên thẻ và thuộc tính thẻ không phân biệt chữ thường và hoa.
Tuy nhiên theo khuyến nghị của W3C để tài liệu chặt chẽ hơn thì tên
thẻ và thuộc tính nên viết bằng chữ thường.
KHOA CÔNG NGHỆ THÔNG TIN
Trang 6
Bài 2 - Thiết kế trang web với HTML
+ Mỗi thẻ có thể không có hoặc có nhiều thuộc tính, các thuộc tính viết
cách nhau ít nhất một khoảng trắng. Thuộc tính được nhập ngay
trước ngoặc đóng „>‟ của thẻ mở. Giá trị thuộc tính của thẻ đặt trong
dấu nháy đơn hoặc nháy kép.
+ Trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng,
xuống dòng trong phần nội dung.
. Phân loại thẻ
- Thẻ chứa: gồm thẻ mở và thẻ đóng. Dữ liệu bị tác động nằm giữa thẻ mở và
thẻ đóng.
<tên thẻ [thuộc tính] > nội dung </tên thẻ>
- Thẻ rỗng: chỉ gồm một thẻ mở, không có nội dung. Có thể có thuộc tính.
<tên thẻ [thuộc tính] >
- Các thẻ có thể lồng vào nhau, theo nguyên tắc thẻ nào mở trước thì thẻ đó
đóng sau.
<thẻ 1><thẻ 2> nội dung </thẻ 2></thẻ 1>
Ví dụ:
- Thẻ chứa
<b> chữ in đậm </b>
<h3> Mức chữ ở tiêu đề 3 </h3>
- Thẻ rỗng
<br>
<hr color="#FF0000" size="4">
- Thẻ lồng
<strong><em> Thiết kế Web </em></strong >
2.1.3. Tạo trang web
. Cấu trúc tài liệu HTML
Cấu trúc cơ bản của tài liệu HTML thông thường gồm 3 phần:
- <!DOCTYPE>: Phần khai báo chuẩn phiên bản HTML sử dụng.
Với những phiên bản HTML khác nhau thì sẽ có DOCTYPE khác nhau:
HTML5: <!DOCTYPE html>
- <head></head>: Phần khai tất cả thông tin của tài liệu HTML như khai báo
về meta, title, css, javascript.
KHOA CÔNG NGHỆ THÔNG TIN
Trang 7
Bài 2 - Thiết kế trang web với HTML
- <body></body>: Phần chứa nội dung của trang web, tất cả nội dung mà
người dùng nhìn thấy sẽ được khai báo ở đây.
Hình 2.1. Cấu trúc của tài liệu html
* Lưu ý:
- Một số ký tự đặc biệt trong HTML
Hình 2.2. Các ký tự đặc biệt trong HTML
- Phần chú thích trong trang HTML sẽ không được hiển thị trên trình duyệt.
Cú pháp: <!-- Chú thích -->
. Tạo trang web
Để tạo tài liệu html, chỉ cần sử dụng một chương trình soạn thảo văn bản
để soạn thảo và sau đó lưu lại với tên tập tin có phần mở rộng .htm hoặc .html.
Có nhiều chương trình soạn thảo tài liệu html từ đơn giản đến chuyên nghiệp
như: Notepad, Notepad++, EditPlus, FrontPage, Dreamweaver,…
Ví dụ 1: Tạo trang web bằng Notepad++
- Mở Notepad++ và nhập vào nội dung sau:
KHOA CÔNG NGHỆ THÔNG TIN
Trang 8
Bài 2 - Thiết kế trang web với HTML
Hình 2.3. Trình soạn thảo Notepad++
- Lưu tập tin: chọn File Save As
+ Save in: chọn thư mục lưu trữ
+ File name: nhập tên file (vidu1)
+ Save As Type: chọn Hyper Text Markup Language file
Save
Hình 2.4. Hộp thoại Save As
- Hiển thị trang web trên trình duyệt:
+ Chọn Run chọn trình duyệt muốn hiển thị trang web
Hình 2.5. Menu lệnh Run
KHOA CÔNG NGHỆ THÔNG TIN
Trang 9
Tải về để xem bản đầy đủ
171 trang
24482
Free
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình mô đun Thiết kế web cơ bản - Ngành: Thiết kế và quản lý website", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_mo_dun_thiet_ke_web_co_ban_nganh_thiet_ke_va_quan.pdf
