famous celebrities: tutorials

Showing posts with label tutorials. Show all posts

Monday, December 19, 2011

Basic HTML Tutorial: Links or Anchors

For our continuing tutorial on basic html, we will now be discussing about links (linking), or anchors. It is commonly known as hyperlinks.

But first things first, what is an anchor or hyperlink?

A hyperlink is a link wrapped in a word, a group of words, a character, or an image that you can click on; linking you to a new document, a file, an email address, or a section within the current document. By the way, web pages can also be referred to as a document so don't confuse it for an MS Word Document.

A hyperlink when linked into a file will usually open the download file option. If it is linked into an email address, for example: abc@abc.com, it will open up an email service program or client, however, you need to assign the extra mailto: attribute for this to work. Now, if it links to a new page or document, it will open up the page, and depending on the type of hyperlink, it may open up a new window or you will jump into a new page. Finally, if the hyperlink is linked within a page, it can either reload the page, or jump you into the section of the page where the hyperlink connects.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand, however, this can be customized using a javascript, but as far as defaults are concerned - it appears as little hand. Furthermore, links by default are also underlined and glows in a different color; if the page has already been visited, it glows in another color. These colors can also be customized using a stylesheet.

The tag or element use to create an anchor or hyperlink is <a> or <A>.

The <a> tag can be used in two ways:

To create a link to another document by using the href attribute.
To create a bookmark inside a document by using the name attribute.

Now, let's discuss the basics of <a>.

An anchor cannot work without the help of an attribute. Of course, we need to define where the link leads to, that is why we need to use the attribute href, short for hypertext reference. To use this attribute, we add it to <a>, the result is <a href="yourlink">, where yourlink refers to a url (uniform resource locator), a page, a file, or an email. Also note that urls always begin with an http://, however, most browsers usually do not require it as it automatically puts the http:// in case it is forgotten. Let's put it into the test...

Let's try the url first... Syntax: <a href="http://www.yourlink.com">yourtext</a>

<html>

<head>

<title>Hyperlinks</title>

</head>

<body>

<a href="http://www.google.com">Google</a>

space

<a href="mailto:abc@abc.com">An email abc@abc.com</a>

space

<a href="sample.doc">Sample File</a>

</body>

</html>

Here's the resulting page:

The first link points to the url http://www.google.com, when clicked, it will direct you to Google's page at http://www.google.com. Try it...

Now, for the second link, we inserted an email address. As previously said, it cannot work without the extra mailto: attribute. Without this special attribute, the browser will treat the email address as a url, thus, it will lead to an error page or "Page not found". The purpose of the mailto: attribute is to tell the browser that this is an email address, and because it is an email address, the browser will call for an email client - Outlook Express if you're using Windows OS (Operating System).

Let's try the link...
Syntax: <a href="mailto:youremail@emailserviceprovider.com">yourtext</a>

<html>

<head>

<title>Hyperlinks</title>

</head>

<body>

<a href="http://www.google.com">Google</a>

space

<a href="mailto:abc@abc.com">An email abc@abc.com</a>

space

<a href="sample.doc">Sample File</a>

</body>

</html>

The result:

As you can see, it opened an email client with the email address already in place as the recipient.

Finally, what if it links to a file? You may ask... Naturally, any document that cannot be opened on the browser is subject for download. This depends on the extension name (ex: .doc, .exe, .htm, etc.). Web pages usually have the .htm, .html, .php, .asp, etc. These can, of course, be opened by the browsers as browsers were naturally designed to handle these document types, however, there are some documents that are not supported, and these will become subjects for download.

Let's test the 3rd link since it links to a file.
Syntax: <a href="filename.extensionname">yourtext</a>

<html>

<head>

<title>Hyperlinks</title>

</head>

<body>

<a href="http://www.google.com">Google</a>

space

<a href="mailto:abc@abc.com">An email abc@abc.com</a>

space

<a href="sample.doc">Sample File</a>

</body>

</html>

This will come out:

Now, you have the option to either open, save the file, or cancel. If you choose "open", it will find a program on your computer that can open it; if you choose the option "save", it will save the file on a destination on your computer; and of course, "cancel" would cancel the download.

Now, you may ask, what would happen if the file does not exist? Well, naturally, the browser will tell you that it's not there.

Well, this is it for now, next time, we will continue our tutorial from where I left off... as you can, we haven't yet discussed how to bookmark, until then...

Saturday, December 10, 2011

HTML Tutorial: Paragraph Attributes

