Pages

Showing posts with label HTML LEARNING THE FUN WAY. Show all posts
Showing posts with label HTML LEARNING THE FUN WAY. Show all posts

Sunday, August 30, 2009

<abbr> stands for Abbreviation tag it's similar to Acronym tag action it performs but the web bots and browsers read them for what they are

But as you should know by the name Abbreviation tag, It will tell the browser and all those programs or software or bots that reads or understands codes automatically will take abbreviation tag as it this tag has abbreviation of something in it.

And the second part is, When you move your mouse over the word the the line in the abbr tag with name title="..." will show up in a light yellow color rectangular box.

Hope code and output is simple. Remember you can copy the code directly from here and paste it in notepad as html file and view the output and code in browser.

 Code

<html>
<body>
<abbr title="Temple of Psychick Youth ">TOPY</abbr>
<br />
<acronym title="eLifeConnections">eLC</acronym>
</body>
</html>

Output

Temple of Psychick Youth
eLifeConnections


Useful links:
W3schools Abbreviation tag:
w3schools.com/html/tryit.asp?filename=tryhtml_abbr
w3schools.com/TAGS/tag_abbr.asp

umich.edu/~webacces/Abbr.html
closetnoc.org/?i=seo-abbreviation-tag
vbseo.com/tags/abbreviation%20tag

Friday, August 28, 2009

Benefit of using 'Alt' attribute inside Image tag.

'alt tag' is one of most useful tags because it allows disabled and blinds to listen to what is written behind images.

So the more you write in alt tag [alternative tag] you are providing a sort of service to the their community, and hey the good thing is Search Engine Bots and Browsers understand your image better when you use this tag that is it helps search engines to locate your image easily. Ain't it cool or what.

Try this:
Disable images and see what the picture below looks like, Instead of picture "the text written in alt tag will appear" - That's what I'm talking about Genius!

Go to options - Content - [uncheck; tick should not appear] Load images automatically (this will happen in Firefox) and Now you'll read instead of seeing the image because you've unchecked the images.

Code

<img src="http://i.imgur.com/ABB8j.jpg" alt="muwasalat - muwasalat.com - birdy" </img>

Output

muwasalat - muwasalat.com - birdy

<img> - How to use image tag?

<img> image tag can be closed either by a closing tag similar to opening tag like this </img>, this one should be put at end like
<img> ...</img>  or the end tag could also be '/>' like this <img />, in the second end tag described you don't have to use the letters 'img'.

