Here we will start looking at attributes and styling. But, first of all, look at the picture below, picture of a webpage. And the next one, the HTML code of the webpage.
There are many besides these few ones like italic, underline, delete, insert, quotation, cite, abbreviation, emphasize, etc. which change the way the texts are rendered in the webpage. For this I would suggest you to go to this link from w3schools.com.
Using style means we are just implementing CSS in the HTML tags here. There are other way to use CSS to style the elements/tags. But, for now the method is adding style="property:value" inside the opening tags. Attributes and Styles work in the same way but using styles is more suited for easier formatting and maintenance. So, in the later course we will introduce CSS. For now, the next lesson is links and images.
Explanation of the Code
1. Grey background: Notice the grey background in the first picture? This is achieved by using the style attribute in the body tag/element. In line 1 of the code, in the second picture, you can see
<body style="background-color:lightgrey">
Background-color is the property and lightgrey is the value. Notice and remember the format for styles.
2. White background of the paragraph and the center alignment: The paragraph with the white background and center alignment is achieved in the same way as we did above, using styles and attributes. Notice the code in line 4 of the picture:
<p align="center" style="background-color:white">
The text alignment is because of the align property. And the white background is because of the background-color property and white value.
3. Different sizes of headings: Notice that the size of the headings are different, the first one being larger. It is because headings vary from h1 to h6 with h1 being the most important and h6 the least important for page indexing, etc.
Note that styling can also be used to change the color of a paragraph or heading, text size, alignment, font-family,etc.
Here are some few other examples of styling:
Color: <h1 style="color:white">
Text Size: <p style="font-size:300%">
Font: <p style="font-family:roboto">
Alignment: <h1 style="text-align:center"> Instead of using align="center" we can use this style.
There are many besides these few ones like italic, underline, delete, insert, quotation, cite, abbreviation, emphasize, etc. which change the way the texts are rendered in the webpage. For this I would suggest you to go to this link from w3schools.com.
Using style means we are just implementing CSS in the HTML tags here. There are other way to use CSS to style the elements/tags. But, for now the method is adding style="property:value" inside the opening tags. Attributes and Styles work in the same way but using styles is more suited for easier formatting and maintenance. So, in the later course we will introduce CSS. For now, the next lesson is links and images.
No comments:
Post a Comment