Week 8 HTML, CSS, JavaScript

Chào mừng!

  • Trong những tuần trước, chúng tôi đã giới thiệu cho bạn về Python, một ngôn ngữ lập trình bậc cao sử dụng các khối xây dựng tương tự như chúng ta đã học ở C. Hôm nay, chúng ta sẽ mở rộng các khối xây dựng đó xa hơn nữa với HTML, CSS và JavaScript.

Internet

  • Internet là một công nghệ mà tất cả chúng ta đều sử dụng.

  • Sử dụng các kỹ năng từ những tuần trước, chúng ta có thể xây dựng các trang web và ứng dụng của riêng mình.

  • ARPANET đã kết nối những điểm đầu tiên trên internet với nhau.

  • Các dấu chấm giữa hai điểm có thể được coi là bộ định tuyến (routers).

Bộ định tuyến

  • Để định tuyến dữ liệu từ nơi này sang nơi khác, chúng ta cần đưa ra các quyết định định tuyến. Tức là, ai đó cần lập trình cách dữ liệu được chuyển từ điểm A sang điểm B.

  • Bạn có thể hình dung dữ liệu có thể đi qua nhiều con đường khác nhau từ điểm A đến điểm B, sao cho khi một bộ định tuyến bị tắc nghẽn, dữ liệu có thể chảy qua một con đường khác. Các gói tin (packets) dữ liệu được chuyển từ bộ định tuyến này sang bộ định tuyến khác, từ máy tính này sang máy tính khác.

TCP/IP là hai giao thức cho phép máy tính truyền dữ liệu qua lại giữa chúng trên internet.

IP hay giao thức internet (internet protocol) là một cách để các máy tính có thể nhận diện lẫn nhau qua internet. Mỗi máy tính đều có một địa chỉ duy nhất trên thế giới. Các địa chỉ có dạng như sau:

#.#.#.#

  • Các con số nằm trong khoảng từ 0 đến 255. Địa chỉ IP có độ dài 32-bit, nghĩa là các địa chỉ này có thể đáp ứng hơn 4 tỷ địa chỉ. Các phiên bản địa chỉ IP mới hơn, triển khai 128-bit, có thể đáp ứng nhiều máy tính hơn thế nữa!

  • Trong thế giới thực, các máy chủ làm rất nhiều việc cho chúng ta.

Các gói tin được cấu trúc như sau:

0                   1                   2                   3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Version|  IHL  |Type of Service|          Total Length         |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|         Identification        |Flags|      Fragment Offset    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|  Time to Live |    Protocol   |         Header Checksum       |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                       Source Address                          |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    Destination Address                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    Options                    |    Padding    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
  • Các gói tin được tiêu chuẩn hóa. Nguồn và đích được giữ trong mỗi gói tin.

TCP, hay giao thức điều khiển truyền dẫn (transmission control protocol), giúp theo dõi trình tự của các gói tin đang được gửi.

  • Hơn nữa, TCP được sử dụng để phân biệt các dịch vụ web với nhau. Ví dụ, 80 được sử dụng để biểu thị HTTP và 443 được sử dụng để biểu thị HTTPS. Những con số này là số cổng (port numbers).

  • Khi thông tin được gửi từ vị trí này sang vị trí khác, địa chỉ IP nguồn, địa chỉ IP đích và số cổng TCP sẽ được gửi đi.

  • Các giao thức này cũng được sử dụng để chia nhỏ các tệp lớn thành nhiều phần hoặc các gói tin. Ví dụ, một bức ảnh mèo lớn có thể được gửi trong nhiều gói tin. Khi một gói tin bị mất, TCP/IP có thể yêu cầu gửi lại các gói tin bị thiếu từ máy chủ gốc.

  • TCP sẽ xác nhận khi tất cả dữ liệu đã được truyền và nhận.

