University of Hackers: HTML

Showing posts with label HTML. Show all posts

30/09/2014

HTML Strikethrough text

The strikethrough text can be produced using the <del> tag.
Input

Output
This text is ~~cut~~by a line !
Striketrough- Applications
This tag has not got very many applications, but we will try to exemplify its use by the following example:
Input

A wedding list
<ol>
<li>An Apple</li>
<li><del>Chess</del></li>
<li><del>Love</del></li>
</ol>

Output
A wedding list

An Apple
~~Chess~~
~~Love~~

We hope these info has been precious to you!

HTML Subscript

For a subscript i will use the <sub> tag, let's begin:
Input

<p>This is a <sub>subscript text </sub>

Output
This is a _{subscript text}
Subscript Practical applications
The subscript tag, same as the superscript tag can be used at writing the mathematical expressions. Still, the place where we most find it are the chemical formulas.
Input

<p>H<sub>2</sub> 0 : Water
<p>O<sub>2</sub> : Oxygen
<p>CO<sub>2</sub> : Carbon dioxide
<p>H<sub></sub>SO<sub>4</sub> : Sulfuric acid

Output
H₂0 : Water
O₂ : Oxygen
CO₂ : Carbon dioxide
H₂SO₄ : Sulfuric acid
As you can see in the example presented above its use is very practical.

HTML Superscript

To produce a superscript text use the <sup> tag
.

<p>This text is <sup>exponential!</sup</p>

Preview
This text is^exponential!
HTML Exponents
We can use the <sup> tag to write mathematical expressions, as you can see:

3<sup>2</sup> = 9
14<sup>x</sup>

Preview
3² = 9 14^x
HTML Footer notes
The superscript can be also used for references, explanations, and any other additional information in the foot note.

<p>The woman <sup>1</sup> has lovely eye.</p>
<hr />
<p>1. No explication for this element.</p>

Preview

The woman ¹ has lovely eye.

1. No explication for this element.
You can play with this element, which is very rarely used but it is very useful.

HTML pre (Preformatting) tag

When we write a HTML code in notepad. we will use spaces, will press enters so we can orientate easier in searching of the mentioned part. A browser will interpret the code as a single line though, ignoring the spaces and enters mentioned above. For that we have the <pre> tag which makes the browser viewing be the same with the notepad one.
Input

<pre>Your privacy is important to us. Your contact information is used only to respond to your feedback.</pre>

Output

Your privacy is important to us. Your contact information is used only to respond to your feedback.

HTML Code format

The <code> tag allows you to format the text to make it be of computer. This offers a certain size and a certain distance specific to the computer code.
Input

<code>This text was formatted with the tag code</code>

Output
This text was formatted with the tag
This tag is used to write certain scripts such as these in this tutorial.
HTML Code Links

<p>This is an example of a link to >a href=" http://www.google.com"> <code> Google</code> </a> formatted with code tag </p>

Output
This is an example of a link to Google formatted with code tag

HTML Italic Text

This is the same as the bold tag, is used to highlight certain terms or words, sometimes even an entire sentence. It is not indicated to abuse its use though. To create this type of text we can use the followings:

<i>Italic</i> Tag!
<em>Emphasized</em> Tag!
<blockquote>Blockquote</blockquote> Tag!
<address>Address</address> Tag!

Preview
Italic Tag!
Emphasized Tag!

Blockquote

Tag!

Address

Tag!
Usually, the browser will interpret these tags the same.

HTML Bold Text

To get the bold text use the <b> tag.

Preview
This text is bold
Generally, the bold text is used to emphasize certain words or certain terms in within a sentence, letter or a word

HTML Hidden Fields

Hidden fields will not be shown by the browser. Those are necessary when when we have to deal with forms and databases in MySQL or SQL, but it does not limit to that. We will use the hidden fields to send additional information to the database, compared to the information sent by the user.

