Remove Ad, Sign Up
Remove Ad, Sign Up
Register to Remove Ad
Register to Remove Ad
Register to Remove Ad
Register to Remove Ad
Signup for free
for more features
and less ads
About   Users   Help
Users & Guests Online
On Page:
Directory: 1 & 19
Entire Site: 23 & 128
Page Staff: Boured, SonicOlmstead,
10-23-19 08:51 PM

Forum Links

Short FAQ for HTML tags
Because the new Thread page requires this knowledge
Related Threads
Coming Soon

Thread Information

Views
784
Replies
6
Rating
7
Status
OPEN STICKY
Thread
Creator
EX Palen
07-10-19 12:53 PM
Last
Post
EX Palen
07-11-19 07:44 AM

Thread Actions





Add to favorites

Order
 

Short FAQ for HTML tags

 

07-10-19 12:53 PM
EX Palen is Offline
Link | ID: 1373407 | 1793 Words

EX Palen
Spanish Davideo7
Level: 116


POSTS: 4895/5023
POST EXP: 880808
LVL EXP: 17084542
CP: 138785.4
VIZ: 8335788

Likes: 2  Dislikes: 0
In the old page, it was possible to fully paste a guide from your draft stored in Word (or any other program that allowed to write documents). However, that’s not possible anymore with the new page and now all pasted text is plain, any effects must be added through the use of HTML tags.

To that end, I’ve written this small FAQ to help other users understand how to use certain tools. I’m no expert of coding, yet I’ve been able to incorporate these tools into my routine, so they aren’t hard to use.

Table of Contents
1.Formatting Text
2.Colored Text
3.Highlighting Text
4.Combining The Above
5.Hyperlinks
6.Anchor Links
7.The big question (MUST READ)


1.Formatting Text






This section englobes the most basic effects one can think of: bold, italics, underlined and strikethrough. They can be applied as HTML tags or in another, a bit simpler way.

The simpler way to apply these effects is like this: [ b ][ /b ], [ i ][ /i ], [ u ][ /u ], [ s ][ /s ]

In which “b” stands for bold, “i” for italics, “u” for underlined and “s” for strikethrough (just if it wasn’t self-explanatory). I put spaces between the letters so the tags would appear, when in use those spaces should be removed.

The first bracket serves as the point where the effect starts applying, and the second bracket (with the slash) denotes ending the effect. Therefore, the text you want to apply the effect on would go in between both brackets.

Here go a few examples: text in bold, text in italics, underlined text, strikethrough text

As HTML tags, there are a few changes. Bold and italics remain the same, just changing the [] symbols for the <> symbols. An additional command would be “strong” or “emphasized”, the latter shortened as “em” in the tags, which browsers display as bold and italics respectively, but they’re not the same (the change is very subtle, but appreciable).

Underlined and strikethrough, however, are changed into “added” and “removed” respectively. The tags also change to “ins” for added text and “del” for removed text.

Here are the examples of how the HTML tags for these effects would look like: < b > < /b >, < strong > < /strong >, < i > < /i >, < em > < /em >, < ins > < /ins >, < del > < /del >. Remember to remove the spaces before and after the letters so the effect will apply as desired.


2.Colored Text






Things start getting tough here, because this effect requires a much more complicated tag.

The main part of the tag is: style="color:rgb(X, X, X) ;". Substitute the three X for the numerical value of red, green and blue (rgb) of the color you’re using. These values can be found in Word itself, by accessing the personalized color scheme.

HTML allows you to color a sentence, a paragraph or a header. This all depends on the initial particle. If you want to color a word or sentence, which should be the main option here, the particle we’re using is “span”.

With this in mind, we can now write down the full tag: < span style="color:rgb(X, X, X) ;" > < /span >. Once again, remember to remove the spaces between the text and the <> symbols for the tag to work.

If we pick our color to be somewhat of an in-between orange and red, with rgb values of 255, 99 and 71, this is how it would look like.

This is probably the most versatile version of this tag, but there are a few more. You could also use hex values or directly any of the colors recognised by name (though this list isn’t very big).

For hex values, we change the rgb(X, X, X) part of the tag for the hex value of the color. Knowing the color we used before is coded as #FF6347 in hex values, we apply the change and this would be the result.

