Nhập môn ngành CNTT (1) - Mở đầu

1. Mở đầu

Công nghệ Thông tin (CNTT) là một trong những lĩnh vực phát triển nhanh và có ảnh hưởng sâu rộng trong đời sống con người.

Từ cách chúng ta giao tiếp, làm việc, học tập, đến cách các doanh nghiệp vận hành và các chính phủ quản lý, CNTT đã trở thành xương sống của xã hội.

Với vai trò quan trọng này, ngành CNTT không chỉ mở ra cánh cửa cho những cơ hội nghề nghiệp đa dạng mà còn đòi hỏi người học phải trang bị nền tảng kiến thức vững chắc, tư duy sáng tạo, và khả năng thích ứng với sự thay đổi không ngừng của công nghệ. 

Giáo trình "Nhập môn ngành Công nghệ Thông tin" sẽ cung cấp một bức tranh toàn cảnh về lĩnh vực này, đồng thời đặt nền móng cho hành trình học tập và phát triển nghề nghiệp của người học.

1.1 Mục tiêu của giáo trình

Giáo trình này giúp người học hiểu rõ bản chất của CNTT, từ các khái niệm cơ bản về phần cứng, phần mềm, mạng máy tính, đến những ứng dụng thực tiễn trong đời sống và công việc.

Giáo trình không chỉ dừng lại ở việc truyền đạt lý thuyết mà còn khuyến khích người học thực hành, khám phá, và phát triển tư duy giải quyết vấn đề – một kỹ năng cốt lõi của bất kỳ chuyên gia CNTT nào. 

Giáo trình được xây dựng dựa trên sự tham khảo từ các chương trình nhập môn tại các trường đại học của Mỹ, trong đó nhấn mạnh sự kết hợp giữa lý thuyết nền tảng và ứng dụng thực tế.

Nội dung của giáo trình tập trung vào việc giúp người học hiểu cách công nghệ vận hành trong thế giới thực, từ kiến trúc máy tính đến hệ thống mạng toàn cầu như Internet. Từ đó, người học không chỉ học để biết "CNTT là gì" mà còn chủ động nắm bắt và thử nghiệm để xem "CNTT có thể làm gì" trong bối cảnh Việt Nam và thế giới.

Cuối cùng, giáo trình này nhằm giúp người học định hình con đường nghề nghiệp trong ngành CNTT. Bạn có thể trở thành một lập trình viên phát triển phần mềm, một chuyên gia an ninh mạng bảo vệ dữ liệu, hay một nhà quản trị hệ thống đảm bảo hoạt động trơn tru của các tổ chức. Dù bạn chọn hướng đi nào, những kiến thức cơ bản trong giáo trình này sẽ là bước khởi đầu quan trọng. Chúng tôi cũng khuyến khích các bạn đặt câu hỏi, thử nghiệm, và thậm chí phạm sai lầm – bởi đó là cách học hiệu quả nhất trong một ngành luôn thay đổi như CNTT.

1.2 Cấu trúc của giáo trình

Giáo trình "Nhập môn ngành Công nghệ Thông tin" được chia thành 10 chủ đề chính, mỗi chủ đề đều được thiết kế để mang lại sự cân bằng giữa lý thuyết và thực hành, đồng thời phù hợp với trình độ của người mới bắt đầu.

Nội dung của các chủ đề:

[1] Tổng quan về Công nghệ Thông tin: chủ đề này giới thiệu khái niệm CNTT, vai trò của nó trong đời sống, và các lĩnh vực nghề nghiệp liên quan. Người học sẽ hiểu được sự khác biệt giữa lập trình viên, kỹ sư dữ liệu, và chuyên gia mạng.

[2] Cách hoạt động của máy tính: chúng ta sẽ tìm hiểu về phần cứng (CPU, RAM, ổ cứng) và phần mềm (hệ điều hành, ứng dụng), giúp người học nắm rõ cách máy tính xử lý thông tin – một nền tảng không thể thiếu trong ngành.

[3] Hệ điều hành: chủ đề này tập trung vào các hệ điều hành phổ biến như Windows và Linux, cùng với các lệnh cơ bản mà bạn có thể thực hành ngay trên máy tính cá nhân.

[4] Cơ bản về lập trình: người học sẽ làm quen với khái niệm lập trình thông qua một ngôn ngữ đơn giản như Python hoặc JavaScript. Đây là bước đầu tiên để bạn viết các chương trình nhỏ, ví dụ như một máy tính cầm tay (calculator) đơn giản.

