Pages

Monday, July 30, 2018

HTML - Basic Tags

HTML - Basic Tags


Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
</html>
This will produce the following result −



Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example −


Example

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
</html>
This will produce the following result −



Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
</html>
This will produce the following result −


Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
</html>
This will produce following result −


Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example, you may want to give a line between two paragraphs as in the given example below −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
</html>
This will produce the following result −


Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting

Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
</html>
This will produce the following result −


Try using the same code without keeping it inside <pre>...</pre> tags

Nonbreaking Spaces

Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12, Angry" and "Men" across two lines −

An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
</html>
This will produce the following result −

Advantages and Disadvantages of HTML


Advantages and Disadvantages of HTML

points about HTML:
HTML is used to create webpages.
HTML used many tags to make a webpage. So it is a tag based language.
The tags of HTML are surrounded by angular bracket.
It can use wide ranges of colors,objects and layouts.
Very useful for beginners in web designing field.

Advantages of HTML:

  • First advantage it is widely used.
  • Every browser supports HTML language.
  • Easy to learn and use.
  • It is by default in every windows so you don't need to purchase extra software.
  • HTML is the basic language to learn for web technologies.
  • It is quite easy language to learn.
  • Even for learning javascript, like for integrating javascript into html, we need to know some basics of html. So learning HTML is the basic thing to do,If we want to learn web technologies.
  • One more advantage is we can integrate many languages with HTML. Some of them are PHP, java scripts like node js and many more.
  • HTML is easy enough to write
  • HTML is that it is easy to code.
  • HTML also allows the use of templates, which makes designing a webpage easy.
  • Very useful for beginners in web designing field.
  • Its plain text so is easy to edit. 
  • Its also fast to download (text is highly compressible). 
  • Is very easy to learn. 
  • Its now a standard. 
  • Its supported by most browsers across most if not all platforms. 
  • Simple to edit, only requires a text editor. 
  • Can be easily edited with WYSIWYG editors (no coding required) 
  • Can be used to present just about any kind of data. 
  • Tags can be used very loosely (i.e. used to be able to omit end tags etc).


Disadvantages of HTML:


  • It can create only static and plain pages so if we need dynamic pages then HTML
  • is not useful.
  • Need to write lot of code for making simple webpage.
  • Security features are not good in HTML.
  • If we need to write long code for making a webpage then it produces some complexity.
  • The main dis-advantage of using html is that it is not responsive. Just using the tags of HTML will not be useful to make a complete website. Even If you want to build a static website, this HTML will not be much effective because it will not be fit to any type of screen resolution(NOT RESPONSIVE).
  • So for this case we are using BOOTSTRAP to make our website responsive.
  • Here we get one more advantage, that even for using BOOTSTRAP we need to learn HTML.
  • According to my knowledge, these were the advantages and dis-advantages of using HTML.
  • Errors can be costly.
  • The time it takes to choose the color scheme of a page and to create lists, tables and forms.
  • It can create only static and plain pages so if we need dynamic pages then HTML is not useful.
  • Need to write lot of code for making simple webpage.
  • It is static needs to be manually updated or needs some scripting support to change it in some way. 
  • Isn't rendered correctly in all browsers.
  • Isn't really as flexible as other standards or technologies.
  • Its not centralized (all pages must be edited individually). 
  • Very limited styling capabilities. 
  • Its essentially massively outdated (xhtml and xml suite of standards). 
  • Different vendors added (mostly Microsoft early on) their own custom tags that aren't widely supported if at all by most browsers (e.g. marquee tag).

Friday, July 27, 2018

HTML Attributes


HTML Attributes


attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value
The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Example

<!DOCTYPE html>
<html>

<head>
      <title>Align Attribute  Example</title>
   </head>

 <body>
      <p align = "left">This is left aligned</p>
      <p align = "center">This is center aligned</p>
      <p align = "right">This is right aligned</p>
   </body>

</html>

This will display the following result −

 Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are −
  • Id
  • Title
  • Class
  • Style

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph elements as shown below.

 Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