When using image tag - <img> you provide source [the abbreviation 'src' in the code], height and width ( height and width if you want other wise, default settings will allow actual size of the image to be used.

See this image tag:
<img src="http://i450.photobucket.com/albums/qq229/blakewotton/photography.jpg" />

You can use 'alt' tag inside img tag which helps the Screen Readers - softwares that read texts on your computer screen (and maybe you yourself when you have images disabled to see text behind the images. Why will you display images, one reason is to speed up your webpage, second reason is when you are making a site you need to keep in mind that everyone will be visiting your site therefore the more user friendly the site is the more accessible to a large community).

'Width' and 'Height' shows pixels, mean to say when you write in image tag width="90" or something you mean 90 pixels. Pixels are smalls dots on your screen which your screen is made out.

Tip: The tip to note here is that, keep height and width equal if you are not sure what to do especially for small size images. For large images just take into consideration whether you are changing faces or buildings.

Need more info or want to try more: W3Schools.com will help - IDK:

http://www.w3schools.com/html/html_images.asp

Wednesday, August 26, 2009

<acronym> Tag in HTML , Has Easy but cool function

Acronym is a words made out of a Large words or simply acronym is an abbreviated word for an absurd/simple sentence, company or IDK. of something, use it for abbreviation of something you want in your code, in the example below - NASA's example is given.

Cool thing about this tag is, WHEN YOU HOVER OVER YOUR MOUSE ON THE WORD YOU ACRONYMED [the text/link you see - visible] the whole text is displayed on the word.

Format of <acronym> tag is </acronym> - you saw it <acronym> ... </acronym> - When you put the word title in it then it becomes more clear to your browser and other programs what this tag of text you wrote is all about. Browser can interpret and see it better then.

Like every tag you use in your code makes the code. Likewise, some tags are used that helps your browsers, spellcheckers and different type of programs to understand what kind of code you wrote.

Remember, it's a computer, it's codes you are writing you give the LANGUAGE to your Code/Computer and HTML here.

The Code you need to copy


<html>
<head><title>This ACRONYM understanding - Open your mind - NUFFF respect</title></head>
<body>

This is acronym of <acronym title="National Aeronautics and Space Administration">NASA</acronym><br/>and when you move your mouse over NASA[the previous dotted one] it shows a small skin color box telling you what you wrote in Title
<b>Acronym made a HyperLink here in the code below</b>
<br/><a href="http://science.nasa.gov/"<acronym title="National Aeronautics and Space Administration">NASA</acronym></a>

</body>
</html>


Output/Final Display would like this


This is acronym of NASA and when you move your mouse over NASA[the previous dotted one] it shows a small skin color box telling you what you wrote in Title
Acronym made a HyperLink here in the code below
NASA

For more information on whether it supports the new browsers then Yes, but for more information on using more attributes and stuff here you go:

w3schools.com/tags/tag_acronym.asp
quackit.com/html/tags/html_acronym_tag.cfm
hyperwrite.com/Articles/showarticle.aspx?id=35
html-tips.net/html-tags/acronym-tag.html
htmlquick.com/reference/tags/acronym.html
w3.org/TR/html401/struct/text.html
html-tips.net/html-tags/acronym-tag.html
Secret Sentence for the person writing only: AWTEATLWO

Tuesday, August 25, 2009

Previously Wrote a post about URL or URI Schemes approved by IANA - Now something for you to test and Learn - Just for fun

Hacker's Favorite Search Queries 2                                                                                                                            

WHAT IS IN HTML Uniform Resource Locators? - A fun experiment you can try

http://www.w3schools.com:80/html/lastpage.htm
scheme://host.domain:port/path/filename

Scheme is a Type of Internet service. There is a huge list of Schemes but most popular are http, ftp and the The Internet Assigned Numbers Authority (IANA) approved list you can see here.

Host is the domain host, Domain is the name of your domain - the domain you've bought or got free in case of blogs.

Port is  where you connect/enter to/in the server, site, web age etc.

Path is location on the server.

Filname is the name of your file you made. NameOfFile.TypeOfFile e.g.
Name.html
Name.txt
and if you've seen more than their you go. You know it.
List of Schemes can be found on w3.org and IANA website:
http://esw.w3.org/topic/UriSchemes
http://www.iana.org/assignments/uri-schemes.html

Ftp Format:
http://ftp.ics.uci.edu/pub/ietf/uri/draft-casey-url-ftp-00.txt

Now start testing in any way you want this
scheme://host.domain:port/path/filename 

You may end up finding pretty cool stuff.



See wschools.com topic URL for more info:
http://www.w3schools.com/html/html_url.asp


My point of view of providing information is to make you think and make you enjoy YOUR TESTING. NO matter how funny it may look.

Cards in HTML - Just copy the code and by now you should know where to post the code

Code

&#9824;&#9827;&#9829;&#9830;

Output/Display

♠♣♥♦

See some ASCII art:

http://www.chris.com/ascii/

For starters Once again:

If you still not know where to post the code:
Just copy this code in your NOTEPAD application:

Code

<html>
<body>

&#9824;&#9827;&#9829;&#9830;

</body>
</html>

SAVE AS CardsDisplayed.html

Open the page you've saved you've these symbols right at the upper right corner of the page. This is how html websites are made - they use English Code.

Output/Display

♠♣♥♦

Style Attribute in HTML is the lastest Addition of CSS to HTML

Style attribute(assign) is used with every tag you use to customize what you see the browser/html page you made.


[Code]

<html>

<body style="background-color:#AEDFFF">
<p style="font-family:Arial Black; color:black; font-size:20px">
<h6 style="text-align:center">This is style heading in size 6</h6>

</body>
</html>

[Output]

muwasalat.com, style tag output

____________________________________________________________________________
Note:
Please review the previous posts so that you know what <p>... </p> and other tags stands for. Style is an attribute or you can simply say that you are assinging/attaching certain characteristics to your body of html or paragrah in html.

It's simple. And it is meant to be simple.

Style has replaced a bunch of attributes and tags and now those tags should be avoided and instead HTML Style attribute should be used:

FMI - For More Info :
http://www.w3schools.com/html/html_styles.asp

Monday, August 24, 2009

How to Use Anchor/Link Tag <a.../a>

[Code]

<a name="YouLearnHtml" id="YouLearnHtml">Learn Html Text for FUN Text</a>
<br/>
<a href="#YouLearnHtml" id="YouLearnHtml">Click it and You'll go to You Learn Html Text for FUN Text</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a name="YouLearnHtml" id="YouLearnHtml" href="http://www.boingboing.net"></a>

[output]

Learn Html Text for FUN Text


Click it and You'll go to You Learn Html Text for FUN Text












How to make your Image a Link { HyperLink }

Code

<img border="0" height="38" src="http://www.uploadpad.com/files/muwasalats_logo_entrecard_125_125.jpg" width="65" />

Output



For linking your image to inside the page or website: Not much to do just put that html in your HTML directory where you are managing these files and the file you are linking in the subfolder:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink

5 DOTS FIVE POPULAR LINKS - WORKING WITH HTML

Output/Display will be like that - Dots

.|.|.|.|.

Code

<a href="http://digg.com/news/popular/24hours" linkindex="188">.</a>|<a href="http://reddit.com/" linkindex="189">.</a>|<a href="http://news.ycombinator.com/news" linkindex="190">.</a>|<a href="http://news.google.com/" linkindex="191">.</a>|<a href="http://www.deviantart.com/#order=11" linkindex="192">.</a>

________________________________
Dots are links of popular sites
1. http://digg.com/news/popular/24hours
2. http://reddit.com
3. http://news.ycombinator.com/news
4. http://news.google.com
5. http://www.deviantart.com/#order=11

HTML HyperLinks - Ok! it's for you to learn something more interesting

Code

<p>
<a href="http://ffffound.com/">
What is inside anchor "a" tag is hyperlinked meaning it is linked to something else in this case a website called fffound</a> outside the tag the same boring text.
</p>

Output

What is inside anchor "a" tag is hyperlinked meaning it is linked to something else in this case a website called fffound outside the tag the same boring text. 
________________________________________________
You create the output Here by clicking on the Link - Output or Result is that you are navigated away to that page in this case fffound.com - A picture site.
Note: A fun thing would be html links page and open it whenever you want to visit your favorite links.

Now is the time to get to real HTML - which is yet again simple but more fun

So, a simple tip.

HTML tags will now have a word or two added to them to set what we want to do in a particular tag/field or with a particular word.

Modern/New Programming Languages are just simple English and most of the keywords/tag words do what they say they do.

HTML Tag list on W3schools.com link

w3schools.com/tags/default.asp

This Quick List on w3schools.com greatly helps you in understanding HTML and what it can do - ALL THIS QUICKLY

w3schools.com/html/html_quick.asp

Once again how to make an HTML page - The First Jump

Go to Notepad >> Copy and paste the code below

<html>
<head>
<title>You The blue title of the window here I am.</title>
</head>
<body>
What you write Comes Here.
</body>
</html>

and save the file as copy the name also:  AnyName.html 


After saving see where the file you have saved, it will turn into a Internet Explorer Or FireFox Icon or whatever browser you use. It will turn into your browser icon open it and this is the simplest form of html you can make.


Other than go to any website and press Ctrl+U [keyboard keys control plus letter U] and you'll see the code. 


The above code is your first step so don't get bothered by the code you see.

[HTML TAGS CODE AND OUTPUT ][<pre> </pre>-<code...></code>-<kbd...> </kbd>-<tt...></tt>-<samp...></samp>-<var...></var>-<address> ...</address>- <del>...</del>- <ins>...</ins> <blockquote>...</blockquote> <q> ...</q>]

this Code below...



<pre>
preformatted t e x t
     : ]  will display text the way Y o U write.
