The <head></head> section
Title, Meta tags and
Links to style sheet
This is the tags I am including in the head section. The title tag is not new but needs a title filled in. Then there are 3 meta tags and 2 links to the style sheets. Those 5 lines go in between the closing </title> tag and the closing </head> tags. Below is a table that explains more.
<head>
<title>Page Title</title>
<meta charset="UTF-8"> <meta name="description" content=" Description of your webpage."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="ourstyles.css" rel="stylesheet" type="text/css"> <link href="ourmobile.css" rel="stylesheet" media="screen and (max-width:999px)">
</head>
| charset | <meta charset="UTF-8"> Tells the browser that you are using the utf-8 character set. Is not required for page to work. |
| Page Description | <meta name="description" content="Describe your page here."> In 155 characters or less, describe your page as you would want it to appear in a search engine listing. This tag goes in the head section. I have mine right under the title. This tag is not required but you are free to use it. It is a good idea to use this meta tag to describe your page. |
| Viewport | <meta name="viewport" content="width= device-width, initial-scale=1.0"> This helps the page fit to the size of your screen and should be on all your pages. width=device-width tells the webpage to follow the width of the device and initial-scale=1.0 sets the zoom level when page is loaded. |
| Page Author | <meta name="author" content="your name here" /> This is a place for your name or the author of the website. This tag is not required but you can use it if you want to.I did not include this on the code. |
| Robots meta tag | <meta name="robots" content="noindex, nofollow"> noindex means to do not index this site and nofollow means do not follow the links on this page.You can use just one of them or both. Use this if you do not want your page indexed by robots. Either the robots follow it or not. |
| Style Sheet Links | <link href="ourstyles.css" rel="stylesheet" type="text/css"> <link href="ourmobile.css" rel="stylesheet" media="screen and (max-width:999px)"> These links are what links our css style sheets to the html document. The first one is the link to the main CSS style sheet. I called it ourstyles.css. You can call it whatever you want. Just remember that you need to save that style sheet that name. The second one is the link to our mobile style sheet. We use this style sheet to change css for the mobile screen. Responsive web design. I called it ourmobile.css and our mobile css sheet needs to be saved as that name. The link to our mobile sheet has a media query that will find out what size screen the user is using and if there screen is 999 pixels wide or less, then the styling on the mobile sheet will come in effect. |