BTL word Thực hành nhập môn CNTT ĐHBKHN

BTL word Thực hành nhập môn CNTT ĐHBKHN Gồm 1 bản demo và 1 bản chỉnh sữa giống với BTL word nhập môn CNTT trường đại học Bách Khoa Hà Nội Báo cáo môn học Nhập môn CNTT file word đầy đủ về lập trình, code

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

LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn thầy Nguyễn Mạnh Tuấn và cô Lê Thanh Hương đã cung cấp cho chúng em những kiến thức vô cứng bổ ích khi chúng em bắt đầu tìm hiểu về Công nghệ Thông tin cũng như đã giúp đỡ chúng em rất nhiều trong quá trình viết bản báo cáo này

LỜI NÓI ĐẦU

Chúng em là những sinh viên mới bắt đầu học về ngành Công nghệ thông tin Đây là mộtngành khoa học mới nhưng phát triển rất nhanh do đó chúng em cần có một nền tảng kiến thức vững chắc, và phương pháp nghiên cứu hợp lý mới có thể theo kịp những bước tiến củangành Dưới sự hướng dẫn của các thầy cô giảng dạy môn “Nhập môn Công nghệ Thông

những công cụ cơ bản nhất để sinh viên Công nghệ thông tin chúng em có thể tiếp tục học những kiến thức khác

LOGO 1

• Cách cài đặt và chạy phần mềm Scilab trên Windows cũng như Linux

• Các kiểu dữ liệu và toán tử cơ bản của Scilab

• Các khái niệm cơ bản về WWW

• Khái niệm cơ bản về (X)HTML, CSS, JavaScript

• Một vài vấn đề trong thiết kế Web

MỤC LỤC

Lời cảm ơn 2

Lời nói đầu 3

Tóm tắt nội dung 4

Giới thiệu 6

Chương1 Scilab 7

1.1 Giới thiệu chung 7

1.2 Các phương thức tương tác với Scilab 7

1.3 Sử dụng help trong Scilab 9

1.4 Các loại biến trong Scilab 10

1.5 Ma trận, vector 10

1.6 Đồ thị 13

Chương2 16

L A TEX 16

2.2 Cơ bản về L A TEX 17

2.3 Cấu trúc tổng quát của một tập tin mã nguồn 19

2.4 Một số lệnh để tạo chương, mục 19

2.5 Soạn thảo văn bản 20

2.6 Soạn thảo công thức toán học 21

2.7 Tham chiếu trong văn bản 22

2.8 Chèn hình vào văn bản 22

Chương3 23

HTML-XHTML, CSS, JavaScript 23

3.1 Một số khái niệm cơ bản về WWW 23

3.2 Một số công cụ thường dùng để tạo trang (X)HTML, CSS, JavaScript 24

3.3 HTML - XHTML 25

3.4 CSS 30

3.5 JavaScript 32

3.6 Một số vấn đề về thiết kế Web 33

Kết luận 33

Tài liệu tham khảo 34

Hình 3 1: Macromedia Dreamweaver 8 24

Hình 3 2: Notepad++ 24

Hình 3 3: Gedit 2

LOGO 1 3

Y Hình 2.1 Texmaker 18

Hình 2.2 TeXnicCenter 18

? View

Home

GIỚI THIỆU

Chúng em thấy các vấn đề này là những vấn đề cơ bản và hết sức quan trọng để chúng em

có thể tiếp tục học tập và nghiên cứu về Công nghệ Thông tin

Cụ thể:

• Scilab: Đây là một công cụ miễn phí, mạnh để giúp giải một số bài toán và vật lý

vấn đề chuyên môn

• Web: Đây là những kiến thức cơ bản nhất để chúng em có thể tự thiết kế một trang web

cá nhân cũng như cho tập thể

Một số điều thú vị về lập trình :

19.8

12.24 6.31

4.17 3.92

3.27 2.64 2.52 2.43 2.28 2.12 2.05

12 Ngôn ngữ lập trình được tìm kiếm nhiều nhất 6/2016

Java C C++ Python

JavaScript Visual Basic NET Perl Assembly language Ruby Delphi/Object Pascal