This fragment of a code will not show anything because the browser treats it as information that must not be shown.
HTML Other attributes
We will use the attributes name or id to establish a name for our hidden field.

We exemplified above three models of hidden fields that could be of use especially if you have a web page where the user will have to login in order to have access to certain information. The 'admin' field is used to verify someone's rank, 1 being administrator, and 0 non administrator.
Hidden fields are used when we have to deal with information that we want to put down in more than one form, not willing for the user to have to insert the information many times.

HTML Drop down lists and selection forms

The drop down lists are one of the most practical types of lists. You probably already came across them all over the internet, but without knowing they had a name so fancy.
Input
<select>
<option>Pakistan
</option> <option>Dubai
</option>
<option>Arab
</option>
</select>
Output

The browser will automatically show the first option. This thing can be changed with the help of the selected attribute though <select>
Input
<select>
<option>Arab
</option>
<optionselected="yes">Dubai</option>
<option>Pakistan</option>
</select>
Output

HTML Selection forms
We will use the size attribute to change a drop down list to a selection form
Input
<selectsize="3">
<option>Arab
</option>
<option>Dubai</option>
<option>Pakistan</option>
</select>
Output

HTML Multiple selections
In the case in which the user wants to choose more than one of the resented, we will make it easier with the help of the multiple attribute.
Input
<selectmultiple="yes"size="3">
<option>Arab
</option>
<option>Dubai</option>
<option>Pakistan</option>
</select>
Output

It is to be understood that this attribute will not work with a drop down list.

HTML Upload form

The upload is a very practical form to allow the users to put photos, films or any other kind of files on the server. To create an upload form we will only have to establish the file value to the <input type=" "> tag.
Input
<input type="file" />
Output

Upload Max file size
To limit the size of some of the files uploaded on the webhosting server we will use a hidden field.
Input
<input type="hidden" name="MAX_FILE_SIZE" value="400" />
<input type="file" />
Output

The value chosen in the example above was 400. That means that files over 400 kb will not be allowed for upload. A value of 100 would mean 100kb, one of 1000 would mean 1000kb= 1MB and so on.

HTML Text areas

Text areas of this kind are used for comments, blogs, memos or any other purpose that requires an expression space.
<textarea>Welcome to University of Hackers!</textarea>
Output

Text areas and size
To change the standard size of a text area use columns & lines, with their HTML usage, cols & rows. Those will have numerical values. The bigger their value will be, the bigger the text area will be.
Input
<textarea cols="50" rows="2">Text area!</textarea>
<textarea cols="40" rows="5">Text area!</textarea>
<textarea cols="20" rows="10">Text area!</textarea>
Output

The wrap attribute
This attribute of the <textarea> tag will establish the way in which the text will react when it will reach the end of the line. Wrap have one of the three values:
Hard: will place an enter at the end of every line and will send the text in the same format it was introduced
Soft: will place an enter at the end of every line, but unlike the Hard one it will send the text in a free format.
Off: This will not format the text in any way, letting the text in a single continuous line.
The Hard/Soft attribute
<textarea cols="20" rows="5"wrap="hard"> Hard will place an enter at the end of every line and will send the text in the same format it was introduced.

Output

The Attribute off
<textarea cols="20" rows="5"wrap="off"> This will not format the text in any way, letting the text in a single continuous line.
</textarea>
Output

The 'readonly' attribute
Input
<textarea cols="20" rows="5" wrap="hard"readonly="yes"> This text cannot be modified. In the case in which the 'no' value would be chosen the opposite result would be obtained.
</textarea>
Output

This text cannot be modified. In the case in which the 'no' value would be chosen the opposite result would be obtained.

The disabled attribute
The disabled attribute text will be shown in gray, disabling at the same time the possibility of modifying the text that text area contains.
Input
<textarea cols="20" rows="5" wrap="hard"disabled="yes"> The disabled attribute text will be shown in gray, disabling at the same time the possibility of modifying the text that text area contains.
</textarea>
Output

29/09/2014