DNS

  • Sẽ rất tẻ nhạt nếu bạn cần phải nhớ một địa chỉ IP để truy cập một trang web.

DNS, hay hệ thống phân giải tên miền (domain name systems), là một tập hợp các máy chủ trên internet được sử dụng để định tuyến các địa chỉ trang web như harvard.edu đến một địa chỉ IP cụ thể.

  • DNS đơn giản là một bảng hoặc cơ sở dữ liệu liên kết các tên miền đủ điều kiện cụ thể với các địa chỉ IP cụ thể.

DHCP

DHCP là một giao thức xác định địa chỉ IP cho thiết bị của bạn.

  • Hơn nữa, giao thức này xác định cổng mặc định (default gateway) và các máy chủ tên (nameservers) mà thiết bị của bạn sử dụng.

HTTPS

HTTP hay giao thức truyền tải siêu văn bản (hypertext transfer protocol) là một giao thức ở tầng ứng dụng mà các nhà phát triển sử dụng để xây dựng những thứ mạnh mẽ và hữu ích thông qua việc truyền dữ liệu từ nơi này sang nơi khác. HTTPS là một phiên bản bảo mật của giao thức này.

  • Khi bạn thấy một địa chỉ như https://www.example.com, thực chất bạn đang ngầm truy cập địa chỉ đó với một dấu / ở cuối.

  • Đường dẫn (path) là những gì tồn tại sau dấu gạch chéo đó. Ví dụ, https://www.example.com/folder/file.html truy cập example.com, duyệt đến thư mục folder, và sau đó truy cập tệp có tên file.html.

  • Phần .com được gọi là tên miền cấp cao nhất (top-level domain) được sử dụng để biểu thị vị trí hoặc loại tổ chức liên quan đến địa chỉ này.

https trong địa chỉ này là giao thức được sử dụng để kết nối đến địa chỉ web đó. Theo giao thức, chúng tôi có nghĩa là HTTP sử dụng các yêu cầu (requests) GET hoặc POST để hỏi thông tin từ một máy chủ. Ví dụ, bạn có thể khởi chạy Google Chrome, nhấp chuột phải và chọn inspect. Khi bạn mở developer tools và truy cập Network, chọn Preserve log, bạn sẽ thấy Request Headers. Bạn sẽ thấy các đề cập đến GET. Điều này cũng có thể thực hiện được trong các trình duyệt khác, sử dụng các phương pháp hơi khác một chút.

Ví dụ, khi thực hiện một yêu cầu GET, máy tính của bạn có thể gửi thông tin sau đến máy chủ:

GET / HTTP/2
Host: www.harvard.edu

Lưu ý rằng điều này yêu cầu nội dung được cung cấp trên www.harvard.edu thông qua HTTP.

Thông thường, sau khi gửi yêu cầu đến máy chủ, bạn sẽ nhận được thông tin sau trong Response Headers:

HTTP/2 200
Content-Type: text/html

Cách tiếp cận để kiểm tra các bản nhật ký này có thể hơi phức tạp hơn mức cần thiết. Bạn có thể phân tích hoạt động của các giao thức HTTP tại cs50.dev. Ví dụ, hãy nhập lệnh sau vào cửa sổ terminal của bạn:

curl -I https://www.harvard.edu/

Lưu ý rằng đầu ra của lệnh này trả về tất cả các giá trị header của các phản hồi từ máy chủ.

  • Thông qua công cụ dành cho nhà phát triển trong trình duyệt web, bạn có thể thấy tất cả các yêu cầu HTTP khi duyệt đến trang web ở trên.

Hơn nữa, hãy thực thi lệnh sau trong cửa sổ terminal của bạn:

curl -I https://harvard.edu

Lưu ý rằng bạn sẽ thấy phản hồi 301, cung cấp gợi ý cho trình duyệt về nơi nó có thể tìm thấy trang web chính xác.

Tương tự, hãy thực thi lệnh sau trong cửa sổ terminal của bạn:

curl -I http://www.harvard.edu/

Lưu ý rằng chữ s trong https đã bị loại bỏ. Phản hồi của máy chủ sẽ cho thấy phản hồi là 301, nghĩa là trang web đã được di chuyển vĩnh viễn.

Tương tự như 301, mã 404 có nghĩa là một URL cụ thể không được tìm thấy. Có rất nhiều mã phản hồi khác, chẳng hạn như:

200 OK
301 Moved Permanently
302 Found
304 Not Modified
307 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavailable
  • Đáng chú ý là các lỗi 500 luôn là lỗi của bạn với tư cách là nhà phát triển khi chúng liên quan đến một sản phẩm hoặc ứng dụng do bạn tạo ra. Điều này sẽ đặc biệt quan trọng đối với bộ bài tập của tuần tới và có khả năng là cho dự án cuối khóa của bạn!

HTML

HTML hay ngôn ngữ đánh dấu siêu văn bản (hypertext markup language) được tạo thành từ các thẻ (tags), mỗi thẻ có thể có một số thuộc tính (attributes) mô tả nó.

Trong terminal của bạn, gõ code hello.html và viết mã như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>hello, title</title>
    </head>
    <body>
        hello, body
    </body>
</html>

Lưu ý rằng thẻ html vừa mở vừa đóng tệp này. Hơn nữa, hãy chú ý thuộc tính lang, thuộc tính này thay đổi hành vi của thẻ html. Ngoài ra, hãy lưu ý rằng có cả thẻ head và thẻ body. Việc thụt lề không bắt buộc nhưng nó gợi ý một hệ thống phân cấp.

  • Bạn có thể phục vụ mã của mình bằng cách gõ http-server. Nội dung được phục vụ này hiện có sẵn trên một URL rất dài. Nếu bạn nhấp vào nó, bạn có thể truy cập trang web được tạo bởi mã của riêng bạn.

  • Khi bạn truy cập URL này, hãy lưu ý rằng tên tệp hello.html xuất hiện ở cuối URL này. Hơn nữa, hãy lưu ý, dựa trên URL, máy chủ đang phục vụ qua cổng 8080.

Hệ thống phân cấp của các thẻ có thể được biểu diễn như sau:

  • Kiến thức về hệ thống phân cấp này sẽ hữu ích sau này khi chúng ta học JavaScript.

  • Trình duyệt sẽ đọc tệp HTML của bạn từ trên xuống dưới và từ trái sang phải.

Vì các khoảng trắng và thụt lề thực tế bị bỏ qua trong HTML, bạn sẽ cần sử dụng các thẻ đoạn văn <p> để mở và đóng một đoạn văn. Hãy xem xét ví dụ sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
    </body>
</html>

Lưu ý rằng các đoạn văn bắt đầu bằng thẻ <p> và kết thúc bằng thẻ </p>.

HTML cho phép biểu diễn các tiêu đề:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>headings</title>
    </head>
    <body>
        <h1>One</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
        <h2>Two</h2>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
        <h3>Three</h3>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
        <h4>Four</h4>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
        <h5>Five</h5>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
        <h6>Six</h6>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
    </body>
</html>

Lưu ý rằng <h1>, <h2> và <h3> biểu thị các cấp độ tiêu đề khác nhau.

Chúng ta cũng có thể tạo danh sách không thứ tự trong HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
    </body>
</html>

Lưu ý rằng thẻ <ul> tạo ra một danh sách không thứ tự chứa ba mục.

Chúng ta cũng có thể tạo danh sách có thứ tự trong HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>
    </body>
</html>

Lưu ý rằng thẻ <ol> tạo ra một danh sách có thứ tự chứa ba mục.

Chúng ta cũng có thể tạo một bảng trong HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>table</title>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0</td>
                <td>#</td>
            </tr>
        </table>
    </body>
</html>

