Showing posts with label tutorials. Show all posts
Showing posts with label tutorials. Show all posts

What are HTML Tags

What are HTML Tags?

Consider this example
    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <title>Your page title</title>
    4. 

  4. </head>
    5. 

  5. <body>
    6. 

  6. <!-- An HTML comment which is not displayed on the web page -->
    7. 

  7. <h1>Your page heading</h1>
    8. 

  8. <p>Your page content in a paragraph.</p>
    9. 

  9. </body>
    10. 

  10. </html>
    11.
The words <html>, <head>, <title>, </title>, </head>, <body>, <h1>, <p>, </p>,</h1>, </body>, </html> etc., are called HTML Tags.
The words <html>, <head>, <title>, <body>, <h1>, <p> etc., are called opening tags / start tags.
The words </html>, </head>, </title>, </body>, </h1>, </p> (with a back slash /) etc., are called closing tags / end tags. 

What is the syntax to write an HTML Tag?

HTML Tags are not case sensitive and you are free to use both uppercase or lowercase tags or a combination of both. Now a days many websites use lowercase tags and for future specifications (versions) of HTML it is recommended to use lowercase tags.
Any number of line breaks and spaces in a HTML document are treated as a single space character (exception: <pre></pre> tag).

    

  1. <p>Your page content in a paragraph.</p>
    2. 



    

  1. <p>
    2. 

  2. Your page    content         in a paragraph.
    3. 

  3. </p>
    4. 



    

  1. <p>
    2. 

  2. Your page
    3. 

  3. content in a paragraph.
    4. 

  4. </p>
    5. 



    

  1. <p>
    2. 

  2. Your page
    3. 

  3.    content in a       paragraph.
    4. 

  4. </p>
    5. 



    

  1. <p>
    2. 

  2. Your page
    3. 

  3.    content
    4. 

  4.    in        a paragraph.
    5. 

  5. </p>
    6.
The ouput of all the above codes is same.

List of some commonly used HTML Tags

Please note that the default display of elements will be different from our examples as we use various CSS to style our web page
TagDescriptionExample
<a>Anchor tag is used to display hyper linksThis is a link
<b>This tag makes the text inside it boldThis is a bold text
<body>This defines the body of a HTML documentThis tag is found in each and every web page
<br />Introduces a line break in the web page.
It is an empty element which has no closing tag		line 1 
line 2
<button>Creates a clickable button (mostly used in forms)
<div>Used to organise content into divisions (sections)Extensively used in almost all web pages
<em>Emphasizes text inside itThis text is emphasized
<form>Used to submit data using input tagsView forms demo
<frame>Creates a frame which is like a sub-windowView frames demo
<h1> to<h6>Heading tags are used to define the heading of a page

Heading

in a <h2> tag
<head>Contains the information of a dcoument like page's titleView example
<hr />Similar to <br /> tag but introduces a horizontal lineline 1 
line 2
<html>It is the root of any HTML documentIt is found in every html document
<i>Makes the text inside it italicizedThis is an italic text
<iframe>Creates an inline frameView iframes demo
<img />Image tag is an empty tag used to insert images
<input />An empty element used to input data
<label>Acts as a label for an input
<li>Display an item of a list (ordered and unordered)




  • Item 1
    • <ol>Make an ordered list of items
    1. Item 1
    2. Item 2
    <p>Display content in a paragraphThis is a paragraph
    This is another paragraph
    <span>Define a section in a documentUsed to style different sections in an element
    <strong>Make the text look more importantThis is a strong text
    <table>Create a tableYou are already viewing this in a table
    <td>Display a table cellThis text is in a table cell
    <tr>Create a table rowThese three cells of the current line form a row
    <ul>Make an unordered list of items
    • Item 1
    • Item 2
    www.cinterviews.com appreciates your contribution please mail us the questions you have to cinterviews.blogspot.com@gmail.com so that it will be useful to our job search community
    0 comments
    Labels: , , ,

    IPhone Tutorial:UISegmentedControl Tutorial

    IPhone Tutorial:UISegmentedControl Tutorial
    A segmented control shows a horizontal list of items. Each segment looks like a button. The segments remains “pressed” even after the user lifts his finger.When a different segment is tapped, its corresponding value can be obtained.
    Segmented control comes in handy when you want to show/hide different data without changing the current view.For e.g you can have a set of images and you display only one when a segment is selected. When you select a different segment, depending on that, the picture changes.
    So lets get started.:
    Step 1:Start Xcode and create a view based application with name “SegmentedControlDemo”.
    Step 2:Open the “SegmentedControlDemoViewController.h” file and put the following code in it.

    01#import
    02@interface SegmentedControlDemoViewController : UIViewController {
    03UILabel *segmentLabel;
    04UISegmentedControl *segmentedControl;
    05}
    06 
    07@property (nonatomic,retain) IBOutlet UILabel *segmentLabel;
    08@property (nonatomic,retain) IBOutlet UISegmentedControl *segmentedControl;
    09 
    10-(IBAction) segmentedControlIndexChanged;
    11 end them

    		 Here, we have declared a label and segmented control and set properties and outlets for both of them.
    Step 3:Open the “SegmentedControlDemoViewController.m” file. Synthesize both the properties and release them.Also provide the implementation for segmentedControlIndexChanged method.

    01#import "SegmentedControlDemoViewController.h"
    02 
    03@implementation SegmentedControlDemoViewController
    04@synthesize segmentLabel;
    05@synthesize segmentedControl;
    06 
    07// Implement viewDidLoad to do additional setup after loading the view.
    08- (void)viewDidLoad {
    09  self.segmentLabel.text =@"Segment 1 selected.";
    10  [super viewDidLoad];
    11}
    12 
    13- (void)dealloc {
    14  [segmentLabel release];
    15  [segmentedControl release];
    16  [super dealloc];
    17}
    18 
    19-(IBAction) segmentedControlIndexChanged{
    20  switch (self.segmentedControl.selectedSegmentIndex) {
    21    case 0:
    22      self.segmentLabel.text =@"Segment 1 selected.";
    23      break;
    24    case 1:
    25      self.segmentLabel.text =@"Segment 2 selected.";
    26      break;
    27 
    28    default:
    29       break;
    30   }
    31 
    32}
    33 @end
    In the segmentedControlIndexChanged method, we have used a switch case which switches the selected segment index of the segmented control. For each case, we have set the text of the label to the respective segment selected.
    Step 4: Save(command+s) the project.Now open the “SegmentedControlDemoViewController.xib” file from the Resources folder. Drag and drop a label and a segmented control from the library on the view as shown below. Stretch the edges of the label so that it becomes long enough to display “Segment x selected.”


    Note: If you want more than two segments in the segmented control, go to Attributes Inspector for segmented control and change the value for Segments field.
    Step 5:Select the File’s Owner in the xib window and open its Connections Inspector(command+2) and make the following connections.
    Connect segmentControl to segmented control and segmentLabel to label. The Connections Inspector for File’s Owner will then look like this:



    Step 6: Open the Connections Inspector for segmented control and link the value changed argument to the segmentedControlIndexChanged method in the File’s Owner.



    Step 7: Build and run the project. You will see that when you tap different segments of the segmented control, the text of the label changes.

    You can download the source code on cinterviews.com here



    Done with UISegmentControl on cinterviews.com tutorials
     
    0 comments
    Labels: , , ,

    Tutorials

    0 comments
    Labels: , , ,
    Subscribe to: Posts (Atom)