[5] Mạng và Internet: bạn sẽ khám phá cách dữ liệu di chuyển qua mạng, từ giao thức TCP/IP đến cách hoạt động của Internet – một phần không thể thiếu trong thế giới kết nối ngày nay.

[6] Cơ sở dữ liệu cơ bản: chủ đề này giới thiệu cách lưu trữ và truy xuất thông tin bằng cơ sở dữ liệu, bao gồm các truy vấn SQL đơn giản để quản lý dữ liệu.

[7] An ninh mạng cơ bản: với sự gia tăng của các mối đe dọa trực tuyến, bạn sẽ học về những khái niệm cơ bản như mã hóa, bảo mật mật khẩu, và cách bảo vệ thông tin cá nhân.

[8] Công cụ và kỹ năng thực hành: bạn sẽ được hướng dẫn để sử dụng các công cụ như trình soạn thảo mã (VS Code), giao tiếp dòng lệnh (terminal), viết lệnh cho chatbot (prompt engineering) và phần mềm văn phòng – những kỹ năng thiết yếu cho công việc sau này.

[9] Tư duy giải quyết vấn đề: chủ đề này tập trung vào tư duy tính toán (computational thinking), giúp bạn phân tích vấn đề và thiết kế giải pháp bằng thuật toán cơ bản.

[10] Dự án nhỏ và ứng dụng thực tế: cuối cùng, bạn sẽ áp dụng kiến thức vào một dự án thực tế, chẳng hạn như xây dựng một ứng dụng tính điểm hoặc một trang web đơn giản.

Với mỗi chủ đề, ngoài nội dung lý thuyết, đều đi kèm bài tập thực hành và ví dụ minh họa, giúp bạn không chỉ hiểu lý thuyết mà còn biết cách áp dụng vào thực tế.

1.3 Phương pháp dạy và học

Trong giáo trình này, chúng tôi áp dụng phương pháp học tập chủ động.

Cụ thể,

- Người học chủ động đọc tài liệu, xem bài giảng, xem làm minh họa

- Tự tạo sổ tay (trên máy tính hoặc trên Internet), ghi chép lại quá trình học, tiến độ, kiến thức, nguồn tham khảo quan trọng

- Tích cực tham gia các hoạt động như thảo luận nhóm, tham gia các diễn đàn

- Chủ động thực hành trên máy tính, giải quyết các bài toán thực tế, làm các dự án thực tế

1.4 Đối tượng hướng đến

Giáo trình này phù hợp với những người mới, muốn tìm hiểu về ngành CNTT và sinh viên ngành CNTT năm nhất của các trường đại học, cao đẳng.

Để học giáo trình này, bạn không cần bất kỳ kiến thức nền tảng nào, cái cần nhất là sự tò mò và mong muốn học hỏi.

Dù bạn ở thành phố hay nông thôn đều có thể học giáo trình này, chỉ cần một cái máy tính và đường kết nối Internet.

Chúng tôi biết rằng, mỗi bạn sẽ có phong cách học tập khác nhau, nên nội dung được thiết kế linh hoạt, từ lý thuyết cơ bản đến thực hành nâng cao.

1.5 Lợi ích khi học giáo trình

Học xong giáo trình này, bạn sẽ:

- Hiểu rõ CNTT là gì và cách nó vận hành trong thế giới thực

- Nắm được các kỹ năng cơ bản như lập trình, quản lý dữ liệu, và sử dụng được một số công cụ trong lĩnh vực CNTT

- Phát triển tư duy logic và khả năng giải quyết vấn đề – nền tảng cho mọi chuyên ngành trong CNTT

- Định hướng được con đường học tập và nghề nghiệp trong tương lai

Ví dụ, nếu bạn muốn trở thành lập trình viên, kiến thức lập trình cơ bản trong giáo trình sẽ là bước đệm để bạn học các ngôn ngữ nâng cao hơn như Java hay C++. Nếu bạn quan tâm đến an ninh mạng, phần an ninh cơ bản sẽ khơi dậy sự tò mò để bạn khám phá sâu hơn về bảo mật hệ thống.

"Nhập môn ngành Công nghệ Thông tin" không chỉ là một môn học, mà còn là cánh cửa dẫn bạn vào thế giới rộng lớn của công nghệ. Đây là nơi bạn bắt đầu xây dựng nền tảng, khám phá đam mê, và chuẩn bị cho những thử thách thú vị phía trước. 

