Đề tài Xây dựng trang web cá nhân HTML và CSS

Trang 1

v— OCR YC DCR YC DC YC DC YC DC YD YC DC YD YD YD YD YD YD YD DY DIK) < 4 Luan van Đề tài: XÂY DỰNG

Trang 2

MUC LUC

0908.9827.000 .Ô 3 CHƯƠNG I: CƠ SỞ LÝ THUYT 2 55+ S2*22*‡vtzxtzvertersersrrered 5

1.1 TÔNG QUAN VỀ NGÔN NGỮ HTMIL .-2 6 S2 xxx £ e4 5

1.1.1 GiGi thigu v6 HIML wocecsesessessssesssssesesssseesessssseseeseseesesseneaseassaesesseesees 5

1.1.2 Trang mã nguôn HTML và trang Yf€b - -s- sskk xe sex xe ees 5 NEW 2n (09.008 an 6

1.1.4 Cấu trúc của một trang IHTÌMI -s- se sex sex kExx cv ke seseereed 7

I9 11.1 1 , nang 7

1.1.6 Các thẻ định cấu trúc tài liIỆu - ccc cà ccteetreettrerterrrererrree 8

NZã 29,1 .16 an neee ẢẢ Ỏ.Ỏ 9

1.1.8 Thẻ tạo link (liên Đ:Ế[)) «<< ke SE kề E1 ng ve, 11

1.1.9 Thẻ tạo ƒframe (KÙiHH) - ccc Y1 1 05 19 05 8 n9 ree 12 NI NƯL N6 nh nee< 12

]l.1.11 Thẻ fqO (HH SĨCÌÏH . 2G CC co CS SH SE SH KH Y9 K9 nu cv 14 ].]1.12 Thẻ fAO FFOFTN CC cc CS SH HE SE 9 ng nu 94 17

INNELWI 5 7x 1 n6 21 In ¡9 1 15 an eenẦ ÔỎ 21

1.2 TÔNG QUAN Về CSS - G «Sa SE E1 SE Sư Sư ng 123 xe 22

NCT n6 dau 22

1.2.2 Đặc tính Của CS Ăn ng ng nu tp 23

1.2.3 Các thuộc tính cơ bản trong CS .ceccscss s53 13555 9355 5e 23

CHƯƠNG 2: XÂY DỰNG TRANG WEB CÁ NHÂN . -:: 28 2.1 THÊ NÀO LÀ MỘT WEBSITE7 + ©2++c+vetxrterersrrerrieo 28

2.2 QUY TRÌNH THIẾT KỀ 1 WEBSITE - 6 £+S2 £Eese eEeEs x2 28

2.3 XÂY DỰNG 1 TRANG WEB TỪ 1 THIẾT KẾ CÓ SẴN 30

2.3.1 Chọn một mẫu tỈẾt ẰẾ «kg ng vá E111 111811111 1e vrs 30

2.3.2 Chuyến mẫu thiết kế sang trang web hrml -s- se ceceeeses 30

2.3.3 Các bước Cố Ï@1})OẮ - « s- ke ke tk tk E11 TT ng v11 cọ 31

2.3.4 Các cơng cụ trong PhOfOSÌOJDO c cà S11 115955518 555 31 2.3.5 Layer trong PhOfOSHOD .- c3 39911 11580355555 9 9£ v4 33

2.3.6 Phân tích bố cục Ì WesÏf€ - sec vt 111131111611 vrs 34

2.3.7 Sử dụng công cụ slice fool hoặc crop để cắt các thành phan giao

CÏÏỆÌHH À G0 gu KH hi KH c9 0 0009 608 09.0 8699 36

Trang 3

2.4 XÂY DỰNG TRANG WEB CÁ NHÂN .-.- +2 s se sec se sszssz2 39

2.4.1 Thế nào là một website cả nhÂW? co ca tk xxx ra 39

2.4.2 Các cách xây dựng Ï website cá HhÂH ào G3513 s55 40

2.5 XÂY DỰNG TRANG WEB CÁ NHÂN TỪ MẪU GIAO DIỆN 41

2.5.1 Chon giao điện Cho VU€ Sif€ c se se 091991911556 55518555 41

2.5.2 Cắt giao diện thành nhiều thành phần nhỏ trong trang web 42

2.5.3 Viết mã HTMÍL - c5 tt} +rSEE+tEESEESEtErtrrtkerertrrrrrrrerrrrrro 43 2.5.4 Viet MA CSS W0 nh na 47

2.5.5 Két qua hodnn than cecccccccccssssssssssscssescescecsecossssscsssecsccescsscaveacasenes 49

