Thông tin tài liệu
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 1 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 1. WEB TĨNH: 1.1. HTML 1.2. Dreamweaver 1.3. JavaScript 2. CSDL: 2.1. Phân tích, thiết kế CSDL 2.2. Triển khai hệ quản trị CSDL 3. WEB ðỘNG: 3.1. Lập trình kết nối CSDL 3.2. Lập trình máy chủ THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 2 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com PHẦN I – WEB TĨNH 1. Các khái niệm: * Internet : mạng máy tính toàn cầu, các máy truyền thông với nhau bằng giao thức chung là TCP/IP (Transfer Control Protocol/Internet Protocol) * Intranet : là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức TCP/IP. * Mô hình Client – Server: mô hình khách – chủ. Server chứa tài nguyên dùng chung cho nhiều máy Client * Internet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server…) * Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau. * Internet Protocol : tiêu chuẩn chi phối việc chuyển tải thông tin giữa các máy tính trong mạng * World Wide Web (WWW): dịch vụ tra cứu thông tin Internet. Dịch vụ này ñưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp ñồ họa. ðể sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser. THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 3 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com * Web Browser : trình duyệt Web. Dùng ñể truy xuất các tài liệu trên các Web Server. – Internet Explorer – Firefox – Opera – Chrome – Safari… * Home page : là trang web ñầu tiên trong web site * Hosting Provider : là công ty hoặc tổ chức ñưa các * Publish : Xuất bản trang web * Web Server : là một chương trình ñáp ứng yêu cầu truy xuất tài nguyên. Web Server là dạng phần mềm cài trên máy Server ñể phục vụ quản lý các website (APACHE, IIS). Tích hợp các giao diện lập trình bằng một ngôn ngữ cụ thể. * Web : là ứng dụng (trên mạng Client – Server) ñược chia sẻ trên mạng Internet. * URL (Unioform Resource Locator): một ñịa chỉ chỉ ñến một file cụ thể trong nguồn tài nguyên mạng. Ví dụ: 207.46.130.149 ñược biểu diễn trong URL là www.microsoft.com + URL tuyệt ñối : ñịa chỉ Internet ñầy ñủ của một trang hoặc file, bao gồm giao thức, vị trí mạng, ñường dẫn tự chọn và tên file. Ví dụ, http:// www.microsoft.com/ms.html + URL tương ñối : ñịa chỉ tập tin kết nối có cùng ñường dẫn với tập tin hiện hành, URL tương ñối ñơn giản bao gồm tên và phần mở rộng của tập tin. * HTML (HyperText makup Language): gồm các ñoạn mã chuẩn ñược quy ước ñể thiết kế Web và ñược hiển thị bởi trình duyệt Web + Hypertext (Hypertext Link) : là một từ hay một cụm từ ñặc biệt dùng ñể tạo liên kết giữa các trang web + Mark Up : là cách ñịnh dạng văn bản ñể trình duyệt hiểu và thông dịch ñược. + Language : tập những quy luật ñể ñịnh dạng văn bản trên trang Web. * Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage hoặc Dreamweaver. THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 4 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 2. Cấu trúc HTML: 2.1. Tag HTML: <HTML> <HEAD> <TITLE> Tiêu ñề trang web</TITLE> </HEAD> <BODY> Nội dung trang web </BODY> </HTML> HEAD : Phần ñầu BODY : Phần thân TAG : Thẻ <Tên Tag> : tag mở </Tên Tag> : tag ñóng - Các thuộc tính của tag: <Tên Tag các thuộc tính…></Tên Tag> Left : Canh trái Center : Canh giữa Right : Canh phải Justify : Canh ñều - Cú pháp: <TagName ListProperties> Object </TagName> TagName : tên tag HTML, liền với dấu “ < ”, không có khoảng trắng Object : ñối tượng hiển thị trên trang Web ListPropeties: danh sách thuộc tính của Tag - Nếu có nhiều thuộc tính thì các thuộc tính cách nhau khoảng trắng <TagName property1= “Value1” Property2= “Value2”…> Object </TagName> Ví dụ: <Body BGCOLOR=”RED” TEXT=“#FFFF00”> Nội dung </Body> 2.2. <Title> : - Hiển thị nội dung tiêu ñề của trang web trên thanh tiêu ñề của trình duyệt - Cú pháp: <TITLE> Nội dung tiêu ñề </TITLE> <HTML> <HEAD> <TITLE> .: Sangit.com - Trang Chu :.</TITLE> </HEAD> </HTML> THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 5 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 2.3. <Hn>: - Tạo Header, gồm 6 cấp Header, ñược ñặt trong phần BODY - Cú pháp: <Hn ALIGN= “Direction”> Nội dung của Header </Hn> Ví dụ: <HTML> <HEAD> <TITLE> .: Sangit.com - Trang Chu :.</TITLE> </HEAD> <BODY> <H1 ALIGN=Left>Head 1</H1> <H2 ALIGN=Center>Head 2</H2> <H3 ALIGN=Center>Head 3</H3> <H4 ALIGN=Center>Head 4</H4> <H5 ALIGN=Center>Head 5</H5> <H6 ALIGN=Center>Head 6</H6> </BODY> </HTML> 2.4. <P> : - Dùng ñể ngắt ñoạn và bắt ñầu ñoạn mới - Cú pháp: <P Align = “Direction”> Nội dung của ñoạn </P> THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 6 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com <HTML> <HEAD> <TITLE> .: Sangit.com - Trang Chu :.</TITLE> </HEAD> <BODY> <P Align=“Left”> Qua Ðèo Ngang Bước tới ñèo ngang bóng xế tà, Cỏ cây chen ñá lá chen hoa … </P> </BODY> </HTML 2.5. <BR>: - Ngắt dòng tại vị trí của tag. - Cú pháp: <BR> Nội dung </BR> ⇔ ⇔⇔ ⇔ <BR/> Ví dụ: <HTML> <HEAD> <TITLE> .: Sangit.com - Trang Chu :.</TITLE> </HEAD> <BODY> <BR><B>Qua Ðèo Ngang</B></BR> <BR>Bước tới ñèo ngang bóng xế tà</BR> <BR>Cỏ cây chen ñá lá chen hoa</BR> … </BODY> </HTML THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 7 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 2.6. <HR>: - Kẻ ñường ngang trang - Cú pháp: <HR Align= Direction Width= “Value” Size= “Value” Color = “ #RRGGBB”> Ví dụ: <HTML> <HEAD> <TITLE> .: Sangit.com - Trang Chu :.</TITLE> </HEAD> <BODY> <HR Align=Left Width=“750” Size="20" Color="#00FFFF"> </BODY> </HTML 2.7. <FONT>: - ðịnh dạng font chữ - ðịnh dạng Font chữ cho cả tài liệu thì ñặt tag <Font> trong phần <Body> - ðịnh dạng từng phần hoặc từng từ thì ñặt tại vị trí muốn ñịnh dạng - Cú pháp: <FONT Face= “FontName1, FontName2, FontName3” Size= “Value”Color= “RRGGBB”> Nội dung hiển thị </FONT> Ví dụ: <HTML> <HEAD> <TITLE> .: Sangit.com - Trang Chu :.</TITLE> </HEAD> <BODY> <FONT Face=“ARIAL” Size=“20” Color=”#00FFFF”> QUA ÐÈO NGANG</FONT> </BODY> </HTML THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 8 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 2.8. <BODY > : - Chứa nội dung của trang web - Cú pháp: <BODY> Nội dung chính của trang web </BODY> - Các thuộc tính của <Body> BgColor : thiết lập màu nền của trang Text : thiết lập màu chữ Link : màu của siêu liên kết Vlink : màu của siêu liên kết ñã xem qua Background : load một hình làm nền cho trang LeftMargin : Canh lề trái TopMargin : Canh lề trên của trang <HTML> <HEAD> <TITLE> Learning HTML </TITLE> </HEAD> <BODY BgColor="#00FFFF" Text="Black">Chào các ban!<Font Color ="LIMEGRREN"> Welcome to HTML </FONT> </BODY> </HTML> 2.9. <IMG> : - Chèn một hình ảnh vào trang Web - Cú pháp: <Img Src=“URL of Image” Alt=“Text” Width= “Value” Height= “Value” Border=Value> <HTML> <HEAD> <TITLE> .: Sangit.com – Trang Chu :. </TITLE> </HEAD> <BODY> <IMG SRC="internet.jpg" Alt="Welcome" Width="500" Height="350" Border= “5”></IMG> </BODY> </HTML> THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 9 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 2.10. <BgSound> : - Chèn một âm thanh vào trangWeb. Âm thanh này sẽ ñược phát mỗi khi người sử dụng mở trang Web. - Cú pháp: <BgSound src=”Filenhac” Loop=Value> <HTML> <HEAD> <TITLE> .: Sangit.com – Trang Chu :. </TITLE> </HEAD> <BODY> <BgSound SRC=“sang.mp3” Loop=500></BgSound> </BODY> </HTML> THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 10 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com 2.11. <EMBED>: - Cho phép ñưa âm thanh trực tiếp vào trang WEB. - Cú pháp: <EMBED SRC="URL" Width=Value Height=Value > <HTML> <HEAD> <TITLE> .: Sangit.com – Trang Chu :. </TITLE> </HEAD> <BODY> <EMBED SRC="LongRuoi.flv" Width="50%" Height="25%" Autostart="True" Loop="True" Hidden="False"> </EMBED> </BODY> </HTML> 2.12. <MARQUEE > : - ðiều khiển ñối tượng chạy một cách tự ñộng trên trang Web - Cú pháp: <MARQUEE >Object</MARQUEE> <MARQUEE DIRECTION="LEFT"> Welcome to Sangit.sharepoint.com</MARQUEE> ← ← ← Welcome to Sangit.sharepoint.com <MARQUEE DIRECTION="Right"> Welcome to Sangit.sharepoint.com</MARQUEE> → → → Welcome to Sangit.sharepoint.com 2.13. <! Ghi chú >: - Không hiển thị trong trang - Cú pháp: <! Nội dung lời chú thích > [...]... LOGO > Trang 31 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT Trang 32 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT 6 Frame... kho ng tr ng: Trang 14 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT 3 Siêu liên k t – Hình nh: 3.1 SIÊU LIÊN K T Siêu liên k t cho phép ngư i truy c p có th duy t t trang web này ñ n trang web khác M t liên k t g m 3 ph n: - Ngu n : ch a n i dung hi n th khi ngư i dùng truy c p ñ n, có th là m t trang web khác, m t ño n Film, m t hình... Trang 20 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT 3.7.4 Hình n n: - Trong h u h t các trang web thư ng s d ng n n màu, v i m c ñích là làm n i b t n i dung trang ñó Tuy nhiên cũng có th s d ng hình nh ñ làm n n b ng thu c tính BACKGROUND c a th BODY - Trang 21 Cú pháp: Web: Sangit.sharepoint.com... Learning HTML Creating Web Pages With HTML Trang 13 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT 2.23 Các ký t ñ c bi t: 2.23.1 L n hơn (>): > If A > B Then A = A + 1 2.23.2... or text Trang 25 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT 5 B ng – Trình bày 5.1 B NG Gi i thi u: B ng thư ng ñư c s d ng ñ t o các văn b n d ng nhi u c t ho c phân chia - trang thành nhi u vùng khác nhau v i nh ng ch ñ khác nhau, r t ti n l i trong thi t k và trình bày trang web - Cách t o b ng: – Tag ... d b n có th chèn m t tag trong m t cell ho c m t danh sách có th t các m c ho c có th chèn m t b ng con trong m t b ng khác… Trang 30 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT C n thi t k trang web g m nhi u vùng v i nh ng ch ñ khác nhau như hình dư i - ñây, thì b ng là công c r t hi u qu * Bư c 1: T o m t Table th nh t g m 1 dòng... website Using links Open Page1 Trang 15 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT Dùng URL tuy t ñ i ñ liên k t ñ n các trang trong website khác LINK Trang Google Trang... các dòng th 1, th 2 …, có th tính b ng pixel ho c b ng % Name : tên khung, (xác ñ nh ch c năng c a khung) Content.htm : ñ a ch trang web xu t hi n ñ u tiên trong khung Trang 33 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com THI T K WEB – PH N 1 – WEB TĨNH - SANGIT Frame . tích, thiết kế CSDL 2.2. Triển khai hệ quản trị CSDL 3. WEB ðỘNG: 3.1. Lập trình kết nối CSDL 3.2. Lập trình máy chủ THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 2 Web: Sangit.sharepoint.com. trình gọi là Web Browser. THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 3 Web: Sangit.sharepoint.com Email: Support@sangit.onmicrosoft.com * Web Browser : trình duyệt Web. Dùng ñể truy. Web. * Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage hoặc Dreamweaver. THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT Trang 4 Web:
Ngày đăng: 22/10/2014, 18:00
Xem thêm: Hướng dẫn thiết kế Web tĩnh HTML+Java, Hướng dẫn thiết kế Web tĩnh HTML+Java
