Writing the HTML

In a previous video, we learned that HTML is used to mark up 0:00 content so the browser can make use of it. 0:04 Open up your index.html file, and 0:07 you'll see I've provided some HTML tags to get us started. 0:11 While I'm not going to cover everything you see here, 0:16 let's take a quick look at some of what we see. 0:19 Line 1 communicates to the browser that we'll be creating an HTML file. 0:23 Our HTML document really gets going on Line 2, 0:29 where we create an opening HTML tag. 0:33 That tag then gets closed in the last line of our code. 0:37 The slash indicates that we're done writing HTML. 0:42 We wouldn't want to include any new HTML beneath this line, 0:46 as the browser would ignore it. 0:50 Our HTML is then divided into a head and a body. 0:53 The head provides information about the page to the browser, 0:58 including a link to our stylesheet. 1:03 The body contains our actual page contents. 1:05 And since it's empty, that's why our page looks blank in the browser. 1:09 If we wanted, we could try adding some content without using HTML 1:16 tags, just to see what happens. 1:20 I'm going to write two lines of text here. 1:23 When I refresh my preview in the browser, nothing happens. Hmm... 1:33 Oh, right, until I save my file, the webpage hasn't actually changed. 1:38 So let's save our index.html file. 1:44 And now the text shows up. 1:49 But not only does the text not look particularly stylized, 1:52 but both blocks of text are appearing on the same line. 1:56 I need to use HTML tags to indicate the role of each text block. 2:01 I'd like these two lines of text to be headings. 2:08 I'll use the h1 HTML tag to make my name into a heading level one, 2:12 which means it's the most important kind of heading. 2:17 I'm typing h1 surrounded by angle brackets. 2:22 Note that when I type the right angle bracket, 2:26 my workspace closes the element for me. 2:29 But, unfortunately, my name isn't located between the brackets. 2:33 Let's use cut and paste to correct that. 2:38 Much better. 2:43 Now, when we save and preview in the browser again, 2:44 my name looks a lot bigger, doesn't it? 2:48 See if you can turn our second line of text into a heading level number two. 2:52 The h2 looks big and bold, but not quite as big as the h1, 3:12 since it's not quite as important. 3:16 You've hopefully noticed a pattern here. 3:21 Most HTML elements surround content. 3:24 Our opening h2 tag was followed by the text of my job title. And we 3:27 finished by writing a closing tag containing a forward slash. 3:34 Let's make that job title even better by providing a link to Treehouse's website. 3:39 The HTML tag used to create hyperlinks is called a, which is short for anchor. 3:46 By itself that a tag doesn't accomplish anything. 3:59 It announces that the browser should expect a hyperlink, but it doesn't yet 4:03 tell the browser where the word Treehouse should link to when clicked. 4:07 To make this more functional, let's add some attributes. 4:13 Attributes provide additional information about HTML elements. 4:17 Any HTML element can have one or more attributes. 4:23 In this case we need only one, called href. 4:27 That's short for hypertext reference. 4:31 And now we have a functioning link. 4:44 Most HTML elements follow the pattern of surrounding content 4:50 with opening and closing tags. 4:53 But there are a few exceptions. 4:57 These self-closing elements are known as void elements since 4:59 they don't actually surround any content. The most common 5:04 self-closing tag is img, used to add images to our document. 5:09 Let's write one now. 5:14 As you might expect, img won't do anything on its own. 5:17 This element requires attributes in order to work. 5:21 The first attribute I've added here, src, or source, tells the browser to look for 5:43 a file called anwar-montasir-profile.jpg, inside the images folder. 5:50 It's very important to type the file name accurately, or the image won't load. 5:57 The second attribute, alt, provides an alternate description of the image 6:03 so search engines and screen readers (that is, technology that reads web 6:08 pages aloud to blind or low-vision users) can understand the image. 6:13 Let's check our page out in the browser. 6:20 And you should see the image you chose. 6:23 Finally, it's worth knowing that some HTML elements surround other ones. 6:28 You can see this already in the starter code I gave you. 6:33 The head and body elements are inside the HTML elements. 6:37 And the web page content we've written is found inside the body. 6:42 We also included an a element inside our h2, 6:46 to create a hyperlink to Treehouse's website. 6:49 I'd like to conclude my HTML with a bulleted list of my location, 6:54 skills, and hobbies. 6:59 To do that, we'll start with a ul element, which is short for unordered list. 7:02 Inside our unordered list, let's add a few list items. 7:09 The li element allows us to create the bulleted items that make up 7:14 our unordered list. 7:19 Great, so that's the content for our profile card. 7:51 You'll notice we haven't changed the appearance of our content. 7:55 But that's something our HTML isn't built to do. 7:59 In our next video, we'll use CSS to give our profile card a bit of style. 8:03

You need to sign up for Treehouse in order to set up Workspace

Sign up