Tổng hợp html và css

: Đây là phần tử được sử dụng để đánh dấu một đoạn văn bản là một tríchdẫn dài hơn, thường được đặt bên trong một đoạn văn bản.: Phần tử này được sử dụng để bao quanh một đoạn văn bản ng

DEPT OF COMPUTER AND COMMUNICATION ENGINEERING INTERNET OF THINGS FOUNDATIONS AND APPLICATIONS LAB ITFL316064/ITFL316064E_01FIE

Group: Phan Văn Võ – Phạm Duy Khánh – Nguyễn Thành Long

HTML (tag, features), CSS (style), Javascript

HTML

1 HTML Heading

a Đặc điểm

HTML Heading là tiêu đề hoặc phụ đề muốn hiển thị trên trang web Các tiêu đề HTML

có cấu trúc phân cấp, từ <h1> (cấp cao nhất) đến <h6> (cấp thấp nhất)

<p style="color:blue;">chữ "màu đỏ"

màu xanh dương</p>

<b> In đậm văn bản

<i> In nghiêng văn bản

<small> Xác định đoạn văn bản nhỏ hơn

<strong> Xác định đoạn văn bản quan trọng <sub> Xác định văn bản có chỉ số dưới <sup> Xác định văn bản có chỉ số trên <ins> Xác định văn bản được chèn <del> Xác định văn bản được xóa

<mark> Xác định văn bản được đánh dấu/ đánh dấu

<p><i>Thuc Tap IoT</i></p>

<p>Phan _Van Vo <sup>10 đ

tt IoT </sup></p>

<p>Toi <del> rot </del> <ins>đậu</ins>

thuc tap IoT </p>

<blockquote>: Đây là phần tử được sử dụng để đánh dấu một đoạn văn bản là một tríchdẫn dài hơn, thường được đặt bên trong một đoạn văn bản.

<q>: Phần tử này được sử dụng để bao quanh một đoạn văn bản ngắn hơn, thường là mộtcâu hoặc một vài từ, để chỉ đó là một trích dẫn

<cite>: Được sử dụng để chỉ định nguồn của trích dẫn Nếu bạn sử dụng `<cite>`, nóthường được đặt bên trong một phần tử `<blockquote>` hoặc `<q>`

<abbr> và title: Khi sử dụng `<abbr>` để chỉ định một từ viết tắt, có thể sử dụng thuộc tính

`title` để cung cấp thông tin về đầy đủ của từ đó khi người dùng di chuyển con trỏ qua

Đời phiêu lưu là thế<br>

Không biết đến ngày mai<br>

Nên giờ đây mới đắng cay<br>

Ngồi trứõc tấm gương sáng rọi vào đó mới

thấy<br>

Thân xác hoang tàn không nhận ra<br>

Kiếp sống không nhà không người

thân<br>

Ta mang bao tội lỗi<br>

Người ơi ta đâu còn chi<br>

Xin hãy tránh xa kiếp đỏ đen

</blockquote>

Delima">R9</abbr> was borned in

+ Một số màu có thể được chỉ định bằng tên màu như "red", "green", "blue", …

+ Màu sắc cũng có thể được áp dụng cho nền của một phần tử bằng cách sử dụng thuộctính background-color

- Trong HTML, một màu có thể được chỉ định làm giá trị RGB bằng công thức sau:

rgb ( đỏ, xanh lá cây , xanh dương )

Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu với giá trị từ 0 đến 255

Điều này có nghĩa là có 256 x 256 x 256 = 16777216 màu có thể có

Ví dụ: rgb(255, 0, 0) được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt ở giá trị caonhất (255) và hai giá trị còn lại (xanh lục và xanh lam) được đặt thành 0

Một ví dụ khác, rgb(0, 255, 0) được hiển thị dưới dạng màu xanh lục, vì màu xanh lá câyđược đặt ở giá trị cao nhất (255) và hai giá trị còn lại (đỏ và xanh lam) được đặt thành 0

Để hiển thị màu đen, đặt tất cả tham số màu thành 0, như sau: rgb(0, 0, 0)

Để hiển thị màu trắng, đặt tất cả tham số màu thành 255, như sau: rgb(255, 255, 255)