This will produce the following result −


The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
                 
<body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
                
</html>
This will produce the following result −



Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

 The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names.

Example −

class = "className1 className2 className3"
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
      <title>The style Attribute</title>
   </head>
               
   <body>
      <p style = "font-family:arial; color:#FF0000;">style attribute</p>
   </body>
               
</html>
This will produce the following result −



At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content.

Internationalization Attributes

There are three internationalization attributes, which are available for most (although not all) XHTML elements.
  • dir
  • lang
  • xml:lang

The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −

Value                 Meaning
ltr                   Left to right (the default value)
rtl                   Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example

<!DOCTYPE html>
<html dir = "rtl">
  
<head>
      <title>Display Directions</title>
   </head>

  <body>
      This is how IE 5 renders right-to-left directed text.
   </body>

</html>
This will produce the following result −



When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.

 The lang Attribute

The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

 Example

<!DOCTYPE html>
<html lang = "en">

<head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>
This will produce the following result −

 The xml:lang Attribute

The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes
Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute                                Options                                                  Function
align                        right, left, center                                      Horizontally aligns tags
valign                      top, middle, bottom                                 Vertically aligns tags within an HTML element.
bgcolor                  numeric, hexidecimal, RGB values          Places a background color behind an element
background           URL                                                         Places a background image behind an element
id                             User Defined                                         Names an element for use with Cascading Style Sheets.
class                        User Defined                                        Classifies an element for use with Cascading Style Sheets.
width                      Numeric Value                                      Specifies the width of tables, images, or table cells.
height                     Numeric Value                                      Specifies the height of tables, images, or table cells.
title                         User Defined                                        "Pop-up" title of the elements.

Thursday, July 26, 2018

Limitations of HTML


Limitations of HTML


  •  HTML is also known as HyperText Markup Language provides the creation of the web pages. 
  • The HTML pages are the documents that can be read by the server, and are not the best fit to be read by humans. 
  •  HTML forms have the dependency on scripting languages and it results in complex document creation that consumes more time. 
  • HTML doesn’t initialize the form data properly and doesn’t make it easier for the users to enter the information once. 
  • HTML is having some limitations with the use of forms that doesn’t allow encoding formats, urlencoded or multipart forms.

HTML Code Limitations

Code within the HTML element is displayed on your live site within a sandboxed iFrame. Using a sandbox protects visitors to Wix sites from potential side-effects of custom HTML/JS/CSS code.
Usually, a sandboxed iFrame blocks the following:
Using Browser APIs 
Content using plugins (via <embed>, <object>, <applet>, or other) 
Automatically triggered features (such as automatically playing a video or automatically focusing a form control)

Sandbox Description
allow-same-origin Re-enables third-party site scripts/content
allow-forms         Re-enables form submission
allow-popups         Re-enables popups
allow-scripts         Re-enables custom JavaScript code
allow-pointer-lock Re-enables grabbing the cursor
allow-top-navigation Re-enables changing parent frame window.location

The script is (a lot) slower than the original FPDF and html2fpdf. Some of this is due to the inclusion of unicode font files (when used), but there is also an increase in processing time.

Limitations

Tables
Block elements (e.g. DIV or P) are not supported inside tables. The content is displayed, but any CSS properties which apply to block elements are ignored (e.g. borders, padding, margins etc).

Block and in-line elements
All HTML elements are hard-coded to be treated as block or in-line elements (e.g. equivalent to CSS display:block or display:in-line). This cannot be changed using CSS. See HTML tags.

Special features
Several of the “special” features of mPDF are incompatible with each other e.g columns, fixed-position block elements, page-break-avoid:inside, Keep-with-table and rotated tables.

Other
Millimeters are the only accepted dimensions for defining page size and margins within mPDF (CSS stylesheets accept all usual units).

Blocks which are defined as position:absolute, fixed or float have only limited support (introduced v4.0).

Wednesday, July 25, 2018

Characteristics Of HTML Language


Characteristics Of HTML Language