Chúng tôi hy vọng rằng qua giáo trình này, bạn sẽ không chỉ học được kiến thức mà còn tìm thấy niềm vui và ý nghĩa trong hành trình chinh phục ngành CNTT. Chào mừng bạn đến với thế giới của công nghệ – nơi mọi ý tưởng đều có thể trở thành hiện thực! 

-----

Cập nhật: 28/2/2025

Bài sau:

TinHocPhoThong (3): Tạo sổ tay ghi chép cho bản thân

Bài trước: TinHocPhoThong(2): Tổ chức, lưu trữ dữ liệu

-----

3. Tạo sổ tay ghi chép cho bản thân

3.1 Tầm quan trọng của ghi chép

Mặc dù chúng ta có rất nhiều tài nguyên để học, như các video trên youtube, tài liệu trên các trang web, sách điện tử (ebook), trợ lý ảo (copilot, gemini, chatgpt).

Nhưng có một cách học khá hiệu quả là tự bạn “hệ thống” lại kiến thức cho bản thân. Tự bạn viết lại kiến thức theo cách của chính bạn. Kiến thức sẽ được não của bạn âm thầm ghi nhớ, và hệ thống lại một cách logic, giúp bạn truy vấn lại dễ dàng, hiểu sâu, có thể kết nối chúng lại với nhau..

Khi viết ra được, nghĩa là bạn đã hiểu rất rõ từng khái niệm, từng ý tưởng, và dễ dàng nói lại, trình bày lại cho người khác.

Khi chưa viết ra được một cách rõ ràng, mạch lạc một chủ đề nào đó, chứng tỏ bạn chưa nắm chắc về nó.

Bạn hãy tự trải nghiệm, và cảm nhận.

3.2 Tạo sổ tay trên Google Docs

Bạn có thể tạo, ghi chép và lưu sổ tay trên máy tính hoặc trên mạng. Tuy nhiên, bạn nên tạo tài liệu trên Google Docs, vừa tiện trong quá trình sử dụng, ngồi ở đâu cũng truy cập, ghi chép được; lại có thể chia sẻ dễ dàng cho bạn bè.

Cách tạo một sổ tay trên Google Docs:

- Đăng nhập vào tài khoản gmail của Google. Bấm vào ô hình vuông (cạnh tên tài khoản) > chọn mục Drive

- Chọn nút New > chọn Google Docs để tạo một tập tin mới, chúng ta sẽ ghi chép kiến thức vào tập tin này. 

- Đặt tên cho tập tin. Ví dụ HocJava. Vậy là chúng ta đã có nơi để ghi chép, để “hệ thống” lại bài học.

- Trong Google Docs > bấm đúp vào vùng header > vào menu Insert, chọn Horizontal Line để chèn một đường kẻ ngang cho vùng header, nhập dòng chữ cho tài liệu, ví dụ Học Java. Bấm đúp vào vùng footer > vào menu Insert, chèn một đường kẻ ngang và chèn số trang cho vùng cuối trang.

- Kết quả sẽ được tài liệu như hình sau:

- Bạn sẽ sử dụng Heading 1, 2, 3 và Normal text cho phù hợp để soạn thảo văn bản.

Ví dụ:

- Tiêu đề mức cao nhất là Heading1

- Tiêu đề mức tiếp theo là Heading 2

- Đoạn văn bản chọn kiểu định dạng là Normal text, font chữ: Arial, kích thước font: 12.

- Khoảng cách giữa mỗi hàng trong đoạn cách nhau 1.15: vào menu Format > chọn mục Line & paragraph spacing > chọn 1.15

- Các đoạn cách nhau một khoảng trắng mặc định của Google Docs: vào menu Format > vào mục Line & paragraph spacing > chọn Add space after paragraph.

Ví dụ, tài liệu sẽ có dạng sau:

3.3 Bài tập

Bài tập 3.1 Bạn tự tạo một sổ tay ghi chép cho bản thân trên Google Docs.

-----

Cập nhật: 22/2/2025

-----

Bài sau: 

CuTeoHocLamWeb (9): Làm giao diện một trang thương mại

Bài trước: CuTeoHocLamWeb (8): Thao các căn bản trên blogger

-----

9. Làm giao diện một trang thương mại

9.1 Trang mẫu

Để việc học thú vị, chúng ta sẽ cùng nhau làm giao diện một trang web thương mại thực tế.

