Page 1 of 3

Basic HTML codes for PBASE galleries

PostPosted: Mon Aug 30, 2004 10:45 pm
by matiasasun
:!: EDIT NOTE: THIS INFORMATION AND MUCH MORE AVAILABLE IN THE PBASE WIKI AT http://pbasewiki.srijith.net/ :!:


A lot of people don´t know very much about HTML codes. But I think that with these few codes we can start learning something more to create special things in our galleries. Note that I´ve said "galleries": this codes won´t work on the forums.

To make them work remember to add this codes in the "description" of your galleries, and remember to check the HTML box.

1.- To center text, link or images:
Code: Select all
<p align="center">

Note that "center" can be changed acording to your desires.
2.- To make a line break (an "enter" in Word language):
Code: Select all
<br>

3.- To set the text bold:
Code: Select all
<b> at the begining and </b> at the end
so this code: it is <b>there</b>

should look like this:
it is there

4.- To create a link:
Code: Select all
<a href="http://www.__SELECTED__URL__"> Press here for Link </a>

Note that the second part of the code with the "/" closes the link
For example this
Code: Select all
try to look at <a href="http://www.__SELECTED__URL__">this image</a> and give your opinion

should look like this
try to look at this image and give your opinion

5.- To insert an image:
Code: Select all
<img SRC="http://www.pbase.com/image/__IMAGE__NUMBER__.jpg">

Note that ".jpg" must be added to the end of the line. Also note that the correct URL does have those elements.
6.- To insert a link in an image, so when you click over the image the link works:
Code: Select all
<a href="http://www.__SELECTED__URL__"><img SRC="http://www.pbase.com/image/__IMAGE__NUMBER__.jpg"></a>

Note that these last code is a combination from the previous two.

I hope this can help people around here. There are a lot of sites with a lot of other codes but I think these ones are the most useful and the most common. Please correct me if I´m wrong in anything.

Combinations

PostPosted: Tue Aug 31, 2004 4:27 pm
by matiasasun
Ok. I forgot another possibility to combine three CODES. For instance, you want to create this paragraph, with a BOLD link located in the middle ("My son" will be the link).

