Thiet ke web tren notepad

Nhưng ta cũng có thể dùng font chữ do chúng ta quy định, tất nhiên với điều kiện là máy tính dùng để coi trang Web của bạn phải có font chữ đó.. Để quy định một font chữ dùng trên toàn [r]

(1)

THIẾT KẾ MỘT TRANG WEB ĐƠN GIẢN

Một trang Web thực chất tập tin văn dạng text (text file), nhiên đặt tên cho bạn cần ý thay dùng phần thơng thường txt bạn phải dùng html hay htm Tập tin gọi tập tin HTML (HTML file) HTML chữ viết tắt HyperText Mark-up Language Để viết HTML file cần dùng phần mềm soạn thảo text (text editor), Notepad hệ điều hành Windows chẳng hạn Tất nhiên viết bạn phải tuân theo cú pháp HTML Sau viết xong trang Web, để mở ta dùng phần mềm khác, gọi trình duyệt web (web browser), chẳng hạn Internet Explorer hệ điều hành Windows Browser hiểu cú pháp HTML hiển thị trang Web cho người đọc Nhiều cơng ty phần mềm sản xuất phần mềm để giúp soạn thảo HTML FrontPage, Dreamweaver Khi dùng phần mềm không cần phải học cú pháp HTML Những phần mềm FrontPage hay Dreamweaver giúp bạn đỡ công gõ cú pháp HTML mà

I Trang Web

Để bắt đầu mở Notepad (click Start, chọn Programs, vào Acessories chọn Notepad) viết dòng sau:

Mỗi nhóm ký tự bao gồm dấu <> gọi tag Hầu hết tags thành cặp, cặp gồm tag mở đầu tag kết thúc Để có tag kết thúc, việc thêm ký tự / vào tag mở đầu Có thể viết tag chữ thường chữ hoa

Các tags thông điệp gửi tới web browser Trong trường hợp vừa báo cho browser biết khởi đầu HTML file (<HTML>), kết thúc file (</HTML>)

Bên tags HTML lúc phải có tags HEAD: <HTML>

Lưu ý không chừa khoảng trống dấu < với tên tag, dấu < với dấu /, hay dấu / với tên tag áp dụng cho tất tags

Bên tags HEAD tags TITLE: <HTML>

<HEAD>

</HTML>

Nội dung trang Web bao tags BODY: <HTML>

<HEAD>

Để kết thúc trang Web này, cho tựa đề nội dung đó, chẳng hạn như:

(2)

<HEAD>

<TITLE>Ban muon viet mot trang Web?</TITLE> </HEAD>

Lưu tài liệu vừa soạn thảo vào file văn có phần HTML II Thay đổi trang Web

Đoạn mã sau để đăt màu màu xanh: <BODY BGCOLOR="#00FFFF">

Chao cac ban ! </BODY>

Trang Web bạn trông sau: Chao cac ban !

BGCOLOR attribute (tính chất) tag BODY, cho phép thay đổi màu trang Web (BGCOLOR chữ viết tắt background color, màu nền)

Lưu ý ln ln có khoảng trống BODY BGCOLOR Điều áp dụng cho tags khác attributes chúng

Trong ví dụ #00FFFF mã số màu xanh da trời

Ta dùng ảnh làm cho trang Web Sau ví dụ thay BGCOLOR="#00FFFF":

<BODY BACKGROUND="swirlies.gif"> Chao cac ban !

</BODY>

Thông thường bạn nên cất tất ảnh dùng trang Web vào folder riêng biệt, nằm bên folder làm việc (nơi bạn cất trang Web) Bạn tạo folder tên hinhanh chẳng hạn save ảnh swirlies.gif vào đó, ảnh minh họa sau đây:

Khi bạn nhớ phải thêm đường dẫn tới ảnh sau: <BODY BACKGROUND="hinhanh/swirlies.gif">

Chao cac ban ! </BODY>

III Định dạng văn Xuống dòng, phân đoạn:

Mở file vừa viết thêm phần text sau đây: <BODY BGCOLOR="#CCFFDD">

Chao cac ban !

Chuc mung cac ban den voi trang Web cua toi ! </BODY>