Bảng cũng có các thẻ mở và đóng từng phần tử bên trong. Ngoài ra, hãy lưu ý cú pháp cho các bình luận trong HTML.

Hình ảnh cũng có thể được sử dụng trong HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <img alt="photo of bridge" src="bridge.png">
    </body>
</html>

Lưu ý rằng src="bridge.png" chỉ ra đường dẫn nơi tệp hình ảnh được lưu trữ.

Video cũng có thể được bao gồm trong HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <video controls muted>
            <source src="video.mp4" type="video/mp4">
        </video>
    </body>
</html>

Lưu ý rằng thuộc tính type chỉ định rằng đây là một video thuộc loại mp4. Hơn nữa, hãy chú ý cách controls và muted được truyền vào video.

Bạn cũng có thể liên kết giữa các trang web khác nhau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
        Visit <a href="https://www.harvard.edu">Harvard</a>.
    </body>
</html>

Lưu ý rằng thẻ <a> hoặc thẻ neo (anchor) được sử dụng để làm cho Harvard thành một văn bản có thể liên kết.

Bạn cũng có thể tạo các biểu mẫu gợi nhớ đến tìm kiếm của Google:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="search">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

Lưu ý rằng một thẻ form mở ra và cung cấp thuộc tính cho biết nó sẽ thực hiện action (hành động) gì. Trường input được bao gồm, truyền vào tên q và loại là search.

Chúng ta có thể làm cho tìm kiếm này tốt hơn như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
            <button>Google Search</button>
        </form>
    </body>
</html>

Lưu ý rằng autocomplete được chuyển sang off. autofocus được bật.

  • Chúng ta mới chỉ thấy một vài trong số rất nhiều phần tử HTML mà bạn có thể thêm vào trang web của mình. Nếu bạn có ý tưởng thêm thứ gì đó vào trang web của mình mà chúng ta chưa thấy (một nút bấm, một tệp âm thanh, v.v.), hãy thử tìm kiếm trên Google “X trong HTML” để tìm cú pháp chính xác! Tương tự, bạn có thể sử dụng cs50.ai để giúp bạn khám phá thêm các tính năng HTML!

Biểu thức chính quy

Biểu thức chính quy (Regular expressions) hay regexes là một phương tiện để đảm bảo rằng dữ liệu do người dùng cung cấp khớp với một định dạng cụ thể.

Chúng ta có thể triển khai trang đăng ký của riêng mình có sử dụng regex như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" placeholder="Email" type="email">
            <button>Register</button>
        </form>
    </body>
</html>

Lưu ý rằng thẻ input bao gồm các thuộc tính chỉ định đây là loại email. Trình duyệt biết cách kiểm tra kỹ xem đầu vào có phải là một địa chỉ email hay không.

Mặc dù trình duyệt sử dụng các thuộc tính tích hợp này để kiểm tra địa chỉ email, chúng ta có thể thêm thuộc tính pattern để đảm bảo rằng chỉ dữ liệu cụ thể mới được chấp nhận trong địa chỉ email:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
            <button>Register</button>
        </form>
    </body>
</html>

Lưu ý rằng thuộc tính pattern được cung cấp một biểu thức chính quy để biểu thị rằng địa chỉ email phải bao gồm ký hiệu @ và .edu.

  • Bạn có thể tìm hiểu thêm về biểu thức chính quy từ tài liệu của Mozilla. Ngoài ra, bạn có thể đặt câu hỏi cho cs50.ai để nhận được các gợi ý.

CSS

CSS, hay tờ mẫu kiểu xếp chồng (cascading style sheet), là một ngôn ngữ đánh dấu cho phép bạn tinh chỉnh thẩm mỹ cho các tệp HTML của mình.

  • CSS chứa đầy các thuộc tính (properties), bao gồm các cặp khóa-giá trị (key-value).

