Posts

Showing posts with the label Internet & Web Designing

How to create a simple form using HTML?

From is a necessary element in any website or blog. Mostly they are used to take user information for any of the purposes like logging into the user account, creating user account, allowing to subscribe malling list, allowing users to submit comments and allowing users to contact website admin, support or sales team. Here I am going to describe "How to create a simple form using HTML" step by step with describing what is a form and what elements are used to create HTML form along with complete HTML code for a form. A form is an area that contain form elements. You must set up a form before adding in run to the web page. To setup a form, you need to specify two important information Method and Action. Method is a property tells the form how to transfer the data to the form processor. The value for method can be 'post' or 'get' In post method you are just posting information and method get means that you are just going to get another page. In almost all of the ...

How to Load External JavaScript Asynchronously or Dynamically

JavaScript makes more easier to manipulate websites, now a days most of the browsers supporting JavaScript codes. When the HTML parser encounters a <script> element, by default, run the script before it can parsing and rendering the document. It is not much problem for inline scripts but if the script source code is in an external file specified with a src attribute, the portions of the document that follow the Script will not appear in the browser until the script has been downloaded and executed.This makes loading of the website much slower, which makes bad user experience for your website and may not also indexing of your website by the search engines. This Synchronous or blocking script execution is the default only. The <script> tag can have defer and async attributes, which cause scripts to be executed differently. This makes your website loading much faster than before and appears contents of your site by loading at first. Loading JavaScript Asynchronously using as...

How to Add Multiple Slideshows on One Page Using Javascript

Image
Most of our visitors asked "How to Add Multiple Slideshows on One Page Using JavaScript" by commenting on different previous posts for JavaScript slideshow and going to write this post about to add multiple slideshows on the same page. Using this script you can add number of slideshows on single page as your requirements.  Multiple Slideshows on One Page Using JavaScript To make multiple slideshows, at first you have to make variable lists for each slideshows and have to create new slideshow using function slideshow( ). Here I have created two slideshows with variables SlideList1 and SlideList2 and uses function slideshow with parameters slideList, image, speed and name. You can create number of new slideshows using this function below using new keyword. i.e. var slideshow1=new slideshow(slideList1, 'slide1', 3000, 'slideshow1'); function SlideShow(slideList, image, speed, name) { this.slideList = slideList; this.image = image; this.speed = spee...

How to create fade effect image slideshow using CSS

Image
You can give fade effect animation for image slideshow using CSS. @keyframes 'at' rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes 'at' rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties. Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play. Simple fade effect image slideshow    Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser. <style type="text/css"...

How to make rounded corners border using CSS

Image
While designing website, website template or blog template, you may want to make buttons, menus, paragraphs or any others border corners rounded to make your template more beautiful and attractive. It is possible by using a keyword "border-radius" in CSS. The keyword border-radius is used to make all the corners rounded by specifying the radius of corner. For example you can use the following CSS code. border-radius:10px;                     // makes radius of all the corners 10px; You can also specify the radius for each corners by using border-radius-top-right, border-radius-top-left, border-radius-bottom-right, border-radius-bottom-left keywords. For example you can use the following CSS code to make each corner rounded. border-radius-top-right:10px; border-radius-top-left:10px; border-radius-bottom-right:5px; border-radius-bottom-left:5px; The above code makes radius of left and right cor...

How to Create Custom CSS Template for Printing

Image
Along with the development of web technologies and web programming languages, web designing becoming more complex and the websites more flexible and user friendly. With the invention of CSS technology, web designing and programming becoming more easier than ever. By using cascading style sheet (CSS) and its properties, you can give custom design to your website for different medias like screen, print, tv and for different screen sizes. The CSS @media property allows you to do such task. Today I am going to describe "How to create custom CSS template for printing". Designing Custom CSS Template for Printing If you wanted to allow your website visitors to print the content of your website, you can design custom template for printing using CSS. You can define which part or your website will be printed or not and can add page setting for printing. Here is a sample CSS code for website template. body{ background:#00aaff; font-color:#00000; font-size:16px; } h1...

How to Create Responsive Website or Blogger Template

As the time goes, browsing websites from desktop computers decreasing and using Laptops, Tablets and Mobile devices increasing day by day. So why not to create our website design custom for each types of devices, that fits and looks more attractive for those devices to acquire the visitors entered from those devices. Responsive web design is the approach that suggests in which design and development should respond user behavior and environment based on the size of the browser screen, platform and orientation. Responsive web design includes the use of flexible layouts, images and intelligent use of media queries. You can make your blogger template responsive by using special tags in CSS. Media queries (@media) are such tags, which helps to make your CSS for every device screen size. You can make many media queries on CSS that matches for each screen size and you can put custom CSS codes for each media queries. Here I have explained some steps for creating your blog responsive. Step1: Ad...

How to Create Simple Blogger Template Easily?

To create successful blog, it needs to create blogger template more attractive and looks more professional. Even you can buy professional blogger template on the web, you may want to create blogger template by yourself for your blog. Creating a professional blogger template is more challenging task, but if you have some knowledge on HTML, XML, CSS and JavaScript , it is possible to create professional blogger template easily by yourself. In this series of tutorial, I am going to teach you basic to advanced steps to create blogger template. Today I am telling you "steps for creating a simple blogger template" with describing basic elements and along with its corresponding style sheet codes. Step1: Preparing demo blog for creating blogger template To test blogger template you have created, at first you need to set up a blogger blog and have to add some posts on the blog. To create a blog, go to blogger home page , log in using your Google user name and password and then click ...

Solved Objective Questions of CSS set-4

Image
1. In CSS filters, ........................... will be used to create a shadow of object at the specified horizontal and vertical offset and color. A) Drop shadow effect B) Chroma filter C) Shadow object effect D) Shadow filter 2. ............................. will be used to create attenuated shadow in the direction and color specified. English: graphic of the main CSS table spaces (Photo credit: Wikipedia ) A) Drop shadow effect B) Chroma filter C) Shadow object effect D) Shadow filter 3. State whether the statements are true or false. i) Glow effect will be used to create a glow around the object. ii) The two parameters used in glow effect are color and intensity. iii) Invert effect will be used to create a negative image A) i-true, ii-true, iii-true B) i- true, ii-false, iii-true C) i-false, ii-true, iii-true D) i-false, ii-false, iii-true 4. Which of the following are the parameters used in wave effect of CSS filter property? i) add        ii) freq ...

