Website Authoring Guidelines for 2020

In this video, we are going to see about website authoring from February March 2020 paper 3-1. First, we want to create the task 1 evidence document. We want to create the evidence document in a word process document that means Microsoft Word. In that, we want to enter our name, a center number, candidate number should be appear on every page of the document. and we want to save the evidence document in m20 evidence underscore evidence with your candidate number now i am going to my work area already i created the evidence document i am going to open that so we i added the my name my center number and my candidate number in the header position next we are going for task 3 web page we are going to create the web page and edit a style sheet for just type for us the web page and style sheet must work in any browser all color codes except those provided in the source files must be in hexadecimal make sure that your style sheet contains no html so we are going to create the web page and we are going to edit the style sheet for one of the company the company name is just type four first create a new folder called jd4r so we want to create a new folder so i am going to the work area i am going to create the new folder right click your mouse go to the new and click folder and i am going to type the name jd4r let's locate the following files and show them in a jd4r folder okay we want to locate these three five files on the jd4r folder so put your work area copy the file aircraft 84r 84r logo ship and black one copy this and paste on the gd4r display the content of your jd for our folder showing the folder name all file names extension image dimension and file size we want to display the content of the jd for our folder they are given some other things so go to your jd for our folder go to the view sometimes it is in the large icons so if it is in large icons means click the view and select the details okay After that, go to the add columns and go to the choose columns. Already I gave name, size from this. You can select. I will show one more time how to select all the things. First, go to the view and check in the layout whether it is in the details. If it is not in the details, you want to click the details. After that, go to the add columns and click choose column. In this, in the question paper, first they are asked. first they are asking um folder name so i am going to folder folder name next they are asking all file names so all file just a minute file name should be there Next extension file extension is the next image dimension and file size image dimension it will be as a dimension and the file size file size will be as a size size and click ok so now we got all the these just if you want you can mix drag like this next take the screenshot of your jd for folder and paste this in your evidence document make sure that the folder name all file names extension image dimension and file size are clearly visible so first go to the folder use the snipping tool if you go to this search you can type snipping tool s-n-i-p-p-i-n-g-t-o-o-l click this click the snipping tool click new drag from the address bar copy this and go to the evidence document in evidence 2 they are giving the adn as evidence so in evidence 2 i am going to paste go to the format and give the correct you can uh give the brightness like that if you want we can make it bigger next create a web page called jd4.htm and now we are going to create a web page using front page go to the front page go to this bar open the new page this tab click the page click normal page and click ok so the new page will be open first they are asking we want to create the new page name called jd4.html so go to the file save us go to their work area go to the jd4r folder and save as jd4r dot html and click on save this web page next this web page must work in all browser and will have your table structure as shown below so we want to create the new table in this format okay actually they are giving row number one row number two row number three row number four okay four rows and two columns are there so we're going to give four rows and two columns go to the table and click insert and click table and give four rows and two columns next for if in all the pushing paper they sometimes they will give the table structure if you create the table we want to give the width of the table okay how we can find the width of the table see the first row it is in thousand width the first one will be the width and 200 will be the height okay for all the tables in the all the papers we want to give the width so in the first row a we are having thousand okay so we want to give the thousand in some of the past paper they will give in the last row or in the middle row in the first row they are merging merging this cell so we are giving 1000 we are mentioning 1000 so we want to give the table properties as 1000 select the table right click go to the table properties and give 1000 and it should be in pixels apply and click ok so we give the width of the table no need go for the i let's see the first row they are merging this cell so i'm going to measure the first row next they are merging we can imagine from this row c or we can mention f your wish so i'm going to do for the c as this cell it will be look like this now each table cell is identified with the letter and all dimension or in pixels okay so we want to give the pixel for the each cell for the first a we are given thousand width and 200 height so what we are going to do we are going for first row okay for the i should be thousand and sorry the width should be thousand and the height should be 200 so go to the front page and select the first cell right click your mouse go to the cell properties and select the width and i the question in the first row they are again thousand and i should be 200 and you want to be very careful whether you are giving pixels click apply and click okay the second one they are giving 360 and 270 so select the second one select the cell table cell properties and select the width and i and check what they are giving 360 270. So I'm going to give us a 360 and I should be the 270 apply click OK for the next one we are down I'm going to give 360 120 so select this right click go to the cell properties with and I select reducing pixels and 360 I should be 120. so i'm going to give us 120 apply and click ok for the last one in the question paper they are giving 360 270 so select this right click cell properties select the width and i do 360 and the height should be 270 apply and okay for the c they are giving 640 and 390 so i'm going to this one right click then properties with and i and go on checking a question 640 390s thank you it's 40 and the height should be 390 apply for the last one we want to give 640 and 270 so for the last one go to the cell properties select the width and i fix for p and the height will be 270 give the height as the apply next they are saying the letters and dimensions showing the table must not appear on your final webpage then the table border must appear on the final webpage so we want to give the table border so like this right click table properties and check whether it is the size is one you can give two they are asking table borders on the final apply and click so we give the we create the table like this now in cell A we want to paste the image jd or 4 logo in cell A we want to paste insert the image jd 4. logo and set the width of the image in html to 1000 pixels and maintain the aspect ratio so I am going to the cell A go to the insert go to the picture from file go to the folder gd4r folder and select the gd4r logo and insert so the image is bigger in the question paper they are giving we want to set the width of the image in the html to 1000 pixel and we want to maintain the aspect ratio so first select the image right click go to the picture properties and sometimes we cannot edit this we cannot edit this so we want to check whether the specific size is in the tick position if it is not tick position give the tick position and the width we want to give 1000 and the height i'd go on checking the first row 200 so i'm going to give 200 sometimes it will change if you are changing the height the width also will be changed at the time we want to untick the keep aspect ratio and give 1000 the height will be 200 and check whether it is in pixels yes after that we click the keep aspect ratio and click ok so we give the image like this next place in cell be the image to be used to select diving ship drugs in the be the be we want to insert the image tip reds like see in the question about all they are you can get a right the question you want to insert this image me but in the beam in they do not give it direct they are giving indirect question be the image to be used to select the diving shift red if you go and check in your folder that is the shift grid if this is the shipper we want to insert this image on the b cell so i'm going to the front page this is the b go to the insert go to the picture click from file select the ship in the jd4r folder and click insert so we insert the image and tell what the ratio they are given so they are given in the b360 270 so i am going to give 360s right click your mouse go to the picture property 360 and 270 it is there so no need to change click ok next see a placeholder 640 pixels and 354 pixels height containing the video clip red 1.84 in the c the 640 and 390 we want to insert the video clip red dot mp4 and we want to display the automated text based error message if the browser does not support this video type so we are going to the front page this is c i am going to insert the video go to the insert click picture video sometimes the video will not be visible at the time click this arrow mark and the video will be done and go to your work area go to your folder and select the brick one mp45 and open so the image will be sorry video will be inserted but in the question paper they are giving we want to give the width and height 640 and 354 okay i am going to select this right click go to the picture properties go to the appearance and you take the specific size and give the width and like and pick the keypad spread ratio and give width and line which should be 640 and right it should be 354. i'm going to give 640 right should be 354 and click the keypad spread ratio and click ok so we got this next they are asking display an automated text based error message if the browser does not support this video type so i we are going to give the error message right click picture properties go to the general the text and we are going to create this browser does not support the video type and click on next e the image to be used to selected diving aircraft drugs in the e we want to insert the image aircraft drugs so go to the this one e this is a b c d e yep so this is the this cell is here so we are going to insert the image go to the insert go to the picture go to the from file and the aircraft yeah after that click this and insert and check what is the ratio they are giving in the cell 360 270 so like this right click go to the picture properties 360 and 270 it is correct no need to change and click ok Next, enter in cell D the text just read and set this as style H1. So D, we are going to the D cell. This is A, B, C, D. This is D. So we are going to type just read in this. And they are asking we want to set the style into H1. Select and go to H1. And we got this. Next. Entering cell F the text we offer some of the best drug diving in the world. In this cell F we want to insert the text. After that they are asking on a new line enter this on the new line below this enter the text edited by your name, your central number and candidate number on a new line. Press enter. type last it is edited by and write your name enter number and candidate number so we give this next they are asking set the text in cell if to style h2 so we are going to give style h2 select this go to the normal this one select h2 so we give this next add appropriate alternate text to all still image for all the image we want to give the alternate text why we are giving alternate text in the image and also video means some of the browser does not support the images some of the browser does not support the videos at that time if you are giving that text message we can know this image is inserted so for the first image right click go to the picture properties go to the general text i'm going to give as logo because the first to just die for us this is the logo next for this image i'm going to give dive ship as the name go to picture properties general text dive ship people for this one i'm going to give dive aircraft the properties general text dive aircraft click ok so we gave this next attach the stylesheet jd4.css to this webpage we are going to attach the stylesheet to this html page webpage go to the format click the stylesheet links click add this one select the file on your computer this one go to your work area desktop and select your source file and jd for our in this we are going to give jd for our file click this and click ok and select this one more time and click ok so now we attach the style sheet to this the page next save your webpage we want to save the webpage next open the stylesheet jd4.css in your suitable software package edit this style sheet to add the following specification now we are going to open the style sheet and we are going to edit in the front go to the file click open go to your work area select the folder and open the style sheet so we open the style sheet now in the question what they are asking all table borders and grid lines are blue with a solid visible line that is two pixel point what they are saying all the table borders all the outside the table borders and the grid lines inside the table so we want to give table and td why we are giving td means they are giving the grid line red line means it's inside the table so we want to give that td tag so first i'm going to give go to the format go to the style i'm going to for pick h3 and go for mu i'm going to give you two type they are giving all table borders and grid length for the table borders i can give table for the grid line sorry giving small letter we want to give in this small letter table for the grid lines i'm going to give p like this so we get the tag after that go to the question what they are saying all the table borders and grid lines are blue with a solid visible line that is two pixel white so i'm going to format go to the style i'm going to select the table td click modify go to the format and i'm going for the border in this border i'm going to select the solid see the question paper they are giving the solid visible with two pixel white so i'm going to give solid is two pixel white after that they are asking blue color so i'm going to give the blue color automatic i can give this blue color and click on see we got the border two pixel wide solid border and we give the blue color after that i am going to give in the question paper they are mentioned collapse the border should be collapsed so i am going to give border collapse border again i wanted the collabs next what they are asking they are asking all cell padding with the table is said to be 10 pixels in this uh css file we are mentioned table and td as the same so i am going to give the padding adding how many pixels they are giving 10 pixels so i will give 10 px close this save the webpage and go and check in the h2o so we got see still padding this is still padding then pixels all the things are there all the borders will be in the blue color and it is in a solid position solid border okay next add your name center number and candidate number as your command at the start of the stylesheet we want to add the name as a command the first one slash asterisk write your name enter number candidate number close the asterisk like this we are going to give the commands names enter number and candidate number as this close the slash save the root page go and check in html it will not come the command will not available on the html save this style sheet in your jd4r folder if you want to save the style sheet here already we just save take the screenshot of the content of the style sheet you want to take the screenshot so go to the snipping tool click new copy this and check the question whether they are asking evidence yes they are asking the evidence three two copy this go to your evidence document and face and give the name as evidence give us a evidence make this as it bigger we want you can give the corrections like this so it will be visible for all okay display the web page in your browser if necessary resize it so that all the pages can be seen all the text can be easily read the address bar is visible so what i am going to do i am going to the front page first i am going to save the css file and also i am going to save the html file after that i am going to the gd4r folder i am going to open this gd4r web page so the web page is open see this browser does not support the video time this video is not supported on this browser so we will get the automated error message like this so we open the web browser what they are saying it should be visible all the pages can be seen it should be visible it is not visible some of the content is below so i am going to change the size of the browser go to this bar click the zoom 75 like this so it is visible now so i'm going to the slip into click new they are saying the address bar also should be visible so i'm going to copy like we should not take the below one type to search copy this and i think they are asking the evidence take the screenshot and place the evidence and with the engines the page like next they are asking display the html source in your editor take the copy of html source and paste this in your evidence document so what we are going to do we are going to the html page go to the code and select the copy this and go to your evidence document and paste so we paste the evidence document and give us a evidence because the evidence so the text is not visible so what i am going to do i am going to make a little bit bigger and i can minimize the line space like this i can there is some space you can it is just the body there is some space i can reduce this like this you can you can edit like this so we paste if you want it is in all in black color we can give the black color here fish and like this you can give it will be colorful so it is visible for the all the people so this is the way we are going to do the website authoring from february march 2020 variant 3 1 thank you

