Intro to HTML
How do I use the Inspector Tool?
The Inspector Tool is a great way to learn more about unfamiliar code in Web Lab. To turn on the Inspector Tool, click . You will know that the Inspector Tool is on because the button will turn white and say "Inspector: On". Once you turn on the Inspector Tool, you can hover over anything in the preview area and Web Lab will highlight the code that is making that part of the page appear.
What is a bug?
Bugs are mistakes in code which causes it not to work as planned.
How do I switch between files?
Click the name of the file you want to look at in the menu on the left side of the screen.
How do I add images?
The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
What does the border-radius property do?
The border-radius property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property
What is a paragraph element?
Paragraphs are marked by opening(<p>) and closing(</p>) tags. Paragraphs in HTML can be any length of text from one word to a bunch of sentences. Paragraphs group together sets of sentences and put some space between that group of text and the next group of text.
What is debugging?
Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug.
What colors can I use in CSS?
CSS includes most common color names (red, blue, green, etc.), and many uncommon ones. You can see a full list of CSS color names at W3Schools - HTML Color Names. You can still use colors that are not included in the named list, but you will need to use their RGB values. You can read more about using colors in CSS at W3Schools - CSS Legal Color Values
What is an attribute?
Attributes are extra information included in a tag. Attributes have names and values. The name tells what type of information is being provided and then the value gives the specific information for that tag.
For example <img> tags have two attributes, src and alt. src specifies the name of the image file and alt tells the browser in readable text what the image is.
What is a style sheet?
A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
How do I make multiple paragraphs?
Here's an example of several paragraph tags in a row. This code would be placed inside of the body of your web page.
<p>This is a paragraph. It has two sentences.</p> <p>This is another paragraph.</p>
What are some examples of bugs?
Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.
Why do I need all the punctuation?
The punctuation, such as the curly braces {}, the colon :, and the semicolon ;, help the computer to understand the rules in the style sheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
What does the body selector do?
Because the content of the web page is all inside the body tag, the body selector gives style rules for everything on the web page.
What is CSS?
CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property.
Here’s an example of a rule-set that makes the text in an h2 tag blue and cursive:
h2 { color: blue; font-family: cursive; }
In this example, h2 is the selector, color and font-family are properties, and blue and cursive are the values for those properties.
Why does the code sometimes turn pink?
Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.
Why does the code sometimes turn pink?
Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.
How does the code work?
Here is the code that is making the h1 heading red:
h1 { color: red; }
Why does an image tag not have a closing tag?
An image tag doesn't need a closing tag because there is no text content which must be wrapped in tags. The content that shows on the screen is specified through the tags attributes.
What does the float property do?
The float property makes an element "float", meaning that the elements that come after it all flow around it. If the float value is left, the element will float to the left, and the elements after it will show up on its right. If the float value is right, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property
What are the different parts of Web Lab, and what are they used for?
1. Problem does your sit have
2.How does your site fit the theme
3.why is there a need for this problem to be solved
4.why does your site solve this problem well
Why does HTML seem to work even when it's broken?
HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.
What is a style sheet?
A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
What does the border-style property do?
The border-style property determines what kind of border (solid, dotted, dashed, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property
What does the background-color property do?
The background-color property determines the color of the background of an element. You can read more about the property at W3Schools - CSS background-color Property