Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday, 16 June 2018

Chaudhari Karan

HTML – Images

By     No comments:

HTML – Images

Hello friends, In this lecture, we will discuss HTML – Images.
HTML – Images


Images are used for design beautify web page. This lecture will take few simple steps to use images in web pages.

Insert Image

In HTML tag are used for insert any image in web page. Here is the simple syntax to use tag.



The image tag has no closing tag. It is contain only attributes-list.

Example

In this example HTML file and image file in the same directory –

HTML Insert Image

Output
HTML Insert Image


In HTML image use PNG, JPEG or GIF image file, but make sure to specify correct image file name in src attribute. The image name is always case sensitive.

The alt attribute is the mandatory attribute, it specifies an alternate text for the image if the image not displayed.

Set Image Location

If all the images in a separate directory. So HTML file in home directory and create the subdirectory images inside the home directory where keep the image.

Example

Assume our image location is "image/alwaysspot.png".

HTML Set Image Location

Set Image Width/Height

We can set image width and height based on our requirement. For set image width and height using the attributes. Attributes can specify width and height of the image in pixels or percentage of its actual size.

Example
HTML Set Image Width/Height


Output
HTML Set Image Width/Height

Set Image Border

The image has a border around it by default, it can specify thickness in pixels using border attribute. The thickness of 0 which means no border around the image.

Example
HTML Set Image Border

Output
HTML Set Image Border

Set Image Alignment

The image is aligned at the left side of the page by default but can use align attribute to set in the right or center.

Example
HTML Set Image Alignment
Output

HTML Set Image Alignment



Read More

Thursday, 14 June 2018

Chaudhari Karan

HTML – Comments

By     No comments:

HTML – Comments

Hello friends, In this lecture, we will discuss HTML – Comments.
HTML – Comments

Any piece of code is placed between tags is known as comments. The comment is ignored by a web browser. Add comments into  HTML code, especially in complex documents. It is indicated sections of the document, and other notes to looking at the code. Comments help to understand code and increases code readability.

HTML are used tags for comments. So, any content in this tag   is treated as comment and it is ignored by the web browser.

Example:
HTML – Comments

Output:
HTML – Comments

Valid vs Invalid Comments

In comments, you cannot put inside another comment. It is known as invalid comments.

Second, you cannot use spaces in start comments string like < !--.. -->. This is also invalid comments. So make sure for valid comment does not use spaces in the start-of comment string.

Example

Here, the valid comment example and it will be wiped off by the web browser.

HTML Valid vs Invalid Comments


Here, the invalid comment example and it will be displayed by the web browser. There is a space between the left angle bracket and the exclamation mark.

HTML Valid vs Invalid Comments

Multiline Comments

In above examples, we have seen single line comments, but HTML also supports multi-line comments.

Multiple lines comment also beginning with a tag . In this tag place multiline of comments as shown in the example.

Example:
HTML Multiline Comments

Conditional Comments

Conditional comments only support by Internet Explorer IE on Windows. It is ignored by other web browsers. You can give conditional instructions to different versions of IE.

Example:
HTML Conditional Comments



Using Comment Tag

Internet Explorer browsers support tag to comment the part of HTML code.

Note − The tag is not used in HTML5.

Example:
HTML Using Comment Tag

Commenting Script Code

Through JavaScript and HTML code is recommended to put that script code inside the HTML comments.

Example:

HTML Commenting Script Code
Output:
HTML Commenting Script Code

Commenting Style Sheets

Cascading Style Sheet CSS used in HTML comments as shown in the example.

Example:
HTML Commenting Style Sheets


Output:
HTML Commenting Style Sheets

Read More

Monday, 11 June 2018

Chaudhari Karan

HTML – Meta Tags

By     No comments:

HTML – Meta Tags

Hello friends, In this lecture, we will discuss HTML Meta Tags.

HTML – Meta Tags

HTML metadata - additional important information of the document in a variety of ways. The META elements are used to include name or value pairs describing properties of the HTML document, like the author, expiry date, a list of keywords, document author etc.

The tag is provide the additional information. It is an empty element and it does not have the closing tag and it carries information with its attributes.

One or more meta tags in the document are based on the information what you keep in your document, meta tags cannot impact the physical appearance of the document.

Adding Meta Tags to Your Documents


Add metadata to web pages using tags inside the header of the document.  It is represented by and tags. Here are meta tag attributes in addition to core attributes −

Attributes
                                                               Description
Name
It is used for giving the name for the property. For Example include, keywords, description, author, revised, generator etc.
Content
It specifies the property's value.
Scheme
The scheme is specifies to interpret the property's value as declared in the content attributes.
http-equiv
It is used for http response message headers. For example, it is used for refresh the page or to set the cookie. Values include content-type, expires, refresh and set-cookie.

