Lập trình trong thương mại điện tử

Popular Websites: Google About Google Google is best known for its search engine, although Google now offers a number of other services.. Its founders Larry Page and Sergey Brin star

Biên

www.hutech.edu.vn

*1.2022.CMP2027*

tailieuhoctap@hutech.edu.vn

I

NG D N IV

BÀI 1: 1

1.1 WEB PAGE 1

1.2 PHÂN TRANG WEB 2

2

1.2.2 Tr 2

1.3 WEBSITE 3

1.4 URL 3

1.5 TÊN (DOMAIN NAME) 4

1.6 DNS 5

1.7 HOSTING STORAGE 7

TÓM 10

CÂU ÔN 10

CÂU 10

CÂU NHÓM 13

BÀI 2: 14

2.1 QUAN 14

14

17

19

20

21

23

24

25

2.2 CÁC HTML THÔNG 26

26

28

dòng 29

30

2.2.5 Danh sách 31

35

39

41

2.3 PHÂN NHÓM CÁC 45

46

46

TÓM 49

CÂU ÔN 49

CÂU 49

BÀI TÌNH 52

BÀI 3: T NG QUAN V CSS 53

3.1 KHÁI QUÁT CSS 53

3.1.1 CSS là gì? 53

56

56

3.2 KHAI CSS 56

57

57

3.2.3 CSS bên ngoài (External CSS) 58

3.3 CÁC QUY CSS NÀO? 60

3.4 60

61

61

61

3.4.4 ID selectors 62

62

63

63

63

64

64

3.5 CÁC GIÁ MÀU 65

3.5.1 Tên màu 65

3.5.2 Mã HEX 66

3.5.3 Mã RGB 66

3.5.4 Mã HSL 66

3.6 CÁC GIÁ KÍCH 67

67

67

67

3.7 CÁC TÍNH THÔNG 67

TÓM T T 72

CÂU H I ÔN T P 72

CÂU H I TR C NGHI M 72

BÀI H C TÌNH HU NG 75

BÀI 4: CÁC K THU T KI M SOÁT TRONG CSS 76

4.1 SOÁT 76

4.1.1 .76

77

77

77

4.1.5 .77

78

78

78

78

78

4.2 SOÁT 79

79

79

4.3 KI SOÁT KÍCH 80

80

82

4.4 SOÁT 84

4.5 KI SOÁT 84

85

86

4.6 SOÁT CÁCH 87

87

90

4.7 SOÁT VÀ TRÍ 90

91

91

93

TÓM T T 96

CÂU H I ÔN T P 96

CÂU H I TR C NGHI M 97

BÀI H C TÌNH HU NG 99

NG L N T 100

5.1 TRÌNH VÀ XÂY WEBSITE 100

100

101

104

108

TÓM T T 114

CÂU H I ÔN T P 114

CÂU H I TR C NGHI M 114

CÂU H I TH O LU N 116

PH L C 118

TÀI LI U THAM KH O 122

c tiêu chính c a tài li u này n m trong khuôn kh sau:

li u HTML

- Làm ch các k thu t trong HTML và CSS c làm vi c cá nhân (riêng l ,

1 Máy tính (Computer)

d ng máy tính trong quá trình biên so n các tài li u HTML, vì v y trang b m t máy tính ph c v cho môn h c này là yêu c u t t y u

Windows, Linux, Mac

m t trình duy t web

2 Trình duy t web (Web browser)

n trên web)

Tuy nhiên, v i khuôn kh n i dung c a môn h c, chúng ta s không s d ng các lo i

3 Trình biên t p mã ngu n (Code Editor)

nh d ng có th th c hi n vi c chèn hình nh vào tài li u và in n tài li u

trên Mac OS

nh ng l i ích trong quá trình vi t mã, chúng ta nên s d ng m t trình biên t p mã

c a m t l p trình viên, có m t s ph i tr phí, m t s mi n phí Có th k tên m t vài

M i m t ph n m m chuyên d ng t c

thu t ng

biên t p mã ph c v cho môn h c

N I DUNG H C PH N

ng, website, URL, tên Mi n, DNS, Hosting storage

bi u; (3) Phân nhóm các ph n t g m phân nhóm n i dòng và phân nhóm c p ph i Bài 3: T ng quan v CSS: trình bày nh ng n i dung khái quát v