HTML is the most common used language to write web pages .It has recently gained popularity due to its advantages such as : -

  • It is the language which can be easily understand and can be modified. 

  • Effective presentations can be made with the HTML with the help of its all formatting tags. 

  • It provides the more flexible way to deign web pages along with the text.

  • Links can also be added to the web pages so it help the readers to browse the information of their interest. 

  • You can display HTML documents on any platforms such as Macintosh ,Windows and Linux etc.

  • Graphics,videos and sounds can also be added to the web pages which give an extra attractive look to your web pages.


Tuesday, July 24, 2018

HTML Simple Tags


HTML Simple Tags

HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.

HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag the closing tag.


Tag                                         Description

<!DOCTYPE>                      Defines the document type
<html>                                   Defines an HTML document
<head>                                   Defines information about the document
<title>                                    Defines a title for the document
<body>                                  Defines the document's body
<h1> to <h6>                        Defines HTML headings
<p>                                        Defines a paragraph


HTML Document Structure

A typical HTML document will have the following structure −

<html>
    
<head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>

   </html>

Output:



We will study all the header and body tags in subsequent chapters, but for now let's see what is document declaration tag.

Note: Only the content inside the <body> section (the white area above) is displayed in a browser.


The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>


A Simple HTML Document

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
</body>

</html>

Output:

Monday, July 23, 2018

HTML Key Components


HTML Key Components


HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references. HTML tags most commonly come in pairs like <h1> and </h1>, although some represent empty elements and so are unpaired, for example <img>. The first tag in such a pair is the start tag, and the second is the end tag (they are also called opening tags and closing tags).

Another important component is the HTML document type declaration, which triggers standards mode rendering.

HTML Components (HTCs) are a legacy technology used to implement components in script as Dynamic HTML (DHTML) "behaviors" in the Microsoft Internet Explorer web browser. ... An HTC is typically an HTML file (with JScript / VBScript) and a set of elements that define the component.

The following is an example of the classic "Hello, World!" program:

<!DOCTYPE html>

<html>

  <head>
    <title>This is a title</title>
  </head>

  <body>
    <p>Hello world!</p>
  </body>

</html>

Output:



Document elements

Example Explained

  • The <html> element defines the whole document.


It has a start tag <html> and an end tag </html>.

  • The element content is another HTML element (the <body> element).
The <body> element defines the document body.


<html>

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

</html>

Output:



It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

Output:


  • The <h1> element defines a heading.


It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

<h1>My First Heading</h1>

Headings: HTML headings are defined with the <h1> to <h6> tags:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

  • The <p> element defines a paragraph.


It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

<p>My first paragraph.</p>

Do Not Forget the End Tag
Some HTML elements will display correctly, even if you forget the end tag:

Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>

</html>

The example above works in all browsers, because the closing tag is considered optional.

Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.

Empty HTML Elements
HTML elements with no content are called empty elements.

  • <br> is an empty element without a closing tag (the <br> tag defines a line break). 

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.



Sunday, July 22, 2018

HTML Introduction


HTML Introduction


HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

What is HTML?

  • HTML is the standard markup language for creating Web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.

As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My first heading</h1>
<p>My first paragraph</p>

</body>
</html>

 Output :




Monday, July 16, 2018

JMETER Tutorial Course Content





  1. JMeter Download
  2. JMeter Overview
  3. JMeter  Enviornment
  4. JMeter  Build test plan
  5. JMETER -Understanding Thread Group
  6. Understanding Listeners in JEMTER
  7. API performance testing using JMETER
  8. How to pass variable data in JMETER request
  9. Parsing JSON response and Saving it in CSV
  10. JMeter  Test plan elements
  11. JMeter  web test plan
  12. JMeter  Database test plan
  13. JMeter  FTP test plan
  14. JMeter  webservice test plan
  15. JMeter  Monitor test plan
  16. JMeter  Listners
  17. JMeter  functions
  18. JMeter  Regular expression
  19. JMeter  Best Practice