Scribd
Upload
51 views17 pages

Lab 1 - HTML - GOOGLE FIREBASE

The document discusses various HTML tags and their features, providing code examples for each. It covers common tags like <iframe>, <head>, <form>, <video>, and <audio>, as well as tags for specific purposes like geolocation, YouTube embedding, and symbols. For each tag, a brief description is given along with sample code and the output or result of the code. The document serves as a reference for basic HTML tags and their uses.

Uploaded by

Huy Huy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views17 pages

Lab 1 - HTML - GOOGLE FIREBASE

The document discusses various HTML tags and their features, providing code examples for each. It covers common tags like <iframe>, <head>, <form>, <video>, and <audio>, as well as tags for specific purposes like geolocation, YouTube embedding, and symbols. For each tag, a brief description is given along with sample code and the output or result of the code. The document serves as a reference for basic HTML tags and their uses.

Uploaded by

Huy Huy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

DEPT 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:

HTML JavaScript

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


JavaScript 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.

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


Sample 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;
}

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


body {
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%;

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


background-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>

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


<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:
TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064
Tag 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.

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


Sample codes:
<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

Results:

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


Tag 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">
&#128054; &#128516; &#128525; &#128151;&#128405

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:

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


Tag 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:

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


Tag 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:

Tag

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


name, 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:

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


TT CƠ SỞ VÀ ỨNG DỤNG IOTS – ITFL316064
Tag 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

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


The 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:

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


Google Firebase: introduction, account
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………

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


…………………………………………………………………………………………………………………

Website (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

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

You might also like