Global Structure of an HTML Document

Even though most web pages look different from one another, 0:00 every web page follows a common structure. 0:02 Each webpage you create should instruct the browser the version of HTML you're 0:05 using, provide general information about the page like the title for example. 0:09 And define where to display the visible content of the page like images, 0:13 text and links. 0:17 You can code along with me by clicking the launch work space button 0:19 next to the video. 0:22 This will bring up the text editor we're going to use to build our simple website 0:23 using HTML. 0:26 For now you should only see three image files with a .jpg extension, and 0:27 you'll learn more about these image files later when we add images to our page. 0:31 Before we write any code, we'll need to create an HTML file. 0:35 In the work space menu, click File, New File, and we'll name the file index.html. 0:39 A file ending in .html let's the browser know that it's an HTML file, 0:46 and index is the most common filename used for the default or home page of a website. 0:52 So now we're ready to start writing code. 0:56 Every HTML page begins with a document type or doc type declaration that informs 0:58 the browser which version of HTML the page is using, so it can render it correctly. 1:03 So at the very top of the file, type a left angle bracket followed by 1:07 an !DOCTYPE space, then we'll type html, followed by a right angle bracket. 1:12 Now there used to be a lot of really complicated document types, but 1:19 the latest version for HTML5 is really simple, it's just doc type html. 1:22 Next below the doc type, we'll add a set of opening and closing HTML tags. 1:28 So first, type the opening tag with a left angle bracket, then html, and 1:33 a right angle bracket. 1:38 Now every closing tag in HTML should 1:40 include a forward slash in front of the tag name. 1:43 So the closing HTML tag should be /html. 1:46 So these tags together describe the HTML element which is usually the root or 1:50 top level element of a webpage. 1:56 And this tells the browser that everything we add in between the opening and 1:58 closing html tags is html code. 2:02 So next inside the html element, I'll indent two spaces by pressing 2:05 the space bar twice, then add two elements, head and body. 2:10 When you place one element inside another, it's called nesting. 2:21 So the head and body here are nested inside the html element. 2:25 So to represent the fact that one set of tags is inside another, 2:30 it's a good idea to indent the nested tags like I did here. 2:34 The head element contains information about the page like the page title, 2:39 for example. 2:43 And most of the information you add to the head isn't visible in the browser. 2:44 For instance, you could add links to JavaScript and 2:48 CSS files to add the behavior and presentation layers, respectively. 2:51 But for now, we'll only worry about adding a title. 2:55 So inside the head element, I'll nest a title element by typing opening and 2:58 closing title tags. 3:02 And between the title tags, I'll write the text Experience VR. 3:05 Save the file and click the preview icon on the top right corner of the workspace. 3:11 And this opens the index.html file in another browser window or tab. 3:15 So you should see the text you wrote between the title tags 3:20 appear in the browser's title bar or on the pages tab at the top of the window. 3:23 Now below the head is the body, which is where you include any content 3:28 you want to display in the browser like images, headings, paragraphs, and links. 3:33 The body element is currently an empty set of tags, so 3:37 the browser is not displaying anything yet. 3:40 So let's quickly add content. 3:43 Back inside the body element, indent two spaces and write the text, Experience VR. 3:45 Press Enter, and right below I'll type, 3:52 A simple blog about virtual reality experiences. 3:55 Save the file and refresh the browser and you'll see that even though 4:02 we wrote this text on two separate lines, the browser displays it on one line. 4:07 You see, the browser doesn't know how we want to display this text on the screen. 4:13 So we need to add HTML tags or markup to tell the browser how to display it. 4:17 HTML is made up of many, many tags that are used to give webpages structure, 4:23 format text, and more like you saw in the previous video. 4:28 But you don't have to memorize all or even most of the tags. 4:31 You can use a resource like the MDN, or Mozilla Developer Network, 4:34 HTML reference to see a list of all the available HTML elements. 4:38 Whenever I feel stuck, I visit this page and 4:42 the elements are even grouped by function to make it easier to find what you need. 4:45 I posted the link to this page in the teacher's notes. 4:49 So why don't you check out MDN now to review the HTML elements from this video. 4:52 You could even get a head start learning about the heading and 4:57 paragraph elements, which we'll add to the webpage in the next video. 4:59 Remember, there should be only one HTML, head, title, and body element in a page. 5:03 And here's a tip. 5:09 You don't have to retype the doc type and 5:10 comment tags every time you create a new webpage. 5:13 Instead, you'll make a copy or template of this code and 5:16 use it to copy from and paste them to a new webpage. 5:19 In addition, many text editors can quickly insert html snippets like 5:23 a basic html template into your html file using keyboard shortcuts. 5:28 I've posted information about html code snippets in the teacher's notes. 5:32