(Approximate Time: ~ 1.5 hours)
HTML stands for Hyper Text Markup Language. It is a language of the World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web. HTML makes the text more interactive and dynamic. It can turn text into images, tables, links. HTML pages are saved by adding .html or .html in web page name.
|The element is an individual component of the HTML web page or document. It represents semantics or meaning. For example, the title element represents the title of the document.||It is the root of the HTML document which is used to specify that the document is HTML. For example, the Head tag is used to contain all the head element in the HTML file.|
Each tag has additional attributes that change the way the tag behaves or is displayed. For example, a <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.
Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags. But, they can never be in closing tags.
|A block-level element is drawn as a block that stretches to fill the full width available to it i.e, the width of its container and will always start on a new line.
Elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.
|Inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page.
Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.
To understand the code easily, you can add code comments to your HTML document. These are not displayed in the browser, but they help you in leaving notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!– and the end is marked by — >. Anything in the middle will be completely ignored, even if it contains valid HTML.
The list of HTML tags used to display data in the tabular form include:
|<table>||It defines a table|
|<tr>||This tag defines a row in a table|
|<th>||It defines a header cell in a table|
|<td>||This is used to define a cell in a table|
|<caption>||It defines the table caption|
|<colgroup>||It specifies a group of one or more columns in a table for formatting|
|<col>||This is used with <colgroup> element to specify column properties for each column|
|<tbody>||This tag is used to group the body content in a table.|
|<thead>||It is used to group the header content in a table|
|<tfooter>||It is used to group the footer content in a table|
The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:
The syntax of Hyperlink in HTML is:
There are many common lists used for design a page. You can choose any or a combination of the following list types:
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 <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.
The HTML iframe tag is used to display a nested webpage. In other words, it represents a webpage within a webpage. The HTML <iframe> tag defines an inline frame. For example:
An image map is used for linking many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to include as part of an image mapping.
No, hyperlinks can be used both on texts and images. The HTML anchor tag defines a hyperlink that links one page to another page. The “href” attribute is the most important attribute of the HTML anchor tag.
A style sheet is used to build a consistent, transportable, and well-designed style template. You can add these templates on several different web pages. It describes the look and formatting of a document written in the markup language.
HTML layout specifies a way in which the web page is arranged. Every website has a specific layout to display content in a specific manner. Following are different HTML elements which are used to define the different parts of a webpage:
Marquee is used for the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee>……</marquee> tag.
There are three tags that can be used to separate the texts:
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line,such as inside a paragraph. Whereas, a div or division element is block-line which is equivalent to having a line-break before and after it and used to group larger chunks of code.
The purpose of using alternative texts is to define what the image is about. During an image mapping, it can be confusing and difficult to understand what hotspots correspond to a particular link. These alternative texts come in action here and put a description at each link which makes it easy for users to understand the hotspot links easily.
You can create new elements for the document in the following way:
It can be also be used in the HTML as:
No, the <!DOCTYPE html> declaration is not an HTML tag.
There are many type of HTML, such as, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.
An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a “%” followed by hexadecimal digits.
An iframe is used to display a web page within a web page.
Target to a link:
The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.
Yes, we can create a multi-colored text on a web page. To create a multicolor text, you can use <font color =”color”> </font> for the specific texts that you want to color.
To make a picture a background image on a web page, you should put the following tag code after the </head> tag.
Here, replace the “image.gif” with the name of your image file which you want to display on your web page.
The span tag is used for following things:
White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces 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.
By using indents, you can keep the list elements straight. If you indent each sub nested list in further than the parent list, you can easily determine the various lists and the elements that it contains.
The key differences between localStorage and sessionStorage objects are as follows:
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.
To insert a picture into the background image, you need to place a tag code after the </head> tag in the following way:
Now, replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.
When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using <link/> tag within another HTML document.
If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
To change the text into a clickable link to send an email, you need to use the mailto command within the href tag. You can write it in the following way:
The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link. Whereas, others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.
The <br> tag is one way to separate the lines of text. There are other tags like the <p> tag and <blockquote> tag that are also used to separate sections of text.
By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.
Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50
The HTML Code for the above problem is:
The checkboxes don’t affect one another. But, grouping these checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.
If there is no text present between the tags, there is nothing to format. Therefore, no formatting will appear. Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.
The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. Also, if the size attribute is set to 0, the size will be set to the default size of 13 characters.
Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Similarly, If the border attribute is not included, a default 1-pixel border appears when the rules attribute is added to the <table> tag.
HTML SVG is used to describe the two-dimensional vector and vector or raster graphics. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
The button tag is used in HTML 5. It is used to create a clickable button within the HTML form on the web page. This tag creates a “submit” or “reset” button. The button tag code is as follows:
HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Some of the extensions supported by each media format are:
Cell Spacing is referred to as the space or gap between the two cells of the same table. Whereas, Cell Padding is referred to as the gap or space between the content of the cell and cell wall or cell border.
The differences between HTML and XHTML are:
There are three ways to include the CSS with HTML:
Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclose the text in the strong tag, it tells the browser that enclosed text is more important than other texts.
Physical tags are used to tell the browser how to display the text enclosed in the physical tag. Some of the examples of physical tags are <b>, <big>, <i>.
You can define a script block anywhere on the page, which will get executed as soon as the browser reaches that part of the document. This can be inside the <head> or <body> section of your document.
HTML has seen many updates over time, and currently, the newest HTML version is HTML5. HTML5 is of course still primarily a markup language, but it has added a plethora of features to the original HTML and has eradicated some of the strictness that was present in XHTML. The main difference between HTML and HTML5 can be that neither audio nor video is a constituent of HTML whereas both can be considered integral parts of HTML5.
Some advantages of HTML5 are:
HTML5 introduces several new elements and attributes that help in building a modern website. The following are great features introduced in HTML5:
With web storage, web applications can store data locally within the user’s browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
It can store 5 to 10 MB of data. That is far more than what cookies have. Web storage data is never transferred with HTTP request, so it increases the performance of the application. It also provides more space than what cookies offer so increasingly complex information can be kept.
There are two types of web storage in HTML5:
In HTML5, there are two types of graphics:
<svg>is a container for SVG graphics. SVG is used for drawing paths, circles, boxes, texts and graphic images.
<canvas>is a container for Canvas graphics.
<section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole.
Following are the main advantages of using SVG over other image formats:
The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the HTML5 features.
This tag represents a piece of self-contained flow content. It is mostly used as a single unit to reference the main flow of the document.
Below are the Media Elements that have been added to HTML5:
<audio>: For multimedia content, sounds, music or other audio streams.
<video>: For video content, such as a movie clip or other video streams.
<source>: For media resources, defined inside video or audio elements.
<embed>: For embedded content, such as a plug-in.
<track>: For text tracks used in media players.
The new Form elements made available in HTML5 all provide more functionalities. The tags provided to carry out these functionalities are:
<datalist>: It specifies a list of options for input controls. These options are pre-defined.
<keygen>: This tag defines a key-pair generator field.
<output>: It defines the result of a calculation.
audiotag in HTML 5?
This new tag allows you to deliver audio files directly through the browser, without the need for any plug-ins. The
audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, .wav, and .ogg. I have used five types of sound formats to show which formats are compatible for the browsers. A .wav file is a common sound format that is supported by most browser versions. The syntax is
<audio src="URL" controls>...</audio>
Some rules established for HTML5 include:
Types of web workers include Dedicated workers and Shared workers.
Dedicated web worker: A dedicated worker is accessible from the parent script that created it. It is simply tied to its main connection. It has wide browser support.
Shared worker: A shared worker can be accessed from any script of the same origin. It can work with multiple connections but has limited browser support: Chrome 4.0+, Safari 5.0+ and Opera 10.6+.
Web Workers work in the following three steps: First it should be executed on separate threads. Second it should be hosted in separate files from the main page. Finally, a Worker object needs to be instantiated to call them.
The Application Cache concept means that a web application is cached. It can be accessible without the need for internet connection.
Some advantages of Application Cache:
Yes, HTML5 can get the location of a user with the use of the Geolocation API. Use
getCurrentPosition() method to get the user’s current position.
A hyperlink is a text/image on a webpage, which when clicked redirects to a new web page.
Cookies have the following drawbacks:
send() method and receive data from server to browser by an on-message event handler.
fieldsettag in HTML5?
<fieldset> tag groups related form elements. It is like a box. In other words, it draws a box around related element. It must start with a
<legend> tag because the
<legend> tag defines the title of the field set. By using the
<fieldset> tag and the
<legend> tag, you can make your form much easier to understand for the users.
Sometimes a task is running within a program that might take a while to complete. A user-friendly program provides some information to the user that the task is happening. It also tells how long the task might take and how much the task has been done or completed. One of the best ways to show all these activities is with the Progress Bar control. In a simple way, the progress bar indicates the progress of a specific task. In HTML5, there is the element “progress” that displays the progress of a task. The Syntax is
<!DOCTYPE>? Is it necessary to use it in Html5?
<!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The
<!DOCTYPE> tag does not have an end tag and It is not case sensitive. The
<!DOCTYPE> declaration must be the very first thing in a HTML5 document, before the
<html> tag. As In HTML 4.01, all
<!DOCTYPE> declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). HTML5, however, is not based on SGML, it therefore does not require a reference to a Document Type Definition (DTD).
The three kinds of Doctypes available are: Strict Doctype, Transitional Doctype, and Frameset Doctype.
As defined in the HTTP spec, each request and response can have headers associated with it, and it’s through these headers that the server can tell the client what to cache and for how long. There are two modern HTTP response headers that define how a resource should be cached: Cache-Control and ETag.
<span> tag is used for grouping and applying styles to inline elements. It is mostly used for styling by using an
id or a
spantag and a
The difference between a
span tag and a
div is that a
span tag is an in-line tag and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a
div, division, tag is a block-level tag. This is equivalent to having a line-break before and after the tag. It is useful for grouping larger chunks of code.
spanneed a closing tag?
Span tag is a paired tag. This means that it has both an open (
<) and a closing (
>) tag and it is mandatory to close this tag.
meta tag is a tag in HTML that describes some aspect of the contents of a webpage. The information that you provide in a
meta tag is used by search engines to index a page so that someone searching for the kind of information the page contains will be able to find it. The
meta tag is placed near the top of the HTML in a webpage as part of its
meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
<meter> tag defines a scalar measurement within a known range or a fractional value. This is also known as a gauge.
The progress tag is used to represent the progress of the task while the meter tag is used to measure data within a given range.
<fieldset> tag can be used to group some of the form elements. When the purpose is to provide some HTML elements as a group to the user, the
fieldset tag is the best one to use. It takes another tag within it,
<legend>, which provides a title to the grouped elements.
Article is a HTML5 semantic element, similar to
<header>. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.
asidetag in HTML5?
aside tag represents a section of a page that consists of content that is tangentially related to the content around the
aside tag or it could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
wbrtag in HTML5?
<wbr>, or the Word Break Opportunity tag, specifies where in a text it would be okay to add a line-break. When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the
<wbr> tag to add word break opportunities.
Yes! To specify multiple classes, separate the class names with a space (e.g.
<span class="left important">). This allows you to combine several CSS classes for one HTML element.
onblur event occurs when an object loses focus. The
onblur event is most often used with form validation code (e.g. when the user leaves a form field). Note that the
onblur event is the opposite of the
flexboxin HTML 5?
flexbox is not a single property but a set of properties on the parent element and their children. Basically, the parent is a container. It is most likely a
div called a
flex-container and the children are the elements called the
frames allow multiple HTML documents to be present as independent windows within a main browser. They allow you to present two or more documents at once.
There are two types of frames based on their layout. The first is the vertical frame and the other is the horizontal frame.
The Mathematical Markup Language,
MathML, is a markup language to show mathematical and scientific content on the webpage. HTML5 allows us to use
MathML elements inside a document using
<math>...</math> tags. A mathematical expression must be inserted into the element
<math> with a specified namespace.
list-style-typeproperty is used on a non-list element like a paragraph?
list-style-type property is used on a non-list element like a paragraph, the property will be ignored and it does not affect the contents of the paragraph.
The usage of the different HTML5 semantic elements are described below:
<header>: It is mainly used to store and define the starting information about a web page section.
<article>: It is used to define a set of information which can be logically independent and can be described with respect to the concerned webpage’s business logic.
<section>: It mainly consists of a set of instructions that defines the basic structure and content of the page.
<footer>: This is used to hold a set of information that is getting displayed at the last portion of a webpage.
There are 3 commonly used list types in HTML5:
<ul>) — used to group a set of related items in no specific order
<ol>) — used to group a set of related items in a specific order
<dl>) — used to display name/value pairs such as terms and definitions
Cross-origin resource sharing (CORS) is a mechanism used to allow limited resources from another domain in a web browser. For example, when the user clicks on a HTML5 video player, it asks for camera permission. If the user allows permission, only then is the camera opened. Otherwise, the camera will not open for web applications.
HTML5 defines a new element to embed a video on the webpage using the
<video> tag. An example would be
<video width=”500″ height=”300″ controls><source src=“video1.mp4″ type=“video/mp4″></video>.
HTML5 defines a new element to embed an audio on the webpage using the
<audio> tag. An example would be
<audio controls><source src=“audio.mp3″ type=“audio/mpeg”></audio>.
formtag used in HTML5?
<form> tag is used for creating a form for user input. A form can contain textfields, checkboxes, radio-buttons, and more. Forms are used to pass user data to a specified URL.
<form> tag in HTML5 is used to create an user input form. There are many elements which are used within a form element. For example:
actionin a form tag?
action attribute is used to inform the browser what the webpage (or script) to call when the “submit” button is pressed.
Data Listin HTML5?
<datalist> tag specifies a list of pre-defined options for an
<input> tag. The
<datalist> tag is used to provide an “autocomplete” feature on the
<footer> tag specifies a
footer for a document or section. A
<footer> element should contain information about its containing element. A