Giáo trình Thiết kế Web và quản trị Website (Nghề: Ứng dụng phần mềm - Trình độ: Cao đẳng) - Trường Cao đẳng nghề Cần Thơ

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:99

Thêm vào BST

Báo xấu

23
lượt xem 17
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình "Thiết kế Web và quản trị Website (Nghề: Ứng dụng phần mềm - Trình độ: Cao đẳng)" được biên soạn nhằm giúp sinh viên hiểu rõ mô hình, cấu trúc và nguyên lý hoạt động của các website; nắm được cấu trúc một trang HTML và tính năng, cú pháp của các thẻ HTML; trình bày được đặc điểm và tính năng cơ bản của phần mềm thiết kế web DreamWeaver như: định dạng văn bản, âm thanh, hình ảnh, liên kết;...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kế Web và quản trị Website (Nghề: Ứng dụng phần mềm - Trình độ: Cao đẳng) - Trường Cao đẳng nghề Cần Thơ

UDPM-CĐ-MĐ20-TKQTWEBSITE 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. 1
LỜI GIỚI THIỆU Chương trình khung quốc gia nghề Quản trị mạng máy tính đã được xây dựng trên cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun, môn học. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo các môđun, môn học đào tạo nghề là cấp thiết hiện nay. Thiết kế và quản trị website là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu thiết kế và lập trình web trong và ngoài nước, kết hợp với kinh nghiệm trong thực tế sản xuất. Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn. Cần Thơ, ngày 17 tháng 06 năm 2018 Tham gia biên soạn 1. Chủ biên Nguyễn Phát Minh 2
MỤC LỤC TRANG LỜI GIỚI THIỆU ............................................................................................................ 2 MỤC LỤC ....................................................................................................................... 3 GIÁO TRÌNH MÔN HỌC/MÔ ĐUN ............................................................................ 5 BÀI 1: TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB ........................................ 7 Mã bài: MĐ 20 - 01 ......................................................................................................... 7 1. Một số dịch vụ quan trọng trên Internet ................................................................. 7 2. Cấu trúc và hoạt động của dịch vụ WWW ........................................................... 10 3. Lịch sử phát triển các hệ thống WebServer-WebBrowser ................................... 14 BÀI 2: TẠO CÁC TRANG HTML .............................................................................. 17 Mã bài: MĐ 20 - 02 ....................................................................................................... 17 1. Tạo và thực thi trang web HTML ......................................................................... 17 2. Cấu trúc trang web HTML.................................................................................... 22 3. Định dạng văn bản ................................................................................................ 23 4. Địa chỉ tương đối và tuyệt đối .............................................................................. 26 5. Siêu liên kết .......................................................................................................... 26 6. Âm thanh - Hình ảnh ............................................................................................ 29 7. Bảng biểu .............................................................................................................. 32 8. Tạo Form .............................................................................................................. 34 9. Kiểm tra ................................................................................................................ 35 BÀI 3: THIẾT KẾ WEBSITE VỚI DREAM WEAVER ............................................ 36 Mã bài: MĐ 20 - 03 ....................................................................................................... 36 1. Tạo thư mục chứa bộ web ..................................................................................... 37 2. Tạo mới một trang web ......................................................................................... 37 3. Lưu một trang web ................................................................................................ 38 4. Định dạng trang web. ............................................................................................ 38 5. Xem trang web trên trình duyệt ............................................................................ 39 6. Tạo bảng trong trang web ..................................................................................... 40 7. Chèn hình vào trang web ...................................................................................... 42 8. Chèn ảnh động flash, video clip vào trang web. ................................................... 44 9. Tạo menu cho trang web. ...................................................................................... 44 10. Tạo liên kết cho trang web. ................................................................................. 50 11. Cách tạo Template .............................................................................................. 50 3
12. Tạo trang web mới từ template ........................................................................... 53 13. Đưa website lên hosting ...................................................................................... 54 BÀI 4: LẬP TRÌNH WEB VỚI NGÔN NGỮ PHP...................................................... 58 Mã bài: MĐ 20 - 04 ....................................................................................................... 58 1. Tổng quan về PHP................................................................................................. 58 2. Cài đặt webserver .................................................................................................. 59 3. Nền tảng của PHP ................................................................................................. 65 4. Sử dụng biến Form ............................................................................................... 76 5. Sử dụng một số đối tượng trên PHP...................................................................... 77 6. Kiểm tra ................................................................................................................. 77 BÀI 5: XUẤT BẢN VÀ QUẢN TRỊ WEBSITE ......................................................... 78 Mã bài: MĐ 20 - 05 ....................................................................................................... 78 1. Đăng kí website miễn phí trên internet ................................................................. 78 2. WordPress là gì? .................................................................................................... 80 3. WordPress.com và WordPress.org khác nhau như thế nào? ................................. 81 5.4. Cài Đặt WordPress ............................................................................................. 81 5. Các Chức Năng Chính Trong WordPress ............................................................. 88 TÀI LIỆU THAM KHẢO ............................................................................................. 99 4
GIÁO TRÌNH MÔN HỌC/MÔ ĐUN Tên môn học/mô đun: THIẾT KẾ WEB VÀ QUẢN TRỊ WEBSITE Mã môn học/mô đun: MĐ 20 Vị trí, tính chất, ý nghĩa và vai trò của môn học/mô đun: _ Vị trí: là mô đun được bố trí giảng dạy sau các môn cơ sở nghề, Lập trình giao diện, Lập trình cơ sở dữ liệu, Hệ quản trị cơ sở dữ liệu. _ Tính chất: là mô đun bắt buộc thuộc chuyên môn nghề của chương trình đào tạo Cao đẳng (ứng dụng phần mềm). _ Ý nghĩa và vai trò của môn học/mô đun: Mục tiêu của môn học/mô đun: _ Kiến thức: o Sinh viên hiểu rõ mô hình, cấu trúc và nguyên lý hoạt động của các website; o Hiểu rõ cấu trúc một trang HTML và tính năng, cú pháp của các thẻ HTML; o Hiểu rõ các đặc điểm và tính năng cơ bản của phần mềm thiết kế web DreamWeaver như: định dạng văn bản, âm thanh, hình ảnh, liên kết,....; o Hiểu được các kỹ thuật lập trình trên web với ngôn ngữ PHP: Kết nối cơ sở dữ liệu, tương tác cơ sở dữ liệu,...; _ Kỹ năng: o Xây dựng được các website có thẩm mỹ, trong đó có các ứng dụng phục vụ các mục tiêu tương tác dữ liệu cụ thể, có khả năng liên kết đến các trang web hay tài nguyên khác; o Xuất bản được website lên internet và quản trị website; _ Về năng lực tự chủ và trách nhiệm: o Nghiêm túc, tỉ mỉ trong việc tiếp nhận kiến thức. Chủ động, tích cực trong thực hành và tìm kiếm nguồn bài tập liên quan. Nội dung của môn học/mô đun: Số Thời gian TT Tên các bài trong mô đun Tổng Lý Thực Kiểm tra* số thuyết hành, (LT hoặc Bài tập TH) Bài 1: Tổng quan về dịch vụ World 1 2 2 0 0 Wide Web 2 Bài 2: Tạo các trang HTML 24 11 12 1 Bài 3: Thiết kế website với công cụ 3 36 12 22 2 DreamWeaver 4 Bài 4: Lập trình website với PHP 42 12 28 2 5
5 Bài 5: Quản trị website 16 8 8 0 Tổng cộng 120 45 70 5 6
BÀI 1: TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB Mã bài: MĐ 20 - 01 Giới thiệu: Bài học này nhằm giới thiệu sơ lược về lịch sử của World Wide Web (www), URL, về giao thức HTTP và ngôn ngữ phổ biến được dùng bởi World Wide Web là HTML (Hyper Text Markup Language). Mục tiêu:  Hiểu được môi trường hoạt động của các website;  Hiểu được cấu trúc và các nguyên lý hoạt động của website;  Mô tả mạch lạc được các mô hình hoạt động WWW, FTP, Email; Nghiêm túc, tích cực trong việc tiếp nhận kiến thức. Chủ động, tích cực tìm kiếm các nguồn tài liệu liên quan. Nội dung chính: 1. Một số dịch vụ quan trọng trên Internet 1.1. Dịch vụ truyền file FTP Dịch vụ truyền tệp (FTP) là một dịch vụ cơ bản và phổ biến cho phép chuyển các tệp dữ liệu giữa các máy tính khác nhau trên mạng. FTP hỗ trợ tất cả các dạng tệp, trên thực tế nó không quan tâm tới dạng tệp cho dù đó là tệp văn bản mã ASCII hay các tệp dữ liệu dạng nhị phân. Với cấu hình của máy phục vụ FTP, có thể quy định quyền truy nhập của người sử dụng với từng thư mục dữ liệu, tệp dữ liệu cũng như giới hạn số lượng người sử dụng có khả năng cùng một lúc có thể truy nhập vào cùng một nơi lưu trữ dữ liệu. 1.2. Dịch vụ thư điện tử Email Dịch vụ thư điện tử là một dịch vụ thông dụng nhất của Internet. Nó cho phép bạn gửi một thông điệp tới một hoặc một nhóm người qua mạng Internet. Ngoài việc gửi thông điệp dưới dạng văn bản, bạn còn có thể đính kèm các tệp tin cùng với thông điệp. Dịch vụ thư điện tử được sử dụng phổ biến do có các ưu điểm sau: • Tốc độ cao và khả năng chuyển tải trên toàn cầu: Có thể nói đây là một trong những ưu điểm hàng đầu của hệ thống thư điện tử. Bạn có thể gửi thư cho bất kỳ người nào gần như ngay lập tức. Người nhận cũng có thể nhận thư ở bất kỳ đâu, miễn là nơi đó có kết nối Internet. • Giá thành thấp: Giá thành của việc gửi thông tin bằng thư điện tử gần như không đáng kể bởi bạn chỉ cần trả chi phí cho việc sử dụng Internet là bạn đã có khả năng sử dụng các hệ thống thư điện tử miễn phí trên toàn cầu và từ đó liên lạc đến khắp mọi nơi. Nếu so sánh về mặt giá thành với hệ thống thư tín thông thường, nhất là gửi thư quốc tế thì việc gửi bằng hệ thống thư điện tử rẻ và tiện dụng hơn rất nhiều lần. • Linh hoạt về mặt thời gian: Nếu bạn có người quen ở Mỹ và bạn muốn gọi điện cho người đó lúc 12 giờ trưa, bạn có thể không nhận được câu trả lời (do các cơ quan ở Mỹ đã nghỉ), hoặc có thể bạn sẽ đánh thức họ vào lúc nửa đêm, rất phiền toái. Tuy nhiên, nếu sử dụng thư điện tử thì bạn có thể gửi vào bất cứ lúc nào và người nhận cũng 7
có thể đọc thư vào lúc nào họ muốn. Để có thể sử dụng thư điện tử, mỗi người dùng phải có một tài khoản. Tài khoản này có thể được đăng ký miễn phí hoặc được các nhà cung cấp dịch vụ cấp. Cấu trúc chung của một địa chỉ thư điện tử như sau: Tênđăngký@tênmiền Ví dụ địa chỉ thư: nva@topica.edu.vn, nve@neu-edutop.edu.vn Tên đăng ký: nva, nve Ký tự @ phân tách tên đăng ký và tên miền, ký tự này buộc phải có trong mọi địa chỉ thư điện tử. Tên miền: topica.edu.vn, neu-edutop.edu.vn là địa chỉ website của tổ chức mà người dùng đăng ký dịch vụ thư điện tử. Hệ thống thư điện tử được chia làm hai phần: UA (Mail User Agent) và MTA (Message Transfer Agent). MUA thực chất là một hệ thống làm nhiệm vụ tương tác trực tiếp với người dùng cuối, giúp họ nhận bản tin, soạn thảo bản tin, lưu các bản tin và gửi bản tin. Nhiệm vụ của MTA là định tuyến bản tin và xử lý các bản tin đến từ hệ thống của người dùng sao cho các bản tin đó đến được đúng hệ thống đích. Hình 1.10. Cấu trúc hệ thống thư điện tử 1.3. Dịch vụ Telnet Telnet là một dịch vụ Internet cho phép người dùng ngồi trên một thiết bị đầu cuối có thể thông qua kết nối mạng truy nhập đến một thiết bị từ xa để điều khiển nó bằng câu lệnh như là đang ngồi tại máy ở xa. Một máy trạm có thể thực hiện đồng thời nhiều phiên telnet đến nhiều địa chỉ IP khác nhau. Telnet hoạt động theo phiên, mỗi phiên là một kết nối truyền dữ liệu theo giao thức TCP với cổng 23. Telnet hoạt động theo mô hình khách/chủ (Client/Server), trong đó Client là một phần mềm chạy trên máy của người dùng, phần mềm này sẽ cung cấp giao diện hiển thị để người dùng gõ lệnh điều khiển. Phần Server là dịch vụ chạy trên máy từ xa lắng nghe và xử lý các kết nối và câu lệnh được gửi đến từ máy trạm tại chỗ. Dịch vụ Telnet thường được sử dụng để điều khiển và cấu hình từ 8
xa cho các thiết bị, chẳng hạn bộ định tuyến (Router) và bộ chuyển mạch (Switch). Để kết nối từ xa đến một thiết bị nào đó, câu lệnh được sử dụng là: Telnet IP_address Trong đó: • Telnet là tên lệnh. • IP_address là địa chỉ IP của thiết bị. 1.4. Dịch vụ WWW World Wide Web hay Web là một trong những dịch vụ phổ biến nhất của Internet. Dịch vụ này cho phép bạn truy nhập đến các trang thông tin siêu văn bản (trang web) được đặt tại nhiều vị trí khác nhau trên Internet. Dịch vụ này hoạt động theo mô hình Khách/Chủ (Client/Server). Trong đó máy chủ web là máy tính trên Internet có chạy phần mềm Web server. Máy chủ web lưu trữ nội dung thông tin (các trang web), nhận và trả lời các yêu cầu từ máy khách web. Máy khách web là máy tính của người dùng có chạy trình duyệt web (như Internet Explorer, Netscape Navigator, Firefox …). Máy khách web gửi yêu cầu và hiển thị thông tin trả lời từ máy chủ web. Dịch vụ web sử dụng giao thức HTTP (Hyper Text Transfer Protocol): Giao thức truyền siêu văn bản. Hình 1.9. Mô hình hoạt động của một dịch vụ Web Để truy nhập đến một trang web nào đó, người dùng gõ địa chỉ trang web vào thanh địa chỉ của trình duyệt web. Ví dụ, để truy nhập tới trang web của Chương trình đào tạo cử nhân theo phương thức Elearning (NEU-EDUTOP), bạn gõ: http://www.neu-edutop.edu.vn, http://www.topica.edu.vn 1.5. Bộ định vị tài nguyên URL URL, viết tắt của Uniform Resource Locator (Định vị Tài nguyên thống nhất)[1], được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL, còn được gọi là địa chỉ mạng hay là liên kết mạng (hay ngắn gọn là liên kết). Về kỹ thuật, URL là một dạng của URI, nhưng trong nhiều tài liệu kỹ thuật và các cuộc thảo luận bằng lời nói, URL thường được sử dụng như một từ đồng nghĩa với URI, và điều này không bị coi là một vấn đề.[2] 9
2. Cấu trúc và hoạt động của dịch vụ WWW 2.1. Kiến trúc WWW World Wide Web (gọi tắt là Web hay WWW) • Là một dịch vụ của Internet, cho phép bạn truy nhập tới nguồn thông tin đồ sộ của Internet. Nguồn thông tin này được tổ chức dưới dạng các trang web có sự liên kết chặt sẽ với nhau. • Mỗi trang web là một tài liệu siêu văn bản. Tài liệu này có thể chứa văn bản, âm thanh, hình ảnh… Được mã hoá đặc biệt, sử dụng ngôn ngữ đánh dấu siêu văn bản – HTML (HyperText Markup Languages). Ngôn ngữ này cho phép tác giả của một tài liệu nhúng các liên kết siêu văn bản (còn được gọi là các siêu liên kết – hyperlink) vào trong tài liệu. Các liên kết siêu văn bản là nền móng của World Wide Web. • Khi đọc một trang web, có thể nhấp chuột vào một từ hay một hình ảnh được mã hoá như một liên kết siêu văn bản và sẽ lập tức chuyển tới một vị trí khác nằm bên trong tài liệu đó hoặc tới một trang Web khác. Trang thứ hai có thể nằm trên cùng máy tính với trang đầu, hoặc có thể nằm bất kì nơi nào trên Internet. • Một tập hợp các trang Web có liên quan được gọi là WebSite. Mỗi WebSite được lưu trữ trên trên một máy phục vụ Web, vốn là các máy chủ Internet lưu trữ hàng ngàn trang Web riêng lẻ. Việc sao chép một trang lên một Web Server được gọi là tải (hoặc nạp) lên (uploading). 10
Hình 1.7. Hình ảnh của một trang Web • Web cung cấp thông tin rất đa dạng bao gồm văn bản, hình ảnh, âm thanh, video. Hiện nay các trang Web sử dụng để phân phối tin tức, các dịch vụ giáo dục, thông tin, danh mục sản phẩm, cùng nhiều thứ khác. Các trang Web tương tác cho phép các độc giả tra cứu cơ sở dữ liệu, đặt hàng các sản phẩm và các thông tin, gửi số tiền thanh toán bằng thẻ tín dụng… Máy chủ Web (web server) Để cung cấp dịch vụ Web cho người sử dụng, chúng ta cần có một máy chủ web đặt tại một địa chỉ nào đó trên Internet. Máy chủ web là một máy tính mà trên đó cài đặt phần mềm phục vụ Web, đôi khi người ta cũng gọi chính phần mềm đó là Web Server. • Tất cả các Web Server đều hiểu và chạy được các file *.htm và *.html, tuy nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như IIS của Microsoft dành cho *.asp, *.aspx...; Apache dành cho *.php...; Sun Java System Web Server của SUN dành cho *.jsp... Trình duyệt Web (web browser) Trình duyệt Web là một phần mềm ứng dụng được cài đặt trên máy tính của người sử dụng. Phần mềm này cho phép người dùng tìm các tài liệu siêu văn bản trên Web rồi mở các tài liệu đó trên máy tính người sử dụng. 2.2. Web tĩnh và Web động Web tĩnh là những website không có hệ thống quản lý nội dung (xem bài cms) và người dùng không thể chỉnh sửa được hoặc có thể chỉnh sửa, thay đổi dữ liệu được. Hiện nay web tĩnh hầu như ít tồn tại hoặc chỉ tồn tại với những công ty chuyên về thiết kế website, họ sử dụng web tĩnh bởi họ có kiến thức và dễ dàng chỉnh sửa nội dung khi cần. Web tĩnh được làm từ gì? Về kiến thức cơ bản thì web tĩnh thường được xây dựng từ CSS, HTML, JAVASCRIPT (DHTML), hiện nay có thêm công nghệ HTML5 & CSS3. Có thể bạn nhìn một web nào đó nhìn rất lung lay, đẹp và nội dung có thể thay đổi nhưng chưa chắc nó là web động bởi vì người ta có thể sử dụng DHTML để thay đổi nội dung (tại client). Nếu bạn chạy trên máy tính của bạn thì với web tĩnh bạn có thể đặt tại đâu cũng chạy được vì bản chất nó chỉ là một file bình thường. Ưu điểm của web tĩnh:  Về giao diện Designer có thẻ thiết kế theo kiểu mới lạ  Tốc độ truy cập nhanh bởi nó chỉ là những file HTML  Chi phí đầu tư thấp bởi bạn không phải trả tiền nhiều cho Coder  Thân thiện với bộ máy tìm kiếm bởi bạn có thể đặt tên file tùy ý (ten-file.html, tieu-de-tin-tuc.html) Nhược điểm của web tĩnh:  Khó quản lý nội dung  Khó nâng cấp bảo trì 11
 Mỗi khi thay đổi phải vào file HTML, CSS hoặc JAVASCRIPT để chỉnh sửa Khi nào nên sử dụng web tĩnh?  Nếu bạn là doanh nghiệp muốn tự mình làm website thì bạn có thể học các kiến thức căn bản và tự làm một Web tĩnh cho mình  Nội dung website ít khi cập nhật và ít nên bạn muốn tiết kiệm chi phí  Website bạn nhỏ và bạn thuê luôn người chuyên về web để quản trị Trên thực tế thì mình thấy hiện nay chỉ có các công ty thiết kế web họ mới làm web tĩnh bởi vì họ có khả năng chỉnh sửa được chứ khách hàng thì họ không có khả năng đó. Hiện nay có các trang web ONE PAGE có các hiệu ứng slide khá độc nên cũng có thể họ sử dụng web tĩnh hoặc tĩnh một phần trong đó. Ngược lại với web tĩnh, web động là những website có hệ thống quản lý nội dung và người dùng có thể chỉnh sửa nội dung được. Ví dụ như trang vnexpress.net hay 24h.com.vn thì đó là những web động bởi vì họ có thể đăng tin mới, chỉnh sửa tin mới và chỉnh sửa danh mục menu, ... Web động được làm từ gì? Web động sử dụng các công nghệ như HTML, CSS, HTML5, CSS3, JAVASCRIPT, ... và điều đặc biệt là có sử dụng một ngôn ngữ lập trình server như PHP, một hệ quản trị cơ sở dữ liệu như MySQL, vì vậy web động phải chạy trong máy chủ. Nếu đặt trên máy tính của bạn thì bạn phải cài các Web server ảo như vertrigo, Xampp, wampp, ... Ưu điểm của web động:  Dễ dàng quản lý nội dung  Dễ dàng nâng cấp và bảo trì  Có thể xây dụng được web lớn  Thường sử dụng tương tác với người dùng cao  Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chức năng Rewrite URL để chuyên URL thân thiện Nhược điểm của web động:  Chi phí xây dựng cao  Nếu web lớn có thể cần thêm nhân sự chuyên ngành Khi nào nên sử dụng web động?  Bạn làm website thương mại điện tử bán hàng  Bạn làm web giới thiệu sản phảm công ty  Bạn làm web tin tức, blog cá nhân  Web bạn tầm cỡ lớn Nhưng chung quy lại thì hiện nay đa số bạn nên chọn giải pháp làm web động sẽ tốt hơn. 12
