if you're a student that's doing cat and you are busy with your phase 3 pat i'm going to show you how you can get started with your website just a couple of tips and ideas of how to get started that can set you on the right path to get as many marks as possible for your cat pet so let's have a look when we are designing our website or when you're doing your very first page these are the steps i recommend that you take so first of all let's look at the very first step that you must take so we're going to start off with creating a basic structure of your web page that's using what you've learned in grade 11 on html using html tags the head tags the body tags and even the title text just get your full structure done properly then you're going to add a nice little heading at the top of your page and you're going to save that page as that particular heading so our first page is going to be our home page so we'll save that page as we'll call it home then we're going to create a table under that heading now it's going to be a one row table with three cells and the reason for that is because you probably need to have three separate web pages if the requirements change and you want to you need four if you want to have a fourth page then whatever however many pages you want to create that's how many cells you will need to make for that table and then inside that table each cell is going to be a web page name and a link to that particular web page we basically are creating a navigation structure so that we can use that and go to all the different pages even though they don't exist yet we're going to create a web page and the link to those particular pages and then we're going to add some color to the cells and the text to make it look funky in that so that's what we're going to do just to get started and that will set us on the right track to get all the marks for the website component of your pet okay so hopefully you've got notepad plus plus already set up and you can go and you can go you can save your file we're going to save it as a particular save as and you must make sure that you save it in your cat pad folder and save it our first page let's call it home that's a good way to start save it as home and remember to make sure that you've selected the type of file you want it to be a hyper text markup language file make sure that you've done that part correctly okay there exists yes there we go so what are we going to do first of all you need to put your structure in so we've got the html tag and somewhere at the bottom we are going to close the html tag get in the habit of opening a tag and then closing it straight away then our html document is divided into two sections there's the head part which must close and then below that would be the body part not the closed body but the body part and then right at the bottom before the html closes we will close the body and this way we get in our structure now just a quick little thing we're going to just add a title tag inside the head and this we will make it home because this is our home page so close the title you can obviously add some more features to it maybe you want to add more detail to the title home page or home page for your cat bet and you can maybe write your name or something like that so you can make a nice little title okay so that's our first step we've created our lovely little structure make sure that you save okay now if i go view this if i view this in chrome i've got opening chrome so there's my page you can see there's nothing there but you can see the titles at the top so there we go so that's great so let's go okay now in the body this is where we're going to work we want to create a heading so that's going to be an h1 tag and call this home page or i'm just going to say home page for now you can change it later to what you want it to be and that's this is where you're going to start dealing with your colors and stuff like that you can do that at a later stage okay so let's go to see what it looks like okay boom there we go home page and you can center it and blah blah blah blah blah okay so that's i'm actually gonna do that i like that alarm equals centers okay so there we go there we go so okay it should work run in chrome there we go nice and in the center you can change that at least maybe you want a more chin home page title but you get the idea remember i'm not doing the project for you i'm just giving you a way to where you can get started then i'm going to create a table we said we wanted to create a table so they open and close the table and we want one row so inside here we're going to say one row that's all we want one row and we want three blocks basically three cells so there's a cell and i literally i'm going to copy this three times okay so there's my three cells okay so what do we need to do first of all well i want my table i want to have it to have a border just so that i can see what it looks like you can't take that border away and i want the width of the table to be the full width of the page so i'm going to make it a hundred percent like that okay so let's try that and then let's just i'm just gonna put a one and a two and a three inside the cells but not just so that i can see what it looks like so let's run it in chromebook and there we've got a lovely little table okay does everyone see our table fantastic okay now i don't like those borders you don't have to have those borders if you don't want so we can change them later but we are going to create our web page and we want to have a home page so the first page will be our homepage and you can decide what your next two pages are going to be maybe you want a page to be about your findings and then you want another page to be about your uh i don't know what you wanted the second the third page to be maybe you want it to be like research maybe we want to make it about research okay or your maybe you want to references it's up to you how you want your three you decide you want to plan your pages so that's what i'm going to do now those pages don't exist yet and the reason and i'm not going to create them until this page is 100 done so there we go so there's my table and i want to align them in the center so that the text is in the center so i'm going to align them in the center let's run them in chrome so there we go nicely in the center and obviously you can go and put in some fonts if you want it's up to you you're going to decide on what fonts you want and now this is what we need to do we are going to make these into hyperlinks and so that is going to be the a tag i'm actually going to put them on their own line so that's an a tag and that's going to be a close a tag and that's going to be an href and that's going to go to the homepage.html because that does exist that does work okay so that's great now this page is going to go as well to another page to a page which i'm going to call findings finally install html now i don't have a file into html page so this link isn't going to work but that's fine we are going to create it later but i'll tell you now now i normally recommend that you create the web page first in this case i'm not saying you must do that because i'll tell you now at the end why i would recommend that you don't create that page first first finish your home page and then you can add in your your links to all be doing the links first and then we can add that later so this page we're gonna call research.html so there we go so there are the links now these two pages don't exist but when i do exist when i do create them i must remember that i want this page to be called findings because that i'm referring to it now in the past technically i'm going to call it finds.html so when i make that find it i must make sure that i save it as findings.html so that this link can work and the same for research when i make that page i must make sure to call it research.html because i want this link to be able to go to it and those pages must be in the same folder as your home page so there we go so we've got some links going so let's run and look at it so there we go we can see the links now those links will not work because those pages do not exist so if i click on it it goes uh can't find it however the home page does work because it is on the home page it's just technically going to go to itself that's what it's doing technically okay so that's so that does work so that's not going to be a problem and so yeah we get to the funky part where we can make it the layout quite nice now i'm going to change the color of the particular cell so there we can say the bg color of this particular cell and you can start getting a nice color scheme so you can look for a nice color scheme online that you want to use for your particular website to give you ideas about color schemes i just went onto google images and just typed in the color two colors that i like and then color palettes and it will give me a whole bunch of good combinations that we could use so let's say and try to find the ones that have got codes because that's going to help you a lot and it's a lot i really like that color scheme so i'm going to use those codes there so for this i'm going to use actually let's find a different one with a little bit lighter in it so let's try this one's probably a little bit better let's try that one okay so i'm going to use this one i don't like that orange but i like these colors so what i'm going to do is i'm going to use that to o2 34 7. so i'm going to use that particular code in my particular website so let's go 0234 so the bgo2437 and if you're using these colored codes you must put a hash in them okay so that's going to be the background color i like to put the background color in every second cell so i'm also going to do the research tab as that particular color so if i save it let's go have a look at what it's looking like running chromebook so there you can see the color and now i want the text to be that yellow so the ffb703 i want the text to be there now here's the little trick for color because this link is already blue okay so how do i make sure that i override the links color for the blue so i'm actually going to come over here and put a font tag in and i'm going to say the font color equals and i want that particular color that we had there what was that color ffb703 so i want that to be ffb703 as the color for that particular font and then at the end of the link i'm going to close the font tag now let's see if that works so we closed the font tag then we did the a tag let's see if that works for that first cell if i run it in chrome you see it doesn't change the color at all so that didn't work at all so how can we do it well let's try and move this now the font tag let's move it inside of the link and then i'll move that inside of the link over here so we do the a tag first then the font tag let's see if that works if i save that and run it now you can see it's changed that color so that's great so that's that's what i'm looking for so what i'm going to do now is i'm going to change that to yellow and then this cell i'm going to do the inverse i'm going to make the background yellow and the internal the text is going to be that particular blue and i'll just do that now quickly so i've gone and done that already so you'll see cells one and three have the same background color but the yellow text and cell the set middle cell has the same background color as the text of the other two but the text is the same as the tech or the there we go that so i've inverted it so that color is used for the background but it's the text in this one and this one is the background here but it's actually the text in those ones and so we create this type of effect that i want to show you now when i'll go view it in chrome so there you can see the different cells so you can have a nice little navigation structure so that'll go to the home page and that'll go to those two pages when we create them last little bit just to make it snares up a little bit first of all you'll see that these blocks are the different sizes because they're adjusting to the length of the text i do not like that i want them to be constantly the same size blocks so the in the td section after the the color i'm going to make sure that the width of each cell is a percentage now the three blocks so each block should technically be 33.3 percent so 33 percent for that width and for the second block i'm also going to make the width 33 it doesn't actually matter for the third one because it will automatically be what's left over so they have made the width for those now by doing that we can view what it looks like yeah we can see that the blocks are a lot better and now you can do other things like for example i don't want the border so i'm going to make the border equal to zero so if i do something like that let's go look at what our page looks like so now it looks like little blocks like open blocks like that you can do something you can play around with the cell's um padding and the cell spacing just to make it a bit bigger and so on um but you there you get the idea and then last little bit i'm gonna do now just for my last little bit i'm gonna include we had that nice i like that 219 ebc 219 ebc so in my body pg color that's equal to hash 29 1 was it 29 1 what was it 21 not ebc 21 [Music] non ebc that's for the background color let's just see if that works run it that's not the right color maybe because i forgot to put a double quote there let's try that let's save it and let's go back to our page let's refresh there we go that looks a little bit now you can start to see your color design coming through you can change your fonts of your text to be a particularly yellow and your logos and stuff again so you're starting to get your theme coming through by using those particular colors that we like over here and as i alternate between these particularly these four colors is what i would probably use maybe a different yellow maybe i'll go find that yellow as well so that's how i would design my my web page now that's there we go there's this the start of it done now here is where you will put your details for your home page obviously including all the tags that you've learned you want to make sure of all the tags you've learned over the last two years in all the pages so don't do everything in one page but do a couple like maybe you want to do a list of a year maybe you want to do some paragraphs over here and in this one you want to list space it out then once this page is perfect your home page is perfect and you happy with it you've done the right colors everything's perfect then what i suggest you do is the following home page once it's perfect then you go and you copy this particular page that you've got your your homepage because you know it's perfect all the color schemes are done everything is correct now i'm going to copy that page so copy it and then i'm going to paste it twice why am i pasting it twice because the one copy i'm going to rename to findings and the other copy i'm going to rename to the other page that you want to call but this in this case we call it research and then i'm going to edit the findings page in notepad plus plus now when i come here to notepad plus plus i'm going to open up the findings page now this will be my findings page and here i will give it the heading of findings and i will save this page now by doing that you'll see that my links now all work so if i come here to the findings page when i click on it you see we have the findings page and when i click on home i'm on the home page and when i click on research it'll take me to a page that looks like the home page but it's actually the research i must now go edit my research and that way you've kept your color scheme and your navigation structure consistent throughout all the pages so that's how i would recommend that you set up your your web page that you can get everything nice and consistent and it'll make your life a lot easier so again do this nice little navigation structure make sure that your home page is perfect with the color schemes that you want and then once that's done copy those two pages or copy that page twice one for whatever you call this page one for whatever you call that page remember the name must be whatever the name is in your href over here must be exactly the same if you want your navigation structure to work so hopefully this has been useful to you for more cat pat tips go to our youtube channel click on the subscribe button go to our playlist you will see a list of all videos that can help you with your pet and remember don't do it the long way do it the mr long way