| |
Using HTML within Visualizer Album Designer - Part 2.
In part 1 of the HTML introduction for Visualizer Album Designer we were looking at how to work with tables and changing the settings for a table. In part 2 we will be looking at the content that can be added within the tables, such as text. You will learn how to style your text by selecting fonts, and learn how to change the size of your text and how to change the color of your text.
Changing the font name, size and color.
By applying styles to a font we can change the font name, the font size and the font color. The most typical way to go about this is using the span command, which we will wrap around the text we want to style. Let me first explain what I mean by wrapping HTML tags around a document element, such as text. You will notice that when you open a tag such as span you will also have to close it. This is our way of informing the browser that we are done with this command. The example below will show you what I mean.
<span></span>
You can see we started the span tag and closed it, but we did not place any text between the tags. In the following example we will be placing a text between the two tags and apply a font to our span tag. A common rule when applying additional data within tags, is that the data must always be placed in the tag that opens the command. Remember that the browser reads from left to right. Let's start by changing the font for our text.
<span style="font-family:Arial, Helvetica, sans-serif">Hello world</span>
You should only use standard fonts which comes with Windows, and the reason for this is that visitors who visits your pages may not have the additional fonts you have installed on your system. Let me show you four standard fonts you can use.
Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, monospace
Impact
We can continue to style our font even further by changing the font size. To do this we need to close the font using a semicolon. This way we inform the browser that we are done choosing the font now we want to style the selected font. In the example below you can see how we have ended our selected font with a semicolon, and how we continue to style the font by changing the font size before closing the style with a quote.
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px">Hello world</span>
I have set the font size to 12 pixels, but you can easily change that by replacing the size with a number of your choice. Please keep in mind if you make the font size smaller than 9 pixels, the font will become very hard to read. Changing the font to a bigger size can be good when you want to highlight a certain text such as a headline or title. Now let's take it even further by changing the color of our font. As you have just learned we must close the style we added using a semicolon before continuing.
If you are not sure of the HEX value for certain colors, feel free to use the color picker within Visualizer Photo FX or Visualizer Album Designer. Click on the color palette to select the color you would like to use, and copy the HEX value from the # field (HEX Color). Highlight the text within the field and press Ctrl+C on your keyboard to copy the value, or right click and select Copy from the menu.
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#7573FF">Hello world</span>
Now we are really getting somewhere. Not only have we learned how to select the font and the font size, but we have also learned a fast way to change the color of the font. Remember to add your text between the span tags, and if you want to add it to a table remember to place your span style and text within a column (between the td tags).
Before I end this article about styling text, I would like to share an example with you on how you can use the span tag. I will also show you how to add line breaks outside the tags and inside the tags.
<span style="font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#006699">Hello world</span>
<br />
<br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333">What a beautiful day it is today. The sun is shining and the birds are singing.<br />
Wouldn't it be great if it would be like this every day.
</span>
As you can see I have created a span tag for my title "Hello world", using a larger font size and a color I would like to use for my titles. Then I closed my font styling, informing the browser that I have completed my span tag. Notice I have added two line breaks (<br />) outside the span tags, to create a small space between my title and my text. I have started a new span tag for my text, making the font size smaller than the title, and selecting a different color. I have added the text I want to share with my viewers, but this time notice I added a line break inside the span tags. Basically what I am informing the browser is that I want to start a new line but I do not want to change my font style, therefore I have placed the line break inside the span tags. |
|
|
|
 |
|
Submitted by:
vahid66
Popularity: 7 %
Viewed 161 times |
|
 |
|
