Build Your First Web Page in HTML

Hi, I'm Nick Pettit, and you're probably watching this because you wanna 0:00 make a web site.a Maybe it's because you want to start a new career, or 0:04 maybe you just wanna get a site going for your business, or an organization. 0:09 Whatever the case may be, it would be hard to know where to begin? 0:13 I'm going to show you how to write some basic website code, 0:17 that will help you get started on your first website. 0:20 Even if you've never programmed before, 0:24 you'll be able to follow along step by step. 0:26 After we write some code together, I'll show you how to take things further, and 0:29 what kinds of jobs are available to people that have programming skills. 0:34 Coding might seem a little bit boring if you've never tried it before, 0:38 but, I think you'll actually find that it's a lot of fun. 0:42 You get to create whatever's in your head, and then share it with other people. 0:45 To make a website, you'll need to be using a computer running either Windows, 0:49 Mac OX 10, or Linux. 0:53 What I'm about to show you won't really work on a tablet or a phone. 0:56 We're going to type our code, in a type of computer program known as a text editor. 1:01 And your computer should already have a text editor installed. 1:06 When we're all done typing, we'll save our file and 1:11 open it up in a web browser ,like the one you're using right now. 1:14 That might be Google Chrome, Firefox, Safari, Internet Explorer, or 1:18 any other browser that you prefer to use. 1:23 If you're on Windows, you'll want to start by opening a program called Notepad. 1:26 If you're on Mac, you'll want to open an application called TextEdit. 1:31 Notepad on Windows will work fine as is, but TextEdit has one extra step. 1:36 When you start a new document, go to the Format menu, and choose Make Plain Text. 1:43 And then you might see a dialogue box, but just click Ok. 1:52 Again, this step is not necessary on Windows. 1:56 I'm going to be using a Mac for this tutorial, but 1:59 when we come to important steps, I'll show you what it looks like on Windows. 2:02 Once you have your text editor open type in one paragraph along with a header, 2:07 just like in a newspaper or a school report. 2:11 This can be about anything you want. 2:14 I have some text here, that I have already prepared and 2:16 you can caulk it if you like or write your own. 2:20 Now, by itself this text isn't a website, we have to mark it up with special tags. 2:24 Kind of like when a teacher or a coworker, gives you notes on your writing. 2:30 Let's start at the top with our header. 2:35 Right before my header, I'm going to type an opening angle bracket, 2:38 sometimes called a less than sign. 2:43 Then I'm going to write the letter H, for header. 2:46 And then, the number one, because this is the first and 2:51 most important header on our page. 2:55 Finally I'm going to write a closing angle bracket, 2:58 otherwise known as a greater than sign. 3:03 What we just typed is called an opening tag. 3:07 And this will tell the web browser where our header begins, but we need to 3:11 add a matching closing tag, so that the web browser knows, where our header ends. 3:15 So, at the end of our header, we're going to type something very similar. 3:21 Start with that same opening angle bracket, but then, type a forward slash, 3:26 which is usually found on the question mark key on your keyboard. 3:32 Make sure that you're not typing a back slash, 3:37 which might be facing the other direction. 3:41 Then the rest is the same, the letter h a number one and a closing angle bracket. 3:45 When an opening and a closing tag are together it's known as an element, 3:52 in a language called html or hyper text markup language. 3:56 It's called hyper text, because unlike regular text documents or books. 4:01 These ones can be linked together in any way that we want. 4:06 And I already mentioned why it's called a markup language. 4:10 It's because we're marking up the document, with additional information, 4:13 beyond just our content. 4:17 HTML is the foundation of any site on the entire web. 4:20 So, no matter what kind of site you wanna make, 4:23 you'll have to make your webpages out of HTML elements, just like the one we made. 4:26 Now, you might be wondering why the h for header is accompanied by that number one. 4:33 On a web page there can be headers levels one through six. 4:40 This is just like a headline, in a newspaper or a magazine. 4:45 Where there might be the name of the publication, then, a section header, then, 4:49 a name of an article, and then, different sections within the article, and so on. 4:53 This is the only header we have on our page, 4:58 so it's natural to make it an H1 element. 5:01 Now we need to tell the web browser where our paragraph, begins and ends. 5:05 Headers are the only elements that have the concept of levels so, 5:10 this one is actually a little bit easier. 5:14 We're just going to use the p element, or paragraph element. 5:17 So, let's add an opening p tag at the beginning of our paragraph, and 5:21 then a closing p tag at the end. 5:26 This is a pretty good start, but 5:32 we need to add a few more tags before we can call this a real web page. 5:34 Now that you understand how to type out HTML elements. 5:39 I'm going to introduce you to a few other elements. 5:43 This is a lot of information to take in when you're first learning but, 5:47 don't worry about memorizing everything. 5:51 Most professionals have to find references and look things up over and over again. 5:53 It's natural to feel a little bit overwhelmed at first, 5:58 but when we're all done going through these few elements, 6:02 I'll show how you can look things up on your own and continue your practice. 6:06 As you might of guesses already, 6:11 it's possible to nest HTML elements inside of one another. 6:13 So let's wrap everything we've created so far, 6:17 in a body element because our content is known as the body of the webpage. 6:21 When we do this, 6:28 we should indent everything inside of the body by two spaces. 6:30 So we'll say one two. 6:35 And then, one, two. 6:36 This doesn't have any technical impact, but it makes our code easier to read so 6:42 that we know which elements are nested. 6:46 So now I'm going to hit Enter, so you drop that down by a line. 6:50 And I'll put in my opening body tag, and then my closing body tag. 6:54 We also need to add a head element just above our body. 7:01 This head is a place to put meta information about the web page, but 7:05 not necessarily any real content. 7:10 So just above our body, we'll hit Enter again and 7:12 we'll type an opening head and a closing head. 7:18 Nested inside the head element, we need to add two more elements. 7:22 First is what's called the meta element and, in this case, 7:27 our meta element will tell the web browser our character set. 7:31 This is just some technical information that tells the browser, 7:35 what types of letters and numbers should be on our webpage. 7:38 Be sure to watch closely because, this element is a little bit different than 7:43 the others we've learned about so far. 7:47 It doesn't have a closing tag, and 7:49 it also has a special extra bit inside of the tag that's called an attribute. 7:51 In this case, the attribute is charset or character set so, let's type that out now. 7:58 I'll put in two spaced because this is nested inside the head. 8:08 And then I'll type out" meta 8:12 charset" after that we will add an equal sign and a set of quotes. 8:16 Inside the quotes we'll type utf-eight, otherwise known as utf eight. 8:24 And then we'll put a closing angle bracket just like that. 8:33 This might seem a little bit weird, but like I said earlier. 8:38 Don't worry about memorizing all of this right now. 8:42 Just, follow along and make sure that you're typing everything very carefully. 8:45 Every angle bracket and slash, means something to the web browser. 8:49 So, it's important to type everything correctly. 8:53 Next, we should add a title to out web page. 8:57 This will go in the title bar, or the tabs of our web browser. 9:01 So I'll type, title, and I'm just going to type, Nick Pettit-designer. 9:07 And then I'll put a closing title tag. 9:15 Finally, we just need two more elements to finish things up. 9:19 We need to wrap everything we've done so far, in the HTMLelement. 9:23 Like this, I'll hit enter, type html, 9:28 jump down to the bottom, and put in a closing HTML. 9:34 And we need to nest everything carefully, so we can understand our code. 9:39 So let's just put two spaces, on everyone of these 9:43 lines, just like that. 9:48 And, for the last element, 9:54 we need to add what's called a document type or doc type for short. 9:56 This tells the web browser what kind of HTMLto expect on our page. 10:01 Just like the meta element, this one doesn't have a closing tag, and 10:05 the characters we type here will be a, a little bit different. 10:10 So follow closely, at the top here, we'll put 10:13 in our doc type and that's an opening angle bracket, an exclamation point. 10:18 And in all caps we'll say doc type followed by a space. 10:24 And then html in lower case, and a closing angle bracket. 10:29 Now, we need to save our file. 10:36 This is about the same for Windows and Mac, but I'll show you both. 10:38 On a Mac, go to File>Save and find 10:42 a place on your computer, where you'll be able to find this file easily again. 10:49 I'm going to chose my desktop, and then I'm going to type in the file name, 10:55 index.html, and click save. 10:59 It might ask you, if you want to use the HTML file format and in this case, we do. 11:05 If you're on Windows and 11:13 using Notepad, go to File> Save As and then choose a place on your computer, 11:14 where you'll be able to find this file again, I'm going to choose the desktop. 11:19 Then we need to change the file format to All Files, so 11:24 that we can save this as an html file, in the file name, type index.html. 11:28 Finally, change the text and coding to utf eight, and then click Save. 11:35 Now, whether you're on a Mac or 11:43 on Windows, the next steps should be almost exactly the same. 11:45 I'm using the Google Chrome web browser in this case, but 11:49 the next steps should be similar if you're using a different web browser. 11:53 In Google Chrome, I'm going to go up to the file menu and 11:57 choose open file, then I'm going to navigate to the location, 12:02 where I saved my file and I'll choose index and open it. 12:08 Congratulations, you've made your first web page of course, 12:15 this doesn't look very pretty, and only you can see your web page because 12:18 it's not available on the public internet for other people to access, but still, 12:24 those are the steps that you can take next now that you know some HTML. 12:28 One way to learn about more HTML elements, or review some of 12:33 the ones that you've learned here, ls by looking at good documentation. 12:38 You can find trustworthy documentation for 12:42 these HTML elements, and many others by going to developer.mozilla.org. 12:45 With a little bit more step by step learning on treehouse, 12:51 you can make something that looks like this, and 12:55 use more HTML elements to add images and links to your pages. 12:58 You can add color and layout to your web page, 13:03 with another language called CSS or cascading style sheets. 13:06 Finally you can upload your web page to a server, and 13:11 get a custom domain like this one called treehousewebsite.com. 13:14 At this point you might be wondering, why not just use a website builder or 13:20 a website publishing program to drag and 13:24 drop these elements together, in a visual way. 13:27 Well, that is one way to build a website, but if you want to create the best and 13:29 most customized websites, it's better to learn how to code on your own. 13:34 Better yet, if you want to start a career in the web industry. 13:39 You'll find that almost every job will expect you to know how to 13:44 code on your own. 13:47 Speaking of jobs, there's a huge demand right now for 13:49 people with the skills to make websites. 13:52 Everyone needs a website, whether it's a hugely complex company like Google, 13:55 Facebook, Twitter, or Wikipedia, or if it's a small local business, or 14:00 an individual, at most companies you would take on the role of either a web designer, 14:05 or a web developer, in both type of jobs you'll be expected to write code, 14:10 but with a slightly different focus. 14:14 As a web designer, you focus mostly on the user experience and 14:17 visual aesthetics of web pages, deciding where to place images, 14:21 what kind of text to write, how to match colors and 14:25 fonts, and how the user should feel while they're navigating your creation. 14:27 This involves writing code, like some of the html we started. 14:33 You will also be expected to know a few others languages including CSS and 14:37 java script.Together these three languages HTML, CSS, and 14:42 Javascript form what's called the front end of a website. 14:46 It's called the front end, because all of this code runs inside of a web browser. 14:50 Web developers are also expected to know HTML, CSS, and Javascript. 14:56 But instead of spending time focusing on the visual aesthetics of a web site. 15:01 They tend to spend more of their focus, on what's called the backend of a web site. 15:06 This is all the code that runs on the server, generates HTML dynamically on 15:11 a site like Facebook or Google and then delivers that to the browser. 15:16 So, for example, when you go to a web site like Twitter, and 15:20 you look at someone's profile page, 15:24 what you're actually seeing is kind of like a fill in the blank template. 15:26 Everyone's profile page is the same, but the details, like a person's picture, 15:30 their name, and other data are filled in by the backin programming. 15:35 There are several different backend languages to choose from, 15:40 including Ruby, Python, PHP, Java, and even a few other choices like WordPress. 15:42 You might decide that you don't wanna make websites at all, and 15:49 instead want to build mobile apps for iOS and Android phones and tablets. 15:52 At Treehouse we have several different tracks that are specifically designed to 15:57 guide you from the very basics of coding, all the way through to designing and 16:02 building your own websites and web applications. 16:07 When you're ready, we can even help you start a career. 16:10 It's a lot to learn, but we've put it all together in a step by 16:13 step learning process that's easy for anyone to follow. 16:16 We even have a special text editor called Workspace, that helps you follow along and 16:20 save your work. 16:25 And if you get stuck, you can ask for help in our forum, where other students, 16:27 moderators and tree house teachers are always happy to help. 16:32 There's never been a better time to start learning how to code, and 16:35 you've already taken your first step. 16:38 So, thanks for watching, and we hope to see you soon at Treehouse. 16:40 [MUSIC] 16:44

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

Sign up