Bài giảng Thiết kế Web - Bài 3: Tạo trang Web với HTML

THIẾT KẾ WEBBÀI 3: TẠO TRANG WEB VỚI HTML1Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. Cú pháp: . Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường.1. Thẻ HTML.BÀI 3: TẠO TRANG WEB VỚI HTML2. Tạo một trang web mới.Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.Cú pháp: ... PhÇn më ®Çu (HEADER) cña tµi liÖu ®­îc ®Æt ë ®©yTạo phần đầu.a.1 HEADBÀI 3: TẠO TRANG WEB VỚI HTMLCặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ .Tiêu đề của tài liệua.2 TITLECú pháp:BÀI 3: TẠO TRANG WEB VỚI HTMLThẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ..... phÇn néi dung cña tµi liÖu ®­îc ®Æt ë ®©yTrên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính:b. Tạo phần thân (BODY)Cú pháp: BÀI 3: TẠO TRANG WEB VỚI HTMLBACKGROUND=Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. BGCOLOR=Đặt mầu nền cho trang khi hiển thị. TEXT=Xác định màu chữ của văn bản, kể cả các đề mục.ALINK=,VLINK=,LINK=Xác định màu sắc cho các siêu liên kết trong văn bản. BÀI 3: TẠO TRANG WEB VỚI HTMLNhư vậy một tài liệu HTML cơ bản có cấu trúc như sau:Tiªu ®Ò cña tµi liÖu... Néi dung cña tµi liÖuBÀI 3: TẠO TRANG WEB VỚI HTMLc. Một số thẻ cơ bản.Thẻ được sử dụng để định dạng một đoạn văn bản. Nội dung đoạn văn bảnCú pháp:c.1. Thẻ PBÀI 3: TẠO TRANG WEB VỚI HTMLHTML hỗ trợ 6 mức đề mục. c.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường. BÀI 3: TẠO TRANG WEB VỚI HTMLDưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: ... Định dạng đề mục cấp 1 ... Định dạng đề mục cấp 2 ... Định dạng đề mục cấp 3 ... Định dạng đề mục cấp 4 ... Định dạng đề mục cấp 5 ... Định dạng đề mục cấp 6BÀI 3: TẠO TRANG WEB VỚI HTMLThẻ này không có thẻ kết thúc tương ứng (), nó có tác dụng chuyển sang dòng mới. c.3 Thẻ xuống dòng BRBÀI 3: TẠO TRANG WEB VỚI HTML Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ Là một nội dung nào đó bất kỳ thể hiện lên trên một trang web3. Các thành phần của một trang HTML.a. Các đoạn văn bản.b. Các định dạng.Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.b.1. Các thẻ định dạng in ký tựBÀI 3: TẠO TRANG WEB VỚI HTML ... ...In chữ đậm ... ... In chữ nghiêng ... In chữ gạch chân ... ... In chữ bị gạch ngang. ... In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ tăng dần. BÀI 3: TẠO TRANG WEB VỚI HTML ... In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ giảm dần. ... Định dạng chỉ số trên (SuperScript) x2 ... Định dạng chỉ số dưới (SubScript) - x2 ... Chọn kiểu chữ hiển thị. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4...) so với font chữ hiện tại.BÀI 3: TẠO TRANG WEB VỚI HTMLTrong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P, 	Văn bản sẽ được căn giữa trang	b.2. Căn lề văn bản trong trang WebBÀI 3: TẠO TRANG WEB VỚI HTMLb.4. Sử dụng màu sắc trong thiết kế các trang WebMột màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau: #RRGGBBRR - là giá trị màu Đỏ.GG - là giá trị màu Xanh lá cây.BB - là giá trị màu Xanh nước biển.Trong đó:BÀI 3: TẠO TRANG WEB VỚI HTMLMàu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.b.4. Sử dụng màu sắc trong thiết kế các trang WebBÀI 3: TẠO TRANG WEB VỚI HTMLSau đây là một số giá trị màu cơ bản:Màu sắcGiá trịTên tiếng AnhĐỏĐỏ sẫmXanh lá câyXanh nhạtXanh nước biểnVàngVàng nhạtTrắngĐenXámNâuTímTím nhạtHồngDa cam#FF0000#8B0000#00FF00#90EE90#0000FF#FFFF00#FFFFE0#FFFFFF#000000#808080#A52A2A#FF00FF#EE82EE#FFC0CB#FFA500REDDARKREDGREENLIGHTGREENBLUEYELLOWLIGHTYELLOWWHITEBLACKGRAYBROWNMAGENTAVIOLETPINKORANGEBÀI 3: TẠO TRANG WEB VỚI HTML.... phần nội dung của tài liệu được đặt ở đâyCú pháp: BÀI 3: TẠO TRANG WEB VỚI HTMLSau đây là ý nghĩa các tham số của thẻ BODY:Các tham sốý nghĩaLINKChỉ định màu của văn bản siêu liên kếtALINKChỉ định màu của văn bản siêu liên kết đang chọnVLINKChỉ định màu của văn bản siêu liên kết đã từng mởBACKGROUNDChỉ định địa chỉ của ảnh dùng làm nềnBGCOLORChỉ định màu nềnTEXTChỉ định màu của văn bản trong tài liệuSCROLLYES/NO - Xác định có hay không thanh cuộnTOPMARGINLề trênRIGHTMARGINLề phảiLEFTMARGINLề tráiBÀI 3: TẠO TRANG WEB VỚI HTMLCú pháp:... b.5. Chọn kiểu chữ cho văn bảnBÀI 3: TẠO TRANG WEB VỚI HTMLc. Các frame.Sử dụng tag và để chia cửa sổ trình duyệt thành nhiều cửa sổ con frame. Tag được dùng kèm với tag để định nghĩa 1 frame. BÀI 3: TẠO TRANG WEB VỚI HTMLc. Các frame.Ví dụ: tạo trang web có tên là 2frame.htm chứa 2 frame, frame 1 bên trái chứa nội dung trang web page_1.htm và frame 2 bên phải chứa nội dung trang web page_2.htm. Trang web có 2 khung BÀI 3: TẠO TRANG WEB VỚI HTMLMỗi frame có 1 tên, ví dụ frame trái có name="muc_luc" và frame phải có name="noi_dung". Ðể tạo liên kết từ frame muc_luc với frame noi_dung ta chỉ định trong frame muc_luc như sau:target="noi_dung". src=file: để chỉ định ra trang web thể hiện trên khung. Các trang web page_1.htm và page_2.htm cần tạo ra trước khi tạo trang web 2frame.htm chứa chúng. Nội dung của trang web page_1.htm trong tag có khai báo sau: BÀI 3: TẠO TRANG WEB VỚI HTMLÐể tạo các liên kết hyperlink giữa trang page_1.htm với các trang web khác như page_2.htm, page_3.htm,... để thể hiện trên khung bên phải thì trong nội dung trang page_1.htm có nội dung như sau: Ðể không xuất hiện scrollbar và border của frame, khi đó bạn thêm thuộc tính scrolling="no" và frameborder=0 vào tag , ví dụ: BÀI 3: TẠO TRANG WEB VỚI HTML Trang mục lục Mục lục công việc page 2 page 3 Khi đó trong trình duyệt bạn click vào các hyperlink thì các trang web page_2.htm và page_3.htm sẽ mở ra tương ứng ở frame bên phải(frame noi_dung) nhờ khai báo target="noi_dung". BÀI 3: TẠO TRANG WEB VỚI HTMLd. Các bảng.Tag định dạng bảng : sử dụng tag để bắt đầu và kết thúc 1 bảng. Sử dụng kèm theo với tag để thêm 1 dòng trong bảng và tag để thêm vào 1 ô trên dòng. Ví dụ: Ô 11 Ô 12 Ô 21Ô 22 BÀI 3: TẠO TRANG WEB VỚI HTML Ðịnh nghĩa TABLE(bảng): BÀI 3: TẠO TRANG WEB VỚI HTMLÐịnh nghĩa TABLE(bảng):    ALIGN=align-type: lề của bảng, ( LEFT hoặc RIGHT )    BACKGROUND=url: chỉ định ảnh nền của bảng     BGCOLOR=color-type: màu nền của bảng     BORDER=n: đường viền bảng, n tính bằng pixel     CELLPADDING=n: khoảng cách từ ô tới nội dung của ô, đơn vị pixel     WIDTH=n: độ rộng của bảng, n tính theo % (phải có dấu % theo sau) Trong đó: BÀI 3: TẠO TRANG WEB VỚI HTMLÐịnh nghĩa TR(dòng):   BÀI 3: TẠO TRANG WEB VỚI HTML    ALIGN=align-type: lề của các ô trong dòng, (LEFT, RIGHT hoặc CENTER )    BACKGROUND=url: chỉ định ảnh nền của dòng     BGCOLOR=color-type: màu nền của dòng     VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô trên dòng. ( TOP, BOTTOM, MIDDLE.) Ðịnh nghĩa TR(dòng): Trong đó: BÀI 3: TẠO TRANG WEB VỚI HTMLÐịnh nghĩa TD (ô): BÀI 3: TẠO TRANG WEB VỚI HTML    ALIGN=align-type: lề văn bản trong ô (LEFT, RIGHT, CENTER)    BACKGROUND=url: chỉ định ảnh nền cho ô     BGCOLOR=color-type: màu nền của ô     COLSPAN=n: ô trải rộng trên n cột     ROWSPAN=n: ô trải dài trên n hàng     VALIGN=v-align-type: (TOP, BOTTOM, MIDDLE. )Ðịnh nghĩa TD (ô): Trong đó:BÀI 3: TẠO TRANG WEB VỚI HTMLe. Các liên kết. Nhãn liên kết  Dùng liên kết các trang web với nhau hoặc liên kết web với các thuộc tính khácCú pháp:BÀI 3: TẠO TRANG WEB VỚI HTML4. Hiển thị trang web trong trình duyệt.Thông thường hiện nay người ta sử dụng trình duyệt web Internet Explorer.Trên màn hình click vào biểu tượng internet Explorer. Sau đó gõ địa chỉ trang web đã lưu vào ô AddresBÀI 3: TẠO TRANG WEB VỚI HTMLwww.k13cdspth.9f.com6. Tìm hiểu một trang web mẫu.Xin chân thành cảm ơn