Hardware Tutorials

Tutorials on hardware, software, operating systems and more.

Sep 16

HTML to AnyCode review

by Chris

Shareware was never one of my favourite groups of software because I always had to find a new replacement application when the 15 day trial expired. Occasionally though a piece of software comes along which seems indispensable and even the guy who hasn’t paid for the last dozen pieces of software he has got, despite the fact he should, we shell out for a good bit of shareware.

Why? Because some applications really are good. The piece of software that got my digging deep (although it’s a phase seen as shareware is almost always very well priced) was Exactcom’s HTML to AnyCode Converter. Allowing you to insert HTML click a button and have it translated into a different language without all the complications of you having to work out how to change and update it as well as risking missing something and causing your new script to go horribly wrong.

It’s a very simple application, once launched it has a title image and 3 tabs below this in which control all its function. Clicking the first tab allows you to enter your code and the language you want it to be converted to. You can also load in a source file in which will then automatically populate the code box for you – just in case you are too lazy to cut and paste; a problem which often haunts me.

One click on the convert button and suddenly your code has been transformed into the language of your choice, the default being JavaScript. The code is even wrapped in <script> tags so you can copy and paste straight into your page. These are automatically removed if you save the file so you can immediately include it into your page.

A nice help tabs also backs up the application with some information on how to use the application, how to register it, about Exactcom and contact details if you are having any problems with it – their support is good too. There is a final tab for registering the application though this disappears once done.

Although the default pages which the open file looks for are .htm and .html, all formats can be selected and imported. The code is rich text too so all your code is fully colour coded – it might be the next step up from Notepad as a web editor. It seems that they have thought of everything!

The only one complaint I would have against it is the image at the top still has a big “Buy it now!” slogan on despite the fact that I purchased and registered it many moons ago. That’s not really a problem though and if they happen to change it in later versions; I have free upgrades for life so I am not worried. Free upgrades are another good reason for shareware – most applications come with it.

Twice I have asked them for support and both times I got a prompt response. The first was when I lost my registration code (wasn’t my fault, well, maybe a little bit) and the second time was one of their new versions had an error in the JavaScript output, which the solved and made a new version available in around a day. Should you be worried that there was an error? I don’t think so, after all its shareware not a huge corporate developing the software, and free upgrades mean all bug fixes are yours.

Though its functions are not huge I find them very useful – I have used it for around a year now and I have hardy ever used it for anything other than converting my HTML text into JavaScript – long story which I will tell shortly. I have hardy scratched the surface of the conversions to ASP, PHP, Perl and JSP.

My main use for the application is for stories on one of my websites. Back in the olden days when I was getting started with Microsoft Access I did not know how to fit all my HTML in a text field with a maximum character amount of 255 – luckily for Exactcom I had not discovered the memo field type and so my solution was to convert the stories into JavaScript, give them a file named based on their ID in the database and include them dynamically that way.

That made HTML to AnyCode Converter vital to my operation though – but that doesn’t make it vital to yours. Exactcom make some great software and HTML to AnyCode is the best converter around. But the use of converting code is not a wide market. Overall, if you need converting done then this software is the only buy. But if you don’t need this function then it’s a product you will sadly not want to register.

Software

No Comments »
Sep 16

Styling text in CSS

by Chris

You can easily add CSS styles to your text. All you need to do is add a <p> style.

