1. Trang chủ
  2. » Công Nghệ Thông Tin

Lab 1 html google firebase compress

17 1 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Lab 1 html google firebase compress
Tác giả Doan Dang Khoa, Tran Anh Huy
Trường học University (not specified)
Chuyên ngành Computer and Communication Engineering
Thể loại Lab Report
Định dạng
Số trang 17
Dung lượng 653,19 KB

Nội dung

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 1

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:

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

<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 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"> <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 4

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

Trang 5

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>

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 7

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

Trang 8

Sample codes:

<p>I will display &euro;</p>

<p>I will display &#8364;</p>

<p>I will display &#x20AC;</p> Results:

Trang 9

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:

Trang 10

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:

Trang 11

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:

Trang 12

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:

Trang 14

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

Trang 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()">

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 16

Google Firebase: introduction, account

………

………

Trang 17

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

Ngày đăng: 13/04/2024, 10:13

TỪ KHÓA LIÊN QUAN

w