Want to learn a bit of HTML but don’t have the time for college courses? Using code is one of the best ways to customize a website whether the pages are built from scratch or supported by Drupal hosting. With a few commands, fonts and images can be modified. That’s not including all of the other things that can be done through HTML.
In reality, HTML is one of the easiest languages to use for programming. As long as there is a bit of understanding surrounding the basics, it doesn’t take much effort to make changes to a website.
Here are some of the most basic concepts behind programming in HTML. Getting a handle of these ideas can help any developer go on to make greater custom alterations later on. The best part is that the following concepts work on any website because of the universal nature of HTML.
Knowing What Tags Do
Tags, or commands, are used to tell a visitor’s browser how certain aspects of a webpage are to behave. Without these instructions, text will simply appear on the page without really doing anything. For example:
- http://www.yourwebsite.com – is not a link to click on.
- <a href=”http://www.yourwebsite.com”>Your Website</a> – is a link to click on.
See the difference? The first example is merely the URL of a website while the second is an actual link. This is because of the “a href” tag in the code.
Most tags will have open and close statements. In the example above, the <a href> tag is closed by </a>. Without this close, the browser will assume that every piece of text after the beginning tag is part of the link.
However, not all tags need to be closed off. For instance, <HR> merely creates a horizontal rule or line. Most HTML tags, though, will need the closing. Otherwise, the entire page can be affected.
Changing Your Text
Text is one of the easiest things to change in HTML. Colors, fonts and most format controls found in a word processor work in HTML. The first thing to learn is how to create headers. Knowing how to use these lines of text make the content look more appealing while scoring better in search engines. This is done by the following:
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
NOTE: The layout of your headings might be governed over by the style.css file. If this is the case, the tags above will look how they are set in that file.
Starting from <h1>, the text gets smaller with each one. For the most part, developers can go up to <h8>. However, these are usually too small to recognize and most HTML standards do not use them.
What about changing the font size? In the past, this could be done easily through HTML by using the <font size> tag. However, this has long been replaced by using CSS coding such as: <p style=”font-size: 12px;”>Setting the font size to 12 pixels.</p>
Another change to the system was that of using bold statements. In the past, <b> would set the text after it to bold. Nowadays, the coding for this is <strong>. In reality, both still work.
How to Create Links
Links are how people find content. Without them, the Internet would be full of basic text and search engines wouldn’t have content to show. Creating links is relatively simple, like in the example shown above.
What else can be done in a link, though? Actually, quite a bit. Here’s a few of the more common uses within a link:
- <a href=”http://www.yoursite.com” target=”_blank”> – opens the link in a new tab.
- <a href=”“mailto:youremail@yoursite.com”> – opens the default email system to send a message.
- <a href=”#chapter“> – sends the user to a spot on the page that has been identified as “chapter.” This is great for pages that are super long with a table of contents. This is used often in sites like Wikipedia.
The most important thing to remember is the entire URL address needs to be present in a link for it to work. For instance:
<a href=”google.com”>Google</a> – no.
<a href=”http://google.com”>Google</a> – yes!
Adding Images to Content
Adding images is a bit more tricky than the other examples above. In HTML, the coding is used to pull a graphic from its source and display it on the page. This is done by using the image and source commands: <img src=”image.jpg”>.
This example would look for the image.jpg file in the current directory. If the graphic is in another location from where the actual webpage is located, that trail will need to be added. Let’s say that there is another directory on the website labeled, “images.” The code will then look like: <img src=”/images/image.jpg”>.
Images can also be added from an external source. However, this needs to be done with care because it can upset other owners when using their graphics. Not only is it viewed poorly by the community, but it also creates bandwidth issues on those third-party sites. The code for this would be the exact URL of the image. For instance: <img src=”http://www.anotherwebsite.com/images/image.jpg”>.
Luckily, platforms like Drupal hosting make adding images quite easy simply by clicking on a button and adding the media. However, the above code may not be a bad idea to remember in case there is an image located elsewhere on the Internet.
Resizing Images to Fit
There are a number of things that can be done to images in code. Page positions, text wrapping and resizing is possible with the right tag.
A lot of people use the following code to make images appear a particular size on the website. This helps fit the image perfectly to the design. It’s easier to fit a 300 pixel wide graphic than it is for a 3000 pixel photo. In this case, the height and width need to be adjusted. For instance, <img height=”300″ width=”300″ src=”image.jpg”> would resize the image to be 300 pixels tall by 300 wide.
Keep in mind that using code to shrink the image does not shrink the file size. The website will still render the graphic as a whole, which means this could cause speed issues if the image is too large.
And So Much More..
Programming in HTML is only one method that can help customize the site when using Drupal hosting or other content management system. These platforms allow developers to input their own modifications to make the site unique. All it takes is a bit of time and knowledge to make some of the biggest changes on a page. It all starts with learning how to do the basics for HTML.