HTML-CSS HelpDesk

HTML is short for HyperText Markup Language, and is the language of the World Wide Web. It is the standard text formatting language used for creating and displaying pages on the Web. HTML documents are made up of two things: the content and the tags that formats it for proper display on pages.

Content is placed in between HTML tags in order to properly format it. It makes use of the less than symbol (<) and the greater than symbol (>). A slash symbol is also used as a closing tag. For example: sample

No, there are single HTML tags that does not need a closing tag. Examples are the tag and tags.

Comments in html begins with “ ”. For example:

No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.

Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.

White spaces are blank sequence of space characters, which is actually treated as a single space character in html. Because the browser collapses multiple space into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the html code into a much more readable format.

To insert the copyright symbol, you need to type © in an HTML file.

By using indents, you can keep the list elements straight. If you indent each subnested list in further than the parent list that contains it, you can at a glance determine the various lists and the elements that it contains.

Every web page on the web can have a separate web address. Most of these addresses are relative to the top-most web page. The published web address that appears within magazines typically points this top-most page. From this top level page, you can access all other pages within the web site.

When you use image maps, it can easily become confusing and difficult to determine which hotspots corresponds with which links. Using alternative text lets you put a descriptive text on each hotspot link.

You can specify a border color using style sheets, but the colors for a table that does not use style sheets will be the same as the text color.

No. The tag can accept only a single href attribute, and it can point to only a single web page.

A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the and tags.

No. The tag is only one way to separate lines of text. Other tags, like the tag and tag, also separate sections of text.

Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

Yes, HTML supports JavaScripts. We can use JavaScript anywhere in the HTML Coding. Mainly there are four sections where we can add JavaScript in HTML. 1. Head Section : We can add JavaScript in Head section of HTML. …..Javascript…. 2. Body Section : ….. Javascript… 3. Head and Body both : We can add Javascript in both head and body section. and …..Javascript…. 4. External File : Script in and external file and then include in ….. section.

Following are the New Media Elements are present in HTML5: 1. >audio video source embed track< tag : For text tracks used in media players.

In HTML we can list the element in two ways: 1. Ordered list : In this list item are marked with numbers. first item second item Display as: 1. First item 2. Second item. 2. Unordered Lists : In this item are marked with bullets. first item second item Display as: – First item – Second item.

SPAN : Used for the following things: 1. Highlight the any color text 2. For adding colored text 3. For adding background image to text. In this page we use span.

Doctype tag is not a HTML tag, it is just an instruction that is passed to the web browser to check for the information that is being provided by the markup language in which the page is written. Doctype is sometimes referred as Document type definition (DTD) that describes some rules that has to be followed while writing the markup language so to make the web browser understand the language and the content correctly. Doctype is very important to be placed in the beginning of the HTML and before the tag to allow easy rendering of the pages that are used.

Metadata is the data about the data or the information about the data. There is a tag that is being provided for the HTML document. This information won't be displayed anywhere and will not be visible to the user. It will be parsable by the machine which will parse it according to the requirement. It consists of the elements that are related to the page description, keywords, document related element. The tag that is being used resides in the section in HTML. The meta information is being used by the web browser or by the search engines to rank and let the user find the pages easily.

Canvas is an element that is used for the graphics for the web page. It uses JavaScript to bring the graphics functionality live. It allows easy way to draw the graphics and use different types of tools to create drawing on the web page. Canvas is just a rectangular area that controls the pixel of every element that is used in the web page. Canvas uses methods like paths, circles, etc. The canvas element will be used as follows: The canvas element includes id, width and height settings and with the javascript it gets used like: var c=document.getElementById("can"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);

Iframe is called as inline frame that places one HTML document in a frame. It is different from the object element as the inline frame can be made in the target frame. The target frame consists of the links that is defined by other elements used in the web page. Iframe is used to focus on printing or viewing of the source. Iframe can be used by the user in those browser that supports it. If they have used iframe also then the incompatible browser won't display the actual but display of the alternative text will take place. Syntax: —–

"pre" tag defines the pre-formatted text that is used to display the text with the fixed width and uses a predefined fonts and it keeps both spaces and line breaks separate and show the text as it is. The code that can be used to display the text that can be written in whatever way the user wants is as follows: Text in a pre element —-// is displayed in a fixed-width font, and it preserves both spaces and line breaks

Tables can be made nested by making it come in another table. This consists of many attributes and tags that can be used in nesting the tables. this is the first cell this is the second cell this is the first cell second table this is the second cell of second table

Getting framed refers to the document that is being displayed in someone else's frameset in your HTML. This will be password protected and the permissions has to be taken before inserting the frameset. The framing of the document can be avoided by using TARGET=_top applied to all the links that will lead to the document that are outside the scope of a particular user without permission. A javaScript can be used that will automatically handle the request to remove the existing framesets. This can be given as: if (top.frames.length!=0) { if (window.location.href.replace) top.location.replace(self.location.href); else top.location.href=self.document.href; }