Last time, I posted a lesson on or for paragraph under Basic HTML Tutorial: Paragraphs and Texts, this time, we will go deeper into the attributes of . Please read the previous tutorials by searching the site, it's filed under (tutorials). This way, you will be able to go along with us.

The tag defines a paragraph (as discuss on last topic). The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet. However, we will be discussing about stylesheet later on, in the meantime, let's just focus on the attributes that does not rely on a stylesheet.

According to W3C, the tag is supported in all major browsers including IE (Microsoft Internet Explorer), Mozilla Firefox, Opera, Google Chrome, and Apple Safari.

The Attributes

An attribute is a format or function you can apply on an element. In this case, on the element or tag. It is written after the p for instance .

Align

On our last discussion about , I have only taught how to display a text or paragraph using the default align format. The alignment by default is left or left aligned. However, using the align attribute, you can change the alignment of the text. You can designate the values: left, right, center, and justify. According to W3C, the align attribute is allowed in HTML 4.01/XHTML 1.0 DTD type webpages under Transitional and Frameset, however, is not accepted under Strict compliance, possibly because, it causes issues on some browsers.

Values:

left - the texts or paragraph aligns to the left of the page. If the words do not fit in a row, it is automatically move below, causing a break at the right column.
right - the texts or paragraph aligns to the right of the page. If the words do not fit in a row, it is atumatically move below, causing a break at the left column.
center - the texts or paragraph aligns at the center. The texts floats on the middle of the row.
justify - the texts or paragraph automatically adjust its spacing so that the paragraph is evenly fitted in every row.

Syntax:

 where x stands for the values. See the values above.

Example:

<html>
<head>
<title>Text Alignment</title></head>
<body>
The texts here are left aligned.
The texts here are right aligned.
The texts here are centered.
The texts here are justified. Observe that the words are being distributed evenly to fit the row. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample. This is a sample.
</body>
</html>

The output:

Click to enlarge

Class

Class stands for any classname matching on the stylesheet. It calls its format from a stylesheet. Class is a standard attribute for , meaning, all browsers support it. We will discuss more on this later on.

Syntax:

 where x is a corresponding name found in the stylesheet. It could be any name (user-specific).

Direction

The attribute use is dir. It specifies the direction of the text. ie. from left to right or right to left. It is a standard attribute and resembles the left or right align attributes.

Values:

rtl - (right to left) text is right aligned and moves toward the left. Similar to align="right".
ltr - (left to right) text is left aligned and moves toward the right. Similar to align="left".

Syntax:

 where x can be "rtl" or "ltr". See values above.

ID

ID is similar to class in that it also looks for a corresponding id name in the stylesheet. It specifies a unique id for an element. This is also a standard attribute, meaning, it is recognized by all browsers.

Syntax:

 where x is any user-specified name in the stylesheet, which usually begin in a #.

Language

Specifies a language code for the content in an element. This has no effect on the graphical side other than to assist search engines and browsers in use. There are numerous language you can use on this attribute but to name a few, see values below:

Values:

en - English
tl - Tagalog
sd - Sindhi
la - Latin
ja - Japanese
zh - Chinese

We will provide a list for this one, later on...

Syntax:

 where x is an abbreviation of a language code. W3C has a list for them.

Style

Specifies an inline style for an element. The style attributes used in this attribute is similar to the ones used in the sylesheet or CSS (Cascading Stylesheet). However, instead of calling a format from a stylesheet, you can directly set the property within the p element itself; even without requiring a stylesheet. There are numerous stylesheet properties you can use to directly give the text a style. A few example of the values are shown below:

Values:

color: - to specify the font's color. It must be terminated by a ; [ie. red, blue, #000000, rgb(255,255,255)]
font-size: - to specify the font's size. It must be terminated by a ; [ie. small, medium, large, x-large, xx-large, smaller]
font-weight: - determines how thin or thick characters in text should be displayed. It must be terminated by a ; [ie. bold, normal, bolder, lighter, 100, 500, 700]

We will go deeper into this once we study CSS.

Syntax:

 where x is a value of a Stylesheet property.

Example:

Output:

or we can also combine a set of stylesheet properties to give the text additional styles. For example:

Output:

Title

This specifies extra information about an element. When you move the mouse pointer over a text, the title specified on the text will display.

Syntax:

 where x can be any word or sentence, or paragraph (user-specific).

Example:

<html>
<head>
<title>Text</title></head>
<body>
Dragon
</body>
</html>

Output:

XML Language

Specifies a language code for the content in an element, in XHTML documents. This is similar to Language attribute only that this one is use in an XHTML document or page.

Syntax:

 where x may contain a language code.