Trang Web chúng ta:

Chao cac ban ! Chuc mung cac ban den voi trang Web cua toi!

Cú pháp HTML quy định muốn xuống dòng bạn phải nói rõ cho browser biết cách dùng tag (viết tắt chữ Break) Ta thêm tag sau:

<BODY BGCOLOR="#CCFFDD"> Chao cac ban !

(3)

Ghi lại thay đổi vừa nhấn nút Refresh Internet Explorer, trang Web bạn trông này:

Chao cac ban !

Chuc mung cac ban den voi trang Web cua toi !

Tag đứng cuối dịng khơng có tag kết thúc

Muốn phân đoạn phải báo cho browser biết cách bọc đoạn văn tags (viết tắt chữ Paragraph) sau:

<BODY BGCOLOR="#CCFFDD"> Chao cac ban !

Chuc mung cac ban den voi trang Web cua toi ! </BODY>

Vẽ thêm đường ngang ngăn cách hai đoạn văn với tag <HR> sau (HR chữ viết tắt Horizontal Ruler):

<BODY BGCOLOR="#CCFFDD"> Chao cac ban !/

<HR>

Chuc mung cac ban den voi trang Web cua toi ! </BODY>

tag <HR> đứng khơng có tag kết thúc tag </HR> Căn chỉnh dịng:

Thơng thường browser ép câu đoạn văn sang trái, bạn thấy qua bước thực tập Nếu muốn ép chúng sang phải hay đưa chúng vào trang bạn dùng tag <DIV></DIV> với attribute ALIGN="RIGHT" hay

ALIGN="CENTER" (DIV chữ viết tắt Division, tức phần): <BODY BGCOLOR="#CCFFDD">

<HR>

Chuc mung cac ban den voi trang Web cua toi ! </DIV>

</BODY> Chao cac ban !

Chuc mung cac ban den voi trang Web cua toi ! Sắp xếp nội dung:

Nhiều bạn cần xếp nội dung thành nhiều đoạn danh sách hay bảng liệt kê Khi bạn phải dùng tags <UL></UL> (Unordered List, danh sách không thứ tự) hay <OL></OL> (Ordered List, danh sách có thứ tự) ví dụ sau:

<UL>

<LI>Chao cac ban !</LI> <LI>Hello !</LI>

(4)

<HR>

<OL>

<LI>Chuc mung cac ban den voi trang Web cua toi !</LI> <LI>Welcome to my Website !</LI>

</OL> </DIV> </BODY>

• Chao cac ban ! • Hello !

Chuc mung cac ban den voi trang Web cua toi ! Welcome to my Website !

Trong danh sách đoạn hay yếu tố phải bao bọc tags <LI></LI> (viết tắt List Item, yếu tố danh sách)

Cách thức tags lồng vào có ý nghĩa rõ ràng:

• <UL></UL> lồng vào List nằm Paragraph

• lại lồng vào <DIV ALIGN="RIGHT"></DIV> muốn ép Paragraph sang phải

IV Thay đổi kiểu chữ

Thông thường font chữ dùng để hiển thị trang Web lựa chọn sẵn web browser Nhưng ta dùng font chữ quy định, tất nhiên với điều kiện máy tính dùng để coi trang Web bạn phải có font chữ

Để quy định font chữ dùng toàn trang Web mình, bạn dùng tag <BASEFONT> Hãy mở trang khuon.html Notepad thêm phần text có màu đỏ sau:

<BODY BGCOLOR="#FFFFCC"> <BASEFONT FACE="ARIAL"> Chao cac ban !

Chao cac ban !

Chúng ta dùng tag <BASEFONT> với attribute FACE="ARIAL" để định loại font Arial Tag <BASEFONT> đứng khơng có tag kết thúc

Cũng quy định cỡ chữ <BASEFONT> với attribute SIZE="n", n số nguyên khoảng từ 7, cịn khơng định rõ cỡ chữ browser tự động dùng cỡ chữ

<BASEFONT FACE="ARIAL" SIZE="4"> Chao cac ban !

(5)

<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900"> Chao cac ban !