Solved MCQ of CSS set-1

Image
Cascading Style Sheet (CSS) (Photo credit: Wikipedia ) 1. Which of the following are the advantages of CSS ? i) CSS saves time ii) Page load faster iii) Easy maintenance iv) Multiple compatibility A) i, ii and iii only B) ii, iii and iv only C) i, ii and iv only D) All i, ii, iii and iv 2. A CSS style rule is made up of three parts which are .. i) Selector ii) Property iii) Value iv) Attribute A) i, ii and iii only B) ii, iii and iv only C) i, ii and iv only D) All i, ii, iii and iv 3. Which is not the selector type of CSS? A) Type selector B) Universal selector C) Local selector D) Descendant selector 4. The correct example of class selector is . A) h2.type1 {color: #000000;} B) h2 type1 {color: #000000;} C) h2 #type1 {color: #000000;} D) #h2 type1 {color: #000000;} 5. CSS comments are inserted inside . A) //...................// B) <!..................> C) /*..................*/ D) All of the above 6. We can handle old browsers by placing CSS codes ...

Solved MCQ of Internet and HTML set-3

1. ................ are the physical meeting points of backbones. A) Gateways B) Pathways C) Routers D) Domains 2. WSFTP is an example of ........................... program. A) FTP B) Telnet C) Web browser D) Mail 3. Which of the following is best suitable for remote administration of a computer? A) Telnet B) WAIS C) Browsers D) HTML 4. The leading bit pattern of class B network is .................. A) 0 B) 10 C) 110 D) 11 5. The ...................... attribute adds space within each cell. A) CELL SPACING B) CELL PADDING C) WIDTH D) ALIGN 6. Which of the following are two popular protocols that allow home computer users to connect their computers to the internet as per hosts? i) SLIP ii) PPP iii) HTTP iv) SMTP A) iii and iv B) ii and iii C) i and ii D) ii and iii 7. A computer that translates ........................ of another computer into an ............... and vice versa, upon request is known as DNS server . A) Domain name an...

Solved MCQs of XML set - 1

1. XML stands for ...................... A) Extensible Markup Language B) Eccessive Markup Language C) Executive Markup Language D) Extensible Managing Language 2. The XML format has a simpler set of ........................ than HTML. A) loader rule B) parsing rules C) generator rule D) logical rule 3. All information in XML is ..................... A) Unicode text B) multi code C) multi text D) simple text 4. An entity in XML is a ................................ A) class B) logical information C) simple information D) flexible information storage unit 5. A tool for reading XML documents is popularly called a ..................... A) XML delimiters B) XML processor C) XML parser D) Both b and c 6. XSL stands for A) Extensible Style sheet Language B) Extensible Style Language C) Exclusive Stylesheet Language D) Exclusive Style Language 7. XML tabs are ............................. A) case sensitive B) case insnesitive C) easy D) deficult 8. In XML the attribute value must always be qu...