MỘT SỐ NỘI DUNG CẦN NHỚ TRONG MÔN
INTERNET VÀ CÔNG NGHỆ WEB
1. Giới thiệu
Trong bài viết này, tôi xin gợi ý (mách ước) cho các bạn sinh viên một vài phương pháp làm sao để ôn tập đạt được kết quả học tập cao trong môn học này. Chúng ta phải biết kế hoạch học, học như thế nào và phải học cái gì? Tránh những cách học trôi sông lạc chợ.
Internet và Công nghệ Web là môn học thuộc khối kiến thức chuyên ngành, là một trong bốn môn rất quan trọng trong định hướng chuyên ngành Truyền thông xã hội và Công nghệ Web. Sinh viên được training môn này với cấp độ “biết”, “hiểu” và “vận dụng”, nắm rõ các kỹ thuật cơ bản trong thiết kế web như sử dụng HTML [2], CSS [3], JavaScript [4], Bootstrap [5] (framework for developing responsive, mobile-first web sites).
Sau khi học xong môn Internet và Công nghệ Web, sinh viên sẽ đạt một số chuẩn yêu cầu: i) Hiểu và biết được các khái niệm cơ bản liên quan đến Internet và biết được một số công nghệ thiết kế Web; ii) Nắm vững các kỹ thuật sử dụng một số công cụ trên Internet và ứng dụng Web; iii) Có khả năng thiết kế và lập trình Web, lập trình được thao tác sự kiện với Javascript, lập trình Javascript với jQuery. Các mức độ cao hơn, sinh viên sẽ học tiếp môn Phát triển Ứng dụng Web.
2. Phương pháp
2.1. Kế hoạch học và học như thế nào
Bắt đầu ngay từ bây giờ các bạn sinh viên lên kế hoạch ôn tập một cách khoa học và hợp lý (tránh lãng phí thời gian) không chỉ dành cho môn Internet và Công nghệ Web mà các môn học khác. Thông thường, các bạn dành khoảng 2 giờ để ôn tập (ôn cái gì, tôi sẽ nói sau). Theo cá nhân tôi, học từ 4 giờ sáng đến 6 giờ sáng là lý tưởng nhất giúp các bạn nhớ lâu, không bao giờ quên. Nên ôn bài theo dạng cuốn chiếu, trước khi ôn bài hôm nay thì chúng ta phải xem lại bài hôm trước, dần dần các bạn sẽ có phản xạ tốt.
2.2. Nội dung trọng tâm
2.2.1. HTML
Đây là một phần rất quan trọng, mức cơ bản nhất của web là HTML, không hiểu HTML thì rất khó học các phần tiếp theo. HTML là gì? “HTML stands for Hyper Text Markup Language”, chú ý các chữ tô đen. Cấu trúc cơ bản của một trang HTML như sau:
| |
Chú ý: chỉ có các nội dung ở trong tag body mới hiển thị lên trình duyệt.
|
Cách viết các tag trong HTML: <tagname>content</tagname> lưu ý mở tag thì phải đóng tag. Một số tag cơ bản trong HTML như sau:
|
STT
|
Nội dung
|
Minh họa
|
| 1 |
Xuống dòng tag <br>
|
<p>Dòng thứ nhất. Dòng thứ hai.<br> Dòng thứ 3</p>
Kết quả:
|
2
|
HTML Headings:
HTML headings are defined with the <h1> to <h6>
|
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
|
3
|
HTML Paragraphs:
Tức tag <p> ... </p>
|
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
|
4
|
HTML Links
Tức tag <a>
|
<a href="http://www.w3schools.com">This is a link
|
5
|
HTML Images:
Đó là tag <img>
|
<img src="/Đường dẫn đến file hình" alt="Ko thấy file hình" width="104" height="142">
|
6
|
HTML Styles:
SV nhớ lại cách đặt style trong tag.
|
ü Use the style attribute for styling HTML elements
ü Use background-color for background color
ü Use color for text colors
ü Use font-family for text fonts
ü Use font-size for text sizes
ü Use text-align for text alignment
|
7
|
Một số tag về Fomat Text
|
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
|
8
|
HTML Tables
Chú ý:
Tag tạo Tables: <table>
table rows: <tr>
table data: <td>
table headings:<th>
Tìm hiểu thêm: colspan và rowspan và <caption> tại [2]
|
<table style="width:100%">
Jill
Smith
50
Eve
Jackson
94
</table>
|
9
|
Ghi nhớ về HTML Tables:
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
|
| 10 |
HTML Lists:
<ul>Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines the term in a description list
<dd> Defines the description in a description list
|
<ul>
</ul>
|
2.2.2. CSS
Chúng ta sẽ làm quen với CSS, phần này tôi trình trình bày theo dạng vắn tắt cú pháp tổng quan. CSS là gì? Trả lời: CSS stands for Cascading Style Sheets.
Điều đầu tiên, chúng ta phải nắm rõ CSS Syntax and Selectors là như thế nào
Ví dụ:
p {
color: red;
text-align: center;
}
|
STT
|
CSS Selectors
|
Chú ý cách viết cú pháp
|
|
1
|
element Selector
|
p {
text-align: center;
color: red;
}
|
|
2
|
id Selector
|
#para1 {
text-align: center;
color: red;
}
// Do NOT start an ID name with a number!
|
|
3
|
class Selector
|
.center {
text-align: center;
color: red;
}
|
|
4
|
Grouping Selectors
|
h1, h2, p {
text-align: center;
color: red;
}
|
Thứ hai, chúng ta phân loại CSS. Có 3 loại CSS:
(1) External style sheet.
(2) Internal style sheet
(3) Inline style
|
STT
|
Phân loại CSS
|
Chú ý cách viết cú pháp
|
|
1
|
External style sheet
|
<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css">
</head>
//"myStyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
|
|
2
|
Internal style sheet
|
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
|
|
3
|
Inline style
|
<h1 style="color:blue;margin-left:30px;">This is a heading.
|
Chú ý về Cascading Order: highest priority
1>> Inline style (inside an HTML element)
2>> External and internal style sheets (in the head section)
3>> Browser default
2.2.3. JavaScript
Chúng ta sẽ làm quen với JavaScript. JavaScript is the programming language of HTML and the Web. JavaScript có thể:
- JavaScript Can Change HTML Content.
- JavaScript Can Change HTML Attributes.
- JavaScript Can Change HTML Styles (CSS).
- JavaScript Can Validate Data.
JavaScript có thể đặt trong <body> và <head>
Để sử dụng JavaScript, chúng ta dùng tag <script>:
<script language="JavaScript">
<!--
JavaScript statements;
//-->
</script>
Sử dụng một JavaScript từ file định nghĩa sẵn:
<script language="JavaScript" src="/filename.js">
</script>
Ví dụ:
|
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph
<button type="button" onclick="myFunction()">Try it
</body>
</html>
|
JavaScript Function Syntax:
function name_fc(parameter1, parameter2, parameter3) {
code to be executed
}
Một số vấn đề cơ bản:
|
STT
|
Nội dung
|
Minh họa
|
| 1 |
JavaScript Output
|
Writing into an alert box, using window.alert().
Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().
|
| 2 |
JavaScript Arithmetic Operators
|
+ - * / % ++ --
|
| 3 |
Bắt sự kiện
|
Onchange: An HTML element has been changed
Onclick: The user clicks an HTML element
Onmouseover: The user moves the mouse over an HTML element
Onmouseout: The user moves the mouse away from an HTML element
Onkeydown: The user pushes a keyboard key
Onload: The browser has finished loading the page
|
Sinh viên tìm hiểu một số vòng câu lệnh, và các chức năng khác tại [4].
3. Kết luận và Định hướng
Trong bài viết này, tôi giới thiệu cho các bạn sinh viên một số trọng tâm cần phải biết, nhớ, và vận dụng một số kỹ thuật để thiết kế một số trang web cơ bản. Các kiến thức về HTML, CSS, JavaScript là những kiến thức cốt lỗi nền tảng nhất của lập trình web.
Môn học này, sinh viên chỉ cần học ở mức tìm hiểu rộng vì môn học này là nền tảng cho các môn học tiếp theo trong chuyên ngành định hướng “Truyền thông Xã hội và Công nghệ Web”. Học kỳ tiếp theo, sinh viên sẽ được học môn Thiết kế Web và Ứng dụng, đây là môn học đòi hỏi sinh viên phải biết thành thạo HTML, CSS, JavaScript. Vì vậy, sinh viên cố gắng nắm vững các kiến thức cơ bản trong môn học này.
4. Tài liệu tham khảo chính
[1] Slide Bài giảng Internet và Công nghệ Web (https://courses.uit.edu.vn)
[2] HTML(5) Tutorial. Link: http://www.w3schools.com/html/default.asp
[3] CSS Tutorial. Link: http://www.w3schools.com/css/default.asp
[4] JavaScript Tutorial. Link: http://www.w3schools.com/js/default.asp
[5] Bootstrap 3 Tutorial. Link: http://www.w3schools.com/bootstrap/default.asp