;41080897 90011 ‡44 58 V.900)2009:7 984.7 (001557 a 59 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN .: 5-55 ss+ssc5e2 60

LOI NOI DAU

Trang 4

vậy, việc đào tạo đội ngũ kỹ sư công nghệ thơng tin có chất lượng đòi hỏi phải

được chú trọng và đầu tư đúng mức

Xã hội và kinh tế phát triển địi hỏi cơng nghệ cũng phải phát triển Công

nghệ phát triển, con người ngày càng phát minh ra những thiết bị công nghệ số thông minh giúp đỡ con người về rất nhiều mặt trong cuộc sống Trong thời đại ngày nay, đất nước ta đang hội nhập vào WTO cùng với sự phát triển nhanh chóng của cơng nghệ thông tin được áp dụng trên mọi lĩnh vực của cuộc sống

như kinh tế, chính trị, văn hóa xã hội, tất cả đều cần có cơng nghệ thơng tin

Như hiện nay chúng ta đã biết lập trình và thiết kế Website có thể được coi là

ngành “hot” ma hiện nay chúng ta đang rất quan tâm Ngày nay xã hội phát triển nhu cầu về việc sở hữu riêng cho mình một website cá nhân là vô cùng

lớn Hầu hết ai cũng có nhu cầu sở hữu một website cá nhân hay một blog để chia sẻ thong tin, hoc tap, viết nhật kí, lưu lại những hình ảnh, video về gia đình

bạn bè Năm được nhu cầu đó em đã quyết định chọn đề tài: “Xây dựng trang web cá nhân bằng HTML và CSS” cho đợt thực tập chuyên ngành lần này Trong quá trình triển khai đề tài có gặp một số vướng mắc nhưng đã được một số thầy cô giáo và các bạn cùng lớp giúp đỡ nên đề tài đã hoàn thành đúng thời hạn và kết quả ban đầu cũng khá hoàn thiện

Em xin chân thành cảm ơn giáo viên hướng dẫn thầy:Lê Khánh Dương- Bộ môn: Mạng và Truyền Thôngđã giúp đỡ và chỉ dẫn em hoàn thành bài báo cáo này

Trang 5

CHUONG 1: CO SO LY THUYET

1.1 TONG QUAN VE NGON NGU HTML

1.1.1 Giới thiệu về HTML

HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản)

là một sự định đạng để báo cho trình duyét Web (Web browser) biét cach dé

hiển thị một trang Web Các trang Web thực ra khơng có gì khác ngoài văn bản cùng với các thẻ (tag) HTML được sắp xếp đúng cách hoặc các đoạn mã dé

trình duyệt Web biết cách để thông dịch và hiển thị chúng lên trên màn hình

Tên gọi ngôn ngữ đánh dẫu siêu văn bản có ý nghĩa như sau:

Đánh đấu (Markup): HTML là ngôn ngữ của các thẻ đánh đấu - Tag Các thẻ này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình

Ngơn ngữ (Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuy nhiên đơn giản hơn Nó có cú pháp chặt chẽ để viết các lệnh

thực hiện việc trình diễn văn bản Các từ khố có ý nghĩa xác định được cộng

đồng Internet thừa nhận và sử dụng Ví dụ b = bold, ul = unordered list,

Van ban (Text): HTML đầu tiên và trước hết là để trình bày văn bản và

dựa trên nền tảng là một văn bản Các thành phần khác như hình ảnh, âm thanh, hoạt hình đêu phải "căm neo” vào một đoạn văn bản nào đó

Siêu văn bản (HyperText): HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet Nó có tác dụng che dấu sự phức tạp của Internet đối với người sử dụng Người dùng Internet có thể đọc văn bản mà không cần biết đến văn bản đó nằm ở đâu, hệ thống được xây đựng phức tạp như thế nào

HTML thực sự đã vượt ra ngồi khn khổ khái niệm văn bản cô điển

1.1.2 Trang mã nguồn HTML và trang Web

Trang 6

quy ước, tât cả các tệp mã nguôn của trang siéu van ban phai co duoi 1a -html

hoặc htm

Khi trình duyệt (browser) đọc trang mã nguồn HTML, nó sẽ địch các thẻ lệnh và hiển thị lên màn hình máy tính thì ta thường gọi là trang Web Vậy trang web không tổn tại trên đĩa cứng của máy tính cục bộ Nó là cái thể hiện của trang mã nguồn qua việc xử lý của trình duyệt Như sau này ta sẽ thấy, các trình duyệt khác nhau có thể hiển thị cùng một trang mã nguồn khơng hồn tồn giống nhau

Nói soạn thảo siêu văn bản tức là tạo ra trang mã nguồn HTML đúng quy

định để độ duyệt hiểu được và hiển thị đúng Sử dụng HTML để soạn thảo các

trang siêu văn bản, về nguyên tắc cũng không khác mấy so voi ding cac bộ soạn thảo văn bản thông thường Chẳng hạn, trong soạn thảo văn bản thông thường, để làm nỗi bật các tiêu đề ta phải đánh dấu nó và chọn cỡ to, căn chính giữa Chương trình soạn thảo văn bản sẽ chèn các dấu hiệu thích hợp (ta khơng

nhìn thấy được) vào đầu và cuối đoạn tiêu đề được chọn đề thể hiện nó theo yêu

cầu Với HTML cũng tương tự như vậy

1.1.3 Thẻ (tag) HTML là gì?

Đề biếu diễn thơng tin trên trang web, www sử dụng ngôn ngữ HTML để

trình bày thơng tin Mỗi thông tin chỉ tiết sẽ được trình bày và định dạng dựa

vào một cặp thẻ (tag) HTML tương ứng

- Mỗi cặp thẻ bao gồm: thẻ mở và thẻ đóng Tên thẻ mở và thẻ đóng giống

nhau và được đặt tỏng cặp dau <tên thẻ>

- Trong thẻ mở có thể có thêm các tham số phía sau tên thẻ - Trong thẻ đóng có thêm dấu / phía trước tên thẻ

- Dữ liệu cần trình bày đặt trong cặp thẻ mở và thẻ đóng

Trang 7

Câu trúc chung của một thẻ (tag) HTML như sau:

<Ten The thamsol= giatril thamso2=giatri2 > Thông tin cần trình bày

</Ten The>

Ví dụ:

<I>cht nghiéng</I>

<Ù>chữ gạch chân<Ù>

<B><TI>chữ vừa đậm vừa nghiêng</TI></B>

1.1.4 Cấu trúc của một trang HTML

<title>Tiêu để trang web</title>

</head>

<body>

Nội dung trang web

</body>

</html>

1.1.5 Cúc quy tac chung

Một số điều cần lưu ý khi soạn thảo siêu văn bản bằng HTML:

- Nhiều dâu cách liên nhau cũng chỉ có tác dụng như một dâu cách Bạn

phải sử dụng thẻ để thể hiện nhiều dấu giãn cách liền nhau

- Gõ Enter để xuống dòng được xem như một dấu cách, để xuống hàng thì

chúng ta phải sử dụng thẻ tương ứng

- Có thể viết tên thẻ không phân biệt chữ in thường và in hoa

Trang 8

Nói chung, quy tắc viết các kí tự đặc biệt trong HTML là tên quy định của kí tự nằm giữa dẫu ampersand - & va dau chấm phẩy ': '&tên quy định;

5 ký tự đặc biệt hay dùng Ký tự Cách viết < &Ït; > &ø†; “ " Ky tu trang   & &

Có thể chèn các địng bình luận, chú thích vào trang mã nguồn bằng cách đặt giữa cặp dẫu chú thích <l và > Trình đuyệt sẽ bỏ qua không xét đên phần mã năm giữa cặp dâu đó:

<†1 Dịng chú thích >

1.1.6 Các thẻ định câu trúc tài liệu

— <HTML></HTML> — <HEAD></HEAD> — <TITLE></TITLE> — <BODY></BODY>

Các tham sô của thẻ

Tham số Ý nghĩa

LINK Chỉ định màu của văn bản liên kết

Trang 9

VLINK Chỉ định màu của văn bản siêu liên kết đã mở

BACKGROUND | Chi dinh dia chỉ ảnh dùng làm nền

BGCOLOR Chi dinh mau nén

TEXT Chỉ định màu của văn bản trong tài liệu SCROLL Yes hay No có hay khơng có thanh cuộn

TOPMARGIN Lễ trên RIGHTMARGIN | Lềphải 1.1.7 Các thẻ dịnh dạng ` “eo ` s+ - <P></P>

Cac thé dinh dang dé muc

- <BR>

- <B>,<I>,<U>,<S>

- <SUP>chisé trén</SUP>,<SUB>chis6 duéi</SUB>

- Can 1é vin ban trén trang web: tham số ALIGN, thẻ <CENTER>

Dinh dạng Font chữ:

Thẻ <FONT></FONT>:

<font size="2" face="Verdana">This is a paragraph </font> Khi muốn thay đổi cỡ font thì dùng

Trang 10

Để làm cho trang Web thêm sinh động, nhiều khi ban muốn trình bày nó

bằng nhiều kiểu font khác nhau, bạn hãy sử đụng thuộc tính face của tag <font>

để thực hiện việc đổi font chữ

trong đó fontname là tên của font chữ có trên máy tính của người đọc trang Wcb

Muốn thêm màu sắc cho chữ, ta thêm thuộc tính color vào tag font Ví dụ:

wv wv aA A

Sau mirc tiéu dé

Khi trình bày một trang Wcb, đôi khi bạn phải cần đến các tiêu đề theo các

kích cỡ, phơng chữ khác nhau HTML có các tag để thực hiện việc nay.Dé tao

một tiêu đề chúng ta dùng <hx> Tên tiêu đề <hx>

Trong đó x là một số có giá trị từ 1 đến 6 chỉ kích cỡ tiêu đề Sau đây là ví

đụ cho các cỡ của tiêu để

Tiêu đê cỡ Tiêu để cỡ 2

Tiêu đề cỡ 3

Tiêu để cỡ 4

Trang 11

Tiêu đề cỡ 6

1.1.8 Thẻ tạo link (liên kết)

<a href=url name=name tabindex=n title=title target= blank| self|tén frame> dong văn ban </a> Trong đó:

- href Địa chỉ của trang Web được liên kết, là một URL nào đó

- name Đặt tên cho vị trí đặt thẻ

- tabindex Thứ tự di chuyển khi ấn phím Tab

- title Vin ban hién thị khi di chuột trên siêu liên kết

- target Mở trang Web đ-ợc liên trong một cửa số mới (_blank) hoặc trong cửa số hiện tai (_ self), trong mét frame (tén frame)

Ghi chu:

Néu dat thuéc tinh href= cua thé <a> gia tri mailto:address@domain thi

khi kích hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình duyệt

Vi du:

Liên hệ: Dai hoc CNTT và Truyền Thông <a href="mailto:contact@ictu.edu.vn” > Email: contact@ictu.edu.vn

</a>

Điện thoại: 02803456789

</address>

Khi nhẫn vào dòng chữ Email: contact@ictu.edu.vn(dòng chữ này sẽ xuất hiện giống như các siêu liên kết khác) chức năng thư tín của trình đuyệt sẽ được

kích hoạt và địa chỉ thư điện tử contact(@1ctu.edu.vnsẽ được chèn vào địa chỉ

Trang 12

1.1.9 Thé tao frame (khung)

Có thể thực hiện việc chia cửa số trình duyệt ra làm nhiều khung khác

nhau gọi là #ame Trong mỗi khung cho phép hiển thị một trang web khác nhau

</frameset>

Ghi chu:

- Thé <frame> ding dé tao ra cdc frame cu thé

- <famesets> được viết để chứa các thẻ <ffame> trong nó (ít nhất 2 ERAME trở lên)

- <nofữames> để hiển thị thông báo trong trường hợp trình duyệt khơng hỗ tro FRAME

- Lưu ý cách truyền giá trị cho thuộc tinh target

1.1.10 Thẻ chèn ảnh

Tag <img /> ding dé nhúng một image vào văn bản HTML Tag <img /> có 2 thuộc tính cần thiết là src và alt, trong đó: src: đường dẫn tham chiếu tới image

alt: được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc

không có săn) Chú ý là alt không phải dùng để hiển thị khi đi chuyển chuột lên

image, muốn văn bản hiển thị khi đi chuyển chuột lên image thì ta dùng thuộc

tinh title thay thé

Ví dụ : Để chèn một ảnh có tên 1a doiche.jpg ta làm như sau

Trang 13

| Firefox Y |

f” file///C:/Users/Tu %20Demo/index.html

Hình 1.1: Hién thị hình ảnh trong trang HTML với thẻ img Tag <img > cịn có thể có thêm các thuộc tính để hiến thị văn bản so với hình ảnh Thuộc tính align với các giả trị khác nhau sẽ cho ta các hiệu ứng như sau

1 align = top 2 align = middle 3 align = bottom

Vi du:

<img src="a.jpg" alt="Ché Thai Nguyén" align="top" /> Tag img với thuộc tính là algin = top <br /><br />

Trang 14

| Firefox Y |

_ } file///C:/Users/Tu %20Demo/index.html

