PhuHoai Group7

DEPT OF COMPUTER AND COMMUNICATION ENGINEERING
Internet of Things: Foundations and Applications Lab

MMH: ITFL316064E
Group: 07
Mai Xuân Hoài -20119131
Nguyễn Hoàng Phú -20119193
HTML (tag, features), CSS (style), Javascript [1]
Tag name, features
Sample codes
Results
HTML HEADING: HTML headings are titles or subtitles that you want to display on a webpage.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h7> Mùa sau là mùa của chúng ta </h7
</body>
</html>
TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
<!DOCTYPE html>
<html>
<body>
<p><b>Lee Sang-hyeok</b></p>
<p><i>Legneds never die</i></p>
<p>This is 2<sub> subscript</sub> and 2<sup>2</sup></p>
</body>
</html>
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a pen.</p>
<p>This is a apple.</p>
<p style="background-color:tomato;">This is a lengendary.</p>
</body>
</html>

HTML Formatting
HTML contains several elements for defining text with a special meaning.
<!DOCTYPE html>
<html>
<body>
<p><b>Mai Xuan Hoai-20119131</b></p>

<p><i>Nguyen Hoang Phu-20119192</i></p>
<p>This is 2<sub> subscript</sub> and 2<sup>2</sup></p>
</body>
</html>
HTML Quotations
The HTML <q> tag defines a short quotation. Browsers normally insert quotation marks around the
quotation.
<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
Conservation endures as a living discipline because it is inhabited by a magnificent collection of people.
Only by working together can we create solutions to the most vexing problems we face.
</blockquote>
</body>
</html>
HTML Color
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA
values.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Blue;">Blue</h1>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:orange;">Orange</h1>
<h1 style="background-color:red;">Red</h1>
<h1 style="background-color:green;">Green</h1>
<h1 style="background-color:brown;">Brown</h1>
<h1 style="background-color:yellow;">Yellow</h1>
<h1 style="background-color:purple;">Purple</h1>
</body>
</html>

HTML CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:green;">A Green paragraph.</p>
</body>
</html>

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
<!DOCTYPE html>
<html>
<body>
<h1>Link Youtube</h1>
<p><a href="https://www.youtube.com//">This is Youtube!</a></p>
</body>
</html>
HTML Images
Images can improve the design and the appearance of a web page.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src= " mancity_vodich.jpg" alt="City" width="1000" height="600">
</body>
</html>

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Name</th>
<th>Student ID</th>
<th>Class</th>
</tr>
<tr>
<td>Mai Xuân Hoài</td>
<td>20119131</td>
<td>CLA4</td>
</tr>
<tr>
<td>Nguyễn Hoàng Phú</td>
<td>20119192</td>
<td>CLA3</td>
</tr>
<tr>
</table>
</body>
</html>

</html>
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
<!DOCTYPE html>
<html>
<body>
<h2>Sensor List</h2>
<ul>
<li>Temperature</li>
<li>Humidity</li>
<li>Pressure</li>
</ul>
<h2>Device List</h2>
<ol>
<li>PC</li>
<li>Tablet</li>
<li>Laptop</li>
</ol>
</body>
</html>

HTML Block and Inline
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline.
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Joker</p>

<div style="border: 1px solid black">Joker</div>
<p>If you're good ar something, never do it for free</p>
</body>
</html>
HTML Iframes
An HTML iframe is used to display a web page within a web page.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
</body>
</html>

HTML JavaScript
JavaScript makes HTML pages more dynamic and interactive.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>
<p id="demo"></p>
</body>
</html>
HTML - The Head Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and
the <body> tag.
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
<p>The content of the body element is displayed in the browser window 1</p>
<p>The content of the body element is displayed in the browser window 2</p>
</body>
</html>
HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).
<!DOCTYPE html>
<html lang="en">
<head>
<title>IoT Website</title>
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #500;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section::after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #500;
padding: 10px;
text-align: center;
color:
white;
}
}
</style>
</head>
<body>
<header>
<h2>IoT Lab</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Sensor A</a></li>
<li><a href="#">Sensor B</a></li>
<li><a href="#">Sensor C</a></li>
</ul>
</nav>
<article>
<h1>Sensor 1</h1>
<p>This sensor we use for measuring the temperature.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
HTML Symbols
Symbols that are not present on your keyboard can also be added by using entities.
<!DOCTYPE html>
<html>
<body>

<p>I will display €</p>
</body>
</html>
HTML Emojis
Emojis are characters from the UTF-8 character set: 😄 😍 💗
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<span style='font-size:100px;'>🦁</span>
<p>I will display 🦁</p>
<p>I will display 🦁</p>
</body>
</html>
HTML URL Encode