- Trong HTML, một màu có thể được chỉ định bằng giá trị thập lục phân ở dạng:

#rrggbb _

Trong đó rr (đỏ), gg (xanh lục) và bb (xanh lam) là các giá trị thập lục phân từ 00 đến ff(giống như số thập phân 0-255)

Ví dụ: #ff0000 được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt ở giá trị cao nhất (ff)

và hai giá trị còn lại (xanh lục và xanh lam) được đặt thành 00

Một ví dụ khác, #00ff00 được hiển thị dưới dạng màu xanh lá cây, vì màu xanh lá câyđược đặt ở giá trị cao nhất (ff) và hai giá trị còn lại (đỏ và xanh lam) được đặt thành 00

Để hiển thị màu đen, đặt tất cả tham số màu thành 00, như sau: #000000

Để hiển thị màu trắng, đặt tất cả tham số màu thành ff, như sau: #ffffff

- Trong HTML, một màu có thể được chỉ định bằng cách sử dụng màu sắc, độ bão hòa và

độ sáng (HSL) ở dạng:

hsl( màu sắc , độ bão hòa , độ sáng )

Hue là một độ trên bánh xe màu từ 0 đến 360 0 là đỏ, 120 là xanh lục và 240 là xanh lam

Độ bão hòa là một giá trị phần trăm 0% có nghĩa là màu xám và 100% là màu đầy đủ

Độ sáng cũng là một giá trị phần trăm 0% là màu đen và 100% là màu trắng

Thử nghiệm bằng cách trộn các giá trị HSL bên dưới:

- Giá trị màu HSLA là phần mở rộng của giá trị màu HSL, với kênh Alpha - chỉ định độ

mờ cho màu

Giá trị màu HSLA được chỉ định bằng:

hsla( màu sắc, độ bão hòa , độ sáng, alpha )

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trongsuốt):

b Code + Kết quả

8

Tomato;">Hello World</h1>

Cascading Style Sheets (CSS) được sử dụng để định dạng bố cục của trang web

Với CSS, có thể kiểm soát màu sắc, phông chữ, kích thước văn bản, khoảng cách giữa cácthành phần, cách các thành phần được định vị và bố trí, hình nền hoặc màu nền nào sẽđược sử dụng, các hiển thị khác nhau cho các thiết bị và kích thước màn hình khác nhau,

và nhiều hơn nữa

* Sử dụng CSS

CSS có thể được thêm vào HTML theo 3 cách:

* Bên ngoài - bằng cách sử dụng một <link> để liên kết đến tệp CSS bên ngoài

Cách phổ biến nhất để thêm CSS là giữ kiểu trong các tệp CSS bên ngoài Tuy nhiên,trong hướng dẫn này, chúng tôi sẽ sử dụng các kiểu nội tuyến và nội bộ vì cách này dễminh họa hơn và bạn cũng dễ dàng tự mình thử hơn

<h1 style="color:blue;">HCMUTE</h1>

<a href="https://www.example.com">Visit Example.com</a>

+ Nội dung của liên kết:

12

- Nội dung bên trong thẻ `<a>` định rõ văn bản hoặc hình ảnh mà người dùng có thểnhấp chuột để điều hướng đến địa chỉ được chỉ định.

<a href="https://www.example.com">Click here to visit Example.com</a>

+ Mở Trang trong Tab/Trình duyệt Mới:

- Sử dụng thuộc tính `target="_blank"` để mở liên kết trong một tab hoặc cửa sổ trìnhduyệt mới

<a href="https://www.example.com" target="_blank">Visit Example.com in a newtab</a>

+ Liên kết tới Phần Tự định địa (Anchor Link):