Tag img với thuộc tính là algin = top

Tag img với thuộc tinh 1a algin = middle

Tag img với thuộc tinh la algin = bottom

Hình 1.2: Thuộc tính align trong thẻ img voi cac giả trị khác nhau Ngồi ra thuộc tính này cịn có một số giá trị khác như: TextTop,

AbsMiddle, AbsBottom va Baseline

Trang 15

Danh sách được dùng để trình bày thơng tin thành một dạng dễ đọc hơn

Chẳng hạn để tạo ra các bảng chỉ mục, nội dung của một dãy các tài liệu hay

các chương.HTML có hai kiểu danh sách, danh sách có thứ tự (ordered) và danh sách khơng có thứ tự (unorder)

Danh sách không có thứ tự

Danh sách khơng có thứ tự có các mục bắt đầu bằng các "butllet" hoặc các

kýhiệu đánh đấu ở trước Để tạo ra danh sách khơng có thứ tự ta đùng các tag Sau:

<ul>

Ví dụ khi trong phần body của fđle HTML của bạn có đoạn như sau: <h3>

Các bộ môn trong khoa Công nghệ Thông tin<br /> Trường Đại học Công Nghệ Thông Tin và Truyền Thông

</h3> <ul>

<1i>Bé mén Khoa hoc may tinh</1li> <1li>Bộ môn Các hệ théng théng tin</li>

<1li>Bộ môn Mạng và Truyền Thông</1i>

Trang 16

Hiển thị lên trình đuyệt sẽ như sau:

| Firefox |

° } file:///C:/Users/Tu %20Demo/index.html

€- file:///C:/Users/Tuan Libe

Các bộ môn trong khoa Công nghệ Thong tin -

Trường Đại học Công Nghệ Thông Tin và Truyền Thơng

® Bộ mơn Khoa học máy tinh e Bộ môn Các hệ thống thông tin e Bộ môn Mạng và Truyền Thông e Bộ môn Công nghệ phần mềm

Hình 1.3:Ùanh sách khơng có thứ tự UL LI > Danh sách có thứ tự

Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh

số, thường bắt đầu từ "1" Để tạo ra danh sách có thứ tự ta ding cac tag sau: <ol>

<li>Chỉi mục thứ nhất</1i> =23-

Danh sách có thứ tự chỉ khác danh sách khơng có thứ tự ở chỗ thay tag <ul> bang tag <ol>

Vi du : Néu trong phan body cia file HTML có đoạn <h3>Các bước chuẩn bị để học HTML</h3> <ol>

<li>Chương trình soạn thảo văn bản trơn (như NotePad của Windows) </li>

<li>Trinh duyét Web(nhu Internet Explorer hodc Firefox) <li>Bộ sách về HTML của tap chi Internet Today

</ol>

Trang 17

W ae

£_} file:///D:/a.html

& file:///D:/a.htm| œŒ| E]- co; Ð & HA Br Các bước chuân bị đề học HTML

1 Chương trình soạn thảo văn bản trơn (như NotePad cua Windows) 2 Tnnh duyệt Web(như Internet Explorer hoặc Firefox)

3 Bộ sách về HTML của tạp chỉ Internet Today

Hình I.4: Danh sách có thứ tự QL LÍ

1.1.12 Thẻ tạo Form

Form là một yếu tố không thể thiếu để có thể giao tiếp với máy chủ Nó

được dùng đề nhập đữ liệu, lựa chọn các khoản mục, Trong quá trình liên kết

voi CGI Script, forms cho phép ban lva chon thong tin ti người dùng và lưu trữ no cho

lan su dung sau

Trong bài học này ta sẽ cách tạo form băng các tag đơn của HTML Khi tạo form, ta cần lưu ý nhất hai phần đó là tên nhận đạng (identifer) và giá trị (value) của form đó

Vị dụ : Trong hộp text box với tên là FirstName, người sử dụng gõ vào

VASC, thì đữ liệu gửi đến server là FirsName=VASC

Tag : <Form METHOD="" ACTION="">< cac tag khac ></form> nam gitra hai tag BODY

Trong đó thuộc tính METHOD có hai giá trị la POST va GET Nếu giá trị là POST, nó cho phép gửi đữ liệu từ máy Client đến Server (thường được sử dụng trong Form nhập liệu) Còn với GET thi chi duoc str dung trong Form van

