Bài giảng môn học lập trình WEB

Internet  Mạng máy tính: hệ thống kết nối từ 2 máy tính trở lên  Internet: hệ thống thông tin toàn cầu, gồm các mạng máy tính liên kết với nhau trên phạm vi toàn thế giới... Tập giao

Giới thiệu môn học

Lập trình Web

Nội dung chính

 HTML (HyperText Markup Language )

 CSS (Cascading Style Sheet)

 Javascript

 PHP – MySQL

Chi tiết

Thông tin GV

 Giảng viên: ThS Nguyễn Minh Vi

 Đơn vị: bộ môn Kỹ thuật phần mềm,

khoa Kỹ thuật-Công nghệ-Môi trường, trường ĐH An Giang

 Điện thoại: 0988994683

 Email: nmvi@agu.edu.vn

nguyenminhvi@gmail.com

Tổng quan Internet

Internet

 Mạng máy tính: hệ thống kết nối từ 2 máy

tính trở lên

 Internet: hệ thống thông tin toàn cầu, gồm

các mạng máy tính liên kết với nhau trên phạm vi toàn thế giới

Địa chỉ Internet: IPv4

Địa chỉ Internet: tên miền

Địa chỉ Internet: tên miền

 Tên site: gợi nhớ, đăng ký

 Tên lĩnh vực

Tập giao thức TCP/IP

 TCP/IP: Transmission Control Protocol / Internet Protocol

 Là tập hợp các giao thức truyền nhận và sửa lỗi dữ liệu, cho phép truyền dữ liệu từ máy này đến máy khác trên internet

Các dịch vụ cơ bản của Internet

 Dịch vụ WWW (World Wide Web)

âm thanh, phim ảnh, … (multimedia)

Protocol)

Các dịch vụ cơ bản của Internet

 Dịch vụ thư điện tử (Email)

 SMTP (Simple Mail Transfer Protocol)

 POP3 (Post Office Protocol)

 IMAP (Internet Message Access Protocol)

Các dịch vụ cơ bản của Internet

 Dịch vụ truyền file (FTP)

Protocol)

Các dịch vụ cơ bản của Internet

 Hội thoại trực tuyến Chat

 Truy cập từ xa Telnet

 Điện thoại Internet Internet phone

 Truyền hình, hội nghị Internet

 …

Dịch vụ World Wide Web

World Wide Web

• âm thanh (audio)

được liên kết với nhau qua các siêu liên kết

(hyperlink)

Mô hình hoạt động

Clients

Web Servers

Programmers, Designers

Internet Resources

 Webpage: trang web, chứa các thông tin văn bản, hình ảnh, âm thanh, …

 Website: tập hợp nhiều trang web liên

quan với nhau

 URL (Uniform Resource Locator): địa chỉ định vị một trang web, một tài nguyên trên internet

Một số khái niệm khác

tên miền URL

ThS Nguyễn Minh Vi

BM Tin học – ĐH An Giang

Hyper Text Markup

Language

Giới thiệu

 HTML:

Tập tin HTML – ví dụ

<tên_thẻ thuộc_tính ="giá_trị">

Nội dung thẻ</tên_thẻ>

 Ví dụ:

<p align ="center">Xin chào!</p>

<hr color ="blue"/>

Thẻ HTML – thuộc tính

 Mỗi phần tử HTML có thể có nhiều thuộc tính, để mô tả thêm các thông tin cho nó

<tên_thẻ thuộc_tính ="giá_trị">…</tên_thẻ>

 Các thuộc tính chung

class Tên lớp của phần tử

id Định danh duy nhất của phần tử

style Định kiểu inline style cho phần tử

title Thông tin bổ sung cho phần tử (tool tip)

Các thẻ định dạng

 Văn bản định dạng trước <pre>

 Ví dụ:

Ví dụ sau là cùng một khối văn bản

<p> được bao trong thẻ &lt;p&gt;:

Danh sách

 Danh sách:

• thuộc tính type: 1, A, a, I, i, …

• thuộc tính start: số bắt đầu

• thuộc tính type: disc, circle, square

Bảng

Thuộc tính

 cellspacing: khoảng cách giữa các ô

 cellpadding: khoảng cách viền và text

 border: độ dày đường viền

 width: độ rộng bảng / ô

 colspan: ghép cột

 rowspan: ghép dòng

Bảng

<table border ="1">

<colgroup>

<col style ="background-color:pink">