Trong terminal của bạn, gõ code home.html và viết mã như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body>
        <p style="font-size: large; text-align: center;">
            John Harvard
        </p>
        <p style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </p>
        <p style="font-size: small; text-align: center;">
            Copyright © John Harvard
        </p>
    </body>
</html>

Lưu ý rằng một số thuộc tính style được cung cấp cho các thẻ <p>. font-size được đặt thành large, medium, hoặc small. Sau đó, text-align được đặt thành center.

Mặc dù đúng, nhưng cách trên không được thiết kế tốt. Chúng ta có thể loại bỏ sự dư thừa bằng cách sửa đổi mã của mình như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body style="text-align: center">
        <div style="font-size: large">
            John Harvard
        </div>
        <div style="font-size: medium">
            Welcome to my home page!
        </div>
        <div style="font-size: small">
            Copyright © John Harvard
        </div>
    </body>
</html>

Lưu ý rằng các thẻ <div> được sử dụng để chia tệp HTML này thành các vùng cụ thể. text-align: center được gọi trên toàn bộ phần thân (body) của HTML. Bởi vì mọi thứ bên trong body đều là con của body, thuộc tính center sẽ được xếp chồng (cascade) xuống các phần tử con đó.

Hóa ra có các thẻ ngữ nghĩa (semantic tags) mới hơn được bao gồm trong HTML. Chúng ta có thể sửa đổi mã của mình như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body style="text-align: center">
        <header style="font-size: large">
            John Harvard
        </header>
        <main style="font-size: medium">
            Welcome to my home page!
        </main>
        <footer style="font-size: small">
            Copyright © John Harvard
        </footer>
    </body>
</html>

Lưu ý rằng header và footer đều có các kiểu khác nhau được gán cho chúng.

Việc đặt kiểu dáng và thông tin tất cả ở cùng một vị trí không phải là một thực hành tốt. Chúng ta có thể chuyển các thành phần của kiểu dáng lên đầu tệp như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <style>
            .centered
            {
                text-align: center;
            }

            .large
            {
                font-size: large;
            }

            .medium
            {
                font-size: medium;
            }

            .small
            {
                font-size: small;
            }
        </style>
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Welcome to my home page!
        </main>
        <footer class="small">
            Copyright © John Harvard
        </footer>
    </body>
</html>

Lưu ý rằng tất cả các thẻ kiểu dáng đều được đặt trong head bên trong thẻ bao bọc style. Ngoài ra, hãy lưu ý rằng chúng ta đã gán các lớp (classes), được gọi là centered, large, medium và small cho các phần tử của mình, và chúng ta chọn các lớp đó bằng cách đặt một dấu chấm trước tên, như trong .centered.

Hóa ra chúng ta có thể chuyển tất cả mã kiểu dáng của mình vào một tệp đặc biệt gọi là tệp CSS. Chúng ta có thể tạo một tệp có tên style.css và dán các lớp của mình vào đó:

.centered
{
    text-align: center;
}

.large
{
    font-size: large;
}

.medium
{
    font-size: medium;
}

.small
{
    font-size: small;
}

Lưu ý rằng đây nguyên văn là những gì đã xuất hiện trong tệp HTML của chúng ta.

Sau đó, chúng ta có thể cho trình duyệt biết nơi tìm thấy CSS cho tệp HTML này:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="style.css" rel="stylesheet">
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Welcome to my home page!
        </main>
        <footer class="small">
            Copyright © John Harvard
        </footer>
    </body>
</html>

Lưu ý rằng style.css được liên kết với tệp HTML này dưới dạng một trang kiểu dáng (stylesheet), cho trình duyệt biết nơi lưu trữ các kiểu dáng mà chúng ta đã tạo.

Frameworks

  • Tương tự như các thư viện bên thứ ba mà chúng ta có thể tận dụng trong Python, có các thư viện bên thứ ba được gọi là frameworks mà chúng ta có thể sử dụng với các tệp HTML của mình.