For colors recognized by name, we follow a similar procedure by changing the rgb(X, X, X) part of the original tag by the name of the color. Since the color we’ve been using for this test is codenamed Tomato, we apply the mentioned change and this would be the result.


3.Highlighting Text






Probably a rather unused tag, but still it can have its use and that’s why I’m also listing it.

To highlight text, you simply need to use the < mark > < /mark > tag. This utilizes the standard color for highlighting, which you can see in use here.

If you want to use a different color for highlighting, for example blue, you can instead use the < mark style="background-color:Blue;" > tag. By doing so, the highlighted text will now look like this.

As you might have seen, the custom colors for highlighting follow the same pattern as the colors seen in the previous section. You can also try with rgb values or hex values, but I haven’t seen a need for such specific colors when trying to highlight text so far.

Speaking of background color, there’s also a tag for it which gives a similar effect to highlighting text. You simply have to remove the < mark > tag used above and change it with < span >. The difference is very noticeable because the text should now look like this.


4.Combining The Above






It is possible to combine the three sections mentioned above in a single word or line. However, the < mark > tag doesn’t combine well with anything else, so we’ll be using the “background-color” tag for these combinations.

The formula is very easy: first goes the effects explained in the first section, for example < strong >, and then comes the desired color and background color combined as one, for example < span style="color:rgb(255, 99, 71);background:blue;" >.

Our text will now be in bold (remember that “strong” isn’t exactly bold even if browsers treat it as the same), displaying a tomato color and encased in a blue background. You don’t believe me? Well, check for yourself if it works or not.


5.Hyperlinks






This one could be rather easy and very familiar, but I still think we should cover it as a starting point for the section below.

Hyperlinks no longer use the < span > particle we’ve been seeing so far. Instead, hyperlinks open with the < a > particle, which is used for anything related to links.

To create a hyperlink, we alter a bit the structure to include the words we want to form the hyperlink. The formula is as follows: < a href="url" >X< /a >, in where X would be in this case the word reflecting the hyperlink.

For example, if I want to create a hyperlink leading to the Boards, I type in the formula and substitute X with Boards.

There’s also a way to change the color of the hyperlink, just in case that lime green doesn’t stand out from the regular text or blends in too much with the background. I don’t think that should be an issue for us, but if needed, I can add a paragraph to include custom colors for hyperlinks.


6.Anchor Links






Thanks to JigSaw for giving me the appropriate name for this tool and for helping in finding how to make it work.

Anchor links are essentially hyperlinks that redirect to a specific part of your post. They can be quite useful when you want to connect with a specific point, for example the Table of Contents I created at the start of this post. This way, I not only list the sections of this FAQ, I also provide a quick access link so people don’t have to scroll down.

To create an anchor link, first we must define an id to act as the desired destination. We do this via < span id="X" >< /span >, where X would be the key word we'd be assigning to whatever section we want to link to.

Then, at the spot where the clickable link must go, we introduce the following tag: < a href="#X" >< /a >. This will allow the text between the tags to be turned into an anchor link redirecting to wherever X leads it to.

While the above method is the correct way, it is currently not working in this site. In the meantime we have a way around: once you've made the post, get the url of it (in the Link button you have right besides Edit) and then paste it on the href tag right before the "#" symbol, for example: < a href="https://www.vizzed.com/boards/thread.php?id=102153#X" >< /a >.

We’ve seen how to link to further down the post, so to put this formula in effect, let me show you the opposite effect by redirecting you to the Table of Contents


7.The Big Question






DO I REALLY HAVE TO TYPE ALL OF THESE TAGS EVERY TIME I WANT TO WRITE ANYTHING?

Nope, no need to. You can do it if you want, but I’ve posted a 17k word guide days ago and if I had to do it manually I’d have died in the process.

You can simply copy the tag examples I’ve given and save them as models. In Word, these tags are innocuous, so you can correct all the spacing I’ve done and have them fully functional. Then, all you need to do is apply the changes to colors and wording you might need in each instance. It can still be a pain, but isn’t it much lesser now?