HTML The input tag

The input tag does not need an ending tag and can have numerous attributes:
text
password
radio
checkbox
reset
submit
HTML Text fields and passwords
Input
<input type="text" />
<input type="password" />
Output

Write something in the boxes above to note the difference.
HTML Checkboxes
Ideal for offering the user the option of selecting more than one answers
Input
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
Output

HTML Radio
And I didn't mean a music radio, but a little circle which offers the possibility of choosing only one answer for a single question.
Input
<input type="radio" />
<input type="radio" />
<input type="radio" />
Output

HTML Submit buttons
Here, we will have to give a value to the submit attribute, this being the text that will be shown on the generated button.
Input
<input type="submit" value="Submit" />
<input type="submit" value="Next step >>" />
Output

HTML Reset Buttons
Here, same as with the submit button, we will have to give a value, that being the text that will be shown on the generated button. This button is extremely useful in the cases in which the user completes the majority of the forms with wrong information.
Input
<input type="reset" value="Reset" />
<input type="reset" value="Delete All " />
Output

HTML Input fields
Note: It must be specified that those forms and buttons will not fully act without the help of a php or javascript files that will execute the wanted action once one of these buttons is pressed. In the next tutorial we will go more in depth with the shown attributes and you will also show some things that we have not yet mentioned.
Have a nice time

HTML The DIV tag

The div tag is not something more than a support for other tags. Here are some of the div attributes:
id
title
style
height
width
The rest of the attributes are not usually used, their job is taken by the CSS. Here is an example of using the <div> tag:
<div id="menu" align="right">
<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white"< >h5>Title here </h5>
End here will be the content of the paragraph . End here will be
</div>>
Preview

Title here

End here will be the content of the paragraph . End here will be.

The div tag is much easier to use than the table tag, so for that it is recommended to use it as many times as you need.
HTML The div tag easy to modify
One of the reasons for which it is easy usable is introducing new info with ease and we will exemplify this to you. In this example, we have added some new fields to the page exemplified above.
<div id="menu" align="right">
<a href="#">HOME</a> |
<a href="#">CONTACT</a> |
<a href="#">ABOUT</a> |
<a href="#">SITEMAP</a>
</div>
<div id="content" align="left">
<h5>Title here</h5>
End here will be the content of the paragraph. End here will be the content of the paragraph. End here will be the content of the paragraph.
<h5>Second title here </h5>
End here will be the content of the second paragraph. End here will be the content of the second paragraph. End here will be the content of the second paragraph
</div>
Preview

Title here

End here will be the content of the paragraph. End here will be the content of the paragraph. End here will be the content of the paragraph.

Second title here

End here will be the content of the second paragraph. End here will be the content of the second paragraph. End here will be the content of the second paragraph.

HTML The Body tag

As we have mentioned earlier in another tutorial, the <body> tag is the one that contains every thing that will be shown in a web page: tables, frames, forms, paragraphs, photos and anything else. All this are entered between <body> and </body> tag.
HTML Attributes of the body tag
leftmargin establishes
An edge in the left side of the page (a blank space)
topmargin establishes
An edge in the top side of the page (a blank space).

An example would be:

<body topmargin="50">
This text is located at a distance of 50 pixelsof the top ofthe page
</body>
<body leftmargin="50">
This text is located at a distance of 50 pixelsto the leftof the page
</body>
You can copy this code into a notepad file, saving it as .html to view it best.
HTML Text color established by the body tag
<body text="red">
or <body text="rgb(255,0,0)">
This part of a code will establish the base font color as red, in the case another color is not specified within the paragraph tag
HTML Link color established by the body tag
Same as with the text you can set the viewed or not viewed links color with the help of the body tag.
<body link="white" vlink="black">
or <body link="rgb(255,255,255)" vlink="rgb(0,0,0)">
This method is used very rarely though, using the CSS (Cascading Style Sheets) being much easier and more practical.

Inserting HTML codes for video