Bootstrap là một trong những framework này mà chúng ta có thể sử dụng để làm đẹp HTML của mình và dễ dàng hoàn thiện các yếu tố thiết kế sao cho các trang của chúng ta dễ đọc hơn.

Bootstrap có thể được sử dụng bằng cách thêm thẻ link sau vào head của tệp html của bạn:

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <title>bootstrap</title>
</head>

Hãy xem xét mã HTML sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>phonebook</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Carter</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>+1-949-468-2750</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Lưu ý rằng, khi xem phiên bản được phục vụ của trang này, nó khá đơn điệu.

Bây giờ hãy xem xét mã HTML sau có triển khai việc sử dụng Bootstrap:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <title>phonebook</title>
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Carter</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-949-468-2750</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Lưu ý xem trang web này hiện đã đẹp hơn bao nhiêu.

Tương tự, hãy xem xét phần mở rộng sau của trang tìm kiếm mà chúng ta đã tạo trước đó:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <title>search</title>
    </head>
    <body>
        <div class="container-fluid">
            <nav class="m-3 nav">
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://about.google/">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://store.google.com/">Store</a>
                </li>
                <li class="nav-item ms-auto">
                    <a class="nav-link text-dark" href="https://www.google.com/gmail/">Gmail</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://www.google.com/imghp">Images</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://www.google.com/intl/en/about/products">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
                            <path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
                        </svg>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-primary" href="https://accounts.google.com/ServiceLogin" role="button">Sign in</a>
                </li>
            </nav>
            <div class="text-center">
                <img alt="Happy Cat" class="img-fluid w-25" src="cat.gif">
                <form action="https://www.google.com/search" class="mt-4" method="get">
                    <input autocomplete="off" autofocus class="form-control form-control-lg mb-4 mx-auto w-50" name="q" placeholder="Query" type="search">
                    <button class="btn btn-light">Google Search</button>
                    <button class="btn btn-light" name="btnI">I'm Feeling Lucky</button>
                </form>
            </div>
        </div>
    </body>
</html>

Phiên bản này của trang đã được tạo kiểu cực kỳ phong cách, nhờ vào Bootstrap.

JavaScript

  • JavaScript là một ngôn ngữ lập trình khác cho phép tạo sự tương tác trong các trang web.

Hãy xem xét cách triển khai hello.html sau đây bao gồm cả JavaScript và HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <script>
            function greet()
            {
                alert('hello, ' + document.querySelector('#name').value);
            }
        </script>
        <title>hello</title>
    </head>
    <body>
        <form onsubmit="greet(); return false;">
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

Lưu ý cách biểu mẫu này sử dụng thuộc tính onsubmit để kích hoạt một script nằm ở đầu tệp. Script sử dụng alert để tạo một cửa sổ cảnh báo bật lên. #name.value đi đến hộp văn bản trên trang và lấy giá trị do người dùng nhập.

Nói chung, việc trộn lẫn onsubmit và JavaScript được coi là thiết kế không tốt. Chúng ta có thể cải tiến mã của mình như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('form').addEventListener('submit', function(e) {
                    alert('hello, ' + document.querySelector('#name').value);
                    e.preventDefault();
                });
            });
        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

Lưu ý rằng phiên bản mã này tạo ra một addEventListener để lắng nghe hành động submit của biểu mẫu được kích hoạt. Lưu ý cách DOMContentLoaded đảm bảo rằng toàn bộ trang được tải xong trước khi thực thi JavaScript.

Chúng ta có thể nâng cao mã này như sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let input = document.querySelector('input');
                input.addEventListener('keyup', function(event) {
                    let name = document.querySelector('p');
                    if (input.value) {
                        name.innerHTML = `hello, ${input.value}`;
                    }
                    else {
                        name.innerHTML = 'hello, whoever you are';
                    }
                });
            });
        </script>
        <title>hello</title>
    </head>
    <body>
        <input autocomplete="off" autofocus placeholder="Name" type="text">
        <p></p>
    </body>