All this Images were taken by [url=http://www.__MY_SON´S__URL__]My Son[/url] last sunday in his House.


Then the text and codes that should be added to your description would be:

Code: Select all
All this Images were taken by <a href="http://www.__MY_SON´S__URL__"><b>My Son</b></a> last sunday in his House.


You can even combine more codes and add
Code: Select all
<p align="center">

at the begining of the previous code and is will appear centered.

:!: You can also use these codes in the edit page of a single image, but note that in that case these codes will work in the space UNDER the picture and before the lines for Camera Body and comments and that stuff. The same will apply to galleries: the description will work (almost allways) only in the space between the gallery location and the thumbnails. To make more changes it is better to use a stylesheet.

:!: Remember to CHECK THE HTML USAGE BOX UNDER THE DESCRIPTION IN THE GALLERY EDIT PAGE.

Re: Basic HTML codes for PBASE galleries

PostPosted: Fri Sep 03, 2004 3:16 am
by matiasasun
:arrow: Short Spanish translations request
Mucha gente me ha preguntado acerca de códigos HTML. Los siguientes son una lista de algunos básicos que pueden funcionar en las galerías y en las imágenes (deben ser usados en los espacios marcados como "description"), y deben recordar hacer click sobre la cajita que dice que están usando HTML. Noten que estos códigos no funcionan en los foros.

1.- Para centrar texto, links o imágenes:
Code: Select all
<p align="center">

Noten que "center" puede ser cambiado de acuerdo a lo que deseen, es decir, la alineación puede ser "right" o "left".
2.- Para hacer un salto de línea (un "enter" sería el equivalente en Word):
Code: Select all
<br>

3.- Para poner el texto en negritas:
Code: Select all
<b> en el principio y </b>  para marcar el fin de las negritas
Así que la frase: Esto está <b>aquí</b>

Debería lucir algo así como:
Esto está aquí

4.- Para crear un vínculo, o "link":
Code: Select all
<a href="http://www.__URL__SELECCIONADA__"> Aprete aquí para ver la página </a>

Note que, al igual que como es con las negritas, el cógido que tiene el / cierra el vínculo.
Por ejemplo, este códico
Code: Select all
Véa esta <a href="http://www.__URL__SELECCIONADA__">imagen</a> y deme su opinión

Debería lucir así
Véa esta imagen y deme su opinión

5.- Para insertar una imagen:
Code: Select all
<img SRC="http://www.pbase.com/image/__IMAGE__NUMBER__.jpg">

Note que ".jpg" debe ser agregado al final de la línea. Es importante respetar el formato de <image><number><.jpg>. Note también que lo que usted está haciendo es un "direct link", es decir está usando la imagen tal cual está guardada en los archivos de PBase, capacidad sólo permitida en los usuarios que pagan.
6.- Para insertar el vínculo, pero con una imagen, es decir, que cuando apreto sobre la imagen el vínculo funciona:
Code: Select all
<a href="http://www.__URL__SELECCIONADA__"><img SRC="http://www.pbase.com/image/__IMAGE__NUMBER__.jpg"></a>

Note que en este caso se trata de una combinación de los dos anteriores códigos.

Espero que esto pueda ayudar. Deben notar que hay miles de sitio en Internet, a los que se puede llegar por google, que están en español o en muchos otro idiomas y que tienen otros códigos mas específicos. Sepan tambien que siempre es bueno intentar ver el código fuente de las páginas que les parezcan interesantes para ir aprendiendo la mecánica del asunto.

Si he cometido algún error les agradecería la correción. Espero sirva.
Matias, Chile

PostPosted: Fri Sep 03, 2004 8:26 am
by srijith
If you are a standards junkie (I am one), do note that XHTML 1.0 standard states that it should be
Code: Select all
<br />
and not
Code: Select all
<br>

and
Code: Select all
<img src="URL" />
and not
Code: Select all
<img src="URL">

Basically every tag has to be closed. But then the older tags work perfrectly fine in all browsers.

Re: Basic HTML codes for PBASE galleries

PostPosted: Thu Sep 23, 2004 12:39 pm
by gary777
could you post examples of how to change font size and color?

Re: Basic HTML codes for PBASE galleries

PostPosted: Sat Sep 25, 2004 6:00 am
by matiasasun
gary777 wrote:could you post examples of how to change font size and color?


I did try to answer that, but on this other threat.

Thank you

PostPosted: Fri Oct 15, 2004 12:12 am
by stormseye
Thank you for this, Matias - it was very helpful. I used it a bit - nothing fancy, mind you - but it's a beginning!

Re: Thank you

PostPosted: Fri Oct 15, 2004 12:26 am
by matiasasun
Then I´m happy Bruce. If you want to try HTML Maps the This Other Link can help you a little bit. Take care.

how can I make a link open in a new window?

PostPosted: Thu Oct 28, 2004 12:00 pm
by andrzej
I guess that the title says it all.

Here is my HTML tag which I would like to open in a different window:
<a href="http://www.circusamok.org"> http://www.circusamok.org </a>

Thanks
Andrzej

Re: how can I make a link open in a new window?

PostPosted: Thu Oct 28, 2004 12:51 pm
by matiasasun
Hi! The Code for a link that need to be opened in another window might be this one:

Code: Select all
<a href="http://www.circusamok.org" target="_blank">www.circusamok.org</a>


As you can see it is almost the same structure as the usual link, but with this extra code, wich does the trick: (Note the space between the final <"> of the URL and this code)

Code: Select all
target="_blank"


More information can be found HERE.

Hope this helps. Anyway, to keep this threat in order try to make questions in a new threat at this same forum section.

Re: how can I make a link open in a new window?

PostPosted: Mon Nov 15, 2004 3:19 am
by andrys
matiasasun wrote:Hi! The Code for a link that need to be opened in another window might be this one:

Code: Select all
<a href="http://www.circusamok.org" target="_blank">www.circusamok.org</a>


As you can see it is almost the same structure as the usual link, but with this extra code, wich does the trick: (Note the space between the final <"> of the URL and this code)

Code: Select all
target="_blank"


More information can be found HERE.

Hope this helps. Anyway, to keep this threat in order try to make questions in a new threat at this same forum section.


Thanks for this threaD (not at all a threat), matiasasun -- a good one to point people to.

To save work (though not adhere to the strictest standards), the quotes
are not needed for the new window code using 'blank' in that I use

the parameter
Code: Select all
target=_blank
within an anchor link

and it works in all browsers I've tried

Thanks again,

Re: how can I make a link open in a new window?

PostPosted: Mon Nov 15, 2004 9:03 am
by srijith
It does work because the browser tries to behave well. But you never know what kind of dirty tricks IE has in its sleeves in the next version :) It is safe to adhere to the specs when you can. As such, the specs says that the value in the "Variable=value" pair in an HTML tage has to be quoted.

So while
Code: Select all
target=_blank
will work,
Code: Select all
target="_blank"
is future safe :)

PostPosted: Sat May 28, 2005 12:03 am
by soulfulimpressions
sssstttttyyyylllleee ssshhheeeeeetttsss. i need a face lift . cany any of you experts create :D :D :D something cool to share with the rest of us

PostPosted: Mon Jun 06, 2005 7:36 pm
by plasma
I'm not getting something. While I can mutter along and create some of my own CSS sheets, I don't get where the HTML coding fits in. Do I just have to find the correct place in my CSS code, or is it something deeper that will require an HTML editor?

Can someone post a simple style sheet with some customized HTML links and text where I can kind of learn by monkey-see monkey-do.

Many thanks

Bob

PostPosted: Mon Jun 06, 2005 11:50 pm
by nik5700group
plasma wrote:I'm not getting something. While I can mutter along and create some of my own CSS sheets, I don't get where the HTML coding fits in. Do I just have to find the correct place in my CSS code, or is it something deeper that will require an HTML editor?

Can someone post a simple style sheet with some customized HTML links and text where I can kind of learn by monkey-see monkey-do.

Many thanks

Bob


Hi Bob,

What the examples are showing is HTML, which is different from CSS. The examples are showing what you could use in the Description area of your images (also the Caption area).

CSS is not combined with the HTML (at least not on PBase).

They are two separate things. Think of it in terms of the human body.

The bones/skeleton of the body is the HTML (HyperText Markup Language).

The inner workings/brains of the body is the CSS (Cascading Style Sheet).

Best thing I can tell you do do, so that you can try to learn is, find a page/image here that you like. (I only know Windows, so if you have a Mac, someone else will have to help.) Right-click on that page, then click View Page Source. This will show you the 'structure/skeleton' of that page. You will also notice near the top, where it shows:

Code: Select all
<link rel="stylesheet" type="text/css" href="WHATEVER THE URL IS">
(this is the 2nd link showing, the first is PBase Admin only).

That url that comes after href, is the CSS that the page uses. If you want you can copy that url into another window/tab and bring up the stylesheet that is being used.

Then, copy and paste the CSS or HTML into Notepad (which is great simple text editor), open notepad twice if you want both the HTML and CSS.

Then you can compare, so that you can start to learn how the HTML page pulls from the CSS page.

I know it sounds a little confusing, but once you start working with it, correctly, then it will seem old hat. It's just getting over that first hurdle.

-Christine