A video file can be inserted in a html page in two ways. The first way would be using the <embed/> tag. This tag does not need an ending/finishing tag. It works, mostly, the same as a tag for an photo works
<embed src="example.mpeg" autostart="false" HEIGHT=60 WIDTH=144/>
Also, you can insert a video file using a link
<a href="example.mpeg">Movie Name </a>
Movie Name
Supported extensions for the embed tag
These are:
.swf: made by Macromedia Flash
.wmv: Microsoft Windows Media Video
.mov: Quick Time Movie, belongs to Apple
.mpeg: Created by Moving Pictures Expert Group.
The most used are .mpeg and .swf because of the compact format.
Attributes of the embed tag
auto establishes
Whether the file will run automatically after the page is loaded. Can have the true or false value
hidden establishes
Whether the buttons are hidden or not. Can have the true or false value. volume- can have any value from 0 to 100
loop establishes
Whether the file will be replayed after it is finished. Can have the true or false value. playcount
This establishes how many times the file will be replayed. For example playcount="2" means it will be replayed two times and after it will stop.
Inserting a You Tube video
You can do that very easy, because You Tube has on every page the needed HTML code.
<! -- Here will start the You Tube code -->
<object width="425" height="344"><param name="movie" value=" http://www.youtube.com/ v/UAq8=en&fs=1"> </param><param name="allowFullScreen" value="true"> >/param> <embed src=" http://www.youtube.com/ v/UAq8q=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>
<! -- Here will end the You Tube code -->
Truth is that everything you see is quite chaotic, but the good part is that you only have to copy it from the You Tube, and paste it, and you will have your video.

Inserting codes for music in HTML

Some time ago it was quite complicated to insert music or sounds on a web page. Now, that problem is solved, adding sounds being quite simple.
<EMBED SRC="sound.mid" hidden="false" autostart="false" loop="false" volume="60" HEIGHT=60 WIDTH=144/>
It is recommended that both height and width to be directly proportional to avoid problems. To hide the player the value of the hidden attribute will be replaced by true. This thing is done if you are absolutely that the user does not wish to stop the sound.
Controlling and manipulating the player
Let's have a look on the above example:
<EMBED SRC="sound.mid" hidden="false" autostart="false" loop="false" volume="60" HEIGHT=60 WIDTH=144/>
autostart - establishes whether the sound will start immediately after the web page is loaded. Can have the true or false value. volume can have any value from 1 to 100. You can play a little with these attributes to better memorize and understand them, and also be aware that a higher volume may be annoying for the user.
Warning: Listening music at high volume may damage your hearing quality.

Inserting Javascript and Vbscript in HTML

Javascript and Vbscript are often used in a HTML page code to give more liveliness to the page, or just for one of the many applications of these scripts. Using these scripts you can create dynamic animations of some photos, an animated menu with amazing effects and so on. Also, one of the most important applications is that of validating a form before sending it. This will make the user spend considerably less time in the case the user has wrongly completed the fields, and a reload of the page being needed. In this part we will only talk about the method of inserting the script into HTML
Note: Most of the time it is much easier to just download from someone else than to write these scripts. In fact, that is just possible only if the author has given his/her agreement.
Inserting Javascript in HTML
Inserting a javascript code is done very easily using the script tag. Here is an example:
<script type="text/javascript">

</script>
For the javascript codes the 'text/javascript' value will be given to the type attribute.
Inserting Vbscript in HTML
Inserting a vbscript code is done in the same way as the javascript code is done, only that you replace the 'text/javascript' with 'text/vbscript' Here is the example:
<script type="text/vbscript">

</script>
It is always recommended to insert a comment along with the javascript and vbscript codes. That will warn the browsers that do not support that kind of script, or browsers that have javascript and vbscript disabled.

Meta tags