One frameset can be defined inside another frameset if the accessing permission are provided directly. The frameset can be stored by using the JavaScript in the document that is being written by the user and the script is as follows: if (parent.location.href == self.location.href) { if (window.location.href.replace) window.location.replace('frame.html'); else // causes problems with back button, but works window.location.href = 'frame.html'; }

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML tag is not used for bold statement as well as tag is used for italic. Instead of these we use and tags.

Marquee is used to put the scrolling text on a web page. You should put the text which you want to scroll within the …… tag.

HTML elements with no content are called empty elements. For example: , etc.

Following is a list of 10 important new elements in HTML 5: Color Date Datetime-local Email Time Url Range Telephone Number Search

No. Almost all browsers (updated versions) support HTML 5. For example: Chrome, Firefox, Opera, Safari, IE etc.

HTML 5 supports three types of video format: mp4 webm ogg

The progress tag is used to represent the progress of the task only while the meter tag is used to measure data within a given range.

The figure tag is used to add a photo in the document on the web page.

The button tag is used in HTML 5. It is used to create a clickable button within HTML form on the web page. It is generally used to create a "submit" or "reset" button.

The HTML 5 datalist tag provides an auto complete feature on form element. It facilitates users to choose the predefined options.

There are three ways to integrate CSS into a Web page 1) Inline : HTML elements may have CSS applied to them via the STYLE attribute. 2) Embedded : By placing the code in a STYLE element within the HEAD element. 3) Linked/ Imported : Place the CSS in an external file and link it via a link element.

The reasons for this are as follows: 1. It increases the legibility of the style sheets. The background property is a complex property in CSS. If it is combined with color, the complexity will further increase. 2. Color is inherited, but background isn’t. This can further increase the confusion.

1. External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents. 2. Using this the entire site can be formatted and styles just by editing one file. 3. The file is linked with HTML documents via the LINK element inside the HEAD element.

The advantages of External Style Sheets are: 1. Using them, the styles of multiple documents can be controlled from one file. 2. Classes can be created for use on multiple HTML element types in many documents. 3. In complex situations, selector and grouping methods can be used to apply styles. The disadvantages of External Style Sheets are: 1. In order to import style information for each document, an extra download is needed. 2. Until the external style sheet is loaded, it may not be possible to render the document. 3. For small number of style definitions, it is not viable.

The advantages of Embedded Style Sheets are: 1. It is possible to create classes for use on multiple tag types in the document 2. Under complex situations, selector and grouping methods can be used to apply styles. 3. No extra download is required to import the information. The disadvantages of Embedded Style Sheets are: 1. It is not possible to control the styles for multiple documents from one file, using this method.

The advantages of Inline Styles are: 1. It is especially useful for small number of style definitions. 2. It has the ability to override other style specification methods at the local level. The disadvantages of Inline Styles are: 1. It does not separate out the style information from content. 2. The styles for many documents can not be controlled from one source. 3. Selector grouping methods can not be used to handle complex situations.

This can be done by specifying the border property for linked images in your CSS as none: For Example: a img { border: none ; }

1. Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply. 2. It can also be referred to as a link between the HTML document and the style sheet. 3. It is equivalent of HTML elements. Example: A {text-indent: 12pt} Here, the selector is A, which is called as type selector.

1. It is the short form for in-betweening. 2. It is the process of generating intermediate frames between two images. 3. It gives the impression that the first image has smoothly evolved into the second one. 5. In CSS3, Transforms(matrix,translate,rotate,scale etc) module can be used to achieve tweening.

1. RWD is the abbreviation for Responsive web design. 2. In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.

1. A web page with large number of images takes a longer time to load. This is because each image separately sends out a http request. 2. The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request and hence the loading time.

External style sheet are made up of css format only, it contains style information that can be linked with the HTML document externally. It is one of the easy and structured way as it keeps the style separate from the structure. It is a convenient way as only one file will be affected if any changes will be made overall. The file is linked through Link tag used inside the HTML Head.

CSS consists of two types of CSS rules, first is for ruleset which identifies the style and the selector. It combines the style and the selector. 1. Ruleset is a combination of CSS rules, For Example : h1{text-color: 15pt;}, where this is the CSS rule. 2. Ruleset is selector + declaration For Example : h1 + {text-color: 15pt;}

Class selectors are the selectors which are stand alone to a specific style that is declared. Class attribute can be used to declare the style and make an association with any HTML element. The syntax for creation of class selector is: .classname. The name can be from a-z, A-z or in digits. The example code is shown as below: .head{font: 12em;}, this is a class selector this is the class that is associated with the element .

