Lab 1 html google firebase compress
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (653.19 KB, 17 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
<b>DEPT OF COMPUTER AND COMMUNICATION ENGINEERINGInternet of Things: Foundations and Applications Lab</b>
<b>MMH: ITFL316064EGroup: </b>
<b>HTML (tag, features), CSS (style), Javascript [1]</b>
Tag name, features:
<b>HTML The </b><iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
<b>Tip: Use CSS to style the </b><iframe> (see example below).
<b>Tip: It is a good practice to always include a title attribute for the </b><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>
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">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>
The <small><head></small> element is a container for metadata (data about data) and is placed between the <small><html></small> tag and the <small><body></small> 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.
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">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">
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5"><b>/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to eachother, on small screens */</b>
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6"><b><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></b>
<b><p>Resize the browser window to see the responsive effect (you will learn more about this in our next</b>
<b> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with ametropolitan area of over 13 million inhabitants.</p></b>
<b> <p>Standing on the River Thames, London has been a major settlement for two millennia, itshistory going back to its founding by the Romans, who named it Londinium.</p></b>
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">Tag name, features:
<b>HTML Symbols</b>
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.
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">Sample codes:
<p>I will display €</p> <p>I will display €</p> <p>I will display €</p> Results:
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">Tag name, features:
<b>HTML Emojis</b>
Emojis look like images, or icons, but they are not.
They are letters (characters) from the UTF-8 (Unicode) character set.
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.
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">Tag name, features:
<b>HTML Form</b>
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:
<b>HTML Grafics</b>
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">Tag name, features:
<b>HTML Video</b>
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:
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
Results:
Tag name, features:
<b>HTML Plug-in</b>
Plug-ins were designed to be used for many different purposes:
<small></small> To run Java applets
<small></small> To run Microsoft ActiveX controls
<small></small> To display Flash movies
<small></small> To display maps
<small></small> To scan for viruses
<small></small> 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:
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">Tag name, features:
<b>HTML Youtube</b>
To play your video on a web page, do the following:
<small></small> Upload the video to YouTube
<small></small> Take a note of the video id
<small></small> Define an <iframe> element in your web page
<small></small> Let the src attribute point to the video URL
<small></small> Use the width and height attributes to specify the dimension of the player
<small></small> Add any other parameters to the URL (see below)
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">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()">
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16"><b>Google Firebase: introduction, account</b>
……… ………
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17"><b>TÀI LIỆU THAM KHẢO</b>
(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)
[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.
<small>Hình 1. 1 Danh sách nhóm 1...1</small>
</div>