- Để tạo liên kết đến một vị trí cụ thể trong trang, bạn có thể sử dụng thuộc tính `href`với một giá trị bắt đầu bằng dấu thăng (#) kèm theo tên của vị trí (ví dụ: `#section1`) <a href="#section1">Go to Section 1</a>

+ Liên kết Email:

- Để tạo liên kết gửi email, sử dụng địa chỉ email trong thuộc tính `href`

<a href="mailto:info@example.com">Send an email to Example.com</a>

+ Liên kết File tải về

- Để tạo liên kết để tải về một tệp tin, sử dụng đường dẫn của tệp tin trong thuộc tính

`href`

<a href="documents/document.pdf" download>Download PDF</a>

b Code + Kết quả

 Liên kết HTML

Thuộc target chỉ định nơi mở tài liệu được liên kết.

Thuộc target có thể có một trong các giá trị sau:

 _self- Mở tài liệu trong cùng cửa sổ/tab khi tài liệu được nhấp vào

 _blank- Mở tài liệu trong cửa sổ hoặc tab mới

 _parent- Mở tài liệu trong khung cha

 _top- Mở tài liệu ở chế độ toàn màn hình

<!DOCTYPE html>

<html>

<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the

user's email program (to let them send a

new email), use mailto: inside the href

</html>

 Màu liên kết

Theo mặc định, một liên kết sẽ xuất hiện như thế này (trong tất cả các trình duyệt):

+ Một liên kết chưa được truy cập được gạch chân và có màu xanh lam

+ Một liên kết đã truy cập được gạch chân và có màu tím

+ Một liên kết đang hoạt động được gạch chân và có màu đỏ

Ví dụ

- Ở đây, một liên kết chưa được truy cập sẽ có màu xanh và không có gạch chân Một

liên kết đã truy cập sẽ có màu hồng và không có gạch chân Một liên kết đang hoạtđộng sẽ có màu vàng và được gạch chân Ngoài ra, khi di chuột qua một liên kết(a:hover), nó sẽ chuyển sang màu đỏ và được gạch chân:

target="_blank">HTML Images</a>

<p>A link styled as a button:</p>

target="_blank">This is a link</a>

</body>

</html>

 Liên kết dấu trang

Thẻ HTML <img>được sử dụng để nhúng hình ảnh vào trang web.

Hình ảnh không được chèn vào trang web về mặt kỹ thuật; hình ảnh được liên kết đến các trangweb Thẻ <img>tạo một không gian lưu giữ cho hình ảnh được tham chiếu

Thẻ <img>trống, chỉ chứa các thuộc tính và không có thẻ đóng

20

Thẻ <img>có hai thuộc tính bắt buộc:

 src - Chỉ định đường dẫn đến hình ảnh

 alt - Chỉ định văn bản thay thế cho hình ảnh

Các thuộc tính width, height, và style đều hợp lệ trong HTML

<p>The first image uses the width

attribute (set to 128 pixels), but the

style in the head section overrides it,

and sets the width to 100%.</p>

<img src="html5.gif" alt="HTML5

Icon" width="128" height="128">

attribute to set the width to 128

pixels, this will not be overridden by

the style in the head section:</p>

A paragraph with a floating image A

paragraph with a floating image A

paragraph with a floating image.

</p>

left:</strong></p>

<p>

A paragraph with a floating image A

paragraph with a floating image A

paragraph with a floating image

 rect- xác định một vùng hình chữ nhật

 circle- xác định vùng hình tròn

 poly- xác định một vùng đa giác

 default- xác định toàn bộ khu vực

Chúng ta phải tìm tọa độ x và y cho tất cả các cạnh của hình ảnh muốn trở thành liên kết

the cup of coffee to go to a new page and

read more about the topic:</p>

alt="Workplace" usemap="#workmap"

width="400" height="379">

<mapname="workmap">

coords="34,44,270,350" alt="Computer"

href="computer.htm">

<area shape="circle" coords="337,300,44"

alt="Cup of coffee" href="coffee.htm">

You can specify background images<br>

for any visible HTML element.<br>

26

In this example, the background

image<br>

is specified for a p element.<br>

By default, the background-image<br>

will repeat itself in the direction(s)<br>

where it is smaller than the element<br>