HTML URL encoding is a technique used to convert characters and symbols into a format that can be
safely transmitted over the internet.
https://www.example.com/search?q=coffee&filter=hot drinks
to
https://www.example.com/search?q=coffee&filter=hot%20drinks%26
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
<!
DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">Username:</label><br>
<input type="text" id="fname" name="fname" value="username"><br>
<label for="lname">Password:</label><br>
<input type="password" id="lname" name="lname" value="password"><br><br>
<input type="checkbox" id="rules" name="rules1" value="rules">
<label for="lname">Remember password</label><br>
<br><input type="submit" value="Login">
</form>
</body>
</html>
HTML Canvas Graphics

The HTML <canvas> element is used to draw graphics on a web page.
HTML SVG Graphics
SVG defines vector-based graphics in XML format.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
HTML Video
The HTML <video> element is used to show a video on a web page.
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of the browser.
<!DOCTYPE html>
<html>
<body>
<object width="100%" height="100px" data="snippet.html"></object>
</body>
</html>

HTML Youtube
The easiest way to play videos in HTML, is to use YouTube.
<!DOCTYPE html>
<html>
<body>
<iframe width="956" height="538" src="https://www.youtube.com/embed/l-uNiD_NGPs">

</iframe>
</body>
</html>
Google Firebase: introduction, account

Google bought Firebase, a platform for creating mobile and online applications, in 2014. It offers developers
a set of tools to help them create, enhance, and expand their apps. Several features and services are available
through Firebase, such as a real-time database, cloud storage, authentication, hosting, and analytics.
Firebase's real-time database, which enables developers to store and sync data in real-time across all
connected clients, is one of its core features. This implies that all devices viewing the data instantaneously
reflect any changes made to the data.

Developers can host their web apps on Firebase's safe and scalable hosting infrastructure thanks to the
hosting services that Firebase also offers. Finally, Firebase offers analytics services that give developers
knowledge on how users interact with their applications.
In conclusion, Firebase is a strong platform for creating and maintaining web and mobile applications. It
provides developers with a vast array of tools and services to assist them in creating high-quality, scalable,
and manageable applications.
After creating an account, we need to enable create a Realtime Database and configure it to read and write
the data:
Figure 1:Enable read and write for Realtime Database

To connect Realtime Database with website we use the config that Firebase provides:
Figure 2: Firebase config

The complete Realtime database include all the functions that the web using:
Figure 3: Connected Realtime Database

Website (interface, functions) [1] [2]
Our website is about a future apartment when the big city becomes a Cyberpunk city. Using dark colors not
only shows the modernity of the equipment in the room, but also shows the melancholy future:
"High-tech, low life".
Figure 4: Home page
Figure 5: Sensor page

Sensor pages are used for displaying the temperature and humidity value in the room which are measured by
the hardware or modify value on the Realtime Database.
Figure 6: Device page

Device page allows users to interact with the room’s devices in website with the on or off button which turns
on or turn off the animation of the select device and set the value of its in Realtime Database to 0 when it is
turn off or to 1 when it is turn off.
Hardware
Figure 7: Hardware schematic

References
[1] “F8 Official”, (2020). [Online]. Available: https://www.youtube.com/watch?v=R6plN3FvzFY&list=PL_-
VfJajZj0U9nEXa4qyfB4U5ZIYCMPlz[Accesed 5-2023].
[2]“freeCodeCamp”, 2015. [Online]. Available: https://www.youtube.com/watch?v=a_iQb1lnAEQ
[Accessed 5-2023].
[3] “W3schools”, (2023), ”HTML tutorial”, https://www.w3schools.com/html/ [Accessed 5-2023]

PhuHoai Group7

Uploaded by

Copyright:

Available Formats

PhuHoai Group7

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PhuHoai Group7

Uploaded by

Copyright:

Available Formats

DEPT OF COMPUTER AND COMMUNICATION ENGINEERING

Internet of Things: Foundations and Applications Lab

<h7> Mùa sau là mùa của chúng ta </h7

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

The HTML <p> element defines a paragraph.

<p style="background-color:tomato;">This is a lengendary.</p>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

<p><b>Mai Xuan Hoai-20119131</b></p>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

CSS stands for Cascading Style Sheets.

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:green;">A Green paragraph.</p>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

<p><a href="https://www.youtube.com//">This is Youtube!</a></p>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

There are two display values: block and inline.

<p style="border: 1px solid black">Joker</p>

<p>If you're good ar something, never do it for free</p>

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

<h1>My First JavaScript</h1>

HTML - The Head Element

HTML Layout Elements and Techniques

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

HTML URL Encode

HTML Canvas Graphics

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

<video width="400" controls>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

<object width="100%" height="100px" data="snippet.html"></object>

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

<iframe width="956" height="538" src="https://www.youtube.com/embed/l-uNiD_NGPs">

Google Firebase: introduction, account

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

Figure 1:Enable read and write for Realtime Database

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

Figure 2: Firebase config

Figure 3: Connected Realtime Database

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

Figure 4: Home page

Figure 5: Sensor page

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

Figure 6: Device page

Figure 7: Hardware schematic

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

[3] “W3schools”, (2023), ”HTML tutorial”, https://www.w3schools.com/html/ [Accessed 5-2023]

TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064

You might also like