2.3. WebServer- WebBrowser Khái niệm web server thực tế vẫn còn khá xa lạ với nhiều người, chính vì thế khi nghe đến nhiều người vẫn luôn thắc mắc web server là gì? Đây là tên gọi dành cho một loại máy chủ có dung lượng lớn, tốc độ cao có công dụng lưu trữ các thông tin trên internet như một ngân hàng dữ liệu bao gồm các website đã được thiết kế và các thông tin, tài khoản… có liên quan. Xét ở mức độ cơ bản nhất, toàn bộ các website cần một chương trình máy tính, phân phối các trang web khi có yêu cầu từ người dùng. Chiếc máy tính chạy chương trình này là web server. Khi một người dùng sử dụng máy tính để truy cập một website, họ nhập và gửi yêu cầu tới internet về việc xem một trang web. Điều này có thể thực hiện được là vì mỗi máy tính/ thiết bị kết nối internet đều được định danh với một địa chỉ nhận dạng duy nhất IP (viết tắt của từ Internet Protocol – giao thức internet). Thông qua địa chỉ này, các máy tính có thể tìm kiếm nhau. Mỗi trang web tương ứng có một địa chỉ duy nhất là URL (viết tắt của từ Uniform Resource Locator). Khi người dùng sử dụng máy tính (máy khách) nhập URL của website vào trình duyệt web. Ví dụ: nhập: https://longvan.net/ vào trình duyệt. Máy khách sẽ gửi yêu cầu truy cập đến IP của Web server sẽ nhận được yêu cầu về việc xem nội dung trang web của Long Vân thông qua qua giao thức http – giao thức được thiết kế để gửi các file đến trình duyệt web và các giao thức khác. Web server sẽ sẽ gửi nội dung web (bài viết, hình ảnh, video,…) đến máy khách thông qua đường truyền internet. Mỗi web server đều có một địa chỉ IP hoặc cũng có thể có một domain name. Bất kỳ máy tính nào cũng có thể trở thành web server bởi việc cài đặt lên nó một chương trình phần mềm server software và sau đó kết nối vào Internet. Trình duyệt Web là một chương trình phần mềm được viết để nhận, gửi, hiển thị, tương tác với các nội dung từ trên World wide web (hay còn gọi là WWW vào đây để tìm hiểu thêm về WWW là gì). Trình duyệt Web còn có tên gọi trong tiếng Anh là Web Browser. Trình duyệt đầu tiên trên thế giới được ra đời vào năm 1990 bởi Sir Tim Berners-Lee và có tên gọi là WorldWideWeb. Sau này được đổi tên là Nexus (Cái này là tên gọi trình duyệt web đầu tiên, không phải dòng điện thoại Nexus do google bán đâu nha.) Hiện nay thì trên thế giới đang có những trình duyệt Web được nhiều người sử dùng là:  Trình duyệt Chrome do Google phát triển. Đây là trình duyệt mà cá nhân mình đánh giá cao nhất. Với hệ thống tiện ích mở rộng (extension) phong phú  Trình duyệt Internet Explorer hay còn gọi là trình duyệt IE do Microsoft phát triển được tích hợp sẵn vào hệ điều hành Windows.  Trình duyệt Mozilla Firefox hay thường gọi là Firefox do Mozilla phát triển.  Trình duyệt Opera do Opera Software phát triển. Hiện nay thì đã có tích hợp thêm VPNrất thích hợp cho việc truy cập các trang web bị cấm truy cập mà không cần phải cài đặt hay chỉnh chọt gì nhiều.  Trình duyệt Safari do Apple phát triển. 13
 Và các trình duyệt Web khác với thị phần người sử dụng ít hơn như Maxthon, UC, …. 3. Lịch sử phát triển các hệ thống WebServer-WebBrowser 3.1. WebServer 6/8/1991 là một ngày đáng nhớ bởi đó là thời điểm mã máy tính "non nớt" cho www được đăng trên alt.hypertext để mọi người có thể tải và tìm hiểu nó. Cũng bắt đầu từ hôm ấy công nghệ web được thế giới biết đến. Jeff Groff, người cùng tham gia viết mã với Berners-Lee, cho biết ý tưởng tạo dựng web thực ra được hình thành rất đơn giản: "Chúng tôi luôn nghĩ rằng người sử dụng không cần phải xoay sở với những vấn đề kỹ thuật phức tạp". Web giống như một tấm khăn trải giường với nhiệm vụ cố che phủ sự rắc rối của những dữ liệu được lưu hành trên Internet. Paul Kunz, nhà khoa học đã thiết lập máy chủ web đầu tiên ở châu Âu vào tháng 12/1991, cho biết đầu thập niên 90, máy tính giống như những "ốc đảo" thông tin. Một lần đăng nhập chỉ có thể truy cập tài nguyên của một hệ thống. Chuyển sang máy tính khác đồng nghĩa với việc họ phải đăng nhập thêm lần nữa và phải sử dụng những bộ lệnh khác nhau để truy xuất dữ liệu. Web đã lôi kéo sự chú ý của Kunz khi ông chứng kiến Berners-Lee trình diễn khả năng hoạt động của web trên hệ thống IBM. Sau đó, Kunz đã thiết lập máy chủ web, cho phép các chuyên gia vật lý rà soát hơn 200.000 dữ liệu dễ dàng hơn bao giờ hết. Tuy nhiên, dù các nhà vật lý đã bị web quyến rũ, đa số mọi người lại không nhận biết được khả năng tiềm ẩm của nó. Kunz cho rằng điều này là do nhiều tổ chức cũng đang thực hiện ý tưởng tương tự. Công nghệ nổi tiếng nhất khi đó là Gopher của Đại học Minnesota (Mỹ), cũng với tham vọng hóa giải sự phức tạp của những máy tính kết nối Internet. Gopher được ra mắt vào mùa xuân năm 1991 và lưu thông Gopher cao hơn hẳn so với lưu thông web trong vài năm tiếp theo. Sự phát triển của công nghệ web so với Gopher. Nguồn: MIT Trong thời gian đó, Berners-Lee, Jeff Groff và đồng nghiệp cũng tích cực giới thiệu phát minh của họ tại các hội thảo, cuộc gặp gỡ... Dự án www chỉ thực sự thăng hoa khi chuyên gia Marc Andreessen thuộc Đại học Illinois (Mỹ) giới thiệu trình duyệt web máy tính đầu tiên vào tháng 4/1993. Trình duyệt 14