1. Class selector can be given to an overall block. This is sometimes termed as block element as well, whereas ID selector identifies a unique name and a style for a specific element. 2. ID selector declares the style for only one particular element which can be differentiated from other element, whereas Class selector is being given for the whole complete block. Example of ID selector is being written like this: #idname {color: red; background: black;} This can be used in HTML as: this element only will be affected by the use of this ID element

Contextual selector specifies a specific occurrence of an element. It is combination of many selectors that are separated by white spaces. In this only the element that matches the specified element will be used not all the elements. For example the syntax of it is being given as: TD p code {color: #000000} The element which is being defined as code will only be displayed as red as its color is being mentioned as red. But this is being done only if it occurs in the p text. TD p code, h1, em {color: red} The element code and em will only be displayed in red only when it occurs in h1 or p.

Parent-child selector represents the direct relationship between parent element and child element. It is been created by using two or more (~) tilde separated selectors. Example: Body ~ p {background-color: red; text: #FF00FF;} Here the p element gets declared for a specific element and style only that element but if it has some child element then those elements will also get styled. One more example to show the parent-child relationship as: Body ~ p ~ em {background-color: red; text: #FF00FF;}

Important declarations are those declarations which have high weightage then normal declarations. These declarations override other declarations of less importance while executing. If suppose there are two statements from two users and both consist of important declaration then the one of the users declaration will override the another users declarations. Body {background: #FF00FF !important; color: grey} In this body background has more weight than the color.

There is a provision to include one or more declaration in a selector by using the semicolon as this shows the separation of the properties. Selector {declaration1; declaration2} P {background: white; color: black}

Class is a group of attributes and properties that uniquely identify style that can be attached to any element. It also defines instances for different element to which the same style can be attached. The following example shows the use of class in CSS: P {color:red} : It will display text color red in all paragraphs. This can be included with each element where the paragraph tag can be used. There can be given one style to one paragraph and another style to other paragraphs. A class may not have any association with the specific element. But any element with which the specific class is attached will have the same style. For Example: CSS: H1.prop1 {color: red} /* one class of P selector */ H2.prop2 {color: blue} /* another class of P selector */ .prop3 {color: green} /* can be attached to any element */ HTML: This paragraph will be red This paragraph will be blue This paragraph will be green This list item will be green

Pseudo elements allow the use of the part of element and not the element itself. They are applied to block level element, which is used for the complete block for which the CSS is being written. This allow the subpart of an element to be styled like paragraphs and headings. For example: selector:pseudo-element {property:value;} p: first-line {text-transform: lowercase;} It adds the style to the first line of the code in the paragraph.

1. Inline elements don’t have line breaks. An Inline element doesn’t have elements to set width and height. For Example: em, strong, etc. codes are few examples of inline elements. 2. Block elements do have line breaks and they define the width by setting a container. It also allowed setting height. It can contain the elements that occur in inline elements. For Example: width and height max-width and max-height min-width and min-height hi (i=1-6)- heading element p- paragraph element.

Although, there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.

A catalog of directions within braces consisting of property, colon and value is called declaration block. Example: [property 1: value 3]

They are: Font-style Font-variant Font-weight Font-size/line-height Font-family Caption Icon

Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax: @import notation, used with tag.

While making the float declaration, 1 pixel is added every time it is used in the form of the border, and even more float is allowed thereafter.

In CSS, you cannot revert back to old values due to lack of default values. The property can be re- declared to get the default property.

This box defines design and layout of elements of CSS. The elements are: Margin: the top most layer, the overall structure is shown Border: the padding and content option with a border around it is shown. Background color affects the border. Padding: Space is shown. Background colour affects the border. Content: Actual content is shown.

Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors. Only the last element of the pattern is addressed in this kind of selector. For Example: TD P TEXT {color: blue}

Dimension properties can be defined by: Height Max-height Max-width Min-height Min-width Width

By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties.

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

In case the component fails, it will continue to work properly in the presence of a graceful degradation. The latest browser application is used when a webpage is designed. As it is not available to everyone, there is a basic functionality, which enables its use to a wider audience. In case the image is unavailable for viewing, text is shown with the alt tag.

@import is preferred only at the top, to avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. In C, the # is a prominent example of a @import being at the top.

Alternate Style Sheets allows the user to select the style in which the page is displayed using the view>page style menu. Through Alternate Style Sheet, user can see a multiple version of the page on their needs and preferences.

A style, that helps in influencing CSS. E.g. FONT. They have corresponding values or properties within them, like FONT has different style like bold, italic etc.

Rule, which is applicable in the entire sheet and not partly, is known as at-rule. It is preceded by @ followed by A-Z, a-z or 0-9.

Properties can be a set in recommended places and the document modified for CSS to mix with user’s personal sheet.