Event Attributes

These attributes requires a javacript command in order to work. Since javascipt is out of our topic, I am simply going to give all the event attributes that can be use with the p element. Note that these attributes requires advance javascript understanding, it provides special features or effects not normally provided in HTML.

onclick - Script to be run on a mouse click.
ondbclick - Script to be run on a mouse double-click.
onmousedown - Script to be run when mouse button is pressed and hold down.
onmousemove - Script to be run when mouse pointer moves.
onmouseout - Script to be run when mouse pointer moves out of an element.
onmouseover - Script to be run when mouse pointer moves over an element.
onmouseup - Script to be run when mouse button is released.
onkeydown - Script to be run when a key is pressed and hold down.
onkeypress - Script to be run when a key is pressed and released.
onkeyup - Script to be run when a key is released.

Example:

 where x is a javascript command.

That's all for today. Now, go and practice.

For an exercise, how about creating this page.

Goodluck!

Monday, December 5, 2011

Basic HTML Tutorial: Paragraphs and Texts

Welcome to the third session of our Basic HTML Tutorial. The last two Tutorials I've discussed are below:

Basic HTML Tutorial
Basic HTML Tutroial: Background Colors

The first is an introductions to HTML, while the second is about setting background colors on pages.

This time, we go into paragraph or texts. These are, of course, the texts that you read on a web page. Here, I'm going to teach you how to display texts inside a page. Let's begin...

Note: If you don't know how to create a web page, read the first lesson first (Basic HTML Tutorial).

The element used by HTML to display a text is or , where "p" is for paragraph. Every browser usually does not need in a web page to display a text; any texts entered within the <body>, except for elements, is automatically treated as paragraph. For example:

<html>
<head><title>Sample Page</title></head>
<body>
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
!@#$%^&*()-_=+/\|]}[{`~·♠
</body>
</html>

The output will be:

Click to enlarge

You see, it displays the texts as is. But note that the wildcard ♠ was displayed as ?, this is because this wild card was not recognized by the browser, in this case, I use Mozilla Firefox v.8.0.1 (latest version). However, if the browser supports the character, it will be displayed properly.

Now assuming we use the element.

<html>
<head><title>Sample Page</title></head>
<body>
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
!@#$%^&*()-_=+/\|]}[{`~·♠
</body>
</html>

The result:

Click to enlarge

Well, it's still the same. In other words, by default, browsers treat texts inside the body as contents of . The only problem with this is that you cannot align or break the texts into sentences. For example:

<html>
<head><title>Sample Page</title></head>
<body>
My name is Gabriel.
I am 3 yrs. old.
I live in Molo, Iloilo City
</body>
</html>

The result:

As you can see, even though I have broken the paragraph into separate sentences by vertically spacing them, the browser still treats it as one paragraph.

To remedy the problem, we have to use the element.

<html>
<head><title>Sample Page</title></head>
<body>
My name is Gabriel.
I am 3 yrs. old.
I live in Molo, Iloilo City
</body>
</html>

Which will once again bring us into the output...

However, this time, note the difference... the paragraph has now been separated into double-spaced sentences. In some browsers, this may come out as single-spaced sentences.

Finally, you guys should know that by default, the texts (either or neither using the element), will come out as black in color, with a varying size depending on the browser but is usually normal in size, and left aligned. In some browsers, it is also impossible to create single-spaced sentences without using a stylesheet or an attribute.

Well, that's all for now... next time, I am going to explain the attributes, which would give you more paragraph styles, and likewise, more control of your paragraph. Until then...

Sunday, November 20, 2011

Basic HTML Tutorial: Background Colors

Welcome to the second installment of the Basic HTML tutorial guys and gals. Last time, I discussed some of the basics of HTML (see here), this time, I am going to continue the lesson from where I left off. Today's post will be covering background colors. Every website has one, usually, the default is white (if background color is not set), but if you want to assign new background colors to your site, then read on...

Background color can be assigned in the body of the page. It can also be inserted in div or divider elements, in texts, and in tables. But in this tutorial, since this is the basics, I am only going to cover the background color of the page.

Note that background color is an attribute rather than an element. An attribute is what gives an element its properties. We will go deeper into that on the advance lessons later on, but for now, let's know what is the attribute to use...

