Day 15 concluded our HTML tutorial, while we continued with CSS. It's been fun all through. Today is Day 17 and I'll be dropping all what we've done from day 15 till date. Don't mind the tenses, they were written on the said date.
We rounded up with forms today by creating a bigger form with everything we've learnt so far. The text form, radio buttons, select options, checkboxes and a submit button. A new code was introduced; the "fieldset" and "legend", which made the form to be in box while the text housing the legend span across the box.
Here is the code I made to create the form.
As you can see, the text fields were created after forming the fieldset. Those text fields contains the main details. Then, I moved on to the radio buttons and select options. The remaining part of the code is shown below:
Then, the output....
When you click on the select options, it will bring out other phone options to select from.
Interesting, right? Well, that's the end of form creation. Let's wait and see what tomorrow will bring.
The form rounded up our HTML tasks. Today, we moved on to CSS (Cascading Style Sheets). CSS are the codes written to beautify out HTML page, and we started by adding some colors to our texts. After learning various ways of adding CSS codes to our file, we decided to start with the inline styling.
According to the task, three H1 tags were to be created and styled. This is my output below:
The first header has a gold background color and a brown text. The second has a green background color and a white text. The third has a brown background color and a cyan text. All the headers has the same width; 200px to be exact.
We've gotten to the stage where beautiful webpages will be shown. Stay tuned and expect more. If you haven't join the train, it's not too late. Click on the task link and join us. Meanwhile, I'm looking forward to the next task.
See you on day 17!
Hello and welcome to day 17. It's the second day of learning CSS, and today something new was introduced. We went further with the other way of inputting our CSS codes: the internal styling. Here, our style file is placed in the head tag.
The code and the output is shown below:
As you can see, the styling was done before the body codes was written. The body was made to have a violet background color and the paragraph in the body tag has it's background color and color of texts, too.
That's it about internal styling. See you tomorrow!