</html>

Lưu ý rằng DOM được cập nhật động trong bộ nhớ khi người dùng nhập tên. Nếu có một giá trị bên trong input, khi xảy ra sự kiện keyup trên bàn phím, DOM sẽ được cập nhật. Nếu không, văn bản mặc định sẽ được hiển thị.

  • JavaScript cho phép bạn đọc và sửa đổi động tài liệu html được tải vào bộ nhớ sao cho người dùng không cần tải lại trang để thấy các thay đổi.

Hãy xem xét mã HTML sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>background</title>
    </head>
    <body>
        <button id="red">R</button>
        <button id="green">G</button>
        <button id="blue">B</button>
        <script>
            let body = document.querySelector('body');
            document.querySelector('#red').addEventListener('click', function() {
                body.style.backgroundColor = 'red';
            });
            document.querySelector('#green').addEventListener('click', function() {
                body.style.backgroundColor = 'green';
            });
            document.querySelector('#blue').addEventListener('click', function() {
                body.style.backgroundColor = 'blue';
            });
        </script>
    </body>
</html>

Lưu ý rằng JavaScript lắng nghe khi một nút cụ thể được nhấp. Sau khi nhấp như vậy, một số thuộc tính kiểu dáng trên trang sẽ được thay đổi. body được xác định là phần thân của trang. Sau đó, một trình lắng nghe sự kiện chờ đợi việc nhấp vào một trong các nút. Sau đó, body.style.backgroundColor được thay đổi.

Tương tự, hãy xem xét ví dụ sau:

<!DOCTYPE html>

<html lang="en">
    <head>
        <script>
            // Toggles visibility of greeting
            function blink()
            {
                let body = document.querySelector('body');
                if (body.style.visibility == 'hidden')
                {
                    body.style.visibility = 'visible';
                }
                else
                {
                    body.style.visibility = 'hidden';
                }
            }

            // Blink every 500ms
            window.setInterval(blink, 500);
        </script>
        <title>blink</title>
    </head>
    <body>
        hello, world
    </body>
</html>

Ví dụ này làm cho một văn bản nhấp nháy theo một khoảng thời gian nhất định. Lưu ý rằng window.setInterval nhận vào hai đối số: Một hàm được gọi và một khoảng thời gian chờ (tính bằng mili giây) giữa các lần gọi hàm.

Hãy xem xét cách triển khai JavaScript sau đây để tự động hoàn thành văn bản:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>autocomplete</title>
    </head>
    <body>
        <input autocomplete="off" autofocus placeholder="Query" type="text">
        <ul></ul>
        <script src="large.js"></script>
        <script>
            let input = document.querySelector('input');
            input.addEventListener('keyup', function(event) {
                let html = '';
                if (input.value) {
                    for (word of WORDS) {
                        if (word.startsWith(input.value)) {
                            html += `<li>${word}</li>`;
                        }
                    }
                }
                document.querySelector('ul').innerHTML = html;
            });
        </script>
    </body>
</html>

Đây là một cách triển khai tự động hoàn thành (autocomplete) bằng JavaScript. Nó lấy dữ liệu từ một tệp (không có trong hình ở đây) có tên là large.js, vốn là một danh sách các từ.

  • Khả năng của JavaScript là rất nhiều và có thể được tìm thấy trong Tài liệu JavaScript.

Tổng kết

Trong bài học này, bạn đã học cách tạo các tệp HTML của riêng mình, tạo kiểu cho chúng, tận dụng các framework của bên thứ ba và sử dụng JavaScript. Cụ thể, chúng ta đã thảo luận về…

  • TCP/IP

  • DNS

  • HTML

  • Biểu thức chính quy

  • CSS

  • Frameworks

  • JavaScript

Hẹn gặp lại bạn lần sau!