The attribute to use is bgcolor, it is displayed as bgcolor="x", where x=any color. Depending on a browser, it may be able to read high level languages such as "white", "blue", "red", "yellow", etc. However, I recommend using the hexadecimal color attribute which is triggered by a sharp (#); since this is the standard.

The hexadecimal color calling comes in 6 digits and starts with an # for example, #000000.

Now the digits are grouped by twos. ie. 00 00 00, each group corresponds to a color. See the diagram below:

The first two corresponds to red. The next two digits following the first group corresponds to the color green while the last two to blue. Also note that the values are in hexadecimal so it can range from 0-9 then a-f, where "0" is the lowest value and "f" is the highest. Hexadecimals by count appears like this when in order 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0a, 0b, 0c, 0d, 0e, 0f, 10...

Now, let's have a demonstration... assuming we want a page to have a red background...

to do this:

Here's the explanation, the body by default has a background color of white, however, using the bgcolor attribute, we can choose a different background color for the page, and since we pick #ff 00 00, we get a red page.

This is how it'll look like when opened in any browser.

Now, what if we pick #00 ff 00?

Well, it should come out like this:

Since we render red and blue to 0, both colors are no longer active, and by increasing the value of the digits corresponding to green to the highest, we end up with a bright green color.

Of course, aside from the 3 colors, you can make out other colors by combining the three. You can get purple, yellow, brown, etc. if you know how to mix them properly. In which case, you should refer to the color wheel.

Finally, aside from the hexadecimal value, you can also use the rgb value. It is written as bgcolor="rgb (0,0,0)", where the first digit corresponds to red, the second to green, and the third to blue, however, instead of displaying it in hexadecimal, we use whole numbers 0-255, where 0 is the lowest, and 255 is the highest value. 255 also corresponds to ff.

For example:

The result:

It's yellow, because combining red and green yields yellow.

So that completes our tutorial, do some experimenting with the colors. Until next time...

Related

Basic HTML Tutorial

Wednesday, November 16, 2011

A way to fix your Facebook account after getting hacked

I'm posting this in response to the recent Facebook hacker attack (read here), in which a compromised Facebook user account was used to spread spam containing porn and other ugly images via newsfeed.

Here I am going to explain how your accounts got compromised, and used to spread spam. By understanding how you got controlled will help you avoid such attacks.

Facebook as you know was founded by Mark Zuckerberg and his team of brilliant computer scientists. Hacking the site directly will need some really brilliant hackers as well, probably more intelligent than Zuckerberg's team. Facebook's programming architecture is concealed and cannot be easily exploited. The hackers will have a hard time looking for holes in its programming structure, and it's not easy, thus, a direct approach would seem impossible. However, there is one vulnerability - Facebook Apps via Facebook Developers service. You may wonder, how can this be used? Facebook Developers is a module that enables third party developers to attach their code or programs, this is how third party developers manage to create apps or applications, which could range from games to cool profile add-ons. However, Facebook apps cannot be directly installed on an account, unless it is permitted. But once it is granted certain permissions (ie. access your profile information, post on your wall, post on friend's wall, etc.) then you can be taken over to some limited extent. This is one of the ways how the porn spammers manage to get through.

Other methods include message and post spamming containing links to malicious sites. Once in that site, an unprotected computer could get infected with a computer virus (usually polymorphic in nature). These type of viruses are what we call trojans. Some of these trojans can serve as spywares or keyloggers, and they could actually steal your username and password thereby directly compromising your account. Another method is called phishing. This method tricks a user into logging into a duplicate Facebook site which sole purpose is to fish your username and password.

How to fix and protect your Facebook account?

First and foremost, do not forget to log out from your account most especially when you are using other people's computers. This is a golden rule. Failing to do this can get your account taken over by a total stranger.

Now as for how to protect your FB account and fix it if it got hacked.

Hijacked Account

A hijacked account is an account taken over by another user. Some hijackers change your password and prevents you from logging into your account. When that happens, you can still request Facebook to reset your password by clicking on Forgot your password link.

Facebook will send you an email containing a link that allows you to change the current account password into your new desired password. This is, of course, providing the hacker hasn't change your email address. If so, then you may need to contact Facebook support.

Your account sends pornographic images or unwanted posts

Such is the case of the recent Facebook attack. To solve this problem, let's begin with prevention since it's actually better than cure. To prevent this, do not click on links you can't trust, and do not install weird apps.

Change your Facebook Password

In case you already got compromised, the first thing to do is to change your Facebook password. Make sure not to use redundant passwords and passwords that are easily guessed.

To change your Facebook password:

Find your account settings
Edit your password

Remove unwanted Facebook apps

As previously explained, apps once granted permission to post on your wall or friend's wall will be able to do so without asking you any further. If you think this app has been giving you problems, remove it or block it.

To remove an app:

Click at the top right of any Facebook page and choose Account Settings.
From the menu in the left column, select App Settings or Apps.
Click the app you'd like to remove, then click the Remove app link. Once you confirm you’d like to remove the app, it will no longer have access to your data. It will be removed from your profile (timeline), bookmarks, and your Apps and Games home page dashboards.

Seek for an antivirus and scan your PC

OK, so now you've done all the part on Facebook, and yet, they keep coming back to take over your account? If this is the case, then I highly suspect that you got some nice malware on your computer, be it a keylogger, a trojan, or some type of virus. In this case, what you need is an antivirus. There are plenty of good antivirus out there, ie. Microsoft Essentials, Nod32, Kaspersky, Norton, Avast, Avira, etc. However, I do not recommend you to install it when your PC had already been compromised as some viruses are smart enough to infect the antivirus itself. I recommend it be ran outside of the shell. To do this, antivirus emergency disks might work. Make sure that your PC is thoroughly cleaned, in which case you may need an expert for this job.

Thursday, November 10, 2011

Basic HTML Tutorial

OK, I'm going to make this quick and easy... but before anything else, let's define what is HTML? It would be ironic if you manage to learn it and yet doesn't even know what it is...

HTML or HyperText Markup Language is the predominant markup language for web pages. HTML is written in the form of HTML elements consisting of tags.

Every web browser is capable of reading HTML, once it is received by the web browser, it is then read and translated into a form visible or audible to the user. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

With that said, learning HTML would then enable you to create web pages. Now what is a web page? An example of it is the one you are reading right now, this is a web page.

Note that there are many programs and platforms that enables you to create web pages, there's Adobe Dreamweaver, MS Front Page, MS Word, etc. Yes, even MS Word can create pages although this one is not recommended as it does not seem to follow W3C's standard.

Now, what is W3C? W3C stands for World Wide Web Consortium, it is an international community that develops open standards to ensure long-term growth of the web. As you can see, there are lot of web browsers that are currently being used. There's Windows Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari, etc. and each of these web browsers interpret HTML differently, and if your markup language doesn't follow standard writing, it may appear good on one web browser, but won't appear correctly on another. Thus, W3C maintains a standard that should be follow so to enable your language to work correctly on all browsers. As previously said, there are many programs and platforms that could generate a hypertext markup language for you automatically, but as for us... let's use the Notepad or Wordpad. You can find these programs under Accessories if you are using Windows OS. Anyway, just use any program that could save text as HTML.

Let's begin...

The HTML opens with the tag HTML Note that the tag should always be enclose within the < and > container. See below:

<HTML> or it can also appear in small letters <html>

Also note that when you open a tag, it also needs to be close. The closing tag begins with a slash. For example for <HTML>, the closing tag should be </HTML> or </html>. However, the closing tag for HTML should need to be always found at the very end of the page as other HTML tags should need to be contained within the HTML element.

HTML should always be the first and the last tag to appear. It marks the beginning and the termination of the HTML code.

The other tag to follow HTML is the <head>. The head has several elements contained therein. And since this is the basics, let's get acquainted with the <title>.

The <title> is the title of the page. The word or texts contained in between the open and closing title tag will appear as the title of the page. For example, <title>Phantom Maelstrom</title>, this will create a web page with the title Phantom Maelstrom.

After closing the title tag, proceed by closing the head tag with a </head>. The codes should appear like this:

<html>
<head>
<title>Phantom Maelstrom</title>
</head>

</html>

The result of this code would be...

You see? Now the page has a Phantom Maelstrom title when opened on a browser.

Now let's proceed to the body or the <body> tag.

The body tag contains the body of a page. This displays the contents. The body tag follows the closing head tag and ends before the closing html tag. It has many elements to employ, but let's start with the simplest of them all. The paragraph tag or tag.

The tag is contained within the body tags. The tag is use to display texts or a paragraph if it's comprising of sentences. The texts should be contained within the open p and closing p tag. For example, I want to display a text with the message "Hello World".

The code looks like...

<html>
<head>
<title>Phantom Maelstrom</title>
</head>
<body>
Hello World
</body>
</html>

It would come out as...

So there you have it... The basics! Now go ahead and try it. Write these codes in a Notepad then save it as htm or html. For example phantommaelstrom.htm or phantommaelstrom.html, where phantommaelstrom is the file name, and htm and html is the extension name. This will tell your computer that these files should be opened in a web browser ie. Internet Explorer, Firefox, etc.

If you have questions, feel free to drop me a comment... next tutorial would be about how to color the background of the page. Stay tuned...

Related

Basic HTML Tutorial: Background Colors