Tag <BASEFONT> quy định kiểu chữ dùng trang Web Tuy nhiên, câu đoạn ta thay đổi kiểu chữ Muốn vậy, dùng tag

để bao câu hay đoạn văn lại Ví dụ: <BODY BGCOLOR="#FFFFCC" >

<BASEFONT FACE="ARIAL" SIZE="4" COLOR="#339900"> Chao cac ban ! Chuc mung cac ban den voi trang Web cua toi !

</BODY>

Font chữ câu thứ thay đổi từ Arial thành Courier New, phần lại trang Web dùng font Arial, font quy định <BASEFONT> Do không định cỡ chữ FONT, nên browser dùng giá trị quy định

<BASEFONT> Nếu dùng attribute SIZE="+1" cỡ chữ tăng thêm mức so với cỡ chữ quy định <BASEFONT>, tức

Chao cac ban ! Chuc mung cac ban den voi trang Web cua toi !

</BODY>

Còn bạn viết SIZE="-2" cỡ chữ giảm hai mức so với cỡ chữ <BASEFONT> Cách xác định cỡ chữ gọi tương đối Còn cách định cỡ chữ kiểu SIZE="3" phần đầu gọi tuyệt đối Với tag FONT bạn muốn định cỡ chữ cách Cần nhớ tương đối có dấu + hay -, cịn tuyệt đối khơng có dấu

Ta định màu chữ FONT với attribute COLOR="#nnnnnn" <BODY BGCOLOR="#FFFFCC" >

Chao cac ban !

Chao cac ban !

Có thể viết chữ nghiêng (Italic), chữ in đậm (Bold) hay gạch (Underlined) với tags ,

Chao cac ban !

Chuc mung cac ban den voi trang Web cua toi ! </BODY>

Chao cac ban !

Để viết tiếng Việt, ta dùng gõ tiếng Việt VietKey để soạn thảo bình thường NotePad Tuy nhiên, bạn cần ý hai điều sau đây:

(6)

dialog box Save As), với fonts khác kiểu Encoding ANSI • Thêm tag <META> sau vào phần giới hạn tags <HEAD></HEAD> trang Web:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=unicode"> dùng font Unicode, hay

nếu dùng fonts khác V Chèn hình ảnh, âm Chèn hình ảnh

Muốn đưa ảnh vào trang Web cách dùng tag <IMG> (image) Trong tag bạn dùng attributes SRC (source) biết vị trí tên file hình ảnh,

WIDTH HEIGHT biết chiều rộng chiều cao ảnh (đơn vị pixels) Nếu không ghi chiều rộng chiều cao browser hoạt động chậm phải tính tốn độ lớn ảnh

Muốn trang trí trang Web hình ảnh Save ảnh sau vào folder hinhanh, giữ nguyên tên ảnh friends.gif:

Thêm vào phần text sau đây: <BODY BGCOLOR="#FFFFFF">

Chào bạn !

Nếu muốn đưa ảnh gif động (animated gif) vào trang Web Save animated gif sau vào folder hinhanh

Ta viết thêm phần text sau đây: <BODY BGCOLOR="#FFFFFF">

</BODY>

2 Chèn âm

Muốn chèn âm vào cần phải có điều kiện sau: • Máy tính bạn dùng phải có sound card loa

• Ngồi ra, browser phải có plug-in (phần mềm gắn thêm vào) để chơi audio files Ví dụ:

<HR>

</BODY>

Hãy viết thêm phần text sau đây: <BODY BGCOLOR="#FFFFFF">

<HR>

(7)

Trên toolbar để nghe nhạc trang Web: Chào bạn !

Khi dùng bấm nút play toolbar để nghe yelowros.mid

Chúng ta dùng tag <EMBED> để đưa âm vào trang Web Các attributes (thuộc tính) có nghĩa sau:

SRC Chữ viết tắt Source, tức nguồn Bạn dùng attribute để xác định nguồn audio (đường dẫn tên file)

WIDTH, HEIGHT Xác định chiều rộng chiều cao pixels hình ảnh toolbar Tùy loại plug-in, bạn phải thay đổi giá trị chúng để hình ảnh toolbar trơng đẹp