Two things to keep in mind. The first is that you should write your documents in Word with double space between paragraphs if you want the text to display properly when pasted here. This is because the “Enter” key means simply starting a new line in here, whereas in Word it automatically starts another paragraph. Keep this in mind or you will inevitably post walls of text.

The second, and most important: the “ symbol you’ve seen in the tags is NOT typed via Shift+2 in Word. It apparently is a special symbol, which I haven’t yet found the way to type manually (didn’t I tell you my knowledge is very limited?). The examples I’ve given contain the correct symbol, so one more reason for you to copy and save them for future uses.




And this should be it for now! I’m still investigating these tools, even when typing down this thread I discovered new things I’ve made sure to add. If there’s anything else you think might be added, or if you simply have any questions regarding this FAQ, I’ll try my best to give a proper answer.
Local Moderator
Game Guide Manager, Content Adder
Vizzed #1 Scooter fan


Affected by 'Laziness Syndrome'

Registered: 07-03-13
Location: Barcelona
Last Post: 14 days
Last Active: 22 min.

    Post Rating: 2   Liked By: , Furret,

Related Content

Content Coming Soon

07-10-19 05:08 PM
is Offline
Link | ID: 1373414 | 1150 Words


JigSaw
Level: 158


POSTS: 7846/7936
POST EXP: 584185
LVL EXP: 49729332
CP: 7931.8
VIZ: -46042336

Likes: 2  Dislikes: 0
EX Palen : Nice guide! However, the anchor links for table of contents are broke and take you back to vizzed index when you click on them I'd suggest adding how to make table of contents (anchor tags) for peoples guides.

Since hex codes can be confusing to newbies I am just going to attach color variables by name alone. I use hex codes myself but this will be easier for people new to coding.

After posting I realize some of the color names are not working. So what I am going to do is attach the hex codes for you as well as the name of color. It's better to use hex code in my opinion because like I said not all colors appear to work properly by name after I tested them.

Feel free to edit my post or copy and add to your guide. I can help improve your guide even more if you want more assistance with it

AliceBlue
< span style="color:#F0F8FF;" >AliceBlue< /span >

AntiqueWhite
< span style="color:#FAEBD7;" >AntiqueWhite< /span >

Aqua
< span style="color:#00FFFF;" >Aqua< /span >

Aquamarine
< span style="color:#7FFFD4;" >Aquamarine< /span >

Azure
< span style="color:#F0FFFF;" >Azure< /span >

Beige
< span style="color:#F5F5DC;" >Beige< /span >

Bisque
< span style="color:#FFE4C4;" >Bisque< /span >

Black
< span style="color:#000000;" >Black< /span >

BlanchedAlmond
< span style="color:#FFEBCD;" >BlanchedAlmond< /span >

Blue
< span style="color:#0000FF;" >Blue< /span >

BlueViolet
< span style="color:#8A2BE2;" >BlueViolet< /span >

Brown
< span style="color:#A52A2A;" >Brown< /span >

BurlyWood
< span style="color:#DEB887;" >BurlyWood< /span >

CadetBlue
< span style="color:#5F9EA0;" >CadetBlue< /span >

Chartreuse
< span style="color:#7FFF00;" >Chartreuse< /span >

Chocolate
< span style="color:#D2691E;" >Chocolate< /span >

Coral
< span style="color:#FF7F50;" >Coral< /span >

CornflowerBlue
< span style="color:#6495ED;" >CornflowerBlue< /span >

Cornsilk
< span style="color:#FFF8DC;" >Cornsilk< /span >

Crimson
< span style="color:#DC143C;" >Crimson< /span >

Cyan
< span style="color:#00FFFF;" >Cyan< /span >

DarkBlue
< span style="color:#00008B;" >DarkBlue< /span >

DarkCyan
< span style="color:#008B8B;" >DarkCyan< /span >

DarkGoldenRod
< span style="color:#B8860B;" >DarkGoldenRod< /span >

DarkGray
< span style="color:#A9A9A9;" >DarkGray< /span >

DarkGreen
< span style="color:#006400;" >DarkGreen< /span >

DarkKhaki
< span style="color:#BDB76B;" >DarkKhaki< /span >

DarkMagenta
< span style="color:#8B008B;" >DarkMagenta< /span >