where it is specified (Try resizing the<br>

browser window to see how the<br>

background image behaves.

repeat itself if it is smaller than the

element where it is specified, in this case

</html>

+ Bìa nền

Nếu muốn hình nền bao phủ toàn bộ phần tử có thể đặt background-size thành cover

Ngoài ra, để đảm bảo toàn bộ phần tử luôn được che phủ, hãy đặt background-attachment tínhthành fixed:

Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử, không bị giãn (hình ảnh sẽ giữ nguyên tỷ lệban đầu):

"cover" and the background image will

cover the entire element, in this case the

body element.</p>

28

element, in this case the body element.</p>

Mỗi <source>phần tử có một media xác định thời điểm hình ảnh phù hợp nhất

30

<!DOCTYPE html>

<html>

<head>

<meta name= "viewport"

content= "width=device-width,

<p>Resize the browser to see different

versions of the picture loading at

different viewport sizes.

The browser looks for the first source

element where the media query

matches the user's current viewport

width,

and fetches the image specified in the

srcset attribute.</p>

last child tag of the picture declaration

block.

The img element is used to provide

backward compatibility for browsers

that do not support the picture

element, or if none of the source tags

<h2>A basic HTML table</h2>

<table style= "width:100%">

<tr>

<th>Company</th>

32

<p>To understand the example

better, we have added borders

 Biên giới tròn

Với border-radius , các đường viền có các góc tròn

Bỏ qua đường viền xung quanh bảng bằng cách thoát table khỏi bộ chọn css:

34

Sử dụng style với width hoặc height để chỉ định kích thước của bảng, hàng hoặc cột.

<table style= "width:100%">

Để đặt chiều cao của một hàng cụ thể, hãy thêm style vào thành phần hàng của bảng

<h2>Set the height of the

second row to 200 pixels</h2>

<table style= "width:100%">

<p>Use the TH element to

define table headers.</p>

<table style= "width:100%">

40

<h2>Vertical Table Headers</h2>

<p>The first column becomes table

headers if you set the first table cell

in each table row to a TH element:</

<p>To left-align the table headers,

use the CSS text-align

+ Tiêu đề cho nhiều cột

Ta có thể có tiêu đề trải dài trên hai hoặc nhiều cột.

Để thực hiện việc này, hãy sử dụng colspan trên <th>

44

<p>Use the colspan attribute to

have a header span over multiple

table, use the caption

<p>Cell padding specifies the

space between the cell content

and its borders.</p>

<table style= "width:100%">

Để chỉ thêm phần đệm phía trên nội dung, sử dụng padding-top

Và các vế còn lại có thuộc tính padding-bottom , padding-left , và padding-right :

border: 1px solid black;

<p>We can specify different padding

for all fours sides of the cell content.</

Khoảng cách ô là khoảng cách giữa mỗi ô.

Theo mặc định, không gian được đặt thành 2 pixel.

Để thay đổi khoảng cách giữa các ô trong bảng, sử dụng border-spacing trên table

<p>Change the space between the cells

with the border-spacing property.</p>

<table style= "width:100%">

<body>

<h2>Cell that spans two

columns</h2>

<p>To make a cell span more

than one column, use the colspan

Để tạo một ô trải dài trên nhiều hàng, sử dụng rowspan

<p>To make a cell span

more than one row, use the

<h2>Zebra Striped Table</h2>

<p>For zebra-striped tables, use the

nth-child() selector and add a

background-color to all even (or

odd) table rows:</p>

the nth-child() selector and add a

background-color to all even (or

odd) table rows:</p>

<table style= "width:100%">

Ta có thể kết hợp kiểu dáng từ hai ví dụ trên và sẽ có sọc trên mỗi hàng và mỗi cột

Nếu sử dụng màu trong suốt, ta sẽ có được hiệu ứng chồng chéo.

60

<p>For zebra-striped tables, use

the nth-child() selector and add

a background-color to all even

(or odd) table rows:</p>

<p>Add the border-bottom

property to the tr elements for

<p>Move the mouse over the table

rows to see the effect.</p>

Phần tử <colgroup> phải được sử dụng làm nơi chứa các thông số kỹ thuật của cột.

Mỗi nhóm được chỉ định bằng một <col>

Thuộc tính span chỉ định số lượng cột có kiểu.

Thuộc tính style chỉ định kiểu cho các cột.

<body>

<h2>Colgroup</h2>

<p>Add the a colgroup with a

col element that spans over

two columns to define a style

for the two columns:</p>

<table style= "width: 100%;">