CHƯƠNG1 SCILAB

1.1 GIỚI THIỆU CHUNG

• Scilab là ngôn ngữ lập trình kết hợp với các phép toán số học trên nhiều lĩnh vực khoa học

• Scilab thuộc loại ngôn ngữ thông dịch

• Khả năng xứ lý với scilab:

• Cài đặt Download link: http://www.scilab.org/product/scilab/download

Cài đăt như các software thông thường Để cài đặt được đầy đủ, cần có internet để tải các 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ả năng Docking

(Hình 1.3)) - Console:

Hình 1.1 Console

Dễ dàng soạn thảo các file chứa tập các đọan code của Scilab

Cách gọi ra editor: vào Application/Editor hoặc vào editor() từ console

Hình 1.2 Editor

– Một số tính năng

Load into Scilab: chạy toàn bộ đoạn code trong file đang soạn thảo Evaluate selection:Chạy toàn bộ code được bôi đen

Execute file into scilab: Chạy một file như khi gọi hàm exec

Khác với Load into Scilab: chỉ cho ra output trên màn hình khi có lệnh display()– Editor-Docking: Giúp làm việc đồng thời với editor và console

Hình 1.3 Docking

– Lưu ý: Có thể tích hợp nhiều cửa sổ làm một

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 và sce để dễ quản lý code

– File sci: chứa một hay nhiều hàm tự viết Các hàm này sau đó sẽ đươc load vào môi trườngScilab khi gọi getf

– File sce chứa cả các hàm tự viết và mã lệnh thực thi của Scilab

• Ngoài ra còn có phương pháp xử lí theo lô

1.3 SỬ DỤNG HELP TRONG SCILAB

Vào chức năng help từ thanh công cụ

Nếu biết tên lệnh nhưng quên hoặc chưa biết cú pháp có thể dùng lệnh help <name> với

<name> là tên lệnh cần tra

Ví dụ:

help sin // cho biết cú pháp của hàm sin help + // help của toán tử

Help trong Scilab

Nếu không biết rõ tên lệnh, có thể 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 quả là các hàm liên quan đến logarithm

1.4 CÁC LOẠI BIẾN TRONG SCILAB

Trong Scilab, các loại biến đều được coi là ma trận (trừ một số loại như lists và một số cấu trúc dữ 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 cả vector) Với mỗi kiểu biến có một số toán tử tương ứng

Tên biến: Để dài tùy ý nhưng chỉ xét 24 ký tự đầu tiên Mã ASCII: a-z, A-Z, 0-9, % _

# ! ? $ Có phân biệt chữ hoa, chữ thường

Một số hàm toán học cơ bản: sin(x), asin(x), cos(x), acos(x), tan(x), atan(x), cotg(x), acot(x),

1.5 MA TRẬN, VECTOR

1.5.1 KHỞI TẠO MA TRẬN

Các ký hiệu dùng để khai báo ma trận:

• Ngoặc vuông “[” và “]” để đánh dấu vị trí bắt đầu và kết thúc của ma trận

• Dấu phẩy “,” để phân chia các giá trị giữa các cột

• Dấu chấm phẩy “;” để phân chia các hàng

Trong đó x1 , x2 thứ tự là chỉ số đầu và cuối của các hàng lấy giá trị, y1 , y2 thứ tự là chỉ

số đầu và cuối của cột lấy giá trị Có thể dùng toán tử $ để chỉ hàng hoặc cột cuối cứng

Xây dựng đa thức Ví dụ xây dựng đa thức: x2− 3x − 4

Nếu v là vector chứa các hệ số từ thấp đến cao v

Xây dựng đa thức với nghiệm cho trước: Sử dụng hàm poly nhưng tham số cuối là

“roots” Ví dụ: Xây dựng đa thức có hai nghiệm là 1 và 2:

Tính toán với đa thức: Một số hàm như roots() để tìm nghiệm, horner() để tính giá trị của

1.5.5 XÂY DỰNG VÀ GIẢI HỆ PHƯƠNG TRÌNH

