Chat rooms

Your browser looks like it's not compatible with our live chat box. We recommend FireFox.

Discussions

Options

This news was posted in the chat forum of the DSI hints and tips group

News

Back to topics list

Pages: 1 2

Subject
HTML that's a little more advanced...
UPDATED 00:05 04/08/2005 following a suggestion from Gareth-E - thanks Gareth

If you already know some HTML then you might want to use the DSI Cascading Style Sheet to help you format your posts. Tags are listed and then followed by an example...

DSI CSS reference

Most examples are followed by a line of unstyled "Lorem ipsum" to illustrate trailing line padding...


<p>Text</p> example text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque interdum ante sit amet magna. Morbi laoreet elit nec nisl. Integer aliquet risus sit amet tortor. Duis sed ante sed eros tincidunt dictum. Sed at mi vel est dignissim pretium. Aliquam posuere varius nulla. Donec ultrices bibendum dui. Nunc non nisl quis mi pretium commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vitae magna vitae nibh lacinia lobortis. Mauris mattis quam et lacus. Integer mollis volutpat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris pulvinar, odio vitae vulputate faucibus, libero magna vulputate elit, fermentum porttitor arcu wisi nec elit. Fusce tempus, nibh ac luctus pulvinar, arcu odio ornare nisl, et faucibus orci metus sit amet orci. In hac habitasse platea dictumst. Suspendisse facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nisl ligula, tempor sit amet, mollis eget, eleifend ac, dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<small>Text</small> example text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<h1>Text</h1> example text:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<h2>Text</h2> example text:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<h3>Text</h3> example text:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<ul><li>First bullet point</li>
<li>second bullet point</li></ul> example text:
  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<ol><li>First bullet point</li>
<li>second bullet point</li></ol> example text:
  1. Lorem ipsum dolor sit amet

  2. Lorem ipsum dolor sit amet

  3. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<em>Text</em> example text:
Lorem ipsum dolor sit amet


<blockquote>Text</blockquote> example text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque interdum ante sit amet magna. Morbi laoreet elit nec nisl. Integer aliquet risus sit amet tortor. Duis sed ante sed eros tincidunt dictum. Sed at mi vel est dignissim pretium. Aliquam posuere varius nulla. Donec ultrices bibendum dui. Nunc non nisl quis mi pretium commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vitae magna vitae nibh lacinia lobortis. Mauris mattis quam et lacus. Integer mollis volutpat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris pulvinar, odio vitae vulputate faucibus, libero magna vulputate elit, fermentum porttitor arcu wisi nec elit. Fusce tempus, nibh ac luctus pulvinar, arcu odio ornare nisl, et faucibus orci metus sit amet orci. In hac habitasse platea dictumst. Suspendisse facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nisl ligula, tempor sit amet, mollis eget, eleifend ac, dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<pre>Text</pre> - when using this tag ALWAYS put in line breaks, either with br tags or with enter. DSI will crop lines at about 64 characters if you don't. Example text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque interdum ante sit amet magna. Morbi laoreet elit nec
nisl. Integer aliquet risus sit amet tortor. Duis sed ante sed
eros tincidunt dictum. Sed at mi vel est dignissim
pretium. Aliquam posuere varius nulla. Donec ultrices bibendum
dui. Nunc non nisl quis mi pretium commodo. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Curabitur vitae magna vitae nibh lacinia lobortis.
Mauris mattis quam et lacus. Integer mollis volutpat purus.
Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Mauris pulvinar, odio vitae
vulputate faucibus, libero magna vulputate elit, fermentum
porttitor arcu wisi nec elit. Fusce tempus, nibh ac luctus
pulvinar, arcu odio ornare nisl, et faucibus orci metus sit
amet orci. In hac habitasse platea dictumst. Suspendisse
facilisis. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Fusce nisl
ligula, tempor sit amet, mollis eget, eleifend ac, dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<hr /> this doesn't format text as such, but it does create a nice horizontal line you can use to "partition" messages - important the HR tag was specific to Internet Explorer, that is, users of other, older browsers mightn't see it! New browsers shouldn't have a problem though. Example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Ok, I think tables are evil - so I stopped here...
Reply Quote
Posted Wed 03 Aug 2005
Edited Thu 04 Aug 2005

Use of inline style


In some cases the CSS (Cascading Style Sheet) provided by DSI won't let you do everything that you need to do. In this case you should use inline styles to format your post. One thing to bear in mind is that using an inline style will "overwrite" the contents of the DontStayIn CSS for the tags you apply it to. So how do you get around this problem if you want to do something like the following...

In a post I might have an unordered list set up using "ul" and "li" tags, for example:

  • Item one in my list

  • Item two in my list

  • Item three in my list

Which I set up using the following code:

<ul><li>Item one in my list</li>
<li>Item two in my list</li>
<li>Item three in my list</li></ul>

This is fine until I realise that I need to change the second of the list items and draw attention to the fact it has changed...

So how can I do this? In the case of a few words, which is what we have here I can use a "span" tag to mark text. Span Tags are unique in HTML text tags in that they do not have any style associated with them, so all they do is add style into the existing format that's being applied. So how to use them? Like this:

<ul><li>Item one in my list</li>
<li><span STYLE="color:red">UPDATED! The New</span> item two in my list</li>
<li>Item three in my list</li></ul>

Which will display as:

  • Item one in my list

  • UPDATED! The New item two in my list

  • Item three in my list

Note that in the "Span" tag I have added an inline style by inserting:

STYLE="color:red"

Note the American spelling of "color", also there are no spaces used... to get an idea of the other styles you might want to use you need to consult a reference since there are too many to go through here!

One that is worth a mention is the font-size property, when using this it is best to use "em"s as the unit since this means that:

  1. People using screen magnifying software will be able to see the layout as you intend it to look.

  2. If the DSI CSS changes, for example to change to a larger font size, your text will change in size by the same amount

An "em" is at it's most simple a relative measure, so a size of 1em matches exactly the size of the other text in a block, whereas a size of 2.5em is 2.5 times bigger.

For example, we might want to make our changed bulletted list item stand out a little more by increasing the text size. Changing the STYLE declaration to:

STYLE="color:red; font-size:1.5em"

Note the semi-colon used to separate the two formatting commands! This results in our second list item looking like this:

  • UPDATED! The New item two in my list

But I want to style more than just a few words


I'll explain how to use div tags to format sections of a message tomorrow!
Reply Quote
Posted Thu 04 Aug 2005
Edited Thu 04 Aug 2005
Are you like a reference book for wanna be nerds or what like????

OK i read HTML then i read XHTML now ya tellin me i need to read CSS to do all the colour bits too.

Is there ever an end to this?
Who laughed: Alcopimp and IainC
Reply Quote
Posted Wed 07 Sep 2005
Edited Wed 07 Sep 2005



ITS OFFICIAL :



IAINC IS THE


MATRIX !!




Who laughed: Chicca-Babe-NC, Pompey-Reevesy, bAnE, RIDDLA, wo0, Lee-Jarvis and IainC
Reply Quote
Posted Fri 01 Sep 2006
Edited Fri 01 Sep 2006
Nice one, cheers Ian.

Any chance you could tell us how to underline a heading.

Thanks
Reply Quote
Posted Fri 01 Sep 2006
Edited Fri 01 Sep 2006

Like this?


<h1><u>Like this?</u></h1>

But underlining is generally considered to be bad form since it makes text look like a link!
Who laughed: Beth
Reply Quote
Posted Fri 01 Sep 2006
Edited Fri 01 Sep 2006
Moochas Gracias Ian....
Reply Quote
Posted Fri 01 Sep 2006
Nice one Iain - are you training a super HTML army ???
Reply Quote
Posted Fri 01 Sep 2006
Nice one Iain - are you training a super HTML army ???

All hail IainC! LoL!
Reply Quote
Posted Fri 01 Sep 2006
Great job Iain. Thanks
Reply Quote
Posted Sun 03 Sep 2006
heres one for ya - how do i get a coloured glow round my text? say if i have it all in biggish black letters and want a nice glowing outline in red around the edge of it all?
Reply Quote
Posted Fri 08 Sep 2006
i must learn these wise skills

TEACH ME


  • wisedom is power



  • i took the red pill
    Who laughed: RIDDLA
    Reply Quote
    Posted Sat 09 Sep 2006
    Edited Sat 09 Sep 2006
    i must learn these wise skills

    its considered not top form to use underline as looks like a link but lookin goooood doolittle :)
    Reply Quote
    Posted Sat 09 Sep 2006
    its considered not top form to use underline as looks like a link but lookin goooood doolittle :)

    you are so pickey
    Reply Quote
    Posted Sat 09 Sep 2006
    tis true!
    Reply Quote
    Posted Sat 09 Sep 2006
    Reply Quote
    Posted Sat 09 Sep 2006
    heres one for ya - how do i get a coloured glow round my text? say if i have it all in biggish black letters and want a nice glowing outline in red around the edge of it all?

    You can't do that degree of decoration in (X)HTML - you'll have to create an image and hotlink that in instead.
    Reply Quote
    Posted Sat 09 Sep 2006
    You can't do that degree of decoration in (X)HTML - you'll have to create an image and hotlink that in instead.

    There is a way to make text glow afaik, but its non-standard and only supported by IE so it wont display in other browsers...
    Reply Quote
    Posted Sun 10 Sep 2006
    non-standard and only supported by IE so it wont display in other browsers

    Yup - so it's not (X)HTML as recommended by the W3C or "official" HTML which is specified in ISO/IEC 15445:2000(E).
    Reply Quote
    Posted Sun 10 Sep 2006
    Edited Sun 10 Sep 2006
    Yup - so it's not (X)HTML as recommended by the W3C or "official" HTML which is specified in ISO/IEC 15445:2000(E).

    Yeah, it would be horribly bad practice to use it on a proper website, but I dont think most of the people making profiles on here particularly care whether they conform to standards or not, they just want their profile to look pretty, :-/
    Reply Quote
    Posted Sun 10 Sep 2006

    Pages: 1 2

    Back to topics list

    Post a reply

    To post a comment you must first log on - use the links below to log on or create a free account.

    Log in

    If you've already signed-up

    Sign up FREE!

    If you've not used the site before

    Bored? Watch this!


     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    <

    Hotbox