DarkOliveGreen
< span style="color:#556B2F;" >DarkOliveGreen< /span >

DarkOrange
< span style="color:#FF8C00;" >DarkOrange< /span >

DarkOrchid
< span style="color:#9932CC;" >DarkOrchid< /span >

DarkRed
< span style="color:#8B0000;" >DarkRed< /span >

DarkSalmon
< span style="color:#E9967A;" >DarkSalmon< /span >

DarkSeaGreen
< span style="color:#8FBC8F;" >DarkSeaGreen< /span >

DarkSlateBlue
< span style="color:#483D8B;" >DarkSlateBlue< /span >

DarkSlateGray
< span style="color:#2F4F4F;" >DarkSlateGray< /span >

DarkTurquoise
< span style="color:#00CED1;" >DarkTurquoise< /span >

DarkViolet
< span style="color:#9400D3;" >DarkViolet< /span >

DeepPink
< span style="color:#FF1493;" >DeepPink< /span >

DeepSkyBlue
< span style="color:#00BFFF;" >DeepSkyBlue< /span >

DimGray
< span style="color:#696969;" >DimGray< /span >

DodgerBlue
< span style="color:#1E90FF;" >DodgerBlue< /span >

FireBrick
< span style="color:#B22222;" >FireBrick< /span >

FloralWhite
< span style="color:#FFFAF0;" >FloralWhite< /span >

ForestGreen
< span style="color:#228B22;" >ForestGreen< /span >

Fuchsia
< span style="color:#FF00FF;" >Fuchsia< /span >

Gainsboro
< span style="color:#DCDCDC;" >Gainsboro< /span >

GhostWhite
< span style="color:#F8F8FF;" >GhostWhite< /span >

Gold
< span style="color:#FFD700;" >Gold< /span >

GoldenRod
< span style="color:#DAA520;" >GoldenRod< /span >

Gray
< span style="color:#808080;" >Gray< /span >

Green
< span style="color:#008000;" >Green< /span >

GreenYellow
< span style="color:#ADFF2F;" >GreenYellow< /span >

HoneyDew
< span style="color:#F0FFF0;" >HoneyDew< /span >

HotPink
< span style="color:#FF69B4;" >HotPink< /span >

IndianRed
< span style="color:#CD5C5C;" >IndianRed< /span >

Indigo
< span style="color:#4B0082;" >Indigo< /span >

Ivory
< span style="color:#FFFFF0;" >Ivory< /span >

Khaki
< span style="color:#F0E68C;" >Khaki< /span >

Lavender
< span style="color:#E6E6FA;" >Lavender< /span >

LavenderBlush
< span style="color:#FFF0F5;" >LavenderBlush< /span >

LawnGreen
< span style="color:#7CFC00;" >LawnGreen< /span >

LemonChiffon
< span style="color:#FFFACD;" >LemonChiffon< /span >

LightBlue
< span style="color:#ADD8E6;" >LightBlue< /span >

LightCoral
< span style="color:#F08080;" >LightCoral< /span >

LightCyan
< span style="color:#E0FFFF;" >LightCyan< /span >

LightGoldenRodYellow
< span style="color:#FAFAD2;" >LightGoldenRodYellow< /span >

LightGray
< span style="color:#D3D3D3;" >LightGray< /span >

LightGreen
< span style="color:#90EE90;" >LightGreen< /span >

LightPink
< span style="color:#FFB6C1;" >LightPink< /span >

LightSalmon
< span style="color:#FFA07A;" >LightSalmon< /span >

LightSeaGreen
< span style="color:#20B2AA;" >LightSeaGreen< /span >

LightSkyBlue
< span style="color:#87CEFA;" >LightSkyBlue< /span >

LightSlateGrey
< span style="color:#778899;" >LightSlateGrey< /span >

LightSteelBlue
< span style="color:#B0C4DE;" >LightSteelBlue< /span >

LightYellow
< span style="color:#FFFFE0;" >LightYellow< /span >

Lime
< span style="color:#00FF00;" >Lime< /span >

LimeGreen
< span style="color:#32CD32;" >LimeGreen< /span >

Linen
< span style="color:#FAF0E6;" >Linen< /span >

