HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 24: Putting Your Website On The Internet

Okay so you have completed your entire website and are happy with the results. How do you put your website live on the internet? Well you need to find a web host. There are many out there and a bunch of things to consider before choosing. A web host is basically in simplest terms a chunk of space on the internet where you upload your web pages to a web server. You can choose to go with free web hosting or paid web hosting. Depending on what type of website you have you might want to go with a paid web hosting service. These can run from about 2 dollars a month and up. Why would you want to pay for web hosting when you can get it for free? Well you will have more control over your website and a paid service can be way more reliable as far as things like the server down time. And that information is usually pretty available to you. Most web hosts will actually use this information in their advertisements. With a paid service you have more options as far as advertisements and things like that. If you plan on trying to earn money from advertisements on your page or if you have a business type website a paid service is probably the way to go. Free hosting is more for the hobby type website. You'll find that with free web service the host will be able to in most cases put adds on your pages among other things that you wouldn't make money from. They would and that's one of the reasons why it is free. They are usually less reliable as well and you could have server down time for long periods. So it really depends on what type of website you have to put on the internet. I recommend making one or two practice sites first and going with a free host so that you can get an idea of how to work with them.

Then when your ready to put your awesome website online do an internet search for cheap web hosting or something similar to that. You can also search for best free and paid web hosting. If you think about it two to four bucks a month for a cheap reliable web host really isn't that much if you plan on using your website to make money. Do a little research on their terms of service before you go with any host. When you have one that you think is a good fit for you, Uploading your website is pretty simple. You already have the right setup to make this a quick transfer. You have a single folder on your desktop named website or something appropriate like that. And your main page in your website is named index.html. The server will look for an index.html first when loading your site. If it can't find one the user would get a page not found error. It is essentially your homepage. It may be a little different depending on what type of host that you chose to go with but what you would look for is something called the FTP. And that is the File Transfer Protocol. You will see that some servers will have unlimited file transfers while others have a certain amount. You would want to research all of the pro's and con's before going with a host. See what other people think about the host first. But anyway the FTP is where you would upload you web pages. And after you have your entire site uploaded the whole world will be able to view it. Whenever you want to make changes or update your site all that you would do is go back into your website folder on your desktop, make the changes or additions and re-upload it in your web host. It's a good idea to make copies of your pages before you make any changes. This way if something went wrong you can always go back to your original document and figure out what happened. You can even make a separate folder that you named updates or something like that and just copy and paste into this new folder. One other thing that experienced developers do often is whenever they make a change or an update they will usually have a document or something similar to enter the date of the change and what they did. And this way they will have a running record to look back on whenever a problem does come up. Some develops even save a copy with the name saying exactly what changes they made were. But a simple text document somewhere on your computer that you can record your updates is usually fine.

Quiz Answers Chapters: 1 - 12

Chapter 1 Quiz Answers

1. The standard language that web browsers read and render into visual and audible web pages.

2. A tag surrounds the elements content and tells the browser what type of element it is. i.e. <p>These are opening and closing opening tags</p>. An element is the entire code from the opening tag, the content inside, and the closing tag.

3. An opening tag <p> tells the browser that this is the beginning of the element and the closing tag </p> with the addition of the forward slash tells the browser that it is the end and to move on to the next element.

4. <!doctype html> This tells the browser what type of document it is.

5. An attribute is a modifier of the tag that it is in. And generally has a name and a value. They are always put in an opening tag.

Chapter 2 Quiz Answers

1. The browser reads HTML in a top down manner.

2. The <head></head> tags.

3. The browser will ignore any extra spacing or white-space by default. It will only put one space in between each word.

4. Because different browsers will read and display your code differently. It's also good practice to save often in case of power outages, etc.

Chapter 3 Quiz Answers

1. 

2. They can help you organize code into sections and remind you to do something at a later time. They can also be used to debug problems in your code.

3. 50 & 60 are both > 40.

Chapter 4 Quiz Answers

1. It is an element that has no content like the line break </br>.

2. In an address.

Chapter 5 Quiz Answers

1. <img src="imagename.fileextension">.

2. When it is a very minor change of one or two images.

3. alt="some text here".

4. .jpg or .jpeg

5. .png but .gif can be used as well.

Chapter 6 Quiz Answers

1. An ordered list is numbered and an unordered list has bullets in place of numbers.

2. <li></li>

3. <table> is an opening table tag and it tells the browser that were making a table, <th> is an opening tag for a table header, <tr> is an opening tag for a table row, </td> is a closing tag for table data.

4. Left to right.

5. It adds a caption kind of like a header above our table. You add it immediately after the opening table tag <table>

Chapter 7 Quiz Answers

1. The anchor tag.

2. It gives the anchor tag a destination to link to.

3. The hatch tag #

4. You can link to a place inside of the current web page, to another web page within your website, and to an external website.

5. At the very end of the body element right before the </body> closing tag. This is for a footer that you want at the bottom of the page. Footers can be used elsewhere too.

Chapter 8 Quiz Answers

1. The form element.

2. You add a label element inside of the form element. Usually above the input type code.

3. Inside of the double quotes for the value attribute. value="In Here".

4. Programming code. Like JavaScript.

5. To specify a minimum and maximum number value that the user can input.

Chapter 9 Quiz Answers

1. A radio button form is used for things that require only one choice like yes or no. A check box form gives the user the ability of selecting multiple choices.

