SỞ LAO ĐỘNG – THƯƠNG BINH VÀ XÃ HỘI ĐỒNG THÁP TRƯỜNG TRUNG CẤP THÁP MƯỜI GIÁO TRÌNH THIẾT KẾ WEBSITE Đồng Tháp CHƯƠNG TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML I TỔNG QUAN VỀ WWW CÁC KHÁI NIỆM CƠ BẢN: - Internet mạng máy tính tồn cầu máy truyền thơng với theo ngôn ngữ chung TCP/IP - Intranet mạng cục khơng nối vào Internet cách truyền thông chúng theo ngôn ngữ chung 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 khách(Client) tập tin, tài liệu, máy in… Ưu điểm mơ hình tiết kiệm thời gian, tài chính, dễ quản trị hệ thống…Cách hoạt động mơ hình máy Server trang thái hoạt động(24/24) chờ yêu cầu từ phía Client Khi Client yêu cầu máy Server đáp ứng yêu cầu - Internet Server Server cung cấp dịch vụ Internet(Web Server, Mail Server, FTP Server…) - Internet Service Provider(ISP): Là nơi cung cấp dịch vụ Internet cho khách hàng Mỗi ISP có nhiều khách hàng có nhiều loại dịch vụ Internet khác - Internet Protocol : Các máy sử dụng mạng Internet liên lạc với theo tiêu chuẩn truyền thông gọi Internet Protocol (IP) IP Address-địa IP: để việc trao đổi thông tin mạng Internet thực máy mạng cần phải định danh để phân biệt với máy khác Mỗi máy tính mạng định danh nhóm số gọi địa IP Địa IP gồm số thập phân có giá từ đến 255 phân cách dấu chấm Ví dụ 192.168.0.1 Địa IP có giá trị toàn mạng Internet Uỷ ban phân phối địa IP giới phân chia nhóm địa IP cho quốc gia khác Thông thường địa IP quốc gia quan bưu điện quản lý phân phối lại cho ISP Một máy tính thâm nhập vào mạng Internet cần có địa IP Địa IP cấp tạp thời cấp vĩnh viễn Thông thường máy Client kết nối vào mạng Internet thông qua ISP đường điện thoại Khi kết nối, ISP cấp tạm thời IP cho máy Client - Phương thức truyền thông tin Internet: Khi máy tính có địa IP x(máy X) gửi tin đến máy tính có địa IP y (máy Y) phương thức truyền tin diễn sau: Nếu máy X máy Y nằm mạng thơng tin gửi trực tiếp Cịn máy X Y khơng nằm mạng thơng tin chuyển tới máy trung gian có đường thơng với mạng khác chuyển tới máy Y Máy trung gian gọi Gateway - World Wide Web(WWW): dịch vụ phổ biến Internet Dịch vụ đưa cách truy xuất tài liệu máy phục vụ dễ dàng thông qua giao tiếp đồ họa Để sử dụng dịch vụ máy Client cần có chương trình gọi Web Browser - Web Browser (trình duyệt): trình duyệt Web Dùng để truy xuất tài liệu Web Server Các trình duyệt Internet Explorer, Nestcape - Home page: trang web web site - Hosting provider: công ty tổ chức đưa trang lên web - Hyperlink : tên khác hypertextlink - Publish: làm cho trang web chạy mạng - URL (Unioform resource locator): địa chỉ đến file cụ thể nguồn tài nguyên mạng Mỗi nguồn web có địa khó nhớ Vì vậy, người ta sử dụng URL chuỗi cung cấp địa Internet web site nguồn World Wide Web Định dạng đặc trưng là: www.nameofsite.typeofsite.countrycode Ví dụ: 207.46.130.149 biểu diễn URL www.microsoft.com URL nhận biết giao thức site nguồn truy cập Giao thức thông thường “http”, vài dạng URL khác “gopher”, cung cấp địa Internet thư mục Gopher, “ftp”, cung cấp vị trí mạng nguồn FTP Có hai dạng URL: URL tuyệt đối – địa Internet đầy đủ trang file, bao gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn tên file Ví dụ, http:// www.microsoft.com/ms.htm URL tương đối - mô tả ngắn gọn địa tập tin kết nối có đường dẫn với tập tin hành, URL tương đối đơn giản bao gồm tên phần mở rộng tập tin Ví dụ: index.html - Web server chương trình đáp ứng lại yêu cầu truy xuất tài nguyên từ trình duyệt GIỚI THIỆU KHÁI QUÁT VỀ WEB - Web ứng dụng chạy mạng(Client-Server), chia sẻ khắp toàn cầu - Trang web file văn chứa tag HTML đọan mã đặc biệt mà trình duyệt web (Web browser) hiểu thông dịch được, file lưu với phần mở rộng html htm - HTML (HyperText Markup Language), gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web (Web Browser) Hypertext (Hypertext link), từ hay cụm từ đặc biệt dùng để tạo liên kết trang web Markup: cách định dạng văn để trình duyệt hiểu thơng dịch Language: khơng ngơn ngữ lập trình, mà tập nhỏ quy luật để định dạng văn trang web - Trình soạn thảo trang web :Có thể soạn thảo web trình soạn thảo văn Các trình soạn thảo phổ biến là: Notepad, FrontPage Dreamweaver II NGÔN NGỮ HTML Tag HTML câu lệnh nằm cặp tag “”, dùng để định dạng văn trang web Dạng chung tag HTML là: Object Trong đó: – TagName : tên tag HTML, viết liền với dấu “< “, khoảng trắng – Object : đối tượng cần định dạng trang Web – ListPropeties danh sách thuộc tính Tag, đặc điểm bổ sung vào cho tag, thứ tự thuộc tính tag tuỳ ý Nếu có từ thuộc tính trở lên thuộc tính cách khoảng trắng Object – Giá trị thuộc tính đặt nháy đơn ‘ nháy đơi “.(có thể bỏ qua) – : gọi tag mở – : gọi tag đóng Thơng thường tag có tag đóng Tuy nhiên có số tag khơng có tag đóng Ví dụ : nội dung TagName(mở Properties ) TagName(đónón g) – Có thể có nhiều tag lồng vào nhau, theo nguyên tắc tag mở trước tag đóng sau Ví dụ: Object Object1Object2 – Trong trang HTML, tag bị sai nội dung bên Tag khơng hiển thị trình duyệt CẤU TRÚC CƠ BẢN CỦA TRANG WEB: a Cấu trúc trang web – Phần đầu(): phần chứa thông tin trang Web – Phần thân (): phần chứa nội dung trang Web – Phần đầu phần thân đặt cặp tag Nội dung thông tin trang web Nội dung hiển thị trình duyệt b Hiển thị trang web: – Khởi động trình duyệt Internet Explorer – Chọn menu file,open, dùng browse tìm tập tin html tạo – Hoặc double click vào tên tập tin htm c Các tag HTML : Hiển thị nội dung tiêu đề trang web tiêu đề trình duyệt – Cặp tag đặt phần trang HTML – Cú pháp: Nội dung tiêu đề : Tạo header, gồm cấp header, đặt phần BODY – Cú pháp: Nội dung Header Trong đó: – Direction: gồm giá trị left, right, center, dùng để canh lề cho header, mặc định canh trái – Ví dụ: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 – Dùng để ngắt đoạn bắt đầu đoạn – Cú pháp:
Nội dung đoạn
– Tag không bắt buộc – Tag tự động bắt đầu đoạn – Ngắt dòng vị trí của tag Ví dụ:
Mary had a little lamb It’s fleece was white as snow Everywhere that Mary went She was followed by a little lamb
: – Dùng để kẻ đường ngang trang, khơng có tag đóng – Cú pháp: Trong đó: Direction: gồm giá trị left, right, center Width: độ dài đường kẻ, tính Pixel % Size: độ dày đường kẻ, tính pixel Color: màu đường kẻ, dùng tên màu dùng mã #rrggbb Ví dụ: Welcome to HTML My first HTML document This is going to be real fun – Dùng định dạng font chữ – Định dạng Font chữ cho tài liệu đặt tag phần – Định dạng phần từ đặt vị trí muốn định dạng – Cú pháp: Nội dung hiển thị Ví dụ: Welcome to HTML My first HTML document
This is going to be real fun – Chứa nội dung trang web – Cú pháp: Nội dung trang web – Các thuộc tính BgColor: thiết lập màu trang Text: thiết lập màu chữ Link: màu siêu liên kết Vlink: màu siêu liên kết xem qua Background: dùng load hình làm cho trang LeftMargin: Canh lề trái TopMargin: Canh lề trang Ví dụ: Learning HTML Welcome to HTML Màu sắc: Internet Explorer xác lập 16 màu theo tên sau: – Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua – Một số mã thập lục phân màu :#RRGGBB Mã thập lục phân #FF0000 #00FF00 #0000FF #000000 #FFFFFF Màu RED GREEN BLUE BLACK WHITE : – Dùng để chèn hình ảnh vào trang Web – Cú pháp: o Src: xác định đường dẫn tập tin cần load, sử dụng đường dẫn tương đối o Alt: chứa nội dung văn thay cho hình ảnh hình khơng load được, load xuất nội dung textbox người dùng đưa chuột tới hình o Width, Height: dùng để xác định chế độ phóng to thu nhỏ hình ảnh o Align =” left/ right/top/bottom”: so hàng hình ảnh text : – Dùng để chèn âm vào trangWeb Âm phát người sử dụng mở trang Web – Cú pháp: o Src chứa địa file nhạc, file có phần mở rộng mp3 , mdi, … o Loop xác định chế độ lập lập lại hát, value< lập vơ hạn, value=n lập lại n lần tự động tắt – Dùng để điểu khiển đối tượng chạy cách tự động trang Web – Cú pháp: Object – Các thuộc tính Marquee : o Direction = up/ down / left / right dùng để điều khiển hướng chạy o Behavior = alternate: đối tượng chạy từ lề sang lề ngược lại Ví dụ: Đối tượng chạy lên : Nội dung cặp tag không hiển thị trang Cú pháp: : định dạng chữ đậm – Cú pháp Nội dung chữ đậm Ví dụ:
This is good fun
: Định dạng chữ nghiêng – Cú pháp: Nội dung chữ nghiêng : Gạch chân văn – Cú pháp: Nội dung chữ gạch chân Ví dụ: Định dạng khối văn vừa đậm, nghiêng gạch chân Trường ĐHCN TP HCM : – Chỉnh cở chữ to nhỏ cở chữ xung quanh – Cú pháp Nội dung chữ to Nội dung chữ nhỏ : – Đưa chữ lên cao xuống thấp so với văn bình thường – Cú pháp: Nội dung chữ dưa lên cao Nội dung chữ đưa xuống thấp Ví dụ: a2 H2O : – Gạch ngang văn – Cú pháp: Nội dung văn bị gạch ngang : – Giữ nguyên định dạng như: ngắt dịng, khoảng cách, thích hợp với việc tạo bảng – Cú pháp: Nội dung văn cần định dạng trứơc với tất định dạng khoảng cách, xuống dòng ngắt hàng Ví dụ: Learning HTML Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King’s horses And all the King’s men Could not put Humpty Dumty together again : – Chia văn thành khối, có chung định dạng chia văn thành khối dòng tách khối không dòng – Cú pháp: Nội dung khối dòng Nội dung khối dịng Ví dụ: Learning HTML Division The DIV element is used to group elements
Typically, DIV is used for block level elements Division
This is a second division Are you having fun?
The second division is right aligned Common formatting is applied to all the elements in the division Các ký tự đặc biệt: a Lớn (>): > Ví dụ: If A > B Then A=A+1 b Nhỏ (
