Lab 5 Reflection
Lab 5 involved a lot of grinding; we focused on making lists within tables. These lists varied on what they were about, ranging from our favorite foods to our grocery shopping list. One skill we used in this lab that carried over from the previous lab was making tables in HTML. We used this skill to make a table consisting of 2 rows and 6 columns. Each of these columns had a title relating to what the list was about. Then came making the actual lists in each cell. The way this was done was by simply using <ol> or <ul> in between <td> tags. An ordered list defaults to numbers in HTML while an unordered list defaults to solid bullets. The objective of the lab, however, was to create multilevel lists (lists within lists) with different style bullets or numbers.
The way we achieved this goal was to give lists a class. Based on what class the list is in and what is needed of them in the CSS we changed their style. This was done by selecting the list in the CSS by using the format 'selector.class'. Once they were selected we altered the 'list-style' to what was needed of them. Using classes helped us avoid repeating code and allowed us to apply a single list style to multiple lists. Changing the list style wasn't the only thing we did, we also needed to create a multilevel list. This was fairly simple however. A multilevel list is a list that starts below a list item of a larger list. We could simple start an <ol> or <ul> directly after a <li> for a larger list. HTML will default to making it an multilevel list, indenting it and giving it a different style from the larger list.
These skills are important to a web designer because knowing different ways to style elements is crucial to making a website attractive. A website that is pain HTML is text on a white background with horrible line spacing and unattractive fonts. If a web designer knows many ways to change the style of elements in code and becomes fluent in CSS they can make a boring HTML document into essentially a work of art. In this lab we changed the styles of lists and made ourselves a bit more knowledgeable in changing styles. In addition to changing list styles we also had to alter the table styles so our text would be readable or look nice. We changed things such as the width and padding of the table so we became more fluent in that aspect as well.
The way we achieved this goal was to give lists a class. Based on what class the list is in and what is needed of them in the CSS we changed their style. This was done by selecting the list in the CSS by using the format 'selector.class'. Once they were selected we altered the 'list-style' to what was needed of them. Using classes helped us avoid repeating code and allowed us to apply a single list style to multiple lists. Changing the list style wasn't the only thing we did, we also needed to create a multilevel list. This was fairly simple however. A multilevel list is a list that starts below a list item of a larger list. We could simple start an <ol> or <ul> directly after a <li> for a larger list. HTML will default to making it an multilevel list, indenting it and giving it a different style from the larger list.
These skills are important to a web designer because knowing different ways to style elements is crucial to making a website attractive. A website that is pain HTML is text on a white background with horrible line spacing and unattractive fonts. If a web designer knows many ways to change the style of elements in code and becomes fluent in CSS they can make a boring HTML document into essentially a work of art. In this lab we changed the styles of lists and made ourselves a bit more knowledgeable in changing styles. In addition to changing list styles we also had to alter the table styles so our text would be readable or look nice. We changed things such as the width and padding of the table so we became more fluent in that aspect as well.
Comments
Post a Comment