Magenta
< span style="color:#FF00FF;" >Magenta< /span >

Maroon
< span style="color:#800000;" >Maroon< /span >

MediumAquaMarine
< span style="color:#66CDAA;" >MediumAquaMarine< /span >

MediumBlue
< span style="color:#0000CD;" >MediumBlue< /span >

MediumOrchid
< span style="color:#BA55D3;" >MediumOrchid< /span >

MediumPurple
< span style="color:#9370DB;" >MediumPurple< /span >

MediumSeaGreen
< span style="color:#3CB371;" >MediumSeaGreen< /span >

MediumSlateBlue
< span style="color:#7B68EE;" >MediumSlateBlue< /span >

MediumSpringGreen
< span style="color:#00FA9A;" >MediumSpringGreen< /span >

MediumTurquoise
< span style="color:#48D1CC;" >MediumTurquoise< /span >

MediumVioletRed
< span style="color:#C71585;" >MediumVioletRed< /span >

MidnightBlue
< span style="color:#191970;" >MidnightBlue< /span >

MintCream
< span style="color:#F5FFFA;" >MintCream< /span >

MistyRose
< span style="color:#FFE4E1;" >MistyRose< /span >

Moccasin
< span style="color:#FFE4B5;" >Moccasin< /span >

NavajoWhite
< span style="color:#FFDEAD;" >NavajoWhite< /span >

Navy
< span style="color:#000080;" >Navy< /span >

OldLace
< span style="color:#FDF5E6;" >OldLace< /span >

Olive
< span style="color:#808000;" >Olive< /span >

OliveDrab
< span style="color:#6B8E23;" >OliveDrab< /span >

Orange
< span style="color:#FFA500;" >Orange< /span >

OrangeRed
< span style="color:#FF4500;" >OrangeRed< /span >

Orchid
< span style="color:#DA70D6;" >Orchid< /span >

PaleGoldenRod
< span style="color:#EEE8AA;" >PaleGoldenRod< /span >

PaleGreen
< span style="color:#98FB98;" >PaleGreen< /span >

PaleTurquoise
< span style="color:#AFEEEE;" >PaleTurquoise< /span >

PaleVioletRed
< span style="color:#DB7093;" >PaleVioletRed< /span >

PapayaWhip
< span style="color:#FFEFD5;" >PapayaWhip< /span >

PeachPuff
< span style="color:#FFDAB9;" >PeachPuff< /span >

Peru
< span style="color:#CD853F;" >Peru< /span >

Pink
< span style="color:#FFC0CB;" >Pink< /span >

Plum
< span style="color:#DDA0DD;" >Plum< /span >

PowderBlue
< span style="color:#B0E0E6;" >PowderBlue< /span >

Purple
< span style="color:#800080;" >Purple< /span >

RebeccaPurple
< span style="color:#663399;" >RebeccaPurple< /span >

Red
< span style="color:#FF0000;" >Red< /span >

RosyBrown
< span style="color:#BC8F8F;" >RosyBrown< /span >

RoyalBlue
< span style="color:#4169E1;" >RoyalBlue< /span >

SaddleBrown
< span style="color:#8B4513;" >SaddleBrown< /span >

Salmon
< span style="color:#FA8072;" >Salmon< /span >

SandyBrown
< span style="color:#F4A460;" >SandyBrown< /span >

SeaGreen
< span style="color:#2E8B57;" >SeaGreen< /span >

SeaShell
< span style="color:#FFF5EE;" >SeaShell< /span >

Sienna
< span style="color:#A0522D;" >Sienna< /span >

Silver
< span style="color:#C0C0C0;" >Silver< /span >

SkyBlue
< span style="color:#87CEEB;" >SkyBlue< /span >

SlateBlue
< span style="color:#6A5ACD;" >SlateBlue< /span >

SlateGrey
< span style="color:#708090;" >SlateGrey< /span >

Snow
< span style="color:#FFFAFA;" >Snow< /span >

SpringGreen
< span style="color:#00FF7F;" >SpringGreen< /span >

SteelBlue
< span style="color:#4682B4;" >SteelBlue< /span >

Tan
< span style="color:#D2B48C;" >Tan< /span >