<col span ="2" style ="background-color:lightblue">

Hình ảnh

 Các định dạng ảnh hiển thị được trên trình duyệt

 Khi sử dụng ảnh trên trang web cần cân nhắc giữa

Liên kết (Hyperlink)

 Liên kết trong: liên kết đến các phần trong cùng tài liệu

hoặc trong cùng một website

 Liên kết ngoài: liên kết đến các trang trên website khác

web/a.htm web/b.htm

b.htm

web/thumuc1/a.htm web/b.htm

/b.htm

Liên kết <a>

 Liên kết đến tài liệu khác

<a href="url">Liên kết</a>

Thuộc tính

Liên kết <a>

 Liên kết đến một điểm trong cùng tài liệu:

<a name ="tên">Điểm neo</a>

<a href ="#tên">Liên kết</a>

Cấu trúc website

 Phân cấp

Cấu trúc website

 Nối tiếp:

dung nối tiếp

Khung

 Thẻ <iframe> dùng hiển thị một khung

 Khung có thể chứa một trang web khác

 VD liên kết hiển thị trong khung

<a href ="http://www.agu.edu.vn"

target ="myifr"> AGU</a>

<br/>

<iframe width ="800px"

height ="500px"

name ="myifr"></iframe>

 VD: aqua , black, crimson , gold ,…

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Trên dòng (inline)

 Phần tử hiển thị kiểu trên dòng sẽ tiếp tục chung dòng với phần tử trước nó và chỉ lấy độ rộng vừa đủ

 Các phần tử mặc định hiển thị trên dòng:

 <span>

 <a>

 <img>

Thẻ trên dòng <span>

 Ví dụ

<p>Đoạn văn này

<span style ="background-color:blue;">

có vài từ</span> nền màu xanh</p>

Ví dụ layout

Layout trang

 Dùng khối <div>

 Dùng bảng <table>

 Dùng các thẻ HTML5

Layout với các khối

<div id ="header"><h1>Header</h1></div>

<div id ="nav"> Link 1<br>Link 2<br>Link 3<br> </div>

Layout với các khối

# section { background-color:#ffaaaa; width:290px; height:300px; float:left; padding:5px; }

# footer { background-color:maroon; width:400px;

color:white; clear:both; text-align:center;

padding:5px; }

style.css

Layout với HTML5

<header> <h1>Header</h1> </header>

<nav> Link 1<br>Link 2<br>Link 3<br> </nav>

section { background-color:#aaffaa; width:290px;

height:300px; float:left; padding:5px; }

footer { background-color:darkgreen; width:400px; color:white; clear:both; text-align:center;

padding:5px; }

style.css

RWD

thước khác nhau

máy tính bảng

<div class ="nganh">

<h2>Ngành Công nghệ Thông tin</h2>

<p> </p> </div>

<div class ="nganh">

<h2>Ngành CĐ Công nghệ Thông tin</h2>

RWD - Tự thiết kế

 Xem trên cửa sổ trình duyệt có kích thước khác nhau

RWD - Dùng W3.CSS

<!DOCTYPE html>

<html lang ="en-US">

<head>

<meta charset ="utf-8">

<meta name ="viewport"

content ="width=device-width, initial-scale=1">

<link rel ="stylesheet"

RWD - Dùng W3.CSS

<div class ="w3-row-padding">

<div class ="w3-third w3-yellow">

<h2>Ngành Kỹ thuật phần mềm</h2>

<p> </p>

</div>

<div class ="w3-third w3-orange">

<h2>Ngành Công nghệ Thông tin</h2>

<p> </p>

</div>

<div class ="w3-third w3-red">

<h2>Ngành CĐ Công nghệ Thông tin</h2>

<p> </p>

</div> </div>

</body>

</html>

RWD - Dùng W3.CSS

Tìm hiểu thêm về W3.CSS: http://www.w3schools.com/w3css/default.asp

Form

 Form là vùng trong trang Web có khả

năng tương tác với người xem

 Là giao diện để thu nhận dữ liệu từ

người dùng chuyển đến server

 …

Ví dụ về form

Form

bên trong nó

 Thuộc tính

(submit) từ form để xử lý

hoặc GET)

Form

Phương thức truyền dữ liệu

 GET

 POST

Phần tử select

dạng combobox hoặc listbox

Nhãn

phần tử

 <legend> nhãn của khung

Điều khiển phần tử trên form