C++ là một ngôn ngữ lập trình hướng đối tượng được mở rộng từ ngôn ngữ C. Cùng với C thì C++ đứng thứ 6 trên bảng xếp hạng các ngôn ngữ phổ biến nhất thế giới (sau Python, Java, JavaScript, C), và cũng là ngôn ngữ quan trọng bật nhất trong việc phát triển các hệ thống kinh doanh quy mô lớn được vận hành bởi các công ty lớn, cũng như trong các hệ thống tài chính và hệ thống các tổ chức công do chính phủ điều hành.
Trang 1DEPT OF COMPUTER AND COMMUNICATION ENGINEERING
Internet of Things: Foundations and Applications Lab
MMH: ITFL316064E Group:
HTML (tag, features), CSS (style), Javascript [1]
Tag name, features:
HTML The <iframe> tag specifies an inline frame
An inline frame is used to embed another document within the current HTML document
Tip: Use CSS to style the <iframe> (see example below)
Tip: It is a good practice to always include a title attribute for the <iframe> This is used by screen readers
to read out what the content of the <iframe> is
Sample codes:
<p>Using JavaScript to change the name of the member in a team:</p>
<button type="button" onclick="myName()">Change the name</button>
<p id="demo">Doan Dang Khoa</p>
<script>
function myName() {
document.getElementById("demo").innerHTML = "Tran Anh Huy";
}
</script>
Results:
Tag name, features:
Trang 2JavaScript makes HTML pages more dynamic and interactive.
Sample codes:
<p>Using JavaScript to change the name of the member in a team:</p>
<button type="button" onclick="myName()">Change the name</button>
<p id="demo">Doan Dang Khoa</p>
<script>
function myName() {
document.getElementById("demo").innerHTML = "Tran Anh Huy";
}
</script>
Results:
Tag name, features:
HTML Head
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag
HTML metadata is data about the HTML document Metadata is not displayed
Metadata typically defines the document title, character set, styles, scripts, and other meta information
Trang 3Sample codes:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Introductin of HTML</title>
</head>
Results:
Tag name, feature
HTML Layout
HTML has several semantic elements that define the different parts of a web page:
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
Trang 4body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */ nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */ background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
Trang 5background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
Trang 6<p>In this example, we have created a header, two columns/boxes and a footer On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Result:
Trang 7Tag name, features:
HTML Symbols
HTML entities were described in the previous chapter
Many mathematical, technical, and currency symbols, are not present on a normal keyboard
To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol
Trang 8Sample codes:
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p> Results:
Trang 9Tag name, features:
HTML Emojis
Emojis look like images, or icons, but they are not
They are letters (characters) from the UTF-8 (Unicode) character set
Sample codes:
<p style="font-size:48px">
🐶 😄 😍 💗🖕
Results:
Tag name, features:
HTML URL Encode
A URL is another word for a web address
A URL can be composed of words (e.g w3schools.com), or an Internet Protocol (IP) address (e.g 192.68.20.50)
Most people enter the name when surfing, because names are easier to remember than numbers
Sample codes:
<form method="get">
<input type="text" name="get method">
<input type="submit">
</form>
Results:
Trang 10Tag name, features:
HTML Form
An HTML form is used to collect user input The user input is most often sent to a server for processing
Sample codes:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Khoa"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doan"><br><br>
<input type="submit" value="Submit">
</form>
Results:
Tag name, features:
HTML Grafics
The HTML <svg> element is a container for SVG graphics
SVG has several methods for drawing paths, boxes, circles, text, and graphic images
Sample codes:
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Results:
Trang 11Tag name, features:
HTML Video
The HTML <video> element is used to show a video on a web page
Sample codes:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Results:
Trang 12name, features:
HTML Audio
The HTML <audio> element is used to play an audio file on a web page
Sample codes:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Results:
Tag name, features:
HTML Plug-in
Plug-ins were designed to be used for many different purposes:
To run Java applets
To run Microsoft ActiveX controls
To display Flash movies
To display maps
To scan for viruses
To verify a bank id
Sample codes:
The <object> element defines an embedded object within an HTML document
<object width="100%" height="500px" data="snippet.html"></object>
The <embed> element also defines an embedded object within an HTML document
<embed src="audi.jpeg">
Results:
Trang 14Tag name, features:
HTML Youtube
To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
Sample codes:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Results:
Tag name, features:
HTML Geolocation
Trang 15The HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user approves it
Sample codes:
<p>Displaying location using Latitude and Longitude</p>
<button class="geeks" onclick="getlocation()">
Click Me
</button>
<p id="demo1"></p>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerHTML =
"Latitude: " + pos.coords.latitude +
"<br>Longitude: " + pos.coords.longitude;
}
</script>
Results:
Trang 16Google Firebase: introduction, account
………
………
Trang 17Website (interface, functions) [1] [2]
Hình 1 1 Danh sách nhóm 1
………
………
………
TÀI LIỆU THAM KHẢO
(lưu ý: trích dẫn theo chuẩn IEEE và trích dẫn tự động, xem video clip hướng dẫn trên trang dạy học số)
Clip demo: link (youtube)
References
[1] P M Tien, Ky nang dinh huong noi dung nghien cuu khoa hoc, Tp HCM: ĐH SPKT Tp HCM, 2021 [2] N C Đức, Kỹ năng lập trình C lần 2, Tp.HCM: NXB ĐH SPKT Tp.HCM, 2021
Hình 1 1 Danh sách nhóm 1 1