and we want to save the evidence document in m20 evidence underscore evidence with your candidate number now i am going to my work area already i created the evidence document i am going to open that so we i added the my name my center number and my candidate number in the header position next we are going for task 3 web page we are going to create the web page and edit a style sheet for just type for us the web page and style sheet must work in any browser all color codes except those provided in the source files must be in hexadecimal make sure that your style sheet contains no html so we are going to create the web page and we are going to edit the style sheet for one of the company the company name is just type four first create a new folder called jd4r so we want to create a new folder so i am going to the work area i am going to create the new folder right click your mouse go to the new and click folder and i am going to type the name jd4r let's locate the following files and show them in a jd4r folder okay we want to locate these three five files on the jd4r folder so put your work area copy the file aircraft 84r 84r logo ship and black one copy this and paste on the gd4r display the content of your jd for our folder showing the folder name all file names extension image dimension and file size we want to display the content of the jd for our folder they are given some other things so go to your jd for our folder go to the view sometimes it is in the large icons so if it is in large icons means click the view and select the details okay After that, go to the add columns and go to the choose columns. Already I gave name, size from this. You can select. I will show one more time how to select all the things.

First, go to the view and check in the layout whether it is in the details. If it is not in the details, you want to click the details. After that, go to the add columns and click choose column.