Mosaic đã quá thành công và một số tính năng vẫn được coi là quy ước trong công nghệ web ngày nay. Cũng vào năm 1993, Đại học Minnesota thu phí Gopher khiến người ta bắt đầu phải tìm đến các giải pháp thay thế. Ngoài ra, theo Ed Vielmetti, nhà nghiên cứu thuộc Đại học Michigan, ngay từ những năm đầu, web đã chứng minh được tính hữu ích với người sử dụng thông thường. Mọi người có thể sử dụng các trang web để tự bộc lộ mình, điều mà những công nghệ khác không cho phép (hình thức mới hiện nay của nó chính là blog). Cuối năm 1994, lưu thông web rốt cuộc cũng vượt qua Gopher và từ đó chưa bao giờ bị tụt lại. Hiện nay, gần 100 triệu website đã xuất hiện và người ta gần như đồng nhất công nghệ web với Net. Kunz cho biết ý tưởng hình thành www là để tạo điều kiện cho mọi người vừa đọc vừa đóng góp nội dung. Những công cụ mới như site chia sẻ ảnh, mạng xã hội, blog, các trang wiki... đang dần hoàn thành lời hứa ban đầu của nhóm chuyên gia phát triển web. Và như thế, theo Kunz, web bây giờ mới chỉ bắt đầu những bước đi đầu tiên 3.2. WebBrowser Lịch sử của các trình duyệt Web bắt đầu vào cuối thập niên 1980, khi một loạt các công nghệ đặt nền móng cho các trình duyệt Web đầu tiên, WorldWideWeb, do Tim Berners-Lee vào năm 1991. Sự phát triển này dựa trên các công nghệ phần mềm và phần cứng hiện có, ngoài ra cũng mở ra nhiều công nghệ mới bắt đầu tư đây. Ted Nelson và Douglas Engelbart phát triển khái niệm siêu văn bản trước khi Berners- Lee và CERN khá lâu. Web browser đã trở thành cốt lõi của World Wide Web. Berners-Lee thừa nhận sự đóng góp của Engelbart. Việc giới thiệu trình duyệt Mosaic NCSA Web vào năm 1993 – một trong những trình duyệt web với giao diện đồ họa đầu tiên – đã dẫn tới sự bùng nổ trong việc dùng web. Marc Andreessen, người lãnh đạo của đội Mosaic tại NCSA, sớm bắt đầu công ty riêng của mình, đặt tên là Netscape, và phát hành các phiên bản Mosaic Netscape Navigator vào năm 1994, và sau đó nhanh chóng trở thành trình duyệt phổ biến nhất thế giới, chiếm 90% của tất cả các sử dụng Web đỉnh cao của nó. Microsoft đã đáp trả bằng trình duyệt Internet Explorer của mình trong năm 1995 (cũng bị ảnh hưởng nhiều từ Mosaic), và đầu cuộc chiến trình duyệt đầu tiên. Bằng việc kết hợp Internet Explorer với Windows, Microsoft đã có thể tận dụng ưu thế của nó trong thị trường hệ điều hành để quản lý thị trường trình duyệt Web; Internet Explorer sử dụng đạt vị trí trên 95% người dùng vào năm 2002. Internet Explorer chiếm 60% người sử dụng trình duyệt vào Tháng Tư năm 2010 theo thống kê của Net Applications. Opera đầu tiên xuất hiện vào năm 1996; mặc dù nó đã không bao giờ đạt được sử dụng rộng rãi, chiếm 2% thị phần trình duyệt vào tháng tư năm 2010, tuy nhiên Opera chiếm một phần đáng kể của thị trường đang phát triển nhanh là trình duyệt Web điện thoại di động, Oepra được cài đặt sẵn trên trên 40.000.000 điện thoại. Opera cũng có sẵn trên một số hệ thống nhúng khác, bao gồm video game console Wii của Nintendo. 15
Năm 1998, Netscape triển khai Mozilla Foundation trong một nỗ lực để sản xuất một trình duyệt cạnh tranh bằng cách sử dụng mô hình phần mềm mã nguồn mở. Đó là trình duyệt sau nay phát triển thành Firefox, sau đó thì trình duyệt này được phát triển khá tốt trong khi vẫn còn trong giai đoạn beta, ngay sau khi phát hành Firefox 1.0 vào cuối năm 2004, Firefox (mọi phiên bản) đã chiếm 7,4% thị phần sử dụng trình duyệt. Và đến tháng tư năm 2010, Firefox đã có một thị phần 25%. Safari của Apple đã phát hành phiên bản beta đầu tiên vào tháng một năm 2003; vào tháng 10 năm 2009, đã chi phối thị phần của trình duyệt web dựa trên việc phát triển từ các ứng dụng của Apple, chiếm dưới 5% thị trường trình duyệt toàn bộ vào tháng 4 năm 2010. Nó được xem như là công cụ cho web (còn được gọi là WebKit) để trình diễn các tính năng và là nền tảng được ứng dụng nhiều trên thiết bị di động, bao gồm cả hệ điều hành iPhone, Google Android, Nokia S60 và Palm WebOS. Vào tháng 9 năm 2008, Google bắt đầu nhảy vào cuộc chiến các trình duyệt bằng trình duyệt web Google Chrome. Đến tháng 4 năm 2010, Google Chrome đã chiếm 7% thị phần. 16
BÀI 2: TẠO CÁC TRANG HTML Mã bài: MĐ 20 - 02 Giới thiệu: Ngày nay, việc thiết kế một trang web là khá đơn giản, công việc này được hỗ trợ bởi rất nhiều công cụ đồ họa, môi trường thiết kế khác nhau. Chúng ta có thể tìm hiểu thêm về cách thiết kế, tạo giao diện cho một trang web bằng cách tìm kiếm tài liệu hướng dẫn cũng như phần mềm hỗ trợ trên mạng internet. Trong bài học này giới thiệu, hướng dẫn một số kỹ năng thiết kế giao diện cho trang web sử dụng các thẻ đánh dấu định dạng chuẩn HTML. Mục tiêu:  Sinh viên hiểu được cấu trúc cơ bản của một trang web HTML, cấu trúc thư mục của một website;  Hiểu được tác dụng và cú pháp của các thẻ HTML;  Viết được một số trang web qui mô nhỏ với các thẻ HTML; Thực thi được các trang HTML đó;  Truy cập và chỉnh sửa được các đoạn mã HTML trong các trang web đã có theo các yêu cầu;  Nghiêm túc, tỉ mỉ, khoa học trong việc tiếp thu các kiến thức lý thuyết. Tích cực, tỉ mỉ trong thực hành. Nội dung chính: 1. Tạo và thực thi trang web HTML Tạo trang HTML Chúng ta có thể soạn thảo tài liệu HTML bằng các trình soạn thảo chuyên nghiệp như Microsoft WebMatrix hay Sublime Text; tuy nhiên, trong quá trình học thiết kế trang web bằng ngôn ngữ HTML, chúng ta nên dùng những trình soạn thảo văn bản đơn giản như Notepad hay Notepad++ (trong hệ điều hành Windows) hay TextEdit (trong hệ điều hành Mac) vì tính đơn giản và đồng thời rèn luyện cho chúng ta tính cẩn thận, tỉ mỉ, kiên nhẫn – là những thái độ quan trọng trong quá trình học thiết kế web. Các đoạn mã minh hoạ trong giáo trình này sẽ được soạn thảo bằng Notepad++. Để tạo một trang HTML, chúng ta tuân theo 3 bước sau: Bước 1: Mở Notepad++ (nếu chưa có phần mềm này trên máy tính, có thể download miễn phí tại https://notepad-plus-plus.org/); Bước 2: Viết mã HTML. Ví dụ đoạn mã HTML đơn giản sau: 1 2 3 4 Thiết kế website 17
5 Đây là trang web đầu tiên của tôi. 6 7 Viết trong Notepad++ sẽ có giao diện như sau: + Bước 3: Lưu đoạn mã HTML vừa soạn thảo thành tập tin HTML (chú ý phần tên tập tin và phần mở rộng) bằng cách vào mục File > Save As (hay chọn icon Save nếu chưa lưu trước đó) như sau: Sau khi chọn Save As sẽ hiện ra hộp thoại Save As như sau: 18
Gõ tên tập tin (ví dụ như myfirstpage) với phần mở rộng là html hay htm trong mục File name; chọn All types (*.*) trong mục Save as type; và chọn vị trí lưu tập tin trong mục Save in, cụ thể như sau: 19
Sau khi lưu, nội dung tập tin HTML trong Notepad++ sẽ trông như sau: – Mở trang HTML đầu tiên bằng trình duyệt web (web browser) như Firefox, Chrome hay Internet Explorer như sau: + Nhấp chuột phải vào tập tin HTML vừa tạo; + Chọn mục Open with và chọn trình duyệt web dùng để hiển thị trang HTML. Ví dụ mở trang HTML vừa tạo (myfirstpage.html) bằng trình duyệt web Chrome như hình sau: 20