How Websites Work and Make Money – Secrets Exposed!

in this course you will learn how web pages work you can download the attached file and then play around with the with the actual things you learn inside this course keep in mind that any web page is written in the language. HTML so in this you can use the web browser and mess around with this example for example here we can change something let's change the is and click show web page and then the result shows on the bottom so you'll see the content changed so we can change that and click show web page to see the results so that's one way you can mess around another way you can do this is copy the code into a new file and then save the file so with your with actual web page code going to click save save as and for example example HTML and then you would be able to open that file so if I now open example HTML you'll see it shows the actual web page now the most easiest of course is just to use this example where we can change the codes so in this course you will learn how to make web pages how web pages are uh how that actually works internally and how what is Java script so is we go into a bit the scripting language we'll go into stylesheets it's a technique to make web pages look the same so if you have many different pages you don't have to rewrite a lot of codes but you can actually make them all look the same and we'll go into some security vulnerabilities that happen with many developers and many people they make mistakes security mistakes that can lead to malicious so we'll go in to sensitive data exposure and HTML injection so two vulnerabilities that can exist on web pages and we'll explain how that works inside this course as well so by the end of this course you'll be able to make your own web pages to do some javascripting to create your own stylesheets and also to prevent some security mistakes that might happen in your own codes or with other people's web pages and so it's really like a more developer kind of oriented course but it has some security Parts in it as well and it's really a total beginner course so you don't need any prior knowledge about web pages about hacking about security or anything like that it's really a course that is to created towards total beginners and all you need is a web browser and that's basically all you need for this course you don't need anything else besides that so it's a really basic course you'll learn the absolute basic of how web pages work and also some of the security risks that might happen with web pages by the end of this course you'll know how websites are created and you'll know basic security issues with websites so when you visit a website your browser so that can be like Safari Google Chrome Firefox the your computer your the program called the brows so that can be Chrome or Firefox or any other makes a request to a so-called computer which is called a web server this web server ask a file so for example slash cookies or slash about and then it sends that request to the web server and the web server in return sends you the code of that website back so you connect with the web server with your computer and that returns all kind of code to your computer and that code is then turned into a website by your browser so the browser's task is basically to turn that code into a website this is the same with any website for example here we have a website and you'll see the code that is given from the web server on top and the web browser then turns that codes into a into a website now this web server can be anywhere in the world it depends on what you type in your browser for example if we open a new tab and go to google.com for example we go to google.com and I can you'll see it returns a website you in most of all browsers you can right click and click view page Source or view source and that will show you the codes of the actual website but depending on which website you visit for example we might visit something else some other website and right click view source and you'll see that Returns the code that is actually sent from the server and the browser then turns it into a website that you can view so any website is written in that code and that code is called HTML codes so you'll see HTML code so on top here we have HTML code if you took at look at the website before you also saw that is HTML code any website is written in that HTML code so there are two major things that make up a website it's the front end and the back end so the front end is what your browser shows so any code is then given to the browser and shown that is the front end and the back end you usually websites have some kind of database where the data is stored or they do some processing so there are many things that a web browser can do here you just see some of them so from the code it turns that code into a visible website for example you have all kind of text here so what is a TCH a TCH is those you see here so every line has a TCH which some code in between smaller than greater than and the end teag so you'll see most of them have that and some of them have things in between for example we we have the head tag which the title in between with the title tag and the end of the head tag the body tag and the end of the body tag so website is made using all kind of texts which have different meaning to the web browser so uh that is HTML it's short for the hyper text markup language so you can forget that just remember HTML is the language that websites are written in so the Texs also known elements are the building blocks of a website now here we see a simple website which code so the HTML code is then turned into this website so first let's go over those Texs so the first stack defines that we want to use code which version so this tells it use latest version now this is the root element of the website so all the page comes after that now many websites have some information like title or a favicon so the little icon you have in websites like here there's a little icon that's the fav Eon so all that you would Define in the hattech so that section you can configure for example the title and the other kind of information like favicon and stuff like that then we have the body text which contains the actual website code so the actual thing that is shown inside the web browser so H1 is the title so I can show you that so that's not the title shown on top in your tab but it's the title shown in your page here so if we click on show web page you'll see it shows this is is the title and we can change that into anything so you'll see that changes the website just by changing the HTML code the H1 Tex so H1 just is a big line of text a header text so you can we can add another one for example and we have to add the end tag now if we click run you'll see now we have two there so H1 tag is just large heading next we have a paragraph text so this paragraph can be any length just chose text so you can add whatever text to your web page you'll see now the little text here has changed next we have image tags so the image tag it shows an image on the web page and you'll see we have two images here but one doesn't show and you'll see they have a source component in an image TCH and the source component defines the image so you'll see here we have the image tech-1 JPEG and cat-2 it doesn't have any file extension so let's see in that directory so I'll go into the image directory and you'll see there is a cat to but it has a JPEG extension so we can change that into dot jpeg so this is just the directory of images I have in my computer and you'll see it's cat- two. jpeg so now if I click your web page you'll see the image is visible so the actual web images can be images on your server or it can be images on someone else's server so with any internet web page when you search for images you can right click and copy image link or copy the image you so that would work as well is if we say paste that in and click show you'll see it gets the image from someone else's server but in this case we used the images on our computer now it says here add image of a doc so we can do that we would type image source then the location of the image so have doc. JPEG and we can click show web page so you'll see now it added another image to our our web page so this would be the same in every browser so whether you use Safari Chrome a fox Escape don't know whatever browse it would show html text as an actual web page and so it's really nice because you can add as many images as you want or as many texts depending you can just display your text basically so we have some other images like animal. JPEG and you have to be careful when you include the images because for example now it won't work and why is that because here we have the extension. JPEG and if you actually look at the image file here it says do jpeg with an E so you have to be very careful to specify the exact file name otherwise it won't display your image now of course you can add more text this is actually HTML commments so even though there is this text it's not shown anywhere on the website so you can write anything between commments for example we can add a commments whatever text you want to display or to to add here when we run it you'll see it doesn't output anything because comments are ignored by web browsers so you can add any comments in there but web browsers will ignore them completely and so any comment is written using this tag and has this final tag and it's just ignored by the web browser so you can add as many commments as you want but of course it's optional so you can also delete them now we could add another paragraph text with the ptag and the end tag and now if we click you'll see it added some text here on the bottom so the P tag X as a paragraph image text at images one as a header and the title text a title to the screen now there's different types of headers and they can they're just numeric so you can say H1 H2 and I'm going to copy it several time because we also have H3 H4 and H5 now keep in mind those texts must end with the same name so if it starts with H3 it must also end with H3 or in this case starts with H4 it must end with H4 otherwise it doesn't make sense you'll see it changes fromed to green and now you'll see there's different headings so they have different sizes H1 is the biggest then H2 smaller H3 smaller and so on now so there you can use them to write your text with different headings of course not everything would be in capitals you would have May chapter and a paragraph and a sub paragraph and depending on your website so using H1 up to higher numbers you can create different size of those headings now if I click show web page again you'll see those web pages but if I hold my mouse on top of them it doesn't show any text so you can describe images using the alt tag so in addition with the source parameter or there's also the alt text when you can add some text for example you can add some little text there or any of them and then click show web page so it doesn't seem to show anything but when you Hoover your mouse over it long enough it will show some text on top of it so that is the alt text it when you hold your mouse over it long enough it would show the description so those are the basic tags ofl web pages of course we can also change the title tag here and the title text is shown in the web page titles so in this case you don't see that but the title text will show the T title whereas H1 here is not a title but it's just the text you see here so something to keep in mind and write all your codes between the body text so the body text this is the beginning and this is the end so between those Texs you have have your website that shows so don't put your code inside the head text because that is for General web page information like the title The favicon and things like that so that's how basic uh web P Pages work of course we can change the order for example if we would put this one uh in the first in the code you'll see the actual order changes uh or we can change the first one with the second one perhaps you want to show first the doc so the order of the code is also how it's shown in the web page itself now the web pages themselves they are styled using a language called stylesheets or css casc sty sheets and with that language we can Define how the website should look like or what the website should look like and the nice thing about the stylesheet is that stylesheets can be filed so they can be included in many web pages and all those web pages will then look the same instead of could imagine if we would Define here that the title should be red then every new web page we would create also we need to Define that color is red so instead of doing that you can include a stylesheet so with a stylesheet you use the style tag and they have their own language called the CSS language and for example we can Define that the color the text should be red now if we run this you'll see now the colors of the web page are red because that is what defined in our stylesheet you can Define other things for example maybe you want the color to be blue you could Define custom fonts and many different things with that stylesheet codes now you might want to change some other defaults so you can do tag specific for example H1 we'll change the H1 you'll know we used body here that's because everything is between the body tag so when we do body it changes everything in the body tag but we could for example do H1 and that would only change the H1 tag so we could say color green and now click show web page you'll see now only the H1 tag is changed and not the paragraph text so we could say for example body in general we want a black text so you'll see the text is black but maybe we want the paragraphs to be have a red color and now we could click show web page and you'll see and the actual text is now in Red so this code is called skating stylesheet or css so CSS is the actual code you can also change many things like background or have use a background image for example you could say background light blue and now the background of the whole page would be light blue now when you don't Define any sty sheet it's uses the web browser defaults so you can change anything including the size or the type so we could say font style italic that should make the text italic and you'll see there the text now changed to italic there's also the Boldt text so you could say Boldt turns it into bold text now by default this header text is always Boldt so that's how you can define a sty sheet and this is called an internal sheet because it's defined in the website itself so when we have another web web page you would have to write those same codes again so that's a bit impractical what you can do instead is to save your stylesheet to a file so we can create a new file so we will save our stylesheet to so I'm going to name it style. CSS and now we can include that file in our web web page so instead of finding it manually we can now include it our file and I name is style. CSS and you'll see we have the same style but now it's loading that style from a file called style.css so we use the Link tech with real EST sty sheet so this how we can include an external sty sheet that Styles sheet is now a file and that file is called style. CSS with the actual code that we defined so now if we would change the color here for example to and click show web page or actually refresh show okay that's unloaded the web page so let's include style. CSS and click show web page you'll see now the tag is r as well so this would load the Styles sheet from an external file and any web page we create we can then include the same St stylesheet JavaScript is one of the most popular programming language in the world because it runs on the web so why people use JavaScript is because it makes Pages web pages interactive so HTML will give you page like this but it won't be interactive right so you can move things but it's just static page it doesn't move it's just exists and you can read it like a magazine but when you use javascripts your web pages can be interactive and you can fully control the web pages and that's also how any web app on the internet is made without JavaScript they would just be pages so JavaScript can be dynamically update the web page for example with a button or with timers and so on so JavaScript is added inside the code as well using the script tag so for example you could use the script tag and then include some some JavaScript and then the end teag so that would includes the Javascript file funny. JS you see any Javascript file has to JS extension can be included like this now of course we don't have this funny. JS file if it would exist this is how you would include it using the script tag JavaScript makes any any web page interactive you can also include JavaScript codes directly in your web page so you could say script and then the endtag and then you could write a line or multiple lines of JavaScript in there and so that's one way you can add JavaScript now you can also use JavaScript inside buttons for example if we add a button to the web page Buton of course only makes sense if the web page is interactive otherwise why would you have a a button in a web page that just shows text and images so you can say button with the button text that would add a basic button of course we would want to add some text so you'll see a button here at the bottom of the screen let's move the button all the way to the top so the button text Will tag will add button to the to the screen you'll see when we click it nothing happen we can link it to JavaScript or with JavaScript then something will happen for example we can say onclick and then is equal to and then your JavaScript code goes in there so for example alert clicked and you'll see now when I click show web page update it we can now click the button and it shows a little popup now the alert function in JavaScript so this is a function you can recognize function with the brackets and the semicolon on the end so that's how you recognize functions in JavaScript and this function alert will display that you put in this little text so whatever text you want to display we click show web page and click click me and you'll see now it displays that text on the screen so you can do that click is so on on click events you can run function of JavaScript so three different ways to to include javascripts now we can also change text on the web page but in order for that to happen it would need to know the idea of the tag so we can give the for this for example an ID with the ID attribute and say let's give it some name for example header and then in the on click function we're actually going to change that code and we're going to grab that header so documents get Elements by ID then specify that we want the header and we say dot inner or we can try text is okay so let's see if that works might need a semicolon on the end you see that didn't do anything we might need to give it a little parameter in front you see still didn't so let's try inner HTML so you can mess around a bit with e code to to make it work so in this case so in this case make sure that the header or the ID you give it is actually the same so in this case we gave the ID using the little Dash here and then we could say change the text of that button so if I click show web page I can click on the button and it changes that instantly now we can do that for anything on the web websites so let's give an idea to for example the text low and then add another button where we change that text so button we add another button and let's say change text so we have another but button and when we press the first one the title changes the second one is not linked with any JavaScript yet so we can add the on click attribute and then call JavaScript so the same code documents. get element by ID but of course we would need to select the ID # text one and we can say do inner HTML is and then your new text so now if you run it we can use those buttons to change the text on the website so you'll see now it interactively changes that to the text we specify here so all this code this is a line of JavaScript and this is a line of JavaScript as well so you can make websites interactive using JavaScript many programmers what they will do is use JavaScript script libraries so many functions that is written by other people and then use that in their websites so they would do that on top and include script of uh other people source is some website.com file. JavaScript and they do that because it saves them a lot of time they use the building blocks of other people websites other people's JavaScript files and that makes their life a bit easier you can load at JavaScript when the page loads for example if we say script and of course the antech now we can say create some function so we remember functions are written using the name and the two brackets now we are actually defining a function so we need the begin and end Texs so this is the end teag and the end of the function and the begin of the function and JavaScript needs to know it's a function so we also write function in front so now we have a function a function loads which has the begin and end of the function and we could say show some alert with some text and when if the window is loaded so window. onload we you can actually load it so that would show the alert box when the web page loads so this is another way to include JavaScript one of the security risk in pages that happens sometimes is sensitive data exposure that occurs when a website not properly protecting its sensitive information to the end user for example here we have a log Forum website with username password we know now that we can look at the code of this web page so if we do right click we can click view page Source or view source and that would show the HTML code of the of the web page so the same code that renders the web page now sensitive information could be shown inside this code for example we know this is a login form and there might be comments in in the web page that uh Expos some data that shouldn't be exposed so if we scroll down here you'll see there is some comment here you see the HTML comment tag and it says here developer login username password right username password so now we would be able to log in to the page because the sensitive data is exposed inside this web page so we could not try to log in because we have the username password we found that Now comments on the web page itself so comments are always written in this commments are always written like this so this is the beginning of a comment and the end of a comment and you'll see in this case the username password was exposed so sensitive data can be exposed JavaScript can also have commments and javascript's command have the two slashes in front so that is then not executed by the browser so both are different styles of commments either slend front for JavaScript and this style for HTML comments and sometimes sensitive data is exposed so that could be a username password or maybe just a username or some other kind of information that a hacker might use to gain access to the system let's take another look at a security risk with web pages one of the security risk is HTML injection this is a vulnerability that happens when input is not sanitized so here we have a simple web web page where we can enter a name so if I click on it enter some name and you'll see the text here on top will change if I click the button so very simple web page and it does that using JavaScript of course because it's interactive anything directive is Javascript and so here we have the code this is the general information of the page and this is actually what is on the page so between the two body texts so we have a paragraph text showing the meting an input text or an input field both of them have a unique identifier so you'll see ID here and ID here both of them have a unique identifier that JavaScript then uses so here we have on click with JavaScript codes to change the value so value of hashtag greet is changed by hasht name so whatever is in the input field so very simple website code the main problem with this code is that the input is not sanitized anything we type as input is accepted so we could say for example some paragraph text here with whatever text we want so we actually insert html text as input and you'll see it adds that to the page now this might not be so obvious so let's use the Bold tag and you'll see now we have the we inserted our own malicious HTML code inside the web page and now we could change actually how the web page looks because the input is not sanitized we could say that's an image so an image on the server or anywhere on the web and I'm going to make it some smaller so you'll see now we we injected code we injected an image in here so of course we can inject different images so this is not the behavior that you would want in a web page where the input is not sanitized now there are several tricks you can do to prevent this instead of for example saying inner HTML we could say text content so when we do the use text content instead you can no longer inject HTML so you'll see if I reload the page and click click me you'll see now the it's actually showing everything as text so that's another vulnerability for web pages so the rule is Never Trust user input because what the user might do is try malicious input so might try injecting their own malicious inut which HTML code or some other type of codes as their input and that would be of course really bad situation because hackers will try to can manipulate now your page using the codes but sometimes even more bad things they can do like access the server using all kind of malicious tricks so always you want to sanitize your inputs