Teal
< span style="color:#008080;" >Teal< /span >

Thistle
< span style="color:#D8BFD8;" >Thistle< /span >

Tomato
< span style="color:#FF6347;" >Tomato< /span >

Turquoise
< span style="color:#40E0D0;" >Turquoise< /span >

Violet
< span style="color:#EE82EE;" >Violet< /span >

Wheat
< span style="color:#F5DEB3;" >Wheat< /span >

White
< span style="color:#FFFFFF;" >White< /span >

WhiteSmoke
< span style="color:#F5F5F5;" >WhiteSmoke< /span >

Yellow
< span style="color:#FFFF00;" >Yellow< /span >

YellowGreen
< span style="color:#9ACD32;" >YellowGreen< /span >
Vizzed Elite
PHP Developer, Security Consultant

Affected by 'Laziness Syndrome'

Registered: 04-06-06
Location: Area 51
Last Post: 88 days
Last Active: 82 days

Post Rating: 2   Liked By: EX Palen, Furret,

07-10-19 07:00 PM
EX Palen is Offline
Link | ID: 1373421 | 275 Words

EX Palen
Spanish Davideo7
Level: 116


POSTS: 4897/5023
POST EXP: 880808
LVL EXP: 17084542
CP: 138785.4
VIZ: 8335788

Likes: 0  Dislikes: 0
JigSaw : Well, the only tool I haven't really used is precisely anchor links (thanks for the name btw, didn't know they were named like this xD), so if those are the only ones giving trouble then I can feel somewhat accomplished.

I really wanted to test this table of contents for a possible future use, so I'll try to fix it and note what may be causing the failure. I already have a couple hints at what may be breaking them, let's hope my hunch is correct.

I honestly prefer rgb values for colors, they're easier to get familiar with and also easier to play around. Plus, the advanced color select in Word lets you test those values, so one more thing to copy/paste that you can test on your own.

I'm aware some color names don't work. I didn't want to use Tomato in my examples, but got forced to it because my other choices weren't working. Not sure what the deal is, but it could be a browser issue just like the < strong > tag.

I could add that name list to my opening post, but sadly I have no powers in this forum (I created it in Your Forum, then used my mod powers to move it here). Once I tackle the problem with the anchor links I can consider summoning someone who can deal with that.

EDIT: Found out the problem with anchor links, the url they redirect to isn't the appropriate one. This might be a site issue, so I'll go report this elsewhere alongside the bug of the Edit Thread page that's giving me such a headache.
Local Moderator
Game Guide Manager, Content Adder
Vizzed #1 Scooter fan


Affected by 'Laziness Syndrome'

Registered: 07-03-13
Location: Barcelona
Last Post: 14 days
Last Active: 22 min.

   

07-10-19 08:11 PM
is Offline
Link | ID: 1373426 | 205 Words


JigSaw
Level: 158


POSTS: 7851/7936
POST EXP: 584185
LVL EXP: 49729332
CP: 7931.8
VIZ: -46042336

Likes: 1  Dislikes: 0
EX Palen : I tested anchor links and while there are folder short cuts it doesn't appear to be working for me on here. So the trick is to make post, then get the url of thread after it is posted then edit your post with the new links. I made post in another thread to David hopefully he fixes it so we don't have to worry about adding the entire url to them to get them to work. But in meantime....

Here is example....

< a href="https://www.vizzed.com/boards/thread.php?id=102153#FormattingText" >1. Formatting Text< /a >
< a href="https://www.vizzed.com/boards/thread.php?id=102153#ColoredText" >2. Colored Text< /a >
< a href="https://www.vizzed.com/boards/thread.php?id=102153#HilightingText" >3. Highlighting Text< /a >
< a href="https://www.vizzed.com/boards/thread.php?id=102153#CombiningTheAbove" >4. Combining The Above< /a >
< a href="https://www.vizzed.com/boards/thread.php?id=102153#Hyperlinks" >5. Hyperlinks< /a >
< a href="https://www.vizzed.com/boards/thread.php?id=102153#AnchorLinks" >6. Anchor Links< /a >
< a href="https://www.vizzed.com/boards/thread.php?id=102153#TheBigQuestion" >7. The Big Question< /a >

