[HTML] Login with Google or Facebook

alang-dev commented 2 months ago

Description: Create an HTML page for user login using Google and Facebook authentication. This task focuses solely on the HTML structure without any CSS styling. The page should include buttons for Google and Facebook login.

Steps:

Create a new HTML file named login.html.
Add the basic HTML structure, including the <!DOCTYPE html>, <html>, <head>, and <body> tags.
Include a <title> tag in the <head> section with the page title "Login Page".
Inside the <body> section, add an <h1> tag with the text "Login to One-Stop Book Hub".
Create two <div> elements, each containing a <button> element. One button should have the text "Login with Google" and the other "Login with Facebook".

thoangne commented 2 months ago


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>
<body>
    <h1>Login to One-Stop Book Hub</h1>
    <div><button>Login with Facebook</button></div>
    <div><button>Login with Google</button></div>
</body>
</html>

alang-dev commented 2 months ago

Hi @thoangne , Can you help to research and answer below questions pls? You can answer in the comment.

If our website is required to support multi languages, do we need to change the value of lang=""? can we put multi languages there?
Is there any limitation of charset="UTF-8"?
What happen if I change "initial-scale=2.0"? Are there real-world cases to change the scale?

thoangne commented 2 months ago

in my research, If our website is required to support multi languages, we can change the value of lang="" , but we can't put multi languages there because lang="" attri is designed to specify the primary language of a particular piece of content. Putting multiple languages here will cause instability and the browser will not be able to understand which language is preferred. instead, we use hreflang to specify different language versions of website. Example:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Multilingual Website</title>
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
</head>
<body>
</body>
</html>
```
i think the limitation of charset="UTF-8" is special characters and old systems. but overall UTF-8 is still the best choice for most web applications today.
if you change "initial-scale=2.0" the HTML document will zoom in the webpage to 2x its original size when it is first loaded. The case for applying "initial-scale=2.0" to real work is your website contains content that requires close examination, such as technical drawings or scientific diagrams, zooming in can be helpful.

alang-dev / auto-parts

[HTML] Login with Google or Facebook #1