2. text, submit, number, radio, and checkbox are acceptable answers.

3. It would be set to a yes or no value depending on the user's choice. That value would be sent to the server to be processed when programming is added to the form.

Chapter 10 Quiz Answers

1. Instructions and information about your page for browsers and search engines.

2. Inside of the title element, the meta description, and the meta keywords.

3. Somewhere around two or three very descriptive sentences.

4. The head element.

5. Yes, because the search engine can pop up any one of your pages in a search result and every one of your pages will have different meta data.

6. en-us

Chapter 11 Quiz Answers

1. Designing, styling, animating, and positioning your HTML elements.

2. Inside of the head element.

3. { } Opening and Closing curly brackets.

4. A selector (or selectors), an opening curly bracket, at least one property: value; and a closing curly bracket.

5. color:

6. With a coma followed by another selector name. For example h1,h2,h5 {

7. It's the end of a statement and move on to the next one.

Chapter 12 Quiz Answers

1. font-size:

2. With text-decoration: underline;

3. By adding background-color: color; to your body rule.

4. There are many reasons. More organized and faster coding. Color scheming, and positioning will also be easier.

5. You can control CSS settings site-wide from there. It's a good place to add your own default settings that you can override individually where you want later.

6. For bold = <b>text you want bold</b>, and for italic = <em>text to be italicized</em> The em stands for emphasis.

7. For bold = font-weight: bold; For italic = font-style: italic;

QUIZ ANSWERS CHAPTERS: 13 - 23

Chapter 13 Quiz Answers

1. It is a shorter way of affecting multiple property settings in one line instead of many lines.

2. It's makes it easier to add up the space of your elements to fit the screen side by side where you want to. If you set a default width in your body rule to 90%. You know that you can't go over 90% by adding your widths, margins, etc. together or your content wont fit. It's easier to figure out. And it makes your pages display the same whether it's on a tiny cell phone screen or a big screen tv. It will always take up the same percentage instead of the same pixel amount which could be very different between two screens.

3. -webkit- and -moz-. Also -ms- but it doesn't always work. One other one is -o- for the Opera browser. It is best to use them all.

4. border-radius:

Chapter 14 Quiz Answers

1. Directly into our HTML opening tag of the element that we want to affect.

2. Overriding.

Chapter 15 Quiz Answers

1. Using one of the 16 primary colors and calling it by name, an rgb (red, green, blue) value, or a hex-code value.

2. sixteen

3. a hatch tag #

4. An HTML comment is enter like  and a CSS comment is entered like /*This is a CSS comment*/

Chapter 16 Quiz Answers

1. On elements that you want to affect the same way. Used to affect one or many elements.

2. On a unique element that you don't plan on ever changing.

3. For the class selector you use a . dot and for the id selector you use a # hatch tag.

Chapter 17 Quiz Answers

1. Padding is the space between the content and the border.

2. The margin is the space between the border and other surrounding elements.

3. 0 or 0px

4. top, right, bottom, left

5. Yes, because the other element still has a margin. This is also a loaded question because their are other situations where there is no margin by default, etc. But in this lesson the answer is yes.

Chapter 18 Quiz Answers

1. A span is used inline inside of your HTML content. And used for things like just a few words of text inside of a paragraph.

2. A div is mainly used for sectioning and positioning your elements.

3. Both id's and classes are used but it is more common to use a class because you would most likely use a span for something like highlighting text which you would use over and over.

Chapter 19 Quiz Answers

1. From the left of the screen all the way to the right side. And they will display one after another.

2. They display side to side with other surrounding elements.

3. Block elements will shrink to fit the window but stay on the same line.

4. Inline elements will stay on the same line as long as there is enough room. If there isn't enough room they will move down to the next line in most cases.

Chapter 20 Quiz Answers

1. Acceptable answers float:none; float:left; float:right; float:initial; and float:inherit;

2. Takes it out of the natural flow and pins it to a certain part of the screen.

3. You can display them side by side.

4. The elements will stay pinned in the direction or directions that you specified.

5. It is how the browser will display the elements by default. Basically from the left of the screen all the way to the right in a top down manner.

Chapter 21 Quiz Answers

1. They are positioned in the same way but an element that was positioned fixed is completely out of the natural flow and will not move.

2. Absolute positioning.

3. top: and left: are the most common set of positioning properties and bottom: and right: is the second most common set used.

Chapter 22 Quiz Answers

1. Absolute positioning positions from the top and left of the browser screen. Relative positioning positions off of another element relative to it.

2. Where it would have been displayed by default without any positioning code.

Chapter 23 Final Quiz Answers

1. Descriptions for your page, Keywords for search engines, To tell the browser what type of language that the site is made up of, and many more.

2. To divide your page into sections for positioning, and to inherit CSS styles.

3. You create a new file in your text editor and save it as a .css file. And you link to this file in your .html pages inside of the head element.

4. It will display under it pinned to the left.

5. To style against an element that is being hovered over with the mouse.

6. A responsive or fluid website basically means that the website is compatible with many different screen sizes. Like a cell phone, a tablet, a laptop, and a TV screen.

7. widths, margins, padding, and the size of the content.

8. To specify changes in sizes and positioning to the browser for targeted screen sizes.

9. You will be able to copy and paste many elements, the CSS code that you created is re-usable throughout your entire site, You can copy and paste code and alter a few things to make a completely new element.