HTML - KIẾN THỨC CƠ BẢN Phần I Kỹ 1.1 HTML gì? HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản) định dạng để báo cho trình duyệt Web (Web browser) biết cách để hiển thị trang Web Các trang Web thực khác văn với thẻ (tag) HTML xếp cách đoạn mã để trình duyệt Web biết cách để thông dịch hiển thị chúng lên hình 1.2 Cấu trúc file HTML 1.2.1 Thẻ (tag) HTML Khi trình duyệt Web đọc file HTML, tìm file tag hay đoạn mã đặc biệt để biết cách hiển thị file HTML Ví dụ: Khi file HTML có đoạn Cấu trúc file HTML hiển thị đoạn "Cấu trúc file HTML" lên hình với mức độ tiêu đề thức (sẽ nói kỹ phần sau) Các tag HTML báo cho trình duyệt biết cách in đậm dòng văn bản, in nghiêng, biến dòng văn thành siêu liên kết tới trang Web khác, hiển thị ảnh Trong ví dụ ta thấy sau tag đoạn văn tag Trong tag ta thấy có dấu / , dấu / nằm tag báo hiệu cho trình duyệt biết hiệu ứng tag kết thúc Như việc sử dụng tag HTML sau: vùng văn chịu tác động Chú ý: Trình duyệt không quan tâm tên tag chữ hoa hay chữ thường nên việc viết 1.2.2 Cấu trúc file HTML File HTML bắt đầu thẻ kết thúc thẻ Cặp thẻ báo cho trình duyệt Web biết đọc file có chứa mã HTML, thẻ có tác dụng kết thúc file HTML Bên cặp thẻ cặp thẻ phần thân, bạn nhập vào đoạn văn thẻ khác quy định định dạng trang Ngoài để ghi thích, tiện cho việc xem tag HTML cập nhật trang Web, ta cần đặt thích vào > Tóm lại cấu trúc file HTML Tên trang Văn thẻ HTML > Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Tạo file HTML Sau đọc phần trên, bạn biết thẻ HTML cấu trúc chung file HTML Sau tạo file HTML Mở Notepad Windows hay trình soạn thảo văn tạo văn trơn (plain text) Nếu bạn dùng Microsoft Word phải lưu trữ dạng ASCII Bạn nhập dòng văn sau Chân trời tri thức - Internet today Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Công nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Lưu file với phần mở rộng htm Ví dụ Bai1.htm Lưu ý: Bạn nên tạo Folder riêng để chứa tập tin mà bạn tạo suốt thời gian học HTML Khởi động IE Nescape Chọn File / Open Sử dụng hộp thoại để mở file HTML bạn vừa tạo Bạn nhìn thấy tranh tiêu đề trình duyệt dòng chữ "Chân trời tri thức - Internet today" trang "Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Công nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm " mà bạn viết phần body Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Hiển thị văn dạng đậm, nghiêng, gạch chân 3.1.Bài học Khi trình bày trang Web, có lúc cần nhấn mạnh, hay để tạo khác biệt, bạn cần phải hiển thị văn dạng đậm, nghiêng, gạch chân HTML có tag định dạng kiểu chữ để giúp bạn HTML Ðây tag gạch chân Ðây tag nghiêng Ðây tag chữ đánh máy Ðây tag đậm Ðây tag Ðây tag strong Ðây tag strong Kết Ðây tag gạch chân Ðây tag nghiêng Ðây tag chữ đánh máy Ðây tag đậm Ðây tag Strong Ðây tag Strong Ðây tag strikeline Bạn kết hợp tag với nhau, miễn chúng lồng vào cách xác Ví dụ: Tag in nghiêng phải nằm tag in đậm Hơn bạn áp dụng tag với tiêu đề 3.2.Thực hành áp dụng vào file HTML bạn Tạo file HTML Thêm tag định dạng kiểu chữ Lúc file HTML bạn phần body có dạng sau Chú ý tạo file HTML Nếu bạn dùng chương trình soạn thảo văn bản khác NotePad Windows thì bạn phải nhớ lưu kết dạng văn trơn (ASCII) Lưu công việc bạn Dùng trình duyệt mở so sánh với ví dụ mẫu Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Sáu mức tiêu đề 4.1 Bài học Khi trình bày trang Web, bạn phải cần đến tiêu đề theo kích cỡ, phông chữ khác HTML có tag để thực việc Ðể tạo tiêu đề dùng Tên tiêu đề Trong x số có giá trị từ đến kích cỡ tiêu đề Sau ví dụ cho cỡ tiêu đề Tiêu đề cỡ H1 cỡ 36 > Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ 4.2.Thực hành Thêm tiêu đề vào trang Web bạn Mở lại file HTML mà bạn tạo học trước trình soạn thảo văn mà bạn dùng để tạo Thêm đoạn sau vào file HTML Bạn cần lưu ý đoạn thêm vào phải nằm Gới thiệu chung vào trước đoạn "Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Công nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Lưu công việc bạn vừa làm Dùng trình duyệt Web để mở file HTML bạn vừa tạo so sánh với ví dụ mẫu, bạn thấy khác bạn phải xem lại tạo file HTML Chia văn thành nhiều đoạn Trước hết bạn lại mở file HTML mà bạn tạo từ học trước trình soạn thảo văn bản, thay để văn cũ, cuối dòng bạn gõ Enter vài lần, đoạn văn bạn trông sau : Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Công nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Lưu công việc bạn vừa làm mở trình duyệt bạn Khi bạn trông thấy kết trình duyệt sau : Bạn cảm thấy có điều không? Bởi HTML bỏ qua dấu hiệu xuống dòng bạn gõ Enter bỏ qua dòng trống nên bạn thấy đoạn văn mà bạn vừa nhập dù có Enter để xuống dòng liền với Ðể chia đoạn HTML dùng tag Cũng lưu ý tag gắn liền với chia đoạn nên bạn không cần phải đặt trước Chèn dấu chia đoạn vào file HTML bạn Dựng trình soạn thảo văn để mở tile HTML mà bạn tạo từ trước Chúng ta thêm đoạn vào văn bản, sau đoạn đầu Tạp chí Internet Today tạp chí điện tử chuyên Công nghệ thông tin Chúng giúp bạn tìm hiểu khám phá bí ẩn HTML để bạn tự tạo trang Web cho riêng Ðưa trỏ soạn thảo đến cuối đoạn đầu, thêm tag Lúc đoạn văn trông giống sau Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Công nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Tạp chí Internet Today tạp chí điện tử chuyên Công nghệ thông tin Chúng giúp bạn tìm hiểu khám phá bí ẩn HTML để bạn tự tạo trang Web cho riêng Lưu lại công việc bạn Dùng trình duyệt mở lại file HTML bạn so sánh với ví dụ mẫu Như bạn thấy, đoạn văn tách tác dụng tag Thêm số tag phân đoạn Chèn đường thẳng vào trang Web bạn, tag thường dùng để chia phần trang Web Ðẩy văn xuống dòng mới, tag khác tag chỗ không chèn thêm vào trang bạn dòng trống tag Bạn sử dụng tag tạo danh sách, viết dòng thơ Ví dụ : Nếu file HTML có đoạn sau tag Câu lạc Tin học VNN1 Câu lạc Văn hoá VNN3 Tạp chí Internet Today Thì kết sau : Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Preformatled text 5.1.Bài học Phần trình bày cách hiển thị đoạn văn có khoảng trắng dấu xuống dòng Như bạn biết phần trước, trình duyệt bỏ qua dòng trắng, dấu hiệu xuống dòng ta soạn thảo Tuy nhiên bạn hiển thị văn lúc bạn nhập vào cách sử dụng tag Ví dụ Khi bạn muốn trình duyệt Web hiển thị bạn soạn thảo, bạn nhớ dùng tag Bạn xuống dòng Bạn dùng dấu cách thoải mái Sẽ hiển thị sau: Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Thêm kiểu trình bày cho trang Web bạn 6.1.Bài học Ðể làm cho khối văn hơn, ví dụ đoạn trích dẫn, lời khuyên làm cho trang Web bạn trình bày đẹp hơn, sử dụng tag Ðoạn văn nằm cặp tag trình bày thụt vào so với phần thân văn Ví dụ để nhìn thấy đoạn văn sau: Bạn phải viết sau: Khi cần trình bày đoạn văn lùi sâu vào bên so với toàn văn để đoạn văn bật hơn, ví dụ bạn cần hiển thị ý, bạn dùng tag <blockquote > Trình bày đoạn văn tag <blockquote > làm cho đoạn văn bạn bật hơn, trang Web bạn trông chuyên nghiệp Bạn thử xem Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn 16 Bảng 16.1 Bài học Việc trình bày trang Web theo dạng bảng làm cho trang Web bạn chuyên nghiệp Với dạng bảng bạn chia trang Web thành nhiều phần, bạn áp dụng kiến thức học để trang trí riêng cho phần Khi xây dựng bảng, bạn nhớ quy tắc sau: ô cao bên trái, xây dựng ô hàng đầu tiên, sau chuyển xuống hàng thứ hai, xây dựng phần tử hàng thứ > > > > -> > | -| > > > > -> > 16.1.a Những tag bảng Ðể tìm hiểu tag bảng, trước hết ta xét ví dụ sau Hàng cột Hàng cột Hàng cột Hàng cột Hàng cột Hàng cột Trong tag ta thấy thuộc tính border có giá trị 1, điều nghĩa vẽ đường viền quanh bảng với độ dày điểm Mỗi hàng xác định viết tắt table row Mỗi ô định nghĩa viết tắt table data Ðể chỉnh lề ô, bạn thêm thuộc tính sau vào tag Chỉnh lề theo chiều ngang xếp bên trái xếp bên phải xếp vào 16.1.b Các hàng cột Bảng mà bạn tạo bảng đơn giản với ba hàng ba cột Bạn ý bảng sau Bảng Bảng Bảng Ðể tạo bảng trên, sử dụng thuộc tính colspan rowspan tag Thuộc tính colspan=x có tác dụng mở rộng cột bảng, ví dụ bảng để mở rộng ô thứ hàng rộng hai cột bình thường ta đặt: Hàng cột 2-3 Thuộc tính rowspan có tác dụng mở rộng hàng bảng, bảng để mở rộng ô thứ hàng rộng hàng bình thường ta đặt: Hàng 2-3 cột 2 16.1.c Ðiều khiển xuống hàng ô Trong ô, muốn giữ dòng văn dòng, tức không cho xuống hàng thêm thuộc tính NOWRAP vào tag 16.1.d Thêm đầu đề vào bảng (caption) Ngay sau tag , bạn gõ vào tag tựa đề bảng, kết thúc tag đóng Tựa đề bảng Cột - dòng 1 Cột - dòng 1 Cột - dòng 2 Cột - dòng 2 Trong tag bạn thấy có thuộc tính valign="top", nghĩa tạo tựa đề đỉnh bảng Nếu valign="bottom" tựa để bảng đáy bảng 16.1.e.Thêm thông số cho đường viền tạo bảng Muốn thay đổi thông số đường tạo bảng ta thêm thuộc tính cho tag sau: X: Chiều rộng đường viền bảng Y: "Khoảng trắng" liệu bên ô vách ngăn ô Z: Ðộ rộng đường bên bảng để chia ô Ví dụ bảng sau có tag sau: Khi border = ta có bảng đường viền Dùng bảng dạng để xếp văn theo hàng thẳng đứng Ðối với liệu bảng bạn áp dụng tag học ví dụ sau chia hình thành hai cột danh sách cột siêu liên kết Các Website việt nam Công ty VASC - VNN Mạng Phương nam Công ty FPT Sài gòn net Công ty Netna@m Mạng Bộ thương mại 16.1.f.Thêm màu sắc cho bảng Ðể tô màu cho bảng, ta thêm thuộc tính bgcolor với giá trị màu tương ứng vào tag bảng Tô màu cho toàn bảng Tô màu cho hàng Tô màu cho ô Trong XXXXXX giá trị màu Ví dụ Khi chưa tô màu bảng Khi tô màu bảng cách thêm thuộc tính bgcolor vào tag 16.2.Thực hành Bạn ứng dụng tag xây dựng bảng để xây dựng danh sách, ví dụ danh sách lớp Yêu cầu bảng có thuộc tính border = tên danh sách siêu liên kết đến địa thư điện tử người tương ứng Sau xây dựng xong danh sách siêu liên kết, bạn thêm màu sắc vào bảng cho đẹp Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn 17 Forms Form yếu tố thiếu để giao tiếp với máy chủ Nó dùng để nhập liệu, lựa chọn khoản mục, Trong trình liên kết với CGI Script, forms cho phép bạn lựa chọn thông tin từ người dùng lưu trữ cho lần sử dụng sau Trong học ta cách tạo form tag đơn HTML Khi tạo form, ta cần lưu ý hai phần tên nhận dạng (identifier) giá trị (value) form Ví dụ : Trong hộp text box với tên FirstName, người sử dụng gõ vào VASC, liệu gửi đến server FirstName=VASC tag : < tag khác > nằm hai tag BODY thuộc tính METHOD có hai giá trị POST GET Nếu giá trị POST, cho phép gửi liệu từ máy Client đến Server (thường sử dụng Form nhập liệu) Còn với GET sử dụng Form vấn tin Còn ACTION vị trí CGI Script Server thực Các tag Form thường dùng chủ yếu , , Chúng ta xét số Form đơn giản sau : • • Text Blocks : Tạo vùng văn bản, nhập nhiều dòng Text Boxes : Ðể nhập vào dòng đơn • • • • • • • • Password Boxes : Form giống Text Boxes không hiển thị ký tự Radio Buttons : Các nút lựa chọn Check Boxes : Hộp Check Boxes Menus : Tạo hộp Menu đẩy xuống Submit and Reset Buttons : Các Button để nhận thông tin khởi tạo lại thông tin form Hidden Elements : Các yếu tố ẩn Active Images :Tạo ảnh kích hoạt CGI Script :Common Gateway Interface Script 17.1 Bài học Text Blocks : Text Trong cols chiều rộng vùng văn tính theo ký tự rows : chiều cao vùng văn tính theo hàng Name thuộc tính để nhận dạng, sử dụng Script Các bạn lưu ý Text Blocks không bắt đầu tag INPUT Text Boxes : Trong size chiều dài Text Boxes Maxlength, minlength số ký tự tối đa hay tối thiểu nhập vào value giá trị kiểu xâu hiển thị Xin cho biết tên bạn : Password Boxes : Xin cho biết mật mã : Các thuộc tính giống với Text Boxes Chỉ khác bạn nhập liệu ký tự không hiển thị Radio Buttons : Lựa chọn value chứa liệu gửi đến Server Radio Button checked lựa chọn lựa chọn Check Boxes : Lựa chọn Hộp Check Boxes có thuộc tính thành phần giống Radio Button thuộc tính lựa chọn phần văn ghi phía sau nút check box lựa chọn lựa chọn Menus : Text Cũng giống Text Blocks, Menu không INPUT mà SELECT Thuộc tính multiple cho phép bạn chọn nhiều mục, thuộc tính menu đẩy xuống Mỗi lựa chọn bạn mô tả tag OPTION, bạn ngầm định chọn thuộc tính selected có multiple multiple Submit and Reset Buttons : Nút Submit nút để server lấy thông tin từ người sử dụng Sau nhập liệu song, người dùng ấn vào Submit thông tin gửi đến server Nếu có thông tin sai quy định server gửi trả lại kèm với thông tin báo lỗi Còn nút Reset khởi tạo lại toàn giá trị form giá trị mặc định Thuộc tính value chứa phần text hiển thị nút bấm Bạn cầm lưu ý nút Reset khởi động lại Reset Button giá trị form mà Hidden Elements : Hidden Elements bạn sử dụng để lưu trữ thông tin thu từ form trước đó, kết hợp với liệu form Ví dụ : form trước ban đề nghị cho biết tên, bạn lưu lại biến thêm vào form hidden element, sau name liên kết thông tin thu mà không cần người dùng nhập lại tên nhiều lần Các Hidden Elements không browser với tên Tag có hai thuộc tính, thuộc tính name tên thông tin lưu trữ, value thông tin mà thân lưu lại Active Images : Thuộc tính chứa src đường dẫn tới file ảnh server Thuộc tính name cho tên Khi người dùng click vào ảnh tạo độ x y chuột hành bổ sung vào trường name gửi đến server Ví Dụ : Giả sử máy chủ muốn biết bạn từ nơi đến, cho bạn đồ giới Bạn viếc click lên đồ, giả sử bạn sinh Việt nam việc tìm nước Việt nam click lên CGI Script : (A Common Gateway Interface Script) Là chương trình kích hoạt người sủ dụng cách click lên URL Nó viết ngôn ngữ máy tính C hay Pascal, viết Perl hay chương trình giao tiếp người máy, có khả thực độc lập CGI Script dùng để kích hoạt môt chương trình server, lấy thông tin sau thông báo lại cho người sủ dụng Ví dụ bạn dùng CGI Script để gọi chương trình ngày server thông báo kết trang web Ðể tạo liên kết đến CGI Script bạn dùng tag [...]... bày chỉ số trên hay chỉ số dưới, như các công thức hoá học chẳng hạn chúng ta sử dụng các tag cho chỉ số trên và cho chỉ số dưới Ví dụ: Ðể có NH4, ta phải viết NH4 Ðể có x2 ta phải viết x2 13.2 Thực hành Bạn thân mến, bạn đã học được khá nhiều kiến thức vỡ lòng về HTML, bây giờ bạn hãy áp dụng những kiến thức đã học để tạo cho mình một trang Web với... "anh1.jpg" align = left vspace = 10 hspace = 20> So với khi không có các thuộc tính vspace và hspace 9.1.c Chỉnh lề và sắp xếp văn bản Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một tag căn chỉnh văn bản nữa, đó là Vùng văn bản chịu ảnh hưởng của tag này dựa vào thuộc tính align ... Chỉ mục con Ta có danh sách như sau : 12.2.Thực hành Ðưa danh sách vào trang Web của bạn 1 Mở một file HTML mới, trong phần body bạn tạo một danh sách bằng các tag HTML như sau : Mục lục Chương một Giới thiệu chung Những kiến thức vỡ lòng về HTML Chương hai Các tag thông dụng Tag định dạng kiều chữ Tag chèn ảnh Các... thị Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn 9 Căn chỉnh lề 9.1.Bài học 9.1.a.Sắp xếp văn bản vào giữa trang Trong các bài học trước, bạn thấy rằng trang Web của bạn chỉ được căn lề bên trái, và bạn muốn trình bày trang Web của mình đẹp hơn bằng cách sắp xếp các đoạn văn bản vào giữa trang, HTML có nhiều cách giúp bạn thực hiện điều này Cách thứ nhất: Bạn đặt đoạn văn bản. .. nằm trên một máy với trang Web đầu Ðể đơn giản trước hết bạn tạo một file HTML thứ hai và đặt nó cùng folder với trang mà bạn đã tạo ở các bài trước Muốn tạo một siêu liên kết ta dùng Văn bản đại diện cho mối liên kết Bất cứ đoạn văn bản nào nằm giữa và đều là một siêu văn bản liên kết tới các trang Web khác và nó được gạch dưới Thực hành 1.Tạo một... 11.2.Thực hành 1.Tạo một file HTML, sau khi thêm các phần thông tin cho trang Web, bạn thêm đoạn sau vào cuối phần body Chuyên mục Chân trời tri thức - Tạp chí Internet Today Copyright @ 2000 by VASC Ðịa chỉ : 99 Triệu Việt Vương - Hà nội E_mail : i-today@vasc.vnn.vn Mọi ý kiến về bộ sách HTML xin gửi về: Trần Việt... danh sách không có thứ tự ở chỗ thay tag bằng tag Ví dụ : Nếu trong phần body của file HTML có đoạn Các bước chuẩn bị để học HTML Chương trình soạn thảo văn bản trơn (như NotePad của Windows) Trình duyệt Web(như Internet Explorer hoặc Nescape Navigator) Bộ sách về HTML của tạp chí Internet Today Danh sách định nghĩa (definition lists) Danh sách định nghĩa... Xin chuc mung ban 9.1.b.Sắp xếp tương đối giữa văn bản và hình ảnh Khi muốn có văn bản phủ xung quanh hình ảnh, bạn chỉ việc thêm thuộc tính align vào tag Ví dụ: sẽ cho kết quả: so với không có thuộc tính align: Khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh, bạn hãy sử dụng tag... trên trình duyệt và so sánh với ví dụ mẫu Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn 13 Trang trí cho văn bản 13.1.Bài học Qua các bài học trước bạn đã biết cách thêm màu sắc cho nền và văn bản thông qua việc thiết lập các thuộc tính cho tag Trong bài này bạn sẽ học cách thay đổi màu sắc, kích thước, font chữ của phần văn bản trong trang Web của bạn 13.1.a.Cỡ font... chấm câu hay sau dấu phảy, chèn khoảng trắng vào đầu mỗi đoạn văn bản Muốn chèn khoảng trắng ta dùng ký hiệu Ngoài các ký hiệu đã mô tả ở trên, HTML còn cung cấp thêm cho chúng ta một số ký hiệu đặc biệt nữa, đó là: © thay cho â ® thay cho đ Ví dụ 7.2 Thực hành 1.Tạo một file HTML sau đó thêm phần sau vào trong phần body HTML có thể hiển thị được các ký tự đặc biệt như: Các kýtựlatin:>>>ÆñÞóßÿ ... file HTML File HTML bắt đầu thẻ kết thúc thẻ < /html> Cặp thẻ báo cho trình duyệt Web biết đọc file có chứa mã HTML, thẻ < /html> có tác dụng kết thúc file HTML Bên cặp thẻ < /html> ... phải xếp vào 16.1.b Các hàng cột Bảng mà bạn tạo bảng đơn giản với ba hàng ba cột Bạn ý bảng sau Bảng Bảng Bảng Ðể tạo bảng trên, sử dụng thuộc tính colspan rowspan tag ... Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm < /html> Lưu file với phần mở rộng