Category Archives: HTML5

What Is a HTML Wrapper?

[ad_1]

I have content that needs to be embedded in a HTML wrapper. What is that? How can I possibly do this? An HTML wrapper merely refers to a very basic empty HTML page. You would typically enter your embedded content within the body of a HTML wrapper then publish your page to see the embedded content in a typical HTML format.

It’s easier to manipulate and modify an HTML page using an HTML editor such as Dreamweaver or Kompozer, but you can also create the HTML wrapper for your content using a simple text editor.

1. Open a text editor such as notepad.

2. Paste the following into the text editor minus the [ ] symbols.

[html]

[head]

What Is a HTML Wrapper?

[/title]

[/head]

[body]

[/body]

This is very basic. You’ll want to add a title between the What Is a HTML Wrapper? and [/title] tags. You most likely will want to add a metatag in between the [head] and [/head] and tags as well. (Go to http://www.w3schools.com/tags/tag_meta.asp for more information on metatags).

Your content will be pasted in between the [body] and [/body] tags. This will allow your content to be displayed on the webpage. If you want to center the embedded content add a [center] tag just before the embedded content. The centering will still work without the closing tag, but it is a good practice to include it anyway.

For example:

<center>content that is centered.</center>

Once you are through you will want to save your text editor file as a HTML file. If it is to be the main page of your site naming it index HTML is standard. This is a very basic example and there are other ways to go about this.

The basic HTML wrapper is cross platform compatible and easy for even beginning HTML scriptors to master.

[ad_2]

Source link

The 3 Most Important Web Languages to Learn

[ad_1]

I have often been asked which web languages someone with no prior experience in coding, scripting, or programming should learn, and in what order. So I’ll start by giving the three most important web languages in use today, and then go on and introduce other languages that would be helpful to know once you have the basics down.

1. (X)HTML. HTML (Hypertext Markup Language) is the primary markup language of the web, and is used to build and structure web pages. Everything you see that is not styling or animation is primarily built using HTML. I’m referring here specifically to text, tables, and forms.

There are several forms HTML can commonly take: HTML 4.01 Strict or Transitional, XHTML 1.0 Strict or Transitional, and HTML 5. XHTML (Extensible Hypertext Markup Language) is really just the union of HTML and XML, and is very similar in its markup to HTML, but is designed with XML’s extensibility (and strictness) in mind. As a small example, while an HTML 4.01 image or break tag would not need a trailing slash, an XHTML image or break tag would need a space and trailing slash before the tag is closed. This is because in XHTML, every tag that is opened must be closed, even if it is an empty tag.

The difference between using Transitional or Strict for both HTML and XHTML depends largely on how well you write your code. If it is written using strict rules (and no legacy HTML from the olden days) and validates under this configuration, then it can be Strict, and will be more compliant and standardized. Otherwise, if it’s imperfect or contains some legacy HTML, it would be Transitional, so it can still be validated and the browser can know how to handle it.

At some point in the evolution of these web markup languages, there was a question of what form the future would take: XHTML 2.0 or HTML5. HTML5 was being developed by individuals from Apple, Opera, and Mozilla, while XHTML 2.0 was being developed by the World Wide Web Consortium (W3C). Somewhere along the way, HTML5 won out on being the next standard for the web. Today, HTML5 is not yet fully compliant (not until about 2014), but it is where the web is heading.

So with all these choices for HTML, what should you choose to learn first? I would suggest learning either (or both) HTML 4.01 or XHTML 1.0 first, and then go on to HTML5 if you want all the exciting new features it has. Be warned, however, that HTML5 is not fully compliant, and older browsers, especially Internet Explorer, don’t like it.

2. CSS. CSS (cascading style sheet) is a style sheet language that gives an HTML document good looks. It defines the presentation of a web page. When we refer to CSS, we’re referring to colors, background images, text fonts and sizes, and element positioning and size. Well-written web pages use HTML for structure and content only, and CSS for presentation. It allows different stylesheets to be used on the same web page for different reasons: accessibility (screenreaders), mobile devices, print media, and many other reasons. One web page can look very different depending on which stylesheet is used. Have a look at CSS Zen Garden to see this aspect of CSS in action; the HTML remains the same but the design changes depending on the stylesheet selected.

Like HTML, there are a couple of different forms (called levels) CSS can take: CSS2 (and 2.1) and CSS3. Both are very similar at the core, but CSS3 goes hand-in-hand with HTML5. Thus, though it has some great new features (like rounded corners, gradients, and shadows), some of these features are not fully compliant. Therefore, choosing what to learn in CSS is less about choosing a level and more about choosing rules and properties that are compliant to the browsers of your target audience, and Internet Explorer or older browsers are usually a large part of that audience.

3. And now we get to #3, where I must ask you why you want to learn these web languages. The third web language to learn depends on whether you want to build dynamic web pages and web applications (and become a web developer) or whether you want to design web sites (and become a web designer). Whichever path you choose, you’ll need HTML and CSS. If you wish to be a designer, and put web development on the back burner for now, I would suggest moving on to JavaScript/jQuery. But if you wish to develop dynamic sites, I would suggest going on to PHP and catching up with JavaScript/jQuery later; just know that if you go the PHP route, you will probably want to get around to JavaScript/JQuery at some point. So on to #3.

3a. JavaScript/jQuery. JavaScript is a client-side scripting language that allows animations and user interaction with the web page. Think gallery slideshows, form validation, annoying popups, tabs, tooltips, etc. You need HTML and CSS for all this, of course, but JavaScript gives it life.

JQuery, on the other hand, is not a language, but rather a JavaScript library. It’s simply a way to simplify client-side scripting. What would take JavaScript lines and lines of code, jQuery does in a few lines of code. Their motto, “Write Less, Do More”, is very true. Depending on how much you want to do or how thoroughly you want to understand JavaScript, you could easily learn just jQuery and forget all about JavaScript. There are also many tools and plugins for jQuery that simplifies the process even more, and makes learning a whole new language a less daunting experience.

3b. PHP/MySQL. When you get into PHP (PHP: Hypertext Preprocessor, originally stood for Personal Home Page), you’re no longer writing client-side code; you are now writing server-side code. PHP is a server-side scripting language that allows a user to no longer just interact with the web page, but now allows him or her to interact with the server. Coupled with MySQL, PHP allows communication with a database, where records can be created, stored, and retrieved. PHP is embedded in documents with a.php extension, but is used within HTML. So even though a file may have a.php extension, it could still work like an HTML page without PHP, or it could be used as an HTML page with embedded PHP.

Like HTML and CSS, there are different versions of PHP. Which version you choose to use depends mostly on which version the server supports. PHP5 is currently the best version, though some code that was allowed in older versions is not allowed in PHP4 or PHP5, though it’s just as well since most of these codes were security weaknesses.

There are also a couple of different ways of programming PHP: OOP (object-oriented programming) and procedural. OOP programming (introduced in PHP3 and improved in PHP4 and further changed in PHP5) borrows object-oriented methods used by other programming languages (like Java, Perl, and C++) and uses them in PHP, and helps to cut down on the amount of code used (by making code reusable). Procedural programming is mostly old-school since it is less efficient, but it may be a little easier for beginners to understand.

And what’s next? If you took the route of JavaScript/jQuery, the next language to learn would be PHP; and if you took the route of PHP, the next language to learn would be JavaScript/jQuery. After you have all of these languages under your belt, then it would be time to fuse JavaScript/jQuery and PHP with AJAX (Asynchonous JavaScript and XML). AJAX is not a language, but rather a set of technologies or methods that use JavaScript to interact with PHP, allowing a user to interact with a web server without using page reloads. AJAX is used in searching (such as when a list of suggestions appear when you’re typing), forms (again, suggestions, or checking with the server if a username is taken, or populating a dropdown list depending on previous user choices), and many other applications. It’s simply a really cool way to bring all of these languages together to create a dynamic, user-friendly application.

So those are my suggestions as to which web languages to learn when starting out, and in which order. It may seem like a lot, and for some people it may seem like too much, but I have found that learning a web language is just like learning a foreign language. Fluency comes with practice and usage, and the more languages you know, the easier it is to learn another one.

[ad_2]

Source link

Landing Pages – How to Create a Free Landing Page

[ad_1]

Are you starting out with a string budget? Have no experience building webpages? You know you need your own landing page, squeeze page or opt-in page. But if you don’t have the money in your budget to pay for it, and need to do it yourself, where do you begin? I’ll give you simple step-by-step instructions to walk you through the process using a neat little site called BlinkWeb. You can do this with no technical experience whatsoever and best of all…it’s FREE!

Sign-Up for Your FREE Account

Simply go to BlinkWeb.com and sign up for your free account. Then there will be a button that says ‘Create a New Site.’ Click on it. BlinkWeb is a place where you can create free websites. So, they give you different options as to the type of site you want to create. In this case you’ll choose the salesletter style for your landing page.

The next step is entering a title for your landing page. Of course it should be pertinent to your offer. It’s even better if your title contained keywords relating to your site. This in essence is the domain name of your site.

Creating the Landing Page

After you name the page, you’ll be taken to the page builder. There are four boxes on the left-hand side:

Editor Tools

Widgets

Layouts

Pages

Editor Tools and Widgets are basically drag and drop menus. You can choose where to place your title, paragraphs, images and videos. You decide the order. To keep it simple you can being with a title box (which is your headline), then follow with a short paragraph. Make sure to really convey the benefits because this is going to capture your customer’s attention.

I’d also suggest you either have a quality image or video on your page. People are visual and giving them something to look at will increase your conversion rate. For image and paragraph choose image/paragraph under Text Tools. For video and paragraph choose video/paragraph under Video/Images.

Cool Tools

Here’s something really cool. Under Widgets, there’s a section called Sales Pages. It makes it really easy to incorporate bullet points–which is the check list. And there’s also a testimonial box. All the work has been done for you. Simply choose the tool and type in your text.

Under layouts you select the template you’d like for your site. Remember a plain white background is best.

Now for the most important part. The Opt-in Box. The tool you need is Custom HTML and it’s located under the Advanced section in Widgets.

Note: You will need a account with a contact management company such as Constant Contact or AWeber for this to work.

Simply create the actual opt-in box with whatever software you use. Then copy the HTML code that’s generated and paste it in the Customer HTML box on BlinkWeb. You will have an opt-in box right on your landing page and all the names and email addresses of your customers will be collected. No need to export information, it goes directly to your contact management software.

Be sure to view your page before you publish it. Check the spacing and make sure everything is “above the fold.” For more tips regarding copywriting, landing pages, opt-in pages, visit the website. Learn more secrets that top internet marketers use to set their business apart from the masses.

[ad_2]

Source link

Presentation Layer in Website Design

[ad_1]

As we are all aware, there are always two sides of every website design. The visual side that all users see with all the graphic elements, buttons, pictures and the side behind it, which is the code that is responsible for the functionality of the website. How to achieve the balance?

The enabling side does not contain only one type of code, but it encompasses different ones. First off all it is HTML code, which creates a framework in which to embed CSS (Cascading Style Sheets) or programming languages such as PHP. In other words HTML is used to structure the content on the page, while CSS allows treating your website content and its style separately and programming languages communicate instructions to the computer.

HTML itself does not power such effects as drop down menus or carousels. There is a code which is expressively dedicated to the user interface while other code is used to process data and connect to database. The ‘presentation layer’ refers to graphical interface as well as to the code that powers it, including the code that controls interactive elements such as drop down menus.

Presentation code includes:

  • HTML and HTML 5
  • CSS
  • Scripting languages such as JavaScript, jQuery and Ajax.

Usually all those languages are skilfully weaved together in order to create a visually attractive and highly functional website design.

1. Creating multimedia interface

Animated and immersive design is achieved through the use of either Adobe Flash or combination of HTML, CSS and other scripting languages mixed together.

For many years Adobe Flash was in the lead, but it started to change. Nowadays with the development of HTML 5 and CSS we are able to increasingly replicate much of the interactive and animation effects.

HTML 5, the most recent edition of HTML has made a huge step forward in terms of presentation layer design capabilities. It provides an improved toolkit of elements and properties and acknowledges the way designers work and use particular elements. For example it allows designers to define a navigation group with the new ‘nav’ instead of the previously used ‘div’ element. The animation and interaction design support features of HTML5 have also improved impressively, and the fact that HTML5 is supported on mobile browsers such as Apple’s Safari has opened up the web design possibilities.

A few words about Adobe Flash

Flash is an animation and interactive technology that enables to create highly immersive interface. As for implementation of Flash element in website design the process is quite simple. The component developed in Adobe Flash is exported as a self- contained .swf file and in exactly the same way as an image, the .swf file is embedded within a HTML page. The .swf file can either be a small portion of the page or it can literally be the entire interface. It must be noticed that users must have the Flash player installed in their browser in order to view a page featuring a .swf component.

Despite the capability of creating impressive user experience using Flash has some disadvantages. The most significant one is the fact that the Apple mobile platform simply does not support Flash files. Therefore, the website created in Flash must offer an alternative version of the site for (Apple) mobile viewers (of course only if the market is important enough to them). The invitation for the user to download the latest version of the Flash player on the iPhone is an irrelevant button, since even if they did download Flash the site would still not be accessible.

HTML5 – Flash alternative

As mentioned earlier, combination of HTML 5, CSS and jQuery code now make it possible to reproduce animated websites that were only possible in Flash. Using ‘canvas’ element it is now much easier than ever to design rich and animated user interface. Most modern desktop and mobile browsers support the HTML5 standard which makes it possible to create design that works across a multitude of platforms.

1.1 DHTML, JavaScript, jQuery, and Ajax

Bear in mind that HTML just forms a structure for a content. Scripting languages such as JavaScript, Ajax, and jQuery which control the behaviour of user interface elements and content displayed on a page are woven into that structure.

JavaScript is a dynamic scripting language that is capable of complex animation and interaction effects, such as creating a drop-down menu or an expanding window layer. It allows to interact with the user, control the browser and alter the web page content that is displayed. When JavaScript is implemented into HTML, the HTML is then referred to as ‘DHTML’. Dynamic HTML (DHTML) allows to create interesting interactive components and animations.

jQuery is a simplified form of JavaScript that focuses on the commonly-used interactions between JavaScript and HTML. It is designed to make it easier to navigate a web page. jQuery is a free, open-source software and is available online. You can copy and paste ready scripts into your web pages and customize them to serve your purposes. Using jQuery, you can create animation and interaction design effects with much less code than would be required with JavaScript.

Examples of jQuery effects:

  • Expanding and collapsing according windows
  • Carousel image rotation
  • Image zoom upon rollover etc.

Ajax (Asynchronous JavaScript and XML) allows data processing such as sending or retrieving data to occur in the background (asynchronously) without interfering with display or behaviour of the web page. Therefore reloading the page or clicking an “update” button is not required and data on the page can be refreshed/updated automatically.

1.2 Advanced CSS Graphic Effects

In the past, in order to create a graphic element, a button for example, we used to rely on bitmap graphics such as jpeg or gif. Not only do they increase the load time of the web page but also they have to be created by designers familiar with software such as Photoshop, and then they have to be hand-changed every time you wish to change the look of the site.

Nowadays CSS is offering increasing levels of stylistic control over the appearance of elements. It’s now possible to add gradations, rounded corners, reflections, and soft drop shadows to text and elements simply through code.

There are quite a few useful CSS graphical style controls that we can be implemented to avoid the use of bitmap graphics in building user interface.

The advantages of using CSS for our user interface include:

  • Faster download times – CSS code is written just once, and can be applied as a style to any graphic or text element;
  • Scalable design – CSS code allows you to apply scalable attributes to fonts and elements;
  • Easy maintenance – In order to change the size, colour, and visual effects of a button, text, or design element, we simply change values in the CSS code, and the change will be applied to all elements assigned to the particular style;
  • Accessibility – in CSS we are using actual text for our buttons and interface elements, and these are tagged and identified in a way that screen readers can digest and translate for users who rely on such devices.

1.3 Responsive design

The most recent trend in website design is ‘responsive design’. It is an approached aimed at creating websites in a way that provides an optimal viewing experience, easy to read and navigate across the wide range of devices. When the user changes the size of their browser window, the web page updates immediately in order to optimally display in the ‘view port’ size. View port is a new term designers use to refer to not only different desktop browser sizes, but also mobile devices which all have different fixed screen sizes.

Responsive design is possible thanks to the ‘media queries portion of the CSS3 specification. It recognizes the browser’s size and tells the page to load the appropriate style sheet, for example ‘widescreen.css’ or ‘mobilescreen.css’. It is possible because different style sheets contain different layout systems, font sizes, and image optimization settings.

The last but not least is getting a creative ideas for user interface. There are plenty of inspirations online. It would be advised to analyse good design practices, break them down to essentials, and see how some of them can be adapted for application in our own field.

[ad_2]

Source link