The DIV element is use to divide and organize your web page.
Q: How do I close an <img> tag?
The IMG tag self-terminates: <img src="images/yourmomslogo.jpg" alt="Logo - Your Moms Cards" />
Q: What are the different types of images, and how are they each used?
- JPG: Photographs, large or detailed images
- GIF: simple animations, charts, diagrams, line art, flat illustrations
- PNG: Alpha channels, gamma correction, two-dimensional interlacing
Q: Why didn't my URL work for me?
Make sure you follow steps 11 through 14 closely in the “Uploading a Single File to Filezilla section” HERE.
Q: I don’t how to edit my URL.
Make sure you follow steps 11 through 14 closely in the “Uploading a Single File to Filezilla section” HERE and then review the following URL examples.
- This is a wrong URL because it was not uploaded to Filezilla and can only be seen on your desktop: file:///C:/Users/Teacher/Desktop/speedracer/home.html
- This is a wrong URL because everything before "open" was NOT deleted and "student/" was NOT added after "org": ftp://[email protected]@ftp.openhighschool.org/Web%20Essentials/Laura%20Bishop/TextStyles.html
- This is a CORRECT URL because everything before "open" was deleted and "student/"was added after "org": http://www.openhighschool.org/student/Web%20Essentials/Julianne%20Orton/TextStyle
Q: One or more of my links are not working.
Make sure you check all of the following...
- Correct spelling of all of your .html files in each navigation section in each file
- Each file is saved correctly with the .html or .css extension
- Your website folder is on your desktop and all of your absolute and relative paths are correct
- All file names are saved in all lowercase letters and then written as all lowercase letters in your HTML files.
Q: One or more of my images are broken.
Make sure you check all of the following...
- Go through your XHTML code to make sure all of your image tags match your image file names EXACTLY. Usually the file names are in all lowercase, so you will need to make sure you spell your file name in all lowercase.
- Make sure that you are spelling the file name extension correctly. Depending on how the images are saved, they are in all caps or in all lowercase like these: imagename.JPG and imagename.jpg.
- Make sure that your main website folder is on the desktop of your computer.
- Make sure your images subfolder is all lowercase.
- Make sure that you are writing the image tag correctly. Remember image tags are self terminating and there is a space that goes before the slash. It would look like this: <img src= "images/imagename.JPG" /> or <img src= "images/imagename.jpg" />.
Q: What is the main purpose of "floating" for a website?
The purpose of floating is to allow content to be side by side. Basically, it looks better. A website would be really lame if everything was just one straight line down the side. Floating content makes the website look more creative and streamlined.
Q: CSS consists of only 3 parts. What are they and how would you write a CSS rule?
They consist of:
- selector
- property
- value
selector {property: value}
Q: I have a hard time remembering all of the names for things.
There is a nice cheat sheet doc at the top of the course that has a bunch of elements and tags listed out for you. It can be really handy. Make sure you bookmark the doc for easy access HERE.
Q: I'm having a hard time remembering CLASS and ID tags.
With the class/ID tags, I remember that class can be used multiple times within the same XHTML because there is more than one class in a school. With ID, there's only one person with your identification, so there can only be one of the same ID in an XHTML. I remember the # and . the same way -- when you're writing/typing, you only include one # at once, but you're able to add multiple .
W3schools reference: http://www.w3schools.com/css/css_id_class.asp
Q: I am having a lot of trouble with the box model assignments.
Okay so, the box model is basically a way to better keep your website organized. Think of it like a bunch of boxes inside one another -- the biggest box is the margin. All of the other boxes (elements) go inside of it. So the margin is the largest box, it's the largest element on the website. It goes around everything else. It's like the space between the edge of the screen and then the content of the website. It's transparent. The next box would be the borders. You know what a border is -- these will use the background color unless you specify another one. The next box would be the padding -- this makes a space between the content and the border. Without it, the text would be squished right up onto the border. The next and smallest box is the content -- all the text and images and everything. The pixels and percentages and everything is how to make sure you size it right -- it's just simple math. When you're writing the code, you add in the height and width to the borders, padding, and everything right? So what you do is you add all of those together. To get the width you add all of the widths together -- the right border, left border, right padding, left padding, right margin and left margin. That's the total width. So for example...
div {margin: 20px; padding: 50px; border: 10px solid black;}The total width would be 160
You do the same thing to get the total height of an element, you just add the top border, bottom border, top padding, bottom padding, top margin and bottom margin. I hope that makes more sense!
W3schools reference: http://www.w3schools.com/css/css_boxmodel.asp
Q: I struggle most with how all of CSS works and how it can apply to every page (index, product, home, events). How does that work?
A single CSS file will work for all of your pages, as long as you link it in the header. Anything you change on the CSS file will affect every page (index, product, etc.) that has the link at the top. The code will look like one of two ways:
- <link rel="stylesheet" href="screen.css"
- <style >@import url("screen.css");</style>
W3schools reference: http://www.w3schools.com/css/css_howto.asp
Q: I am having trouble with CSS float.
Okay so floating is basically a better and easier to way to make websites look better. It positions an element to the left or right, relative to other block-level elements. If you wanted to make a two column page, you would have to make sure that the total width of both elements you want floating next to each other is 100% or less. You can figure that out by using the box model.
W3schools reference: http://www.w3schools.com/css/css_float.asp