HTML Tutorial part 3
Tables are an essential part of HTML. Tables can be used to organize data or to create layouts in HTML.
Tables are very helpful to organize data. Here’s an example of an HTML table:
The code for the above table is:
<table border="1" width="100%">
This may be a bit confusing so let’s slow down. The basic tag to create a table is the <table> tag. We also used certain attributes such as setting the “width” to 100%. The border=”1″ attribute displays a border around our table. If you want to change the size of the border, just change the number in the border attribute.
There are two types of tags used inside the <table> tag: the <tr> tag and the <td> tag.
The <tr> creates a table row. The <td> tag creates a table column.
You cannot create a table column without first creating a table row. Table rows always come before table columns. Likewise, you cannot create <tr> tags without first creating the <table> tag. So let’s go over this order again:
<tr> and <td> tags must always be inside a table. With that said, let’s examine the <tr> and <td> tags from our example:
Notice how we created two rows. Every row must have at least one column; thus, we had to use at least one <td> tag for each row.
Now what if you want to create more columns? Simple, just create more <td> tags. Here’s an example:
<table border="1" width="100%">
<tr><td>Column 1</td><td>Column 2</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>
Once again, we still only have two rows. However, this time, we also have two columns.
The above code will produce:
|Column 1||Column 2|
|Column 1||Column 2|
Whenever you create a new column, every row in the table must have the same number of columns. For example, row #1 cannot have two rows while row #2 has three.
HTML forms allow user interaction and input. Forms can be used for contacting the website owner, adding a guestbook entry, and more. Forms require a web script written in languages such as Perl, PHP or ASP in order to be processed. If you have no intention to learn these languages in the future, you can skip this section if you wish. This was written for your future reference.
Forms can contain input fields such as text boxes, password fields, and more.
The basic code to setup a form is:
<form action="/path/to/script" method="post">
Form Data Goes Here
Make sure you define the path to your script that will handle the form in your form’s “action” attribute.
In order for our form to have anything to process, we must create fields for the user to provide input. Secondly, we must also create a “submit” button that sends our form’s data to the web script. (more…)
HTML Tutorial part 2
Images in HTML
Using HTML, we can display images in our web pages. However, before we can display images, we must first upload it to our web server or have the image uploaded somewhere on the web. You cannot display an image from your local computer until you upload it to the internet.
The syntax for an HTML image is:
The “src” attribute for the image tag defines the location of our image. Once again, make sure the image is uploaded to the web. As a rule of thumb, if the path to an image begins with “http://” then it is uploaded to the web.
We can also resize our image and enlarge or shrink it by using the “width” and “height” attributes. Here’s an example:
<image src="path/to/your/image" width="10" height="100">
The “width” and “height” properties can also be expressed as a percentage:
<image src="path/to/your/image" width="50%" height="50%">
Hyperlinks in HTML
Hyperlinks (or “links” for short) gives the user something to click that will automatically browse them to a different web page. It allows us to tie documents together and create navigation to help the user browse around our website. Links can point to both internal pages on your website or to an external page on another website.
The syntax for a link is:
<a href="/path/to/a/web/page">Link Text</a>
The “a” stands for “anchor.” The “href” attribute defines which web page or URL the user will be directed to. The “Link Text” in the above example enclosed in the <a> tags is the text for the link that your users will actually see. They will not see a URL, but when they click on the link text, they will be pointed to the URL stated in the “href” attribute.
If you want to make your link open in a new window, simply add the “target” attribute as shown below:
<a href="/path/to/a/web/page" target="newWindow">Link Text</a>
At times, we may want to “center” text or elements in our documents. We can do this using the <center> tag:
<center>This text is centered.</center>
This will output:
This text is centered.
It’s important to note the <center> tag can be used to center anything including images
In our First HTML Page Chapter, we discussed the body tag very briefly. However, what we did not tell you was that the body tag actually contains special attributes you can define to make your document more appealing.
Among these attributes include the “background” and “bgcolor” attributes. These attributes are used for your page background. The “background” attribute is to define your background image. If you do not wish to use an image but a solid color instead, you can use the “bgcolor” attribute to define the color or hex code of your background.
Here’s the “bgcolor” property in action:
The “#0000ff” hex code is for the color blue. Thus, the above code will create a solid blue background for our web page.
Body tag attributes can also be used to define text and link colors. For example, the “link” tag is used to set the colors of your links. By default, browsers usually set the link color to blue. The “vlink” attribute defines the color of a link the user has already visited. The “text” property sets the text color of the text in the document.
Here’s an example of all the above attributes in action:
<body link="#0000ff" vlink="#ff0000" text="#00ff00">
This code will set all default link colors to blue, the visited links to red, and the text of the page to green.
In HTML, there are two types of lists: ordered and unordered.
An ordered list numbers each list item numerically. The code for an ordered list is as follows:
The above code will produce:
- 1. Red
- 2. Blue
- 3. Green
The <ol> tag creates an “ordered list.” The <li> tag is used to create a list item.
To create an unordered list, we can use the following code:
The above code will produce a bulleted list.
The code for an un-ordered list is nearly the same as the order list’s syntax. However, you may notice we used the <ul> tag instead of the <ol> tag.
Introduction to HTML
HTML is an abbreviation for hypertext markup language, the fundamental language of the web. HTML is the predominant markup languages for web pages and allows webmasters to describe the layout and structure of a document using tools such as paragraphs, lists, and links.
The coding structure of HTML comes in the form of “tags,” which are enclosed in angle brackets.
URLs and filenames containing HTML usually have the file extension of .htm or .html.
HTML was first conceptualized in 1989 by Tim Berners-Lee and Robert Cailliau. Both hypoethesized and created proposals for an Internet-based hypertext system which would be similar to HTML. In 1990, the two would create the WorldWideWeb (W3) project.
It wasn’t until late 1991 that the first functional description of HTML was made publicly available. The document was known as HTML Tags. It contained 22 elements which would later serve as the basis for the HTML we know today. Thirteen of the original tags described in HTML Tags would be carried on to HTML 4.
HTML+ was formed in 1993, which standardized existent features such as tables.
By 1996, HTML was maintained and standardized by the World Wide Web Consortium (W3C). The W3C provides the coding standards we use in HTML today.
Your First HTML Page
It’s time to create our first web page in HTML!
First, we need to create the file. Usually you can just create a text document to start writing HTML. For example, we can just write HTML in Notepad. Once you’re done editing the HTML, you can rename the Notepad text file from a “.txt” file extension to “.htm” or “.html” so your computer or web server recognize it as an HTML document.
Here’s the basic code to create an HTML web document:
<title>Your Title Here</title>
Content Goes Here
This might be a little bit overwhelming at first so let’s break down the above code.
Every HTML tag needs to be opened and closed. For example, if we want to set our page title, we use <title>. Once we set our title, we close off the title tag with </title>.
Anything between opened and closed tags in HTML are the tag’s “content.” The “title” tag defines the title we see in the title bar of our browser. In the example above, the title we would see in our web browser’s title bar would be “Your Title Here” without the quotation marks.
Not all HTML tags need to be open and closed. However, we will cover these later.
We use the <html> tag to denote that we are beginning to use HTML in our document.
The <head> tag defines the “header” of the document. This usually includes any scripts or document definitions that are not actually part of the content of the document such as title tags.
The <body> tag is used to denote that we are finally beginning to structure the content of our web page.
Finally, we end by using the </html> tag to tell the browser we are finished laying out the HTML of our document.
Paragraphs and Line Breaks
Text formatting is an important part of building your web page. It’s necessary to create a presentable web page to your visitors through text formatting.
If you were to simply start writing content inside the <body> and </body> tags, it would not appear properly. If you were to type multiple paragraphs into the “body” tags and use the “enter” or the “return” key to create lines to separate the paragraphs, these line breaks would not appear in your web page.
To remedy this, we can use the “paragraph” tags. The paragraph tags are used as follows:
<p>Paragraph text goes here.</p>
The “paragraph” tags will create the spacing necessary for paragraphs.
Sometimes, the paragraph tags may provide too much spacing — more than we need. If you simply want to create a new line, we can use the “line break” tag:
First line of text.<br>
Second line of text.
It’s important to note that the <br> tag does not have a “closing” tag. The <br> tag is one of the tags in HTML that does not need an open or close tag and just stands by itself.
Now that we’ve discovered how to create new lines, we want to know how to format our text.
The basic formatting tags are <b> for bold, <i> for italics, and <u> for underlines.
The following code will show you how to use these basic formatting tags:
The above code will produce:
Make sure you open and close each tag!
The <font> Tag
If we want to be able to format our text further, we can use the <font> tag.
The font tag doesn’t simply just open and close. It also contains “attributes,” which allow us to define the size, color, and typeface of the font for the text enclosed inside the font tags.
<font face="Verdana" size="2" color="#0000ff">My text goes here.</font>
The above code will produce:
My text goes here.
Notice that each attribute begins with a name (face, size, and color in this case) followed by an “equals” sign and quotation marks. What’s contained inside the quotation marks is the “value” assigned to the attribute. Never forget to use quotation marks for HTML attributes. You will often find code not using quotation marks, but this is improper coding practice and can result in your document not displaying properly.
The “face” attribute for the <font> tag is the typeface.
The “size” attribute is the font size.
The “color” attribute is the font color. Notice we used a value, “#0000ff.” This is known as a hexadecimal code (or “hex code” for short). Hex codes are used to map out colors by using a code. It’s always a six digit number preceded by a pound (#) sign. #0000ff is the hex code for “blue.” If this is too complicated for you, most browsers will recognize the “blue” color even if you do not use the hex code. For example:
<font face="Verdana" size="2" color="blue">My text goes here.</font>
This code will produce exactly the same result as the previous code.
With “primary” colors such as red and blue, you can get away without using a hex code; however, it’s always best to use hex codes so your web pages display properly across multiple browsers.
In HTML, there are six “heading” tags used to split documents and articles into sections.
The six heading tags in order of largest to smallest are h1, h2, h3, h4, h5, and h6.
The code for these heading tags are:
The result would be:
Experiment these tags to create headlines for your content.
How to get more opt-ins to your list
If you are having a hard time getting opt-ins to your mailing list, or just feel like there is room to increase the percentage of visitors that sign up then you will want to read this. Learn some great tips on how to get more opt-ins to your mailing list.
The first thing that you want to look at is the placement of your opt-in form. Remember, if you want a lot of people signing up you need a lot of people to see it. One option is a pop-up, although these can be quite intrusive. If you decide to go without a popup you will still need to place it somewhere on the page where readers view.
It is widely known that people start in the top left of the web page, read across, and then skip down to the body. This makes an opt-in form being placed in the top left corner, or in the main body an ideal choice. In addition page exit pop-ups work well. If a visitor is already leaving your page why not try to snag them one last time?
The next thing that you need to do is sell your opt-in form. Don’t just tell them to sign up for some great spam mailings or site news, offer something great. Many people will write a quick 5 page ebook and offer it through a mailing. This way folks will sign up just to get the ebook and hardly any of them, even if they are not interested in future mailings, will request to be removed from your list. Provide something of value, for free, and your percentages of opt-ins will increase in no time.
One other strategy for getting more of your visitors to opt-in to your mailing list is to spice up the appearance. Use colors, make a nice border. Don’t just leave it plain, use graphics. It is also a good idea to incorporate your logo right into your opt-in form. The more you make it stand out the better chance you have of people noticing it, and thus signing up.
The final thing that you should take into consideration is pushing your opt-in form whenever possible. If you offer an ebook, as an example, include it at the end of your ebook. In PDF files you can throw lots of elements like this in.
Hopefully you can use at least a couple of these different methods to help increase the number of signups to your opt-in list.
Getting started blogging
What should a blog look like? Does it need to be an all-different, unique alien looking thing? Is it enough to make something that is a clone of the most popular blog? These are some simple, yet confusing thoughts that enter into someone’s mind while creating a blog. Many have the false notion that blogging is the easiest way to make money. They think that you type in a couple of paragraphs a day and make huge amount of money. However, it is not true. To be honest, a blog has to be well maintained for a couple of years before any significant earnings can be expected.
Always use the interaction method of writing while blogging. Make it simple and easy. Never take it as an opportunity to tell the world how great your word power is. Avoid using jargon and technical wordings. Try to be as simple as you can with the word selection. Never write something that you are not certain is correct. If there needs a recheck do it before posting the blog. Here are three golden rules for an excellent blog:
Primarily, write about things that you know very well. The write up should be having new piece of information plus your comment on the particular issue. You could easily make your blog a platform for serious discussion if you choose topics with discretion. The topics that you select have to be of contemporary value. You should encourage the visitors to post their comments, so that it will make the session livelier.
Secondly, never forget to update the blog. Do it on a regular basis. Instead of writing long, boring blogs, cut them into small segments and post it separately. This will increase the number of blog posts and more importantly enhance the blog traffic by a great deal. Another thing that you need to set in your mind is the frequency of your posts. Frequently posting is essential, you want your readers to have a reason to come back, no new posts equals no repeat visits.
Finally, a good title with a great use of keyword in the body text makes a perfect blog article. However, where can you find out these keywords? It is now possible to track down the hottest keywords as well. There are sites that provide a vast amount of keywords. There are many keyword-ranking tools in the internet.
Having read the whole thing, why should you shy away from making the perfect blog? Keep all of this in mind when starting your blog and you are sure to enjoy an increased amount of success.
Getting Started with SEO
According to the 2012 Digital Influence Index, Canadian consumers believe the Internet is more influential than their friends and family in helping to make purchase decisions. This same study found that when consumers head online to find information about brands and products, 93% use a search engine. Despite this growing trend, search engine optimization (the practice of improving and promoting your website in an effort to increase the number of search engine referred visitors) is still unfamiliar territory for many marketers – myself included!
Fortunately, this summer I have the opportunity to learn more about SEO and internet marketing. To start things off, I’ve gone through The Beginner’s Guide to SEO, created by SEOmoz. Without a background in SEO I wondered if the guide would be too technical to follow. However, since it was designed for beginners, it starts off with the absolute basics and explains potentially unfamiliar terms as you go along. This free resource is a great introduction to search engine optimization, and I’d definitely recommend giving it a read if you’re new to SEO or need a quick refresher.
Still not convinced? Below are some of my thoughts and key takeaways from the guide.
The SEO Beginner’s Guide provides you with a lot of new information all at once, but the casual tone and use of fun graphics throughout keeps it from feeling like a chore to get through. It’s filled with links to outside resources, studies, and tools that help to round out the guide, as well as some practical, hands-on activities you can try to further your learning.
One of the things I liked the most about the guide is exemplified by this quote:
“ Search Engine Optimization isn’t just about ‘engines.’ It’s about making your site better for people too. At SEOmoz we believe these principles go hand in hand. ”
These words are some of the first that you read, and this philosophy is repeated throughout the guide. There’s a great balance between technical and practical advice. Marketers should think of SEO as more than just getting consumers to visit your website, since the site needs to satisfy these consumers’ needs once they arrive – a high search ranking won’t stop consumers from leaving your site straight away if they can’t easily find what they want! (more…)