Add index.html #2
Conversation
Step 3: Add HTML document structureGreat job opening a pull request @Feyn-Man! 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.
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 ⌨️ Activity: Add the
|
![github-learning-lab[bot]](https://avatars.githubusercontent.com/in/10572?s=60&v=4){kind=small}
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
- Click on Files Changed.
- Click on the 📝 to edit the 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.
Watch below for my response
There was a problem hiding this comment.
I didn't detect opening and closing head and title tags. Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the tags:
<head>,<title>,</title>, and</head>. - Check the order of your tags. The opening
<head>tag should appear first, followed by the opening<title>tag, then the title itself, the closing</title>tag, and the closing</head>tag. - Make sure you placed the head and title tags after the
<html>tag, but before the<body>tag. - Ensure you modified the
index.htmlfile, and not some other file.
Let's try again!
⌨️ Activity: Give your page a title
- Click on Files Changed.
- Click on the 📝 to edit the file.
- Place an opening
<head>tag and an opening<title>tag after the first opening HTML tag, but before the body tag. - Write out a title after the opening title tag.
- Place a closing
</title>tag and a closing</head>tag after your new title, but before the body 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.
There was a problem hiding this comment.
Step 5: Merge your first pull request
🎉 Everything's going so well @Feyn-Man! 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.
Watch below for my response
Add index.html