Specifying Keywords


The tag to specify the important keywords related to the document and these keywords are used by the search engines while indexing webpage for searching purpose.

Example:
In this example, adding HTML, Meta Tags, Metadata as important keywords.

HTML Specifying Keywords

Output:
HTML Specifying Keywords




Document Description


The tag give the short description of the document. It is used by search engines while indexing webpage for searching.

Example:
HTML Document Description

Output:
HTML Document Description

Document Revision Date


The tag gives information when last time the document was updated. It is used by various web browsers while refreshing webpage.

Example:
HTML Document Revision Date

Document Refreshing


The tag is used to specify the duration after which web page will keep refreshing automatically.

Example:
If web page keeps refreshing after every 5 seconds then use the following syntax.

HTML Document Refreshing


Page Redirection


The tag to redirect webpage to another webpage. It specifies a duration if redirect the page after a certain number of seconds.

Example

In this example redirecting current page to another page after 5 seconds. If you want to redirect page immediately then not specify the content attribute.

HTML Page Redirection

Setting Cookies


Cookies are data which is stored in small text files on the computer. It is exchanged between the web browser and web server to track information based on web application need.

The tag to store cookies on the client side, this information used by the Web Server to track a site visitor.

Example

In this example redirecting current page to another page after 5 seconds. If redirect page immediately then do not specify the content attribute.

HTML Setting Cookies

Setting Author Name


For set the author name in a web page using meta tag.

Example:
HTML Setting Author Name

Specify Character Set


This tag to specify character set used with the webpage.

Example:

In default web, servers and web browsers use ISO-8859-1 Latin1 encoding to process Web pages. In this example UTF-8 encoding use.
HTML Specify Character Set


Set Big5 encoding to serve the static page with traditional Chinese characters.

HTML Specify Character Set

Read More

Wednesday, 30 May 2018

Chaudhari Karan

HTML – Phrase Tags

By     No comments:

HTML – Phrase Tags

Hello friends, In this lecture, we will discuss HTML Phrase Tags.
HTML – Phrase Tags

The phrase tags used for specific purposes, it is displayed in a similar way as other tags like <b>, <i>, <pre>, and <tt>.

Emphasized Text

This tag is used for display the text as emphasized text. It is starting with<em> and ending with</em>.

Example:
HTML Emphasized Text


Output:
HTML Emphasized Text

Marked Text

This tag is used for display the text as marked with yellow ink. It is starting with<mark> and ending with</mark>.

Example:
HTML Marked Text


Output:
HTML Marked Text

Strong Text

This tag is used for display important text. It is starting with <strong> and ending with </strong>.

Example:
HTML Strong Text


Output:
HTML Strong Text

Text Abbreviation

This tag is used for abbreviate text which is put between <abbr> and </abbr>.

Example:
HTML Text Abbreviation


Output:
HTML Text Abbreviation

Acronym Element

The <acronym> element indicate the text between <acronym> and </acronym> tags is an acronym.

Example:
HTML Acronym Element


Output:
HTML Acronym Element

Text Direction

Text direction element is used for override the current text in Bi-Direction. It is starting with <bdo> and ending with </bdo>.

Example:
HTML Text Direction


Output:
HTML Text Direction

Special Terms

The special terms element is similar to italic words. It is starting with <dfn> and ending with</dfn>.

Example:
HTML Special Terms


Output:
HTML Special Terms

Quoting Text

The quoting text is starting with <blockquote> and ending with </blockquote> tags. The text put between these tags.

Example:
HTML Quoting Text


Output:
HTML Quoting Text

Short Quotations

This tag is used for add a double quote in the sentence. It is starting with<q> and ending with</q>.

Example:
HTML Short Quotations


Output:
HTML Short Quotations

Text Citations

This tag is used for rendering in italicized text. It is starting with <city> and ending with </city>.

Example:
HTML Text Citations


Output:
HTML Text Citations

Computer Code

This computer code element is presented in a monospaced font. It is starting with <code> and ending with </code>.

Example:
HTML Computer Code


Output:
HTML Computer Code

Keyboard Text

This keyboard element indicates what should be typed. It is starting with<kbd> and ending with </kbd>.

Example:
HTML Keyboard Text


Output:
HTML Keyboard Text

Programming Variables

This element is used in conjunction with the <pre> and <code> elements.  It indicates the content of the element is a variable.

Example:
HTML Programming Variables


Output:
HTML Programming Variables

Program Output

This element indicates output from the program and script. It is used for documenting programming or coding concepts. It is starting with <samp> and ending with</samp>.

Example:
HTML Program Output


Output:
HTML Program Output

Address Text

This tag contains an address. It is starting with <address> and ending with </address>.

Example:
HTML Address Text


Output:
HTML Address Text


Read More