Với hệ phương trình có dạng A*x = b với A, b là hai ma trận chứa các hệ số, có thể giải bằng cách lấy

x = A / b

Ví dụ: Để giải hệ phương trình:

có thể dựng 2 ma trận A và b chứa các hệ số để giải, cụ thể như sau:

Đồ thị cho dưới dạng hàm Với x là vector chứa các giá trị của biến Sử dụng deff() và fplot2d() Ví dụ:

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 trong Scilab:

Tác giả Lesile Lamport

Ưu, nhược điểm

• Ưu điểm

– Soạn thảo văn bản lớn không ảnh hưởng đến tốc độ gõ Với Word hoặc OpenOffice,

cả tài liệusẽ bị định dạng lại khi ta gõ

– Gủ công thức tiện lợi

– Miễn phí (trừ một số front-end)

– Kích thước mã nguồn khiêm tốn

• Nhược điểm

– Phải nhớ tên lệnh (hoặc phải có tài liệu)

– Hơi khó khăn khi bắt đầu

2.2 CƠ BẢN VỀ LATEX

2.2.1 CÁC TẬP TIN NHẬP LIỆU

2.2.2 KHOẢNG TRẮNG

Các kí tự khoảng trắng hay tab được xem như nhau và được gọi là kí tự “khoảng trắng” Nhiều kí tự khoảng trắng liên tiếp chỉ được coi là một khoảng trắng Các khoảng trắng ở vị trí đầu một hàng thì được bỏ qua Ngoài ra kí tự xuống hàng đơn được xem là một khoảng trắng Một hàng trắng giữa hai hàng văn bản sẽ xác định việc kết thúc một đoạn văn Nhiều hàng trắng được xem là một hàng trắng

2.2.3 MỘT SỐ KÍ TỰ ĐẶC BIỆT

Những kí tự sau là các kí tự dành riêng Nó có thể là kí tự có ý nghĩa đặc biệt trong

không định trước hoặc có thể bị báo lỗi Các kí tự đặc biệt đó là: # % ^ & _ { } ~ \ Để sử dụng các kí hiệu trên, cần thêm vào một dấu gạch chéo phía trước "\" với kí tự gạch chéo thìdùng: \textbackslash

2.2.4 LỆNH TRONG LATEX

\tên lệnh{tham số băt buộc}[tham số tùy chọn]

2.2.5 CHÚ THÍCH TRONG LATEX

- Chú thích ngắn: dùng kí tự % : khi mà latex gặp một kí tự % thì nó sẽ bỏ qua phần còn lại của hàng đang được xử lý Ngoài ra, các kí tự xuống hàng và hàng trắng ở đầu hàng tiếp theo sẽ được bỏ qua Có thể sử dụng kí tự này để ghi chú vào tập tin soạn thảo Ngoài

ra kí tự % còn có thể sử dụng để chia các hàng dữ liệu nhập vào quá dài khi mà các kí tự khoảng trắng hay xuống hàng không được phép xuất hiện

- Chú thích dài: dùng môi trường comment của gói verbatim

2.2.6 MỘT SỐ ENGINE VÀ FRONT-END DÙNG ĐỂ SOẠN THẢO

Engine

• Windows: MiKTeX Link: http://miktex.org/

• Linux: TeX Live Có thể cài qua các repository

Front-end

