Webmaking 101: Build your own Website with HTML, CSS, Javascript and WordPress

1. Trailer: Hello. My name is Brenton Strain, and I'm the instructor for this course. What? Making one? 01 What? Making wanna One will take you from zero to having a website that you can share with your friends. It's it is a technical course, but it's not a course that focuses on, like the code and the programming languages. You will learn that. But I'm sort of like the history teacher that doesn't mind if you don't memorize the dates of places, the names and dates. I just want you to understand the concepts, so I'll be teaching you technical concepts of everything you need to know to get your website up and running, assuming that you are just taking this course with no website at all. This to begin with, so you'll learn things like how to get a domain, how to get hosting, how to connect your server, how to upload. You'll learn a little H two metal and CSS. You'll learn some back end programming like PHP. Um, and then, uh, the last lesson. You'll even learn contact management system. That kind of like does a lot of the code for you, and you can just run the website through this content management system will learn WordPress Um, and you'll be up and ready to go at the end of this course and sharing your links. 2. Understanding the Internet 1: This is what's called a hard disk or are drive. It literally is a disc that is hard to see. It's got a little head here that skins across the disk and reads it. And, uh, the disc Spence. And on here are ones and zeros that form vigil data or files. So if I want to your transfer a file from this disk to this hard drive, this is another hard drive. It's my friends, hard driving. I'm not gonna didn't take this one apart cause is not mine, and I want to break it. But the simplest way for me to do that here would be to plug both of these hard drives into my computer. And then all I have to do is use the operating system, open up both drives and dragon drop to transfer the file from one hard drive to the other. This is called a transfer. What if my friends hard drive isn't here in my house, but he's actually somewhere else? What if he's in Atlanta, Georgia? It's a little bit more complicated for me to transfer the file from one hard drive to the other, right? Well, maybe not so much because a download is actually a type of transfer. It's a way of transferring a file from one hard drive to another. So obviously that would be making use of the Internet to transfer hard drive. But in order to understand the Internet, it's worth taking a little bit of time to think about how we would transfer file to this hard drive without the Internet. So without the Internet, probably the most likely thing would be that I would have to physically move this hard drive to Atlanta, and then my friend could plug them into his computer and transfer the files so I could just drive there. Or I could use the post office and I bring up the Post office because the mail system is actually roughly analogous to how the Internet works. So understanding, uh, the mail system a little bit. It will help with an understanding of the Internet to some degree. So, you know, I don't know a lot about how the mail system works, actually, but I do know, for example, that when I package that this hard drive up and put it and put an address on it, I start with the most general I start with like United States. If it's going out of the United States, and I put the state that I put the city that put the street, name that with street number. Then I put the person's name and then you can modify it from there with even more specific things so you could do an apartment number or you can do care of. And I also know that the postman doesn't or Post Woman does not come to my door and pick up my package and then drive straight to Atlanta and drop it up. No, there's actually sort of like a network of post offices that come into play. So first it goes to my local post office and they look at the address. They read it from the bottom up and they decide, OK, does this need to go to another post office that's higher up? Or does it Do we have jurisdiction over this address and can we send it out from where we are? So because it's going to Atlanta, for example, it would go up to another regional more broad thing. Maybe there's a national most office somewhere. We'll go over to like an East coaster or a Southern post office. And a. Some point, it'll get to a post office that has jurisdiction of that address, and then it will set start sending it downstream more specifically. And it will go down to maybe in Atlanta post office and, you know, Michael a particular route. And then from there it will get delivered to the street and to the address, and then the person will open it up and they look at Thea the name, and if it's their name, then they'll actually, uh, taking a parting and get the package. 3. Understanding the Internet 2: Let's bring this back to our scenario and how it all ties into theater. Mail system is a network of connected post offices, and the Internet is an inter connected network of computers. Um, now at its most basic network is just two computers that are connected. You could just get any infinite cable and connects to computers, and you would have a very low level network. Ah, more in useful network would be where you've got multiple computers connected to each other . And now, obviously, you don't want to have one court per computer in the network and wires connecting every single computer, every other computer, because that would be a huge camel mess. It's a lot simpler to have one computer be the dedicated hub of the network and all the computers connected at one computer, the hub and then that one computer can route information from any of the computers to any other computers. It just goes right through that hub. Now hubs are you can you can still sit set these up today, and a lot of people have set them up in the past. Uh, but what's a little bit easier now is to have a dedicated computer that is built for the specific purpose of being one of these hubs. On that way, you don't have to set it up. You don't have to worry about somebody turning your hub off or, you know, doing a software update or something. Your whole network goes down while the hub is down. Now most of you probably have what's called a router. This is a rather it's wireless writer, and it also has some Ethernet floods in the back, so I can connect a bunch through the WiFi, and then I can connect up to four computers through the Ethernet plugs. And this is actually a small computer that look like a computer. But inside there's a mother board. There's memory, there's storage. And, um, this lives to serve all it does. Is it rats network traffic from one computer to another. That's why we call it a router. You could also call it a server if you wanted to cause this kind of what it is. And so, in our scenario, say I I want my friend to be able to access this file, and I tell him, Go to Brenton string dot com slash filed at txt. That's that's my Web address. So that's, you know, it's sort of like in the mail system you have to have an address, and it has a syntax to it that you can't just right in any order. You have to do it in a certain order. You have to put the domain first. You have to put dot com, you have to put slashes and all that. But, um, you know, So he's got his Ratter, and he puts in that request, and the router will look at that and say, I don't have jurisdiction over that address because it's not in his local network and Atlanta, right? So what is writer will do is send it upstream to another server, a computer that is purpose built just to handle this sort of network traffic on beer called servers. And what that computer will do is then check its database to see, does it? No, uh, doesn't have jurisdiction over. And that thing I mean, it's not looking at the files at this point. It's just going to start looking at their domain, Really, because that's the lowest level thing that's like the equivalent of like the country or the ZIP code or something. And if it doesn't have jurisdiction, then it will send that request on up to an even broader, more general server. And that server will look at the domain name and will check its database to see if it knows so. It's interesting. Basically, all these computers do is they look at the domain name and they figure out if they have jurisdiction and which computer doesn't jurisdiction. So we call these servers name servers, actually, because all they're doing is looking at the domain names and fearing out where that domain name is in the world, like, literally like where it actually is. And so eventually a name server will say, I know that domain. I know where it is, and then it will send you to the actual server so sent, so it will send the request over to my computer. I've got laptop that has some software installed that allows it Teoh interface with the servers, and this way it's called a server software. You. If you have a Mac, it's installed by default. Actually, you just have to configure, and you can stall it on any computer. This service software. So I got this server software and it gets that request and that it sends the file back over the Internet. So there we go. Job done, right? Well, it's a little bit more complicated than that, because I don't want to have to have my laptop always on and, uh, never have is the same sort of issue with the hub, right? If my laptop gets turned off the five to reboot it, then my website goes down. So what I want to do is have a special built, purpose built computer that is a server, not just not a general purpose laptop, but it lives to serve websites. Right? So it's a server, and it has to have really amazingly good Internet connection really fast. It has to be really high memory so that it can, uh, hold all of the stuff and have multiple connections. Sometimes depending on how big you upset is. Millions of connections at the same time has happened really fast, hard drive, so you can get that information off of the hard drive on dso really building setting up your own server. You know, you could do it, but to have a good server is gonna cost a lot of money on. And that's why most people most organizations even don't bother was setting up their own server. What they do is they pay another organization who specializes in setting up service to do it for them. Um, and this is called a Web host. So you know the term host applies here. Ah, hostess is somebody that invites you to use their space like the host of a party invites you to use their home. You know, if the city hosts the Winter Olympics Olympics there, inviting Spectators and athletes to come and be in their city and a Web host invites your website to come live on their server. So this is much simpler than setting up your own server, obviously, and as part of this course, shot Leaf is providing six months of free Web posting. That means that you'll have a place for your website to exist on the Internet. That's article work's been done for you, and instead of having to pay for usually you pay like a yearly or a monthly fee. You got six months for free to, like go through this course. That's a basic introduction to Internet infrastructure. The only real things that you need to take away from this are that a You need a Web address . Also known is a domain name and B. You need a Web server also known as Web Posting, so go ahead and watch the next video to get help doing that. 4. Get Your Free Domain and Web Hosting: we're gonna be doing all of our experiments and in in lecture projects and all of that, actually on a live website, your domain dot com and on the actual shot leaf Web hosting six months of free Web posting that you get for this course. So it's like a learning playground that you'll have to, uh, work in and on. And so you need to set that up. So first things first, you need to get a domain domains cost money. They are registered on a year, year to year basis by, um, what are called registrars and they're set up by I. Can I see a and is this governing body of the Internet that chooses who could be a registrar, and they set the prices Domain names normally cost about 12 bucks a year, depending on if you're getting a dot com and dot org's or what not. Some registrars charged more, so they make a profit. Some registrars charge less as a promotion. Setting up your domain and hosting with shot leaf is super easy at all is through this one page you goto shot leaf dot com slash Sign up and you'll get to this page and you can get your free Web hosting and you're free domain right here all in one place, Um, all at one time. So to get the freedom and you have to choose one of these domains, it's noted down here. T K, g A. CFP and ML are the ones that are available right now, and they'll be down here at the bottom. So this is the top level domain dot com is obviously the most famous and well known one, so you'll pick a domain and just type it in here and then check the availability to see if it's available. If you're willing to pay for something like a dot com, you're gonna also have to work a little bit harder to pick a find a domain that's, Ah, not already taken. If you want to buy a domain or if you already have a demand that you want to transfer to the shot, leave name servers to the shot leave posting. I'll talk about that at the end of the video, but for now we'll just kind of talk really quickly about how toe go through, using the free domain and the free hosting so you have to keep checking until you find something that's available once you find something available. But I'll tell you so I will tell you it's free if you picked a free one and continue. So the main thing you need to do is check this box on. Make sure this is month to month right now because, uh, you're only getting six months free through Web posting. At the end of the six months, you'll be converted to ah paid customer or your account will be deleted. Depending on what you want to do. I'll help you transfer for to another host if you found another host that you prefer as well. So what? Posting domain all in one place. You'll just set up your promo code. You can see that I've already applied this promo code A B C D E F G is fake. You'll put in the promo code that you get from the videos. And then it's just a simple process of checking out and filling out the registration information. And then, if you do this where your domain and you're hosting or both from shot leaf, then you're set up and good to go it's all really simple. Um, now, if you want to, um, if you want to use a more unique domain that's not one of the free ones. There are a couple options, so obviously you could just buy from shot leaf. Another trick is you can do a search for domain name and oftentimes other registrars will have deals and promotions going on. So right now looks like one and one. GoDaddy have domains for a dollar for the first year. So what this means is you get that domain registered for the first year for a dollar. After that, you have to pay their full, uh, price for that domain. Whatever it is now, you can transfer domain from one register ride to another. Sometimes there are transfer fees, sometimes not transfer. If you might be about the price of registering and domain for a year, which is usually like, you know, around $12.10 to $12. So this is a good way to get a domain if you want, like a top level like dot com or something. Um, and another thing to know is, don't let your domains expire at the end of the year. if you let your demand expire, what happens is spammers purchase them within seconds of them expiring. And it can be impossible to get your domain back now, in terms of choosing a good domain name, you want some limits? Short, Easy. Remember, Memorable type A ble. Um, you want to kind of find a balance between all that And another thing you can do is you can do domain hacking domain hacking is if you've heard of delicious Delle Donne ASIO i ceo dot us. That's ah, an interesting looking name. This is that delicious And no, when I type it, it actually just goes to delicious dot com. But what they're doing there is they've chosen the dot us top level domain. There are actual domain is the CEO and then there Ah, there sub domain is Dell and you can have as many sub domains as you want. You can set this up So really, what they're doing is they have issued us and then they've taken some creative liberties to make a spell. Delicious. So that's called domain hacking. It's not actual hacking is just hacking just means playing with it. So goto deal at May I don and our domain er and note again may switch to demeanor dot com because it's actually hard to type these domain hacks. But, um, this will help you pick something. So say you want to dio cool banana, um, gives you all of the options, and then it gives you like tricks. Like there's the dot n a, um, top level domain that you can use, and it's aware of all the different top level domains. Um, so there's ah dot name. There's a dot Me, um, there's you could do dot am slash e or use a directory. So this is, ah, useful one because it tells you which domains are already available. So if it's got this green circle, then that domain is actually available and you can register it. Um, these things you're probably gonna have to go register somewhere else because Shut Leaf does not offer a ton of top level domains. Another one that you can use is called to mean Hack got Emmy, and this one isn't connected. But, um, it'll tell you kind of more quickly what kind of like options there are. It's just available. Eso eat dot es is the Spain top level domain so you can see it's it's pretty quick and picking up different options. And just to note, if you do end up with a weird top level domains like DOT N A, which is Nambia, you may have to it go to the Nambia registrar, and they could charge you like $100 a year or something ridiculous. So keep that in mind that the really bizarre names are sometimes controlled by the country that owns that top level domain, and they can kind of do whatever they want. So that's a downside. Um, but, um, if you do pick your own domain that's not available through Shot Lee for you find a good deal. Um, then you'll just go here, put your domain, and so shot leaf is able to hook up your hosting to your domain, and then you'll have to go to your registrar, whoever it is, if it's go daddy or named cheap or some you know, Nambia registrar, you'll have to log into their interface and find the option. Teoh set the name servers for that domain and put in Ennis one dot shot leave dot com and has to date shot leave dot com as the name servers. So you want to do that as soon as possible because it can take a while for name servers to propagate to the hosting across the Internet, So you'll you'll set up. You'll sign up here for the hosting. Tell us what domain it is and then on your registrar. If it's not, show if you have to manually set the name servers and then give it up to two days for it to propagate on Internet. When it's it's propagated. When you type in your domain, you should see the Shelby message telling you that you're ready to go. 5. Interoperability: So let's start with interoperability. Say I have to programs note pad and labour Office. It's kind of like Microsoft Word. Now I'm gonna create and interact in non interoperable document text document. Now we're gonna go up, and we're gonna save it as just whatever name is there. But the type is word, Doc. So labour offices operable with Microsoft Word. I could save it in all these four months. I'm gonna choose dot doc and go ahead and save and you see it's popped up here. Now we're gonna put it into note pad, which cannot open word files. This is non interoperability. If we want them to enter operate, we have to save it in a file type that both can handle. No pad on. Lee does plain text. So if I want this to work in note pad, let's delete the file and start over. Now, this time, when we save it, we're gonna save it in a format that is operable with with note pad because no, Pat only does text save. Now here's the file. Drag it in. Now it works. And used to be that if you had a file that you're sending from a Mac to a PC, or vice versa. It wasn't guaranteed that they would have the right software installed to make it work, so the solution they came up with for the Internet when they're designing it was HTML. It's a common document format that everybody could agree on. They would make their computer system able to read this document format. HTML stands for hypertext markup language. And then they also agreed on something called http http is the way for the computers to all talk to each other? They have to speak the same language. If I'm here in in Pasadena and I'm talking to a computer in New York and I'm sending this over the airwaves across the Internet and they don't know how to talk to each other, I'm not going to get the file I need. So they have to speak the same language. That language that they created is http hypertext transfer protocol. So you notice html http. These two principal things that they created to make the Internet work that are keys of interoperability. They both have H t hypertext at the beginning, so ones the transfer protocol ones, the markup language or the or the document format, but they're both hypertext. What is hypertext? Well, that's the second key thing in the Internet. 6. Hyperlinks: hypertext means beyond text. It's more than just regular text that has hyperlinks and other interactivity. There used to be old terminals where you could actually tap on the monitor to follow a hyper link, and it would take you to other parts of the document or to other documents. Ah, hyperlink is something that connects one part of the Internet to another. So the Internet you can think of as a big web with all these different little anchor points . And each anchor point has links hyperlinks, hypertext that go out to other part little anchors, little parts of the Internet. So you've got a point here. Point here, point here. Here, here, here, here, here. And these points are all connected to each other. And what makes the Internet great is that not only is this one point connected all these other points, but you've got other points within here that are all connected to each other, and that's so starts to look like a Web. But in reality, it actually looks more like a a big neural network. It's actually just kind of chaotic, and the reason is that no one point is more important than any other point, every anchor point in the Web is equally able to access any other part of the Web. So you have hyperlinks that air connecting all of their the connecting threads and this Web or this net, and they're connected anywhere. Well, this actually wasn't very intuitive. It was an invention of Tim Berners Lee that was, well thought out to make sure the Internet would be interoperable. And that would facilitate the hyper linking of all these, uh, of all these different anchors. So the old way of doing it might be something like Connect to your server. That's your reaching that's in another part of the world. And you know, you type in the number of whatever, then you have to log in. Then you have to navigate through that computers directory structure. Then you have to find the file and request it, and then it gets sent over the Internet to you, and then you can open it. Hopefully, it's in a format that your computer can read. So nowadays, with you or else it's simplified. So you put in a link for a U L. And it's just like this. There's the domain name that tells you which computer to start talking to. And then you got any folder or directory structure and you've got the file name right here , and it's it's all just group right there, and it does it all for you. 7. Plaintext vs. Rich Text: So if we're gonna make a Web page, we can't just open up Microsoft Word and write something in it and save it and expect it to work on the Web because it has to be interoperable. So if you've ever tried actually to do that, um, you don't realize it. But Microsoft Word uses ah markup language. It has its own formatting. It's not hypertext markup language. It's Microsoft, whatever my markup language. So if you try and write in Microsoft Word, for example, with a new markup language, then you've got the market bling of joyriding being encoded into Microsoft's markup language. And then when you serve it to like a browser or something across the Internet, it's gonna first of all, it'll. Http will tell it this is a Microsoft word document, and so the browser probably won't even try to read it. But if it does, it's gonna be really confused because it doesn't no word document. It only knows HTML. So what we need to do is make sure that even if we write good html, it can't be encoded into another. Language has to be encoded as we type it, so you have to find what's called a plain text editor 8. Advanced Plaintext Editor - Brackets: so if If you're in Windows this is easy. Just open note pad. If you can't find it, hit Windows key are type Note. Pad hit. Enter. If you're in Mac, you can open text at it now. In Mac, it's a little bit some. It's a little bit more difficult because you have to make sure that you're saving as plain text and not rich text. This is an interruption from the future. I am now suggesting single smart text editor had since sex highlighting, and it's called brackets. So this is gonna be a lot better than what I had previously suggested. And that's why I'm coming back and revising this course. So if you're in Windows or Mac, you should be able. Teoh, download this goto brackets the i O and come to this website and put down the button. And this is This is what it looked like in OS X. Once it's downloaded, double click it to open. I got through this process and then, like always with Max stuff, you drag it into your Applications folder on Windows. The process is very similar. Do brackets, not my own, and you click down my button wait for it to download, and you'll go ahead and double click on it. Click, run and let installment fault location cool. Want to get it installed? Go ahead and open it up. It looks like this on both Windows and Mac, when the great things about brackets is that, as you use it, it it will do some really advanced features. So I definitely recommend this for you over any other tech center. At this point, it's designed for Web developers in the bottom. Right here, you can select what type of code using. So if you say that within eight email extension, then it will be. You know, if you're doing CSS for plain text or something else, it'll automatically detect that. And if I type HTML tags in here, it does some auto complete for me and some other cool things like that. All your working fouls air here on the left. The full do you have open will be here, and then you can install plug ins and other things using this button. So this is a really cool a tool that is really powerful. And yet it's simple on pretty easy to understand when you're just getting started. So definitely install brackets before you continue. This would be a really useful tool for you, but the important thing is that you're able to compose a document and save it in plain text format. So it'll have the extension dot txt by default or you or what we'll do is why should give it HTML. So get that'll set up positive, positive. Don't get that us up and then come back once you're able to verify that you're saving in plain text. 9. Loading Plaintext in a Browser: Okay, You've got your text editor installed, and you figured out how to make it work and plain text mode. So here's what I want you to do. Um, right. Hello. World in your document. Um, and you could expand on this later. Don't try and enter any code right now. It just right. Plain text, right. Hello, world. And how do you save as if you've already saved it? Save it in a different place. So save it as, um your file and pick it. Found name. This is important. You have to be aware of where you're saving it because you have to be ableto move this file around later. So I recommend saving it directly on your desktop or creating. Actually even better create a folder in your desktop called What? Making 101 unit one and save it into that folder. Give it a found annual Remember and give you Give it the extension dot html. Now make sure that it's not a pending hidden file name. Extensions onto it like that. Txt at the end. Since you're saving in plain text, once you get this figured out, you're gonna you're gonna save this. It'll be saved is your file. Name the HTML There won't be any hidden file. Extensions won't be saved in any other form of elegance with plain text died html. Okay, Now keep, uh, keep in mind where you put it. Open your opener, browser, Any browser, safari, chrome, Firefox, Internet explorer. And either use the open dialogue like file open control. Whatever your shortcut is for your operating system or if you have the folder open, you can just drag, click drag the file that you just created. I told you, remember where it waas into your browser just into an empty new page and the browser should , if you did it right, open just the plain text file. You've got this plan text file. It's now open displaying exactly what you wrote. It shouldn't look any different unless you wrote some crazy code. It should be just simple plane text. And if you look in the browser address bar, you should see your file name 0.80 mil. And then before that, in the URL, you've got all of the location information and it's you'll notice it's it starts with something like file or it doesn't start with like the normal stuff. It doesn't look like a normal Web you world. There's no domain, for example, is a local file. Um, so but we'll do something with that in a minute. So I hope you didn't clothes. Don't close your tech center. As you do this, you can save it and keep it open. So here's A Here's the trick that you that you should always do when you're composing and editing is have one window that is your results window and one window that is your editing window. So if you've got your plain text editor open still, put that in half of your screen and put your browser and the other half of the screen. You can look at him both at the same time. And if you haven't changed things, now go to your plain text editor and make a change. Type something new, and then do you save, not say that Save it in the same place because you've already got it open. Don't close anything now Tab over or move over to the browser and find the refresh button. Ah, shortcut in Windows is five. It's a little like recycling looking icon hit refresh and you'll see that the page updates with what you've just typed in your text center. So this is the essence of a Web page. You actually have just created a Web page. Um, it's not quite a Web page because it's not on the Internet. If I If you wanted to share this with me, you couldn't just give me a U R L. And then I could see it. You'd have to, like, send me a whole copy of the file. So that's not quite the Internet, but it is a Web page. It's a page that's being opened by the browser, and it's plain text we're gonna do with Cold later. But it's it's, um, it's being opened by the browser in HTML format, actually, So do this. Do something like hit return a couple of times, try to make a list and then refresh it and see what happens. You notice that it's not quite what you expect. There's no formatting that's allowed or try to put six spaces between a word eso. Something interesting is going on. We need to format it ourselves. We're gonna do that by hand, but for now, what's important to know is you just created a Web page 10. Frontend vs. Backend: we think of it as we're looking up connecting up to the server, which is in the Internet, which is the Internet. You might even think of it as in the cloud somewhere in the sky. And the server is just always there, waiting to serve. So if the server is the Internet and we're down here on Earth, we are the client. The client is the that which receives the services of the server. So the client is the front side of the equation. The server is the backside or the Internet side. Now that the client is you with your computer or anybody else who uses their computer to connect to the same server. That's the client side. And they'll be using things like browsers rather than server software. And we call the client side front side kind of because it's it's the part that we see and we call the server side back side because the part we don't see it's also how we think of it is in the sky. The metaphors air a little bit confusing, but front side is what's right in front of you backside or back end is what's on the Internet usually so stuff happens in the server up in the cloud up in the sky. That's back end stuff that happens right on your computer, on your hard drive in your computer's memory and ram and on your monitor that's front end. So when a client connects to a server, they communicate with http, the client asks the server for an HTML file, and the server sends it down the line to the client We call this downloading. Uploading would be with the reverse if the client sent to file up to the server, which most people don't do unless you are a Web developer and you guys are all Web developers. As of the end of this lesson, we're gonna learn how to upload. 11. FTP Upload: you've got a webpage. How are you going to get it on the web? We need, ah, another protocol not for hypertext but to transfer files up into the cloud to upload files . This is called file transfer Protocol. It's very similar to http in a lot of ways in that it's interoperable facilities, communication between devices between software and computers. But its purpose, as it says, is to transfer a file up to the Internet to a server or to download Ah, good FTP client. His cyber duck. Go to cyber duck dot c h. Be careful. You don't type cyber duck dot com. It's cyber duck dot ch. Scroll over to the right and you'll see the download lengths. This works for Windows as well. Go ahead and click on the ZIP file and wait for it to download. Now, this is a little interesting. The download is a zip file, and you can watch it download in your, uh, downloads folder right here. And if you click on it here or double click on it in your downloads folder, it will unzip it first. Now it doesn't automatically give you the little ah little utility to drag it into applications. So you have to find your applications folder and drag it from here into applications. I have a short cut right here. I've dropped it. Now, the first time that you open it, there may be some dependencies that get installed. I'm gonna go ahead and drag this onto my desktop, or you might want to drag it onto your doc to make a short cut. There also be a couple of bookmarks right here at the beginning to give you some examples. But these are just confusing, and you're not going to use them anyway, so go ahead and delete them. Now you have cyber duck installed. This will be similar on PC. There are a couple of ways to make a connection. Initially, you could do a quick connect up here. You can do open connection here, but I suggest the very first thing you do is create a bookmark. It will be very similar to doing open connection using this. So go ahead and click this little button down in the bottom. Left the plus to add a connection. See, I just did that and it created it. Gonna delete that and start over gets a click this little plus and here you've got a new connection bookmark. So go ahead and give it a nickname. I'm gonna call this Lauren and Brenton because the website that I'm doing for this course is Lauren Brenton dot com. Now your server, that's the name of your domain. Now there's a trick here you can actually, since your hosted on shout Leaf servers, you could do shout leaf dot com puts shot Leif dot com, but it'll be more fun and easy to remember if you type in your name your domain name, so type in your domain name. Here mine is Lauren and Brenton dot com. So note that I didn't put www in the front and I especially didn't put http in the front. This isn't hypertext transfer protocol. It's FTP. If you really wanted to you could you see the URL appear, says the FTP up there. You could do that, but just leave it like this. Just the domain and and leave the port at 21 then put the user name. So how do you know your user name? Go to the email information that was given to you so Here's the information I got sent myself an email. So already I put in the domain. Now use the name here, it iss l and B. So I'm gonna pace that end paste. Now, I've hope expanded this more options here because it's gonna make things a lot simpler for you if you start with a default path of www and I'll show you why in a second. But go ahead and put the default path of www. The rest of it. You can kind of leave alone. Okay, so go ahead now and close that the password you'll you'll get in a minute. So now I've got this year. Now you can open the book mark, and it will ask you for the password. So I'm gonna copy the password and paste it in, and I'm gonna leave it to add to the key chain. Um, actually, it won't let me do that, But if you're is a set up, you may be able to have this be remembered. Don't do anonymous log in. So use the name is this password I just pasted in. From this you'll note that the name server on the contact email don't come into play for this. So I'm not to say, Don't show this again and continue because I don't need this to be a secured FTP connection . All right, it's connected. So remember I told you to type in www for the starting path. That's because if you hadn't done that, you actually would have started in the root directory so you can navigate within your directories, either using this or with this. So I just went up to my root directory now by clicking this button. And so this is what you would have been presented with if you hadn't typed in that little www. So you've gone into this. You've loaded into this www folder, which is just like the folder where all the public Web stuff is. It's actually an alias or shortcut to public underscore. HTML. It's the same thing you noticed. They both have this c g. I been in there. If I open public HTML, I go to the same place is if I open Www. These other ones are kind of stuff that you don't need to worry about. They take care of themselves for the most part, so I'm gonna go back into actually, I'm gonna go into Www. And the siege I been is something that is kind of a throwback. It's a little archaic. We don't need it, so I'm gonna delete it. So that's how you delete a file? An FTP. Now, how do you upload? Let's move this out of the way and open that hello dot html file that I've got here. So this is the file I want to upload. It's in this Web making folder on my desktop, and it's pretty simple. This is the location I'm dragging it into, which is gonna correlate to Lauren and Brenton dot com slash And then whatever I put in here will be directly there. This is basically the root of the domain, so that's a little confusing. This is when I go up here. This is the route in the back end. But this is really the root Www. So to put this in there and now it's gonna upload. It's showing me the whole information that it took to upload, and it says resume, stop all these different controls I have. And then when it's done, it tells me, upload complete. And now I can see that the file is there. So this is on my local hard drive in this folder here. Hello dot html. Now this is hell oda html on my website my Lauren and Brenton dot com website. So let's actually go open a browser and check and see if we confined hello dot html. Okay, here's crumb. I'm gonna go ahead and type in my domain name Lauren and Brenton dot com. So if I just go here without typing in that hello dot html, it'll take you to an index. This one always be visible. But right now it iss so I could just click on that to get to my hollowed a html. But I'm gonna continue in type the entire thing. Lauren Brenton dot com forward slash hello dot html Hit. Enter and there's my document. This right here is this document. Now you want to see something interesting here it is on the Internet. Let's open another tab and let's open in Miss Tab, the same file. But from my hard drive me to drag it in. So you see the path here? This is the path to my hard drive on my mac, your file users Brenton desktop Web, making one a one hello to HTML. It's the same file as the one here on the Internet. A miss tab. Lauren Brenton dot com slash Vologda html So they're different. You are else, but the same file is located now in two places. Where actually would be more proper to say this is a copy of this file? So here's something It's important, understand? If I edit this file on my hard drive, it will not update on the Internet until I uploaded again. So let's go ahead and do that open with text at it. Now, here's my file. I put a little HTM Oh, but I'm gonna say hello. This is a local change and save. So I've just made a change to this file. Now, if I go to my browser after having all I have to do to save this, go to my browser and go to the local tab and reload and you see hello. This is a local change now about doing anything else. Lauren Brenton dot com Refresh. No change made. Why? Because I only changed it on my hard drive. If I want to see the change here on the Internet. I'm gonna have to drag this file to replace that file on the Internet through FTP again was gonna upload again. It's gonna ask me, Do you want to overwrite? And I click? Yes, I do want to overwrite. And now it's uploaded again and it's made another copy. That's overridden the old copy. So now this one is updated. So let's go back to the window and refresh. Lauren Brenton dot com hello dot html And now the local change has appeared on mine. 12. Teaching Browsers to Understand: the world around us is full of content, and when we look at it, our brains are able to process it into meaningful things were able to make sense of a pot. When we see it, our brain gives it the meaning pot. When we look at a document and read a couple of words were able to read the heading and make sense of it and give it the meaning. That's the heading. Unfortunately, computers don't have this innate ability that we have. So we have to use a special language that we call HTML to give meaning to the content that browsers and computers work with. So what? A computer looks at a webpage and loads it. It needs to know that the header is ah, header. It needs to know that a link is a link so that when you click on it, it can take you where the length should go. So we use a special language to give this meaning to the content of a Web page, and the way we do it is very similar to how you might help somebody who didn't know English who is living in your house to understand the world around them. So if you had a foreign exchange student who didn't speak English, what you might do is get these little tags and go around your house and mark all the different parts of your living room in your kitchen and label everything with English word so that your foreign exchange student can no when you ask for a kettle. Oh, I remember it's the one that had that that tag on it that said Kettle similar to an HTML. We're gonna write on this sticky note, the name of what it is that we're tagging so that when we put it on the kettle now anyone who can read this tag will know that this is a kettle. HTML is similar in that the browser can understand anything that we put a tag on because it can read that little tag. So we have to go ahead and label every single thing in the kitchen, the Cabinet and everything in it, each individual shelf, all of the stuff that's on our countertop, and then every single pot one at a time, 13. Anatomy of a Webpage: So far, we've been drawing a picture of the Internet that includes a client and a server and a language. But we haven't really talked much about what it is that's actually being transferred back and forth. Right now, what you've created is pure content or it's just a plain text file, Right, So you've uploaded this plain text file without any code, but you've just got this plain text fell and it just has words. And if you go to the Earl of your domain, it old downloaded and show it to in a browser, and we've seen it. So this is just content. This is what we're after when we're using the Internet. We usually don't care much about all the superfluous extra stuff. We don't really care what fought is being used. We don't care what the code looks like. We don't care if it, like, looks really pretty. Content is the core. Anything else is additional layer that adds to the experience but isn't necessarily essential to using the Web. Your pages are actually good enough to communicate content to people right now, even though they're just plain text. But if we wanted to add another layer. We could use HTML code to give it some meaning. So HTML will give some structure and meaning to the content. It deals with the noun of your Web page. It just defines what the different things are, What now they are. It says. This is a link. This is Ah, header. It doesn't try to do anything more than just have that basic noun vocabulary to help give your communication of the content a little bit more meaning. CSS deals with additives of the page. It deals with the way that it looks and feels. It describes not the content, not the content. Nothing now owns it describes the style or, as we call it, in the wedge about the Web development world. The presentation it goes in and it it doesn't actually hooked directly into the content. But it hooks into the HTML, and it uses those different HTML tags which have defined different parts of the page. And then it gives those different, meaningful parts of the page specific ways of looking so it can set the fund. It can set the color. It can set this size in the shape it can set anything that you've seen on a Web page that looks a certain way. The way it looks is set with CSS. CSS has complete power over it. CSS is only concerned with these additives. We have to use verbs eventually, right? So when you see Web pages that are interactive that you can do things with, that's where Javascript comes in. So JavaScript comes in and it makes a Web page interactive. We make a distinction between static and dynamic Web pages. A static Web page would just be one without any scripts in it that doesn't interact or change. You load it, and no matter what you do, you can't change the page. That most you could do is highlight some text. And, um, if you keep reloading, it will always be the exact same page unless the owner updates the page right, So a dynamic page is one that you can interact with. Things move around, you can click on things. Games can be written in Java script. You can have applications that are written in JavaScript, and most Web pages today are very interactive, and you make heavy use of JavaScript. JavaScript just deals with the verbs of that content. The last part is images and other media, so images and other media can be the content in and of himself. But most of the time it's text fits the content and you stitch in images, audio, video and other media into the page into in the middle of the content as an enhancement to the contact. The included media is actually a self contained file, and you have toe download that from the server as well and then stitch that into the content. 14. Live Editing with ShiftEdit: for this in session project. We're gonna edit some code again and again. We're going to use a text editor, but from this point on in the course, we're actually going to use a different program. It was important for you to understand text editing and for really powerful editing, you'll want to still use the text editors that you installed or used on your computer. But we're gonna do a cloud text editor from now on to kind of simplify the process for these simpler websites. So this is called Shift at it shift edit dot net Go to shift at it dot net Now you'll notice Shift at dot com is available to come up if you type it in, but that's not the same website. Don't go to shift at it dot com shifted it dot net. You can install the chrome and sanction, but, um, you might want to do that later, so go ahead and get started by clicking on the get started link. This is a free account, although obviously there's options to pay for it. But you don't need the paid accounts. You just need a free account for now. Now in the sign up process. You can actually create an account using ah, third party account. So, for example, if you're assigned into Google, you can create an account using Google click allow, and then it signs you in. So once you get your account created, go ahead and sign in and get to this screen. If you get to like a welcoming screen first, it'll say access shifted it. So this is a screen that you need to be at. So this is an online text editor combo FTP client. Okay, this will kind of do everything that we did in the last session all together at once. It'll simplify things. It's a little bit less powerful, and it's not as helpful for making you understand. The concept is why didn't lead with this. So I wanted you to understand how to do this manually first, but this is a simplified way of doing it. So the first thing you want to dio is set up your connection to your website with FTP so you're the way you do that is clicking on this little year icon. Then you'll be able to choose a site after you've set it up so right now, there's no site here, but right now to set it up for the first time clicked the gear icon and then select new site. Now what? This is is this is that same account information that you put into your FTP client before. So go ahead and get your email that has your shot leaf account information and put the information in here. It's very similar. Okay, so I'm gonna move this over. And then here's that email that I sent to myself. So of course I can actually gonna make this smallest. We can see both at the same time. I'm gonna give it any, uh, any nickname that I want for the account. So I'm gonna call Lauren Brenton, leave the server, type it FTP leave that alone and then go ahead to domain. Now, that's your full domain here. And remember, you can use shout leave dot com since you're pointing it to your website is actually pointed to the shot leaf name servers. So that will connect you to the same server shot leave dot com or your name. Just use your name. So minus Lauren Brenton dot com, including the top level domain part of the domain name, so dot com dot net dot or whatever, and then go ahead and put your user name. That user name is the same using him you got here and then pastored Copy and paste your password and go ahead and save that by default. Um, now, the directory this will let you choose which directory to start with by default. So, um, you actually probably can't change that until you first logged in at least once. But you will want to go back and set this to www or public underscore html so that you don't have to navigate up to public underscore html every time. And then this is the web you are. Leave that alone. So go ahead and do test connection before moving on. If you get an air like this, it's because you entered something wrong in one of these fields. So I I said I intentionally put the wrong password in, So let me correct that, and then we can move on. So now that you have connected, you can go in and change the starting directory. Um, you're gonna look for www or public underscore html. There's actually a quirk with the way that this works, you can see how the www director has been renamed to this longer name. So this actually kind of breaks it. It's indicating that this is a short cut. Instead, pick public underscore html. You can see how this works in this doesn't so pick public underscore html as you default Startup directory. So you don't when you log in, you don't get presented with all of this and have to find it each time and the navigate up to it. Public underscore html Don't go into it. Just the folder there and choose that folder there. Now you are connected there and you can save your connection. Great. So you can see that I have logged in. Let me close this. Now I'm connected to my server with FTP right here on the left. Here, I've got a bunch of these tabs that keep opening. Now, this is a way to create a new file. Um, and you're gonna start with HTML. But first notice that you've already got your file over here. Whatever it was that you named it, it's right here. And hopefully you gave it the dot html extension So this is a way of editing the files on the cloud directly so you won't have to do that whole up loading in between each edit. So if you just click on it once, nothing's gonna happen. Actually, Soto edit it. You have to either double click it or right click. If you want to. Right click to edit, you have to go toe open. It's a little bit un intuitive, and not one of these opens this open, but instead just double click on it. This brings it open and you can see the file that you uploaded previously. So here it is. Hello, world. Let's go to my website to kind of see what it is that I've got here just to remind us. So here's Lauren Brenton dot com and there's that file. And remember, Aiken types forward slash Hello that html and I can see my document there. Okay, so now I've got this window open this tab and this tab with Thea with the file on the cloud being edited, I don't need this to have any more, so I'm actually gonna pull these, pull this out so that I've got it in a separate window, not just a separate tab. And then I'm gonna make it so that I can see both of the same time because I'm gonna be going back and forth. So go ahead and do that as well. Make your windows open next to each other and I'm gonna make it. All right. So let's go ahead and make a change. So I just made a change here, and no, I did not save it. And a little asterisk comes up here indicating that a change has been made to the document and has not been saved. So without saving what happens if I refresh on Lauren and Brenton dot com Nothing. Okay, But if I save it, here's the save icon. Save saving. Hello. And now that little asteroid goes away. Now, if I refresh on my website on on the Internet live, you see my change. So this is cool, because by saving it did more than one thing. It saved it and in did the ftp all for me and it made it all connect. And it's simplified the process a lot. So you can think of this as a live editor, live website editor, making changes 15. HTML Syntax Lesson 1 - Tags: before we continue, we're gonna have to take a step back and look at how toe actually label things with sticky notes in HTML the way we did in my kitchen. So what I've done here is I have gone into a text editor and written up all of the content of my kitchen. So up with the top here I have kitchen and then within the kitchen is all the things on my counter, the wine glasses on the counter. The knife block is on the counter. Within knife block is a bunch of knives and then everything else the shelves in my cabinet and the pot rack and the pots. So say, for example, I need to tell the browser how to understand that this is flower. So we can't just in a text editor take a sticky note and, like, stick it on top of the flower because this is a text editor, this just won't work. So we have to find a way of actually putting the tag actually in the text. So how would you go ahead and do that? Well, one thing you can try is creating a little tag by hand. You know, that you have these little brackets and you can use them to make a thing that looks kind of like a tag. And now maybe the browser will know. Okay, this is the flower tag, and it's indicating that this is flower. But the problem with this is that if the browsers reading through, how is it going to know that this flower tag goes to this and not to this? It's a little bit complicated in a text editor to indicate one thing, whereas in real life you can just stick the sticky note on top of it In a text editor, you need to figure out ways to delineate which thing you're actually pointing to. So this isn't gonna work because it doesn't actually indicate where I'm pointing. It could kind of go anywhere. So another way to do this might be to do something like Okay, I want to indicate that it's this right here. So if you look on your keyboard at the comma and period keys, you'll see little arrows. I call him carrots. And if you hit the shift key, you could make a little pointer here, and I can point to flower and I might also need to indicate when to stop looking at flower so that the browser doesn't just keep reading on to beans as well. So I'm gonna make another era of pointing to the other side of flour. So now with this little syntax, the carrots or the arrows pointing, I know that everything between these two arrows is flower. Uh, oops. Except not because I have to write the tag in year two. So this isn't quite gonna work either, because the browser needs to know that this is the tag and not just another word like sugar . So I need a way to to mark the beginning of the tag, as well as writing the tag name and pointing to where the what the tag is. Indicating starts and where it ends. So the way we do this in html is with another one of these little arrows. So now this looks kind of like a tag, right. It's starting to shape up. It looks like it's one cohesive little thing kind of like this, except it's pointy on the edges. So this is, ah, good strategy so far, but it won't quite work. The flaw with this is that it's gonna have trouble understanding that this little pointer ender is the end of flour and not something that started up here. Say, for example, I wanted to indicate that this was all the counter I might do something like this counter and then down here and the counter. Right. But then what we've got is the browsers like, OK, this is all counter. And then when it gets to hear what's ending is the counter ending Orosz flower ending the browser doesn't know. So what we need to do is, whenever we have one of these end pointing arrows, we need to indicate what's ending. And the way we do that is by typing the tag name again flower and same thing here with beans. Now, this is yet again not sufficient, because how does the browser know that I'm not starting a new flower right here and then everything between here and then the next closing flower is flower. So we need a way to differentiate a starting flower attack from ending flower tag and what we can uses this little forward slash It's like a slash that says no, stop this isn't it. So flour and then slash no more flour. So this is beginning flower. This is ending flower. So this is the tag, and it's got these little arrows that point to what's in between the starting and ending tag and everything in between those two ever arrows is flower. So remember it's a forward slash and not a backslash. The forward slashes like leaning forward like a little guy leaning forward, and it's right next to the little carrot tags. So that's easy to remember. Just always go right next to him. So this is the syntax for how to mark up a, um, a page with HTML to tell the browser what it means. Now, of course, in real html, there's no such tag as flour and beans. This is my kitchen, but this would be the way to do it. Now we're gonna have to go down here. Remember, I put this little closing tag from counter need to get down here and make sure that I have stop counter. Okay, Now, can you kind of see how I would mark up the rest of us? 16. HTML Exercise: we're gonna actually write some HTML. So do this along with me as I talk. Pauses, you go. So, um right now this page has an emphasize word. This is a cloud change. Now, this is not semantically marked up. And as we know, HTML is about semantics. So right now, if somebody who is blind is using a screen reader, what the screen reader will do when it loads this pages, it will say, Hello, world. This is a cloud change and it won't actually emphasize the word cloud. So what we need to do is use HTML to mark this up so that a screen reader will know that it's emphasised text. And I will say this is a cloud change. It'll actually emphasize it will change the way that says the word cloud. Okay, so the way to do that in HTML is with emphasize tag, which is e. M. So go ahead and put e m around it now. Also, it's rude to shout on the Internet, and all capitals indicates shouting on the Internet. It just looks tacky. So let's make it lower case as well. Now, this way, we're not changing our content with presentational stuff and with semantic stuff. We're putting the the semantics into the HTML where it belongs instead of in our content. And then we can make it look the way we want later with CSS. We'll get into that later, though, so make this change and save it. So pause as you go and do this along with me. So after you've saved it here, you should see when you reload this page. Same same exact page hello dot html seem when we were working on a change of this, it's now html emphasized, so you'll see that it is italic now. E. M is not exactly the same as a talic. GM has a semantic meaning, a meaningful meaning of emphasized. There's also an eye tag, which means metallic. Now the I tag has a semantic meaning of something like some text that set apart so you would use an eye tag semantically for situations where you have, for example, the name of a ship or a foreign word, something that we typographic Lee usually italicize for a reason that it's it's set off typographic lee. OK, so that's different than E. M. So just because you want something to be italicized. So you're using the name of a boat. You wouldn't use the M tag. For that. You would use the I tag that would make it italicized. And just because something is emphasized, you don't want to necessarily always be a Talic. You might. You might be tempted to use the I tag for something this emphasize, but it's not the same thing. The I tag indicates something else. Furthermore, you don't always have your text that's emphasized italic. Have you ever seen a website where emphasize Texas underlined were bold id or made a different color or made a different fought size? There are different ways of doing this, so don't get confused about the default. Look, the HTML gives it. Think about the semantics. So we've written some HTML and you see how this works. The E M goes around the part that is emphasised. So what this is doing is this word Cloud is emphasized and everything else is not emphasized. If I wanted to words to be emphasized, I could drag this cut based and save, and now both of those words are emphasized. This is a cloud change, so both are emphasized, and let me go ahead and show you another tag. This right now is actually a paragraph. So let's mark it up as a paragraph. This is the p tag and know that when you when you write in some contexts shift at it will automatically give you the closing tack. So anything that's in here is a paragraph. Now, we wanted it to go on this. So I'm gonna cut this second closing part and go to the end of line hit return to go below and then paste it. So now you see that from here, dragged down to hear everything that's highlighted is a paragraph now, according to HTML. So you save it and refresh. There's no change that you see. But the page semantically now has this meaning and bute into it. You've given it the meaning of this is a paragraph. This is gonna improve your Google search ranking. It's it's gonna make it more accessible to people who have different disabilities. It's gonna make it more connected to the rest of the web. So you want to have this semantic meaning Even when it doesn't look a certain way later, we can come in with CSS, and we can target paragraphs to make him look a certain way if we want. What I'm gonna have you do is actually create in this same exact same thing here the same hello dot html or whatever file name you gave it. Don't don't create a new page at just within this. What I want you to do is expand this page a little bit. I want you to give it a title, the heading another paragraph and a list of links to some of your classmate domains and I don't get tripped up. There's this assignment is a little bit of a trick. Assignment is kind of like a trick question. I'm giving you an assignment, and there's a part of this that you won't know how to do unless you already know how to do it from somewhere else. I haven't told you how to do how to complete this completely yet, So when you get to the point where you have no idea how to do what I've just assigned you, don't worry about it. Just continue on. It'll make more sense to Would I explain it if you've already tried on your own and saw the need for why this is then if you just hear it straight out from the beginning from the outset. So this is a teaching tool I'm using to help you to remember and understand the reason that we do things a certain way. So don't get tripped up when you get to that point when you can't figure it out. So again, what you're gonna do is we're gonna expand this page a little bit. You're gonna give it a title, which is the title for the entire page. Then you're going to give it a heading and then below here, you're gonna put another pair of graph and then list of links to classmate pages. So obviously you're gonna find the links your classmate pages in the project section, and furthermore, after you write up the content for this, you're also gonna market up semantically. So the way you're gonna do that is you're gonna use these elements, so I'm not gonna show you how to do this. I'm gonna let you figure out how to use the H one tag for a page heading. You already saw the paragraph tag for the paragraph and Then you're gonna have the list item tag, which will mark, which will, dino, that something is a list item. Okay, so go ahead and pause the video now and complete this little in class session project going . Don't get tripped up. When you don't know how to do something, just do everything you can And then once you've done everything you can a NPAs the video and continue. 17. HTML Exercise Review: Okay, so hopefully you didn't have too much trouble with that. So here I have done the assignment as well. The first part. I have just put together the content. So here I've made the title here. Whips Undo that. Control or command Z undo. Okay, this is the title. This is my heading. This is that paragraph that we wrote together. And then this is my paragraph. They right now know how it it just continues along Off screen goes all the way out here Way out here. That's fine. I'm just gonna leave it like that. And then here is my list of links to my classmates pages. These are the pages that had the most likes in the project section. So if we save this now without marking it up with HTML, let's see what happens. Kind of a mess. There is just a lot of ah strung together mess here, and it gets worse as I change the size of the page, right? It's it's all just strung together. Actually, the only thing that's not strung together is the part where we did this little paragraph. This is nicely segmented out, but Brendan's page, the title and then my heading are all strung together and this is all strung together. So this isn't good. Let's write some HTML to clean it up. So Brendan's page, I want to be the title. This was part of the trick. I didn't give you the html for writing that title. It's a little confusing, so we're gonna come back to it next. You have the heading, so there's a difference, right? The heading the HTML four is H one. So you should have your Hopefully, if you didn't write, your code should look like this h one, the content of the H one and stop each one. So everything from this to this that's the age one. If we save this and look at it now, we can tell that the HTML has imbued the meaning of first level header. If you were to guess, what would you guess? That the code for second level header is so we already wrote this. Let's leave that alone Now. This is a paragraph. So I'm gonna write again p and then at the end. Or actually, what will be easier is if I just put it right here. Stop P close p So this is the P element. And now, if I save it and go over here and refresh, we should see some distinction between this paragraph and what follows after. Good. Okay, Now I gave you the l I tag to indicate that something is a list item. So what I've done right here Um you can see this is just not gonna work because it's all on one line. So if I give it an l, I around each of use what I did, I kind of tried to put formatting into it as I was writing this because I put each of these on a new line and I gave it this little dash and you can see it didn't work. It works when it's small because it it wraps the long words. But it doesn't work it any other size because there's not really formatting here. So this little dash here, I I typed it not because it's actually part of my content, but because I was trying to format it. But formatting formally is the job of CSS and for HTML to give it the meaning for the CSS. So we're gonna delete these little dashes that I put in there because they're not properly content. So I'm going ahead. I'm doing all of them. And now I'm gonna put the l I elements in here. Now, of course, it's very important that you always type it exactly the correct way. So if I If I want to save time, what I will do is copy this open ally and do all of them once and this one this one paste, paste, paste and then remembering to keep everything clean. The close ally paste, paste, paste, paste, paste. Now the HTML should know that all of these are list items. Save and refresh. Perfect. So this is looking a lot better. So here's the tricky part. I told you to put links, but what this is is this is you are else. So I didn't actually tell you how to put links. Now I gave you the a element for a tag, and so you could try toe length, ease with a and then stop a. But when you save it and look at it, you can tell that it's not really working, okay? And furthermore, you want to be able to say the name of this person rather than always showing the you Earl will be really nice is if you could just put the name, the O any word you want and then anchor the your while into it. 18. HTML Syntax Lesson 2 - Attributes: In order to get links to work, right, we're gonna have to learn something new. Let's look at our little fake kitchen example again. So now it's marked up in fake HTML style syntax, and you can see that I've got tags for all the different things on my counter. All of the individual wine glasses, each knife in my knife block and then Meziane at the counter. Now here comes the Cabinet, with different shelves, plates, bowls and things like that. Now the bottom is the pot rack, so in the pot rack there's a problem because all the pots look the same, but they're actually different sizes. You can see a three core A to court. So how are we going to tell with the tag that this pot is a different size in the other pot ? Well, what you dio is you write an attributes on the pot, so we need to specify the size. The sides of this pot is three courts, so we right size Eagle's three courts. This is a little attributes that goes in the tag itself, and then we put the whole tag back on the pot, and now we know that this pot is three courts. So what we want to dio is go ahead and mark up each of these individually as they're different sizes. So obviously, if we're gonna write information about this pot, we need to put the information inside this tag. Now, this is just the closing tag. Nothing ever goes in here, has to go in here Now we want to put it after the name of the tag that says it's a pot, so we'll put it right here. Never put it before because then the browser will get confused. Now let's write the attribute, name, size, and then we have to set what is equal to three courts. Let's go ahead and do that with all the other ones. Okay, Now I've given most of these sizes. It may be that some of the pots don't actually need tohave the size attributes because it doesn't really apply. For example, some of my saucepans the size doesn't matter as much, so I'm gonna leave that out 19. HTML Links: Now we should know how to put the URL into the anchor tag so that we can see the text. But the anchor has the URL as an attribute That'll tell the browser where to take us when we click on that text. So there's for archaic reasons We call this an anchor and ah, hyper reference. So the anchor tag will go around not the hyper reference or the URL. I'm gonna cut this, put around the word that you want. So this is project Grandma. So if I save this, this is getting closer to how we're supposed to do it. Project Grandma. Now, this is how I want the link to look except I want to be able to click on it and have it Take me to that You are l that I just cut out of here. So how do we make this anchor have the hyper reference or the URL linked into it? The way to do this is with an attribute this element can have an attribute on attribute always goes right here and the attribute name for the hyper references H ref, hyper reference. And now note that because I'm in this syntax highlighting program shift at it. When I hit space, I get a little list of possible attributes. Now I want you to remember that the ACTU it's go in the first, the opening, not in the closing elements. So if I try to put it here, I don't get that little list because it doesn't ever go there. Nothing ever goes here except the closing demarcate er and the element name that your closing. He goes right here after the name of the Element. But before the tag actually closes to put a space and you see oh, there's some suggested attributes and the attributes that we want for our hyper reference is H Ref stands for hyper reference. So the h ref is going to be and I'm gonna paste in the link. The hyper reference is that link, So let's save it and refresh. It's turned into a lynx, and now it's an anchor that has the hyper reference linked in there, uh, angered in there and you can see at the bottom that the little preview text comes up. If I click on this, it'll take me to project Grandma. Let's go back. What if there is a one more thing we need to do with this Attribute. If this attributes which, which the actual name is a dress, hyper reference equals and then what it equals is the earl the actual hyper reference? So this is attribute, name, attribute value. The values can be really different there. It's actually valid toe. Have a file name that has a space in it but say she had named at Hello, Space World. This is going to cause problems for us because of the way the HTML reads this. That's refreshing sea. What it did is it did it. It tried to take me to project grandma dot com slash Hello? Nothing. Because it saw this space and I thought I was done. So what we need to always do is put quotes around, attribute values every single time. Every single actual value attribute value will always have quotes around it, and this will fix a lot of issues, and it'll keep your syntax clean. So go back. Refresh. Now if I click on it, it gives me the whole u R L appear. Hello and then it it's put this code that means space in their world now, she didn't actually create the page. Hello, world. I made that up. She created a page. Hello. So that's why it's not found. But you can see that up here. The actual full you Earl made its way in. So let's go back and let's fix this to what? Her actual pages. So go ahead and put a a treff equals for all of these links. And the way I'm gonna do it is I'm gonna actually I'm gonna do it a quick way. Since thes already have the URL here, I'm gonna copy just a a trip equals copy and put it before these You are else. See how tricky this is. But it saves a lot of time, and then I'm gonna copy this part. The closing quote in the closing carrot. I'm gonna paste it on the enter the other end of this year, Earl. You'll see the syntax highlighting, changing as I do this because I was creating errors by doing it the wrong way. But now when I finish it up, it's all clean. And now I need So here's the beginning of the anchor. I also need to close it. So for each one. I'm gonna go ahead and copy. This paste right here has to be exactly right there. And now I can fill in the anchor for each of these. So if I save this, what's gonna happen? When I refresh this, you should be able to have an idea that. Okay, so I wrote Project Grandma here. But here there's nothing between nothing in the anchor tag. There's the value of the attributes, the hyper reference. So the hyper references there, but the actual anchor has no content to it. So whips, I think I did save all that. But there's only one document open to save. So if I refresh what's gonna happen to these, you are else. I've moved these you URLs into the attributes and now the actual anchor has no content. They'll disappear, and there's nothing here. That's because the extra hasn't The anchor has no content. So I'm gonna go ahead and give words to each of these now go to save and then refresh. Now they all show up and they should work. I can click on each of these and go back and look, this person actually already wrote some html because there's some emphasized or italicized texture. Not sure if they used the emphasis tag or the italics tag because I can't see their code. And look, this person wrote some sort of HTML as well because they have some formatting here. I wonder what code they used, but we we can see the source of our Web page, but we can't see the source of their Web pages. Well, you can, but I'll tell you how to do that later. One question I have is. Did any of you when you were creating this list the first time around, instead of using dashes like I did, did you use numbers? Did you do 12345? Instead of dash or bullet point? There's a difference in types of lists. There is an ordered list, which would be 12345 And there's an A nordeste. So we actually there's a way to mark up this entire list as being one or the other, and it's actually required. A list item always should be either ordered or a Nord erred, and the way we do that is we put the beginning tag here in the closing tag here and the element for ordered list is ol the element for a new ordered list. Is you well? So I did mine with dashes because I didn't want it to be ordered. There's no mean there's no meaning in the order. They're just It's just a random order. So I'm gonna do you l a non ordered list and you see that automatically gave me the closing tag. I don't need it. They're cut. I need it down here. Paste. So now what this says is that here is an order list from here to here. That's an order list. And this is a list item. There's all these list items, so the only thing that goes inside directly inside an order list is the list item. So don't get confused when you see this UL begin and it doesn't stop, even though another one has started. What this means is that this list item is inside this unheard list. It doesn't mean that this on our list is first and this is the next one. This is actually underneath inside the U. L. 20. HTML Syntax Lesson 3 - Nesting: going back to our kitchen example. This is like how you can locate the pots as within the pot rack, the pot rack starting arrows right here. And it goes down to this other arrow here, and you can see that all the pots are nested underneath the pot rack element there inside of it. And that makes sense because they are all on the pot rack. And, of course, as we scroll up, we confined that while the counter ends and there's a new thing called the cabinet. The Cabinet is composed of shelves. There's a couple of shelves, and then the shelves contain things like plates. So this makes perfect sense. You have to go to the Cabinet and open it up and then their shelves. You look inside the cabin that you find various shelves until you find the shelf that has what you're looking for on it. And then inside that shelf, you can you confined your plates and bowls and the things that you're actually looking for Now, of course, all of this is inside of the kitchen, which is also indicated in our little example of fake code. The kitchen is at the very top. And then if we scroll all the way down to the bottom, here is the closing kitchen tag. So everything between this arrow pointing up and this era pointing down is inside the kitchen. Another way that the program is talk about it is this is a parent and this is a child or this ally. It has an ancestor that is the UL. And this ul has a descendant that is the ally. And we have a similar thing going on here with the ally and the anchor tag. The anchor tag is actually inside the list item. It's not the next one after we can't put close Ally because we want to surround the anchor . So the anchor tag, the anchor element, is a child of the ally element, which is a child of the UL. So okay, answer this eyes. You're watching this video right now. This l I right here that I'm highlighting. What is its relationship to this? You? Well, say it. It's a child. This is a child of this. Now what is this allies relationship to this ally? If you said child, you're actually not right, but you're thinking through it which is good, they're actually siblings, and that's the actual technical term. These air siblings, they're all Children of this ul. So they're all siblings of each other. And here's another question. This A. What would you say? It's relationship is to this ally. It's not sibling because they're not both Children of the same parent. You. This isn't we don't actually have a technical name for it, but it's something like Uncle write. This is This is the child of this ally and this is a sibling. So your parents sibling is your uncle or aunt. There's not actually a technical term for that. But what's important is that you don't think that this anchor is a sit quips. Do you don't think that this anchor is a sibling to this ally or a descendant of this ally ? This anchor is only a descendant of this ally. Now what is this Anchors? This anchors, um, relationship to this on order list element. Not a parent, because it's one step up. It's a grand parent, or the more general technical term is just ancestor good. So hopefully this is not too confusing for you. If you're just starting out with HTML 21. HTML Document Structure: now. One other thing we got to get to is that we have defined a lot with this page to save and just refresh. We've defined a lot of information here. Now, you see, when I when I made that change, because I put the UL and it just popped this out a little bit and separated out as a another A list. So now it will actually know that it's on order list, but we haven't actually indicated that all of this is an HTML document. That's something we actually need to do. And there is an element for it called HTML that indicates that the page is being written in HTML code. So we need to always put this in our HTML documents, whips and it. It filled that in for me, which is kind of helpful and kind of not. So the whole thing, all of it is html. Okay, every bit of it is HTML. So the very first line of all of your HTML documents should be always html. Okay, there's a caveat to that in the future, but I'll leave it for now. From what you know, everything is the first line will be h Timo and the last line will be closed. Html. Everything in here is HTML. Save what's gonna happen when I refresh nothing. It was a semantic change, and it allowed the browser to understand what it's reading Now. Here's another issue. This title. I want to get on the title of the page appear right now. It says the U R L. Because I didn't give it a title. But how do I get it up there? Because this is in the page. It just puts it down here in the page. So what I need is kind of like a way to give some, like, meta information about the page. I don't actually want to put this title in the like main body of the page. I want to put it like up above, up in here, like in I need to, like, have a section the Gibbs special information about the page. But it isn't actually part of the document body yet, So as you're thinking about this, if you're really, really clever, you're probably imagining what the name of that tag is. You're probably imagining something like there's a tag named document that you put around the entire document. Open document, closed document. And then you have another tag that you would call something like, if you're making this up, what would you come up with? Maybe you're imagining it's called something like meta. If you had any thought along those lines, you are absolutely brilliant. If you didn't, that's okay. You might still be brilliant, but you you wouldn't know what the actual names of the elements are. But if you guessed that, that's pretty good. So what? The actual names the elements are It's not document and meta. What it is is to indicate that this is the document body. The element name is body and you put this body element You put this body tag command, cut command paste or control control paste around the entire document body. So it doesn't go Don't put it behind this HTML because the body l'm the body of the document is part of the HTML right city. And also wouldn't be it wouldn't fit together, right? Because this body element starts after this, they need to be nested inside. This body is a child of this HTML tag. So this this now tells the computer that all of this from the end of the body tag to the beginning of the close body tag is the document body. Now we save it and it doesn't quite make a change yet because there's actually Syntex Air this this is outside of the body. Um, there's the second element that we put in or second tag and we call this head. This is head information. It's like header information that goes, not it's not actually in the document. It's like up above it, like just like hidden. It's This is where you put all the information on the page that's hidden that relates to the entire page. Okay, so it's kind of like how in a person the head contains all the knowledge and everything. This is the knowledge that applies to the entire page. Now, if we save this and refresh, it's still not working, why isn't it working? Because we have to indicate what type of head information this is now. The correct way to do this is with if we're gonna give it a title, and by the way, you can always do this and see what what html is available to. I did the open Carrot key and I stopped. And now this shift at it because it's a syntax highlighting and it's an HTML editor. It's given me some suggestions that are kind of appropriate to this area. So which one is it? I wanted it to be the title. There it is. It's like, actually click that and it feels entitled for me now. I need to finish typing at close and then stop title Now. Now the page will work. Now it will work. Save this to disappear and watch up here when I refresh there it ISS Brendan's page. So now if you've been going along with this and and fixing up your pages, you go, It's okay. If you didn't get it all ahead of time, it wasn't like a test. But if you got it, if you've got it now get your page to do all of this stuff. You've completed the project. This is This is a huge, monumental step. You've gone from somebody who didn't know what HTML was. How to save a Web page, how to make a Web page to somebody who's writing HTML and creating a Web page on the Internet. This is a really Web page in every sense, and as HTML it's on. It's on domain. It's being served over the Internet. Publicly available through http, It's coated its semantic. You are a Web maker, and if you just if you stop taking the course now, you would have the foundational knowledge that would put you 10 steps above most people who don't know any of this stuff already. 22. HTML Tips and Secrets: when we write code, it's very important to keep things organized. This is a really simple site so far, and it's already starting to look complicated. So what we usually do when we have things that are nested, like here, for example, we have a you well, in an ally, we usually in debt the child elements. Now I'm in denting by hitting the tab button one tab per nest or per layer deep. It is now. Another trick is that we don't usually in debt this sort of thing. So this is this is, like within ah line. So if you were to look at our page again, the u L When we added it, it kind of like made a line break here in a line break here that made it like a block its own block. So, um, we usually will in debt those. But this list item and the anchor are like on this same line, and we don't usually in Dent that so I wouldn't go. I wouldn't do this typically, although you could if you really were confused and needed it to be clear. And I've done this sometimes. So this is one way of doing it. And if you really wanted to get excessive, you could even in debt and do this and know how the idea know how the have this text editor is helping me by kind of helping where my indentations go when I hit return. So if you wanted to, you could you could invent like this to just make it very clear that project Grandma is inside of this anger tag which is inside of this list item which is inside of this a nor did list block. But that's a little bit redundant. It's usually easier to put items that are kind of like in the same line all on the same line, likewise up here. We wouldn't try and put this in a new line and indented because this is kind of like it breaks up the flow of the sentence. This is a cloud change, So I'm gonna go back and undo that because it's kind of like an in line thing. However, this paragraph blocks it out onto, like, its own little block. So we are gonna leave that and I'm gonna invent this and this. So you'll note that if, as we go through an in dental of this and clean up any blank spaces that sometimes you want to invent a lot of things. So I want to dent everything that's inside this body from here to here. So I can either go one at a time or there's a couple of tricks you can use, so I could just highlight everything I want to. In debt is long, there's multiple lines and hit tab, and it does all of them for you. Tap, tap, tap. It'll keep doing it now What if you want to take them all back when indentation, you can use a special character combination called shift tab. Now, this is not universal. Some good text editors will have some of these shortcuts, and some won't. So you've got to get familiar with the text editor you're using. But most of the advanced ones have tab when you have multiple lines selected to in debt all of them, and then toe un indented hit shift, hold it and then type tab toe un in debt, and so you just hold shift, and when you're holding shifty hit tab, it goes back an indentation when you're not holding, shifting you hit Tab, it goes forward. So I'm gonna continue clearing all of this up. HTM on body are both inside of the HTML elements. Sorry, I meant H I met Body and body and head are both inside of the HTML element. So now our text is a little bit cleaner and easier to look at. It may look more confusing to you now, but when you get to a very full big, confusing page, it's gonna be able. It's gonna be helpful for you to be able to kind of get your bearings of how nested how deep in something is by looking at the indentation now. It also brings to light some issues like, for example, this text right here. Online 13 is actually a direct child of the body element. It's not nested under anything else. Now that's kind of a warning sign, because what that means is that the only semantic meaning that this text has is that it's html in the document body. So it actually has no semantic meaning beyond just that. It's a Web page. It's part of a Web page, so usually that's an indication that something is awry. And what we actually need to do is give this a paragraph tag around it, because it is a paragraph. Whoops. I, uh, double type that, and it helped me out there. Okay, so this is this is, uh, a block level paragraph. This wife put her on its own new line. And now you may know that I am kind of like being inconsistent in my indentation. With these paragraphs. I have created a new line and indented. And with this one, I just put it straight in here. Um, that's not a bad thing to be inconsistent, but for the most part, it's probably good if you try for consistency, especially when you're beginning, until you develop certain habits that help you in your coating. So now if I save this and refresh, you'll actually see no changes because all I've done is change the way that I formatted it for me to see, not the way I formatted it for anybody else to see it. It's not changing the html format, and I did change the semantics of this paragraph, but it didn't actually change the way it looked. So here is the source of the page right here this is This is the code that's behind this. Now, I don't What if I want to look at the code on this page without getting this whole shift at it opened up in finding the file? What if I just want to check really quick about what this looks like? Okay. Like for example, I want to go to Sam Gold. AEA's page. Sorry. If I'm mispronouncing your name and I want to see how he did this, I can't log into his account. I don't have his account. He didn't give his password out. Hopefully he didn't. But what I can dio is I can actually get at the code of its behind. I could get the source of how this was built. And the way you do that is from the browser gonna make this a little bit bigger? Or actually, what I'm gonna do is I'm just gonna drag it over to this side of the screen because what I'm gonna show you is in this little menu. Now, every every operating system and every browser has a different place that you have the menu item, but in chrome you go in here and then go to tools. And you can see this item. This menu item right here, view source. And the shortcut for that is option command. You on almost all windows computers. The shortcut for it is control you. So if you're in Windows, don't even try and find the menu icon. Just always type control you to do this to find view source on a lot of other computers will need to go view and find source and chrome on Mac. It's not like that, but so go to tools and view source. Okay, so let me open this back up. Did you see what it did there and open a new tab? So this is the page I was on. This was Sam's page and that opened this tab with the source. You see that? It says view source here, and it has the same you Earl or the same location. And it shows the actual source. You've got line numbers and I can see the elements he used so I can see the huge the I tag , which is good, because if you'd use the e m tag, that would mean semantically that this entire sentences emphasized, which would be a little bit weird. However, it's not really a This isn't really a, um, a foreign word or a special term, so it's still not quite semantically correct. So, um, in the future we'll use CSS, and what we'll do is we'll use a semantically correct tag and then you CSS to make it italicized so that it can look the way he wants without being semantically incorrect. But I'll teach you how to do that later. So we can also see things like he's put line breaks in here one before and one after this italicized part which doesn't show up so we can see a lot of this stuff just for anybody to see on any website. So you can do this on any website, go to any website you want and check out the source. Let's go to skill share and check out the source. I have a short cut right here. Okay. For me, it's control. I'm sorry. It's option command. You they found windows, its control. You Okay, so skill share dot com I'm during the source. Here's the source. Check it out. You can see this on any page, and you can you can look through and you can find out, figure out, for the most part how they did things. This is actually one of the biggest learning tools that you have is the view source command . Just go ahead and view the source of any page. When you're curious about how they did something. How did they get this skill share picture? There you can view the source, and because this is a very complicated page, there's a lot of code to scroll through, but eventually you'll be able to find it. Now I'm able to find a little bit quicker because I do. I've did not done this for a living, so I can tell you right now this is the code for this picture right here. I can see that right away. Now, I will take you a while to get to that point, but you'll get there eventually because you'll be able to read all of these extra little things will make sense of just like Parson. So you're at the part where you're like learning individual letters and you're thinking, How can anybody read all those letters individually and form words and then read those words together? So quickly that they can read it as fast as they talk. I remember thinking that when I was learning how to read, I was figuring out just the letters one at a time. That's a K that said I. And then here's somebody who knows how to read. Just group is reading entire sentences almost as soon as they see it. So this is where you're at right now is one letter at a time. But you're gonna take it up really quickly. Since I have highlighted this for you, we can see. Look at this image is slash logo bash, limb dot PNG and I can actually click on it in some brothers. Most brothers, if you have a newer browser, will allow you to click on you. RL's within the, um, within the page and understands the context. But I'm gonna right click on it and do new tab and we'll see that this is the image. It's the same image was right there. So you can you can get a lot done. This is very powerful and no here. They didn't put the full u R l. So how did they do that? This forward slash at the beginning of where the U. R L should be indicates that it's relative. It's a relative path that starts right at the end of the domain right there. So if you ever see this, or if you ever put a link that it doesn't have the full domain, just his relative to the two, starting with the slash then this is This is how it works. We'll talk about it later, but there's just like a lot of stuff that, as you're looking through, you're gonna run into tons of different cool things that you want to learn how to dio and viewing the source is going to show you how to do it. There are a couple of things that you always need to write when you create a Web page, um, you always need to write HTML head and body, so it always has eight email with head and body message within it. Also, you'll always want a title, and there's some other things. So what we call when you when you have ah, bunch of repetitive code that is always required and you don't want to keep writing it, so you kind of like create it and in a place where you can copy and paste right or copy and paste the files, we call that a boilerplate. It's like a little template that you use to collect get you started for, like, how you're gonna build your page. So if you always have this h email, head, body, etcetera stuff when you're making your page, you might want to, like, go ahead and do that And you might even want to do something like if you're titles, always start with a certain phrase and then you add a little bit more in afterwards. Include that in your boilerplate as well. And then when you start with your boilerplate, you won't have to do that redundant, repetitive stuff. You'll have a good start ready for you already. Now, this shift at it actually has a kind of a little boilerplate built in. I told you not to do this before because I wanted to show it to you now. But if you go to the new tab and if you click a new tab here, it's the same thing. I'll close that you know a new tab and you create using one of these little guys gonna drag this back out because we can look at it now if you create one of these pages and don't even worry about all this stuff, we're not gonna get into that at all. But you will get into HTML CSS and JavaScript. And if you're interested, maybe even PHP but created html page and look at what comes up. There's a little boilerplate that does all this stuff for you. Remember how we had to type html close html head close head title, closed title, body, closed body. And it even puts a space between the body tags so that you can begin writing the document body, the content for your page. And if you didn't title, it gives you the title. Untitled. Now there's a couple of special things in here. It's giving you a meta character said This is a very special tag that goes in the head that tells the browser what character set you're using most of the time now UTF is the best character set to use. This program knows that it's using the UTF eight character set, so don't worry about this. Just leave this alone. Remember in previous lecture when I showed you how to save in plain text. You may have seen that there was option to change the character set and I said, Just leave it. That's because if you had changed it and then saved it without resetting it to the correct character set, you'll get weird things like you got a bunch of question marks or blocks or things if the character set isn't correct, so just leave this alone most of the time. You TF a is what your character set will be. The other thing that is new in this little boilerplate that I didn't show you is this. Remember that little caveat when I said that HTML is always the first line of a document? It wasn't really a caveat. It was just a straight up lie. The first line of every document is actually the doc type. The doc type is a special way of defining what type of 80 Mel you're coding in. There's actually multiple versions of HTML. Well, there used to be. Nowadays, we've realized that having multiple versions of HTML kind of causes problems, and it did cause a lot of problems in the past. There's html three. There's html four and 4.1. There was the transitional standards and non standard versions. We added a version of HTML that began to be Kolok really known as tag soup. Html because it didn't have a doc type and it didn't follow the syntax properly. It didn't follow the standards. And so it was just tags, kind of like throwing together in a soup, and the browser had to figure out what to do with it and, for the most part, browses. We're pretty good at figuring it out. So this is what the old doc types used to look like. It used to be that you would have to do all of this. You had defying your root element. And then there's all these other, like little parts of it. So let's see an example. Here's the doc type for X html. One look at how ridiculously long it is. It doesn't even fit on the page. It includes things like a link to the specifications, the language. Here's html four, just regular old age snow. 4.1 Look at this mess and there's multiple version types of age to before this is standards . This is a transitional, which is a little bit looser. You might see the word loose. And then there's another version for if you were using frames. Um, so all these different doc types. What a mess. We don't do that anymore. H, What we've done now is we've simplified it, and it's basically it's just one HTML. You're just using HTML. It's not quite the same as Tags soup, because your browser will know they're following standards. But it's similar in the sense that we're not going to keep trying to, like specify exactly which version of HTML were coating to and in the browser will render it differently, depending on if you actually forget who in h small 4.1 transitional. You have to do this very specific thing in an HTML four point. 01 strict. You have to do this thing. And so now my entire page broke because I deviated a little bit. It's not gonna do that anymore. This is This isn't new in html five, and this is interesting. This is actually the HTML five doc type, But no, it doesn't have a five there. It's because we're not doing versions anymore. It's just This is just HTML. From now on, it's a living standard. Always put this on the top your page and know that it's simpler now that it has ever been. 23. CSS and HTML Sitting in a Tree: the time has come to talk about CSS. CSS is that third layer that third shell of enhance men added functionality that goes on to the core of the content. So in the very core, you have just plain your content what you're communicating, the next shell around that is HTML, which provides the meaning and the structure for the document. And then on top of that is the CSS, which provides this style, the look and the feel. So the CSS hooks into the different elements that you've put there with HTML. So HTML and CSS. Their relationship was sort of like the relationship between a nerdy guy who is just all functionality. He's always like talking about really nerdy things and arguing semantics and worried about details of like how things technically mean. He uses words like, technically, a lot, and CSS is like this fashionable woman who is always concerned with style and colors and the way shit things look and the way things feel. And so these two people on their own kind of, ah, don't don't work the really nerdy, HTML functional guy on his own, his his place looks awful. It's just all functional stuff. He doesn't have anything that looks good. There's no decoration, There's nothing on the wall. It's just pure whatever it takes to get things done. He doesn't know how to dress. He dresses. But he says, dressing is just to like keep you warm technically has just a purely functional mindset. The meaning of clothes is to keep you warm. Now CSS comes in and without HTML she's all fluff. It's It's just it's just style and there's no real content. It's just all this, like colors and enhancements and And when they come together, though, they make this powerful thing because they've got function and style. They've got the presentational side of it and they've got the meaningful side of it. And when you when you enhance the meeting with a look and feel, you get this beautiful combination that just really works. You've got the power behind the style and you've got the look and feel and the good looking CSS behind the HTML. And together they make this like amazing dynamic duo. So it's important that you learned CSS right at the very outset, right? As you're still learning HTML. So you probably at this point have not got much HTML technically, but that's okay. You got to start learning CSS because you're gonna be tempted to try and make things look good using HTML. And that's just not gonna work. That's like relying on the nerdy guys fashion sense. He does things like he wears brown shirts with brown belt brown pants and brown shoes all the same Brown, because he thinks it matches. But CSS comes in and she has fashion sense and color sense, and it makes it look better. So don't try and style with HTML. It's like it's like dressing nerdy. Uh, yeah, you want to dress well, You want to dress up your website with CSS, Use her fashion sense. That's what she's good at. But use HTML is well, don't abandon age smell. Use html understanding of what things actually mean technically, his nerdy technical understanding of things because he is what's gonna make your website accessible to lots of different people with different types of disabilities, different types of browsers, different types of computers and even non people, computers that that are crawling the Internet, trying to get information about your website. It's gonna make your website connected to different parts of the Internet, to Google to, uh, the semantic Web and all of that 24. CSS Syntax 1: Properties and Values: Let's go ahead and write some CSS. So we talked about attributes in the last session, so it kind of makes sense that CSS would be an attribute of a different of a certain element. So say you go back to your page and you have your heading your index dot html from your homework and you gave it a heading. Hopefully in h one first level heading, and you want it to look a little better then just the plain old HTML formatting style that got put in there. So what you're gonna do is we're gonna add an attributes. Now, this is this is a little bit tricky because you're gonna add an attribute. First of all, to tell it that this is CSS you're doing so. The attribute name is style. Now remember how you write an attributes? You go into the h one element and after the element name after the tag name. So after the h one, you put a space and that's where you write the attributes, name and then equals and in the attribute value. So the actual name is style because this is style. The actual that were adding is CSS and the name for the for the address is style. Okay, So style equals and then put quotes. And in here, that's where we're gonna put our CSS. But here's work. It's really tricky because we're like doubling up the name value pair thing. Okay, so you're like, you've got multiple layers here. You've got the you got the element name. You've got the attributes name, and then you have the CSS attributes names you have. You have the CSS property name. This is actually what we call in because there's different prop we don't want to just have . Like, what were you gonna put in here? What are you thinking? CSS UK. So you have style equals and you put your CSS if what are you gonna you gonna put 10 pixels If you want the size of the font to be 10 pixels? How does it know that you want that to be size and not the height or the width? Um, you have to also specify within this attributes a name value pair of the CSS that you're working on. So I'll give you a couple of things you can do. So first of all, let's make it a different size. So you're gonna put, um, we're gonna make of the font size B 12 pixels. We're gonna make it small just to see that you can make small headings if you want. Now you can't just put 12 pixels, obviously. So what you put is font dash size colon 12 p. X. So look it. Look at this. This is getting confusing, right? But you have a name value pair within the CSS, and we can't use equals again because then it would be style equals font. Size equals there'd be too many equals in the browser. Wouldn't know which ones go where. So instead of unequal sign, we use a colon so fought dash size. Now you just use that little hyphen little minus key, just the one that's right on your keyboard. Next to the plus key. It's the same key is the underlying key. If you old shift and so font Dash size colon 12 p x, the PX of the units. And whenever you have something that's a number, you always have to have the units. So if you do this, save it, you'll refresh and see that the thought size has gone down. Now let's go ahead and change the color. Let's add another property and other CSS property into our H one element into our H one tag into the style attributes of our H one tag. OK, so don't get too worried about the syntax in the semantics of what I'm saying. It doesn't matter if you know when I say style, attribute and an element and tagging all of this doesn't matter if you follow exactly all of what I'm saying. What's important is that when you see it laid out like this, you understand that this is an 18 HTML attributes, and in here is where you put all your CSS and that this is the property and this is a value . You don't have to know the names of these things. I'll use the names, the technical names, but you just have to know how to use it. You just have to be sure that you don't put it. Try and put an equals sign here or ah, colon here you just have to know the syntax 25. CSS Syntax 2: Multiple Declarations: So to change the color, we have to put in another CSS attributes and we have to put it right after that other CSS property that we put in. So we have the font size Now we're gonna put within that same attributes inside that style . Actually, inside those quotes, we have to also put the color. Okay, so this is all within the same HTML, actually. All within the same style. So the style equals both font size and color. So they're both going in these quotes, OK? And we need a way to distinguish the one CSS property from the other, the font size from the color and the way we're gonna do that. Okay. Ah, comma would make sense, but we're not going to use Comma Commons are a common way to separate different things like this, right? We're gonna use a semi colon. I'm sorry. I don't know exactly why they chose to use a semi colon. Um, in a lot of programming languages use a semi colon to kind of like end a statement you'd like to end like a phrase semi colons work. Unlike periods in a lot of programming, world's like in javascript Whenever you have like a statement, you put a semicolon at the end like that. So so put a semi colon after this 12 p x semicolon. Um, Matt says that's the end of this CSS property. And then the browser knows anything after that is a new one. So go ahead and put color colon K remember, not equals and then you can put a color. Now there's a lot of ways to put colors, and there's different values, so you can use hex codes. You can use RGB values where you can use HTML color codes. Now it will be easiest for this example to just use the HTML color code. I don't know how many there are maybe like, 60 or so names you can write out like green, red, blue, a lot of the common ones and even things like Schar twos. Um, so go ahead and put green. We're gonna change it to green G R E. And and because it's spelled out like this, we don't need to put a unit. So go ahead and put that and then put us closing semicolon again. Even though this is we're not gonna like separate out we don't need. We don't technically need it to separate between. Like you wouldn't put a comma at the very end, right? But it just makes sense to always put this closing semicolon after each property, so that if you ever mixed things out around change the order, you won't get messed up and it's just good practice. It's kind of technically correct. So go ahead and put that closing semi calling Now. Now save and refresh, and you will see that the properties have been applied. So attributes and properties CSS properties the property, um, is the actual name of the of the style that's being applied now and at you could call it an attribute for all you already using the word attribute to describe HTML attributes. So that's why this vocabulary is kind of like they kind of crashed into each other. So remember, attributes are attributes that go in the HTML, and properties are all CSS okay, and it's you won't get these confused because when you're in the CSS contacts, you never have this equal sign syntax. When you're in the html seuin syntax, you always have the equal sign and you don't have this colon or semi colon in there 26. CSS Syntax 3: Selectors: you've just written some CSS. You can go wild here, but we're running into a problem. And we're gonna fix this with the principal called D R Y. Don't repeat yourself. So the principle of dry says that you shouldn't repeat yourself if at all possible. So say you have multiple paragraphs and you want to put some styling on each of those paragraphs. Even if he wanted, all the paragraphs have the same styling. The way you'd have to do this is you have to put in each P element style equals, and then the CSS properties, and then copy that paste, paste, paste into each one. Then if you want to make a change later on, you have to go in and find each one manually. Replace it, change it, replace it one at a time. So this is this is why we have this principle, d r I. Because it makes it very difficult to modify anything and update anything, and it just makes it hard to do it the first time around just to set it up the first time. So CSS has his powerful ability toe actually create the CSS in one place and have it apply to the entire page and not just indiscriminately to the entire page, but just to the parts of the page that you wanted to. This is really cool. So the way to do this is we're gonna actually we're gonna stop playing with HTML attributes . We're gonna go up to the top of the page into the header so inside that So you have html and then header inside header before the body tag inside the header attack inside there, we're gonna create an element called style. Okay, so it's gonna have the open carrot style close care at that style tag. And then the closing style tag. So style, close style. And then inside there were going to write c assisted will apply to the entire page so it makes sense of its in the head. All right, so, um, go ahead and right. Some CSS that we want to apply to all of the paragraphs. So you'll have, Say, do something like this. Give it Say margin, Colon. 10 p x. This will give a little margin around all of your paragraphs. A 10 pixel margin. Now, margins and padding are a little bit similar. And a little bit different, but we'll talk about that later. So we're gonna give it a margin of 10 pixels. Go ahead and do that. Now, how do we have this apply to the entire page? But just the paragraphs. How do we do it? Well, we're going to write a little bracket around the beginning and around the end to separate this from other things. And then before that, we're going to write the selector. Now the selector is the way that we select the part of the page that we want to target. So if we just want to select all the P elements, all the the paragraphs, we use the selector that targets just all those. And there's a way to target an HTML moment using the tag name and CSS. So you put the HTML tag name of the element that you want to select, and it'll select all of them. So put P p curly brace and then your property and property value, and then close that curly brace. And so now it knows that everything in between these two curly braces, that's the style that's gonna be applied, and then the selector, it'll target all of the P elements, so you can Onley. Obviously you can only put the names of HTML elements here and you can Onley put html elements that actually appear in your document. So if you don't have any P tags, this P is going to do nothing. It won't apply this This patterns it I mean this margin to anything. But if you do, it'll target just those p elements. So if you go ahead and save this and refresh your browser, you should see a little bit of a change in your paragraphs, how they're how they're laid out. 27. CSS Syntax 4: Classes: If you've been coding along as we go, that's great. If not, don't worry. But start right now. Code along for our in session project. What we're gonna do is we're going to clean up our code a little bit. So right now our CSS is in two places. It's in the style element html tag element in the header, and it's in the style attributes HTML attributes in the H one element. OK, so we need to clean this up and put it all in one place. And it's generally poor practice to actually use the style. Attributes, Um, because it violates d r. Why don't repeat yourself. So let's dry up our page a little bit. And let's put these two rules the rule about the paragraphs and the rule about the first level heading up into our style element into our style tag. What I want you to do is copy just the CSS from the style attribute. That's in the H one tag. So remember the attribute name is style. Then there's an equal sign, and then in quotes, you have the attribute value, so copy the whole attributes value, not including the quotes, just the value. So the first thing will be F for font style. The last thing will be that final semicolon. So copy all of that and then go up into your style element up in the header and find the the one that you the rule that you wrote about the paragraphs and below it put a couple of hit enter a couple of times and put the CSS that you just copied right there below it. So now you'll have the paragraph rule that select the paragraphs and then the curly braces for for the selectors, for rather for the properties of that rule and then below that, you'll have this random CSS properties that isn't targeted anywhere. So I want to see if you can figure out how to make it target this this random CSC CSS that you just paste it in, See if you can figure out on your own how to make it target. Just that h one element. OK, so pause now and try that. And don't worry if you didn't get it figured out, but let me explain to you how to do it. What you're gonna dio is use that p That was above for paragraphs as a model, and you're gonna write another selector for just that H one. So what you write is H one which selects H one elements or H one tax elements and tags I use interchangeably. You select the H one with that, and then you put the curly braces around all of the rules that are going to be used by that selector. So you have the whole rule. And then within that rule, the components are the selector, and then the properties and and property values and the properties are within this curly brace. So go ahead. And if you didn't get it quite right, fix up your code and save it and refresher and see what you got. So now we have two rules. One rule about paragraph tags or paragraph elements, and one rule about the H one element so we might run into a problem here, particularly if you want to style your H one element toe look a certain way only when it's at the top of your page, but you wanted toe. You also want to use first level headings in other parts your page, but you don't want them to look the same as that top one. So right now, just as the P selector selects all the P elements, if you put in a church one lower in your page and you don't change this rule, you're going to get all of them looking the same. So how do we target just the one that we want up top? Just that top one. So the method that we use is we have to assign a class. I'm now. I'm sorry if this vocabulary is just getting out of control confusing. But if you think about it, it kind of makes sense that we have two classes of H one elements. We have the top level that we want to look one way and then we have a second class of all these other ones class or type or category. So we have two categories two classes of H one elements and the way that we need to use CSS . Use HTML to tell CSS The distinction between these categories is by assigning a class HTML has another attributes named The class attributes the name of the actual his class and the value is any class that we give it. So we actually should add this class attributes to that first H one element. So go to your H one element. And by the way, delete the style equals attributes we don't need anymore. So just go ahead and delete that. And instead, we're gonna write an attributes in the H one element class equals and then put quotes and then within those quotes, were gonna make up a class name. You can make up any class name you want. We might call this top for first because it's the top or the first heading. And then the rest of the H ones, if we write them later, are gonna be in a different class. So go ahead and give it the class top, for example. T o p. Within the quotes. Now, what we're gonna do is we're gonna go up, and we're going to specify that we only want the h one elements that have this top class toe have the coding that we put. So we find that rule scroll up to your style element and find that rule that we wrote for the H one. And now how are we gonna modify this so that it on lease elects. It only targets the H ones that have the class top. So we're gonna go in this selector because we're changing what it selects, what it targets. And we can't just right top because with our syntax, if you just write a word here, it'll think it's an HTML moment, right? So we need a way to distinguish that This is not just an HTML element is not looking for top. It's looking for a class called top in the way we do. This is with a dot or a period, so you put a dot and then the word top. So no space between the period and the class name to put dot and in the class name in this case top. And that will tell the browser that we are looking for something that has a class name of top, and we can actually attach it to the H one element as well. So for now, let's simplify things to eat the H one element. I'll show you how to connect them later, but right now, just right dot t O P. In place of where the H one was so no space between the dot and the class name. Now, if you save this and refresh it, you won't see a change because the the class has is on the same element that used to be targeting was targeting the same exact elements targeting the same place. It's selecting the same place, but it's selecting it in a different way. Instead of selecting at using the element name or the tag name, it's selecting it using the class name. So now, though, if we want to write other H one elements lower in the page, they won't be targeted by this selector unless we give it. This class is well, so go ahead and write a couple of the H one elements. If you're curious about this and you'll see that as you write these other ones and save and then refresh your browser, they look different. They don't have that same CSS applied to them 28. Introduction to the DOM: I want to teach you a strategy using a really cool tool that is probably already built into your browser. So it's called the browser Inspect tool, and what it does is it allows you to view the source of the page in a really particularly useful way. So in the last lesson, we learned about how to view the source. So most Windows computers, it's controlled you. It might be something like command option you If you're on a Mac or if you're like on Internet Explorer or some other browser, you might have to go into the view menu and find stores. So go ahead and do that again. Now a few are able. Now what you'll see is on your page. You see that the code that is shown up in the source is almost identical to the code that is in your text editor, which makes sense because it's showing you the source. And of course, you can view the source of any page on the Internet. Um, but it's not actually the most helpful because, especially on bigger pages, it gets out of control really quickly. It's hard to scroll through all of this stuff and find what you're looking for exactly. So there's a better way. And this is also particularly useful for writing CSS because it allows you to, um, to make changes on the fly to the code, just temporary changes they want. You're not able to save them, but I'll show you how to do that. The browser inspect Tool has different names in different browsers. Um, a lot of browsers will call it the Dom Inspector the dog and the reason we call it that is because it's actually looking at the dom. Now. What is the dog? No. Um so Dom Dom Sounds scary, but it's not scary. Don't be scared by Don. Hey, Don Sands for document object model. Don't worry about it. Don't worry about remembering what it stands for, but what it is is it's basically the source code. Remember how in the last session we viewed the source and we're able to look at the source code, all of the HTML and all that stuff that was in there? The dom is also the source could, but it's not exactly the source code. The source code is just the source code. The code as you've written it. The dom is the computers understanding of that source code. It's like a theoretical mental map of the source code that the browser has in its mind. So it's sort of like if my wife writes me a shopping list, um, and she might actually write down like instructions. Do this, this, this and this order. And, um, I'll read that list. But while I'm walking around in the store, I may not actually just always be reading this list. Ah, word for word. As I go, I kind of have built a mental list in my head. So that mental list is It should be If I if I'm not being silly, if I if I'm not forgetting things, it should be. The same is what's on the actual physical list. But the mental list is is like abstract and theoretical and done, so I kind of maybe organize it a little bit differently. I don't maybe maybe I don't think of it in the exact same way that that the list is written , and maybe I even make some minor changes, like if there was a spelling error or if if she did something weird in the list. I might kind of like fix it up so that it makes sense in my brain. And browsers do very similar thing with the code. They actually, they read the code, and then they parse it. When when a browser reads, the code is called parsing, so they parse the code, and then they create this dom, this mental understanding that that that is the structure of the page. It's not always exactly the same as the source code that you wrote. For example, it strips out the white space if you put spaces and hit, enter hit return. The browser doesn't actually need that white space to understand how to, like, build the page. So it that's not a part of the Dom. And if you, for example, have bad syntax and you make some mistakes in your code, and if it's able to correct that if it's able to figure out what you meant, um say, for example, you, um, you write a list item element and you put the starting tag and then the list, but then you don't put the closing list item tag and then you start a new list item, so the browser is now smart enough to say, OK, lists are always one after another. There's no other elements to come between them. And so if I see another list Adam starting, then I'm gonna assume that this last one ended So the browser will will in its dom will put that closing list item tag into its dom for you. So we're going to get to look into the mind of the browser with the Dom inspector. We're gonna actually see this code as it parsed into this tree. So we normally what we see is the rendered version of that code. But now we're going to see the actual source code as it's in the mind of the browser. So here's THIEVE videos for how to get the browser inspect tool set up and running for the browser that you using 29. Chrome DOM Inspect: chrome is perhaps the simplest browser to use the browser inspector tool. Just right, click and go to inspect Element. This brings up the inspects tool with your dom tree on the left and your cells on the right by default. And you can, of course, pick your different options here and then along the top. Here are the things will get into a little bit later in the course. Now, if you want to detach this into its own separate window, use that and then to bring it back down and reattach it into the pain down there. You use that, and then if you want to close it completely, you can use this button here. 30. Firefox DOM Inspect and Firebug: in Firefox to get to your Dom, Inspector, you can go ahead and right click and go down to inspect element. Now, this will bring up this little breadcrumb dom location on the bottom and you have to do a little more to get the full dom inspect. So this little icon right here will bring up the full dom tree, which you can then scroll through. And as you click on the different elements, you see, it highlights the different parts of the page. Now, if you want to see the CSS, you go down to style and click on this, and that will show you the different styles for the different elements. So say, I wanted to see the style of this heading here. I can right click, go inspect element, and you see that it's given me the styles for this. This element right here. Now you can click on this little icon, and then it will allow you to see the element dynamically as you just hover your mouse over the thing in the page instead of having to right click individually. So that's a cool little feature. And then also you can do this high this and and hide this. You can do this three D view and this will kind of show you the way your pages built and layered up. So this shows the different elements air kind of stacked, and you can get an idea of how your pages Bill, you can see my links. There are are set, um, a little bit There, there, an additional element inside of the paragraph element. So that's that's a cool little future. So this this is a default Firefox Dom Inspector, and you can't pop it out into its own window as far as I can tell. Um, but you can close it with this, but you may. You may want to get firebug for Firefox. Firebug is kind of ah, one of the original, um, Dom inspectors. It was an ad on originally, So go to get firebug dot com and install it. You can actually install it for lots of different browsers, but it was originally for Firefox is why it's called firebug. So click on that and go through the whole installation process. It takes me to add on stop Mozilla dot org's, which is the most trusted place to get Firefox add on. So you definitely want to come here to download it? You could just go straight to add on Stop Mozilla, die or go and do a search for firebug if you want to short cut the process. So now firebug has been installed. I can close thes windows. And now if I right click on here, you'll see to inspect elements So this could be confusing if you got firebug installed. This is the default Firefox inspector and this inspect element with firebug. This is the firebug Inspect, Inspector. So if you click on that, it looks a little different Now this will look more similar to chrome. This is this is similar to crime. You got the Dom inspector here and the ah CSS here on the right, and you can pick the different options within your CSS and the Dom. The dumb tree is collapsible. All that And then here's the same option where you can kind of highlight If you want to pop it out into its own window, you can use this up icon that'll pop it into it's window and then to bring it back, you can use the up button the down button. Kind of like minimizes. And then this X button closes it completely. So we'll come up quicker again if you use the minimize rather than the X I believe is what the difference is there. So again, don't get Ah, don't get confused. You can You can deactivate it. Um, if you if you were on getting confused. But don't get confused by the difference between this Inspect. That's the Firefox. Inspect and then inspect with firebug. This is the firebug. Inspect. So, um, I kind of recommend using firebug. I really like it. The default Firefox one is not too bad. If you can get used to this layout. Um, it's a little bit different than what I use on chrome. And it's it's different than what I'm used to from firebug. So I suggest firebug again. The girls get firebug dot com 31. Internet Explorer DOM Inspect: you can use a browser in spectral in Internet Explorer, though I don't recommend it. Starting in I seven and going upto nine. This is Internet Explorer nine. You can do a F 12 to get the browser and spectral so you can't right click and find the inspect element menu. But what you do is hit F 12. Um, and you'll see this is actually very helpful for testing Internet Explorer. So I don't suggest that you develop in Internet Explorer using this inspect tool, but you do need to test. And so I suggest you get the newest version of Internet Explorer 10 when it comes out. And then you can use this to switch your mode so you can test to see if it looks the same in an Explorer eight or Internet explore. Seven. Go ahead and, um, change the ah different versions here, and it'll give you a very accurate picture of what it would render like Internet Explorer eight. What it would render like in your unit, explore seven. Um, but in terms of the Dom crawling, you can click on these, and it'll kind of show you, um, the CSS on the right And then, if you want to see how it looks in the page, you can click this arrow, and then if you click on a different element, it'll drill down and find it. However, you can't really edit this in the same way that you can in other Dom inspectors. You kind of have to add new elements here, and it's got a lot of quirks that that are gonna mess you up. So you should definitely kind of become slightly familiar with this because you will need to test an Internet Explorer. But for the most part, you're just going to use this to kind of like get track of what you're looking at. So all of these are very, very different from the standard inspect options in the other browsers. So, really, this deserves its own separate video, just going into the details of all these. But for for this lesson, I'm just going to say, Don't use Internet Explorer because it's it's just gonna make your life difficult 32. Safari Mac DOM Inspect: for Safari on Mac. You can't get directly into the browser. Inspect tool immediately by right clicking and finding the inspect element. Um, menu item. First, you'll have to go to the preferences and move over to this very last tab. Section here advanced. So will start on. General Goto advanced and click this show Develop menu in Menu Bar. I notice up here it enables that little extra menu. Now, once that menu is enabled, you'll have the ability to go ahead and click show Web inspector and some other cool stuff here. But even more importantly, now that you've enabled that menu, you can right click and there is the Inspect Element menu item. So the Web inspectors a little different in safari in the center. Here you have the Dom, and then on the right is where your CSS will be. But you've got a couple of options of what's going to show up on the right. These curly braces mean the CSS, so go ahead and click that, cause that's what you're gonna need most of the time. So these curly braces and then a lot of this is very similar style rules, Um, style attributes will show you the HTML attributes. And then there's these air similar to what? They're on other browsers on the left. Here, you have, um, a lot of different things going on these air. The different tabs that you'll click through that on most browser inspect like on Chrome, for example are just along the top here, So this is a little different. But when you see me and chrome clicking through to go to, like the timeline and all the other little things, this is where they are in this one. And to get back to the dom, you have to click on this and go here. So for the most part, I just hide this panel. You have this cool ability and safari to hide this left panel or hide this right panel. If you want to run, hide it and ah, and so that gives you some flexibility. Now, if you want to separate this window out to be its own free floating window, you can click that button. If you want to read docket, click back and then if you want to close it again, click it right here. 33. Safari Windows DOM Inspect: safari on Windows is a little bit different to get into the dom, inspect tool by default. It will probably be here if you right, click and go to inspect Element. But there's a chance that you may need to go into preferences and click on this last tab the advanced tab, and check this button So this show develop menu in the menu bar may be disabled in yours like it is on Mac by default. So you see nothing really changed, but now I don't get that inspect bar. So if you really want to see what it's talking about, you can show the menu bar here Now. Right up here, you'll see there's no developed tool. But if I go into this gear and go to Preferences and then check this, you'll see the developed menu bar appears and disappears when it's there. Then you get the inspect element, and you can also use this stuff in here. So go ahead and get the inspect element, and then you've got the dom tree on the left, the CSS on the right, and then the breadcrumb dom trail right here on the bottom and all these different items up here. This is very similar to how it is in chrome. The windows safari is very similar to crumbs. Inspect element. So if you're in windows, this is pretty pretty similar to just using chrome. You can detach it by clicking that button, and then if you want to reattach it, you can use this button here and then to close it used this button up here. 34. Using the DOM Inspect Tool: generally, what you're gonna do is find that inspect and in the bottom of your browser, there's gonna pop up this whole magical Web developer wonderland of all of this stuff. So the first thing you'll see is on the left the dom again, just this mental understanding of the source code. But it's structured out perfectly and kind of like fixed up. So you'll see sometimes that the elements air collapsed into each other, so we talked about nesting last time. So if you have one element that's inside of another element that's inside of another element. The browser may show these has collapsed up, so you only see that top element and the Children elements. The descendant elements are actually inside there, but you can't see him unless you click a little plus but button or icon, and then you'll kind of, like, see it expand out. So this is actually a very efficient way to, like, run through code and get a feel for it yourself. So go ahead and look at the Dom and explore it a little bit and see if you can make sense of your page and understand it. So say you want to change the size of our heading because they're heading is too small, but we don't want to have to go to our code, change the font size, go back and refresh, see and check and see if it's the size we wanted. And then, if it's not the right size, go back to our code. Change the font size again. Guessing Check goto our browser check to see. It's still not quite the right size, back and forth. This could take a long time. So one of the cool things about this tool is it allows you to modify your page within the browser without affecting the code. Where you're modifying is the dawn. You're modifying the browsers mental understanding of this page. Now you won't be able to save these changes, but it will help you, like play with it a little bit and see it as you're playing with it to get the to get what you're looking for. So so in your in your dom. Inspector, go ahead and bring your mouse cursor over one of the elements, and you have. There's a distinction between putting your cursor over the element. Name the actual tag name and then the like values and attributes that air within it. So if you put it over the AK tribute, for example, it's not quite the same is putting it over the elements. So when I say put it over an element to put it over attack, I mean the tag name. And if you do that as you as you move it over different elements, you'll see that it's highlighted in the browser in the page. You can see it actually showing you which element is being highlighted. It will give you the outlines of it, and it will show you the margins and the padding in different colors. Now this is different on different browsers, but often the margin is purple and the padding is yellow and the size of that backwards. Anyway, you'll get used to the understanding this in the future, but I'll show you the height. The width will show you where it is, And if you click on that, click on the Element name again. Don't click on like the actuate. Click on the element name the tag name and then in that right pain. What you'll see is the CSS that applies to it, so this will, on complicated pages, be very big. You have to scroll through a lot, but on a simpler page, it's a little bit simpler. So again on different browsers, there's different ways that they show this. But one of the little windows that they have is, um, is the CSS rules that are being applied to that element. Eso at the top, you'll see sometimes an empty rule for you toe put new things in, and then you'll see usually categorised from most specific chili specific. And don't worry about what that means quite yet. We'll talk about it later, but it basically means the things that air applying that that are higher. Priority to lower priority. Ah, list of all the rules and you'll even see the default browser. CSS rules so you can actually see. Really, you can see the guts of all this. You can see the the CSSD you didn't write. It's just part of the browser. Defaults reached him out. Cool. Um, now click on your H one element, the one that we wrote the class for and remember to click on the tag name so you'll see if you can find it in that right area. You should be able to find that class the selector, which contains the class and then the whole rule. The different properties that you wrote, um and say you want to change the size double click in the value of the fought size and you'll see it change from kind of like being unedited ble to being an edible state. Now this is a little tricky because different browsers kind of do this in a different way. And also they sometimes change the way that this works between browsers versions. So it might be a little bit different on your system. But it's usually DoubleClick within the with within the property value to get it to go into its edit herbal state. And if that doesn't work, you might have to just kind of like, click around and try different things until you get it to work for for your Dom inspector. But eventually, if you'll figure out how to like what the technique is to bring it into this creditable state, and then you can edit it so you can do a couple things, you can type a new value and then see it right there, change right before your eyes. Or you can, if it's something like a certain number of pixels, like numb numeric units. And then there's the unit. Afterwards, you can use the up and down arrow key, and that'll actually scroll through kind of, and you'll see it updating as you as you use the up and down Cherokee to increase or decrease the value so you'll be able to see it actually changing sides and you confined just the size you want on, Ben, you can. You can edit this. Sorry. You can modify this the amount that goes up and down when using the Cherokees by using shift and, uh, Ault and control sometimes to kind of like make it bigger jumps or smaller jumps. But go ahead and play with that a little bit until you get the size you want. Now, once you have it the size you want, remember, when you reload this page, you're gonna lose this change because this is just a change to the dom. It's just the browser's understanding of the page. You haven't changed the code, so you have to actually change the code to so what you do is, once you get it to the size you want, look at the the actual value that so you have to, of course, know where you are. I'll show you the whole rule. I'll show you the selector and then the property and the property value. So with that in mind, remember the property value and then go to your code. Find that same place. Find that same rule that with the same selector on the same property. And then when you see the value, replace the old value with the new value just from memory. Or you can even copy and paste that value into your code, save it and then refresh it. And if you didn't write, your page won't change. So this is you using the dom you're navigating the dot The dom is kind of like it's this tree of inheritance. It's It's kind of like, you know, those Russian dolls where they put one inside of another, except it's a lot more complicated. We call it the tree You can like, collapse it all the way up to the root, and you can just see the root element, and then you can start from there or you can right click on the page on the actual element that you want to see right. Click on the one you want to see and go to inspect, and that will take you there in the Dom. It'll it'll scroll through. It'll un collapse and expand and highlight just the element that you clicked on. And sometimes it's a little bit confusing because elements are kind of in front of each other, and it and the one you clicked on isn't the one you thought it clicked on but usually take you to very close place. And you can kind of, like navigate through the Dom to find the exact element that you're looking for. You can make lots of changes. You can actually totally code a whole page just in this Dom Inspector, you could write the whole CSS and everything and then lose it when you refresh. Probably not a good idea to do that. There's a lot of really cool features in this Dom explore. It's actually more than just a Domine spore Explorer. It's more than a browser. Inspector has a hole wonderland of tools 35. Intro to Scripting: so far, a picture of the Internet consists of a server side, a client side and what they're communicating back and forth, which is the content which is wrapped up inextricably with the HTML and the CSS. So we understand that the content is the point of what we're communicating, and the HTML is what gives that content Meeting marks it up to mean one thing or another. We talk about HTML as the noun of language of Internet languages, and, ah, the CSS is what makes it look the way we want we talk about CSS is the adjectives in terms of Internet languages. So when you want to do interactive things, when you want your website to do things to respond to the user in a way that's more than just following Ah, hyperlink. What you need is JavaScript you need while you need a script of some kind. JavaScript is the client side script, so actually, you can have a script on the cloud in the Internet on the server, Um, and it can do a bunch of cool stuff, but you can also run scripts right on your on your user's home computers on their computers , like, as on the website while they're using it without any communication back to the server. So the language we usually use for that is JavaScript and Java script is very powerful for that reason, because it doesn't require this constant communication back and forth. If you have scripts on your server than for the user to interact with it, there has to be that http connection, and you have to say what the user has done. And then the script has a chance to respond, and then they have to make another http connection to give the script response on back and forth, so it's not quite as efficient. What's more efficient is if you use your your visitor's computer, they use their processor, the script runs on their computer and their computers memory, and you can get a lot of stuff done. Inter actively, right there 36. Javascript Variables: open up your Web page and shift at it the way we have been doing. And ah, log in and go to, um, actually create 1/3 page. So create a new page and we'll call it Script HTML. And then, um, you'll want to probably linked to it with with your whole site and everything. So I'm you can either do that now or come back to it later. Eso deposit right now if you want to go ahead and create that script dot html file so I'll give you a chance to pause now. Okay, So you created a new empty scripts that HTML go into your head. This is the head element. So remember, the first element is this doc type, Then you have the HTML and then you have head and within the head, you've got a couple of things, including the title eso. Usually I'll put it after the title, put this kind of things and we're gonna write a new element. And this html, we're gonna write is called script. And what this element does is it gives us a space to write our script, our scripting language, which will be javascript, so write the script as C. R I P T. That opening l tag and then the closing tag. I used element and tag interchangeably and then put some space between the opening and the closing tags and inside there, that's where you gonna write your script? It's gonna be javascript. It's not gonna be HTML. So no html goes between this script and stop script. It's all it's all javascript know. HTML Okay, so in here, scripting is very much like, um, math. If you remember back to algebra, there are There's this concept of a variable. So you have something like X and X can contain a number. We don't know which number it can. The number that it contains varies Okay, so you might have a simple equation like one plus one equals X. That's an Ehlinger break a collection equation, and you can solve for X. Do you get to write? Um, so you on the left, you'll add one plus one to get to and then get to equals X and ah, and you can do more complicated things where the variable is in different places with multiple variables. Will scripting also uses variables and, ah so go ahead and write your first variable unto. To start with, you're gonna write. You have to declare it as a variable using Java script. The way to do that is your right Hvar, which stands for variable and just always do everything lower case. Unless unless they tell you to do something. Upper case, um, var VR space. And by the way, you're writing this inside the script element between those script start and close scripts tags, right, Bar space X. So we're naming this variable X and then you put unequal symbol and then a one, um so this defines the variable X and sets equal toe one. Now we can use this s O, for example, You can, um, doing alert. Have you ever seen those annoying pop ups that make a noise on a Web page? It's kind of annoying, but for testing, it works pretty well. So we're going to write a Java script command to create one of those alerts, and then we can put whatever we want in that little pop up. So the job script for this is, by the way, put this on a new line alert and then open parentheses close parentheses, so no space after alert, open and closed parentheses right after that. Now go back and within those parentheses. Right, The the letter X. So this is the same name is the variable, right? So what it's gonna do is it's gonna alert that variable. So when you alert the variable JavaScript will create, this will pop up. But it doesn't just alert the variable name. It actually alerts what the variable is. So, um, save this and I'll give you a chance to run it and see what happens. 37. Javascript Strings: Okay, So hopefully if you're following along When you saved it and ran this little javascript function by loading the page, you got a pop up. That was just the content of that variable one. So very simple. Now, I want to show you something cool here. Um, instead of putting within the parentheses around that X instead of just putting the variable name in the parentheses, I want you to put quotes around it. So put a quote around left and a quote around the right, and now it reads alert, open parentheses, quote your variable name, which is X and then another quote and then the close parentheses. So what do you think is gonna happen now? We're no longer alerting the variable name just at just plain it in its own Java scripts. In text, the quotes do something in JavaScript. When you put quotes around something, JavaScript no longer evaluates it as a script, but it evaluates it as something that's like to be taken literally. So it's sort of like if I'm talking to you and I'm I'm describing things in using words. And then suddenly I use quote symbols around a particular word. Well, a lot of people will use that to emphasize a word. But technically, when you put a quote around a word, especially when written the quotes around that word or around that phrase mean that you're actually quoting something, it's a quote, so it's no longer you saying it. But it's you. It's actually something that is being quoted. So it's, you know, when you're listening to a sentence like this or reading a sentence, you don't understand the part that's in quotes as part of the sentence. You understand it as a separate kind of thing, and this is similar with JavaScript. So when it when it comes across this X now because it's in quotes, it's not gonna look at it as a variable anymore. It's gonna look at it as the letter X in quotes. It's just what we call a string. It is. We call it a string, because usually a string consists of multiple letters strung together. So if it was like X y z, you know it's like popcorn. Have you ever made those popcorn chains? Were you where you put string through popcorn and you've got a string of, um well, the popcorn's are like letters in JavaScript strings. And this JavaScript string is actually just one popcorn. The letter X. But the point is, it's understanding it as a little string of letters, not as something to be read and understood and parsed as a variable. So put the quotes around it and save it and positivity, and I'll give you a chance to run it and see what happens so positive. 38. The Javascript 'if' Condition: Okay, so if you are doing this in the correct way, you should have got that alert now. But instead of alerting the number one, it alerted the letter X, which is just a string. So go ahead and, ah, you can play with this a little bit and put anything you want in there and you can write a sentence. You can write a novel. Actually, I think there's a limit to how much you can fit in there. But if you put it in quotes, whatever you put in there, it will just quote back to you directly. But if you don't put quotes, then the JavaScript program, when it's going through this will assume that what it's alerting is not just some text, but it's JavaScript to be understood. So if it's variable, it'll alert the value of that variable. So let's make this a little bit more interactive. The most powerful ability of JavaScript is not just having these variables, but the ability to test the values of these variables and do different things, depending on the condition or the state of that variable. So, in order to test this, we use this logical language of if then else. So if this is true, do this else. If this is true, do this. And and the way that will do this in JavaScript is usually with variables comparing one variable against another or comparing a variable against a string. So, um, let's let's go ahead and write this in our code. So we're gonna write this between where we declare that variable X and where the alert occurs because we're gonna have this alert alert conditionally based on what the variable contains. So after VAR equals X, that line put a new line and write the word if now again, we're gonna put parentheses if and ended its simplest. If you just don't put a space if no space and then open and closed parentheses and then within these parentheses, we're going to write the test condition. So what we're gonna test is run and test whether or not X is one. So when X is one, we're gonna alert one thing. And when X is not one, we're gonna learn something else. So toe to test this right, X equals equals one. So you would expect to just write X equals one, but, um, you have to think in terms of computers. Computers aren't very good at having one thing mean to different things. So we're already using the equals sign one line above. To assign the value X equals one. That's kind of like in math. If we say let X equal one and then if we're testing your natural inclination is gonna be like, let's say, if x one equal sign one if X equals one. But we have to have a difference signed to test equality. So we use to equal signs and you're gonna make many mistakes if you're writing a lot of JavaScript or any code where you're gonna accidentally put one equal sign when you're testing and it will assign XTO one. If you do that, it will always be true. So no matter what you put between X and the other side, if you only put one equal sign, it will be true because you're setting it too. True. So don't do that. Put to equal signs and put X equals equals one. So we're testing whether or not X is equal toe one. Now you can put quotes around that one, but JavaScript is actually very tricky because it's ableto it's ableto look at that one. If you don't put quotes around it, it understands it. As like I said before, it's it's javascript to be understood. It's not just a ah, it's not just a string, but it understands that as a number the number one, um, And so when you give a variable when you assign it to a number, the JavaScript engine understands that the variable contains a number. Now the variable can also contain strings. So notes so far we've given that variable. We've made it equal to one without quotes. So because it doesn't have quotes, that's a number. And so below we can compare it to. If X equals equals one the number it'll test. Java scruple test does X, which now contains the number one equal the number one. And here's something really tricky. If you put quotes around the one in this test, it'll be comparing. Does X the number one equal equal the string one. The character one. It's a little popcorn on the on the string. Right and job script is pretty smart. It'll actually it'll actually say these are the same thing. The String one and the number one are the same, but it's kind of like this isn't always reliable. You can't rely on JavaScript, always figure out the type of variable it is. So sometimes you'll run into things where it's evaluating things that you think are equal. But JavaScript hasn't is not quite advanced enough because they're different variable types . So let's for the sake of the future. Let's go through this and pay attention to the type of variable it is and try to be consistent. So let's not put quotes around that one. Let's try to keep it as a number. The number we've set is a is a ah, variable is the number. Now let's test a number as well, so don't put quotes around it. Okay, So if X equals one, what are we gonna do? We have to put what happens if that condition is true and the way we do that like it are. We can't just ah assume that the rest of the page is like we have to tell Java script where the like where the thing to do is like, we have to give it some boundaries. Otherwise, it's just gonna think if it's true. Like from now on forever. I'm always gonna do this, but we want to set just like a certain number of things. So it's kinda like in CSS we use the curly braces again. So right after that, closing parentheses put an open curly brace and then put a couple of line breaks, you know, hit, enter a couple times and put a closing curly brace. Now, everything between that open curly brace and that closing curly brace will be what we're gonna do If X is true. Sorry if X equals one, which means if that condition evaluates to true So JavaScript will evaluate the condition, the part in the parentheses, and if it evaluates to true, it will execute that will perform. It'll do what's within those curly braces. So let's copy and paste the alert that we wrote before up into that curly brace area. For if X is one. And let's change it to say, let's make a string so in quotes, that's right. X is one, and you can write Write that out. OK, so I'm gonna give you a chance to catch up and, uh, and do this a positive video 39. The Javascript 'else' Condition: Now, if you refresh it, you will see that depending on exactly how you copied, you'll see that because X is one, it will give you your sentence. And if you deleted that second alert, you won't see anything else. But if you didn't, you'll also see that second alert because after it got through that through condition, if it keeps going along the script that continues to execute this the script and it'll come across that next alert. So we want to make an alert that it only happens if X is not one. So the way to do this is right after that closing curly brace, we're going to write the word else. So if this is true, if if this is true, do this else do this other thing. So when Right else and we're gonna open another curly brace because we're now we're setting the condition of what to do If it's not true. So else Open, Curly Blake Brace. Put a couple of line breaks closed. Curly brace. Now in here, we're gonna put what happens if X is not true. I'm sorry if X is not one which which evaluates to true. So you won't see this while it's true. But let's put let's move that alert up in there and let's write X is not one. Okay, so now you should just have to alerts. The one that says X is one in the in the first condition and then the one that says X is not one in the 2nd 1 so let you posit and run it and then out. Continue when you've done that. Okay, so now you, if you did it right, you'll see the alert says X is one, and then you don't see the second alert. You don't see the other alert because that condition is not true. Now go ahead and change your variable in your JavaScript. On that first line, we put var X equals one. Change that one to any other number. You can change it to to you can change it to 100. You could put a word. However, if you put a word, it has to be in quotes. It has to be a string. Otherwise, JavaScript will think it's another variable name or something, and it'll get confused. So if you're gonna put a word, you have to make sure that job script knows it's a string. It's like these characters strung together on the popcorn and on the string. Um, otherwise, JavaScript is going to say So you put the word monkey. JavaScript is gonna think, Oh, it's talking about the variable name monkey and it's gonna look for where you have set variable named monkey. You said a variable named X. You didn't set one named Monkey and also that there are no jobs, script, functions or methods or pre defined things that are that are monkey. So, like you see how the word bar is in there. It's not in quotes. That's something that Java script uses. There's if in there, that's a word, and it's not in quotes. That's like one of these job script things. So it's not in quotes. Job script's gonna think that it used to do something with it, and if it's not actually sent them that it can do anything with, it's gonna choke so you can set X equal to a word that you make up or a sentence. But make sure you put it in quotes so it knows it's a string. So go ahead and do that and run it and I'll posit and give you a chance to try it. So you should have seen the other alert. So this is very cool. You're starting to see the fundamentals of how Javascript works. Um, this is this is basics of programming. 40. Backend Scripts: What you've done so far up to this scripting lesson is markup and styling. So you've done HTML, which is markup language. It's a markup language, and you've been CSS, which stands for cascading style sheets. It's not really important what it stands for, but it's a styling language, and there they have more in common with each other than they do with scripting languages. Now a script is in a whole other realm. It's closer to like, actually what we think of when we talk about programming. So you've really just written your first script, and obviously you can do a lot more with Java script. But this was more of Justin introduction to front side client side scripting. So JavaScript is the language of choice. By the way, if you're gonna be learning how to do Web development in terms of making Web pages, that usually means a front end Web developer. Back end Web developers tend to come from more of a computer science background like programming and, like if you get a programming degree or a computer science degree, front end developers are kind of more of what probably what you're interested in. So is the front of developer that the three key things you want to learn our HTML, CSS and JavaScript. You can't escape using these three languages. So as of now, you've got your introduction to all three, and as you go, you will run into them and you'll know how to use them. And you can probably pick it up pretty quickly as you go. Just kind of like figure it out as you go and you get a lot done. So the other side of scripting is the back end or the server side, so front end scripting is JavaScript. The bag conscripting is a lot more complicated because there tends to be ah, lot of different languages. In fact, you can probably hook up your server, too, to run almost any language you want. And this is because you have complete control over your own server, and it doesn't actually have to be interoperable. In a sense, in the sense that whatever you're doing on your server, the scripting and all this stuff that happens happens just on your one computer. And then, once it's done, the result that it sends out across the Internet that has to be interoperable but the programming and choosing and like the churning of the program doesn't actually have to inter Inter operate. It's just the communication that has to Internet break so you can write back and scripts in any language you want, as long as they can communicate with the standard method. Like http, Um, but there are some standard ones that get used a lot, and umm I'm in us introduce you to PHP. 41. PHP: PHP is open source and free. And so it tends to get used a lot in a lot of a lot of software that is free on the Internet and open source on the Internet. So, for example, WordPress uses PHP and PHP is a back and language. That's, you know, it has a lot of flaws, but in some sense is it's very easy to get started with simple things. So we're gonna write just a very simple PHP script on the back end, and then we're gonna execute it and kind of see how this works. So what we're gonna actually do is we're gonna right the exact same code as we did in Java script. But we're gonna write it in PHP. So in order to do this, go into your shift at it again and create a new file. And here's the different thing is you're not gonna create an HTML file this time. You're gonna create a file called script dot PHP. Okay, this is very important that you give it the extension PHP. Now, if you're using shift at it, there's a little um, there's a little option to create a PHP file to begin with as PHP already. So go ahead and do that if you want, or just create it on and save it has dot PHP. The important thing is you've got this file in your website called Script Stop PHP. Now, within this, we're gonna write that same script. So the way to create a variable in PHP is not exactly the same because it's a different language, not the same as in JavaScript. The way to do it in PHP is to write a dollar sign and then the name of your variable without a space in between. So we don't actually have to have that declarative var. You can just write dollar X and that will create the variable X. So go ahead and write Dollar X equals one. And then, um, actually, much of the code is is the same. So the next line you can write if X equals equals one. Now what do you have to change in that? You have to make sure that PHP knows the X is a variable. And the way you do that is with that little dollar so right dollar X, If dollar X equals equals one and then you know, same same syntax with the parentheses and everything. And then you're open and close curly braces. I'm within their instead of writing alert. What we're gonna do is, um PHP is not a front end script, right? So it doesn't have control on the browser in the same way. But what what it will do is PHP will create a, um it'll spit out some content. So, um, what we're gonna do is we're gonna define what content it spits out with this. And so basically, it's like we're writing a document that's gonna be transmitted across the Internet. So go ahead and write the word echo space, and then you can write your string. So instead of the alert just right echo space and then in quotes open close, close quote close quote. Right. Your strength. So X equals X is equal to one. Whatever you want to write, um, and then follow this in tax again. The closed curly brace else open curly brace and then changing the from alerts to echo echo space Quote. So no, there's no parentheses. Again, Right? X is not one. And then close quote no parentheses in PHP. And then the clothes curly brace. So I'm gonna give you a chance to catch up and save that. But before you do that, I just want to talk you through what's about to happen. So you've written the script. It's exactly the same as the JavaScript in a lot of ways. But the JavaScript, how the JavaScript works is, um, you download the file from the Internet script HTML. And within that file, you have embedded the Java script So that JavaScript on the on the client's computer on the client side on the on your user's computer that jobs could runs on their computer and executes this code okay and will create those little pop ups. So they have this code on their computer than with PHP, its back end and all back in Scripture like this, it's different. So instead of downloading the script, what actually happens is you requite you make the request for that document scripts dot PHP , and instead of downloading it as it did with script study HTML, instead of downloading at what it does is it executes it on the server without downloading it. So what happens is the script gets run in the servers computer in its memory in its processor Up, up in the cloud it gets run there, and then the script creates a product. It runs, and it creates a file. It creates something, and that's what it sends. So the the result of its of running the script what gets sent is the result, not the script, but the result of the script. So what this script does is it has that echo statement. That's what's what it's sending out. So you could think of echoes, print, echo and print being kind of the same thing. What's doing is what it's. It's creating this little file, which is which, the content of which is everything that you echo now. Obviously, I'm simplifying a lot, but what this script is actually doing, that's all it's doing. So when you save this, I want you to go ahead and you copy this out, save it and then run it in your browser. You know, your domain names, slash script PHP, and I want you to be aware that what's happening is you're not downloading the script. You're downloading the output of the script, Okay, so go ahead and do that and run it. So hopefully this was a pretty seamless experience for you. You go over to your domain and instead of script that HTML you give it the file name that you had here. I named it script up. PHP. You may, if you didn't is probably entitled that PHP. But go ahead and put that domain in that. Your Alan. I mean, and you see the output of the script now know that this is not the script itself. So if you view the source, um, the source is you don't see any script in here. You don't actually see the source because it's not downloading the source. It's just showing you the output. So this is Ah, this is the end of the in class project. You have now completed both a front end and the back end script. So you are a front end and back end script master and, ah, for the project. We will go ahead and write some scripts with a little bit more interactivity and ah, interact with the user and do something more useful 42. Content Management Systems: so far in this course, you've learned all the essential basic skills to Web development. You've learned about the Internet. You've been introduced to html, CSS, JavaScript and even back end scripting. And if you did the last project, you were able to work on an email widget that combined all these skills and knowledge. Andi showed how they work together to create, ah, widget that would allow people to email you on all the different pages in your site. So you may have noticed that it took a lot of time and effort to develop each individual page and you have toe. Even if we implement the principle of D. R, why don't repeat yourself. There's still a lot of extra coating that you have to do for each page, and it's just gonna take a lot of effort, and you probably don't want to be spending that much time developing your website. You want to be spending that much time developing your content. As we mentioned at the beginning, the content is the most important thing. That's what it's all about. So what we use is a content management system that kind of does all this for you. and in specific. We're gonna look at WordPress. So as you've been going along, you probably are taking one of two routes. You're probably either going in depth on each of these concepts, learning more about HTML, CSS and JavaScript. You're probably doing all of the optional homework and really putting a lot of effort into your project. Putting a lot of effort into the projects, um, or you're taking the other route where you just are trying to get the bare minimum in order to get a website launched and running. And you don't necessarily care about learning all these details and learning how to program and code and learning how to get into the nitty gritty of all of it. You just want to be able to manage and run a website, and you don't necessarily have the time to customized things and get really in depth and in the knowledge. So either of those roads are totally fine, and WordPress is. You may think of it as something that, because it manages it for you, is kind of like that second route that like easier bare minimum route. But it's not actually true WordPress you can do the same thing. You can take either route. You can either just get the set up and have your website up and running. And without much expertise or knowledge or going in depth or learning coding. Just start doing it, or you can really go in depth and you can customize. You can get into all the different aspects that plug ins themes. You can start developing your own themes, and you can make WordPress do almost anything you want. In fact, there are probably a lot of websites that you've been using that you never even realized were actually based on WordPress as the core. And they have been customized to the point that they're not even recognizable as WordPress . So before we get into the actual introduction to WordPress, let's look at a little bit of how all of these skills that were using work together in an actual environment where you're downloading and viewing a page from the Internet, and will kind of see some of the motivation for why you need a content management system 43. How servers handle multiple HTTP requests: So when you download a page you put in the URL and that you were all directs to the server and tells the server which filed a send you and usually the process goes something like this, the server will be sending you in html file because that's what you've requested. And the browser will start reading that html file top to bottom. It reads the entire thing, starting a very top just the same way we read, left to right, top to bottom. And as it goes through, it will eventually run into something like your CSS link element, which is a reference to your external CSS file. I'm so your CSS file is not actually in that eighth TML. It's separate. So when it gets to that line in your document is gonna send another http request to the server and ask for that CSS file. So we'll continue reading and it'll find maybe a JavaScript reference, and it'll send an http request to the server asking for that, and it will keep going along and find all these references. It's much faster for the browser to read through the entire Web page than it is for these http requests to go through. So while this is all happening, the server gets these requests starting with that CSS one finds the CSS file and then sends that down the line, Then it It's also getting the request for the script file, finds that file and sends it down to the browser. You can see this in action on your own Web page using the developer tools. For example, on Mac Option Command I four Chrome brings up the developer tools, and you normally have these Dom inspect stuff on the Elements tab. But you can move over to the network tab, and this will show you information about the http requests and all other network activity that's going on. So the first thing we need to do is reload the page so that it can capture that. Go to your own Web page and try this out once you refresh the list of things that come up starts with the main HTML file for your page. Obviously, that's the first thing that gets requested, and you can see here there's a chart of when that requests made. This is a time zero and then how long it took for the, uh for the browser to connect to the server to send whatever it's sending in this case an http request asking for the HTML file and then waiting for the server to go ahead and find that htp find the location that the http request is looking for. And then, if there's any scripting in it, for example, execute that script and then the receiving is the downloading. So in this case, because it's an HTML file and very small, it only took one millisecond to down. Though the HTML file, however, it took ah, 142 milliseconds, still a short amount of time, but a little bit longer than it took to download for the server to find the file and begin sending it so you can see that there are a couple included other files in this page in the HTML file, you have the style sheet, the Java script and then an image. Now look at this style. She and then JavaScript Vape began the http requests on Lee after the HTML was done being downloaded and loaded. That's because the browser found the references to both of these and in parallel start in http. Http. Request asking the server for these two files. Now you'll notice over here the status. These numbers are the http response code. So 200 means that it got it. Okay, 304 is a response code. That means the browser already has it in the cash, and the one on the server is not different. It's the same version that you have in the browsers cash, so it doesn't download it. So if you hover over, these will see that while there is some time maybe to connect and wait for the server, it won't actually be downloading them again because they already exist. So in this case, it was to milliseconds to receive the http response code and this case zero milliseconds to receive the javascript. Http response code. Now, if we want to get a clean slate to see what it would look like to download all of this the first time you visit the page, you have to hold shift when you hit. Refresh, and that will tell it to get new copies of everything. No matter what. It's basically like clearing the cache toe. Hold, shift and click. Refresh, and you'll see that it took a little bit longer. The times changed, so it still took about 350 milliseconds from start to finish to get the HTML file. Once it had got me html file, it got the CSS and JavaScript in parallel started both of those http requests At the same time, however, you can see that the style sheet was much smaller. It was 655 bites versus 90 kilobytes a kilobytes much bigger than a bite. So the style sheet download in 88 milliseconds, whereas the JavaScript filed, downloaded in 222 milliseconds. Actually, the style she downloaded in one millisecond my it took 88 milliseconds for the server to send it. So while these two http requests the requests were sent in parallel, the Java scripts continued downloading for much longer. And then you can see that it took a while for the image to even get loaded. So the browser wasn't able to make that http request for the image until this line was cleared up. And you can see this. This little line here indicates when the dom is finished loading and this indicates when the pages completely done loading, and you don't have to worry about those now. But this Purple line means that the browser has finished reading all the way through the HTML cover to cover, and it has parsed and and created its mental image of the page. The Dom. And that's when you start to see some of these things get loaded. 44. The Network Timeline tool: Another great tool in the chrome developer Tools package is the timeline Tap. Go over here and turn on this little recording button to begin recording and then refresh your page holding shift again if you want. Now this will give you an idea, and you can turn off recording after second. This will give you an idea of how long it's taking a lot of the smaller sub actions, and it'll show you some of the dependencies so you can see the very first request is the send request for the HTML file and that is expanded upon right here. There's a lot of different things that the browser does as it goes. The next request is for the CSS file, which triggered a couple of these other things receiving data, finishing the loading and then the Java script, and you can tell these air in parallel and then right here. This is an interesting one re calculate style. This shows how the browser uses the information from the style sheet after loaded it to re calculate the way the page looked. So this is called re drawing or painting, and this is part of where that fo you see happens the flash oven styled content. And then here you can see where the actual Java script script is being evaluated. I'm gonna scroll over right here. This is where the script is evaluated. So the script is loaded here, and then it actually gets run here, and you can see as its parsing through reading different things. So this this timeline tool is very powerful in that it shows you all the details of exactly what's happening, and you can collapse and expand the different parts. And as you scroll down, you'll start to see things like painting and composite layers. And this is a great way to debug if things were taking a long time. But generally looking at the network tool, you see the things that have this a bigger area here, bigger download size. That's a problem. And then when you see things that are depending on other things, that's another problem. Dependencies. But for the most part, what's gonna help you is to reduce the number of http requests. So that means combining all of your styles all of your javascript into one file each and reducing the number of images that are not already loaded and reducing the overall size 45. WordPress on the server: looking at the network tool. You see the things that have this a bigger area here, bigger download size. That's a problem. And then when you see things that are depending on other things, that's another problem. Dependencies. But for the most part, what's gonna help you is to reduce the number of http requests. So that means combining all of your styles all of your Java scripts into one file each and reducing the number of images that are not already loaded and reducing the overall size. So you can see that in an ideal situation, the only thing that's different on each page is the content and then maybe a little bit of information that goes in the header like the title, Um, so you can kind of idealize a website structure where there is this common layout. They where every page has a shared heading sidebar footer, shared CSS share JavaScript, and that never changes. And the only thing that does change between pages is just that content. And then as you switch between pages, all you're getting is the unique content for that page. And, of course, that's exactly what Wordpress duds. The way Wordpress works is a little bit different than our static pages. So far. WordPress is a server side script, a very complicated program that lives on this server. And it does a lot of things, including Manager Some databases. Databases are kind of like you can imagine, like if you've ever worked with Microsoft Excel or or a spreadsheet. Software databases hold all of the content of your website in these spreadsheets or databases, and then WordPress is able to access, for example, the content from certain pages pulled out of the database and then build a page that it sends to you. So the first thing that you need to know about WordPress is that it actually takes over the U. R L structure of your site for the directory that it's in. So if WordPress is in the main directory, you can type your domain dot com and then anything else. And no matter what you type, no matter what folder or file name you type. Even if it doesn't exist, it will be rerouted to WordPress, and WordPress will have control of it. So what's actually happening when you type in a U. L. Two a WordPress site is you're loading the WordPress script every time. It's just that same WordPress script, and what WordPress does is it looks at what files you requested, and it gets that information from the database, and it builds that HTML output. So you remember that scripts don't actually download. They only send the output to be downloaded. So what WordPress does is it builds the HTML file for the page requested. And then you download that you download the output of the PHP script that is WordPress that has compiled and put together the HTML page based on the UL that you requested. That's not all that WordPress does, however. This is one benefit of keeping your site organized, but we call it a content management system because it manages your content and because it makes it easier to create your content. If you're gonna create your content manually, you have to create all this framework and structure for each page individually. But when you use a content management system, you can log into that content management system. You can actually log into the scripts on the server, and it's sort of like when we were using shift at it. We were online, creating our content online. And then we saved it. Our page was uploaded. This is a little different in that you're not logging into a website that's connecting to your website through FTP like Shifted. It was your longing directly into your server directly onto scripts in your server. And so when you create a page in WordPress, you're actually creating it directly on your server, and WordPress will take the content of what you're writing and put it in the database, take the title and any other information about it and put it in a database. And then when that's requested later, it'll pull that information out of the database, build the HTML file and send that down to whoever requested it. So the great thing about WordPress content creation is you can actually create it without working with code directly. You don't have to focus on developing your website. You can focus on developing your content 46. Backing up your current site: So before you install WordPress, it's really important that you back up your existing site because there's a high chance of you losing it. Even if you don't think that you care that much about your site, it's nice toe. Have a backup of it so that if you want to remember how you did something you can look at your old pages that you made and remember kind of like is a reference how you did it. So go ahead and open up your FTP editor. Your are your FTP client. Now, this is gonna be files L a or cyber duck or something like that. Don't try and use shift at it. Or some other online editor. That's kind of a little bit different. So I'm gonna use cyber duck. Since I'm on a Mac, you can use whatever. Now, I already have this bookmark saved. If you don't have your bookmarks saved, go ahead and get that email with your account information and use that to create a bookmark . But I'm gonna connect. So here is my website and you can see I'm in the w w w directory or, um, you might have public underscore html directory. They're actually the same thing. And this is all of your information. Every single file and you can even model. You can even sort it by when they were last modified. So you can see kind of like which files have been working on recently. And the backup process is pretty simple. Go ahead and create a new folder on your desktop and give it a name and a date. I'm gonna call it l and b dot com back up, and then I'm gonna put today's date, and then you highlight every single item. I'm gonna click the bottom hold shift and then click the top and it'll highlight everything in between. And I'm just going to drag it into that folder with ah, with filed zilla. It's very similar. Um, you just drag it out of the server side into the folder on your desktop, or you can use that left panel that, uh, that it has, depending on how that works. So you can see I've put it in my little folder here, and that is your backup. So now you can do you have a couple of options when you install WordPress. If you want WordPress to be your main site. You may want to move all of this stuff into a little new. I'm gonna click up your sequence e into a new folder. So you might call this, um, learning and then do the same thing. Click the bottom hold, shift, click the top. I'm ignoring. See jibing because there's nothing in it. And then I need it and then drag it in there. So if you do this, then all of your site is now in learning. And probably some of your links and source references will break because you've changed the location. But it's preserved in this subdirectory, and the way to get to it would be your domain dot com forward slash learning, and then you get taken to your index. But look at this. This link will, um, work because I made a relative link. But you may find that some of your things break like this. Ah, the CSS is broken, so this is no longer styled correctly because I'm gonna show you the source. My CSS looks for, um in the root directory styles, styles that CSS but, um, the root directory. This is the root directory There is no Styles folder, the styles folders inside this learning boulder. Your other option is to, um, is to leave everything in the main directory and install WordPress in a separate directory , so it's up to you. 47. Installing WordPress: Let's go ahead and get started creating our first WORDPRESS installation on your servers. Now, the way you're going to do this is through the control panel on your server. Your server has some software installed on it that is called C panel, and it's a control panel that allows you to manage your domain in a lot of ways. The control panel for your website is located on a sub domain of your domain, so sub domain name is C panel for control panel. So type and see panel dot and then your domain name hit enter and you will come to this long in screen. Now this log in information that it's asking you for is the shout leaf account information that you were given at the beginning of the course. So go ahead and copy your user name and password and log in. Now you're logged in to the control panel for your server, so be very careful when you're in here, because you can break a lot of things. But you can also do some really cool things, and it's pretty user friendly. To be honest, it shows you some information about your site on the left here and then these air, all settings that you can change things that you can set up. You can even set up backups. You can. You can create new FTP accounts and change FTP account clients passwords. You can create new ones. Um, there's a lot going on here. What we're gonna do right now is we are going to install WordPress using the soft, delicious APS installer. So find that all the way at the very bottom and click on WordPress. Now, this wordpress installed gives you a bunch of information. But right here, we're just gonna go ahead and click on install and kind of ignore with rest of this, so leave this protocol alone. You have a couple options. Just leave it at http. Don't put the www. Otherwise, it'll require www every time. And then you should just have one domain here. As you expand your hosting options, you could have multiple domains. Now, this is ah apart. That's important. This directory, this this says where the WordPress installation will be. So if wordpress is gonna be your main website, which I recommend, I I do this on mine. Don't put anything here. Just leave it blank, and it will be directly in your main site. So if you go to your domain dot com, it will take you to the WordPress site. However, if you want WordPress to be either just like a demo or a test install, or you want it to be us a spy, a sub component of your site and not the main thing, and you want the main thing to be some something else you can type anything you want, like WordPress directory. And what this will dio is it'll install WordPress in that directory, and then if you want to go to your WordPress install, you'll have to go to your domain dot com slash whatever director you put like this. And then this will take you to WordPress. And if you don't put the the WordPress directory, then this will take you to whatever you've got in your folder that you've uploaded with FTP or whatever. So you have a choice here, depending on if you want overwrite your old stuff. So I'm gonna install this in. Um ah, Special director. I was gonna call it WP for this example. I'm assuming most of you, if you backed up. Your content will probably just want to erase your old content and and put it here. Um, by the way, this one actually erase it. It will just make it inaccessible. It'll still be on your server, so leave database alone. Um, you want soft, Delicious and WordPress to manage all of this data base stuff for used to just leave it alone. You can give it a name if you really want to, but I say leave it alone. Leave the table prefects alone. Now, here's where you can set up some initial settings for your blogger. You can change this later, but I'm gonna give it a name. That's the name of my website. And then there's, like, a little subtitle and then leave this alone. Now, here's where you create a admit account. So this and men account is not the same as this shout leaf account. What you're creating here is your WordPress account. So when you log into your WordPress site, you're going to use this information and it's totally unrelated to your shot leaf account. This is your server account information. This is your WordPress account information, so don't get confused on that. And if you really want to, you can use the same user name and password. However, I don't recommend doing that cause it's just gonna reinforce the idea that the same when they're not and when, If anything ever changes in the future, you're gonna be super confused. So I say, create a new user name and password, and this user name will actually be visible at times on WordPress, depending on how you set it up. So I would recommend you use a professional looking name because sometimes it will be things like posted by at men or whatever is here. So I'm gonna put Brenton just so that it looks like it's by me. And then here you gonna put a password and your admin email. It's important that this is your actual email address. Choose a language, don't go into the advanced. And then you can also email the installation details to yourself and installed. You should get a confirmation message telling you that it was installed properly so you can see that there's two places that you can go the main one here. It'll if you put the subdirectory, it'll be ford slash WP or Whatever you put, I put WP if you didn't have it installed in a particular directory, it'll just be a domain name. The administrative. You Earless how you law again and that will always be WP dash of men inside of whatever director it is. So because I have WP it's inside that sub folder. But if you didn't put it, you just put it in your main site. It will just be your domain dot com slash WP admin so you don't actually have to remember this, but let's go ahead and check out my website and see what looks like now. Now, remember I installed it in this WP directory. So here's the default WordPress install. It's got a fake little post here and a couple of links on the right that are pretty empty. Evenness a sample page 48. WordPress administration: So let's log into the ad men area so you can either scroll down, find the log in. In meta if you look it down here in the bottom When I hover over it, it's his WP dash. Log in dot PHP. You can either click on this to go there, or you can just type that directly in WP dash, log in dot PHP Or you can do the whole WP admin thing. Bill, it'll take you to the same place. Now, here, you're gonna put in the information that you set up during the installation. So this is the administration area of your WordPress site. Uh, also, people call it WordPress Blawg. So you are logged in now to an area that only you can see as an administrator, and this is where you can do all of the content managing and change all the settings and do basically anything you want. So on the top here is kind of a main navigation bar. That'll that'll stay on this top area as long as you're logged in. Um, you can see that this is a link right here to your main site. You can open it all open in a new tab. And so this is your site again. But now that you're logged in, you've got this administration bar appear That is just for you. When you're logged in and you can do things like edit the page you're on. If I click into one page, you'll see I have edit post stuff like that. So, um and then you have links back to all these different areas. So back to the administration area you got initially a dashboard that just has some information about your site and some, ah, quick snapshots of different areas and then on the left here is the main navigation panel, which has all of the, uh, things will be using to customize and build your site right off the bat. The most important things are posts and pages, so these are very similar their their ways of creating content, creating pages. But posts are like blawg posts and pages are like Web pages. So the difference is a post will go in your blawg and it's kind of tied to a specific date . So initially, when you create a post it the title of the Post will probably be something like the current date the U R L that it creates now. A page, on the other hand, is meant to always be available. And it doesn't kind of like and get old with time. It's something that's always there. So on most WordPress blog's you have, like a blawg section. This is this is actually a post, and then you have pages which are like part of the main navigation. So let's go ahead and create a post and a page to kind of illustrate the difference there. So you can either click directly on add new or go into this pages area, and then you see a list of all your pages. Right now, it's just sample page. You can see that one sample page there. A sample page is different than hello world. So the sample page I'm gonna create a new one. The only two things you really need to give it are a title and some content. This is the content area here. There's two tabs. I'm using the visual tab, which means I don't have to write in the HTML. If I want to make something bold or a Talic, I can use this button here, and it'll italicize it without me needing to write the code. Now, if I want to actually have a little bit more control in power, you could go to the text editor here and you'll see that it's actually the HTML editor. I can go in and edit the HTML specifically, but still WordPress gives you, Ah, a little bit of help, which could be annoying sometimes. For example, if I put a line break and start a new paragraph, WordPress will automatically go into your code, and it'll wrap a paragraph tag around Miss and a paragraph tag around this because you put the two line breaks so it's really user friendly. But it can be to user friendly if you're not expecting it to go in and mess with your code . So you have to be aware that WordPress will actually change this HTML text, even though it doesn't look like it is. So for really quick posts and quick content, this can be super easy. But if you're trying to do things a little bit more complicated, um, it can be frustrating and there are a couple of workarounds that I can show you later. But Anyway, let's go ahead and publish this and then once you published it, this button will change to update. So when you make edits, you have to click update and you can see here this is the link to the page automatically created a u R l to it. But also, if I go to my site and refresh it should show up in the navigation area. So this is my first WordPress page. And here is the page that I created. Now again, the page is different than the block posts of this Hello world. This is a block post. Now by default and WordPress, your home page is your blawg, and your blogged will show just a list of all of your block posts. So right now, I just have one. This one that was default created by WordPress. Hello, world. So let's go in and create a new blawg post. I'm gonna click on posts and you can see my one existing blawg post that was created by WordPress is a demo. I'm gonna create a new post Post is different than a page and same same format. Here. It's almost exactly the same. You have text editing or visual editing. Um, and then you publish right here, and it'll turn to update once you published, if you want to edit it. So now if I refresh on my home page, the navigation doesn't change because it's not a page. I just added, It's a post, and it pushed hello world down and moved up to post so I can click into a particular post by clicking on one of these. And then I can see just that post. And you see, I don't have hello world down there anymore, and then I have the navigation pages up here. 49. Permalinks: Let's go back to the dashboard. So right away. The first thing that I will have usually do when I installed is there going to settings and I'll go to, um I'll go to permit links down at the bottom here. So this is all that information I sat to begin with. That's General Donat perm links. This is how your pages get created. So know that the U R L for the first post I made is question Mark P equal six and the the UL for my page that I created here is Paige. I d equals four. Now, if you wanna have nicer, prettier looking links, the way to do that is right in here. So you can pick one of these options. Um, something like post name is a good way to do it. But post post name on its own may not be enough because, um, you may have lots of posts that sometimes will have the same name, the same title, and then WordPress will have to differentiate between them making get confusing. So another way to do that is to do day and name or month and name. I tend to think that just having the month, the year and the month. And then the name is enough, even if even maybe, just like the year in the name. But you can see as I click on these different things it updates the custom structure here. So there is this syntax. This means year. This means month number. This means post name, so I can kind of like mess with this if I want, But I tend to like to have post name at the end. There are some performance reasons that you don't want posting to be at the beginning, so it's good toe. This is probably the best one is just a month and name, so you get somewhat pretty links. But it's also divided by the month. Now when you save changes, there we go, so the pages will not have that month and year name in them. But the posts will, which, which is totally fine to me, because your poster tied to a day anyway, so you're block posts will always start with 2013 whatever month it is. And then the name where's your pages? Will just have the straight up page name. So this is our first step to turning it from more of a blawg to a page 50. Moving the blog page off the home page: So the next step is What if you don't want your list of posts to be on your home page, you wanted to have an actual page. Now they're setting for that to you go into reading. And right now the front page displays your latest posts. We can change that by having the front page be a static page. Now will probably want to create a specific page to be our home page. Maybe call it home right now. I could set it to this, and then you have to set a posts page toe, take over your blawg section. So before we do this, I'm gonna go ahead and create two new pages for that. So add new. I'm gonna make a home page, and I'm gonna update this later. And then I'm gonna create a blawg page, and I'm just gonna leave this empty. So now that I've got let's look at our list of pages. So I've got the sample page that WordPress made for me, the one we made together just now and then, Ah, home page, which I'll expand later, and a blocked page, which is empty. And the reason we want that empty block pages because we're gonna go into settings and reading. And now we're gonna set the front page to be home and will expand this later. And then The Post's page will just be blawg. And now when we say this and we can have some settings here, so this shows like the most 10 recent posts. If you've got 1000 block puts, you don't want to show all 1000. So this is how many you show on the block page, and then you can either show the full text or if you have long posts, you probably just want to put a short summary. It'll put like the first few paragraphs now that we've saved the setting. If we come back here and refresh, we'll see a couple of changes. So our home page now is just whatever we put in that page. We can expand on this later, my home page, and then if we want to see our blawg posts, we could go to Blawg. And then here we see the list of our two posts that have been updated here and then any other pages 51. Installing themes: everything in this appearance have. This is where you have control to really change things up. So right now, if I goto appearance, it will take me to themes first, and we'll see that I'm using the 2012 theme. I could also switch to the 2011 theme. Um, pretty soon there will be the 2013 theme, I assume, since they make one every year. So there are options within your theme to change the menus ahead of the background or to change to a completely different theme. Or you can find a new theme. So let's switch to the 2011 theme. Since it's already installed by default, all you have to do is click activate and it's activated, new theme activated, and now you can see that 2011 is the current theme, and down here, 2012 is still available. So now when I come here and refresh the entire way that this looks, the theme will change. Now it's a totally different site, right, but it's the exact same content. All the same posts home is still here, and that page that I may this is my first WordPress page is still here, so you can see how you you got a lot of power here and separated the content in the presentation. Now let's install our own theme. A new theme we can either look for based on keyword are based on some of these, um, I like toe. Maybe find a tree theme, a theme that has a tree in it. Only two results. Maybe find a theme that's got the color Blue 32 results. I can kind of see little demos here. This one's nice and fund. Now you can either just install or preview. First, the preview will give you a little preview of what the page actually will look like. So I like this one. I'm going to install it Now that I've installed it, I can either activate it or go back to our theme installer, so activate will actually turn it on. Or if you don't activate it, then in your manage themes, you'll still have this one. That's the current one, which is this one. But now, down at the bottom, you'll have this one to which you've installed, and here you can activate it. So new bit new theme activated and then just refresh Now I've got this very cool blue Rainbow sky theme going on with flat leaves and everything. So it's really easy to find themes, and I'll give you a little hint is that this installed beams search. What it's actually doing is it's searching wordpress dot org's the theme section right here . So there are 1732 themes currently on the WordPress Themes Directory, and you can look through the most popular ones, Um, or just find your own. So here's a cool one. If you're installing from wordpress dot org's, though, they're assuming that you're gonna download it and then upload it and then install it. So even if you find it here, the best way to go about installing is probably to get the name of it and then go over to your your appearance and then install themes and in the search and then paste the name of it and search for it, and then you can find it here, and then when you install it and activate it from here, you don't have to do any manual downloading. So here is my other theme that I just installed who I like this month. You can see that if I change the sides of this, it kind of changes a little bit. That seems to be a somewhat responsive theme. The menu collapsed in here when I made it small. And then as I expanded, it expands out here. So this is a responsive theme. You want to make sure that you've got a theme that responds like that because the size of ah phone is gonna be more like this and it's gonna break your page if it's trying to display like this. 52. Customizing the sidebar and menu: continuing our survey. Let's reactivate this plug in this theme because it has a more obvious sidebar and you can see it's a little bit cluttered. There's a lot of stuff here, so we want to get rid of some of these little things. Place for that is the next little item. Inside appearance is the widgets. Now here's all of these different widgets. You have surged recent post recent comments that corresponds to search recent post recent comments, etcetera. So let's get rid of archives and categories because we don't want those right now. Move him out of the way and then you can refresh and you can see this is simplified a little bit. And now let's add a couple of widgets. Let's add a calendar and then down here, let's find the arbitrary text and add that down at the bottom, and you can actually put anything you want in here, including HTM out. So you see, the calendar has popped in here, and then if we scroll down, here's the arbitrary text I put with HTML that I put right in there. The next cool thing is menus, so you may want to customize your menu a little bit if you just go with default. Any page that you create, as opposed to a post any page you create will show up in this menu here. So that means we created a blocked page. We created a home page. And what if we wanna either change the order or we want somebody's not to show up? Say, for example, we want to keep this. This is my first WordPress page, but we don't want to always show up in the menu, and we want home page to be first. That's where you come in here with the menu section under appearances. So the first thing you'll do is create a menu. You have to give it a name, and then you can create it. After you've created it in this themes locations, you have to select it and save it. So now it's active in your theme, and this is where you can enter custom links into your menu. Most of time, though, you're just gonna want to draw from your existing pages so good of you all. And this is all of your pages. That or if you just wanna if you have a massive amount, you can search for him, but this should be enough. Now, as you check these one at a time, it will add them to the menu. Now this order matters. So if I were to save it right now, you'll see Blawg Home Sample page and this is my first WordPress page that's order blogged Home sample page. This is my first wordpress page. So let's change the order up the way we want it and then say I wanted to get rid of this is my first wordpress page. I could have either not added it. Or now that I have added it, I want to remove it. Click here. So I've just got these three in my menu home blog's sample page and say, I want to put blogged last so you can really customize your menu exactly the way you want. You can also play with categories, but I'll leave you to figure that out on your own 53. Editing themes: The last thing is the editor inside the appearance section, and this is the most advanced. So when you go to the editor initially, it's going to show you all of the files in your theme. So I'm using the cloudy blue sky theme, and all of these files are all theme files. Now it's going to give me the style sheet style that CSS first, because that's probably what you're gonna be editing. So if I wanted to change things in here, the way I would do it is by going to the editor and editing this style that CSS This is the CSS fell right here. And since you've learned some CSS, you shouldn't be afraid of making changes in here. Even though it's a huge wall of text, you can figure it out slowly, especially using the techniques you learnt. Say, I wanted to change the size of this subheading. Here, I can use my inspect element tool and then find the subheading, and I can see that it's using this dot header DOT DSC probably stands for description, and I can test in here what size I want to be. That seems like a good size So now I can see right here that this is style that CSS That's the same one. I was just editing. So I have to remember dot header dot dsc I'm gonna go into my style sheet and search for that. I can see it shows up one time, one of one. So I know this is the right place, and here I can add in the CSS that I want to and I can save it. And now, even if I undo this, if I refresh, you'll see that the say that the size is updated. There it is. So this is how you customize your page and you can get into really advanced stuff like this is the header which will be about this area here. This is where you can get into the html on the PHP to modify that 54. Plugins: you confined plug ins to extend your site to do almost anything you want to start with. Let's add a simple one that'll track your visitors. Go to add new and then type the name of the plug and you're looking for, in this case, Google analytic ator. Now you'll need to set up a Google Analytics account in order to get this to work. But I'll walk you through that process because it's worth it. Google Analytic ater Install now, Yes, install And then once it's gone through, activate the plug in. Now you see it down here, go to the settings. We'll need to be logged into your Google account. Go ahead and click on the link that they give you and allow access. Copy the code they give you into the box and continue now. Initially, it'll be disabled and there will be a four or three air. So what you need to do is actually go in. If this is what the message you get, what you probably will is, you need to go into Google and set up a Google Analytics account. So go to google dot com slash analytics and make sure that you're signed in. And here's the sign up process. You're gonna be doing this for a website. Go ahead and pick one of these. I'm gonna go with Universal and into your website information. You have to accept the terms of service, and then your account should be set up. Go back to your page and refresh. This time that air goes away so you can click Enabled. Now just go ahead and scroll down. You can mess with these later, although you probably don't need to change anything. Scroll to the bottom and save now. It should be set up to see the tracking. Go to your dashboard and find the Google Analytics page here. I like to put it on the right because often the right is a little bit larger, and I like to drag it up to the top. A lot of these air not really that useful. So right now you'll have nothing. But over time you'll see a chart of the number of visitors, page views, visits, bounce rate and other useful data 55. Concluding WordPress thoughts: So that is the end of the high level survey of WordPress. It should be enough for you to get started. Although you can spend many years learning everything there is to know about WordPress just skimming the surface, you'll be able to get into a lot of really powerful stuff looking through, especially the plug ins, because you can extend it to all kinds of things. Image galleries, contact forms. There's an endless list of thousands of plug ins of people have created. Probably the easiest way to find the plug ins is not through the plug and finder here, but actually go to wordpress dot warg and then click on the plug ins link. And this will show you both the most popular links and the featured plug ins featured plug ins or ones that WordPress is featured because they think they're especially useful. And the most popular plug ins are used by millions of people sometimes and have a good ratings and for the most part, are going to be a good bet that a lot of people have found them very, very helpful. So go to wordpress dot or go and check out the popular plug ins, and then you can also search by the category of plug in as well. The other thing you want to do right away is pick a theme and then start customizing it. So find a theme that is similar to the way you want it to look. Start using the skills that you learned in this course, using the Dom Inspector and your CSS editing skills to edit your theme and make it look more precisely the way you want. The first stop to customizing a theme is the options in the theme right here. So some some themes have more options and others. And then if you can't get it away, look quite the way you want with these options. Then you go into the editor and start customizing things by hand. That is the end of this lesson. Go ahead and get started on the project. And, uh, let me know how things go