![\"how-to-make-a-website-using-html-css-javascript-1\"](\"https:\/\/assignmentshark.com\/blog\/wp-content\/uploads\/2016\/10\/How-to-make-a-website-using-html-css-javascript-1.png\")
<\/a><\/p>\nThis file will contain html tags that will describe the basic structure of the site. That is what we will then open in a browser to view the resulting html page. Open the index.html file in a text editor.<\/p>\n
Indicate the type of document using the tag <DOCTYPE!><\/span>, In this case, we use html5, so you can write just <DOCTYPE\u00a0html!><\/span> . Next, be sure there is an opening tag <html><\/span>, which tells the computer that now he will have to deal with html code. The closing tag <\/ html><\/span> will be at the end, indicating that the html code is completed. The next tag – <head><\/span> <\/head><\/span>, which in this case will have a page title that appears in the header of the browser, and in other cases, it will have a meta description, keywords, path to the css scripts and so on. d. Usually, <head>tag is connected with files and scripts needed for the operation of the site. As mentioned above, in the <head><\/span> tag let\u2019s write the page title like this: <title> Title <\/ title><\/span>. Title is written inside the <title><\/span> tag. Let’s sit back and see what we have at the moment:<\/p>\n Save the file and open it in a browser. There\u2019s nothing interesting there, but if we take a closer look, we can see that the title of the page is in the header of the browser.<\/p>\n Let us turn to the visible part of the page. It starts with the tag <body><\/span>, which is closed after the apparent of the end of page. This is often just before the closing <\/ html><\/span>, here\u2019s an example:<\/p>\n The <body><\/span> tag contains the body of the site, it displays all the visible elements such as header, content, footer and much more. We proceed to the layout of the site. Now we will use the <div><\/span> tags, that allow us to distinguis blocks and sections in html page structure. Operating with <div><\/span> tags, you can assign them with an id, which will allows better orientation in the structure of the page, and the use of cascading style sheets in future. Id tag has the following syntax: <div id = ‘name’><\/span> and a closing tag like this: <\/ div><\/span>.<\/p>\n Our page has the simplest structure: header, content block, and footer. The header is usually placed at the top of the site and has such elements like name, logo, company address, etc. Content block displays various information; footer is the lowest part of the site, there can be a simple picture, current date or any other information. So let\u2019s add a new Save the index.html<\/strong> file and look at the result:<\/p>\n Now let\u2019s consider the use of Cascading Style Sheets, abbreviated CSS. The main purpose is to separate the external css page design and its structure, so css will be included as a separate file.<\/p>\n Create a new file called style.css<\/strong> in the Test folder.<\/p>\n Connection of the css-file occurs in the section <head> <\/ head><\/span>. Just write the following between the <head> tags: <link rel=”stylesheet” href=”style.css”><\/span>:<\/p>\n And let\u2019s fill the style.css file with styles:<\/p>\n CSS syntax is simple \u2013 the first is the html-tag name for which the style is described, and then directly the visual style in the braces, always with a semicolon at the end of each property. Global tags such as body, html should be written without any signs, if we describe an item that was recorded as <div id = ‘…’>, it will be the octothorpe (#) at the beginning, if <div class = ‘.. . ‘> it should be a point (.).<\/p>\n Save the style.css file, refresh the page in the browser, and if everything was done correctly, you will see the following:<\/p>\n Of course, the page looks very simple, and its structure is primitive, but it may already be a page of a site as it has everything you need for this.<\/p>\n Now, let\u2019s make a gallery based on javascript. Create a gallery.html file in the Test folder and add the link to the gallery to the Content block:<\/p>\n Now let\u2019s fill the gallery html with such code:<\/p>\n [code language=”html”] <link rel="stylesheet" href="style.css"><\/p>\n <title>Gallery<\/title> <\/style> \t<div onMouseOver="btn_show()" onMouseOut="btn_noshow()" class="wrapper"><\/p>\n \t\t\t<script type="text\/javascript"> <\/p>\n \t\t\t\t\t\t\/\/array with links to images \t\t\t\t\t"1.jpg", \t\t\t\twindow.number = ‘0’;<\/p>\n \t\t\t\t\t\t\t\/\/amount of pictures = length of the array \t\t\t\tfunction image(num){<\/p>\n \t\t\t\t\t\t\/\/if the next pic is chosen \t\t\t\t\t\t\t\/\/if it’s the last picture the counter won’t be increased \t\t\t\t\t\t\tnumber++;<\/p>\n \t\t\t\t\t\t\tdocument.getElementById(‘images’).src = imageArray[number]; \t\t\t\t\t\t\t\t\/\/if it’s the first picture the counter "number" won’t be increased \t\t\t\t\t\t\tnumber–; \t\t\t\t\t\t\/\/function for showing the buttons \t\t\t\t\tif(number != 0) document.getElementById(‘left’).style.display=’block’; \t\t\t\t\t\t\/\/dunction that stops the showing of the buttons \t\t\t\t\tdocument.getElementById(‘left’).style.display=’none’; \t\t\t\t\t\/\/output images \t\t\t\t\t\t<!– left button –> \t\t\t\t\t\t<!– right button –> \t<\/div><\/p>\n \t<center><p style="font-size: 18px;color: #333;font-weight: bold;" id="num_img"><\/p><\/center><\/p>\n \t<center><span class="myButton" onclick="image(0)">Back<\/span> <span class="myButton" onclick="image(1)">Next<\/span><\/center><\/p>\n <\/body> [\/code]<\/p>\n And add such code to style.css<\/p>\n [code language=”css”] .myButton:hover { .myButton:active { .wrapper{ .left_right{ Now try to follow the gallery link:<\/p>\n Here\u2019s what you should see:<\/p>\n The customer can click buttons to flip the image. Now let\u2019s take a closer look at the code:<\/p>\n imageArray \u2013 array that contains links to images. To add, remove, reorder, and so on and so forth, it is sufficient to change the array.<\/p>\n number \u2013 a variable that is responsible for the number of the current image.<\/p>\n image (num) \u2013 function that takes a numeric parameter, and is responsible for flipping images (left, right), that is:<\/p>\n image (1) – display the next picture due to increment (increase by one) variable number<\/p>\n If you pass any other parameter other than 1, the previous picture will appear.<\/p>\n btn_show – function that shows the arrow when you hover over an image – an event onMouseOver.<\/p>\n btn_noshow – function that stops the display of pictures and called event onMouseOut, when we remove the mouse from the picture area.<\/p>\n Also, in two (2) aforementioned functions, before the screening of the arrows, the number of the current image is checked, in order to skip the left arrow key if it\u2019s the first image and skip the right arrow, if it is the last picture.<\/p>\n There are also comments in the provided code so you can easily change some specifications of the presented gallery.<\/p>\n The archive with this simple website is attached to the tutorial. Thank you for the attention!<\/p>\n For every student, we offer sample on how to make a website using HTML CSS and JavaScript. A main idea of our example will help students to deal with their own assignments. Consider getting help with assignments<\/a> from AssignmentShark.com if you don’t know what to do with your homework. <\/em><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n
\n<div><\/span> tags to the index.html<\/strong> file:<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n
\n<!DOCTYPE html>
\n<html>
\n<head><\/p>\n
\n<style type="text\/css"><\/p>\n
\n<\/head>
\n<body><\/p>\n
\n\t\t\t\tvar imageArray = [<\/p>\n
\n\t\t\t\t\t"2.jpg",
\n\t\t\t\t\t"3.jpg",
\n\t\t\t\t\t"4.jpg",
\n\t\t\t\t\t"5.jpg",
\n\t\t\t\t\t"6.jpg",
\n\t\t\t\t\t"7.jpg",
\n\t\t\t\t\t"8.jpg",
\n\t\t\t\t\t"9.jpg",
\n\t\t\t\t\t"10.jpg",
\n\t\t\t\t];<\/p>\n
\n\t\t\t\tvar imageCount = imageArray.length;<\/p>\n
\n\t\t\t\t\tif(num == 1){<\/p>\n
\n\t\t\t\t\t\tif(number < imageCount – 1){<\/p>\n
\n\t\t\t\t\t\t\tdocument.getElementById(‘num_img’).innerHTML= number + 1 + ‘\/’ + imageCount;
\n\t\t\t\t\t\t}
\n\t\t\t\t\t}
\n\t\t\t\t\telse{ \/\/if the previous pic is chosen<\/p>\n
\n\t\t\t\t\t\tif(number > 0){<\/p>\n
\n\t\t\t\t\t\t\tdocument.getElementById(‘images’).src = imageArray[number];
\n\t\t\t\t\t\t\tdocument.getElementById(‘num_img’).innerHTML= number + 1 + ‘\/’ + imageCount;
\n\t\t\t\t\t\t}
\n\t\t\t\t\t}
\n\t\t\t\t}<\/p>\n
\n\t\t\t\tfunction btn_show(){<\/p>\n
\n\t\t\t\t\tif(number != imageCount – 1) document.getElementById(‘right’).style.display=’block’;
\n\t\t\t\t}<\/p>\n
\n\t\t\t\tfunction btn_noshow(){<\/p>\n
\n\t\t\t\t\tdocument.getElementById(‘right’).style.display=’none’;
\n\t\t\t\t}<\/p>\n
\n\t\t\t\tdocument.write(‘<img id="images" src="’ + imageArray[0] + ‘">’);
\n\t\t\t<\/script><\/p>\n
\n\t\t<div id="left" onclick="image(0)" class="left_right"><img src="left.png"><\/div><\/p>\n
\n\t\t<div id="right" onclick="image(1)" class="left_right" style="margin-left: 534px; position: absolute; display: none;"><img src="right.png"><\/div><\/p>\n
\n<\/html><\/p>\n
\n.myButton {
\n-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
\n-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
\nbox-shadow:inset 0px 1px 0px 0px #54a3f7;
\nbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
\nbackground:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
\nbackground:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
\nbackground:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
\nbackground:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
\nbackground:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
\nfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#007dc1′, endColorstr=’#0061a7′,GradientType=0);
\nbackground-color:#007dc1;
\n-moz-border-radius:3px;
\n-webkit-border-radius:3px;
\nborder-radius:3px;
\nborder:1px solid #124d77;
\ndisplay:inline-block;
\ncursor:pointer;
\ncolor:#ffffff;
\nfont-family:arial;
\nfont-size:13px;
\npadding:6px 24px;
\ntext-decoration:none;
\ntext-shadow:0px 1px 0px #154682;
\n}<\/p>\n
\n\tbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
\n\tbackground:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
\n\tbackground:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
\n\tbackground:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
\n\tbackground:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
\n\tbackground:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0061a7′, endColorstr=’#007dc1′,GradientType=0);
\n\tbackground-color:#0061a7;
\n}<\/p>\n
\n\tposition:relative;
\n\ttop:1px;
\n}<\/p>\n
\n\twidth: 640px;
\n\theight: 480px;
\n\tmargin: 10px auto;
\n\t}<\/p>\n
\n\tposition: absolute;
\n\tdisplay: none;
\n\tcursor: pointer;
\n\tmargin: -288px 0 0 10px;
\n}
\n[\/code]<\/p>\n<\/a><\/p>\n<\/a><\/p>\nJavaScript Assignments Help<\/h2>\n