Báo cáo Thực hành Nhập môn CNTT với file word dễ dàng chỉnh sửa và dễ dàng cho những ai học CNTT và muốn làm báo cáo nhập môn này Báo cáo về kĩ thuật lập trình code, đầy đủ ảnh và mọi thứ cho bài báo cáo thêm đẹp hơn..v..v..................................................
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ——————– * ——————— BÁO CÁO MƠN HỌC NHẬP MƠN CƠNG NGHỆ THƠNG TIN Nhóm sinh viên thực hiện: Lê Hải Quân – CNTT.07 MSSV: 20173316 Phùng Văn Chiến – CNTT.07 MSSV: 20171163 Dam SamNang – CNTT.07 MSSV: 20172792 Nguyễn Đình Nhu - CNTT.07 MSSV: 20171968 Giáo viên hướng dẫn: Tạ Minh Chí HÀ NỘI Ngày tháng 10 năm 2017 Lời cảm ơn Chúng em xin chân thành cảm ơn thầy Nguyễn Mạnh Tuấn cô Lê Thanh Hương cung cấp cho chúng em kiến thức vơ cứng bổ ích chúng em bắt đầu tìm hiểu Cơng nghệ Thơng tin giúp đỡ chúng em nhiều trình viết báo cáo Lời nói đầu Chúng em sinh viên bắt đầu học ngành Công nghệ thông tin Đây ngành khoa học phát triển nhanh chúng em cần có tảng kiến thức vững chắc, phương pháp nghiên cứu hợp lý theo kịp bước tiến ngành Dưới hướng dẫn thầy cô giảng dạy môn “Nhập mơn Cơng nghệ Thơng tin” chúng em tìm hiểu kiến thức Scilab, LATEX , Web Đây công cụ để sinh viên Cơng nghệ thơng tin chúng em tiếp tục học kiến thức khác Tóm tắt nội dung Trong báo cáo này, chúng em trình bày kiến thức Scilab, LATEX Web (gồm (X)HTML, CSS JavaScript) 1.Scilab: • Cách cài đặt chạy phần mềm Scilab Windows Linux • Các kiểu liệu tốn tử Scilab • Xử lý ma trận Scilab • Cách vẽ đồ thị Scilab 2.LATEX: • Cách cài đặt chạy số engine (MiKTeX, Texlive) front-end (như Texmaker, TeXnicCenter) Windows Linux • Cấu trúc tập tin mã nguồn • Một số lệnh đơn giản 3.Web: • Các khái niệm WWW • Khái niệm (X)HTML, CSS, JavaScript • Một vài vấn đề thiết kế Web Mục lục Lời cảm ơn Lời nói đầu Tóm tắt nội dung Mục lục Giới thiệu Chương1 Scilab 1.1 Giới thiệu chung 1.2 Các phương thức tương tác với Scilab 1.3 Sử dụng help Scilab 10 1.4 Các loại biến Scilab 11 1.5 Ma trận, vector 11 1.5.1 Khởi tạo ma trận 11 1.5.2 Truy cập phần tử ma trận 12 1.5.3 Các phép toán ma trận 12 1.5.4 Xây dựng tính tốn đa thức 13 1.5.5 Xây dựng giải hệ phương trình 14 1.6 Đồ thị 14 Chương LATEX 17 2.1 LATEX gì? 17 2.2 Cơ LATEX 17 2.2.1 Các tập tin nhập liệu 17 2.2.2 Khoảng trắng 17 2.2.3 Một số kí tự đặc biệt 17 2.2.4 Lệnh LATEX 18 2.2.5 Chú thích LATEX 18 2.2.6 Một số engine va font-end dùng để soạn thảo 18 2.3 Cấu trúc tổng quát tập tin mã nguồn .19 2.3.1 Lệnh documentclass 19 2.3.2 Khai báo package 19 2.4 Một số lệnh để tạo chương, mục 19 2.5 Soạn thảo văn 20 2.5.1 Font 20 2.5.2 Môi trường 20 2.6 Soạn thảo cơng thức tốn học 21 2.6.1 Một số kí hiệu 21 2.6.2 Mũ, số dưới, thức, phân thức 21 2.6.3 Khoảng cách chế độ toán học 21 2.6.4 Cơng thức nhiều dịng 21 2.7 Tham chiếu văn 22 2.8 Chèn hình vào văn 22 2.8.1 Một số tham số hay dùng 22 2.8.2 Tạo tiêu đề cho ảnh 22 2.9 Ứng dụng 22 Chương HTML-XHTML, CSS, JavaScript 23 3.1 Một số khái niệm WWW 23 3.1.1 Khái niệm siêu văn 23 3.1.2 Các thành phần Web 23 3.2 Một số công cụ thường dùng để tạo trang (X)HTML, CSS, JavaScript 23 3.3 HTML-XHTML 25 3.3.1 HTML, XHTML gì? 25 3.3.2 Cú pháp tags (thẻ) (X)HTML 25 3.3.3 Chú thích 26 3.3.4 Cấu trúc trang HTML-XHTML 26 3.3.5 Validate trang web 27 3.3.6 Một số thẻ hay dùng 27 3.3.7 Form (X)HTML 28 3.4 CSS 29 3.4.1 CSS 29 3.4.2 Cấu trúc quy tắc CSS 30 3.4.3 Một số thuộc tính thường dùng 30 3.5 JavaScript 30 3.5.1 JavaScript 30 3.5.2 Các thành phần tạo nên JavaScript 30 3.5.3 Một vài ứng dụng 31 3.6 Một số vấn đề thiết kế Web 31 3.6.1 Nên dung CSS thay cho bảng,nhất trang Web 31 3.6.2 Với đoạn JavaScript, CSS lớn, dungfcho toàn Website nên đặt file 31 Kết luận 32 Tài liệu tham khảo 33 Giới thiệu Chúng em thấy vấn đề vấn đề quan trọng để chúng em tiếp tục học tập nghiên cứu Công nghệ Thông tin Cụ thể: • Scilab: Đây cơng cụ miễn phí, mạnh để giúp giải số tốn vật lý • LATEX: Đây cơng cụ để chúng em viết báo cáo học tập, nghiên cứu vấn đề chun mơn • Web: Đây kiến thức để chúng em tự thiết kế trang web cá nhân cho tập thể Chương1 Scilab 1.1 Giới thiệu chung • Scilab ngơn ngữ lập trình kết hợp với phép toán số học nhiều lĩnh vực khoa học • Scilab thuộc loại ngơn ngữ thơng dịch • Khả xứ lý với scilab: – – – – – Số học tuyến tính, ma trận thưa Các hàm đa thức hàm hữu tỷ Xử lý đồ thị 2D, 3D Giải phương trình vi phân, phương trình đại số • Cài đặt Download link: http://www.scilab.org/product/scilab/download Cài đăt software thông thường Để cài đặt đầy đủ, cần có internet để tải module cần thiết 1.2 Các phương thức tương tác với Scilab • Console (Hình 1.1), Editor (Hình 1.2) (kèm khả Docking (Hình 1.3)) Console: Hình 1.1 Console -Editor Dễ dàng soạn thảo file chứa tập đọan code Scilab Cách gọi editor: vào Application/Editor vào editor() từ console Hình 1.2 Editor – Một số tính Load into Scilab: chạy tồn đoạn code file soạn thảo Evaluate selection: Chạy toàn code bôi đen Execute file into scilab: Chạy file gọi hàm exec Khác với Load into Scilab: cho output hình có lệnh display() – Editor-Docking: Giúp làm việc đồng thời với editor console Hình 1.3 Docking – Lưu ý: Có thể tích hợp nhiều cửa sổ làm Có thể có nhiều lựa chọn kết hợp Kết hợp theo tab • Sử dụng hàm exec: File sci sce để dễ quản lý code – File sci: chứa hay nhiều hàm tự viết Các hàm sau đươc load vào môi trườngScilab gọi getf – File sce chứa hàm tự viết mã lệnh thực thi Scilab • Ngồi cịn có phương pháp xử lí theo lơ 1.3 Sử dụng help Scilab Vào chức help từ công cụ Nếu biết tên lệnh quên chưa biết cú pháp dùng lệnh help với tên lệnh cần tra Ví dụ: help sin // cho biết cú pháp hàm sin help + // help tốn tử Help Scilab Nếu khơng biết rõ tên lệnh, dùng lệnh apropos để tìm thơng tin liên quan với từ khóa Ví dụ: apropos logarithm // Cho kết hàm liên quan đến logarithm 1.4 Các loại biến Scilab Trong Scilab, loại biến coi ma trận (trừ số loại lists số cấu trúc liệu đặc biệt) Bao gồm: biến thực, biến boolean, biến phức, biến xâu, ma trận (bao gồm vector) Với kiểu biến có số tốn tử tương ứng Tên biến: Để dài tùy ý xét 24 ký tự Mã ASCII: a-z, A-Z, 0-9, % _ # ! ? $ Có phân biệt chữ hoa, chữ thường 10 Đồ thị không gian chiều: Có thể vẽ đồ thị hàm biến không gian chiều, tương tự trường hợp trên, dùng hàm “plot3d” “fplot3d” Ví dụ:(Hình 1.6) Vẽ đồ thị hàm z=sin(x)*y với x∈ [0;2π],y ∈ [0;5] Ta soạn thảo Scilab: x=[0:%pi/16:2*%pi]’ y=[0:0.5:5] z=sin(x)*y plot3d(x, y, z) Hình 1.6: Đồ thị không gian chiều Chương2 LATEX 2.1 LATEX gì? LATEX hệ thống chữ, ngôn ngữ biểu diễn văn dẫn xuất từ TEX Phiên nhất: LATEX2e Tác giả Lesile Lamport Ưu, nhược điểm • Ưu điểm – Soạn thảo văn lớn không ảnh hưởng đến tốc độ gõ Với Word OpenOffice, tài liệusẽ bị định dạng lại ta gõ – Tài liệu LATEX thường chuyên nghiệp tài liệu khác – Gủ công thức tiện lợi – Miễn phí (trừ số front-end) 15 – Kích thước mã nguồn khiêm tốn • Nhược điểm – Khơng nhìn thấy văn gõ (phải LATEX mã nguồn thấy) – Phải nhớ tên lệnh (hoặc phải có tài liệu) – Hơi khó khăn bắt đầu 2.2 Cơ LATEX 2.2.1 Các tập tin nhập liệu Dữ liệu đưa vào LATEX văn thơng thường lưu dạng kí tự Tập tin chứa phần văn lệnh định dạng LATEX 2.2.2 Khoảng trắng Các kí tự khoảng trắng hay tab xem gọi kí tự “khoảng trắng” Nhiều kí tự khoảng trắng liên tiếp coi khoảng trắng Các khoảng trắng vị trí đầu hàng bỏ qua Ngồi kí tự xuống hàng đơn xem khoảng trắng Một hàng trắng hai hàng văn xác định việc kết thúc đoạn văn Nhiều hàng trắng xem hàng trắng 2.2.3 Một số kí tự đặc biệt Những kí tự sau kí tự dành riêng Nó kí tự có ý nghĩa đặc biệt L ATEX hay khơng thuộc vào font chữ Khi bạn nhập chúng cách trực tiếp thơng thường chúng khơng in chúng cho LATEX làm số việc khơng định trước bị báo lỗi Các kí tự đặc biệt là: # % ^ & _ { } ~ \ Để sử dụng kí hiệu trên, cần thêm vào dấu gạch chéo phía trước "\" với kí tự gạch chéo dùng: \textbackslash 2.2.4 Lệnh LATEX Các lệnh LATEXphân biệt chữ hoa, thường Cấu trúc lệnh: \tên lệnh{tham số băt buộc}[tham số tùy chọn] 2.2.5 Chú thích LATEX - Chú thích ngắn: dùng kí tự % : mà latex gặp kí tự % bỏ qua phần lại hàng xử lý Ngồi ra, kí tự xuống hàng hàng trắng đầu hàng bỏ qua Có thể sử dụng kí tự để ghi vào tập tin soạn thảo Ngồi kí tự % cịn sử dụng để chia hàng liệu nhập vào dài mà kí tự khoảng trắng hay xuống hàng không phép xuất - Chú thích dài: dùng mơi trường comment gói verbatim 2.2.6 Một số engine front-end dùng để soạn thảo Engine • Windows: MiKTeX Link: http://miktex.org/ • Linux: TeX Live Có thể cài qua repository Front-end • Texmaker (http://www.xm1math.net/texmaker/) Chạy Windows, Linux MacOS (Hình 2.1) • TeXnicCenter (http://www.texniccenter.org/) (Hình 2.2) 16 Hình 2.1 Texmaker Hình 2.2 TeXnicCenter 2.3 Cấu trúc tổng quát tập tin mã nguồn \documentclass[tham số tùy chọn]{class} % khai báo package sử dụng \usepackage[ ] class \begin{document} % nội dung \end{document} 2.3.1 Lệnh documentclass Dùng để khai báo loại tài liệu Tham số “class” để khai báo loại tài liệu, bao gồm: article, proc, minimal, report, book, slides, letter Các tham số tùy chọn để tùy chỉnh số định dạng loại tài liệu kích thước trang giấy, kích thước font mặc định, 17 2.3.2 Khai báo package Sử dụng lệnh \usepackage[ ]{tên package} Trong tham số tùy chọn để đặt thơng số cho package sử dụng Ví dụ: \usepackage[utf8]{vietnam} Dùng để sử dụng gói vntex để dùng tiếng Việt \usepackage[unicode]{hyperref } Dùng để tạo tham chiếu cho mục lục, tham số “unicode” để tạo bookmark hỗ trợ tiếng Việt 2.4 Một số lệnh để tạo chương, mục Các lệnh để tạo chương mục từ lớn đến nhỏ (với article class) \section{ .} \subsection{ .} \subsubsection{ .} \paragraph{ .} \subparagraph{ .} Nếu muốn chia tài liệu thành phần mà không ảnh hưởng đến việc đánh số chương, mục dùng lệnh \part{ .} Với report book, có thêm lệnh: \chapter{ .} 2.5 Soạn thảo văn 2.5.1 Font Kiểu font Có thể dùng lệnh thay đổi font lệnh khai báo font, lệnh thay đổi font thay đổi font ảnh hưởng với nội dung tham số lệnh lệnh khai báo font ảnh hưởng tới tài liệu từ vị trí lệnh sau (hoặc khối { } chứa lệnh) Một số lệnh hay dùng: Lệnh thay đổi font Lệnh khai báo font Tác dụng \textrm \rmfamily font roman \texttt \ttfamily font teletype \textsf \sffamily font sans serif \textit \itshape in nghiêng \textbf \bfshape in đậm Kích thước font Khai báo Mơi trường \tiny tiny \scriptsize scriptsize \footnotesize footnotesize \small small \normalsize normalsize \large large \Large Large \LARGE LARGE \huge huge \Huge Huge 2.5.2 Môi trường Cấu trúc 18 \begin{tên môi trường} nội dung \end{tên môi trường} Môi trường tạo danh sách, miêu tả Để tạo danh sách không đánh thứ tự: dùng môi trường itemsize , để tạo danh sách có đánh thứ tự: dùng môi trường enumerate , để tạo môi trường dùng để miêu tả: dùng môi trường description Môi trường dùng để lề • Căn lề trái: dùng mơi trường flushleft • Căn lề phải: dùng môi trường flushright • Căn giữa: dùng mơi trường center Mơi trường trích dẫn Mơi trường “quote” sử dụng với trích dẫn, câu quan trọng ví dụ Mơi trường “quotation” sử dụng với trích dẫn dài, có nhiều đoạn văn, dịng đoạn indent Môi trường “verse” sử dụng để trích dẫn thơ Mơi trường tạo bảng biểu Dùng môi trường tabular -Cấu trúc: \begin{tabular}[pos]{table spec} % nội dung \end{tabular} Tham số “table spec” định nghĩa cấu trúc cột bảng: “l” để cột lề trái, “c” để cột giữa, “r” để cột lề phải, “|” để đường kẻ dọc cột Tham số “pos” để vị trí bảng so với chữ xung quanh Trong bảng: hai cột liên tiếp ngăn cách dấu “& ”, hai hàng liên tiếp ngăn cách dấu “\\” Để tạo đường kẻ dịng dùng “\hline” 2.6 Soạn thảo cơng thức tốn học Nếu cơng thức ngắn, viết văn dùng: $ cơng thức $ Với công thức dài hơn, dùng môi trường equation equation* không muốn đánh số 2.6.1 Một số ký hiệu \lambda, \xi, \pi, \theta, \muλ,ξ,π,θ,µ \Phi, \Omega, \DeltaΦ,Ω,∆ 2.6.2 Mũ, số dưới, thức, phân thức Lệnh thay đổi font Lệnh khai báo font ^{ } x^2 _{ } x_1 \sqrt[ ]{ } \sqrt[3]{2} \frac{ } { } \frac{5}{2} Tác dụng x2 2.6.3 Khoảng cách chế độ tốn học Để tạo khoảng cách hai cơng thức liên tiếp dùng lệnh \quad \qquad để tạo khoảng cách lớn Ví dụ: 19 \begin{equation*} \int_1^2 \ln x \mathrm{d}x \qquad \int_1^2 \ln x \,\mathrm{d}x \end{equation*} Kết quả: 2.6.4 Cơng thức nhiều dịng Dùng mơi trường eqnarray Môi trường tạo cột, cột đầu canh lề trái, cột thứ hai canh lề giữa, cột thứ ba canh lề phải Các dòng đánh số mặc định, nhiên bỏ số lệnh \nonumber dòng tương ứng, tất dịng cách dùng mơi trường eqnarray* Các cột tách biệt &, dòng phân tách \\ Ví dụ: \begin{eqnarray*} f & = & x^2 + x f’ & = & 2x + \end{eqnarray*} Kết quả: f f0 x2 + x 2x + = = 2.7 Tham chiếu văn Dùng lệnh \label{marker} để tạo tham chiếu, lệnh \ref{marker} để tham chiếu đến vị trí đánh dấu \pageref{marker} để tham chiếu đến trang có label 2.8 Chèn hình vào văn Phải thêm gói graphicx: \usepackage{ graphicx } Để chèn hình dùng lệnh \includegraphicstên file Ví dụ để chèn hình file vidu.jpg \includegraphics{vidu.jpg} 2.8.1 Một số tham số hay dùng width, height scale angle Xác định chiều rộng chiều dài ảnh Xác định tỉ lệ ảnh so với ảnh gốc Xác định góc quay ảnh (ngược chiều kim đồng hồ) 2.8.2 Tạo tiêu đề cho ảnh Dùng thêm mơi trường figure lệnh caption Ví dụ: \begin{figure} \includegraphics{vidu.jpg} \caption{Ví dụ tiêu đề ảnh} \end{figure} 2.9 Ứng dụng Chúng em áp dụng kiến thức LATEX học để hoàn thành báo cáo 20 Chương3 HTML-XHTML, CSS, JavaScript 3.1 Một số khái niệm WWW 3.1.1 Khái niệm siêu văn Hypertext văn (text) máy tính có liên kết đến văn khác truy cập trực tiếp thơng qua click chuột, nhấn phím Hyperlink liên kết từ file hypertext đến file khác Hypermedia mở rộng hypertext, đối tượng văn bản, đồ họa, âm thanh, video 3.1.2 Các thành phần Web • Web hệ thống tài liệu hypertext liên kết với thơng qua mạng Internet • Các thành phần Web – WebPage: trang Web – Website: Là tập hợp WebPage có nội dung thống – Uniform Resource Locator: dùng để định vị tài nguyên Internet theo cách thuận tiện cho ngườisử dụng (thay cho địa IP không mang ý nghĩa khó nhớ) Cấu trúc: giao thức://địa máy:cổng/đường dẫn đến tài nguyên – Web Server: cung cấp tài nguyên cho máy khác – Web Browser: dùng để khai thác dàch vụ Web 3.2 Một số công cụ thường dùng để tạo trang (X)HTML, CSS, JavaScript Dreamweaver: Là cơng cụ có phí, mạnh, dễ sử dụng (Hình 3.1) Hình 3.1: Macromedia Dreamweaver 21 Notepad++: Là cơng cụ miễn phí, nguồn mở nhiên khơng mạnh Dremweaver, có tính highlight auto-completion nhiên hạn chế.(Hình 3.2) Link:http://notepad-plus-plus.org/ Hình 3.2: Notepad++ Gedit: Là cơng cụ miễn phí, nguồn mở, ban đầu viết cho Linux, kèm hầu hết phân phối dùng GNOME.(Hình 3.3) Hình 3.2: Gedit 22 3.3 HTML - XHTML 3.3.1 HTML, XHTML gì? Định nghĩa HTML (HyperText Markup Language) ngôn ngữ đánh dấu dùng để miêu tả trang Web XHTML (eXtensible HyperText Markup Language) có chức tương tự HTML tuân theo XML (Extensible Markup Language) định nghĩa chặt chẽ HTML XHTML parser XML xử lý, dễ xử lý ngơn ngữ, tảng khác HTML (tận dụng thư viện có sẵn) HTML XHTML tạo thành từ tags (gồm tag mở tag đóng) để định nghĩa cách hiển thành phần trang web Các phiên Phiên thức HTML HTML 4.01, HTML dự thảo với nhiều tính Phiên HTML Tim Berner Lee phát minh W3C đưa thành chuẩn vào năm 1994, phiên 4.01 hoàn thành vào 24-12-1999 Phiên thức XHTML XHTML 1.1, đời vào tháng năm 2001 3.3.2 Cú pháp tags (thẻ) (X)HTML Bao gồm thẻ mở thẻ đóng, nội dung nằm thẻ, thẻ lồng thẻ phải mở đóng thứ tự (mở trước phải đóng sau) thẻ mở có thuộc tính (attributes) Ví dụ: Chữ vừa in đậm vừa in nghiêng chứa lệnh định dạng class “ex" Với XHTML tên thẻ bắt buộc viết thường, với HTML khơng phân biệt chữ thường chữ hoa Tuy nhiên trình duyệt thường khơng thơng báo lỗi cú pháp dẫn đến kết hiển thị không mong muốn validate (3.3.5) báo lỗi 3.3.3 Chú thích Cách thích (X)HTML: 3.3.4 Cấu trúc trang HTML - XHTML Cấu trúc tổng quát DOCTYPE Dùng để phiên (X)HTML sử dụng trang • HTML + 23 + + • XHTML 1.0 + + + Phần head Dùng để chứa số thẻ Chứa tiêu đề trang web Chứa link đến số file style sheet (CSS) JavaScript Đưa số mã CSS vào trang web Đưa số đoạn script vào trang web Thêm số thông tin keyword, description để miêu tả trang web (phục vụ search engine) Một số thẻ khác , Phần body Dùng để chứa nội dung trang web 3.3.5 Validate trang web Là công việc để kiểm tra xem trang web có tuân thủ đầy đủ theo chuẩn W3C khơng, mục đích để đảm bảo tối đa việc hiển thị trình duyệt Có thể validate cách vào trang http://validator.w3.org dùng số addons trình duyệt Html Validator (Firefox, Chrome) 3.3.6 Một số thẻ hay dùng Các thẻ khối (block-level) thường dùng Là thẻ hiển thị hình dạng đoạn riêng Ví dụ:, , , •
định nghĩa đoạn (paragraph) trang web (ở trước sau thẻ tự động xuống dịng) • đến dùng để định nghĩa tiêu đề ( lớn nhất, nhỏ nhất) • nhóm tags để tạo mục tiểu mục có cứng cách hiển thị (kết hợp CSS, khơng kết hợp với CSS không ảnh hưởng đến cách hiển thị trang web) Các thẻ inline thường dùng Là thẻ không tạo đoạn Ví dụ: , , , 24 • in nghiêng chữ • in đậm chữ • gạch chân • tác dụng tương tự thẻ dùng với thẻ inline Các thẻ dùng để tạo bảng • dùng để tạo bảng • dùng để tạo hàng • dùng để tạo Ví dụ: Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 Kết quả: Một số thẻ để chèn nội dung đa phương tiện • Thẻ dùng để chèn hình ảnh Thuộc tính “src” để đường dẫn đến file ảnh, thuộc tính “alt” (alternative) hiển thị trường hợp trình duyệt khơng hiển thị ảnh khơng hiển thị ảnh, dùng chương trình đọc hình để hỗ trợ người khuyết tật, máy tìm kiếm dùng thuộc tính để lập mục cho web Hiện nhiều trình duyệt hiển thị thuộc tính thích cho ảnh di chuột vào Ví dụ: • Thẻ để chèn flash, nhạc, phim 3.3.7 Form (X)HTML Form (X)HTML cho phép người dùng nhập thông tin để gửi máy chủ Form (X)HTML đặt thẻ Một số thuộc tính thẻ : 25 • action: địa trang web chương trình server xử lý liệu form • method: cách thức liệu gửi server: có cách: “get” “post” Một số công cụ để nhập liệu form: • Với thẻ tạo ô nhập liệu, nút tùy vào thuộc tính “type” Một số giá trị thuộc tính “type”: -text Tạo textbox -password Tạo ô nhập password -checkbox Tạo chọn chọn nhiều giá trà lúc -radio Tạo ô chọn, chọn số ô -submit Tạo nút để gửi liệu server -reset Tạo nút để đưa giá trà ô form trạng thái mặc định • Với thẻ tạo ô cho phép nhập liệu liệu nằm nhiều dịng • Với thẻ tạo danh sách lựa chọn Thẻ để lựa chọn Nếu thẻ khơng thiết lập thuộc tính “multiple” “size” có drop-down box, khơng có danh sách Ví dụ: Đỏ Xanh cây Vàng Kết quả: 3.4 CSS 3.4.1 CSS gì? CSS (cacsading style sheet) sử dụng để định dạng trang web (màu, kích thước font chữ, độ rộng, màu đường, khoảng cách thành phần trang, ) Vị trí đặt CSS • Ở trang web: đặt thẻ style phần head thuộc tính style thẻ có thuộc tính Ví dụ: body{ color:#000000; backgroundcolor:#ffffff; font-family:arial, verdana, sans-serif; } h1 {font-size:18pt;} p {font-size:12pt;} 26 hoặc: • Trong file ngồi (thường có phần mở rộng la css), đưa vào trang web cách dùng thẻ phần Ví dụ: 3.4.2 Cấu trúc quy tắc CSS Bao gồm hai phần: selector để đối tượng áp dụng khai báo này, declaration để định nghĩa định dạng • Selector: tên thẻ, class (xác định thuộc tính "class" thẻ), id (xác định thuộc tính "id" thẻ), có tính kế thừa • Delaration: Gồm phần,có dạng: property:value; -property: thuộc tính -value: xác định giá trị thuộc tính Ví dụ: td{width:36px} Comment CSS: bắt đầu "/*" kết thúc "*/" 3.4.3 Một số thuộc tính thường dùng Về font: Tên Mục đích font Thiết lập nhiều thuộc tính font lúc font-family Xác định họ font font-size Kích thước font font-style Kiểu font Về background: Một số giá trị cho phép Ghép giá trị serif, sans-serif, monospace 10px, small, smaller, 10% normal, italic, oblique Tên Mục đích Một số giá trị cho phép background-color Thiết lập màu #cccccc background-image Thiết lập ảnh url{bg.gif} Ngồi dùng CSS để thay cho bảng số trường hợp giúp tạo cho người dùng cảm giác tốc độ tải trang nhanh 3.5 JavaScript 3.5.1 JavaScript gi? JavaScript ngôn ngữ kịch phép lập trình truy cập đối tượng trang web clien-side số đối tượng trình duyệt, hỗ trợ tạo trang web động số hiệu ứng đơn giản JavaScript ngơn ngữ có kiểu động, hỗ trợ hướng đối tượng (dưới dạng "prototype-based",không phải "classbased" Java, C++) Vị trí đặt mã JavaScript Dùng thẻ , mã đặt phần dùng thuộc tính "src" thẻ script để file chứa mã 27 3.5.2 Các thành phàn tạo nên JavaScritp • ECMAScript: định nghĩa cú pháp,kiểu, cấu trúc, từ khóa, • Document Object Model(DOM) ánh xạ trang web thành hệ thống nút • Browser Object Model(BOM)cho phép truy suất số thành phần Browser Cú pháp JavaScript phần lớn tương tự ngôn ngữ C/C++, Java JavaScript ngơn ngữ có kiểu động 3.5.3 Một vài ứng dụng • Làm cho giao diện trang web sinh động (có thể có số hiệu ứng đơn giản) • Là thành phần thiếu AJAX (Asynchronous JavaScript and XML) dùng để tăng tính tương tác, tốc độ cho trang Web,đồng thời giảm tải cho sever cần cập nhật phần trang Web (không bắt buộc phải cập nhật toàn trang cũ) 3.6 Một số vấn đề thiết kế Web 3.6.1 Nên dùng CSS thay cho bảng, trang web Lý do: • Nếu dùng bảng, trình duyệt phải tải hết nội dung trang hiển thị, tạo cho người dùng cảm giác trang web tải chậm • Dùng CSS lúc chỉnh sửa giao diện đễ 3.6.2 Với đoạn JavaScript, CSS lớn, dùng cho toàn website nên đặt file ngồi Lý do: • Nếu đặt file ngồi, trình duyệt phải tải lần cache lại, giảm thời gian tải,giảm tải cho sever • Nếu cần chỉnh sửa, cần sửa file nhất, giảm sai sót Kết luận Trên báo cáo chúng em nội dung Scilab, LATEX , Web Chúng em cố gắng nhiên báo cáo khơng tránh khỏi có sai sót, em xin đón nhận góp ý thầy cô để báo cáo sau chúng em dần tốt 28 Tài liệu tham khảo [1] Michael Baudin Introduction to Scilab Digiteo, 2010 [2] Graeme Chandler and Stephen Roberts Introduction to scilab, 2002 [3] Guido Gonzato Latex for word processor users, 2003 [4] Tobias Oetiker, Hubert Partl, Irene Hyna, and Elisabeth Schlegl The not so short in troduction to latex2e, 2010 [5] Hàn Thế Thành Hỗ trợ tiếng Việt cho TeX [6] W3C HTML 4.01 Specification, 1999 [7] W3C Cascading Style Sheets Level Revision (CSS2.1) Specification, 2009 29 ... giảm sai sót Kết luận Trên báo cáo chúng em nội dung Scilab, LATEX , Web Chúng em cố gắng nhiên báo cáo khơng tránh khỏi có sai sót, em xin đón nhận góp ý thầy để báo cáo sau chúng em dần tốt 28... dạy môn ? ?Nhập môn Công nghệ Thông tin” chúng em tìm hiểu kiến thức Scilab, LATEX , Web Đây công cụ để sinh viên Công nghệ thông tin chúng em tiếp tục học kiến thức khác Tóm tắt nội dung Trong báo. .. chọn]{class} % khai báo package sử dụng \usepackage[ ] class \begin{document} % nội dung \end{document} 2.3.1 Lệnh documentclass Dùng để khai báo loại tài liệu Tham số “class” để khai báo loại tài