Bài giảng Chuyên đề 1: Lập trình Web - Phạm Văn Thuận

(BQ) Bài giảng Chuyên đề 1: Lập trình Web - Phạm Văn Thuận với mục tiêu giúp sinh viên nắm được thiết kế trang web tĩnh, sử dụng HTML; thiết kế trang web động sử dụng PHP & hệ quản trị cơ sở dữ liệu MySQL. Cùng tìm hiểu và tham khảo nội dung thông tin tài liệu.

Mơn học Chun đề 1: Lập trình Web (tài liệu lưu hành nội bộ) GV: Phạm Văn Thuận Bộ môn Kỹ thuật Máy tính Khoa CNTT- ĐH BKHN email: thuanpv@it-hut.edu.vn Mục tiêu môn học  Sau kết thúc mơn học này, sinh viên • Thiết kế trang web tĩnh, sử dụng HTML • Thiết kế trang web động sử dụng PHP & hệ quản trị sở liệu MySQL Lập trình Web  Tài liệu tham khảo chính: • • • • • Website: www.w3schools.com www.3c.com.vn/Story/vn/hotrokhachhang/ebooks/ Robert Sheldon, “Beginning MySQL” Sams Teach Yourself MySQL in 10 minutes Andy Harris, “PHPMySQL programming for the absolute beginner” • ftp://dce.hut.edu.vn/thuanpv Lập trình Web Nội dung mơn học Chương HTML & CSS Chương Javascript Chương Hệ quản trị sở liệu MySQL Chương PHP Lập trình Web HTML  HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu văn  Mỗi file HTML (có htm html): file văn chứa thẻ đánh dấu (markup tags) Thẻ đánh dấu cho trình duyệt biết cách thể trang web  Soạn thảo file HTML: • Notepad • Frontpage • Dreamweaver… Lập trình Web Trang web Hello World Hello World This is my first homepage Hello World Lập trình Web HTML elements  Mỗi tài liệu HTML file văn cấu thành từ phần tử HTML (HTML elements) Các phần tử định nghĩa thẻ (HTML tags)  Thẻ HTML: • Mỗi thẻ bao cặp dấu ngoặc nhọn “” (VD: ) • Các thẻ HTML thường theo cặp, thẻ bắt đầu thẻ kết thúc (VD: ) • Thẻ HTML không phân biệt chữ hoa chữ thường -> thẻ tương đương • Đoạn văn thẻ bắt đầu kết thúc nội dung phần tử HTML định nghĩa cặp thẻ Lập trình Web HTML elements Hello World This is my first homepage Hello World Thẻ bắt đầu : Thẻ kết thúc: Nội dung: Hello World Chức năng: hiển thị nội dung dạng chữ đậm Lập trình Web Các thẻ HTML  Thẻ tiêu đề (Heading tags) • Thẻ , … • Thẻ : tiêu đề lớn nhất, : tiêu đề nhỏ  Thẻ đoạn văn (Paragraph tags) • Thẻ

 Thẻ xuống dịng (Line breaks tags) • Xuống dịng đoạn • Thẻ Lập trình Web Các thẻ HTML heading 1 heading 2 heading 3 heading 4 heading 5 heading 6

Paragraph 1

Hello World This is the first paragraph

Paragraph 2

Hello World This is the second paragraph 10 Lập trình Web HTML Tables Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855 24 Lập trình Web HTML Lists  HTML Lists: biểu diễn danh sách tài liệu HTML  Phân loại • Danh sách khơng xếp:

,
• • Danh sách có xếp:
  ,
  1. • Danh sách tự định nghĩa: , ,
     1. Coffee
     2. Milk
     •Coffee 1.Coffee •2.Milk Milk 25 Lập trình Web HTML Lists Disc bullets list:
     • Apples
     • Bananas
     Circle bullets list:
     • Apples
     • Bananas
     Square bullets list:
     • Apples
     • Bananas
     26 Lập trình Web HTML Forms  HTML Forms: tương tác, cho phép người dùng nhập thông tin thông qua điều khiển thành phần (textbox, radio, drop down list…) •Type: text, radio, checkbox, submit •Name: tên điều khiển •Value: giá trị Lập trình Web 27 HTML Forms Thong tin ca nhan Ho va ten Que quan Gioi tinh Nam Nu Nghe nghiep Giao vien Bac si Ky su 28 Lập trình Web CSS  Lý đời Style Sheet • Giải vấn đề chung mà trình duyệt web gặp phải Ban đầu, HTML định nghĩa thẻ để hiển thị nội dung, bố cục cách trình bày trình duyệt đảm nhiệm, khơng sử dụng thẻ định dạng Các trình duyệt (Netscape & Internet Explorer) bổ sung thêm thẻ thuộc tính (VD: thẻ font thuộc tính màu) W3C chuẩn hóa HTML, bổ sung style sheet để định nghĩa bố cục cách trình bày nội dung 29 Lập trình Web CSS  CSS (Cascading Style Sheet) • Style (phong cách) định nghĩa bố cục cách hiển thị cho trang web • Style chia thành loại Inline Style: định nghĩa thẻ HTML Internal Style Sheet: định nghĩa cặp thẻ … External Style Sheet -> lưu file css Explorer default: mặc định trình duyệt web 30 Lập trình Web CSS  Cú pháp khai báo selector {property: value} Selector: Property: value -Các thẻ HTML Thuộc tính giá trị muốn thiết lập -Nhóm thẻ HTML Class selector Id selector Phân cách dấu “:” Nhiều thuộc tính, phân cách dấu “;” 31 Lập trình Web CSS  Các nhóm thuộc tính định nghĩa • • • • • • • • • Background Text Font Border Outline Complete Margin Padding List Table CSS Reference 32 Lập trình Web CSS  Selector thẻ HTML p {text-align:center;color:red} p { text-align: center; color: black; font-family: arial } Nhóm thẻ (Grouping) h1,h2,h3,h4,h5,h6 { color: green } 33 Lập trình Web CSS  Class selector p.right {text-align: right; Paragraph color: red} p.center {text-align: center; Paragraph color: blue}

     Paragraph

     Paragraph

     34 Lập trình Web CSS  Id selector Style cho thẻ với Id xác định p#para1 { text-align: center; color: red } Style cho nhiều thẻ với Id xác định #green {color: green} Ví dụ

     Paragraph

     H1 mau xanh H2 mau xanh Lập trình Web 35 CSS  Cách sử dụng • External Style Sheet 36 Lập trình Web CSS  Internal Style Sheet hr {color: sienna} p {margin-left: 20px} body {background-image: rl("images/back40.gif")}  Inline Style

     This is a paragraph

     Lập trình Web 37 CSS http://www.freecsstemplates.org Lập trình Web 38 ... # Entity_Number ; 15 Lập trình Web Các thực thể ký tự (Character entities) Bảng tra số thực thể ký tự 16 Lập trình Web Các thực thể ký tự (Character entities) 17 Lập trình Web Siêu liên kết (Hyperlink)... 28 Lập trình Web CSS  Lý đời Style Sheet • Giải vấn đề chung mà trình duyệt web gặp phải Ban đầu, HTML định nghĩa thẻ để hiển thị nội dung, bố cục cách trình bày trình duyệt đảm... thị nội dung dạng chữ đậm Lập trình Web Các thẻ HTML  Thẻ tiêu đề (Heading tags) • Thẻ , … • Thẻ : tiêu đề lớn nhất, : tiêu đề nhỏ  Thẻ đoạn văn (Paragraph tags) • Thẻ