The meta tag is used to generate additional info to the search engine. These information will not be unless that user will select view 'Source' from the 'View' menu where he will have access to the HTML part of the page.
Meta keywords
In the meta tag you can add words or keywords. Here will be put the most important words that can target to your web site. It is recommended that you do not abuse these tags, because using keywords that have no link to the web site's content, neither the search engines nor the users will gain any profit. Here is a moderate example of using the meta tag
<head>
<meta name="keywords" content="Tutorials, hacking, HTML, web, resources, webmaster" />
</head>
This example is based on this page's profile. As you can see, the name specifies what kind of meta tag will be used. Also, the comma that is used to separate the words from each other has to be specified, something trivial but something that many forget once they have to do it
Meta Description
This tag helps you to describe your web site. A maximum of two sentences will be used to complete the content of this tag.
<head>
<meta name="description" content="The World's Best Site to Solve your Computer Problems, Learn Complete Computer Softwares & Latest Computer Tips & Tricks"/>
</head>
As you can see, the name specifies what kind of meta tag will be used. Also, the comma that is used to separate the words from each other has to be specified, something trivial but something that many forget once they have to do it.
Meta Revised
Revised tag in meta It is used to specify the latest bringing up to date of the web site.
<head>
<meta name="revised" content="1/08/2014" />
</head>
Meta Refresh
Refreshing is done with the help of the http-equiv="refresh" attribute The purpose of this tag is to reload the page and to display new info in the case of a bringing up to date. A very useful application for a forum, for example.
<head>
<meta http-equiv="refresh" content="10; url=http://deadlyuniversityspy.blogspot.in" />
</head>
Meta Redirect
Redirect is easily done by changing the address of the web page with the one you want it redirected to. The application is welcomed when you buy a new domain and the redirection of the users to the new page is wanted.
<head>
<meta http-equiv="refresh" content="5; url=http://deadlyuniversityspy.blogspot.in" />
</head>

HTML Comments

Comments are often used in the HTML codes. That is why it is important not to be pointed out to the browser to avoid showing them. There are many reasons we can add a comment within a html script. A note or a reminder, a specification, a blank title or a clarification.
Javascript comments
An unfinished element The comment will be placed between the "" tags. This way, we will be able to leave a note to remember on a later time what the code was for, or if something is still needed to be introduced in there.

<img src="hoto.jpg" alt="blank" width="52" height="52" /></a>

Preview
blank

This is just an example of the things you can comment in a script. In time, you will learn that these comments are very useful for a better understanding of the code at a later date. Any text, characters, symbols or anything else placed between the opening tag ""
HTML Unfinished script
Comments are very useful when you work at a script but you leave it unfinished. Putting it between the two tags " will be interpreted as a comment by the browser and therefore will not be shown. When you have finished the code and you will need to show it all you will need to do is to erase the two tags and the browser will show the wanted script.
Input
<input type="text" size="12" />
Output

HTML Bgcolor

The Bgcolor attribute is used to establish the the background color of a HTML paragraph, table or any other content
<"numetag" bgcolor="Value"> This is a model of how the bgcolor attribute will be used within a tag.
Input
<body bgcolor="Silver"> <p>This is the silver bgcolor.</p> </body>
Output

This is the silver bgcolor

Adding bgcolor to the tables
Input
<table> <tr bgcolor="#FFFF00"><td>This Row is Yellow!>/td<</tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td<This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> </table>
Output

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

Font and background
Input
<font color="blue"><table bgcolor="#000000"> <tr><td bgcolor="#009900"> <font color="#FFFF00" align="right">Green Bay</font<>/td> <td><font color="#FFFFFF">30</font></td></tr> >tr><td bgcolor="#0000FF"> <font color="#DDDDDD" align="right">New England</font></td> <td><font color="#FFFFFF">11</font></td></tr> </table>
Output

Green Bay	30
New England	11

Paragraph on a gray background
Input
<table bgcolor="#777777"> <tr><td> <p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">This paragraph tag has</font></p> </td></tr> </table>
Output

Look at this paragraph

Subscribe to: Posts ( Atom )