Wednesday, 30 November 2016

BASIC THEORY

  •    What is a markup language ?
             ans - Markup languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file. The code used to specify the formatting are called tags. HTMLis a an example of a widely known and used markup language.

  • 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


  • DISPLAYING LINK

             <a href="http://www.w3schools.com">This is a link</a>

  • DISPLAYING IMAGE
    <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

  

  • DONOT FORGET ENDING TAG
           Some HTML elements will display correctly, even if you forget the end tag: LIKE              <P>  but  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.

  • Use Lowercase Tags

    HTML tags are not case sensitive: <P> means the same as <p>.
    The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demandslowercase for stricter document types like XHTML.

  • HTML HEADING  IS IMPORTANT 

Search engines use the headings to index the structure and content of your web pages.

Users skim your pages by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on

  •  HTML HEAD TAGS
The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta information, and more.
The following elements can go inside the <head> element:

  •  HTML HORIZONTAL RULE

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:

  •  HTML Display RULE

You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove any extra spaces and extra lines when the page is displayed:

  •  HTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:


USING  THIS TAG WE CAN DISPLAY THE WEB PAGE AS IT IS WRITEN IN HTML WITH SPACES AND NEW LINES .

  •  HTML Computer Code Elements
TagDescription
<code>Defines programming code
<kbd>Defines keyboard input 
<samp>Defines computer output
<var>Defines a variable
<pre>Defines preformatted text

  •  HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

  •  HTML COMMENT SYNTAX

You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
  •  Styling HTML with CSS

CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
  • Inline - by using the style attribute in HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:

Example

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS

An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »

External CSS

An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:

Example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  •  WHAT IS HTML SCREEN READER
A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.

  • Image Maps

Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:

Example

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Try it Yourself »

  • Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Try it Yourself »

  • WHAT IS THE DIFFERENCE BETWEEN ORDERED LIST AND UNORDERED LIST
 The difference is that UL is an unordered list and OL is an ordered list.

In an unordered list, the order of the list items is not significant. You can swap two items or reverse the whole list, and it still means the same thing.

In an ordered list, the order of the list items is important. If you change the order, the meaning of the whole list changes.

Example of an unordered list:

HTML Code:
<h2>List Types</h2>
<ul>
  <li>Definition list</li>
  <li>Ordered list</li>
  <li>Unordered list</li>
</ul>
It simply lists the three types of list elements in HTML. If I'd put 'Unordered list' first, it wouldn't change the meaning of the list as a whole.

Example of ordered list:
HTML Code:
<h2>Battery Replacement</h2>
<ol>
  <li>Open cover of battery compartment</li>
  <li>Remove old batteries</li>
  <li>Insert new batteries</li>
  <li>Replace cover</li>
</ol>
In this case, I cannot change the order of the list items without changing the meaning of the whole list.

  • HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: 

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Try it Yourself »

  • WHAT IS HTML noscript  TAG

 he <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts:

Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

  • The HTML <meta> Element

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
Define the character set used:
EXAMPLE
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
Try it Yourself »

  • HTML Entities
Reserved characters in HTML must be replaced with character entities.
Characters that are not present on your keyboard can also be replaced by entities.
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
To display a less than sign (<) we must write: (ENTITY NAME )&lt; or (ENTITY NUMBER) &#60;


  • Non-breaking Space
A common character entity used in HTML is the non-breaking space: &nbsp;
A non-breaking space is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.
Another common use of the non-breaking space is to prevent that browsers truncate spaces in HTML pages.

  • Combining Diacritical Marks
A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave (  ̀) and acute (  ́) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.
Diacritical marks can be used in combination with alphanumeric characters, to produce a character that is not present in the character set (encoding) used in the page.



M---------------------------------------------------


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)