Introduction to HTML: Build a Portfolio Website

1. Trailer: In this introductory class, we'll be making a four-page portfolio website featuring some of the most common aspects to an online portfolio that can be used for a plethora of different subject matters and professions. We'll break down what content is needed on each page and how that's translated into our HTML code. At the end of our class, we'll have a four page clickable website with a homepage, a work page, and about page, and a contact page. If you haven't written one line of HTML or if you need a refresher HTML, this class is perfect for you. We'll be covering HTML from the beginning, so no previous knowledge is needed. Whether you're on a Mac or PC, all are welcome. I'll be sure to walk you through all the steps to get us from installing a text editor to saving our files and to learning the basics of HTML. We won't get too crazy with a hip computer jargon, but I'll make sure to highlight important terminology that you should know and how to troubleshoot your own work and to find answers to common questions when this class is finished. 2. Welcome to Class!: Oh hi. I didn't see you there. Don't mind me. I was just doing a little late reading about one of my favorite subjects, the Personal Computer. But since you're here now, let me put this away and let's get started talking HTML. In this introductory class, we're going to be building a four page online portfolio. The site will be HTML only which means that the pretty styles and colors are going to come at a later day, but in this class, we're going to build a strong and sturdy foundation which will introduce you to the wonderful awesome world of HTML. At the end of our class, we're going to have this four page clickable website with a home page, a work page, an about page, and a contact page. We'll talk a little bit about the common elements that will be on each one of these pages and how you can use them to make your own portfolio website. We're going to be making the site for Jon Arbuckle. So, let's talk about how we get started. 3. Defining our Project Content: Over the length of this course, we'll create HTML for a four page portfolio website, featuring some of the most common aspects to an online portfolio that can be used for a plethora of different subject matters and professions. We're going to break down what content is needed on each page and how that translates into HTML code. I find it's best when creating a new site to have an idea, some content, and a direction for what we're building, so we can work toward a goal. We're going to build our website for a fictional client to use as a base for copy and structure. So today, our client is John Arbuckle. Here are some things that we know about John. He's a cartoonist. He owns a cat and a dog, and John has joined many social networks to meet professional and personal connections. John has come to us because he wants an online portfolio to showcase his illustration work and wants to extend his social reach by providing some information about himself and his social networks. The first thing we're going to want to do is figure out what pages will need for our site. We'll do this by creating a simple site map. If you haven't seen a site map before, that's okay. It looks a little bit like this. Each box represents a page in the site. So, you can see they've got a home page, and about page or what's new page, and some other pages beneath those pages. The site map will help guide us as we build out our site to make sure that we have all of our pages covered. You can create a site map in a diagramming program like on the Amigraph or in Photoshop, or even with a pen and a paper. For this site, we're going to set up a sample using Gliffy. This is Gliffy.com and it's just going to give us a quick way to get started drawing. So, we're going to start drawing now and it's going to load this up. So, the first thing we going to want on our site is a homepage. So, we'll drag this out here and we'll say home. We're also going to need a page to show all of John's work, for the things that people are going to want to hire him for and so we'll have a work page. Next, we're going to want to share a little bit about John's personality, and a little more about what he's like as a person. So, we will make an about page. Lastly, if people like John and his work, we're going to have a way for people to contact him, so we're going to want to have a contact page. Let us grab this little tool here to make a connection to each one, and the contact page. That's a little uneven and sometimes I don't worry about that. So, there we go. Our site map is all set. These will be the four pages that we'll build out for John's portfolio website. Next, we're going to define what content is going to be on each page, and we'll do this by creating a content outline. By content, I'm talking about things like text, images, and videos or whatever is going to appear on all four pages of the site. I'm going to open up a text editor to do this. But again, if you just want to grab a piece of paper and a pen or any notepad that you'd like, anything that will work best for you. So, of course I'm going to need that home page that we mentioned, and the home page is going to serve as a welcome to visitors and a quick showcase of features from John's portfolio. We're going to need what we're going to call hero content, and the hero content is going to have something like a brief elevator pitch or a quick one liner that people who come to the site will know what it's all about. So, in this case, Jon Arbuckle, a freelance illustrator and author. And then we're also going to have some sort of large image, maybe of a comic or maybe of something else that describes John. A way that through the visual with the elevator pitch, we really get users knowing right away what the site's all about because people value their time. So, let's let them know right away what it is. Next, we're going to want to have a section about John's web comics. So, maybe we'll just have a title and a description of text to let people know that John writes comics. We'll also have a link there to learn more about the comics. And that is not how you spell comics, so let's fix that. Hey, there we go. John's also really into poker and he has a poker CD for sale, so we're going to want an image of that, a name of the CD, and a link to Amazon to buy, to make sure that everyone can get their poker fix in. We'll also want visitors to know that John is on Twitter, so we're going to have a link to John's Twitter page. We're also going to want to show a client testimonial, so people know that John is really awesome to work with. So, we'll keep this one in from Dr. Luiz Wilson about what it's like to work with John, and we're also going to want to have a call to action link there. So, something like, "Hire a John for your pet portrait needs. Get in touch." We're also going to want what I'm calling header content, and header content are things like the logo and site navigation. Header content is going to appear on every page because we always want people to know what site they're on, and we always want to give people a way to get to other pages throughout the site. So, that'll hold our site navigation. Similar to our header content, we're going to footer content, and that'll appear at the end of every page. In this case, we're going to have copyright information about the content of the site. Next up is the work page, and on the work page, we're also going to include that header and footer content, and we're also going to have the page title, in this case, work. Here's where we're going to show John's web comics. In this case, he has two comics that he wants to show on the site, the Lasagna Chronicles and Cat Town, and each one of those will have an image, probably like the first frame of a comic to show users what it's like, and also linked to the external site of where those comics live. John doesn't just do comics, so he also does portraits. So, we want to make sure that people know about that. So, we'll include an example of two portraits that he has done for his clients. Lastly, we can't forget about John's jams, so let's be sure to keep his CD in there which is the best of Johnny Arps, along with the CD image, and a link to buy it on Amazon. Next up, we have the about page and again will have the header content, the footer content, another page titled, this time about. Let's put an image of John in there so people can know that he's a friendly looking guy. We'll have a couple of paragraphs of text describing John, something welcoming and happy, a little bit about maybe his hobbies and his process when creating portraits and comments. Let's also include a list of skills and professional services that John offers. Lastly, we'll have our contact page. Again, header or footer content, the page title content. We'll have John's email address, so people can get in touch with him, and we're also going to keep a list of links here to John's social media presence, so people can follow him or like him or anything else that people do on the Internet with people's social media these days. You can see the structure here won't just work for the portfolio of John Arbuckle specifically, but of almost all professionals, even if you don't have poker CDs. So, if you'd like to try to use your personal information instead of John's during this class, totally go for it. If you like to follow more closely what I'm doing in the video then use the class files here and then later on you could try something in your own information. 4. Gather our Tools: A text editor is a type of program used for editing plain text files. We can write HTML with any text editor out there. So, if we just wanted to go ahead and use something like Notepad, and save it as an HTML document, we could. There are also what's known as HTML editors. HTML editors are similarly text editors but add extra functionality. The functionality they add is specific to things like Web development with things such as syntax highlighting, keyboard shortcuts, autocompletion, and more. You have a lot of choices of the HTML editors out there, and I suggest after this class, you check them out, see if there's ones that you'd like more than others. Some are paid, some are free. A lot of them have free trials, so check out before you pay for them. For this course, I recommend starting with Sublime Text 2. I like Sublime Text a lot because it can be downloaded and evaluated for free and also, it's available for Mac and PC. This is Sublime Text 2. They currently also have a version of Sublime Text 3, but that's in Beta. So, let's go ahead and just use 2 for now, and then you're going to want to choose based on which operating system you're using. I happen to be using OSX, so I'm going to click on that, and the download goes ahead and starts. When it's done, we open that up and install it. Once it's downloaded, you want to open that up and then in this case, I'm on a Mac, so we just drag that over to my applications folder to install. Similar installation instructions should be followed on a PC. The next thing we'll need in terms of tools for Web development is, a modern browser. Though you can use any browsers, I highly recommend using Google Chrome. I'll be using Chrome in this class, so if you want to follow along exactly, I recommend downloading that one. It's got some great tools that we can use while creating our HTML. Another great browser is Firefox. So, if you would like to also give Firefox's a shot, that's got similar things, really added features like Chrome has, but I will be using Chrome for the rest of this class. If you don't like either one of those, feel free to use Opera, Safari, or Internet Explorer, and just you might have to do a few extra googles to find some tools to use. The last thing that we're going to need in order to get started in this class is, we're going to create a folder to hold all our class files. We don't want to see things all over the place and get them all lost. So, let's make sure that we keep things nice and organized. So, for right now, I'm just going to make this on my desktop, and I'm going to call it jon-arbuckle-site. If you'd like to save it on your desktop, you can do that. Other common places would be in your documents, or if you have a sites folder, those are probably more appropriate places to keep it. For right now, during this class, I will keep it on the desktop and then move it to a more appropriate place afterwards. You'll notice that I named my site jon-arbuckle-site. I really like to use hyphens for word separators. Other people use spaces or underscores. Spaces can get a little tricky because sometimes, browsers or your operating system can read that funny. If you ever seen those like percent 20 in URLs, that can happen. Other things, other people like to use underscores. Underscores are pretty cool. I sometimes have a hard time reading them because they sort of look like a space. So, because of that, for my naming conventions, I usually use hyphens, and I keep things all lowercase. If something works better for you, most certainly do it, but I would recommend sticking to one syntax when you're naming things. That just keeps things a little more organized, and if you ever worked with someone else, you'll be able to say what your naming convention is to have them follow that. So, everyone will be working on the same page. After I create this folder to hold all my files, I'm going to open that up, and one thing I know that I'm going to have on my site is going to be some images. So, I'm going to go ahead and also make another folder for images. I'm going to call this folder img. I'm calling it img because it's a little shorter than typing out the full word for images and it's still really easy to read what that is. If you see img, you will know that I'm talking about images. I won't probably name it anything tricky. If you name it I, someone might not know what that is. If you name it anything like Photos Go Here, that's really long, and you don't want to type that all the time. So, it's nice to keep your folder naming short and sweet but also to make sure that it's readable for yourself and other people so you know easily what goes inside of that folder. At this point, if you think you'll have videos on your site, you can also make a folder for videos. So, for there, I can call videos. If you knew that you wanted to include a PDF, maybe you want to make a folder for PDFs or for other types of media, these are all possible suggestions. Right now, I'm just going to have images. So, inside of my jon-arbuckle-site folder, I'm going to have our img images folder. So, that concludes our first lesson. After this, you're going to want to go ahead and create the sign up for your Website containing the pages that are gonna make up your portfolio, create a content outline for the text and media that will appear on each page. Remember, if you want to try making a site for yourself instead of Jon Arbuckle, totally go for it or try both at the same time, whichever you feel most comfortable with. I also want to gather assets for the project. This includes all the words, images, videos, anything like that you'd like to include on our portfolio site. Lastly, we're going to want to download all the necessary software and applications to create our HTML pages. So, once we have that all done, we can just go ahead and start writing HTML. Once you're done with all of that, let's start lesson two. 5. What is HTML?: What is HTML? Well, HTML stands for hyper text markup language. HTML is the main markup language for creating Web pages that are displayed in our Web browsers. The same way that some of us read English or Spanish, it's the same way that browsers can read and decipher the language of HTML. HTML originated with Tim Berners-Lee over at CERN as a way for research to share papers and information with each other. We can now do that and all the cat videos that we could ever dream of. HTML is often paired with things such as JavaScript and CSS, or cascading style sheets, in order to make a full complete web experience, web app, web page on the Internet. So, HTML is the basis for our pages and what we'll use to create all of our sites. The sort of what we'll call rules of HTML are defined by the HTML spec. The HTML spec is created by the W3C. W3C is a group of smart people that tell the browsers how they should be reading HTML. So, HTNL 4 specification is something you might have heard of and became a recommendation in 1999, quite some time ago, but has stayed strong and true. Basically, it says, every element how the browser should read it. You might have heard something called HTML5. HTML 5 is sort of the new draft of HTML 4. It adds some new elements and new meanings for those elements. HTML 5 is full of really cool things that build on top of the strong foundation that HTML 4 gave us. One thing to keep in mind is that HTML 5 is currently not finalized. So, if you are taking a look at the HTML 5 site here, you'll see this is a work in progress. Checkout the editor's draft instead. So, if we go ahead and look at the HTML draft for this. So, this is the page for the HTML 5 draft and you'll notice that here it's in red telling you that, "Watch out, this is just a draft," which means it's not final and that things could change. So, what this means is that something that an element may mean now, in a year, someone may decide that it should be something different until it becomes a finalized document. The good news is that learning the stuff that we'll learn as part of HTML 4 will never be a waste. Everything that we'll be covering in HTML 4 is also included in HTML 5, which means that you need to learn all the elements we'll be discussing and then you'll still be able to use them if you decide to use HTML 5 or when it becomes a finalized document. HTML is part of what we commonly refer to as front-end development. If you look up front-end development, you'll find a few different answers for what exactly that means. Lots of times, you'll see front-ends paired with things like HTML, which we'll be talking about today, CSS and JavaScript, and you can see that in some of these handy-dandy images that people make out there. You can also see that sometimes we refer to that as markup, style and functionality or content, presentation and behavior. So, these are things that usually are talked about when it comes to making the front-end of a website, and the front-end like mentioned is based upon the HTML markup that we'll be creating. So, what does HTML look like? Well, one of the things that's really cool about HTML is that we are able to view the source of any website out there and see what their HTML looks like. So, what that means is, we call it the HTML source or source code of the page and that's what makes up the content or HTML of a website and we can see this for just about anything. So, over here at HuffPost Celebrity, if we wanted to view a source of this page, we could by going to "View", "Developer", "View Source". When I click that, you'll see that this code pops up and right now, it might look a little bit confusing, but you'll see that this is HTML code. We can do this for other sites, such as, stuffonmycat.com. We can say, "I wonder what the source code of this is? " So, again we can either go to "View", "Developer", "View Source" in Chrome, which is also a Command-Option-U for a shortcut. You can see this is definitely a little hard to read. The code is sort of minimized together, so we can't really see the spaces, but this is HTML code. Or if we click on over to Reddit, we could see the same thing for Reddit. So, again, if I'm using a Mac in Chrome, I can do Command-Option-U and view the source, and again, here's the source for that. I can go ahead and open up any of these pages like a Baby liger playing with its foster mom. Yes, please. So, here, I can browse the pictures or I can be like, "Wow, I wonder where they got these pictures. Let me go ahead and look at the source." So," View", "Developer", "View Source". And here, we can see that this is starting to be the HTML for the page. We also have a tool called the Web Inspector, and how we use that is by either right-clicking your control, clicking on "Element", and you'll see this context menu pops up, and you'll see right here, it says, "Inspect Element". So, I'm going to go ahead and choose that and then you'll see this frame pops up. What this frame does is it shows us all the HTML on the page just like when we viewed source, but we can go through and expand and collapse these sections and take a look at what HTML is being written to get this element onto the page that we're looking at. If you're using Firefox, there's a similar tool. So, here I am in Firefox, and the same thing, and I can control or right-click, and again, you'll see inspect element. Then you'll see a very similar, a little bit different browser Chrome here, this is dark gray, but besides that, you can see that this is the HTML that's being written to write this and it's highlighted with this little dotted line. If you're using anything like Safari or Internet Explorer, those also have developer tools for you to use, and if not, again, here's Firefox, and then here, it is in Chrome. In the next video, we'll take a deeper look at what exactly all of this HTML means and see how the browser is actually reading it. 6. HTML Tags and Common Elements: In the last lesson, we took a look at how we can view source. Let's do that again right here, so this is Jennlukas.com and this is my site and you'll see that there's a large image, some texts, and more text, a contact form, and a few columns full of links, and you'll also see the copyright information in the footer area. Let's view the source for this, some of it might look like gibberish right now, and some of it actually may seem pretty readable. You might see things like this high, fine-tuned, standards-lovin', front-end developer, and say, ''Wait that looks familiar, I saw that here Hi, fine-tuned, standards-lovin', front-end developer.'' So you can see that they start to match, you might notice that this text is sandwiched in between these sort of brackets with more words in them. These are what we call tags, tags describe our document content. Let's talk a bit about HTML tags, HTML tags usually come in pairs and have an opening and closing tag. Also sometimes called a start and an end tag. The start is an open angle bracket with the tag name followed by the closing angle bracket. The closing tag is an open angled bracket and then we have the addition of a slash along with the same tag name as the opening, followed again by that closing angles bracket. So you can see here, opening, tag name, some content in-between it and then a closing tag name, and of course we'll replace that word tag name with actual HTML tags. We'll replace tag name to get real HTML elements. HTML elements refer to the opening and closing tag and also the text contained in between the tags. In this example, we're showing a p tag, p is for paragraph. So the p tags will hold any paragraphs of text we have throughout our site. Next, we'll see the H1, and H1 stands for heading level one, and the H1 is the most important heading on our page. We'll take a deeper look at headings a little bit later on. Last, you'll see a few things down there and we have a UL and inside of it are some LI elements. We call this nesting, the LIs are nested inside of the UL, and UL stands for unordered list, and unordered list contains a bunch of other elements called the LI, which stands for list item. Those are list items contained within the same unordered list, so if you had two list items in a list, then you'll see two LI elements like what we see here. If you had five or 10 or 20, you would just keep listing that amount of LIs with the content for each one of those list items. We'll also take a look at list and other types of lists besides an unordered list a little bit later on. We also have empty or sometimes called standalone elements, such as the BR tag, which stands for Break, the break tag is used for hard line breaks within our text. We also have an image tag which is an empty element, and you'll see that in the second example, where it says img, which stands for an image. These are called empty elements because there's not a thing like text or other content inside of them, so as opposed to having an opening and a closing tag, we just have an opening tag and that's all we need. We'll be taking a greater look at the image tag and that text that goes along with it in the next section, spoiler, they are called attributes. 7. HTML Attributes: In the last lesson, we saw the image tag and saw some sort of additional text besides just our tag name. Those are what we called HTML attributes. When used, attributes are always specified in the opening tag. The attribute provides additional information about the tag that we're using in our document. The format for it looks like this, tagname, space, the name of the attribute that we're defining in equal sign, and then the value for the attribute within quotes. You'll then have your regular content in between those two and your closing tagname. In this image example, you'll see we actually have two attributes for this element. We have SRC and ALT. SRC stands for source, so you will see source equals and then what looks like a URL for maybe a web page you'll actually see at the end of the your URL it says.jpg. What this is doing, is point to a file on the Internet which is the image source. SRC stands for source, and here is where we define where our browser should look for the image that it should display within our browser Chrome. In this case, we're saying go to cute overload site and grab a picture of this famous animal 018.jpg and show it into our site. ALT is for alt, and the alt is alternative text. Alternative text serves a few purposes here. For starters, if the image doesn't load, this text is what will be displayed. This is actually pointing to an image of Socks Clinton the cat. So, what happens here is if for some reason the image doesn't display, the browser will show Socks Clinton. Why won't an image display? There are couple of reasons, it's possible that wherever you're looking to could move the file, maybe you had a typo in the name, also sometimes visitors to your site may be using screen readers. People with vision disabilities often use screen readers to read the text of our site because they may not be able to see the images that you're wanting to show. In this case, we let our visitors that are using screen readers be able to know that the image is actually showing an image of Socks Clinton. The Alt text can also be searchable which is important, and the Alt is a required attribute to include on your image tag. So, remember, we talked about the HTML specification and the W3C. Well, the W3C that comes up with the rules of HTML said that for every image tag you have you also have to have the source to say word is, an Alt to provide alternative text. You can leave the alt text blank so it could just say, Alt equals quote quote, and that will still be valid HTML, but if it needs a text to tell users what it is that it's important to put that in. Well, so now, we've covered a little bit better intro to HTML elements and a little bit about attributes and we have enough information to get started. Let's open up our HTML editor, and start writing some HTML. 8. HTML Page Structure: So, we're ready to get started writing our HTML. So, to begin with, we're want to go ahead and open up Sublime Text 2, our HTML editor. So, that's in my applications and I'm going to go ahead and open that up. Now, once we have this open, we'll see we have a pretty much blank screen, or one for line one, and we can go ahead and start typing. The first thing that appears on our page is what's called the doctype. You write it like that, open bracket, exclamation, doctype, space HTML, close bracket. A simple syntax requires that a doctype be declared so that when a browser comes across as file, it will be sure to render correctly in the proper standards mode. So, you're going to want to include this doctype on the top of every one of your pages. Here's the good news. In HTML5, we introduced this new type of doctype, which is what we see here and it's really short and sweet. If you take a look at how things used to be, it used to be a little bit more crazy. Here's a few examples of what doctypes have looked like in the past. You'll see one here and then going down, here are some other examples. You can see it used to be a lot more text than what we're writing now, but now we can get away with writing just this one line. So, when a browser comes across this file, it will see this doctype and it will know what type of HTML you're serving it. Next up, is our html element. The html element represents the root of our HTML document. Like many of our other elements, it also has a closing tag. So, I'm going to go ahead and write that right now, so I don't get to close it later on. After when I open a tag, it's best practice to close it, so you don't forget and leave open text. The doctype is an example of one of our standalone tags, where it does not need a closing tag. The HTML element should always have an attribute with it as well. That attribute is the lang attribute. The lang attributes specifies the primary language for the contents of our element. For example, we can do lang="en". That means that we're going to be serving English, you can do things like fr for French and much more. If you need a list of other country codes, it's a simple Google search way to just search for HTML country codes and you'll get a whole list of possibilities. After our HTML element, we're going to have with the head element. Again, I'm going to go ahead and close that, so I remember to open and close the head element. The head element is going to represent a collection of metadata for our document. Things like page titles or stylesheets references, that's what's going to go inside of our head. The things that we write in the head of our document are not going to be seen in our browser chrome. After that, we'll have the body element and that has an opening body tag and a closing body tag. The body holds the main content of our document, so whatever we write in the body whether it's this or actual legible things like this is a sentence, this is what's going to appear within our web browser. Anything within the body will get printed to the page. Once you create documents like this, the good news is you can sort of save it as a shell on your local computer and use this as basically a copy and paste and have it as a reusable shell for all of your HTML documents. At this point, our file still isn't saved and I'm a big firm believer of saving often. There's a few different ways you can save your document. One is to go to File, Save. The other way, as you can see here on the right hand side, that shows are shortcut for Save. So, Command S on a Mac or Control S on a PC will save your document. You're going to do this often. There's nothing that stinks more than when you're writing a lot of code and then all of a sudden something happens like a computer crashes or a cat walks across your keyboard and deletes the whole thing. So, best practices are to save your files often. So, I'm going to go ahead and save. Now, I'm going to be prompted to save it as a specific file name because we haven't saved it yet. I'm going to browse to my jon-arbuckle-site folder which is on my desktop and right in here, I'm going to switch this, make sure you go ahead and change this. It's going to default to the first line of your document, which is that doctype html. We do not want to save it as that. So, you want to change this, so that it says class.html. The.html is really important because that's what's going to define this as an HTML file. Just like we have a.mp3 for music file or.psd for photoshop file or.txt for text,.html says what we're writing here is an HTML file. So, then I'm going to click Save and we're all saves. Now, you can see something else sort of crazy happened. We all of a sudden got this fluorescent pink and it's always an awesome setting I have that just makes things AB's colors when I save things. What this is, is a theme in Sublime Text and this is what we call Syntax Highlighting. So, as we talked about before, there's a little bit of a difference between an HTML editor and a text editor. In this HTML editor, what it does is it recognises this as a.html file because that's how we saved it. So, it will start highlighting elements and tag names that it recognizes. So, it knows that if html head and body are common things and it knows it, that it's an element, so it becomes pink. Any attributes will now be in this bright green and any attribute values are in this yellow color. If this bright fluorescent colors are not your cup of tea, you can also change that in Sublime Text. They have a Preferences section, under Color Scheme and you can go ahead and check out some different ones they have. Maybe that one is more of your style. I'm actually a big fan of this bright pink, it makes me happy, so I'm going to leave it at that. But if you would like something else, feel free to check that out. So, now we're all set with our saved file and this is the shell for the rest of the HTML that we'll be writing. In and the next video, we're going to take a closer look at our head element. 9. Head Element: So, one of the first thing that I'll document is our head element and the head element represents a collection of metadata for the document that we're writing. The thing that we put in the head are not going to be seen in the browser Chrome but they do provide additional information to our document. One of the things that we can put inside the head element is our title. So, we start writing title and the title of this page is going to be John Arbuckle's Portfolio. Then like most of our elements, we have to close it. So, to say that this title is over, we go ahead and close the tag. So, anything in-between the title tag, this content will be our title. You guys might have noticed something started happening when I wrote this, right? If I go ahead and delete that and start with my opening tag, all of a sudden I get this popup now. This started happening after I saved as a.html. One of the other things that HTML editors have is the ability to offer auto-completion. The program starts looking for ways that we can fill this text and it's looking for an element. So, if I start typing t, it's going to list all of the elements that it could possibly write here at the begin with a t. In this case once I have started writing title, you can see title appears. If I hit "Enter" right now, it will auto fill that for me and also close the end of the tag. Auto-completion is a super helpful feature. It saves you typing and it also remembers to close tags for you when you may forget to. Sometimes it can be a little hard to have this happening while you're first learning something and so if you don't want auto-completion, you can turn that off. I'm going to turn it off for now and I'm going to do that by heading to my preferences. Sublime Text has a thing called User Settings and in here, yours is probably blank right now. These are some settings I've added to mind. What you'll want to do is add this text. So, what you're going to do is type "auto_complete": and then instead of true, we're going to write false and then I'm going to save this. You can also set things like your color scheme is here, your font size is here, word rap, there's a bunch of preferences that you can set to meet your needs for Sublime Text. If you're interested in seeing what else you can do, you just want to go, don't google that, just google "sublime text 2 preferences". Click on over the documentation and they have a whole bunch of information about their settings. If there's anything you're looking for, like say you couldn't remember what the preference for autocomplete was, you can just google "sublime text 2 auto complete", here we go. Search for that, click on that and now you'll see right here, it'll tell you how to disable auto complete. The nice thing about this is once you know what to search for, it makes your googling a lot easier. So, anytime you're wondering if sublime text can do it, just do a quick search for "sublime text 2" and then whatever it is that you're looking for. Don't forget to save your preferences when you're done with them. File, Save or Ctrl+S or command S for the shortcut. Now, when I come back here and start typing, auto complete is now off and so now it's up to me to remember what to do. So, let's take a look at this in action and we'll go back to my site at Jennlukas.com, and if I go ahead and view the source for this, so Developer, View Source, you can see that thing should start looking a little more familiar. You'll see we've got this doctype html and then we have the head element and the closing head element down here. So, these are all the things that I have put within the head element of my site. You'll see we've got that title there. So, title Jenn Lukas Front-end Development, and like we said when we come back over here, that's not written anywhere up to this page but where it's written is up in this tab area. You'll see Jenn Lukas Front-end Development, that value is received from our title tag and then displayed in the tab. The other place that our title tag comes in is in search results. So, if I'm going to search for Jonn Lukas, you'll see Jenn Lukas Front-end Development. That value is being grabbed from the title tag of the HTML for that page. So, your search results in the title of your tab will rely on that title tag as being filled out. If we go back to the source, you'll see there's something else over here and that's this meta charset equals UTF-8. That meta tag is used along with the charset attribute to define the character encoding used by the document. So, we're going to want to add that to our sites as well. Character encoding defines what type of characters we're using in our words within our HTML document. UTF-8 is the most widely used way to represent unicode text in web pages. If you'd like to learn more about this, I recommend checking out character encodings for beginners at w3.org. It goes really in depth about what sort of things character encoding handles and how it can affect your pages. If you don't think you need this much detail, just remember to include it on all of your pages. The meta tag with the charset attribute and the title tag are the two required things that you put in your head element. But there's other things you can put it in there too. If we go back to looking at the source for jennlukas.com, you'll see that there's definitely some other data in here. So, one thing we have is another meta tag, in this case the attribute here is name and the value is description. In the description, we have another attribute content. Content says Front-end Developers, speaker, writer and consulting. You'll notice that this shows up in my Google results. Front-end Developer, speaker, writer and consulting. So, that's a place where your meta-description can show up. The meta tag with the attribute name and the value of keywords is paired with content. This content is a list of comma separated values for keywords that you're hoping will help your search engine indexing. Any of you who've done any SEO might know that Google has a very secret formula so no one is exactly sure how much this helps your search engine result but it certainly can't hurt. So, there it is the meta name keywords. Meta name viewport starts getting into things that we need for responsive design and the size of your screen when loaded in other devices. The next one that we see here is the link tag and you'll see shortcut icon with this image.ico and favicon.ico is a link to our favicon. The favicon is this little avatar that appears in the tabs of your pages. So, Google has one here, this is the favicon for Google. Here's the one for Jenn Lukas. If I went to a site like dog fish head, you'll see that they have a favicon here too like maybe is like a little beer cup and even on a site like jello.com, you'll see one there. If you ever don't specify your favicon, you're just going to get that little default document icon that we will see a little bit later on. You can also specify things like apple touch icons and that's for when if you're on an Apple mobile device and save a webpage to your phone, that's what it'll appear for the icon there. So, you can see that while it's not exactly displayed within our regular browser Chrome, the metadata for our document can provide a lot of useful things. In the next video, let's take a look at the things that do show up in the middle of our page and that's in our body element. 10. Body Element: In the last video, we talked about our head element and what doesn't appear on our page. Now, let's talk about what does, that's anything that we write within the body elements. So, anything that we type in between our opening and closing body tag will appear on our pages. If we take a look back at johnlucas.com, you'll see anything that's in the body tag gets printed within the browser area. Let's take a look at another site. This is thesuperest.com. We're going to use that inspect element again. When we look down here, we can now see, we also view the body and the head. So, if I collapse that for a minute, and look at the head element, we'll see some things that we learned about in the last video, like the title and the meta tags. Then, we see when we hover over body, the whole section up here was highlighted blue, because that's all the information within our body element. If I flipped that open to be able to see what's inside, everything in the body is being printed to the page. So, again, remember we can inspect the elements, and see that these things all live within the body, and then are printed to the page. Anything in the head element does not get printed to this page. So, anything that we wrote in our content outline, we're going to want to write within our body element because that's what will be printed to the page. So, let's go ahead and open that back up. So, here's the content outline again. We know that we're going to want Andres Arbuckle, a freelance illustrator and author to appear on our page. So, I'm going to copy them from here. You can either click Edit, Copy, or the shortcut for the keyboards is command C on a Mac, or control C on a PC. So, I'm going to copy, and I'm going to come back here, and you do Edit, Paste. The shortcut for Paste is control V or command V, so paste. Looks like I forgot the I so let's just write that back in there. We know that any other things that we want on our page, this is where we're going to write it. So, I'm going to save this now, File, Save. Then, in our next video, we'll see how this looks once we open it up in our browser. 11. Creating and Previewing Our First Page: We have some text on our page, and let's go ahead and save this document again. You can tell that a file is not safe if in the tab, you see this little circle up here. If I go ahead and do file save, that circle will change to the X. So, class.HTML is saved, but now we want to go ahead and view it in a browser. It's good practice to look at our files in a browser often to make sure that things look as we expect. So, I'm going to press the class.HTML on my computer, which is in my jon-arbuckle-site folder and class.HTML, and double-click it to open. So, here it is, opened in Chrome. Our first HTML web page, or at least the start of it. So, this is class.HTML, and we now see, "I'm Jon Arbuckle, a freelance Illustrator and author," within our browser. Anything in the body tag is being printed here. We have our title up here, and we can view the source, and see everything that we've been writing within Sublime Text. So, now I want some more copy on this page. I want to see other things that we can put within the body tag. Sometimes, maybe you're not sure of all your copyright away, and so some people uses what's called Lorem Ipsum. Lorem Ipsum is basically Greek placeholder text for us to use within our document to print out some texts without you having to write things like this. It is a little more legible. So, there's a bunch of different Lorem Ipsum out there. If we take a look at Lorem Ipsum generators, so top result is 56 unique Lorem Ipsum generator. So, as you can tell, there's a bunch of them, 101. So, there's a lot of stuff on the internet. Let's take a look at some of the ones that we have, Cupcake Ipsum, that's a good one. Picksum, Lorizzle, Samuel L. Ipsum, Fillerati, Bacon Ipsum, Tuna Ipsum, Veggie Ipsum, and Cheese. So, I'm sold on Cheese Ipsum, so let's go with that for now. So, here is Cheese Ipsum. Everyone loves a bit of cheese, is that not the truth or what? Let's say how many paragraphs, and we're going to click Generate Cheese. Then, you'll see here. We have some copy and some text that we can copy and paste into our document. This will just give us some text to use. So, we don't get hung up on writing texts, and then just get our copyright out there to see how it looks. So, I'm going to save this again. I'm going to go back to the browser tab, and then I can refresh the page by clicking here, or Command, or Control R. Now, as you can see, all the copy I just wrote is now printed onto the page. Something looks a little bit off though, right? Everything here is jumbled together. If I expand and collapse the browser window, you can see that basically the text is fitting in whatever space it has. Whereas when we look at it in our HTML editor, it's formatted, so that it's way easier to read with spaces. It's really important to point out that within HTML, it does not read whitespace. The only whitespace that will be read is one space, which is the space that we need to separate words. But, it doesn't matter if you do this, and have a whole bunch of spaces there. When I save this and refresh, it's still just going to have one space here. Whitespace will be ignored by the browser and that's another reason why we use HTML formatting to separate our semantic elements. So, let's do that with the copy that we have. Well, first, let's get rid of the undrawn our [inaudible] for now, and just have maybe a heading for all of this cheese. So, List of cheeses I love, this is going to be the heading for our page. We learned a little bit about a heading example in our earlier video, and that was the H1 element. The H1 element is the most important heading on the page, and you write it by doing an open bracket, H1, close bracket. Then, go on over to the end of the sentence, and we're going to want to put the closing tag in. So, </h1>, and now we have a heading for our page. Moving on, these are a bunch of paragraph texts. I know that earlier, we took a look at something that can markup paragraphs. We looked at it briefly, so you may not remember what it was. What happens though if you can remember what it was? What if we think maybe it's paragraph, but we're not really sure, or was it called para? I'm not sure. One of the things I like to do is often refer back to a reference site. One of the sites I really like to use is a site called htmldog.com. No, it's not full of a bunch of cute adorable dogs, just one in the logo, but it's a really good reference website. I highly suggest bookmarking this and coming back to it, just look at the common tags that you'll use. You'll see on the left hand side this references section, and then this link here for HTML tags. So, let's go ahead and check that out. What we can do is then scan the page to see what HTML elements are available to us and how to match the content that we have. So, there's some structure, and we've seen some of these before like the HTML, the head, the body. Those should all be familiar or DOCTYPE and meta. We've seen this, that's under meta information. But, what we want right now is elements that are used for text. You'll see the first element listed here is a P tag. That should probably spark the memory from earlier, where P tag is how we reference a paragraph. In case you forget, just click on it, and then you'll see HTML tag P, and it lets us know that it's for a paragraph. Then later on, they'll give us an example down here. The awesome thing about writing HTML is you usually write history about a computer. I'm going to suppose you could do it on a piece of paper a typewriter, but if you want process, you're going to want it within the computer. What's neat about that is basically, as long as you have an internet connection, then Google's at your fingertips. So, you're able to check all the time to make sure that you're remembering the proper syntax for writing things. Eventually, I'm sure that you memorize all of this. But it's not a competition, and it's not anything that you have to memorize right at the start because you have the tools right away to be able to look up anything that you might forget. Don't worry about googling too much, no one will know, and even if we did, no one would judge. So, anytime that maybe you're at a loss for what the tag is, just come over to htmldoc.com or you can do a Google search like html paragraph tag, and right away, you can start even seeing it within the search results from their title tags. So, now that we know that we write a paragraph tag just with the letter P, let's go ahead and change this. Let's add a paragraph tag around all these paragraphs of text: <p> tag, </p> tag, <p> tag, </p> tag. Let's just do that for now. I can delete this for this example, and so now, we have this. We're going to save three paragraphs and a heading. Let's refresh and see how this looks now. Hey, look at that. That is way easier to read, right? So, now you'll see as soon as we added those elements around our text, all of a sudden, formatting started to happen. These chunks of text became separate from each other. You'll also notice that the heading level one became bolder and larger than the rest of the text on the page. So by default, a browser will come across in H1, and say, "That's important. Let's make it bold and bigger than other text." For paragraph text is going to be a relatively normal legible size. Now, as we expand and collapse the browser, it will still fit line-wise from left to right, but we have these line breaks in between every single one of our paragraph tags. These breaks happen after what we call block elements. Things like H1 and P, that's what we call a block element. What that essentially means is they take up their own chunk of line, and then there'll be a space after before another element. We'll take a look at block level elements more in depth a little bit later on. But for now, we're going to finish up this lesson by creating this new HTML file. Adding unnecessary structure to the page. Go ahead and add some metadata if you want to try adding some of those other things like keywords or descriptions. Go ahead, and do that too, then add some HTML elements to the body. Try adding a heading, maybe some more paragraphs, and then once you're done with that, save it and preview it within a browser. Come back for lesson three, and we'll start looking more in depth at headings and other elements for our pages. 12. Convert our Content into HTML Markup: We've learned a little bit about what we need to write the document structure for our HTML pages, and we learned a little bit about the heading tag and the paragraph tag. Next up, we're going to learn to match content types to our HTML elements. So, we made a content outline, and what we want to do is look at that, and sort of see what HTML elements we can use to get the content we have onto our page. So, for example, let's take a look at our homepage. We know that we're going to want to call it the homepage, and homepage will probably appear within our title tag. Sometimes, what I like to do is just print out a piece of paper and right down right next to it, what element is going to be in HTML. Sometimes, when you do this, it takes a little bit of pressure off staring at it with an HTML editor, but do whatever works for you. Next thing on our page, we have the Hero Content. We have the heading that says, "I'm Jon Arbuckle, a freelance illustrator and author," and we know that that's going to be the main heading of our page. On our homepage, this is going to tell everyone what Jon does, and why this site exist. So, I consider that the most important heading on our page. So, we're going to call that an H1, like what we saw before. We're also going to have a large image of one comic. So, we're going to use the image tag for that, which is img. The next section is Jon's web comics. So, we're going to have a heading and a description for that, right? So, maybe in this description, we'll probably have a heading. In this case, it's going to be the second most important heading because it's not the most important, so that'll be an h2, and we're going to have text. So, it's going to be some paragraph tags. We're going to have a link to learn more about the comics. We haven't really looked at links yet. So, if I'm not really sure on what would be a link, I now want to go back to the HTML doc site, and see if I can find anything that looks like would be the element to make a link. So, looking back here at this reference site, remember? We've got the meta information, some text, and then luckily I see here links, and these don't really make too much sense to me right now. But if I click in on this A tag, I see HTML tags A, Anchor. Primarily, use the hyperlink text. The linking made to another page, or part of a page, or any other location on the web. Well, hey great, that's exactly what I'm looking for. So, not exactly sure what an A tag is yet, but let me mark it down for now that this is going to be an A. Don't worry if it seems confusing, we're going to go in depth to what these mean in later videos. So, for the next section, this should look a little bit familiar in image. We already know what that is. The name of the CD, that's probably going to be a heading, too. So, we'll also call it an H2 for now, and another thing which we just learned about. So, we'll say, a Jon's Twitter account is going to be linked to his Twitter page, that will also be an A for a link. A client testimonial. So, client testimonial, I'm a little bit unsure about it, too. Let's go back to this HTML doc site, and check this out, and I know that it's not a list. It's not an image of an object. It's not a tails on a form, but it is text. Let's go back to the text section. P, H1, Strong, em, abbr. This don't sound right. Wait, look blockquote, that sort of sounds like what we're looking for, right? Sometimes, in plain English, it will match exactly what we're looking for an HTML. Blockquote - a large quotation. Hey, perfect. So, for now, I'm going to write blockquote. We'll cover that a little bit later. The logo is going to be an image. Say, navigation is a little bit tricky. We know that those are links. So, we definitely need an A, but let's come back to that later, and then copyright information is going to be a paragraph. So, this is definitely up in the air, and we'll cover it, but we have our basic elements for the content that we've outlined. So, let's review these elements and what they really mean in our next videos, starting with headings. 13. Heading Elements (H1-H6): So far, we've taken a look at one type of heading and that's the H1. We know that the H1 is the most important heading on the page and there can only be one per page. We know that the H1 is the most important heading on the page and there really should only be one per page. There are other levels of headings, too though because we're probably going to have more than one heading level. There is H1 through H6, that means there's an H2, an H3, an H4, an H5. This is when I start getting really paranoid about how loud I type and an H6. Sorry. Here are our heading levels, H1 through H6. H1 is most important, H6 is least important. There is no H7. I'm not sure who once sat on a room and decided that they should go up to six levels of headings but someone did. So, H7 does not exist, but H1 through H6 does. Let's examine a little bit more about headings. So, if we just open up a notepad file, let's talk about headings a little bit more. Think of headings like you would an outline of a school paper or an outline for a resume. Let's say that we have a resume. So, we're going to make Jon Arbuckle's resume. What's the most important thing that's on Jon Arbuckle's resume? Well, Jon Arbuckle's name because without it how would you know whose resume it was. So, the most important heading or our H1 would be Jon Arbuckle. After that, what else goes on resumes? Well, how about his objective. So, we're end in end because that's the next level down and we'll say, the objective, and that's going to be an H2. Let's just put these in parentheses after, a little easier to read. What else goes on a resume? On the same level objectives, we probably have experience, education, contact. These are all H2 because they're the same level of importance as each other and the second most important level of heading. Under objective, you're probably going to have some texts, so we probably won't to have any other headings under that. Under experience, you're probably going to want to list all of the jobs that Jon has had. So let's say, that Jon has worked at The Daily Chronicle and then, we'll describe after that the dates that he worked there, his job responsibilities, so Daily Chronicle is also a heading. In this case, that'll be heading level three. He also used to work at the US Bizarre Weekly and we'll call that another H3 because it's on the same level as this other job at The Daily Chronicle, and it also will be the heading to other things like his description of what he did at the US Bizarre Weekly. I'm sure it was very bizarre. Under education, we're going on to list where he went to college and we'll say that he went to the University of Indiana and that's an H3. Then after that, that's also a heading because we'll describe what he studied there as well as the years he was there. Then for the contact, maybe we want to have a phone heading, so that's an H3 and a mailing address will also being in H3. Maybe he double majored at University of Indiana. So, we need some more headings to describe his majors. So, let's say he majored in illustration and music. Those are going to be additional headings underneath it because they'll describe his studies a bit more under that. So, those are going to be H4's. If we have more heading levels than this, that's where we would get down to H5s and H6 s. So maybe under music, he wants to describe every class he took, that would probably be weird to put on a resume but that could be an H5. So, you can see that this is a little bit how headings work. Very similar outlines that we've had, so just think about them like that when you're creating your headings for your page. So, if we go back here and just start adding in some text, in this case we have lists of cheeses I love. So, maybe instead let's change this to, list of foods I love and then I'm going to make another heading that says, desserts, and I'm also going to want to talk about snacks. That one gets an exclamation and here I want to list the desserts I like and talk about a little bit about them. Maybe I'll say, key lime pie and then maybe I'll have a paragraph about why I love key lime pie. So, I love KLP because it is freaking delicious. Good story. If we're going to have one heading, we probably want another, so let's add another dessert. I also love rice krispy treats and I have a paragraph. It's the best way to use butter, only three ingredients. This is the type of copy I write. Then, the same thing goes for snacks. So, snacks, we can write a bit under snacks like, mashed potatoes. Are mashed potatoes a snack? Probably not. That's not how you spell potatoes. Let's do that right and maybe instead I want to do potatoes and I'll talk about it. I like them mashed, I like them tater totted, etc. So as you can see, here's another example of how we would use headings on our page. If we had another one, maybe I want to talk about toppings and I could say, savory toppings and then maybe have a paragraph describing the savory toppings I like on tater tots, like ketchup, mustard and then maybe sweet toppings. I have to confess to you all right now, I don't really ever eat sweet toppings on my tater tots. But let's say I did, maybe I want to put apple sauce on them or maybe I want to put chocolate syrup on that. It sounds completely appetizing. Apple sauce would probably be pretty good. Okay, so there are some examples of the headings that we have. Again, I typed them in right now just so we could see that outline, but really they're on the same level of nesting. So, we'd want to put those back out. So, I'm just going to clean this up a little bit, and I'm going to save and then I want to preview that backup. So, let's open up our class.HTML file again, can open in the browser and now you can see here are my headings and you can see that the H1 was the largest, then the H2, then the H3 and then we get down to the H4, the H5 and the H6. So by default, the browser will make them smaller, the lower level heading let you go. That's it for headings right now. Our page is looking a little bit boring. So, in the next video, let's talk about how we add images. 14. The Image Tag and Absolute/Relative File Paths: So, you might recall when we looked at images earlier, that the images were a stand-alone element, which means they don't have a closing tag. But they do have a few required attributes. So, for starters, we do our open bracket, and then for image, we write IMG. Then, we're going to click space, and then we're going to start typing our attribute's themes. Our first attribute is going to be the source. The source is going to tell us where our image lives. So, src=" " and we'll fill in that with the value of where the file path is to our image. The other thing that we need is the alt attribute and the alt will load if for some reason the image can't load or will tell screen readers what the image is of. So, let's find an image to use on our site. I'm going to go ahead and I would like to put an image of a sloth because sloths are adorable. So, I'm go ahead and click over the image tags of google image. I'm not looking for Sloth from The Goonies though I do very much enjoy The Goonies. I'm looking for one of these adorable little guys. So, I'm going to find the image URL for that by clicking on view image and then when that loads I'm going to copy the URL up here which ends in dot JPEG. That's going to be the image file for what I'm going to use within the source. So, I'm going to select that all and do file copy or control C or command C. Then, I'm going to head back to Sublime Text 2. I'm going to find my image tag and go over to that source attribute and then in the value, I'm going to paste. So, I'm going to paste that URL that ends in dot JPEG and that is the path to our image file. A common mistake I've seen sometimes is pasting the URL for the image outside of the double quote and that won't work. When you're pasting it in just make sure that it's between the quote so it acts as the value for the attribute. So, this value here is what we refer to as the absolute file path. It's pointing to where this image lives on the Internet. We call this our absolute file path because it does the absolute location of where the image lives. So, it lives at http://static.ddmcdn.com/gif/2-_sloth_in_bowl.jpg and ending in that dot JPEG saying, "If you put this URL into a browser window, you will find this image living there. Next step, we also have to add or alt text so anyone that can't see the image will know that it's sloth. Yehey, sloth. We want to save that and then let's see how it looks within our browser. Another way we can view our file besides double clicking is by clicking on the open file from within our browser Chrome. So, now we have our class file opened up and hey, look! There is our sloth. Our page is a little brighter and happier. But what about if you want an image that's local to computer and not on the Internet? Well, we can either save this image right now to our site folder in our images and use that as a reference. Or if you're following along with the class files, you'll see that in the images folder we already have seven images to choose from. So, let's include this arbuckle-bio.jpg in our site. So, an easy way to see where our files are located is by viewing the sidebar. So, in View, Sidebar, Show Sidebar within Sublime Text, we're going to get an additional window pane and that will allow us to see what files we're working with. So, right now we see class.html and that's the tab that's open. But what if we want to see the other files and folders that are in our Jon Arbuckle site? We can do this by simply grabbing our folder and we're going to drag it right into that sidebar. So, click and drag and now you'll see this folders pop up as occurred. So, we'll see Jon Arbuckle site and we'll see class.html and that's file that we're working in here. Then, we're able to easily see all of the images that are within our images folder. Let me go through this once again with you. Another way that you can get the sidebar open in your Sublime Text is just by clicking File, Open and navigating to your folder, so Jon Arbuckle site. Then, when you click Open, it will automatically show you the folder with all the files. Sublime Text 2 does this weird thing where it opens up two windows so just close the other one and make sure you're working within your class files. So, now we can see we've got our class.html again. I'm going to open that up and you'll see when I double clicked it, it shows up here and in the sidebar. If I just click once, then Sublime Text 2 will give me a quick preview. But as soon as I either type in here or double click, it will actually open it as a tab. So, as I type, it then opens the file. This is just a way that you can quickly browse through your files without actually opening them. But, make sure you've double clicked and have your class.html back open. So, now let's add our image into the page. We're going to duplicate the image tag because we want to save our absolute file path example. So, again we're going to write img source = '' alt='' and then close our tag. So, we know that we want to get to our logo.png file which is inside of our images folder. But how exactly do we get there? In our absolute file path example, we had the URL that ended in sloth in bowl dot JPEG. So, we know that we want to include the sort of image reference to it. So, we know that we are going to need logo.png in here for sure. So, let's try adding that logo.png because that's the name of our image file. Of course, lets add alt text as well so we'll just call it logo for now. Then, let's save this file and see what happens when we open it in our browser. So, I've refresh the page and I'm going to scroll down and as you can see, we've got the sloth from our absolute file path but over here with our relative file path, nothing showing up. We have this broken image icon indicating to us that the image does not have the correct file path to it. So, we hover logo.png here, nothing comes up. You can see if I do the same action on top of the absolute file path, we get a little preview of the sloth image. But here we've got nothing. So, something is wrong. So, let's take another look at how we can get our logo.png to appear. So, we have to figure out where the file is relative to our class.html file. Here we are in class.html file and this file is on the same root as the image folder. So, essentially what we have to do is we have to tell the browser we're at class.html right now but we need to go into the image folder and then once we're inside of the image folder. We're going to be looking for a file called logo.png. So, we will do this by typing IMG because we want to go into that folder with image and then to go inside of a folder. We use the slash character. This says find the image folder then then the slash says go inside of it and then we say look for logo.png. Let's save this, go back to our browser and give a refresh. Hey, look there's our logo. So, that's how we traverse our file paths and able to get our images relative to our document onto the page. So, that's how we go into a folder but what if we have to go back up and find a file? Well, for this next part I just want you to follow along as I do this and don't copy and paste this into your files. But what I'm going to do is make a new folder and this new folder is going to hold our class.html file. So right in Sublime Text, I can click New Folder and I'm just going to name it class. So, now as you can see we have a new class folder in our Jon Arbuckle site folder. I'm going to close the file I was working with, open up my Finder window. For right now, just to show you, I'm going to drag the class.html file into the class folder. I'm going to reopen up that file and show the class.html file that now lives inside of this. We'll open this up in the browser. Now, we scroll down and you can see that our image path is broken again. Our image path is broken again because let's revisit our source. We're essentially looking for an image folder with a logo PNG file inside of it inside of our class folder. Because remember it's relative to where our file is. So, our class.html file says, "Well, where's an image folder in here?" And it's not because it's one level up. So, we need to do is figure out how we can get from class HTML backup to the route of Jon Arbuckle site folder and then back into the image folder to find the logo.png. So, we can do this as well within Sublime Text and within our HTML file. What we have to do is go back up a level. To go up a level, we type dot dot slash and that says from where I am class.html, go up one level, then look for an image folder and then find the logo.png file. So, let's save this. Go back to a browser, refresh and hey look there it is again. Our absolute file path is taking a little bit longer to load but that will show up momentarily. Hey, look there it is. So, now we have both files on our page again and we have made this correct by doing the dot dot slash to go upper level and find the correct image. If you were nested a few folders deep, you can keep going up levels by just- you just keep typing dot dot slash. So, right now this would go up one, two, three, four levels if we were four folders deep. Of course, we're not, so let's get rid of that. So, that's how we traverse our files get relative file paths. Right now, we going to set everything back to how it was and move our class.html file back to the root so we can go back to how things were organized before. When I move files around like this, I want to make sure that I'm working in the right files in Sublime Text. So, right now it's actually still looking at the class.html file that was in a class folder which doesn't exist anymore. So, I want to make sure that I close that, don't save and open back up my actual file. So, that's how we get images onto our pages with absolute and relative file paths. In the next video, let's take a look at list elements and see how we can start adding different types of lists to our page. 15. List Elements: So, next we're looking at List Elements. I'm just going to delete some of these paragraphs to give us a little bit more room and so one list that we have, which we saw a little bit before was the Unordered List which we typed by writing <UL> and then let's be sure to close it by also putting the closing tag of the </UL>. So, UL is for Unordered List Items and we can use Unordered List for a variety of different things. Perhaps, if we were cooking a recipe and we needed to get ingredients, Unordered List would be great for ingredients because if we're going food shopping, It doesn't exactly matter the order that we buy it and as long as we just get everything on the list. So, one of our examples could be something like what we would need for baking. So, let's say that we need something like flour, sugar, and chocolate chips. So, if we save this right now and preview it in our browser we'll refresh the page and then we'll see flour, sugar, and chocolate chips there but they're all sitting on the same line as each other. So, essentially they're not really appearing as List Items as much as they are just paragraph text. Whenever we use an Unordered List or any other type of List type, we can't just put the container of a UL. We also need to include an LI element. The LI element stands for List Item and separates each Item that belongs in the List. In this case, the Unordered List. We do that by typing <Ll> and then again we'll have our closing tag for an </LI>. We're going to cut this text a flour and we're gonna paste it within the LI to market as an LI Item. We'll do the same thing for sugar and we'll also surround chocolate chips because that is the third List Item in our list. Let's get rid of the space here and then let's save this file again and see now how this looks within our browser. We'll refresh the page and now as you can see this looks quite different. All of a sudden we now have a bulleted list of three Unordered List Items. So, flour, sugar, chocolate chips and by default if you're using an Unordered List the browser will add this dot or bullet to each one of our List Items. List Items can hold other types of text too, besides just plain text we can actually put HTML Elements inside of it. So, if we wanted to put a bunch of paragraph texts with inside a List Item we could. So, we have a <P> tag nested inside of our LI, nested inside of our UL and we can write a paragraph here like purchase whole wheat flour and we can close that up and if we wanted this is totally semantic HTML as well so you can have a couple of paragraphs describing each List Item. Another thing to remark is you can't just put a paragraph inside of a UL. It always has to be a UL followed by an LI and any other additional text within that in order to have a valid List Item. So, let's put our text back to how it was and remember to save because it's important to save often, but what if the order did matter. What if we didn't want just an Unordered List, but we wanted an Ordered List. Well, we can do that with an OL. OLs looked exactly like a UL except we're going to use OL, but inside we'll have List Items again. Always an OL with nested LIs inside. One of the reasons we might want an Ordered List is if we're actually talking about the directions for baking something. So, that's where the order of operations is more important so we're going to want to use an Ordered List for something like, pour a cup of flour into a bowl, mix in the sugar, eat the chocolate chips because this is a really legitimate recipe. I don't really think anyone should follow this at home, but let's pretend that the steps are important here and so that would be an Ordered List. We're going to save that and let's look at in a browser. So, you can see for an Ordered List by default the browser's, puts numbers in front of it. So, one, two, three in front of each step as opposed to the Bulleted List in the Unordered List. We have one more type of list that we'll cover and that's a bit different and that's the Definition List. Definition List is marked with a DL. We don't have List Items inside of these though. For definition list we're actually going to define a Definition Term and a Definition Description. So, our Definition Term could be something like banana and then we're going to want to do the Definition Description. So, for banana we can say that the Definition is something like a delicious yellow fruit and then we're going to close that definition by closing it with a </DD> tag. Let's add another term. So, if we want to have multiple terms within our Lists, so say this is a list of fruits. We're going to define what a kiwi is with the DT and then we also have to give it a Description, so in the DD we're gonna write something about Kiwis so something like green weird fruit with fuzz and appealing taste and then we're going to close that Definition. I'm going to expand this a little, because it was going to the next line so we didn't have enough room and then after that we have a finished Definition List. So, let's see how this looks within our browser. We're going to save our file and then we'll refresh and here you can see it's a little bit different. In our Definition List, our term is to the left and then the Definition Description is indented to the right. So, these are the browser defaults for showing a Definition List within the screen. Looks like I don't know how to spell delicious, so let's fix that up and with that our Definition List is all set. In the next lesson we'll take a look at what makes the Internet one of the best things that there is and that is Links. So, come back for the next video. 16. Links: So far, we've really just had static content on a page, but what makes HTML different than other markup languages like SGML is the feature for hypertext and discrete interactive documents. A link is a connection from one page to another and they're super awesome. So, like when we're watching a YouTube video and it finishes, and it's like, you've watch this cute cat video here's a link to another cute cat video and you're like, this is awesome or when you write one new story and you click a link to another new story. Links are how we get around. So, let's talk a little bit about how we make links. Link essentially has two ends; an anchor and then it also has a direction. So, how we write a link tag is essentially we are writing an anchor tag. So, let's scroll down and find some room, and in order to write our anchor tag, we're going to write A for anchor and then the next part that's super important is the href attribute. The href attribute is the direction for where we want the link to go. The value for that is essentially the source of the URL that we want our visitors to visit after they click on this link. So, inside you can write some text like "click here" and then we're going to close our anchor tag with the closing A. Within our href, we're going to put that URL of where the page should go. That might be a page on our site or it might be an external page, so maybe something like cuteoverload.com is where we want to send our visitors. So, let's save this and see how this looks within our page. So, let's give it an old refresh and now we can see we've got a "click here" link, so why not? Let's click here. So, I'm going to click on that link and when I do, I'll be taking to cuteoverload.com and I can quickly see that that was a very smart decision because look at all the cute that's on this page. It's a Merino guinea pig? That's pretty good. Look at that little lion. Is that a lion cat? I don't know what that is but it's eating a giraffe and I quite enjoy that and look at the elephant. Okay, I am now officially getting distracted, so let's get back to our link tags. So, there's our click here link tag and I should say that click here is terrible link text to have. It's terrible because click here I mean I've made that mistake on the internet before, right? So, when we're writing link descriptors we want to make sure that it's more clear text. So something like, "see adorable animals", and then I know that when I click on that link I'm going to be taken to adorable animals. So, this is way better link text that will point to cute overload and make it more clear to your visitors where they'll be going when they click that link. That wraps up our anchors. So, let's take a look at block quotes in our next video. 17. Blockquote: In our content outline, we talked about including a quote from one of Jon's clients. In order to do that, we're going to use the blockquote element. The blockquote element represents a coded section of text. So, let's find some space to put this in. We do this by writing open bracket, block book, closed bracket, and then of course, we have to close our tag. So, let's put a quote in here. So, I'm going to put a quote here from one of my favorite lyricists and will write, "Wake up in the morning, feeling like P Diddy." Only really deep blockquotes are going onto our site today folks. So, essentially, when we look at this text, it's not just plain text. This is actually a paragraph because Kesha only writes very smart paragraphs in her lyrics. So, let's surround our text by a paragraph. So, now our paragraph is nested within our blockquote. We'll preview this in the browser, and you'll see here it is. Here's our blockquote and by browser default, it's going to be indented from the left side of our page to represent that it is a piece of quoted text. A blockquote is also known as a block element. So far, we've really been using a lot of block elements on our page, and block elements you can tell by the hard line break after each element, so that's that white space in between our elements. In the next video, we're going to talk about inline elements, which are also going to be parts of our web pages. 18. Inline Elements: So far, we've used mostly block-level elements, and the block-level elements have a white space after each time that they're on the page. However, texts within a paragraph heading or other block-level elements can also be marked up in a variety of ways. So, maybe we want to add emphasis or highlight text, well, we can do that within things like our paragraphs or our block elements on a page. So one example of an inline element is the ABBR element or an abbreviation. So if you use an abbreviation, actually once already, and that's for Q and pie. We said, I love KLP because it's freaking delicious. So let's tell people what that is which is an abbreviation within our text. So what we can do with an inline element is put it inside a block level element. So we're going to type up the tag ABBR and then close it with a closing ABBR tag and that says that KLP is an abbreviation so you'll see that this inline element is nested inside the paragraph. We can also add an attribute to our ABBR elements and we're going to add the title attribute. The title attribute is different than the title tag in that it's describing the ABBR and not coming up with that tab text on our page. So the title here is going to be what that abbreviation stands for which is Q, I and pie. This tells search engines and the screen readers what KLP is, and also when we save and preview in the browser you'll see that we'll be able to see it in one other area. So right now it looks pretty much the same, but if we take our mouse and hover over, you can see we actually now get a tool tip that says the title attribute of our ABBR tag which says, Key lime pie. So the ABBR is an inline element and you'll see that there's no hard line break afterwards. It just appears right in line with the rest of the text. So that's what's known as an inline element. There's other inline elements that we can use, HTML provides us two ways to have emphasis onto our text. One of the ways is through the M tag. We can add ordinary emphasis by putting the M tag around the block of text. In this case, let's emphasize mozzarella because it deserves to be emphasized. Another level of emphasis is the strong emphasis. We can add that to our page by using the strong tag. So we'll have fun do as being strong text here. All of these inline elements are nested within our paragraph and when we refresh and scroll down to check that out you can see that by default emphasis is actually rendered italic and our strong tag is actually by default rendered bolt. So these are a few examples of the inline elements that we have. There are other inline elements out there as well, remember you can check out that HTML doc site and see what else is there. So if we take a look at our text section here you can see some of the things that we just discussed like the strong tag or the M tag. Some other things in here are inline elements as well such as the DFN tag or the delete tag. We've also looked at another inline element, right the link element. So anytime that we have a link on our page that's another inline element where it's not a block level. We can add a link within our paragraph text as well it doesn't need to stand alone. So if we wanted to make something like cheesy grin a link, we can do that. We just put our cursor right into that text and then around the text that we want to be on link, we're going to write our A tag. So A href equals and then we're going to have our attribute value, we'll put that in after, we'll close our tag first and then we'll go back and wherever we want this to go, it can go. So let's say that we want cheesy grin 2.2. Let's do cheese.com I'm sure that's a lovely site that will make you grin about cheese. So, that's how we can add an inline link into our paragraph text and now you can see the link appears and there's no line breaks before or after because it's an inline element. You'll also notice that there's a color difference here, if the links have been visited it appears as purple by default and if we haven't clicked on a link yet it appears as blue. So that wraps up links. In our next video we're going to talk about HTML entities and how to add them to our page. 19. HTML Entities: Sometimes we need more than plain texts within our HTML documents. Reserved characters in HTML must be replaced with character entities. So, things like copyright symbols or trademarks, that's what we'll be using HTML entities for. Let's see some examples of this. We're gonna make a new paragraph here to use as an example for entities. So, we'll just say this is our entity paragraph. And then, let's try adding an entity. How you write an entity to a page follows the same syntax. It always starts with an ampersand, and then we're going to write the name of the entity. In this case, we're going to write copy for copyright, and then it ends with a semicolon. So, ampersand, copy, semicolon. Let's save it, refresh, and there you can see there's our copyright symbol. That is an HTML entity. It's pretty cool. And there's a whole bunch out there that we can write. We can do another one, if we want to put a cent entity in there we can, ampersand cent semicolon. Or how about if we want to put Euros we can do ampersand, Euro, semicolon. If when you want a trademark that would be ampersand, trade, semicolon. Some of them are pretty easy to read or guess and then we can see when we refresh the page there they all are. But what about if we want an ampersand? Well, we can do that too, we do ampersand, amp, semicolon, and now look there's a pretty ampersand on our page. Don't worry, you don't need to memorize all of these, if you do a search for HTML entities, you'll find a lot of references to all the entities that you can use out there. Here's a site that shows a bunch and as you can see there's quite a lot of them. So, don't worry about memorizing them, anytime that you're looking for an entity just do a quick Google search for it and you can find it. You'll probably memorize some ones that use more than others, but if you ever forget, it just do a quick search for a HTML entity copyright, and you'll probably get like 3.7 million results on the inter-webs about how to tell you to do that. So, no worries if you forget. In the next video, let's take a look at code formatting and some best practices. 20. Code Formatting: So, we talked a little bit about white space and code formatting, but I just want to review a few best practices. It's really important that we keep our code nice and clean. This will save you headaches if you come back to your code in a week or a year and you don't exactly remember it. It will also save headaches if you work within a team. It's best if you can all agree on how to format your code. Technically, because white spaces are ignored, you could write your HTML code like this. It could basically be a sloppy as you want and the browser will sort of fix that for you. However, it's really hard to read that. So, always keep to sort of nice line spacing that it makes it easy for you to parse. You'll also see Sublime Text has here what they call a minimap and the minimap lets you browse your texts, so if you're looking for a specific piece of HTML that you've written. Right now our document's pretty short so that might not be necessary, but if your project gets long, you may want to use it. For now though, we can do hide minimap and then that won't block any real estate on our corner. Another thing that we want to avoid is what's called tag soup. So, we can write h1 on lowercase like we did or we can write it in uppercase. This will also be read by the browser. You could also do something really cool like this, uppercase T, lowercase I, uppercase T, uppercase L. You get the point. This is if you want to re-live 1996 hackers days and you want to be zero cool, but it's really not very cool at all. So, this will be valid HTML that can be read but it just hurts the eyes to look at. So, I recommend not doing this. It's really nice to keep your code clean and tidy. So, let's set that back to all lowercase. Then whenever you work with a team, you can come up with a formatting document for how everyone should be writing their HTML. It's really good practice to follow and it'll keep you clean and honest with your code. Another tool we have at our disposal is HTML comments. So, let's say that we wanted to write a little note to our self here. What if I wanted to add more deserts later on and I didn't want to forget. I'm going write a note that says, "Don't forget to add more deserts." Great. The problem is though, anything that we write in our body will be printed to the page. So, if I refresh here then, of course, we're going to see that note I wrote to myself to the page. So, how can we avoid that from happening. Well, we can use HTML comments. So, for HTML comments they look like this, open bracket exclamation, hyphen, hyphen, and then at the end of the comment we're going to do another double hyphen and the closing bracket. You can see Sublime Text is making that gray color to let us know that it's a comment. Now, when I save and go to the browser, it's hidden from view. So, HTML comments can be really super helpful. One thing I want to point out though is just because we can't see it in this browser view here doesn't mean that it's not in your source. So, if someone were to view your source, look there's our comment. I tell you this because I don't want you to write anything like, "I hate my boss." In your comments because it's definitely possible that someone can see it. So, remember that. Though HTML comments won't be printed to the page, it's still possible that someone can see what you're writing in there. HTML comments can be super helpful just for keeping track of anything that we want. So, maybe in the class notes I want to say what this section is. So, here we learned about headings. So, here's an HTML comment that says, "Headings." So, down here I'll read the comments and this one will say images because here's where we learned about images. I can copy and paste this to make it a little bit more simple for me to write. So, over here we learned about blockquotes. So, I'm going to change the text to blockquotes. Here we learned about links. So, let me add in this heading for links. Here was our paragraph and our inline element example. We have our unordered lists, our ordered lists, and our definition list. So, those are HTML comments and some notes on code formatting. So, just remember, always try to keep your code nice and neat, use your tabs to indent and show nesting, and be sure to do all lowercase letters so it's a little bit easier to read. We've learned a lot in these last few videos and I think we're now ready to go back to our content outline and start translating our content to HTML for our homepage. 21. Marking up our Homepage: We're going to move out of our class.html file for now to make our homepage. So, we're going to select File, New File, and we're going to make a new document to work from. We're going to add in our HTML shell, so you can copy and paste that if you want, but for now, let's do it from scratch. So, we need our doctype HTML, and that's a standalone tag. Next is our HTML element, and don't forget that we're going to put that Lang attribute there and set it to English. We're going to close our HTML tag because everything will be nested inside of that. Next up is our head element. Remember, our head hold all our metadata for our page. After that, our body element. The body element holds all the content that will be shown on screen. We're going to save our file, and for the homepage of all of our sites, we're actually going to name this index.html. The index HTML file is what the web server will look for when they go to the root of your HTML document. Index.html indicates that this is the homepage, and the first page that should be loaded when visitors come to your site. So, we'll save that and you'll notice that once Sublime Text knows this is an HTML file, it will start doing colored syntax highlighting based on HTML tags. Let's open back up our content outline, and take a look at what we have for our home page. So, we know that we're going to want the title tag in the title tag should say the information for what this homepage is, that goes into our head element because it's metadata. We'll add our title tag, and then in there, we'll write what we want to appear, which will be The Portfolio of Jon Arbuckle. Don't forget the other necessary thing that we need in our head, is a meta tag with the car set attribute. We're going to set that to UTF 8. Let's save this, because remember we always want to save often. Next up, we're going to start adding the content to our body, so if we preview this now, of course, nothing will be on the page because we haven't put anything on our body element yet, but we will see our title tag displayed within in the tab of the browser. Also, we never set a fave icon, so here is that default document icon I mentioned earlier. Lets start adding things to the body of the page so it'll actually show up in the browser. We have our elevator pitch which will act as our H1. I'm going to copy that text, then I'm going to create the H1 element. I'm going to paste the text in and then I'm going to close the H1 element and now, we have our heading Level 1 for our page. It'll be the most important heading that will display on our page. If we check that out, there we go, and remember by default it becomes bigger and bolder than the rest of the text on our page. You might notice that the apostrophe in I'm is actually displaying as a curly quote which is what we want. That's happening because we copied and pasted it out of a Word document. However, if you were just typing text within this editor, you'll notice that when I do the I apostrophe M and I refresh the page. Then it turns out that's not the curly apostrophe that we really actually want. Jason Santa Maria has a great article about this: "Don't be dumb you smart", and it's all about making sure that you're actually using curly quotation, and not describing things like inches or feet. So how do we make sure that happens? Well, we can go back to using our HTML entities that we know about. There's actually an HTML entity for this and it's &rsquo; and that stands for right-singled quote. So, when we drop in that HTML entity, you'll see it's now corrected to the right curly quote. Next up, we're going to want to include that large image that we described. In this case, Jon's not really sure yet what he wants to put there. We know we're going to need the image tag with the source and all the attributes. But what's going to be the value in our source? Well, we're not sure yet, so what do we do for not sure. Well, remember we talked about Lorem Ipsum text earlier, and that there were Lorem Ipsum generators we can use. There's also basically the equivalent for Lorem Ipsum of images. My favorite one is, placekitten.com. Here is placekitten and what you do is you can grab this URL that's listed here, placekitten.com/200/300. We're going to copy it, and we're going to drop that into our source value. The 200 and 300 stands for width and the height, so you can adjust those to the size that you need. Here we're showing 200 pixels wide and 300 pixels tall. We want this to be more of a vertical image, let's switch that to a 1000 for the width and it has been refresh, oh, look, there's a little cat face. You can sort of tweak this to what you're looking for, and it basically just puts a placeholder of a kitten image for you. There we go, If cats are not your thing, there's a lot of other services out there too that you can use. One of them is, nicenice.jpg, the Vanilla Ice placeholder service, or they are Fill Murray, which is images of Bill Murray. You can also check out placebear if you like bears more than cats. There's also a more simple one, here is the dummyimage.com, and that just gives us a image with the dimensions written on top. This might be a little classier for some things that you're looking for, maybe not as much fun, but probably more right to the point, maybe, better for client deliverables, depending on your client. So, let's adjust this here. So 900 by 300, and then the 0001 and fff stand for the colors, so 000 stands for black and the fff is white for the text that's sitting on top. So, there we go, right now we have our H1, we have our hero image. We're not exactly sure what it's going to be at. So for now, we're just using this placeholder image. That image we set with an absolute file path. Next up, we want to put some information in about Jon's web comics. We want a little bit of a description to make sure that they know that Jon indeed writes web comics. So, web comics, if we think back to our outline, is the second level heading under that Jon Arbuckle does freelance work so let's make another heading, this time an H2 and set it to Web Comics, then we're going to want to add that description text we talked about which will be in a paragraph tag. For the paragraph, we're just going to write some pretty simple text here. We can always go back and adjust. This time, we're going to say, follow along with Jon's eating adventures over at the Lasagna Chronicles. This text alone does do much good. We want people to actually learn more. So, let's be sure to include a link here. The link will go to our work page. We'll set that a little bit later on and we're going to have the linked text say something descriptive, because remember we want people to know where they're going to go and so we'll just have them say, see Jon's comics. We also want to talk about Jon's very prominent music career. So, let's put in another heading because that will live under what he does, and that's going to be in H2 with the text of music. If we refer back to our outline, we can see that we wanted to talk about his popular CDs for sale and include an image of it. So, let's add our image tag with our source attribute and our alt attribute, and let's figure out what image we want. Well, we're going to want this, pokeaholic.jpg image to show up. So, remember because we're linking to an image within our own site, we're going to use a relative URL instead of an absolute path. So, we're going to go into the image folder. So, we do that by typing img, because it's on the same level as our index.html. Then, to go inside of the folder we'll write slash, and then we'll type out the file name which is polkaholic.jpg. For anyone that can't see this, we want to make sure that we provide alternate text, so we could write something like polkaholic there. We actually aren't going to need that in this example and here's why. In the following heading, our H3 heading, because it's nested underneath our music outline, we're going to write polkaholic. So, if we'd actually put alt text it would say, polkaholic, polkaholic. So, let's just keep that text within the H3. Now that people know there is a CD, of course, they are going to want to buy it. So, let's put a link to the CD on Amazon.com. So, we put our anchor text by the CD, and don't forget to set your href to the URL you want to go. Next, we want to try to get Jon's social media going. So, let's make sure that people know that he's on Twitter and that they can follow him there. That'll be another heading level two because it's nested under our top level heading. So, being h2 Jon on Twitter, we're going to put in some paragraph text here that will hopefully get people to want to keep up with Jon's latest music and illustrations. Then, we're going to have a link to Jon's Twitter page. So, something like twitter.com/jonarbs. I do not know if that is a real Twitter account. If it is, I hope it's good. Then, we'll put the @jonarbs for the link text because that will indicate to people that this is the Twitter profile that we're linking them to. Next, we're going to want to include that client testimonial. So, Dr. Liz Wilson was nice enough to write some kind words about Jon. So, we're going to want to include that, and how do we include the quotes? With the blockquote element. So, we're going to type out blockquote here. I'm going to move that up so you can see it a little bit more. We open and close our tags, and there we're going to paste in that text within a paragraph tag. We wan the 'who it's from' on the next lines, so we're actually going to make two paragraphs within this block quote. So, the first paragraph is the actual text and the second paragraph is who said it. Now remember, we talked about the curly quotes earlier. So, let's go back and make sure that we clean those up by adding the proper HTML entities so it appears correctly. Here, we've got a double quote which is very similar to the single quote. We're just going to switch this entity around a little bit. So, instead of saying write single quote, we want here is ampersand, and then L for Left, D for double, and then the quo again for quote. So, ldquo is left double quote. Then, for the closing quote, we'll need rdquo for right double quote. We're going to want to copy that rsquo for over here to make sure that all will display correctly, and then there's actually one more entity we have on this page. This should be an em dash. There's some interesting reading on em dashes verses en dashes and what to use them, if you'd like to learn more about that. But for now, let's just make this an mdash so that at the &mdash with a semi-colon, and now our block quote is set. After people read this blockquote, they're probably going to want to hire Jon, right? So, let's make sure to put some paragraph text in to get people to hire Jon for pet portrait needs, and now we want to make that 'get in touch text', a link to actually go to the contact page of our site. So, we'll wrap it with the anchor tag but will set the href later once we actually have a contact page to link it to. Next, we're going to want our footer information. For our footer, we're just going to have a little bit of copyright text. So, something like all content copyright Jon A. 2014 and then close the paragraph. Maybe we want to add the copyright entity so we can do that by writing &copy; and our footer content is set. The last thing we need is that header content which includes a logo, which is going to be an image and then a bunch of site navigation so, a list of links to other pages in our site. Let's head back up to the top here, and this is where I'm going to start adding in my HTML comments. So, here's my header information. I'm just going to mark that. This is page content over here, so I'm going to mark that. Again, when I come back to this page later on, this will make it easier for me to find the information I'm looking for and remember, where all that content is. So, here's my footer information below that. It's just a tool to keep things organized. So, back to our header, we know we want the logos that's going to be image. So, we do img source equals, and then our logo is located in our image folder. So, we are going to say, go into the image folder, so again that's img, slash to go inside, logo.png. Then we're going to want to set the all text here and the all text will be Jon Arbuckle because that's the text that appears within our logo. So, we want people to know that that's what it says, just in case they don't see that. Next, we need that list of links to go to the three other pages on our site because we always want people to be able to get to the work, the About and the Contact page. So, something I like to do sometimes in figuring out how I want to mark things up in HTML, is sort of say it out loud. So, I know that these are links and I'm saying here are three links that we have. If I'm saying the word link, I know I'm going to need an anchor tag. That's cool. What else did I say though? I said, we're going to need a list of links. Oh, lists, so those are sound familiar. When we talk about list of navigation, that's actually another unordered list. So, we can do the mark up our list of links is using unordered list. So we'll do that by typing ul. We're going to close that up and then we're going to want those links to live inside of our ul, but what do we need inside of a ul, we need our li elements to represent each item. We know that we have three pages so we're going to need three links here. Then inside of all of these list items, there will be the link tag that links to the page of the site. So, the first one will be our work page, our second link will go to our about page, and our last link will go to our contact page. Now, of course, we haven't created these yet so we'll go back and fill in those href values as soon as those pages are created. Let's give that a refresh. Hey, we've heard a lot of content going on here. We've got our logo, we have our list of links, we have our h1, which says who this site is for and what it's all about, we have a placeholder image which will be our hero image, which will grab visitors' attentions, we have a series of h2s, sub content for under our main header. So, we've comics, we've a paragraph, we have a link to see Jon's comics, we've got an h2 of music, we have another image tag with a relative URL, we have an h3 because that's a heading nested under music, we've got a link to buy the CD at another website, we go back to our h2 because Jon on Twitter is at the same level as our other categories, we've got a paragraph to describe that and a link, we have our block quote with two paragraphs inside of it. We're also using HTML entities to make sure that our curlicues look nice. We have one additional paragraph and inside of that, we have our inline link to get in touch, which will link to our contact page. Lastly, we have our footer paragraph. The footer paragraph has some text as well as our copyright entity. Now, our home page is semantic and awesome and ready to go. So, that wraps up Lesson three. We created a new page and index.html to save our home page in, we added new block in inline elements, we followed our content out line to make sure that all of our content was marked up correctly for our html, we also followed good formatting practices. So, make sure you take the time now to go back and fix any of that up if maybe you were typing a little fast. It happens to all of us but take the time, make sure things are nice and clean, save it, make sure it looks good in the browser, and then the next lesson, we'll look at our other three pages, and make sure that we can get all of that copy from content to html elements. 22. Identify Remaining Content Types as HTML Elements: So, now that we've got the homepage under our belt, let's move on to our remaining three pages. Next up, we have our work page. Here, we have the content outline that we made for our work page. So, let's get started putting that into Sublime Text. We'll open Sublime Text backup, and right now we have our class.html file and our index.html file, but we're going to need a page for our work page. Either right-click or Control click and do New File or we can do File, New File. Here, we are set with our new file. Now, I mentioned earlier the idea of saving some time by copying and pasting, and we can certainly do that with our previous file. So, if we go back to our index page for our home page, one of the things we can do is alter the text in here to work on our other pages. We'll go to Selection and then Select All. The keyboard shortcut for this is Command A or Control A and now you'll notice everything is highlighted. Let's Edit, Copy, and then let's go into our new file that we haven't done anything yet and paste. Great. So, now all of our code is copied into here. What we want to do now is make adjustments so it's actually for our work page. So first, let's go ahead and save this so that we don't lose any of our progress, and we'll call it work.html. Make sure that you're saving within your jon-arbuckle-site. You should see your indexing class file there already and click Save. So now, we've got to work the HTML file save, but it's got all our content from the home page. So, what do we know that we need on a work page? Well, we have some content that's different than our home page, but we have two things that are the same. That's the header content and the footer content. So, what we're going to do is you'll see that we have these handy-dandy comments that tell us this is the header, here is the page content, and here is our footer. So, we actually know that we want to keep the header and footer, and so what we'll do next is just delete all of the content that's in our page content. So, select it and then delete it. Then you see we have our header information from the first page or footer information from the first page and now all you need to do is put the custom content for our page content in between. This is a really easy way to create all the rest of your pages. There's something else though that's missing, and that's we have to update the title. So, let's delete this. Now what we have here is essentially the shell for the rest of our pages. Let's start creating our other content. This is the work page, not the home page anymore, so let's say "Work." Then we still let people know it's the portfolio of Jon Arbuckle, so "Work: The Portfolio of Jon Arbuckle," or "Work - The Portfolio of Jon Arbuckle." People will still know we're looking at the portfolio, but that's specifically we're on the work page. So, our title has now been updated. Let's go down to our page content. In our page content, we're going to want to write HTML that's specific to our work page. So, going back to our content outline, we've done the page title, but we also need something else. We need the h1, right? So, let's do h1, and the heading of this page is also called "Work." Next up, we want to talk about the Web comics that Jon has. So, if we remember our heading outlines, we said that this was our h1, which means that Web comics will be in h2. We see that there are some other things on the same level as Web comics under our work, right? So, Portraits and Music will be on the same level, so those will also be h2s. Then, within Web comics, we have two different types of comics with information underneath of that, so let's make those h3s. We also have a title of a CD, so we're going to make that in h3 as well because it's the heading for the other information about the CD. So, let's get back over to Sublime Text, and we're going to work with our Web comics section. So, we have our second level heading, the h2, and that'll be called "Web Comics." Then the h3s will be the title of the comics, so the first one is the "Lasagna Chronicles." We also want to have an image of the Lasagna Chronicles and a link to an external site for it. So, let's include the image here, so img src equals and the image for Lasagna Chronicles is again in our Image folder, lasagna-chronicles.jpg. Go inside of our Image folder. To go into it, the /lasagna-chronicles.jpg. Then we're going to want to link people to go to the offsite URL for the Lasagna Chronicles Web Comic, so we'll do an anchor tag. Let's just say that that lives at something like lasagnachronicles.com. We want a call-to-action text that will describe where people are going, so something like, "Read the Lasagna Chronicles." Then we're going to follow this same format for the next Web Comic, which is Cat Town. So, h3, Cat Town. Just move this down a little so we can see a little better. We're going to have our image tag again, so img src equals "img/cat-town.jpg." I forgot the alt text, so let's make sure we have the alt, which will be blank. Then again, we want the link to the site, so maybe cattowncomic.biz, Read Cat Town. Okay. So now, our Web Comics is set. The next section under Jon's work are his portraits. So, that goes into the second level heading because it's nested under Work, so Portraits. Then for the Portraits, we're just going to have two images, one of a cat and one of a dog so people know that portraits are available. So, we'll do the image tag again, so img src equals, and we'll have the alt text, and we'll say cat portrait, cat-portrait.jpg, but something is already wrong here, right? When I just did cat-portrait.jpg, it's going to be looking for that on the same level. So remember, we have to go into our images folder, so image/. Then I can just copy and paste this if I want, so Edit, Copy, Edit, Paste. I can update this so it just says "dog portrait." It's a nice shortcut to take so we don't have to type everything up. So now, we've got our portraits on here. The next section from our content outline was our Music. So, let's add another h2 because it's on the same level as Portraits and Web Comics. They're all as important under Work. So, Music, h2 and the name of the CD is "The Best of Jonny Arbs" so that's going to be another heading. This is another heading because if the case that Jon writes more music, he's got a long list of different CDs he had and the description of them, so he might end up having more h3s eventually as soon as he graces us with more of his polka genius. So, we've got The Best of Jonny Arbs. We're going to want the image of the CD and the link to buy on Amazon. So again, we'll use our image tag, and that's the Polkaholic CD, so img/polkaholic.jpg. The alt here is going to be Polkaholic. We also forgot to put in our alt text over here, so let's say something like "Portrait of a cat" and "Portrait of a dog." Okay. Sorry, back to our music, and then again our link to Amazon. So, a href="http://amazon.com/polkaholic". In there, we're going to say, "Buy this CD." That will be the link text that people will view and when they see "Buy this CD", they can click on it and get this musical genius. So, that's it for our work page, and you can see it wraps up with our further content, which we already had when we copied and pasted. So, let's save this file and see how it looks in our browser. Here's our work page. So again, we have our logo and our navigation links, then we have our work title. We've got the web comics section and first, we learn a little bit about the Lasagna Chronicles along with the link to read the Lasagna Chronicles. We've got Cat Town with our image of the Cat Town and our link to read Cat Town. We have the portraits section so we can see we have the cat portrait and the dog portrait so we can know that those are available and part of Jon's work. We've got the music section with The Best of Jonny Arbs living under that and that's the polkaholic CD and the link to buy the CD on Amazon. Then we end with our footer content. So, now that our work page is done, let's go ahead and make our About page. We're going to do "File", "New File" and again, we can copy and paste from our other projects if we want or we can type things out so we can say doctype html and then we'll need our HTML element with our "lang" attribute. We'll close that up, our "head" element to hold our metadata, our "body" element to hold our copy for the page. We'll need the meta elements to define it as utf-8. We'll need a title tag for our page, in this case, we're going to say "About" and then we want to keep with the syntax we're using for the other titles so we're going to say "The Portfolio of Jon Arbuckle" and we're going to place that in there. I'm going to save my file and we're going to save it is about.html and saving it will get me this color syntax again so I can make sure that I'm typing things correctly. Now, let's go into our body section. So, remember, we're going to want to have our header content. I can grab all of this from here and say "Edit", "Copy", "Edit", "Paste", the Page Content information, and I'm going to want to end with the footer which I'm also going to copy and paste from this other page to make sure that it's the same. All set. Now, let's add our About content. Going back to our content outline, we've already done our header content and our footer content. We've updated the page title but now, let's also make it the h1 of the page. So, <h1>About. Maybe you want to say "About Jon." Then we're going to want to include an image of Jon, a couple paragraphs describing Jon, and some of his skills and professional services offered within a list. We've got the image of Jon with our img tag. We'll do that with the arbuckle-bio.jpg file, so img/arbuckle-bio.jpg, then we're going to have some paragraphs about Jon. I'm not really sure what this is going to be yet so, for now, I'm just going to use the Lorem Ipsum generator. You'll remember I can do that by just looking for lorem ipsum generator and I'm just going to grab from here which is the Lipsum and they'll say five paragraphs generate, that's a lot, I'm just going to do two paragraphs. Then I'm going to select all this, "Edit", "Copy", come back over to my Sublime text and "Edit", "Paste." That's a lot of text. Let's indent this so it matches the indentation of the rest of our document. Then let's add the paragraph tags around this copy. So, opening p tag and then we're going to close the the p tag. Same down here, close. After that, we're going to have that list of things that Jon offers for his services. Maybe we want to add a heading for this list because if we just start putting the list items down, people may not know what this list is. So, let's add a heading. Right now, we're at an h1 and we haven't had an h2 yet on the page so let's do h2 and then say "Professional Services", and close the h2. Now, in this case, Jon's list items for his list of services are basically not ranked one over the other so we can use an unordered list. So, open our ul and then be sure to close it and then remember, we need our list items. Maybe something like "Drawing", "Illustrations", "Watercolors", "Weddings", for his band when they want to play weddings or maybe he does caricatures there as well. Here are some examples of the professional services that he offers. If you want to add some more list items, you certainly can add as many as you'd like so feel free to do that. "Dance lessons", "Sudoku consulting". Those are Tom's professional services and that's everything on our About page. So, let's save it and see how it looks. Now, we see our About page. So, again, we have our header but now we have our h1 is About Jon. We've got this image of Jon looking happy and welcoming. This placeholder text right now will be for his bio. Something like "Hi, I'm Jon. I've been working in illustration since 1965. I love to do portraits of animals and I like to play my accordion with my polka song", et cetera. All this copy could be going in here. Then we have a heading, our Professional Services is in h2 and that heading is for this unordered list here, a lot of them I've got to type up. But this heading is for here and we have an unordered list with six list items in it. Remember, we can always use our Inspector to see how things are. Let's take a look at that. We can see that this is an image, that we have an unordered list. I can open that up and see each one of these as a list item. Then within sight of that, we have an anchor link. Here's our h1 for About Jon. Moving down, here's our image and it highlights as I hover over it. Here's a paragraph. I can be like, "I wonder what this is." Remember, we can click directly on it, Inspect element, and we can see that these are "Li"s inside of the ul that we wrote. Paragraph, the end of our body and the end of our HTML. Those are some of the ways that you'd want to use the Inspector to see how things are into a page on your website or on other people's websites. We have one more page to go and that's our Contact page. Let's make one new file. "File", "New File." We'd start saving this from the beginning as soon as we open it. We can say contact.html, make sure we're saving it in the proper place. I'm going to use the About page as a model for this so I'm going to "Selection", "Select All". I'm going to copy this and I'm going to paste it. Remember, I want to update the things within Page Content all the way up to footer so I'll put my cursor there and then, as I hold Shift, I'll select down here which will select the text in between those two places, and then I'm just going to click Delete. I also want to update our title tag. Instead of saying "About Jon", I guess we'll say "Contact Jon." Next, we're going to want to put the contact information here. For Jon's Contact page, we're going to have our h1 as his contact, Jon's e-mail address, and a list of links to his social media presence. This is going to be a pretty basic page. We'll have our h1 that says "Contact Jon." Then let's have a little bit of paragraph text to describe what you're doing. Something like, "Jon will love to hear from you." E-mail him at jon@jonarbs.com. Now, for the jon@jonarbs.com, we actually want you to be able to click that to send an e-mail, I'm sure you guys have seen this on the Internet before. How we do that? How do we do other things when we have to click on them? We use an anchor link. Let's put an anchor link around that. So, a href="", this is our link text. Let's close that anchor around that. Open that up to see that. To make an e-mail link instead of linking to a website, what we're going to do is write "mailto:" and then the e-mail address of where you would like the link to go. This will mail to jon@jonarbs.com. If you find that you're getting a lot of spam from someone like this on your site, you may want to look into something like woohoo.com which offers contact forms and also just validation for you to try to prevent spamming. But for now, let's keep it like this. Then we also want to have the links of Jon on social media. So, let's do another heading because we're going to do a list of links and we want people to know what that list is. We are going to say "Elsewhere on the Interwebs", and that will be links to Jon elsewhere on the interwebs. So, we're going to use that unordered list again. We're going to have a list item and we're going to have a link to Jon elsewhere. So, this will go to his Twitter page, twitter.com/jonarbs, and let's put in a closing quote here at jonarbs. Maybe Jon also has a Facebook page, so let's get him a Facebook link, /jonarbs. Maybe we'll say something like Jon's, let's use an entity there, so rsquo for right singles quote, Jon's Facebook Fan page. Close the link and then also remember to close the Li. Then maybe Jon is also on Pinterest because he likes to pin his artwork. So, we'll say pinterest.com/jonarbs, so Jon on Pinterest, and then close that list item. So, there are his links to social media elsewhere on the interwebs. Let's save this and then let's see how our Contact page looks. There it is, short and sweet but exactly what people need on a Contact page. So, we've got our header again, our h1 to contact Jon, a little bit of paragraph text with our inline link pointing to his e-mail address, you'll see "mailto jon@jonarbs.com." If I click on that, you'll see it'll open my mail program. I do not use mail very often on this computer so cancel out of that. Then we've got Elsewhere on the Interwebs which, in this content outline, lives under Contact Jon, and we've got his Twitter, his Facebook, and his Pinterest page. Then we end with our footer. So, there you have it, the HTML for four pages of our portfolio. We're looking pretty good right now but we can actually get from one page to another without opening up the file separately. So, in the next video, we'll talk about how to link the pages together. 23. Link Separate Pages Together: So, now we have all four of our pages but no way to get from one page to another. So, we're going to want to go back into our navigation and add the appropriate value for where those text links should go. So, let's start where we last left off which was with our contact page. At our contact page, in order to get to our work page, we need to be able to find the work.html file. So, our href values here follow the same logic that our image sources did. We can either put in a absolute or relative value. So, down here, when we link to Twitter, that's an absolute path to John Arbs Twitter account on twitter.com. We saw the same thing when we did images. They start with the HTTP and then they do the full address of where the file or link is located. In this case, we're going to want to use relative URLs because we're going to a page within our own site. So, just like we would link to an image, we're going to link to the.html file, in this case, for one to link to the work.html file. Because the contact page is on the same levels work, we don't need to go up a level or into a folder. It's on the same one. So as opposed to going into something like pages/work.html, we're on the same level so we can just go to work.html. Same thing for about.html and contact.html. Let's save this. Now, if we bring our contact page back up, you'll see that work about in contact now are linked and we can tell that from the underlines and the color. So, if we want to go to the work page we can click on "work" if we want to go to the About page up we've got a problem we didn't add in the text for this yet. Let's just hit the "Back" button right now and from the contact page where we did add the right links and we'll click "About" and that brings us to the about page. Of course were already on the contact page. So, that one's all set. So, work about and contact are now in but we're missing one other page. Right? What about the homepage. Sometimes people might want to get back to where they started. We have two options here one, we could add another link in our list of links for home. The other option which you'll see quite often is to make the logo a link to the homepage. So, let's do that instead. We're going to go back to our contact page and we want to essentially make this image a link. Remember sometimes it's easy if we say out loud what it is we're trying to do. So, I want to make the image a link just like any other link where we put text inside of it we can also put an image inside of an anchor tag. So, we're going to surround this image which will be acting as the link for the homepage we're going to surround it with an anchor tag. So, a href equals enclose that now let's close it at the end and now this makes this image link and where do we want this to go? To the homepage and what's our homepage? Index.html. So, right over here we're going to link to that let's save this go back to our browser and now you'll see when I hover over this the cursor changes to this pointer indicating that's a link. So, when I click on this I'm back at the homepage. We haven't updated the homepage yet so you'll see this stays as a cursor because it's not a link yet but if we go back our contact page now has all the correct links. So, what can we do? Well, we can simply copy our whole header section and replace it on all of our pages. So, edit paste. That's an our about page let's save that. Let's go to our work page and do the same thing replace this whole header section. You can see how easy it is to find what we're looking for because of our HTML comments. Save that, go back to our homepage and just to review one more time remember we wrapped an anchor around our image because we can make that a link. We made that a link to index.html and then we added in the correct relative paths for these pages; so, work.html, about.html, and contacts.html. You can see here why the smart naming like Work, About, and Contact for our pages made it really easy to remember the pages that we were linking to without having to review anything in our side panel. So, now all of our pages have links. We actually had a few more, on this homepage, right? See Jon's comments? That's going to go to the work.html page. So, let's save that, and I think we're all set with this now. Up, no, one more. Remember we want to hire Jon and we're going to hire Jon. We're going to send them to the contact page to get in touch. So, let's have this go to contact.html. Now file-save. All right. So, now we're on our contact page, and now look. No matter what page I go to, we have a fully clickable site. Back on the homepage, we can come down here and say see Jon's comics. Yes. You can see when we go to the work page, there Jon's comics. If I went back to the homepage and really wanted to just get in touch with Jon, I could get in touch at the contact page, and I know I can email him or find him on the internet. So, now we have our fully clickable four-page portfolio website. We learned a lot about our html on our pages in this lesson. We completed the rest of our pages by marking up our content based on our content outline. You can see how creating that content outline in the beginning really dictated where we're going. With the help of the sitemap and the content we had a direction, we had a goal. Sometimes it can be really daunting when you're just sort of staring at a new file and going, "I don't know what to put on this page." If you get that feeling, grab a piece of paper, grab a pen, open up some sort of computer program, open up TextEdit, open up Photoshop, open one of many files, and just start typing down information that you know you want to be on your Website. It's a great place to start and then gives you a goal to achieve. When you start looking at your content, you can visit sites like HTML Dog and figure out what sort of elements you'll be wanting to mark your content up as. So, make sure that you've completed your four pages. Add all the content in. If you're using your own content, be sure that you're marking that up as well. Then lastly, add links so it's a fully clickable sites and no one ever gets stuck in a dead end within your Website. We just have one lesson left to go. Let us review some things like troubleshooting and next steps. 24. Troubleshooting: Right now, everything on our site works great and that's awesome. However, I hate to be the bearer of bad news but that's not always going to happen. You're going to run into errors and roadblocks and it's important to cover some ways to fix that. The first way is to grab a buddy, sometimes having separate eyes on a project you've been staring at for a while can really help. Typos in HTML documents can throw up a lot of errors and so sometimes just someone looking at over your shoulder and saying, "Oh look you forgot to close a tag" is really helpful. Sometimes, we don't always have that and as much as I wish my cats would help me troubleshoot, they don't. So, instead we have to look for some other ways to do it, I'm going to go back to one of our documents, our Contact Page and I'm just going to do something here like forget to close this 'a' tag. When you're typing really fast, that happens a lot, so, it's definitely possible that you will run into something like this. I'm going to save this file and then I'm going to preview it again in our browser. When I refresh this page right away, I can see that there's some broken content right here. What I'm going to do first is inspect it and say, "Hey, what is that?". I can drill in and see that right after this image source, is this little image showing up which it's not supposed to. So, for me this identifies that the problem is coming right after our image logo, that allows me to go back and then say, 'image logo' and then I can say, "Oh look at that, I forgot to close it". Another way I could identify that as the problem is through the color syntaxing of our HTML editor, so, as we can see, all of our elements are usually a white open bracket and then a pink tab name. If I come down here, I can see that this 'a' is actually in white, showing me that it's not rendering as the proper tag. That's another way for me to identify that I've got a problem in this general vicinity, and then I can usually see, "Oh, look, I forgot to close it". So, I can do that. We talked about this a little bit before, but sometimes we'll forget to either close a quote, something like that often happens and you can see that all my attributes are green, but I see this one is yellow, so, that will identify that somewhere between here and here something went wrong. When it's green, everything was fine, when it's yellow, somewhere, something went wrong. One way I can figure out what's wrong is just going through and saying, source equals quote, here's my thing, "Oh, look I'm missing a quote." Sometimes, you just can't see it and I find it's best at that the point, just rewrite the whole thing, so, just rewrite it again, source equals, make sure you write your shell form at first so, you've got all your quotes and then put your text back in here for image.logo.png. Just got to undo that to set it back, and let's fix the quote. If that's not working, we also have the W3 validator, the W3 validator is awesome. We put in our code and it goes and checks for errors. So, let's delete that and give that an error, what I'm going to do is save this. I'm going to select all and then you can bookmark this page, but if you forget it just look up, W3 validator. I'm going to click on that first one, the W3C Markup Validation and then you can validate by URI, that means that you can put in a web address here. You can upload your file, or we're just going to do validate by direct input. In here, I'm going to paste all of my code and then I'm going to click 'check'. I get this red at the top which tells me that something is wrong and it says there are six errors found. If you scroll down the page a little bit, It's going to give you your errors. So, errors, output six errors and says, "Line 13, Column 52: No space between attributes And I say, "Ha! What's that?" I look at this, and maybe that's not exactly making sense to me, but I know, now that I'm looking for line 13 so, if I go back to my text editor. Sure enough line 13 I've now identified where the problem is which makes it easier to figure out that I'm missing that quote. So, once I realized I have that fixed, I can save my document again, I'm going to Control-A or Command-A to select all, Command-C, Control-C and now I want to rerun this. So, what I can do is, select all this, paste my new code in and then there's this revalidate over here and hey, now everything's good. You'll notice that it actually said six errors in the last one, that's because once you have one error it can make a series of other errors. So, it's best to start at the first one, figure that one out and see if that fixes it all. There's two warnings here, you can ignore warnings for now, that has to do with using the HTML5 doc type that we're using. The validators are really helpful way to see any problems in your code. If things are ever getting really bad, sometimes what I like to do is make a new file. So, here's a new file and I'll select everything, move it in there and then I'll go back to my old file, this is going to seem very tedious but what I do is I basically just start going one line at a time. So, I save this, I come back to my browser and I say, "Okay, looking good." Then I put in the next line and I say, "Okay, still looking good." So you just basically go until you can specifically identify where the problem is, that's sort of a last resort one but sometimes you're going to need it. The good news is, is that the longer and longer you write HTML, the easier it will be for you to identify the common issues or common problems that you might run into, things like typos, things like unquoted attributes, things like forgetting to close a tag. They happen to all of us and they kind of happen quite a lot. Luckily we have these tools and I promise you the more and more that you write this, the easier it will become. I highly recommend the W3C to look up more things if you're ever looking for information like the W3 validator and also a very good trusted resource for finding information about HTML. Somehow it can be a little dry and boring, but it's a really good resource to have so be sure to bookmark that. I'm going to set our contact page back to what it was, by copying all of this and saving. So, now we have a website but if you notice the only way you see this website is on your own computer. But part of the glare of the web is being able to save our pages with other people, in order to share, we're going to need to upload our content and we'll cover that in the next video. 25. Uploading Content to a Web Server: So, in order to get your pages up onto the web, you're going to need web hosting. There are a lot of web hosting services out there. Basically, what this does, is it's a computer that holds all your files, and then serve it to the Internet. That has been too much time explaining this. If you want to go in depth, you can simply do a search for web hosting to find out a little bit more. But, I do want you to know the necessary parts of what you'll need. So, you'll need a web hosting service. Some are more expensive than others, a lot of that is based on how many visitors you have to your site. You can check out reviews of different hosting too, that's a really good one to check out before you decide which one you're going to use. So, just do a search for reviews. We can see what Techcrunch has to say, and this one is reviewing ReviewSignal, which apparently tells us a little bit about the comparison of web hosting, so that's one option. Once you decide which hosting you want, you're going to sign up for an account, and then you're also going to need a domain name. So, the domain name is something like techcrunch.com is the domain name, jennlukas.com is the domain name. You're going to decide what domain name you want. You're also going to make sure it's available. Domize.com is a site that you can use, so if I wanted to register jonarbs. It'll look it up and say jonarbs blue, so jonarbs is available. Then, you need to register your domain name. You also have options of where you can register your domain name. So, basically, you want to look up a URL registration. So, you can look up URL registration and find a place. There are a lot of different features, so make sure you do your research before deciding on one. Once you have a URL and once you have web hosting, the next thing you want to do is get your files from your computer up to your web host. You do that through an FTP program or file transfer protocol. So, I use a program called Transmit and Transmit is on the Mac, but there's certainly a lot of FTP programs out there too. You guys noticing a pattern, there's a lot of options that you have. Essentially, what you're going to do is you're going to set up your FTP information, and you'll get that from your web hosting when you sign that up. So, you'll put up your server, your username, your password. Then, once you connect to your server, you'll be able to drag your site folder from your desktop, or from your computer wherever you've saved it, onto your FTP information. Once that's all up, if someone goes to your URL that you've registered like jonarbs.com, it will look for an index.html file on your web host. When it finds it, it will then display it to the users on your page. A lot of those web hosting and domain name registration offer a lot of customer support. I also recommend looking into that because if you ever run into issues, it's great to have a phone number you can call or an email or a live chat. We will ask someone how to help and lots of times they're really willing to do so. So, that's how you get your content from your computer to your site. Lastly, let's talk a little bit about next steps after that. 26. Next Steps: So now we have a four-page portfolio site and all of the HTML is semantic. We have validated it. We've made sure that everything's good, and that starts as our foundation for building a complete website. So right now we have all the content on the page and that's great. No matter what size screen you have, it will sort of adjust to your screen, as long as the images don't overflow, and it's really easy for people to read what's going on here. We have to learn the bland stuff in order to get to the more pretty stuff though. So after you have your HTML, you're going to want to apply styles. You're going to want colors, text sizes background images. You're probably going to add width to things. It's going to be really awesome. I promise. So the next step is to learn CSS or Cascading Style Sheets. Cascading Style Sheets are the presentation layer of your website. A really good example of how CSS can affect your website is on the website CSS Zen Garden. CSS Zen Garden was based off the concept that there's one HTML file, and everyone grabs that HTML file but then submitted different CSS files to the site. So if we check out the view all designs, so here's a website and it's at the CSS Zen Garden, and you can see that it's got content and, as you scroll, the background stays fixed. It's pretty cool. Let's check out over here. This looks a lot different, right? So here's another example. Cool. Here's another website, and here's one more. All three of these look a lot different, right? Here's what's awesome. If we view the source of all of these, they're all the same minus one little JavaScript change here, which has to do with loading up the fonts. The idea of the CSS Zen Garden is that all of the HTML on the page is the same throughout every site. So you'll see here, we've got littering a dark and dreary roa, littering the dark and dreary road. All of the HTML for these pages are the same. But you can see with CSS, you can make your website look however you want. But with all these pages have in common is they have a strong semantic foundation with the HTML that was written. Well, that wraps up our intro to HTML. I hope you had a lot of fun. I certainly did. I think HTML is a lot of fun, and I hope that you keep with it. Join me next time in my follow-up intro to CSS class, and let me know about what you're making. Can't wait to see you on the Internet.