bao g m CSS n i tuy n; CSS c c b ; CSS bên ngoài; cách th c vi t các quy t c CSS;

thông d ng trong vi c ki m soát vi c trình bày b ng, danh sách và n n, m t s khác

Bài 4: Các k thu t ki m soát trong CSS: trình bày nh ng ki n th c và k

soát b c c và v trí;

BÀI 1:

M C TIÊU BÀI H C

-

chung và l n t nói riêng

- c t ch , t ch u trách nhi m: có tinh th n trách nhi m, ch ng h c

t p, làm vi c sáng t o; cách phát hi n v và x lý trong gi i bài toán b ng

(hosted) trên các máy ch web (web server) và có th truy c p thông qua Internet

1.2 PHÂN LO I TRANG WEB

ch , trang liên h , trang thông tin s n ph

1.2.1

nhà biên t p ph i biên so n l i n i dung m i, t i lên máy ch tr l

Quá trình này có th di n ra ngay t i trình duy t ho c trên các máy ch web, tùy

i dung)

1.3 WEBSITE

Website là m t t p h p các trang web có URL thu c v m t tên mi n (domain)

ho c tên mi n con (subdomain) trên World Wide Web (www) c a Internet

Tuy nhiên, th c t thì chúng ta th nh tho ng v n g i nh m là trang web khi mu n

doanh nghi p, website cá nhân, website tin t c, web giáo d c, website t ch c t

1.4 URL

scheme domain port path query fragment

Giao th c ph bi n nh t cho các trang web là HTTP/HTTPS, m t s các giao th c

1.5 TÊN MI N (DOMAIN NAME)

Tuy nhiên hi c áp d ng r ng rãi

a ch IP v n là m t dãy s r t khó nh ng th i, nhi u website khác

t ch c và qu n lý m t cách chính xác các tên mi n, các nhà cung c p tên

mi n s s d ng m t h th ng máy tính g

1.6 DNS

DNS (vi t t t c a c m t Domain Name System) là h th ng phân gi i tên mi n

H th ng này s cho phép thi t l p các liên k t gi a m t tên mi n và m t IP c a máy

i m t b n ghi s gi nhi m v khác nhau

Theo m nh, sau khi mua m t tên mi n t m t nhà cung c p, thì các b n ghi

mã ngu n website t i m t nhà cung c p khác có tên là VtechWeb ch ng h n, và nhà cung c p này cho ta bi t thông tin máy

c các l i ích t nhà cung c p này (m c dù r ng ta bi t r ng nhà cung c p này không

b n ghi DNS cho tên mi n c a mình sang h th ng DNS c a nhà cung c p ng d ng web VtechWeb

p tr l i vào trang qu n lý tên mi i NameCheap

ki n th c v n hành m t máy ch thì ta có th hoàn toàn mua

ho c xây d ng m t máy ch riêng cho chúng ta

u ngu n tài chính có h n, ho c chúng ta không có b t k m t ki n th c nào v xây d ng và v n hành máy ch thì chúng ta bu c ph i tìm ki m và ch n l a

ng cho t t c t truy xu t vào ra c c

i dùng hay trên World Wide Web (không gian website trên Internet) Có hai

ng (request)

trúc tin nh n, máy ch s xem xét tài nguyên này có t n t i hay không? N u tài

d li u làm vi c Sau khi quá trình phân tích và thu th p này hoàn t t, m t tin nh n

n chu n b hi n th , trình duy t s phân tích xem d li u tr v là lo i tài

li u có th hi n th trên trình duy t hay không?

JavaScript) thì trình duy t s ti n hành th c thi k ch b

t tài nguyên thông tin trên World Wide Web hoàn t t

N i dung c trình bày nh ng n n sau:

qua s giao th c truy n t i

D

âm thanh

D

Câu 4:

web

C Biên so n m t cách th công d a trên các k thu t thi t k b c c và n i dung

Câu 6:

A Scheme -> domain -> port -> query -> path -> framgment

B Scheme -> domain -> path

C Scheme -> domain -> port -> path -> framgment -> query

D Scheme -> port -> domain -> path -> query -> framgment

C

D T t c các n i dung trên

qu ng bá và kinh doanh c a các doanh nghi p, cá nhân Các b n hãy cùng th o lu n

thi t l p các ngu n tài nguyên nào?

hosting storage, trình duy t web