• Texmaker (http://www.xm1math.net/texmaker/) Chạy được trên Windows, Linux và MacOS (Hình 2.1)

• TeXnicCenter (http://www.texniccenter.org/) (Hình 2.2)

Hình 2.1 Texmaker

Hình 2.2 TeXnicCenter

2.3 CẤU TRÚC TỔNG QUÁT CỦA MỘT TẬP TIN MÃ NGUỒN

\documentclass[tham số tùy chọn]{class}

% khai báo các package sử dụng

2.3.2 KHAI BÁO PACKAGE

Sử dụng lệnh \usepackage[ ]{tên package} Trong đó tham số tùy chọn để đặt các thông

font Lệnh khai báo font Tác dụng

\textrm \rmfamily font roman

\texttt \ttfamily font teletype

\textsf \sffamily font sans

\small small

\

normalsize

normalsize

\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 để căn 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, những câu quan trọng và 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 đầu tiên mỗi đoạn sẽ được 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 của bảng: “l” để chỉ ra một cột căn lề trái,

“c” để chỉ ra một cột căn giữa, “r” để chỉ ra một cột căn lề phải, “|” để chỉ ra một đường kẻ dọc giữa 2 cột

Tham số “pos” để chỉ ra vị trí của bảng so với chữ ở xung quanh

Trong bảng: hai cột liên tiếp ngăn cách bằng dấu “& ”, hai hàng liên tiếp ngăn cách bằng dấu “\\”

Để tạo đường kẻ giữa 2 dòng dùng “\hline”

2.6 SOẠN THẢO CÔNG THỨC TOÁN HỌC

Nếu công thức ngắn, viết ngay trong văn bản thì có thể dùng: $ công thức $ Với công thức dài hơn, dùng môi trường equation hoặc equation* nếu không muốn đánh số

2.6.1 MỘT SỐ KÝ HIỆU

\Phi, \Omega, \DeltaΦ,Ω,∆

2.6.2 MŨ, CHỈ SỐ DƯỚI, CĂN THỨC, PHÂN THỨC

2.6.3 KHOẢNG CÁCH TRONG CHẾ ĐỘ TOÁN HỌC

Để tạo khoảng cách giữa hai công thức liên tiếp có thể dùng lệnh \quad hoặc \qquad để tạo khoảng cách lớn hơn

số bằng lệnh \nonumber trên dòng tương ứng, hoặc trên tất cả các dòng bằng cách dùng môi trường eqnarray*.

Các cột tách biệt nhau bằng &, các dòng phân tách bằng \\

2.7 THAM CHIẾU TRONG VĂN BẢ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 hoặc \pageref{marker} để tham chiếu đến trang có label đó

2.8.2 TẠO TIÊU ĐỀ CHO ẢNH

Dùng thêm môi trường figure và 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 những kiến thức LATEX học được để hoàn thành bản báo cáo này.

CHƯƠNG3

HTML-XHTML, CSS, JAVASCRIPT

3.1 MỘT SỐ KHÁI NIỆM CƠ BẢN VỀ WWW

3.1.1 KHÁI NIỆM VỀ SIÊU VĂN BẢN

Hypertext là văn bản (text) trên máy tính có sự liên kết đến một văn bản khác và có thể truy cập trực tiếp thông qua click chuột, nhấn phím

Hyperlink là một liên kết từ một file hypertext đến một file khác

Hypermedia là sự mở rộng của hypertext, trong đó đối tượng có thể là văn bản, đồ họa, âm thanh, video

3.1.2 CÁC THÀNH PHẦN CỦA WEB

• Web là hệ thống các tài liệu hypertext liên kết với nhau thông qua mạng Internet

• Các thành phần của Web

– WebPage: là một trang Web

– Website: Là tập hợp các WebPage có nội dung thống nhất

– Uniform Resource Locator: dùng để định vị tài nguyên trên Internet theo cách thuận tiện cho ngườisử dụng (thay cho địa chỉ IP không mang ý nghĩa và khó nhớ)

Cấu trúc: giao thức://địa chỉ 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

1 Dreamweaver: Là công cụ có phí, mạnh, dễ sử dụng (Hình 3.1)

HTML và XHTML đều được tạo thành từ các tags (gồm tag mở và tag đóng) để định nghĩa cách hiển thà các thành phần của trang web.

Các phiên bản

Phiên bản chính thức mới nhất của HTML là HTML 4.01, HTML 5 đang là dự thảo với nhiều tính năng mới Phiên bản đầu tiên của HTML được Tim Berner Lee phát minh và được W3C đưa thành chuẩn vào năm 1994, phiên bản mới nhất là 4.01 hiện tại được hoàn thành vào 24-12-1999

Phiên bản chính thức mới nhất của XHTML là XHTML 1.1, ra đời vào tháng 5 năm 2001

3.3.2 CÚ PHÁP CỦA CÁC TAGS (THẺ) TRONG (X)HTML

Bao gồm 1 thẻ mở và 1 thẻ đóng, nội dung nằm ở giữa 2 thẻ, các thẻ có thể lồng nhau

nhưng các thẻ phải được mở và đóng đúng thứ tự (mở trước thì phải đóng sau) ở thẻ mở có thể có các thuộc tính

(attributes)

Ví dụ:

<div class="ex"><b><i>Chữ này vừa được in đậm vừa được in nghiêng và có thể chứa các lệnh định dạng của class “ex"</i></b></div>

Với XHTML thì tên các thẻ bắt buộc viết thường, với HTML thì không phân biệt chữ

thường chữ hoa Tuy nhiên các trình duyệt thường không thông báo lỗi cú pháp nhưng sẽ dẫn đến kết quả hiển thị không đúng mong muốn và khi validate (3.3.5) sẽ báo lỗi

Phần head Dùng để chứa 1 số thẻ như

<title> Chứa tiêu đề của trang web

<link> Chứa link đến một số file như style sheet (CSS) hoặc JavaScript

<style> Đưa một số mã CSS vào trang web

<script> Đưa một số đoạn script vào trang web

<meta> Thêm một số thông tin như keyword, description để miêu tả trang web (phục

vụ các search engine)

Một số thẻ khác như <base>, <object>

Phần body Dùng để chứa nội dung chính của trang web

3.3.5 VALIDATE MỘT TRANG WEB

Là công việc để kiểm tra xem trang web đó có tuân thủ đầy đủ theo các chuẩn của W3C không, mục đích để đảm bảo tối đa việc hiển thị đúng trên các trình duyệt

Có thể validate bằng cách vào trang http://validator.w3.org hoặc dùng 1 số addons của các trình duyệt như 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à các thẻ hiển thị trên màn hình dưới dạng một đoạn riêng Ví dụ: <p>, <h1>,

Một số thẻ để chèn nội dung đa phương tiện

• Thẻ <img> dùng để chèn hình ảnh Thuộc tính “src” để chỉ ra đường dẫn đến file ảnh, thuộc tính “alt” (alternative) sẽ hiển thị trong trường hợp trình duyệt không hiển thị

được ảnh hoặc không được hiển thị ảnh, cũng có thể được dùng trong các chương trình đọc màn hình để hỗ trợ người khuyết tật, các máy tìm kiếm cũng dùng thuộc tính này

để lập chỉ mục cho web Hiện nay nhiều trình duyệt hiển thị thuộc tính này như một chú thích cho ảnh khi di chuột vào Ví dụ: <img src="example.jpg" alt="Example image" />

• Thẻ <object> để chèn flash, nhạc, phim

3.3.7 FORM TRONG (X)HTML

Form trong (X)HTML cho phép người dùng nhập thông tin để gửi về máy chủ Form trong (X)HTML được đặt trong thẻ <form>

Một số thuộc tính của thẻ <form>:

• action: địa chỉ trang web hoặc chương trình ở server xử lý dữ liệu của form

• method: chỉ ra cách thức dữ liệu được gửi về server: có 2 cách: “get” và “post” Một số công cụ để nhập dữ liệu trong form:

• Với thẻ <input> có thể tạo ra các ô nhập dữ liệu, các nút tùy vào thuộc tính “type” Một

số giá trị của thuộc tính “type”:

-text Tạo ra textbox

-password Tạo ra ô nhập password

-checkbox Tạo ra ô chọn có thể chọn nhiều giá trà một lúc

-radio Tạo ra ô chọn, chỉ được chọn 1 trong số các ô

-submit Tạo ra nút để gửi dữ liệu về server

-reset Tạo ra nút để đưa giá trà các ô trong form về trạng thái mặc định

• Với thẻ <textarea> có thể tạo ra ô cho phép nhập liệu dữ liệu nằm trên nhiều dòng

• Với thẻ <select> có thể tạo ra danh sách lựa chọn Thẻ <option> để chỉ ra các lựa chọn.Nếu thẻ <select> không thiết lập thuộc tính “multiple” và “size” thì sẽ có một drop-down box, nếu không sẽ có một danh sách