I'm going to add my head tag first, and then I can go ahead and add my body tag. We'll then kick things off by adding a few tags into the head such as meta, so we can set our charset, and it is going to have a value of utf-8. We're also going to set a few other properties:
<head> <meta charset="utf-8"> </head>
I'm going to set a title tag, this is going to show up inside of the tab as the tab's title, we can set ours to Join then we can add a space, a vertical line by using |, and the name of our app, something like ChatApp: This will show up any tab title. Then we can go ahead and link in our style sheet just like we did for chat.html. I'm going to grab that style sheet reference from chat.html, copy it into the head:
<head>
<meta charset="utf-8">
<title>Join | ChatApp</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
I'm going to add a title tag to chat.html. In chat.html we can specify title, just like we did over inside index.html. We can give this one a page of Chat, with a bar surrounded by spaces, and we're also going to give it the same app name, ChatApp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat | ChatApp</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
Now that we have this in place there is one more thing I want to do before we start updating body, this is set a viewport tag. The viewport tags let you specify certain things about how your site should be rendered. The viewport tag I'm about to add is going to make our website display much better on mobile. Instead of being really zoomed out, it's going to fit to the width of your phone, tablet, or any other device.
We're going to copy this tag from index.html to chat.html when we're done, but for now we'll kick things off by adding a meta tag.
This time around instead of specifying charset like we've done in the past, we're going to give it a name equal to viewport:
<head> <meta charset="utf-8"> <title>Join | ChatApp</title> <meta name="viewport" content=""> <link rel="stylesheet" href="/css/style.css"> </head>
Now we can go ahead and add a few options about what we want to do to that viewport. All of this is going to happen inside content. This is going to be a comma-separated list of key-value pairs, for example is width will be device-width. This tells your browser to use the device's width as the web page's width, and then we can add a comma, a space, and specify our next key-value pair. I'm going to use initial-scale and set that equal to 1. This is going to scale the website appropriately so it doesn't look all zoomed out, and finally user-scalable will be set equal to no:
<head> <meta charset="utf-8"> <title>Join | ChatApp</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="/css/styles.css"> </head>
We have styles in place to make the text bigger and to make sure that a user can always see everything, so there's no reason to give users the ability to scale. Now as mentioned, we're going to take this meta tag, copy it to the clipboard, and add it for chat.html as well. Now that we have our head tags, set up for index.html we can move on to the body.