HTML (vi t t t c a Hyper Text Markup Language Ngôn ng

World Wide Web Consortium (W3C)

Phiên b n m i nh t c a ngôn ng này là HTML5 Có hai phiên b n HTML v n còn

ph bi n khác mà chúng ta có th g p ph i M t là HTML 4.01, phiên b n chính cu i

m liên quan, v.v

nh là vi c ta thêm các th ch ra c u trúc c a tài li u s c trình bày ch

tính c a ta (ví d p vào n u

v i b t c tên t p tin nào mà b n mu n v i ph n m r

Chúng ta ch t tên t p tin v i các ký t Latin - Alphabet và không ch a các

ký t c bi t hay kho ng tr t URL có ch a các ký t c bi t hay

kho ng tr ng s gây ra r t nhi u phi n toái v sau

<p>Google is best known for its search engine, although Google now

offers a number of other services.</p>

<p>Google's mission is to organize the world's information and make it

universally accessible and useful.</p>

<p>Its founders Larry Page and Sergey Brin started Google at Stanford

duy t Google Chrome

Hình 2.1: SEQ Figure \* ARABIC 1

2.1.2 Th và ph n t

M t c p th và n i dung mà chúng bao g c g i là m t ph n t Trong ví d

u m t ph m vi n i dung mà trình duy t c n ph i hi n th nó theo

(paired tag)

Ngoài ra trong ví d trên, ta phát hi n có m t th không h có th

u này là do cách vi t th hai tuân th quy t c nghiêm

Th này t ch ra v trí c n trình bày m t ph n t th

Ti p theo, chúng ta còn th y r ng các ph n t trong tài li u có th bao b c l ng

2.1.3 Thu c tính c a th

<a href="http://www.Google.com/">Click here to visit Google's Web site.</a>

cho ph n n i dung c a tài li u

M t th HTML có th mang r t nhi u thu c tính ch không ph i là duy nh t, ch

c n phân tách các thu c tính (và giá tr c a nó) v i nhau b i t i thi u m t kho ng cách Ví d sau cho ta th y cách khai báo nhi u thu c tính cho th :

<a title="Trang ch Google" href="http://www.google.com/"> </a>

Giá tr c a thu c tính có th c bao b c trong c c p d u nháy kép (") ho c

ng d c phép m b

b c c l i

2.1.4 Ph n t c p kh i và n i dòng

có th thu c m t trong hai lo i:

<p><strong>Block-level elements</strong> always start on a new line

The <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> elements

will not sit on the same line, whereas the inline elements

flow with the rest of the text.</p>

</body>

</html>

Hình 2.2 minh h a k t qu c n mã trên khi hi n th trên trình duy t Google Chrome

Hình 2.2: SEQ Figure \* ARABIC 2

n t trong dòng

Nói m t cách chính xác, các ph n t trong dòng có th không ch a các ph n t

kh i và ch có th xu t hi n trong các ph n t c p kh i (Vì v y, b n không nên dùng

are treated as a single space This is known as white

space collapsing, and the big spaces between some of the

It also demonstrates how the browser will treat multiple

carriage returns (new lines) as a single space, too.</p>

</body>

</html>

K t qu hi n th trên c a s (hình minh h a [Hình 2.3]) cho ta th y r ng, dù ta c

c thu g n l i b ng m t kho ng tr ng duy nh t mà thôi

Hình 2.3: SEQ Figure \* ARABIC 3

Vi c thu g n kho ng tr ng có th c bi t h u ích vì nó cho phép ta thêm các

khi xem tài li u trong trình duy t Ví d , ta có th s d ng nh ng kho ng tr ng này

nó có hi u qu trong vi c hi u mã ngu n r t nhi u (N u ta mu n duy trì vi c

nh vùng thân c a các thông tin s hi n th trong

c a s trình duy t, t c là t t c các n i dung có th th y ho c nghe c a m t trang

tài li u HTML ch n m trong hai khu v c Ho c là n m trong ph m vi c p th

mang nhi m v làm cho trình duy t bi t các quy t c c n tuân theo khi hi n th tài li u

a phiên b n này Sau khi b sung th khai báo này, tài

-

-

-

(<hr /> thay vì <hr>)

Ngoài ra, ta th y r ng các ký t d u nh (<), d u l n (>), d u chéo lên (/), nháy

n i dung c a chúng ta có các ký t này, ta ph i thay th b ng các th c th ký t

2.2 CÁC PH N T HTML THÔNG D NG

bày tài li u HTML c a chúng ta

2.2.1

Hình 2.4: SEQ Figure \* ARABIC 4

Trong ví d bên trên, ta th y có m t ph n t <meta /> n m trong ph n t <head>

T m th i ta s b qua nó Ta s nghiên c u sau trong m t ph n n i dung khác

Trong chi c SEO, các c có tác d ng không ít,

vi c v n d ng các ph n t c khuy n khích

n, ta s d ng ph n t <p> Khi hi n th trên trình

Hình 2.5: SEQ Figure \* ARABIC 5

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

</html>

<p>The content below appears to be

separate paragraphs of text

It's not really, it just looks

Hình 2.6: SEQ Figure \* ARABIC 6

duy t Google Chrome

M c dù hai ph n t c khi n n

n n i ti d ng ph n t r ng, chúng ch có tác d ng ng t dòng ch không t n m i

2.2.4 In (vi m, nghiêng, g ch chân

ng khi chúng ta mu n thu hút góc nhìn vào m t ph n n i dung c a tài

<h1>Fine-tuning your text.</h1>

<p>In this paragraph, <strong>some

elements are bold</strong>,

<em>some are italicized</em>

<u>and some are

2.2.5 Danh sách

Có nhi u lý do khi n ta có th mu n thêm danh sách vào các trang c a mình, ví d

n i dung nêu lên trình t các công vi c ph i làm ho c m t danh sách các thông s

k thu t c a m t s n ph m Ta có th t o ra lo i danh sách ph bi n sau trong HTML:

-

-

(1) Danh sách không có th t

item) Hãy xem xét ví d

<body>

<ul>

<li>Point number one</li>

<li>Point number two</li>

<li>Point number three</li>

<body>

<ol>

<li>Point number one</li>

<li>Point number two</li>

<li>Point number three</li>

duy t Google Chrome

t <ol>

Ví d , ta có th ch nh giá tr b u c a danh sách v i vi c áp d ng thu c tính

n t

<body>

<ol start="4">

<li>Point number one</li>

<li>Point number two</li>

<li>Point number three</li>

<li>Point number one</li>

<li>Point number two</li>

<li>Point number three</li>

Do ph n t <li> là m t th c p, nên ta hoàn toàn có th t n d ng nó trong vi c

l ng ghép thêm các danh sách con vào trong m

<body>

<ol type="1">

<li>Lower alpha sub-list

<ol type="a">

<li>Point number one</li>

<li>Point number two</li>

<li>Point number three</li>

</ol>

</li>

<li>Unordered sub-list

<ul>

<li>Bullet point number one</li>

<li>Bullet point number two</li>

<li>Bullet point number three</li>

</ul>

</li>

</ol>

</body>

K t qu c a ví d trên khi hi n th trên trình duy t Google Chrome s

minh h a [Hình 2.12]

Hình 2.12: SEQ Figure \* ARABIC 12

2.2.6 Liên k t tài nguyên

<body>

<p>Click <a href="https://vtechweb.com">here</a>

to go to VtechWeb Official Page</p>

</body>

Hình 2.13: SEQ Figure \* ARABIC 13

Nhi u nhà thi t k d ng hình nh bên trong ph n t

chúng ta s th y trong ph n n i dung theo

hãy ki m soát th t t t các kho ng tr ng n m trong ph n t này

chu t trên ph n t liên k t này, m t chú gi i s xu t hi n ch a n i dung c a thu c

u này có th h u ích n u chúng ta s d ng hình nh cho m t liên k t

Hình 2.14: SEQ Figure \* ARABIC 14

Quay tr l i v i thu v a r i, chúng ta th y giá tr c a nó

là m t URL Tuy nhiên, ngoài là m t URL, giá tr này mà nó còn có th mang m t trong nh ng n i dung sau:

Trên th c t , c u trúc c a m t website không ph i ch có các t p tin tài nguyên,

-

m neo trên trang

<p>Click <a href="javascript:void(0);">here</a>

có th thêm hình nh vào tài li u, ta s d ng ph n t <img /> và cung c p

duy t Google Chrome

Hình 2.15: SEQ Figure \* ARABIC 15

-

-

hi i v i ph n t <a>, do v y ta không nh c l i n a