HTML and CSS are pretty hard to pick up at first, partially because people use all these weird abbreviations for everything and expect you to know what they refer to already xD So here I'll define a few things that will make your websitin' life a little easier.
- <>, These two symbols, called angle brackets or "less than" and "greater than" signs indicate the presence of an html "tag". Tags are the things that tell web browsers what do to! Some important tags are <html> (tells your web browser that it's about to read a web page), <body< (tells the browser what to display to the user), and <img/>. Every tag has to have a / (slash) to close it. Make sure you don't use \ (backslash), because that won't work at all! Usually these look like </html> or <body>, but did you notice that <img/> already has a /? <img/> is a special tag that is "self-closing". That means there's no such thing as </img>. An image in HTML is a one-shot thing that doesn't really have anything besides the location of the image, so don't have anything to put between an opening and closing tag!
- src="", id="", etc. In HTML, when you have a little group of letters followed by an equal sign, that's an attribute. This is how you get use out of your tags. src="" is usually used in images in the form <img src="" /> and it means "You have an image, and the source/location of the image is here, ""." Inside the quotations marks (anything you want to define to be exact in HTML you use quotation marks around) you would have the link to your picture. <img src="http://www.snowy-day.net/stuff/sherlock.gif" />
. id="" is a little different. An ID in HTML is like a unique name. My unique name is Allison, and I am a human. My html code would look like <human id="Allison">. Funny, huh? :) Of course, sometimes we know other people who have our name, but that's not allowed in HTML. Everything has to have a different ID! Otherwise, it's like saying "Hey Bob!" and four people looking at you! (Of course, if you want to get all the bobs together, you can use the attribute class="" instead of id="". Each has their use)
- px, %, ###. Px is HTML/CSS for "pixel", you know, the size of that smallest brush in Paint or Photoshop! My computer monitor currently displays 1152 pixels across the whole width. That's a lot of little dots! Your monitor may be displaying 1024 pixels across or 800. Those are the widths (across) of two of the more common screen sizes. If you have a Livejournal and an icon on there, the most pixels you can have across is 100. Mr. Sherlock with his bubble pipe above is 26px wide. % is percentage. This can mean "percent of your computer screen across" or "percent of the image's height" or a lot of things like that. Sometimes it's hard to know what the percent refers to, but usually you can guess pretty easily. ### is my variable for a number. It just means whatever number that you need you should replace those with.
- #FFFFFF #db9883 #000. In css and html, if you have one # followed by six numbers or letters A-F, it's a "hex code", and it shows a color!. #FFFFFF #db9883 #000. You can use any combination you want. Usually a paint program will give these to you (Paintshop Pro helpfully provides the #, while Photoshop does not) so you can use them on the web! Rarely, there will only be three numbers/letters. This is called a short form. If your letters double up like #339944 you can use the short form! #339944 #394. Most people don't use those though. (If hex scares you, you can always just call them by their english names! White, black, purple, green, blue, gray, yellow, red, orange, brown, etc work fine (well, not all colors do, but there's several that do!)) It doesn't really matter if you capitalize the letters or not, but most people do.
- #allison{}. This is how you would refer to one unique Allison in your CSS. You put all the fun things that define that Allison inbetween the {}
- .bob{}. This is how you would refer to a group of bobs in your CSS. You put all the fun things that define each and every bob inbetween the {}
- width: 15px; height: 100%;. You use attributes in CSS a little differently than in HTML. Where in HTML you have ="", you have a colon and a semi-colon in CSS. You put what you're defining first, then a colon, then what you're defining it to be, and then a semi-colon to say you're done defining that attribute. Here, I defined the width of something to be 15 pixels. Then I defined the height of that thing to be 100 percent. Sometimes you can have a bunch of things defined at once (it gets confusing!) like #allison{race: "Caucasian"; gender: girl; eye-color: hazel; face: nose eyebrows lips(teeth);}. I just defined the unique Allison to have the caucasian race, the girl gender, hazel eyes, a face with a nose, eyebrows, and lips with teeth. (If you're defining something inside a definition, you use parenthesis (). Usually you won't use quotation marks unless you have a two-word phrase, but I threw them in to show you that you could).