IBM Software Russia User Group

Miscellaneous Technology #01 - HTML Links

By Glen Brumbaugh posted Sat April 21, 2018 10:06 PM

  

I've had a couple of people ask me how I put page navigation into my Blog entries.  It's easy, and I'll show you two different ways to do it.  Unfortunately, only one of them works for IMUC Blogs.  A caveat first, however.  I had to go back to the beginning of the World Wide Web (aka internet) days to drag up my HTML skills.  There may be much newer and better ways to do this.  To all those IMUC front-end developers, feel free to laugh and then jump in and comment with your updates and/or improvements.

 

HTML Anchor Tag

The first way to enter a link is to use a HTML anchor tag.  The IMUC Blog editor has a button to create links (Editor Link button).  When you press a button to create a link, a pop-up box appears.  This box has the following fields:  

    Url   Enter the URL to go to when the link is clicked. This will be your target HTML page.
    Text to display   Enter the text to display when the cursor hovers over this link.
    Title   Enter the text to be displayed in your Blog.

 

 You can also create the same result in native HTML.  To see your Blog in its raw HTML formatting, use the IMUC Blog editor HTML button (Editor HTML button).  The HTML tag that will be created is an "anchor" tage ("").  The anchor tag looks like this:  

    your-url-goes-here" title="your-hover-text-goes-here">your-blog-display-text-goes-here

Note that the double quote marks are important.  If you use an anchor, you will see the specified display text in your Blog.  Here's an example (pointing to this Blog):

HTML Anchor Tag display text

 

HTML Form

The second way to do embed a link is to create an HTML "Form".  The IMUC editor has no way to do this and, even if you gird yourself and do battle with HTML, the editor does not process HTML Forms.  For your reference to create a button on another website, the HTML to create a button is as follows: 

 

  • The action attribute of the form tag defines the URL to send the form to ("your-URL-goes-here"). 
  • The "submit" value of the type attribute of the input tag tells HTML to submit the form when the button defined by the input tag is clicked. 
  • The value attribute of the input tag defines the text to display on the button ("your-button-text-goes-here").

First Blog in Series    Previous    Next    Last Blog in series

4 comments
26 views

Comments

Mon May 14, 2018 04:09 AM

Styling for buttons

Normally you would just use the HTML

tag, but it would seem the IMWUC HTML editor doesn't like that and strips it out, so you'll have to do it long-hand like this:-

style="text-decoration: none; background-color: #eeeeee; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC;"

The other problem however is that the IMWUC HTML editor also appears to strip off any styling you put onto an tag, so you have to put it onto a tag around the to actually get it to stick. So you'd end up with:-

My Text

Hope that helps.

Thu April 26, 2018 04:26 PM

Link to Last Entry in Series

Morag,

Great comments.  And either you'll have to post how to make a link look like a button or I'll have to research it.  As I said, my HTML is pretty old.  As far as the "Last Entry" link goes, that's a question worth expanding upon.

I created a BitLinks (bitly.com) alias to point to the last entry in the series.  Then, all I have to do is to update the BitLink and all of the Blogs using it are automatically updated.  I suppose I could also have done this for each link as well.  That would probably have been smarter.  We'll see have stable the IMUC link references are.  

Wed April 25, 2018 03:21 PM

Buttons

I assume the reason your like the form version is for the button look? You know you can style your HTML links to look like buttons?

Wed April 25, 2018 03:20 PM

Link URLs - How?

Making links is easy enough, I'm more interested in how you keep the content of the links up-to-date? I hope you're not going to have to manually update every blog post in the series each time you write a new one? How do you create the URL for "last blog in series" for example?