`, `
`, `
- `, and `
- `. Open the file in the browser to try and understand what the heck is going on.
`, which adds a *heading* to our website. Basically, a heading is just text with a bigger font. But still. Important. We'll soon learn how to adjust any and all font sizes, but not yet. Just know that your headings should be in `` tags. Also, if you have a smaller heading, or *sub-heading*, you could use ``, which is smaller than ``, but bigger than regular text. You can keep going with more numbers until you reach ``, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading!
`, which is smaller than ``, but bigger than regular text. You can keep going with more numbers until you reach ``, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading!
`, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading!
` tags. `
` adds a *paragraph* of text to our website, which are blocks of text that have some space before and after them. Edit the text in the paragraphs given, and add your own to see what I mean!
- `. `
- ` is an item in that list (called a *list item*). But what if you want a numbered list? You could change `
- ` to `
- `) to the list (make sure you stay inside the `
- ` tags), and then change your `
- ` tags to `
- `!
- ` (and don't forget its closing tag), it's that simple! `
- ` is an *ordered list*, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (`
- `) to the list (make sure you stay inside the `
- ` means a bulleted list (also known as an *unordered list*), where every `
This paragraph has a totally awesome link.
` tags like I put above. You could put them in `
` tags for a linking header, or completely on their own!
`, but you still want to break it up.
` and `
`. They are *empty tags*, meaning they have no closing tag.
` stands for *horizontal rule*, and creates a visible line break.
` is a simple line break, all it does is split your paragraph up.
` tags to try it out!
`, and ` | `. Look at tables.html in your editor. We're going to make our own table again on this page. You can delete the one I made for you, or just make one underneath the current one there. So, to create a table, you start with the ` ``` Boom. Let's add some more. The next tag we're gonna check out is ` ```html ``` And finally, we have the actual cells of the table. There are two types of tags for this, ` ` (*table header*) and ` | ` (*table data*). As their names indicate, the former is for the header of the table and the latter is for all of the data in the table. | In our first set of ` ` tags, and in the second and third ` | ` tags. | ```html ``` Alright! Our table is all set up. We have a table with a `border=1` attribute, 3 rows, and 4 columns. Let's populate it with data so you can see a proper application of the `
``` Open the page in a browser and check out your work. Nice job! I'm truly impressed. Go eat something good and fattening. One other fun thing you can try playing with are the `colspan` and `rowspan` attributes. If you add `colspan="2"` (or `rowspan`, or any other number) into a ` ` or ` | ` tag, the cell will expand past their cell size. For example, ` | ` will give you a table header that spans 2 columns, and ` | ` will yield a cell that is the height of 3 rows. Jazzy! | You can also nest tables, but I won't get into that right now. If you want to play around with the code, try adding some ` ` tags inside your current ` | ` tags. MaGiCal ThInGs. | ### Making Things Gorgeous The Wrong Way So, your website right now looks pretty bland, and that's normal. But, we want a website that is hot, sexy, ravishing, and powerful. Yes, that's right, we want a website just like you. So first, I will show you the wrong way to style your pages. You might ask why, but trust me, if you learn in this order, you'll understand HTML attributes a lot better, and then when you move on to CSS your mind will explode with joy. Explode. #### Colors Alrighty. Let's get frisky. Open up the **3 - Styles** folder and the file style1.html. You might notice that this file is pretty bland right now, but that's what we're gonna fix. Be patient, my grasshopper. Add this line of code in the `` somewhere below the header tags (I made a lot for fun...): ` This text is hot like my body `Oh man. Load that baby in a browser. WHAT. MAGNIFICENT. COLOR. The first thing we'll look at is the `style` attribute. You can style all kind of things in that, from colors to widths to heights to borders to weights. But for now, let's just talk color. So, you might wonder, "what the heck how does that work can I just type any color in that space where red is?" And the answer is no. You can type a ton of colors there, like `blue` and `yellow` and `cyan` and `magenta`, but you can't just say `oasisorange` or `electricwhite` and hope that that'll work. How do you get a specific color of your liking? Well that's when you use RGB or HEX colors. This is kind of a pain to grasp, it took me a little bit, so I'll explain it as simply as I can: RGB stands for Red, Green, and Blue. You can have the values 0 to 255 in each to form pretty much any color in existance. Whoa. The way to form an RGB code similarly to the one above is simple: `style="color: rgb(255,0,0)"`. In this example, there's 255 reds, 0 greens, and 0 blues. So, it's all red. Boom, simple enough. Now HEX colors is very similar. It consists of the hashtag sign `#`, and then 6 *hexadecimal digits*, which are 0123456789ABCDEF, with F being the highest digit. Like RGB, the first two digits of HEX are reds, the second two digits are blues, and the third couple of digits are greens. So, to write the same color code above, you'd do `style="color: #FF0000"` to get red, because you have FF for reds, 00 for blues, and 00 for greens. Simple? Simple. Don't worry, you won't have to come up with RGB and HEX colors yourself. There's plenty of websites and programs and color pickers out there to help you with that. Here's a few: * [Color Picker](http://www.colorpicker.com/) * [HTML color codes and names](http://www.computerhope.com/htmcolor.htm) * [HTML Color Codes](http://html-color-codes.info/) * [HTML Color Picker](http://www.w3schools.com/colors/colors_picker.asp) Try adding colors to various tags on the page! You can make your ` ` the color `#005DFC`, your ` |
---|
0 Replies to “HTML 5 And CSS 3 For Absolute Beginers”
Leave a Reply
Your email address will not be published.