Đây là trang mẫu, chúng ta sẽ cùng nhau làm từng phần của giao diện web: https://bercy.bold-themes.com/demo-01/

Chúng ta sẽ vừa làm vừa học các kỹ thuật và khái niệm liên quan đến HTML, CSS và JavaScript.

- Tạo thư mục dự án trong ổ đĩa D:\ hoặc E:\, đặt tên thư mục dự án là coffeeshop

- Trong thư mục coffeeshop, tạo tập tin index.html và tạo 4 thư mục con gồm: html, css, js, assets

- Mở tập tin index.html bằng VS code để bắt đầu lập trình

- Trong VS code, gõ dấu chấm than (!) > tab để tạo ra cấu trúc của một tài liệu html như sau

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

</body>

</html>

- Chúng ta sẽ viết mã HTML vào vùng <body> </body>

Như đã biết, nội dung trang web sẽ được tạo ra trong vùng <body> </body>.

Để tạo ra nội dung trang web, chúng ta sử dụng các thẻ của HTML.

Thẻ gồm phần mở thẻ (ví dụ <body>) và phần đóng thẻ (ví dụ </body>).

Một thẻ luôn gồm phần mở thẻ và phần đóng thẻ, với tên giống nhau.

Nội dung của thẻ cho biết ý nghĩa của phần nội dung bên trong. Ví dụ, muốn tạo ra một đoạn văn bản thì sử dụng thẻ <p> Đây là một đoạn văn bản </p>, chữ p viết tắt của paragraph (đoạn văn bản).

Quan lại trang web https://bercy.bold-themes.com/demo-01/, trang này sẽ gồm 3 phần là:

- Phần đầu trang, sử dụng thẻ <header> để tạo

- Phần giữa trang, sử dụng thẻ <main> để tạo

- Phần cuối trang, sử dụng thẻ <footer> để tạo

Chúng ta cùng tạo 3 phần cho trang web với mã nguồn như sau:

<body>

    <header>

 

    </header>

    <main>

 

    </main>

    <footer>

 

    </footer>

</body>

9.2 Phần header

Nội dung vùng header:

Gồm logo, menu cấp 1 và các biểu tượng (icon) có gắn liên kết (link) tới facebook, twitter và Instagram.

Lấy hình logo, lưu về thư mục assets: chuột phải vào hình logo > chọn save images as, đặt tên là logo_black.png > để lưu vào assets.

Header

Trong phần header, chúng ta tạo một vùng con bên trong, sử dụng thuộc tính (attribute) class để đặt tên cho vùng này là site-branding.

Để tạo các vùng, sử dụng thẻ <div> (viết tắt của division - vùng).

 <header>

        <div class="site-branding">

        </div>

    </header>

Vì div là phần tử trung tính (không có ngữ nghĩa), nên thuộc tính class=”site-branding” cũng cho chúng ta biết được ý nghĩa của phần tử div tương ứng. Ngoài ra, thuộc tính class sẽ được sử dụng để định dạng, trang trí cho phần tử <div class=”site-branding” tương ứng bằng CSS.

Vùng site-branding là vùng để hiển thị thông tin nhận diện thương hiệu.

Trong <div class="site-branding"> tạo một div con <div class="site-branding-inner">.

Trong <div class="site-branding-inner">, tạo 2 div con, gồm: <div class="site-branding-logo"> và <div class="main-navigation">

Xem mã nguồn:

    <header>

        <div class="site-branding">

            <div class="site-branding-inner">

                <div class="site-branding-logo">

 

                </div>

                <div class="main-navigation">

 

                </div>

            </div>

        </div>

    </header>

Trong <div class="site-branding-logo">, sử dụng phần tử a để tạo ra một liên kết, bên trong liên kết này là hình logo.

Phần tử a là viết tắt của chữ anchor, có nghĩa là cái mỏ neo, dùng để móc vào một nơi khác.

Cú pháp của phần tử a là <a href="trang1.html">Trang 1</a>

Trong đó:

- href là thuộc tính, chứa địa chỉ (URL) của một trang web, hoặc một vùng trong trang web. Với href là viết tắt của hypertext reference, nghĩa là tham chiếu tới một siêu văn bản.

-  “Trang 1” là nội dung được hiển thị ra ngoài giao diện, khi người dùng bấm chuột vào “Trang 1”, trình duyệt sẽ mở trang web “trang1.html”

Trong phần này, chúng ta sẽ thay thế chữ “Trang 1” là một cái hình. Để chèn hình, sử dụng phần tử img. Cú pháp của phần tử <img> là:

<img width="178" height="180" src="assets/logo_black.png">

Trong đó:

- Phần tử img là viết tắt của image (hình ảnh)

- Thuộc tính width xác định chiều rộng của ảnh (178 pixel), thuộc tính height xác định chiều cao của ảnh (180 pixel)

- Thuộc tính src là viết tắt của source (nguồn ảnh), trỏ tới vị trí của tập tin hình ảnh (assets/logo_black.png)

[index.html]

…

            <div class="site-branding-logo">

                <a href="index.html">

                    <img width="178" height="180" src="assets/logo_black.png">

                </a>

            </div>

            <div class="main-navigation">

…

Lưu lại mã nguồn, mở trang index.html bằng trình duyệt để xem kết quả.

9.3 Làm menu chính

Menu chính (hay Menu cấp 1), gồm 5 mục: Home, About, Blog, Shop, Elements.

Trong HTML, người ta gọi vùng menu (trình đơn) là vùng điều hướng (navigation). Do vậy, chúng ta sẽ sử dụng phần tử nav để tạo vùng điều hướng.

Trong phần tử <div class="main-navigation">, tạo phần tử nav với thuộc tính class="menu-primary-menu-container"

            <div class="main-navigation">

                <nav class="menu-primary-menu-container">     

                </nav>

            </div>

Để tạo các mục của menu, chúng ta sử dụng phần tử ul.

Phần tử ul là viết tắt của unordered list, nghĩa là một danh sách không có thứ tự. Trong ul, sử dụng phần tử li để tạo các mục con. Phần tử li là viết tắt của list item, nghĩa là các mục của danh sách.

            <div class="main-navigation">

                <nav class="menu-primary-menu-container">

                    <ul class="main-navigation-menu">

                        <li class="menu-item">Home</li>

                        <li class="menu-item">About</li>

                        <li class="menu-item">Blog</li>

                        <li class="menu-item">Shop</li>

                        <li class="menu-item">Elements</li>

                    </ul>

                </nav>

            </div>

Lưu lại tập tin index.html, cập nhật lại trang web (refresh) để xem kết quả trên trình duyệt.

9.4 Chèn các biểu tượng mạng xã hội

Chúng ta sẽ tạo tiếp vùng các biểu tượng mạng xã hội (icon liên kết).

Vùng các biểu tượng mạng xã hội cùng cấp với vùng điều hướng (navigation). Vì vậy, chúng ta sẽ tạo phần tử <div class="site-navigation-widgets"> trong <div class="main-navigation">

            <div class="main-navigation">

                <nav class="menu-primary-menu-container">

                    <ul class="main-navigation-menu">

                 ...

       </ul>

                </nav>

                <div class="site-navigation-widgets">

                    

                </div>

            </div>

Trong phần tử <div class="site-navigation-widgets">, tạo 3 phần tử a để gắn liên kết tới 3 ứng dụng mạng xã hội facebook, x và instagram. Tạm thời chưa có tài khoản cụ thể của mạng xã hội, nên thuộc tính href sẽ tạm trỏ tới trang gốc của 3 mạng xã hội.

    <div class="site-navigation-widgets">

        <a href="https://www.facebook.com/"></a>

        <a href="https://x.com/"></a>

        <a href="https://www.instagram.com/"></a>

    </div>

Trong 3 phần tử a, chèn biểu tượng (icon) của 3 mạng xã hội tương ứng. Sử dụng phần tử i, giá trị thuộc tính class là giá trị của icon, ví dụ cho facebook: <i class="ri-facebook-fill"></i>.

 <div class="site-navigation-widgets">

    <a href="https://www.facebook.com/"><i class="ri-facebook-fill"></i></a>

    <a href="https://x.com/"><i class="ri-twitter-x-line"></i></a>

    <a href="https://www.instagram.com/"><i class="ri-instagram-line"></i></a>

 </div>

Mở trình duyệt, sẽ chưa thấy 3 biểu tượng của 3 mạng xã hội. Bạn cần nhúng thêm mã CSS cho phần tử i, bằng cách chép dòng mã sau vào vùng <head> của tập tin index.html.

 <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet"/>

[index.html]

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet"/>

</head>

Lưu lại tập tin mã nguồn, mở lại trang web để xem kết quả, như hình sau.

9.5 Bài tập

Bài tập 9.1 Lập trình các đoạn mã trong bài học.

-----

Cập nhật: 28/2/2025

Bài sau: