| rdfs:comment
| - Next we move to the title. The first property is font-size, which is self-explanatory. I have used a percentage to enlarge the font, but you can also use px, em, pt, etc. After that, I have changes the font of the title by using font-family. What is interesting here is that multiple fonts are specified: this insures that if the first font does not work, the second one will be used, and so on. You can either remove or add fonts; you can also replace them. Just make sure that they are correctly written, but do not worry about capitalization, as they are not case-sensitive. The follows the title and the closing div. Don't forget to close all tags, as if not done, it could create some wild confusion for beginners.
|
| abstract
| - Next we move to the title. The first property is font-size, which is self-explanatory. I have used a percentage to enlarge the font, but you can also use px, em, pt, etc. After that, I have changes the font of the title by using font-family. What is interesting here is that multiple fonts are specified: this insures that if the first font does not work, the second one will be used, and so on. You can either remove or add fonts; you can also replace them. Just make sure that they are correctly written, but do not worry about capitalization, as they are not case-sensitive. The follows the title and the closing div. Don't forget to close all tags, as if not done, it could create some wild confusion for beginners. What follows is an hr - a horizontal line - tag; unlike the other tags you have used so far in this exercise, this one does not have a separate closing tag. Just watch out that you write /> instead of <hr>, since the first one meets HTML5 standards, whereas the second one does not. We also alter its width, making it 50%, or half of its default width. For the centering, please note that is centered by default, so you would not need to add the code. You can also replace the word center with left or right, depending on where you want it placed. What follows the horizontal line line is another division tag. It is placed around the content: the image and text. Padding is also added (see above for explanation). If you aren't going to use the image, you can just remove this tag, as well as the image code itself. Make sure you close them all if you are keeping them, and remove their closing tags if you are getting rid of them! Next comes the text; in its style=" ", we see one new property: margin-left. Whereas padding is placed on the inside of the "box", between the borders and the text, margins are place on the outside. However, the current "box" we are in is the text box. So its outside is, in this case the image. And it is from the image that we are pushing the text away, as it would otherwise be messed up. If you are not using the image, removes the margin property. Then we justify the text (or we align it on both the right and the left side). This is also an optional feature, but as I think it is neater, I usually use it in such boxes. The rest of the code you are familiar with. Finally comes the text and the closing tags. Another important note would be close the tags after everything you want to be inside them is inside them. So the last closing div tag would close the first opening div tag. Now that you have created the box, I would suggest that you add it to a separate page in your userspace and use it as a template. To do so, add a blank page named User:<span class="insertusername" id="''username''"><i>username</i></span>/Fanon summary box. In it, add your code, but also add instead of the actual text. Then, to add the template, write {{User:<span class="insertusername" id="''username''"><i>username</i></span>/Fanon summary box|My title|My image|My text}}. For those who know how to, you can also use a switch of whether you use the image or not. Now that you have a template, you can easily add boxes to your profile about fanon stories you like, etc. If you need help with a basic sample code for the template, here it is: {{{1}}} {{{2}}} {{{3}}} You can also give the different variables names, so then you can write out your text the way you fill out an infobox. {{{title}}} {{{image}}} {{{text}}} To use it like that, I suggest you add the template by writing: {{User:USERNAME/Fanon summary box | title = | image = | text = }} For more questions and/or help, please either sign up for a helping session or contact me.
|