Add index.html first page#2
Conversation
![github-learning-lab[bot]](https://avatars.githubusercontent.com/in/10572?s=60&v=4){kind=small}
| @@ -0,0 +1 @@ | |||
| Hello there, awesome person! No newline at end of file | |||
There was a problem hiding this comment.
Step 3: Add HTML document structure
Great job opening a pull request @superbakg1618! I've gone ahead and closed your previous issue.
This pull request contains some content, but it doesn't have any of the HTML structure that tells a browser how to structure the content. All pages created with HTML must contain tags that identify it as such. The tags look like this:
<html>
<body>
The HTML content goes here.
</body>
</html>You may notice two copies of the HTML tag, and two copies of the body tag. We call these the opening and closing tags. Let's look at the same code, but include a little explanation.
<html>is the opening HTML tag<body>is the opening body tag</body>is the closing body tag</html>is the closing HTML tag
In HTML, spacing doesn't really matter. We've added some tabs to make the code easier to see, but the web browser will ignore the extra spacing. Now that you understand the building blocks of HTML, let's add HTML to the index.html file in your project.
⌨️ Activity: Add the html and body tags to index.html
Apply this suggested change, or follow the instructions below if you'd like to type out the code manually.
| Hello there, awesome person! | |
| <html> | |
| <body> | |
| Hello there, awesome person! | |
| </body> | |
| </html> |
- Click on Files Changed to see the newly added
index.htmlfile. - Click on the ellipsis (...) and select Edit file.
- Before the existing content, add an opening
<html>tag, and an opening<body>tag. - After the existing content, add a closing
</body>tag, and a closing</html>tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Commit directly to the
add-indexbranch. - Click on Commit changes.
I'll respond when I detect you've committed in this pull request.
| @@ -0,0 +1,5 @@ | |||
| <html> | |||
| <body> | |||
There was a problem hiding this comment.
Step 4: Add a page title
Your web page is beginning to take shape! HTML and body tags are important, but their effect isn't too visible. Next, we'll make a visible change, by giving your page a title. Your page's title will show up on the title bar in your web browser, or as the title of any tabs you've got open. The title is used in all sorts of other places!
The title tag looks like this:
<title>I am a title!</title>But the title tag must be inside of a head tag. By now, you've noticed that tags have a hierarchical structure. In our prior example, the html tag was the parent of the body tag. In a similar fashion, the head tag will be the parent of the title tag, like so:
<head>
<title>I am a title!</title>
</head>Finally, the head and title tags, will be children of the html tag, but siblings of the body tag.
<html>
<head>
<title>I am a title!</title>
</head>
<body>
Some content.
</body>
</html>⌨️ Activity: Give your page a title
Apply this suggested change, or follow the instructions below if you'd like to type out the code manually.
| <body> | |
| <head> | |
| <title>My awesome web page</title> | |
| </head> | |
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Place an opening
<head>tag and an opening<title>tag after the first openinghtmltag, but before thebodytag. - Write out a title after the opening
titletag. - Place a closing
</title>tag and a closing</head>tag after your new title, but before thebodytag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Commit directly to the
add-indexbranch. - Click on Commit changes.
I'll respond when I detect you've committed in this pull request.
There was a problem hiding this comment.
Step 5: Merge your first pull request
🎉 Everything's going so well @superbakg1618! Now that you've got all the bits for a proper HTML page, let's merge it in and see how the browser interprets it.
⌨️ Activity: Merge the HTML, head, title, and body tags
- Click on Merge pull request below.
- Click on Confirm merge.
- Click on Delete branch.
I'll respond when you've merged this pull request.
2 participants
No description provided.