Tuesday, 8 November 2016

What is HTML ... ?

What is HTML?

HTML Stands for Hyper Text Markup Language, It is a language to Describe Web Page, To Work with this language you need a Text Editor Software like Notepad in Windows, or  You can use HTML Editor Like Dreamweaver (for Professional and Power users of HTML), and to check what you have invented using HTML Language you need a Browser like Internet Explorer, Firefox, Chrome, Opera or Safari. The Browser is in actual an interpreter that reads HTML and Shows the Actual thing described by HTML.


TAGS.

Every Language has keywords to work with and same is with HTML Case, HTML language also has keywords called TAGS. Tag is a HTML keyword surrounded by angle bracket < >, Tags are keywords and not shown by the browser, browser interpret tags and do accordingly.

Tags are of two types.
  1. Empty Tags
  2. Paired Tags
Example of Empty Tag is like <BR /> and Paired Tag is <P> some text </P>

ATTRIBUTES

Every Tag has some additional functionality means some more keywords which are called ATTRIBUTES, Every Attribute has a single value or list of values. Value of an attribute is given using = sign.
Example:
<P align="left"> Here we have used "align" attribute of "P" tag.

Every tag describe any of Web Page's Element.

What is an HTML File.

HTML file also called Web Document is a file created using any Text Editor and saved with extension .htm or .html, to Edit HTML File you need a text Editor and to View HTML File you need a Browser.

Basic Structure of an HTML Page.

<!doctype HTML>
<html>
<head>
       <title> Basic Structure of Html Page </title>
</head>
<body>
<h1> This is an Heading Level 1</h1>
<p> P tag creates a paragraph, and here I want to let you know that there are 6 Headings levels are available in HTML Language. These Level can be described with H1, H2, H3, H4, H5, and H6 tags
</body>
</html> 

Open Notepad Type above code in Notepad save it with first.html and Open it with any one Browser and enjoy!

HTML document is started with <HTML> tag and after it we use <HEAD> tag and inside <HEAD> tag we use at least <TITLE> text </TITLE> tag after this we close </HEAD> tag and the we start <BODY> tag and given below all tags are placed inside <BODY> Tag.
  1. H1,H2, H3, H4, H5, H6 (Are used to make Headings Levels from 1 to 6, as much the bigger level the font size is reduced)
    1. You can use ALIGN attribute with one of these Values LEFT,RIGHT,CENTER to adjust the heading text.
  2. P (is used to make a Paragraph)
    1. You can use ALIGN attribute with one of these Values LEFT,RIGHT,CENTER,JUSTIFY to align the Paragraph text as we align the text Micorsoft Word.
  3. <BR/> is used to break a line in a paragraph
  4. <HR/> is used to draw a Straight line Throught the Page
  5. <IMG/> is used to add Picture/image into HTML
    1. IMG Tag supports the following Attributes
      1. SRC="Url" to specify the name and path of Image File
      2. HEIGHT="Number" to specify the Height of the Image on Web Page
      3. WIDTH="Number" to specify the Width of the Image on Web Page
      4. BORDER="Number" to Specify a Border arround the Image (But you cannot change the border color in HTML for image)
      5. ALT="Text" for the browsers that does not display Images, those browsers will display this alternate text in place of image
    2. Exampl : <IMG SRC="images/aish.jpg" HEIGHT="200" WIDTH="200" BORDER="1" ALT="Aishwarya Rai's Picture Here />
  6. <OL> is used to initiate a Numbered List
    1. OL supports the Following Attributes
      1. TYPE with one of the these values 1,a,A,i,I
      2. START = "Number"
  7. <UL> is used to initiate a Bullted List
    1. UL Supports the Following Attributes
      1. TYPE with one of these Value disk,square,circle
  8. <LI> is used show List Items with OL or UL
<OL TYPE="1" START="1>
<LI> PAKISTAN </LI>
<LI> INDIA </LI>
<LI> KASHMIR </LI>
</OL>

<UL TYPE="disk">
<LI> PAKISTAN </LI>
<LI> INDIA </LI>
<LI> KASHMIR </LI>
</UL>
Type this code and check the result, and also practice it with all values of TYPE attribute

  1. <A HREF=""> Link Text or you can use here IMG tag </A> is used to make Links in HTML
    1. in HREF attribute you can give 
      1. File Name with Ext Like myfile.html
      2. Web Site Link like http://www.google.com.pk
      3. mailto:youremailaddress
      4. You can use TARGET=_BLANK attribute to open the Link in a new Window

Marquee a Scrolling News Ticker on you Web Page

You can use <marquee> tag to add a news Ticker in your web page
Syntax
<marquee> Text / or you can use img tag here to add photos </marquee>

Attributes

Direction: right  left  up  down you can choose the direction of ticker movement

Behavior: You can control the behavior of your ticker default is "Scroll" Ticker moves from one corner to other disappears and appears again, second is "Slide" in this behavior ticker moves to other side and stops, "Alternate" in this behavior Ticker doesn't disappear but its moves back and forth.

 Scrollamount: use a Number from 1 to 5 to control the speed of ticker, if used 0 the ticker will never move

there are some more attributes like bgcolor, scrolldelay,width, height, align for more details you can search it on Google

<marquee scrollamount="2" behavior="scroll" bgcolor="white"> Here comes your News Ticker </marquee>

Basic Formatting in HTML

There are some tags you can use to format your HTML Elements which are based on Text.
<font> to choose font name, color, and size for your text.
Attribute of <font> tag are face to choose font name, color to choose color for your text and size to select size for your text. Please for size attribute you can use only numbers from 1 to 7

<font face="arial black" size="4" color="black"> Your text </font>

<strong> text </strong> is used to make text Bold.
<em> text </em> is used to make text Italics.
<del> text </del> is used to make text Strikethrough
<ins> text </ins> is used to make text Underline
<sup> text </sup> is used to make text Superscript 
<sub> text </sub> is used to make text Subscript 

These common formatting is required to format your text.

Entities in HTML

There are some special symbols that are required while you making a document but you cannot type them direct from your keyboard so you have to program them

&copy;
&trade;
&reg;
&lt;
&gt;
&nbsp;
&pound;
&yen;
&euro;

type these in your HTML document and view it in Browser, see the amazing results. you will get something you may be thinking but not getting.

Colors Concept in HTML

you can give color value in three ways
color="colorname" like color="red"
color="Hexnumbers" like color="#ff0000"
color=rgb(redvalue,greenvalue,bluevalue) like color=rgb(255,0,0) you have to choose numbers from 0 to 255,. all Zeros means black color and all 255 means white color, in between you can get any color of your choice.




Posted by at
Labels: , , , ,

1 comment:

Subscribe to: Post Comments (Atom)