In this, in the question paper, first they are asked. first they are asking um folder name so i am going to folder folder name next they are asking all file names so all file just a minute file name should be there Next extension file extension is the next image dimension and file size image dimension it will be as a dimension and the file size file size will be as a size size and click ok so now we got all the these just if you want you can mix drag like this next take the screenshot of your jd for folder and paste this in your evidence document make sure that the folder name all file names extension image dimension and file size are clearly visible so first go to the folder use the snipping tool if you go to this search you can type snipping tool s-n-i-p-p-i-n-g-t-o-o-l click this click the snipping tool click new drag from the address bar copy this and go to the evidence document in evidence 2 they are giving the adn as evidence so in evidence 2 i am going to paste go to the format and give the correct you can uh give the brightness like that if you want we can make it bigger next create a web page called jd4.htm and now we are going to create a web page using front page go to the front page go to this bar open the new page this tab click the page click normal page and click ok so the new page will be open first they are asking we want to create the new page name called jd4.html so go to the file save us go to their work area go to the jd4r folder and save as jd4r dot html and click on save this web page next this web page must work in all browser and will have your table structure as shown below so we want to create the new table in this format okay actually they are giving row number one row number two row number three row number four okay four rows and two columns are there so we're going to give four rows and two columns go to the table and click insert and click table and give four rows and two columns next for if in all the pushing paper they sometimes they will give the table structure if you create the table we want to give the width of the table okay how we can find the width of the table see the first row it is in thousand width the first one will be the width and 200 will be the height okay for all the tables in the all the papers we want to give the width so in the first row a we are having thousand okay so we want to give the thousand in some of the past paper they will give in the last row or in the middle row in the first row they are merging merging this cell so we are giving 1000 we are mentioning 1000 so we want to give the table properties as 1000 select the table right click go to the table properties and give 1000 and it should be in pixels apply and click ok so we give the width of the table no need go for the i let's see the first row they are merging this cell so i'm going to measure the first row next they are merging we can imagine from this row c or we can mention f your wish so i'm going to do for the c as this cell it will be look like this now each table cell is identified with the letter and all dimension or in pixels okay so we want to give the pixel for the each cell for the first a we are given thousand width and 200 height so what we are going to do we are going for first row okay for the i should be thousand and sorry the width should be thousand and the height should be 200 so go to the front page and select the first cell right click your mouse go to the cell properties and select the width and i the question in the first row they are again thousand and i should be 200 and you want to be very careful whether you are giving pixels click apply and click okay the second one they are giving 360 and 270 so select the second one select the cell table cell properties and select the width and i and check what they are giving 360 270. So I'm going to give us a 360 and I should be the 270 apply click OK for the next one we are down I'm going to give 360 120 so select this right click go to the cell properties with and I select reducing pixels and 360 I should be 120. so i'm going to give us 120 apply and click ok for the last one in the question paper they are giving 360 270 so select this right click cell properties select the width and i do 360 and the height should be 270 apply and okay for the c they are giving 640 and 390 so i'm going to this one right click then properties with and i and go on checking a question 640 390s thank you it's 40 and the height should be 390 apply for the last one we want to give 640 and 270 so for the last one go to the cell properties select the width and i fix for p and the height will be 270 give the height as the apply next they are saying the letters and dimensions showing the table must not appear on your final webpage then the table border must appear on the final webpage so we want to give the table border so like this right click table properties and check whether it is the size is one you can give two they are asking table borders on the final apply and click so we give the we create the table like this now in cell A we want to paste the image jd or 4 logo in cell A we want to paste insert the image jd 4. logo and set the width of the image in html to 1000 pixels and maintain the aspect ratio so I am going to the cell A go to the insert go to the picture from file go to the folder gd4r folder and select the gd4r logo and insert so the image is bigger in the question paper they are giving we want to set the width of the image in the html to 1000 pixel and we want to maintain the aspect ratio so first select the image right click go to the picture properties and sometimes we cannot edit this we cannot edit this so we want to check whether the specific size is in the tick position if it is not tick position give the tick position and the width we want to give 1000 and the height i'd go on checking the first row 200 so i'm going to give 200 sometimes it will change if you are changing the height the width also will be changed at the time we want to untick the keep aspect ratio and give 1000 the height will be 200 and check whether it is in pixels yes after that we click the keep aspect ratio and click ok so we give the image like this next place in cell be the image to be used to select diving ship drugs in the be the be we want to insert the image tip reds like see in the question about all they are you can get a right the question you want to insert this image me but in the beam in they do not give it direct they are giving indirect question be the image to be used to select the diving shift red if you go and check in your folder that is the shift grid if this is the shipper we want to insert this image on the b cell so i'm going to the front page this is the b go to the insert go to the picture click from file select the ship in the jd4r folder and click insert so we insert the image and tell what the ratio they are given so they are given in the b360 270 so i am going to give 360s right click your mouse go to the picture property 360 and 270 it is there so no need to change click ok next see a placeholder 640 pixels and 354 pixels height containing the video clip red 1.84 in the c the 640 and 390 we want to insert the video clip red dot mp4 and we want to display the automated text based error message if the browser does not support this video type so we are going to the front page this is c i am going to insert the video go to the insert click picture video sometimes the video will not be visible at the time click this arrow mark and the video will be done and go to your work area go to your folder and select the brick one mp45 and open so the image will be sorry video will be inserted but in the question paper they are giving we want to give the width and height 640 and 354 okay i am going to select this right click go to the picture properties go to the appearance and you take the specific size and give the width and like and pick the keypad spread ratio and give width and line which should be 640 and right it should be 354. i'm going to give 640 right should be 354 and click the keypad spread ratio and click ok so we got this next they are asking display an automated text based error message if the browser does not support this video type so i we are going to give the error message right click picture properties go to the general the text and we are going to create this browser does not support the video type and click on next e the image to be used to selected diving aircraft drugs in the e we want to insert the image aircraft drugs so go to the this one e this is a b c d e yep so this is the this cell is here so we are going to insert the image go to the insert go to the picture go to the from file and the aircraft yeah after that click this and insert and check what is the ratio they are giving in the cell 360 270 so like this right click go to the picture properties 360 and 270 it is correct no need to change and click ok Next, enter in cell D the text just read and set this as style H1. So D, we are going to the D cell.