p {color: #000099; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

Now whenever you have text inside the paragragh tag, it will use the above style. You can also add special headings.

p.h {color: #CC0000; font-size: large; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

To use this in your text just add the code:

<p class="h">Some Headline</p>

You need to use CSS Styles for your texr as the W3C are cutting out the <font> tag from XHTML 1.0 Strict upwards. Although you can still use it in XHTML 1.0 Transitional, we think this will not be the case in later versions.

You can also use CSS to change the font of other tags such as your links. These include rollover, hit and visited pages. Take a look at this code that can be copied and pasted staight into your HTML pages.

<Style>
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</Style>

This produces the blue to green underlined rollovers on this page.

Programming

No Comments »
Sep 16

CSS in web pages

by Chris

There are 3 ways to add CSS into your web pages:

* External Style Sheets
* Internet Style Sheets
* Style Tags

External Style Sheets

These are style sheets saved as .css. You then link these into your page using the following tag.

<link href="global.css" type="text/css" rel="stylesheet" />

This style sheet is then included in your page when its in the browser.

Internal Style Sheets

This used a style tag, as you may have seen in serveral tutorials. Here is one we have for image rollovers.

<style type="text/css">
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</style>

They are seperate from everything else but are included in the heag tag of your web page.

Style Tags

These are included inside your actual element. For instance if you wanted to change the border, of just one table, you could use the following code:

style='BORDER-BOTTOM: #84B953 1px solid'

This would just be included in the actual tag of your HTML element. Eg:

<table style='BORDER-BOTTOM: #84B953 1px solid'>...</table>

Programming

No Comments »
Sep 16

HTML image tag

by Chris

Images can be embedded in a page using only one tag. There are examples of images on this page – the top header secton contains three images.

The basic syntax is as follows.

<img src="location.gif" width="300" height="100" border="0" alt="Description text">

For a basic image tag all you need is <img src=”location.gif” alt=”description”>. If you do this the image will display at its normal size although it is always a good idea to add a width and height tag.

The alt property defines the text that is displayed when the image is missing, it is displayed where the image should be. An example is shown below.

<img src="fakelocation.gif" width="200" height="100" alt="Here is an example">

Would produce:

Here is an example

To add a link round an image simply do it like a normal hyperlink

<a href="targetpage.html"><img src="location.gif" border="0></a>

Programming

No Comments »
Sep 16

Doctype tags in HTML

by Chris

The doctype tag tells the browser what standard the page conforms to. Until now doctypes did not have to be including but with the creation of XHMTL 1.0, they must know be put in. Doctype tags go above your head tag. There are three types of doctype tags. Strict, transitional and frameset.

Strict

Strict is the hardest standard to compy with. If you add a strict doctype to your document, you can’t use deprecated tags, and traditionally a lot of websites have stayed away – but more and more are coming round to the idea of tigher standards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

This is the most commonly used doctype as it allows you to keep some of the old tags but still lets you move on to XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

This is for frameset pages (as you have probably guessed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Programming

No Comments »
Sep 16

Basic tags in HTML

by Chris

This page covers the tags you will most commonly use in HTML that are the most basic although it does not cover page structure. See the next page for that.

Paragraphs

This signifies that the text within should be in its own paragraph. There is a break between each paragraph such as the space between the introduction text and this section.

<p>Your text goes here</p>
<p>Putting more text here would create a gap between them</p>

Line breaks

This is where you want to start a new line but do not want a gap in between them.
Such as here. The previous line was not finished but a new one was started. This is a single tag which does not require closing.

Some text here<br />
This text would be on the line below

Comments

If you want to add some notes into your page you can do it using a comment tag. These are good to remind you what every does or where a particular section starts.

<!-- your comment goes here -->

Comments will not display in the browser although if anyone goes through your sourcecode they will be able to see it so do not put private information in there.

Horizontal Lines

With the advent of borders and more color options in HTML, the horizontal line has become less used these days but is still good to easily section off different parts of the page.

<hr />

Headings

Rather than having to change title text with color, size and weight you can simply replace your <p> tags with title tags. There are 6 different titles that are built into HTML.

<h1>Here is a heading</h1>
<h2>Here is a heading</h2>
<h3>Here is a heading</h3>
<h4>Here is a heading</h4>
<h5>Here is a heading</h5>
<h6>Here is a heading</h6>

CSS has made these tags less needed although they are easy to use and help with search engine optimisation. A blank line is also automatically added after a heading.

Programming

No Comments »
Sep 16

HTML elements

by Chris

As we have already seen, HTML is made up of elements such as <p> or <br>. HTML elements are surrdouned by < and > characters, which is why if you want to use these in text you must use code.

The first > signifies the start of a tag and the > shows the end. HTML tags are not case sensative so <BR> is the same as <br>. They usually come in pairs although several are just one.

For example:

<u>This text would be underlined</u>

EDIT: Since this article was originally written, the u tag has since been deprecated. Underlining should now be done using CSS instead.

You have the opening tag <u> which starts the underlining, the content which is the text saying “this text would be underlined” and the closing tag </b>. It would produce:

This text would be underlined

HTML tags should be layered inside each other, for example:

<p><u>This is correct</u></p>

Whereas:

<p><u>This is not correct</p></u>

Sometimes you do not have a closing tag you only have a single tag such as is the case with horizontal lines:

<hr />

Would produce:

There is no need for a closing tag.

Programming

No Comments »
Sep 16

Introduction to HTML

by Chris

HTML is the standard for creating web pages over HTTP. HTML stands for hyper text markup language. HTML is controlled by the W3C which is an assosiation assigned to setting world standards on the internet.

HTML has had different versions throughout its life. Until a few years ago (about 2000) HTML 4.01 was the standard, but since then the W3C has made XHTML 1.0 the official standard lanuage although software has been slow on the uptake. Internet Explorer 6.0 supports XHTML, and a few of the latest web editors such as Dreamweaver MX also support it.

What is HTML made of?

HTML is made up of tags such as <head> or <table> of which content is then put inside. <p> stands for paragh and every time a new <p> tag is used another paragragh is added to the page. Take a look at this code:

<p>This text would be in its own paragragh</p>

After the content is in the tag is closed with a slash inside the tag. In this case it is </p>. Most tags need closing. However some tags such as Horizontal Lines <hr /> do not. A HTML page is made up of two main sections. The head and the body. You will learn more about these later.

Programming

No Comments »
Brand New Day Theme by Caroline Moore | Copyright 2012 Hardware Tutorials | Powered by WordPress