AUTOPLAY Chơi tự động Bạn dùng AUTOPLAY="false" để plug-in không tự động nghe nhạc người xem mở trang Web Cịn muốn ngược lại bạn dùng

AUTOPLAY="true"

CONTROLLER Bộ điều khiển Bạn dùng CONTROLLER="true" để browser hiển thị toolbar điều khiển plug-in Nếu không muốn bạn dùng

CONTROLLER="false"

LOOP Lập lập lại Bạn dùng LOOP="false" để plug-in không lập lập lại nhạc Nếu muốn ngược lại bạn dùng LOOP="true"

Có trường hợp mở trang Web bạn nghe nhạc, điệu nhạc lập lập lại suốt thời gian bạn coi trang Web Đó nhạc

Ví dụ, chọn yelowros.mid làm nhạc bạn viết dịng sau vào phần <BODY></BODY> trang Web

Muốn đưa đoạn phim (video clip) vào trang Web Cách làm điều kiện máy tính tương tự với âm Ví dụ:

<HR>

</BODY> VI Liên kết

Hyperlink siêu liên kết giúp ta di chuyển (navigate) trang Web Mỗi hyperlink trỏ tới URL (địa chỉ) trang Web, ta nhấn trỏ chuột vào hyperlink trang Web hiển thị

Ví dụ:

Mời bạn đến thăm <A HREF="trang01.html">trang Web tôi</A> ! </BODY>

Trang Web thể sau: Mời bạn đến thăm trang Web !

Khi click lên liên kết bạn đưa tới trang01.html (Ở giả sử ta cho liên kết trang web đến trang01) Để biến phần text thành liên kết bạn cần đặt phần text vào tags <A></A> A chữ viết tắt

(8)

Trong tag <A> bạn dùng attribute HREF biết đường dẫn tên trang Web mà liên kết đưa tới HREF chữ viết tắt Hypertext Reference, tức tài liệu tham khảo dạng hypertext

Tương tự trên, bạn tạo liên kết tới địa mạng Internet Trong phần file nguồn ta thêm đoạn mã sau:

Mời bạn đến thăm <A HREF="trang01.html">trang Web tôi</A> ! Go to <A HREF="http://www.yahoo.com/">Yahoo</A> !

</BODY>

Ghi lại thay đổi vừa nhấn nút Refresh cửa sổ Internet Explorer ta thấy:

Mời bạn đến thăm trang Web ! Go to Yahoo !

Nếu máy tính nối mạng click vào liên kết thứ hai đưa bạn tới website tiếng Yahoo Trong attribute HREF ý cách viết địa Internet, luôn có http:// trước tên website Một địa Internet gọi URL, chữ viết tắt Uniform Resource Locator

Địa http://www.yahoo.com.vn http:// giao thức (phương thức giao tiếp); www: dịch vụ web; yahoo.com.vn: tên miền

Muốn người gửi thư đến cho chúng ta, thêm vào đoạn mã: <BODY BGCOLOR="#FFEEFF">

Mời bạn đến thăm <A HREF="trang01.html">trang Web tôi</A> ! Go to <A HREF="http://www.yahoo.com/">Yahoo</A> !

Hãy gửi <A HREF="mailto:teo@hcm.vnn.vn">thư</A> cho ! </BODY>

Trang Web bạn trở thành: Mời bạn đến thăm trang Web ! Go to Yahoo !

Hãy gửi thư cho !

Nếu máy tính cài đặt để dùng e-mail click lên liên kết thứ ba làm xuất phần mềm viết e-mail, qua ta viết gửi thư cho địa nêu attribute HREF

Ngồi cơng cụ trên, tạo biểu bảng phần mềm soạn thảo MS Word, nhiên phải dùng thẻ thuộc tính tương ứng để soạn thảo Nếu cần thu thập thông tin chẳng hạn hồ sơ xin việc làm, mẫu thăm dò ý kiến v.v có liên quan đến nội dung web ta sử dung FORMS

Như trang báo, tạo FRAMES chứa phần nội dung trang đầu tiên, phần cịn lại phía trang sau chứa số nội dung khác mà ta soạn thảo cho web

Định dạng
Số trang	8
Dung lượng	52,5 KB