This is A, B, C, D. This is D. So we are going to type just read in this. And they are asking we want to set the style into H1.

Select and go to H1. And we got this. Next. Entering cell F the text we offer some of the best drug diving in the world. In this cell F we want to insert the text.

After that they are asking on a new line enter this on the new line below this enter the text edited by your name, your central number and candidate number on a new line. Press enter. type last it is edited by and write your name enter number and candidate number so we give this next they are asking set the text in cell if to style h2 so we are going to give style h2 select this go to the normal this one select h2 so we give this next add appropriate alternate text to all still image for all the image we want to give the alternate text why we are giving alternate text in the image and also video means some of the browser does not support the images some of the browser does not support the videos at that time if you are giving that text message we can know this image is inserted so for the first image right click go to the picture properties go to the general text i'm going to give as logo because the first to just die for us this is the logo next for this image i'm going to give dive ship as the name go to picture properties general text dive ship people for this one i'm going to give dive aircraft the properties general text dive aircraft click ok so we gave this next attach the stylesheet jd4.css to this webpage we are going to attach the stylesheet to this html page webpage go to the format click the stylesheet links click add this one select the file on your computer this one go to your work area desktop and select your source file and jd for our in this we are going to give jd for our file click this and click ok and select this one more time and click ok so now we attach the style sheet to this the page next save your webpage we want to save the webpage next open the stylesheet jd4.css in your suitable software package edit this style sheet to add the following specification now we are going to open the style sheet and we are going to edit in the front go to the file click open go to your work area select the folder and open the style sheet so we open the style sheet now in the question what they are asking all table borders and grid lines are blue with a solid visible line that is two pixel point what they are saying all the table borders all the outside the table borders and the grid lines inside the table so we want to give table and td why we are giving td means they are giving the grid line red line means it's inside the table so we want to give that td tag so first i'm going to give go to the format go to the style i'm going to for pick h3 and go for mu i'm going to give you two type they are giving all table borders and grid length for the table borders i can give table for the grid line sorry giving small letter we want to give in this small letter table for the grid lines i'm going to give p like this so we get the tag after that go to the question what they are saying all the table borders and grid lines are blue with a solid visible line that is two pixel white so i'm going to format go to the style i'm going to select the table td click modify go to the format and i'm going for the border in this border i'm going to select the solid see the question paper they are giving the solid visible with two pixel white so i'm going to give solid is two pixel white after that they are asking blue color so i'm going to give the blue color automatic i can give this blue color and click on see we got the border two pixel wide solid border and we give the blue color after that i am going to give in the question paper they are mentioned collapse the border should be collapsed so i am going to give border collapse border again i wanted the collabs next what they are asking they are asking all cell padding with the table is said to be 10 pixels in this uh css file we are mentioned table and td as the same so i am going to give the padding adding how many pixels they are giving 10 pixels so i will give 10 px close this save the webpage and go and check in the h2o so we got see still padding this is still padding then pixels all the things are there all the borders will be in the blue color and it is in a solid position solid border okay next add your name center number and candidate number as your command at the start of the stylesheet we want to add the name as a command the first one slash asterisk write your name enter number candidate number close the asterisk like this we are going to give the commands names enter number and candidate number as this close the slash save the root page go and check in html it will not come the command will not available on the html save this style sheet in your jd4r folder if you want to save the style sheet here already we just save take the screenshot of the content of the style sheet you want to take the screenshot so go to the snipping tool click new copy this and check the question whether they are asking evidence yes they are asking the evidence three two copy this go to your evidence document and face and give the name as evidence give us a evidence make this as it bigger we want you can give the corrections like this so it will be visible for all okay display the web page in your browser if necessary resize it so that all the pages can be seen all the text can be easily read the address bar is visible so what i am going to do i am going to the front page first i am going to save the css file and also i am going to save the html file after that i am going to the gd4r folder i am going to open this gd4r web page so the web page is open see this browser does not support the video time this video is not supported on this browser so we will get the automated error message like this so we open the web browser what they are saying it should be visible all the pages can be seen it should be visible it is not visible some of the content is below so i am going to change the size of the browser go to this bar click the zoom 75 like this so it is visible now so i'm going to the slip into click new they are saying the address bar also should be visible so i'm going to copy like we should not take the below one type to search copy this and i think they are asking the evidence take the screenshot and place the evidence and with the engines the page like next they are asking display the html source in your editor take the copy of html source and paste this in your evidence document so what we are going to do we are going to the html page go to the code and select the copy this and go to your evidence document and paste so we paste the evidence document and give us a evidence because the evidence so the text is not visible so what i am going to do i am going to make a little bit bigger and i can minimize the line space like this i can there is some space you can it is just the body there is some space i can reduce this like this you can you can edit like this so we paste if you want it is in all in black color we can give the black color here fish and like this you can give it will be colorful so it is visible for the all the people so this is the way we are going to do the website authoring from february march 2020 variant 3 1 thank you

Transcript for:Website Authoring Guidelines for 2020

Transcript for:
Website Authoring Guidelines for 2020