3
  3
    3
</pre>

<br />
<code>Computer code is like computer text </code>
<br />
<kbd>Keyboard input text type </kbd>
<br />
<tt>Teletype text type</tt>
<br />
<samp>Sample text type</samp>
<br />
<var>Computer variable text type</var>
<br />


<address>
Stewart Muse <br />
P.O. BOX 4390 <br />
NeverLand<br />
World - Address tag just italizes text and helps serach engines to identify the tag easily - thus finds address easily
</address>
<del>Delete tag puts a Line on the text</del>
<ins>Insert tags puts a line under the text or word</ins>


<blockquote>
Blogquote is used for Long quotation
</blockquote>

<q> q Tag is used for short quotation, it puts an inverted quotes</q>
</q>



... produces this Output


preformatted t e x t
     : ]  will display text the way Y o U write.
3
  3
    3




Computer code is like computer text


Keyboard input text type


Teletype text type


Sample text type


Computer variable text type





Stewart Muse

P.O. BOX 4390

NeverLand

World - Address tag just italizes text and helps serach engines to identify the tag easily - thus finds address easily

Delete tag puts a Line on the text
Insert tags puts a line under the text or word



Blogquote is used for Long quotation


q Tag is used for short quotation, it puts an inverted quotes

Saturday, August 22, 2009

TAGS USED FOR FORMATTING TEXT [ <b>...</b> <strong>...</strong> <big>...</big> <em>...</em> <i>...</i> <small>...</small> <sub> ...</sub> <sup>...</sup> ]

this CODE will produce...


<br /><strong>STRONG TAG</strong>
<br /><b>BOLD TAG</b>
<br /><big>BIG TAG</big>
<br /><em>EMPHASIZED TAG</em>
<br /><i>ITALIC TAG USED</i>
<br /><small>SMALL TAG USED</small>
<br /><sub> SUBSCRIPT TAG</sub>
<br /><sup>SUPERSCRIPT TAG USED</sup>

...this OUTPUT




STRONG TAG

BOLD TAG

BIG TAG

EMPHASIZED TAG

ITALIC TAG USED

SMALL TAG USED

SUBSCRIPT TAG

SUPERSCRIPT TAG USED

Edit html code and see output online:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_formattingch

What an <hr /> do? [hint: PUTS A HORIZONTAL LINE on the screen]| WHAT DOES HR TAG DOES?

Output for you to see



This is horizontal tag, It will


This is horizontal tag, again this time written below the tag to show you that because no other tags e.g.
used it doesn't break the line or give space in the tag



Now you can see space between the tag lines
Code for you to copy of the above output

<hr /> This is horizontal tag, It will
<hr />
This is horizontal tag, again this time written below the tag to show you that because no other tags e.g. <br /> used it doesn't break the line or give space in the tag
<hr /> <br />
Now you can see space between the tag lines

Note: Syntax is not <hr /> a space between hr and then back slash. It's just for understanding that you don't need a closing tag. You can avoid it. But it will help you better see your code when you reading your code or amending your code.

We'll or I'll be making some presentable THING from the HTML tags learnt so far

Blank