Trang 18

Cac tag trong Form thường dùng chủ yếu 1a <INPUT>, <SELECT>, <OPTION>

kytu

Chúng ta sẽ lần lượt xét một số Form đơn giản như sau :

» Text Blocks : Tạo ra vùng văn bản, có thể nhập nhiều dịng ‹ Text Boxes : Để nhập vào một dong don

° Password Boxes : Form này giống Text Boxes nhưng không hiển thị các

s Radio Buttons : Các nút lựa chọn một

¢ Check Boxes : Hộp Check Boxes ° Menus : Tạo ra hộp Menu đây xuống

° Submit, Reset Buttons : Các Button để nhận thông tin và khởi tạo lại thông tin

‹ Hidden Elements : Cac yéu t6 ấn ¢ Active Images : Tạo bức ảnh kích hoạt

¢ CGI Script :Common Gateway Interface Script

Text Blocks : <textarea rows="" cols="" name=""> Text </textarea>

Trong đó cols là chiều rộng của vùng văn bản tính theo ký tự rows : chiều

cao vùng văn bản tính theo hàng Name là thuộc tính để nhận dạng, sử dụng

trong Script Cac ban luu y la Text

Blocks khong bat dau bang tag INPUT

—m

Text Boxes : <input type="text" name="” maxlengt size="" value="">

Trong đó size chỉ chiều dài của Text Boxes Maxlength, minlength chisé

ký tựtối đa hay tối thiểu có thể nhập vào

Trang 19

