Board index PBase HTML and Style Sheets Basic HTML codes for PBASE galleries

HTML and Style Sheets

Basic HTML codes for PBASE galleries

Customize your galleries.
matiasasun
 
Posts: 1493

Basic HTML codes for PBASE galleries

Post Mon Aug 30, 2004 10:45 pm


:!: 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.
Last edited by matiasasun on Mon Jan 09, 2006 3:35 pm, edited 2 times in total.

matiasasun
 
Posts: 1493

Combinations

Post Tue Aug 31, 2004 4:27 pm


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.
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

matiasasun
 
Posts: 1493

Re: Basic HTML codes for PBASE galleries

Post Fri Sep 03, 2004 3:16 am


: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
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

srijith
Moderator
 
Posts: 2321
Location: Amsterdam


Post Fri Sep 03, 2004 8:26 am


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.

gary777
 
Posts: 4

Re: Basic HTML codes for PBASE galleries

Post Thu Sep 23, 2004 12:39 pm


could you post examples of how to change font size and color?

matiasasun
 
Posts: 1493

Re: Basic HTML codes for PBASE galleries

Post Sat Sep 25, 2004 6:00 am


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.
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

stormseye
 
Posts: 240

Thank you

Post Fri Oct 15, 2004 12:12 am


Thank you for this, Matias - it was very helpful. I used it a bit - nothing fancy, mind you - but it's a beginning!
Bruce B

"I have always felt that it is HOW one sees
rather than WHAT one sees
that makes any photograph interesting."
- Michael A. Smith, 1999

matiasasun
 
Posts: 1493

Re: Thank you

Post Fri Oct 15, 2004 12:26 am


Then I´m happy Bruce. If you want to try HTML Maps the This Other Link can help you a little bit. Take care.
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

andrzej
 
Posts: 1

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

Post Thu Oct 28, 2004 12:00 pm


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

matiasasun
 
Posts: 1493

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

Post Thu Oct 28, 2004 12:51 pm


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.
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

andrys
 
Posts: 2701

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

Post Mon Nov 15, 2004 3:19 am


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,

srijith
Moderator
 
Posts: 2321
Location: Amsterdam

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

Post Mon Nov 15, 2004 9:03 am


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 :)

soulfulimpressions
 
Posts: 284


Post Sat May 28, 2005 12:03 am


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

plasma
 
Posts: 12


Post Mon Jun 06, 2005 7:36 pm


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

nik5700group
 
Posts: 13


Post Mon Jun 06, 2005 11:50 pm


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

Next

Board index PBase HTML and Style Sheets Basic HTML codes for PBASE galleries

Who is online

Users browsing this forum: No registered users and 2 guests