TÀI LIỆU HAY - CHIA SẺ KHÓA HỌC MIỄN PHÍ

Google is one of the most popular search engines in the world, and it's no surprise that many people want to create their own Google homepage with HTML and CSS. Fortunately, it's easier than you might think, and you can create a basic version of Google's homepage in just 40 minutes.

Step 1: Basic HTML structure

The first step in creating a Google homepage is to create a basic HTML structure. Open a text editor like Notepad or Sublime Text, and create a new file. Save it as "index.html".











This is the basic structure of an HTML page. The "DOCTYPE" declaration tells the browser which version of HTML you're using. The "html" tag indicates the start of the HTML document. The "head" tag contains metadata about the document, such as the title. The "body" tag contains the content of the page.

Step 2: Add the Google logo

The next step is to add the Google logo to the page. You can download the Google logo from the Google Images website. Save it as "google.png" in the same directory as your "index.html" file.

To add the image to the page, use the "img" tag:



The "src" attribute specifies the source of the image. The "alt" attribute provides alternative text for the image, in case it can't be displayed.

Step 3: Add the search box

The search box is a crucial part of Google's homepage, and it's easy to add to your own version. Use the "form" and "input" tags:

The "form" tag creates a form that can be used to submit data to a server. The "input" tag creates a text box for the user to enter their search query. The "name" attribute is used to identify the input field when the form is submitted. The "placeholder" attribute provides a hint to the user about what to enter. The two "submit" buttons allow the user to submit their search query, either to perform a standard Google search or to go directly to the first search result.

Step 4: Add the footer

The footer contains links to other Google services, as well as copyright information. Use the "ul" and "li" tags to create a list of links:



The "ul" tag creates an unordered list, and the "li" tag creates each list item. Each link is created using an "a" tag. The "href" attribute specifies the URL to link to, and the text inside the tag is the link text. The "©" symbol creates the copyright symbol, and the year is added using the current year.

Step 5: Add some CSS

By default, the HTML structure above will look very plain. To make it look more like Google's homepage, you can add some CSS styles.

body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}

header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
padding: 10px 15px;
border-radius: 30px;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="submit"] {
padding: 10px 15px;
border-radius: 30px;
border: none;
background-color: #f2f2f2;
color: #555;
margin-left: 10px;
cursor: pointer;
}

footer {
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

footer li {
margin-right: 20px;
}

footer a {
color: #888;
}

This CSS adds some basic styles to the page. The "body" style sets the background color to a light gray, and sets the font family to Arial or a similar sans-serif font. The "header" style uses flexbox to horizontally align the logo and search box, and adds a white background and box shadow. The "input[type="text"]" and "input[type="submit"]" styles create a rounded search box and submit buttons. The "footer" style adds a white background and box shadow to the footer. The "footer ul", "footer li", and "footer a" styles modify the styling for the link list in the footer.

Wrapping up

Creating a basic version of the Google homepage with HTML and CSS is a fun project that can be completed in just 40 minutes. With a little more time and effort, you can add more features and make your version more like the real thing. It's a great way to learn HTML and CSS, and can even be a stepping stone to learning more advanced web development skills.