Password Boxes : <input type="password" minlength=""" name=""

size="">Các thuộc tính đều giống với Text Boxes

Chỉ khác là khi bạn nhập đữ liệu thì các ký tự không được hiển thị

Xin hãy cho biết mật mã :

Ví dụ:

Có thể chưa được nhiều dòng

Radio Buttons : <input type="radio" name="" checked value="">Lua

chọn value chứa đữ liệu sẽ gửi đến Server khi

Radio Button checked

lua chon | lựa chọn 2

Check Boxes : <input type="checkbox" name="" value="" checked>Lua chọn Hộp Check Boxes có các thuộc tính thành phần giống như Radio Button

thuộc tính lựa chọn là phần văn bản ghi phía saunút check box lựa chọn Í

lựa chọn 2

Menus:

</select>

Cũng giống như Text Blocks, Menu không bắt đầu tir INPUT ma là

SELECT Thuộc tính multiple cho phép bạn chọn nhiều mục, nếu khơng có thuộc tính này thì nó sẽ là một menu đây xuống Mỗi lựa chọn của bạn được mô

tả bằng các tagOPTION, và bạn có thể ngầm định là nó được chọn bằng thuộc

tính

Trang 20

Nút Submit 1a nut dé server có thể lấy thông tin từ người sử dụng Sau khi nhập liệu song, người dùng ấn vào Submit thì mọi thơng tin sẽ gửi đến server Nếu có thơng tin sai quy định thì lập tức server sẽ gửi trả lại kèm với thông tin báo lỗi

Còn nút Reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng các giá trị

mặc định

<Input type="submit" name="" value="Submit Button"> Cong ti vién thong

Céng ti thuong mại quốc tế Céng ti phan mém

CPU

Submit Button

Thuộc tính value chứa phần text hiển thị trên nút bam Ban cam lưu y nut

Reset chỉ khởi động lại các giá trị trong cùng một form mà thôi

Hidden Elements : <Input type="hidden" name="" value="">

Hidden Elements được bạn sử dụng để lưu trữ thông tin đã thu được từ

form trước đó, do đó nó có thể kết hợp với đữ liệu của form hiện tại

Ví dụ : nếu ở form trước ban đề nghị cho biết tên, bạn có thể lưu lại bởi một biến và thêm nó vào một form mới như là mét hidden element, sau đó

name sẽ được liên kết thông tin mới thu được mà không cần người dùng nhập

lại tên nhiều lần Cac Hidden Elements không bao giờ hiện trên mọi browser

đúng với cái tên của nó

Tag này có hai thuộc tính, thuộc tính name là tên của thông tin được lưu trữ, cịn value thơng tin mà bản thân nó được lưu lại

Trang 21

Thuộc tính chứa trong src chỉ ra đường dẫn tới file ảnh trên server

Thuộc tính name cho một tên Khi người dùng click vào ảnh thì tạo độ x

và y của chuột hiện hành sẽ được bổ sung vào trường name này và gửi đến server

Ví Dụ : Giả sử máy chủ muốn biết bạn từ nơi nào đến, nó cho bạn một bản đồ thế giới Bạn chỉ viếc click lên bản đồ, giả sử bạn sinh ra ở Việt nam thì chỉ việc tìm đúng nước Việt nam và click lên đó

1.1.13 Thẻ Marquee-tạo chữ chạy <marquee class=scroll

scrollAmount=scrollDelay=80 direction="kiéu cudén” width=245 height=202 align="kiéu canh">

Nội dung văn bản

</marquee>

- Class: chỉ định tên lớp đối tượng

- ScrollAmount:

- ScrollDelay: tốc độ cuộn

Reset Button

- Direction: định hướng chuyên động: up|downlleftlright

- Width, Hight: d6 rong, cao qui dinh pham vi hiển thị văn bản - Align: canh van ban: Center, middle, bottom

1.1.14 Cac thé tao bang

Trang 22

tiếp theo xây dựng các ô của hàng đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựng các phần tử của hàng thứ 2

Những tag cơ bản của bảng Đề tìm hiểu về các tag cơ bản của bảng, trước

hết ta xét ví dụ sau <table border = 1> <tr> <td> Hang 1 cét 1 </td> <td> Hàng 1 cột 2 </td> </tr> <tr> <td> Hàng 2 cột 1 </td> <td> Hàng 2 cột 2 </td> </tr> </table> 1.2 TÔNG QUAN Về CSS 1.2.1 Giới thiệu vỀ css

CSS — duoc dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ

HTML và XHTML.CSS là viết tắt của Cascading Style Sheets CSS được hiểu

một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một tài liệu Web

Tác dụng

> Han chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy

định kiểu dáng (chữ đậm, chữ ¡in nghiêng, chữ có gạch chân, chữ màu ),

khiến mã nguồn của trang web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thi, dé dàng cho việc cập nhật nội dung > Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải

Trang 23

1.2.2 Dac tinh cua CSS

s*SCS quy định cách hiển thị của các thẻ HTML bằng cách quy định các

thuộc tính của các thẻ đó (font chữ, màu sắc) Để cho thuận tiện bạn có thể

đặt tồn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở

rộng là ".css" CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một

file CSS c6 thé cho phép bạn quản lí định dạng và layout trên nhiều trang

khác nhau Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của

một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác

s* Có thể khai báo CSS bằng nhiều cách khác nhau Bạn có thể đặt đoạn

CSS cua ban phia trong thẻ <head> </head>, hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn cịn có thể đặt chúng trong từng thẻ HTML riêng biệt Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau Mức độ ưu tiên của CSS sé theo tht tir sau

- Style đặt trong từng thẻ HTML riêng biệt - Style đặt trong phan <head>

- Style đặt trong file mở rộng css

- Style mặc định của trình duyệt

Mức độ ưu tiên sẽ giảm dẫn từ trên xuống dưới

1.2.3 Các thuộc tính cơ bản trong CSS

“+ Cac van đề về văn bản và cách định dạng văn ban

Thuộc tính CSS text cho phép bạn hoàn tồn có thể quản lí được các thuộc

tính của văn bản, bạn có thê quản lí được sự ân hiện của nó, thay đơi màu

sắc, tăng hoặc giảm khoảng cách giữa các ký tự trong một đoạn, căn chỉnh việc dong hang

Trang 24

s* Các thuộc tính của text mà CSS hỗ trợ

** Đặt màu cho một đoạn văn bản

Để đặt màu cho một đoạn văn bản chung ta có thé dùng thuộc tính:

color: #mã màu;

p { color: #333333; }

s* Đặt màu nén cho đoạn văn bản

Bạn có thể đặt màu nền (backgrounđ) cho đoạn văn bản bằng thuộc tính background-color: #mã màu;

p { background-color: #FFFFO00;}

s* Căn chỉnh khoảng cách giữa các ký tự

Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi thuộc tính letter-spacmg: khoảng cách;

h3 {letter-spacing: 2em; }

hl {letter-spacing:-3em; }

s* Căn chỉnh khoảng cách giữa các dịng

Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản

p{line-height:150%; //lineheight:15px; }

s* Thêm đoạn văn bản

Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho

đoạn văn bản của bạn thêm sinh động Để tô điểm thêm cho đoạn văn bản

chúng †a sẽdùng thuộc tính text-decoration: thuộc tính;

h3{text-decoration: underline; /* Gạch chân */}

h2 { text-decoration: line-through;

/* Gach ngang*/}

Trang 25

s* Chỉnh vi tri cia doan van ban (indent)

Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí của dịng văn bản theo chiều ngang

hl {text-indent:-2000px; /*text-indent:30px;*/}

s* Điều kiến các ký tự trong một đoạn van ban

Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính text-transform: kiểu chữ;

p-.-uppercase {text-tranform:uppercase; }

p.lowercase {text-tranform: lowercase; }

p.capitalize { text-tranform:capitalize; }

s* Các thuộc tính của font chữ

Các thuộc tính về font chữ sẽ cho phép bạn thay đổi họ font (font family),

độ đậm (boldness), kích thước (size) và kiểu font (style)

s* Đặt font cho đoạn văn bản

Để đặt một loại font chữ nào đó cho đoạn văn bản thì chúng ta sẽ sử dụng thuộc tính font-family:

P {font-family: Arial, Tahoma, Verdana, sans-serif; }

Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web khơng có các font như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên

s* Đặt đoạn văn ban sir dung font nhan caption

p.-caption {font:caption}

s* Đặt kích thước font cho đoạn văn bản

Khi chúng ta muôn những đoạn văn bản hoặc tiêu đê có kích thước của

Trang 26

h3 {font-size:l2px; }

s* Đường viền và các thuộc tính của đường viền

Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt

cho đườn viền như kiểu đường viền, kích thước, màu sắc Thuộc tính này sẽ được áp dụng cho các thé HTML nhu <div>, <li>, <table>,

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là: border-color:

border-width: border-style:

¢* Thuộc tính màu của đường viền

Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính

bordercolor:

div.color {border-color: #CC0000; }

s* Đặt chiều rộng cho đường viền (border)

Nêu muôn đặt chiêu rộng của đường viên chúng ta sẽ đặt giả trị cho thuộc

tính border-width:

div.borerwidth {border-width:2px; }

* Chọn kiểu của đường viền

Bạn có thể sử dụng thuộc tính border-style dé đặt kiêu cho đường viên Chúng ta có thê gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau

div.borderstyle { border-style: sol1d; }

Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng: 1 border-top:

Trang 27

3 border-bottom: 4 border-left:

Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)

Chúng ta có thể ding phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn Giả sử chúng ta đặt thuộc tính border

của thẻ<div> với độ rộng bằng 1, kiểu solid và màu là #CC0000

Trang 28

CHUONG 2: XAY DUNG TRANG WEB CA NHAN

2.1 THE NAO LA MOT WEBSITE?

Website còn gọi là trang web, trang mạng, là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP Website có thể được xây dựng từ các tệp tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website động) Website có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau

(PHP,.NET, Java, Ruby on Rails )

2.2 QUY TRINH THIET KE 1 WEBSITE

Quy trình được chia làm 7 giai đoạn

Giai đoạn I: Thu thập thông tin khách hàng - Tìm hiểu yêu cầu thực tế của khách hàng

- Xác nhận các yêu cầu của khách hàng về trang Web và các thông tin khách hàng cung cấp

Giai đoạn 2: Giai đoạn phân tích

- Dựa vào những thông tin và yêu cầu thiết kế website của khách hàng, VOC

phân tích rõ ràng mục đích, yêu cầu, nguyện vọng của khàch hàng

- Lập kế hoạch thực hiện dự án

- Căn cứ trên kết quả khảo sát, thông tin do khách hàng cung cap VOC thiết kế lập cầu trúc cho website và thiết kế chung cho toàn hệ thống

Giai đoạn 3: Giai đoạn thiết kế

- Xem xét chi tiết yêu cầu và tiễn hành thiết kế website

Trang 29

- Kiểm tra sản phẩm đề đảm bảo tính thâm mỹ và thống nhất Giai đoạn 4: Giai đoạn xây dựng

- Xây dựng cơ sở dữ liệu dựa trên thiết kế

- Soạn thảo nội dung tài liệu, chỉnh sửa hoàn thiện nội dung rồi đưa lên trang web

- Tích hợp hệ thống: lắp ghép phân tích thiết kế, nội dung lập trình thành một

sản phẩm

- Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ

Giai đoạn 5: G1a1 đoạn chạy thử

- Tổng hợp nội dung, xây dựng hệ thống theo thiết kế - Kiểm tra và sửa lỖi

- Lắp ghép thiết kế với phần mềm, đảm bảo không sai lệch với thiết kế và phần mềm hoạt động tốt

- Chạy thử hệ thống trong vòng 01 tuần - Kiểm tra và sửa

Giai đoạn 6: G1a1 đoạn nghiệm thu

- Khách hàng duyệt dự án: khách hàng duyệt chất lượng dự án

- Đăng tải hệ thống: đảm bảo hệ thống chạy tốt

Giai đoạn 7: Giai đoạn chuyển giao

- Bàn giao cho khách hàng (có đĩa CD mã nguồn)

Trang 30

2.3 XAY DUNG 1 TRANG WEB TU 1 THIET KE CO SAN 2.3.1 Chọn một mẫu thiết kế

Nếu bạn không phải là nhà thiết kế web, thì cách nhanh và đơn giản nhất

để có một website nhìn chuyên nghiệp là sử dụng các mẫu website được làm

trước Bạn có thể tìm kiếm các mẫu web miễn phí từ rất nhiều nguồn Song Free

Templates Online là nguồn khá tin cậy vì ở đó cung cấp các mẫu web chất lượng phù hợp với các tiêu chuẩn web

2.3.2 Chuyén mau thiét ké sang trang web html

Có rất nhiều bài hướng dan chuyén tir file psd (photoshop) sang html vi du nhu trang http://izwebz.com/co cac bai huong dẫn tất chỉ tiết hay có thể tham

khảo tại địa chỉ ñ/:/nhatnghe.com/ƒforurn/showthreadphp?t=29458 Ihướng

dẫn rất chỉ tiết và đầy đủ

Việc biến một giao diện được thiết kế trong Photoshop thành HTML là một phần rất quan trọng trong thiết kế web Sau này nếu bạn muốn tự tạo giao điện cho trang web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD sang HTML là việc đầu tiên bạn phải làm Trong phần 1 tôi đã hướng dẫn bạn cách thiết kế giao diện trang web shop hoa tươi bằng photoshop Trong phần này, chúng ta sẽ sử dụng một giao diện đã

thiết kế ở phần I để thực hiện cắt lấy hình ảnh đưa lên tài liệu html Cắt giao điện web là cắt lấy hình ảnh cho tài liệu html, còn phần văn bản và phần lặp lại các bạn sẽ bỏ đi (Phần văn bản cho web các bạn sẽ xử lý ở phần

lập trình và lấy từ database)

Cắt Layout sau khi thiết kế xong giao điện của trang web là một việc làm hết sức quan trọng Đừng xem thường việc này công việc này Cho dù là đesign có đẹp đến đâu mà khi đến tay người cắt html ko tốt thì nó sẽ trở nên nham nhở Cắt Layout sau khi thiết kế xong giao diện của trang web là một việc làm hết

Trang 31

1.) Tách riêng các nút bấm ra khỏi image giao diện của trang web , việc này sẽ giúp cho bạn liên kết được nút bấm đến một trang web khác

2.) Tăng tốc độ tải website Giao diện của trang web sẽ được tải nhanh hơn nêu như bạn cắt Layout , vì những hình ảnh được cắt ra sẽ được IE tải về theo từng mảnh , nêu để nguyên một cái Image lớn như vậy thì trình đuyệt web sẽ tải về rất chậm Nếu mà trang web cuủa bạn tải về chậm thì sẽ làm người duyệt web

để nản khi họ mới truy cập lần đầu tiên

2.3.3 Các bước cắt layouf

Trước tiên bạn nên cắt cái banner trước , có người thích để nguyên cái banner

có người thì thích cắt nó ra làm nhiều mảnh , ở đây chúng ta khơng cắt nó, mà

van đề nguyên, chỉ cắt nó ra khỏi theme của web thôi

1.) Nhắn K dé str dung cong cu Slice Tool

2.) Sau do ré chudt va cat lay phan ma ban muốn cắt Vùng nào được cắt sẽ có số màu xanh hiện ra , vùng nào có số màu xám là vùng sẽ được photoshop tự động cắt Việc này không ảnh hưởng gì hết

Nguyên tắt cơ bản: Mỗi sản phẩm > I file hình Hình nền hay màu chuyển

sắc > lầy đúng bước lặp lại và lưu thành I file hình Sử dụng các định dạng hình

cho web: *.jpg, *.png, *.gif Cong cu str dung chinh:

Slice tool > vé ving chọn cho hình, mỗi vùng chọn > tạo thành | file

Slice Select Tool > chinh vung chon cia Slice tool

2.3.4 Cac céng cu trong Photoshop

Các công cụ trong Photoshop được đặt trong thanh công cụ, mỗi một cơng

cụ có một vai trị và cơng dụng riêng, trong khuôn khổ loạt bài viết này mình

Trang 32

—

Move tool (V)

" yA Slice Tool K

yA Slice Select Tool K

" ZB Eyedropper Tool I

+# Color Sampler Tool I

67 Ruler Tool I

Hand tool (H)

Zoom tool (Z)

Foreground color / Background color

Hinh 2.1: Hop cong cu trong photoshop

Move Tool (Phím tắt V): là công cụ đi chuyển các Layer (Bạn có thể hiểu là

một thành phan Text, button, .) trong file PSD

Slice Tool (Phim tat K): Day 1A céng cu kha quan trong, ching ta sé str dung công cụ này để cắt những hình anh can thiét cho giao dién web tir file PSD Eyedroper Tool (Phim tat I): Là công cụ cho phép xác định màu từ một

vùng mẫu trong file thiết kế

Foreground color/ Background color: Trong thiết kế web, chúng ta sử dụng công cụ này đê tra mã màu cho việc việt CSS

Zoom Tool (Z): Phong to / thu nhỏ cửa số ảnh làm việc

Trang 33

2.3.5 Layer trong Photoshop

Mỗi file Photoshop (PSD) chứa một hoặc nhiều layer Tất cả các layer đều trong suốt (ngoại trừ layer background), các layer chồng lên nhau thành nhiều lớp Ảnh 6 layer nam trên sẽ che anh ở layer bên đưới nó Bạn có thể thay đổi vị trí của các layer bằng cach Click & drag trén bang Layer năm bên phải cửa số làm việc của Photoshop, nếu chưa mở bảng Layer, bạn mở bảng layer bằng cách vào menu Window (trên thanh menu) >

Layers, hoặc nhắn F7

R — %

| Layers x | Channels | Paths | ,=

An/ hién layer

se /x, O| @ 1 ’ 3

Hinh 2.2: Layer trong photoshop

> Ấn / hiện một layer băng cách tắt hoặc mở biểu tượng con mắt bên cạnh

layer do

> Di chuyén layer bang cách Click và kéo thả layer đến vị trí mới, hoặc sử dụng phím Ctrl + ] (Di chuyển lên), Ctrl + [ (Di chuyên xuống) Còn rất nhiều các thao tác khác liên quan đến layer, nhưng bạn chỉ cần

năm được khái niệm về Layer và cách thức ân hiện cac layer

Trang 34

2.3.6 Phân tích bố cục I website

Có một chút trục trặc về kỹ thuật về bản mẫu dự định cho loạt bài viết này,

mình nghĩ đi nghĩ lại thấy bản mẫu hôm trước đơn giản quá, và mình phải lục loi dé tim cho được một bản mẫu ưng ý, không q khó cũng khơng qua dé dé các bạn rèn luyện tay nghề Và đây là những gì mà chúng ta mong muốn bạn

làm được sau những hướng dẫn này:

LIGHTHOUSE 888-888-8888

CONSTRUCTION TT

Home Crane Services Heavy Machinery Machinery Warehousing Locations Belger News About Us

Happy New Year From Belger

Lorom ipsum dolor sit amot, consectotur adipiscing olit Cum sociis natoquo ponatibus ot magnis dis parturiont nost monto Fusce porttitor, diam id accumsan porta, onim som varius nunc, eu tincidunt metus eros ut leo Cum sociis at natoque penatibus et magnis dis parturient monte Lorem ipsum dolor sit amet, consectotur adipiscing olit Cum sociis natoquo ponatibus ot magnis dis parturiont monto ost quisit oatin

Find a Location >

Vestibulum lectus leo, pretium rutrum eleifend quis, condimentum id nibh magnust et ahictt nuncet excit

Paul Rogers

Lighthouse Since 1812 Quality & Excellence Condimentum id nib at

Vestibulum lectus leo, pretium rutrum eleifend quis Vestibulum lectus leo, pretium rutrum eleifend quis magnust et alticat nuncet

condimentum id nibh Fusce ultricies, metus et gravida condimentum id nibh Fusce ultricies, metus et gravida excit Quisit ancut askt lectus

mattis, nis! lectus dapibus eros, at consequat elit nibh mattis, nisi lectus dapibus eros, at consequat elit nibh nibh sem duis atre

quis velit Duls in vehicula sem Read More w Kate Turner

Định dạng
Số trang	60
Dung lượng	46,91 MB