< a id="FormattingText" >Blah blah blah < /a >
< a id="ColoredText" >Blah blah blah < /a >
< a id="HighlightingText" >Blah blah blah < /a >
< a id="CombiningTheAbove" >Blah blah blah < /a >
< a id="Hyperlinks" >Blah blah blah < /a >
< a id="AnchorLinks" >Blah blah blah < /a >
< a id="TheBigQuestion" >Blah blah blah < /a >

Vizzed Elite
PHP Developer, Security Consultant

Affected by 'Laziness Syndrome'

Registered: 04-06-06
Location: Area 51
Last Post: 88 days
Last Active: 82 days

    Post Rating: 1   Liked By: EX Palen,

07-10-19 08:35 PM
EX Palen is Offline
Link | ID: 1373432 | 86 Words

EX Palen
Spanish Davideo7
Level: 116


POSTS: 4901/5023
POST EXP: 880808
LVL EXP: 17084542
CP: 138785.4
VIZ: 8335788

Likes: 1  Dislikes: 0
JigSaw : Thanks for the help man! The links are now working properly, so I can now add this to the opening post and officially consider the FAQ finished (or what I initially wanted to be the FAQ, because who knows if I'll have to add anything else in the future).

At least it's an easy way around that, while still a nuisance, doesn't require much deeper knowledge or any additional explanation. I guess we've been lucky on that end, but hopefully David can quickly fix this.
Local Moderator
Game Guide Manager, Content Adder
Vizzed #1 Scooter fan


Affected by 'Laziness Syndrome'

Registered: 07-03-13
Location: Barcelona
Last Post: 14 days
Last Active: 22 min.

Post Rating: 1   Liked By: ,

07-10-19 09:00 PM
is Offline
Link | ID: 1373433 | 173 Words


JigSaw
Level: 158


POSTS: 7853/7936
POST EXP: 584185
LVL EXP: 49729332
CP: 7931.8
VIZ: -46042336

Likes: 0  Dislikes: 0
EX Palen : Awesome to see it working One thing I think you need to update here is the text size and color of each topic to make it stand out more. Right now the topics blend in with the rest of the content and it is easy to get lost.

I'd probably also add a "horizontal rule" under each section for even more emphasis. You can do that by adding a < hr > under each section (or each topic title). There are no closing tags to horizontal rules so it's just one tag. You can achieve similar appearance with div tags but it takes more code so I won't go into that.

Here is what a basic horizontal rule looks like (it's basically a line that goes across screen).


Chapter 1



Test test test


Chapter 2



Test test test





Sorry if I am giving too much suggestions but these are very important things that are needed with big chucks of content. Makes it easier for users to read and follow.
Vizzed Elite
PHP Developer, Security Consultant

Affected by 'Laziness Syndrome'

Registered: 04-06-06
Location: Area 51
Last Post: 88 days
Last Active: 82 days

   

07-11-19 07:44 AM
EX Palen is Offline
Link | ID: 1373461 | 153 Words

EX Palen
Spanish Davideo7
Level: 116


POSTS: 4902/5023
POST EXP: 880808
LVL EXP: 17084542
CP: 138785.4
VIZ: 8335788

Likes: 1  Dislikes: 0
JigSaw : Not sure why I didn't give any special treatment for the section titles. Maybe I thought it would already be okay with the TOC and the double spacing, but as you say, it clearly isn't.

I'll be testing the different kinds of headers later on (it's an influence of Gamefaqs, after all) because that's also something worth adding to the FAQ. And yes, the horizontal rule will also be very welcome.

The color of the titles could be changed, as another example of the coloring text section, but initially I'll try plain text with a header and a horizontal rule. Not many people are as color friendly as me, so showing how a plain text looks like can also be helpful. However, if I deem it doesn't stand out enough in my OP, then I'll surely apply the color change.

Easy suggestions like these are very welcome, so don't worry about it.
Local Moderator
Game Guide Manager, Content Adder
Vizzed #1 Scooter fan


Affected by 'Laziness Syndrome'

Registered: 07-03-13
Location: Barcelona
Last Post: 14 days
Last Active: 22 min.

Post Rating: 1   Liked By: ,

Links