AAEAAQAAAAAAAAkUAAAAJDgyMDJhYzgzLTQxMmMtNDk2Yy1iNmUwLWMyNTdhZTMyYTYyNA

Tips for Learning PSD to HTML5/CSS Conversion

Designing and developing a website involves a distinct set of activities. Both, however, are dependent on each other to deliver the finished product. Your design activities involve your aesthetic and creative genius to help you deliver a clean and beautiful website using Photoshop, the popular image editing tool from Adobe. However, your design in order to be developed into a website needs to be converted into an HTML file. Let us take a look into the basics of understanding how to convert a PSD into HTML 5 or CSS for developing a website.AAEAAQAAAAAAAAkUAAAAJDgyMDJhYzgzLTQxMmMtNDk2Yy1iNmUwLWMyNTdhZTMyYTYyNA

Getting the Prerequisites in place




As a first pre-requisite to start on the conversion process is to have a PSD file in place. A PSD is the default file extension given to all files created in Photoshop. This will be the base for you to start off on the conversion.

In addition to this you will need a basic understanding of HTML5 in order to plan the layout. Get a grasp of basic HTML concepts like tags, attributes and syntax.

Setting up the Repository Structure




Before you begin, make sure you have the repository structure in place. Configure the structure of the location where the files and folders will be hosted. You need to create a main or the root folder which will hold all the sub folders. Create separate sub folders for every element of your design, namely, scripts, CSS, images, text and so on. In addition to this create an index.html which will hold your entire HTML mark-up. This is the main file which will be retrieved by browsers based on user requests.

Slice and Dice Image

It is quite obvious to even the uninitiated that the PSD file in its entirety cannot be included in the HTML file. Therefore, it has to be sliced into smaller sizes. You can choose between the two image formats, PNG-24 bit and JPEG, for saving the sliced images. However, while the PNG-24 bit is definitely the better option in terms of image quality, the JPEG is far superior so far as size optimization is concerned. Since lighter images are no doubt the first priority, you may want to compromise on quality in the best interest of your website.

Getting into the Code




Let us now understand how you can weave in the sliced images into your HTML 5 code. Position the logo prominently on the HTML 5 page. Include a header tag within your body tag. Within the header, add a div with a Wrapper as its class value. Include the image tag with the image path in its source attribute. Make the logo clickable by introducing the anchor tag and linking it to any section or page of your Website. Usually the Logo is linked to the home page so as to enable users with easy navigation. Your code once completed should look like this:

Use the Nav tag of HTML 5 to create the navigation bar. Make an ordered or unordered list as required and add

  • tags to include the menu options. Append a unique class name “active” to the firs
  • tag which can be used in the CSS. You would also need to add an anchor tag to link individual menu options to a specific destination on the webpage. Converting a PSD to HTML 5 becomes easy if you have the right tools to help you do it. Using tools like Dreamweaver helps to substantially reduce your manual effort and also deliver good results.

Article Source: http://EzineArticles.com/8682870

iop2jq

2016’s Top & Best HTML5 Animation Tools For Designers

Today, HTML5 is one of the most popular and advanced languages among web developers and designers. As this high-end language has helped a lot of professionals to produce different contents that can be present on the web.

In the last couple of years, HTML5 language has gained huge popularity in the world of cyberspace. Supports with an exclusive range of features like every modern browser, video, audio, canvas element and animation, HTML5 allows developers and designers to make their website creative.

Moreover, HTML5 also enables professionals to develop amazing animations for their website. Through these high-end animations, they can give their site attractiveness; therefore, they can do more business.




However, it is also true that developing such animation requires you to spend a lot of efforts, time and hard work, so ensure that you always take the help of HTML5 animation tools that are obtainable both free as well as paid.

In this blog, I have listed 2015’s top and best HTML5 animation tools that can help web designers to make their work a lot easier and simpler:

HTML5 Maker:

HTML5 Maker

When it comes to HTML5 Maker, it is the finest online animation tool that can be used for developing animated, interactive content with the help of HTML, HTML5, JavaScript and CSS. Being an easy to use tool, HTML5 Maker can help users to attain extremely good results. The tool also allows producing cross-browser animated content like Slideshows, JavaScript, Presentations, HTML5 animation, Sliders and more.

Animatron:

Animatron

Intuitive Animatron Editor is a highly advanced HTML5 animation tool that helps in design and publishing animated and interactive content, which plays everywhere from desktop computers to mobile devices. Moreover, this tool allows you to collaborate with other users, import artwork, develop custom shapes and more.

Adobe Edge Animate:

Adobe Edge Animate

With Adobe Edge Animate, developing interactive, animated web content become a lot easier. Using this tool is a lot easier with precise control over motion graphics and HTML elements with a video-editor such as a timeline interface. The content that developed through the tool works smoothly on mobile devices running iOS, Android and in modern desktop browsers.

Mixeek:

Mixeek




Among different HTML5 animation tools, Mixeek is a free software tool for designing and implementing web animations and interactive animated web applications. Completely based on CSS3, HTML5 and JavaScript, this wonderful animated tool is especially developed to bring lightweight alternative to popular paid animation software tools.

Mugeda:

Mugeda

When it comes to talking about the Mugeda tool, it is a powerful browser-based HTML5 animation tool, which comes with different features like templates, analytics and more. By using this tool, you can approach cross-platform optimization, efficeintly create content friendly with ads, and play with the top Javascript technologies.

Radiapp:

Radiapp

Redi is also an extremely powerful tool that can be used for developing videos, animations and develop graphics for modern web. This tool makes it easy for you to enjoy it without learning to code. Moreover, this excellent tool is designed from the ground up in order to help people to develop content, which will take full benefit of HTML5 features.

Motion Composer:

Motion Composer

One of the best HTML5 animation tools ‘Motion Composer’ is known for bridging the gap between experienced designers and enthusiasts by offering powerful tool for developing feature-rich animations with an easy-to-use interface. Moreover, the tool will automatically develop the animations paths, decreasing the time-consuming process of animating content frame by frame.

Sencha:

Sencha




Sencha Space is a highly secure, flexible and managed app environment for HTML and JavaScript-based applications. This feature-rich tool is designed to help organizations to simplify app development, security, maintenance and deployment to desktops, smart-phones and tablets.

Google Web Designer:

Google Web Designer

Google Web Designer is also a great HTML5 animation tool that helps you to develop engaging, interactive HTML5-based designs and motion graphics, which runs on any device. This tool gives the power to you to develop engaging HTML5 content. You can use animation, highly interactive elements to bring your creative vision to life.

Hippo Studios:

Hippo Studios

Hippo Animator is an extremely powerful and easy-to-use tool that makes it easy to develop impressive animation without any hassle. This feature-rich tool is the perfect choice for experts and beginners as help is provided with the video tutorials. You can also customize the appearance with dark as well as light interfaces.




So, these are 2015’s top HTML5 animation tools that make animation work of HTML5 designers a lot easier and hassle-free. Moreover, you can also hire a professional HTML5 designer or developer for your project and get huge benefits.

Original article has been published at Mobiletechforce

How-HTML5-And-CSS3-Will-Change-Web-Design

How HTML5 And CSS3 Will Change Web Design

Although not fully operational, HTML5 in combination with CSS3, will be a significant upgrade from how websites are currently being constructed. The majority of websites today are based on HTML4, which was released in 1999, over 12 years ago. Since its release, there have only be small adjustments made to HTML4, but HTML5 has been in the processing pipeline since 2001.How-HTML5-And-CSS3-Will-Change-Web-Design

HTML5 was originally predicted to be released in 2022, but the release date has since been adjusted to 2014. The rate-limiting step in the release process has of course been Microsoft. Since the company is so huge, it takes a long process to make alterations to anything. The biggest change is the adaptation of Internet Explorer to allow the use of HTML5, and for some time Microsoft wasn’t making any changes to allow this. But, it’s now clear that Internet Explorer 9 will be able to use some of the new features.

Some browsers are currently not accepting all of the complex features of HTML5 and CSS3, but developers are working to implement these features on all browsers as quickly as possible. With that said, there are a number of available elements that include a variety of great features available now, and the rest of the features can be added to a website’s code without the use of any 3rd party applications.

Anyone who has had an iPhone or any type of device running on the iOS platform knows the trouble they face when trying to run a Flash application. These apps simply will not function properly. This has established the idea that developers need an alternative to Flash. The combination of HTML5 and CSS3 not only resolves this problem for developers, it makes it even simpler for the development of other apps for different types of mobile devices, which opens the doors for a number of new designs and website formats.

Often the transition from one platform to another requires learning how to design a page all over again. One of the biggest positive aspects surrounding HTML5 is the fact that it is based on HTML4. This means integrating code from HTML4-based pages is simple and easy. This also means a number of the attributes in HTML4 are also accessible in HTML5, but these attributes have been adjusted to make the new platform easier to use. In some cases, older code can remain in place while the new attributes are utilized. There are number of new elements found in HTML5 and CSS3, almost too many to list, which is why this article will cover some of the main features people are most excited about.

The Latest With HTML5

1. One of the biggest features developers are looking forward to is the audiovisual support that HTML5 has. Although it is not totally functional yet, the completion of the feature has more than a positive outlook. Upon its completion, developers will not require 3rd party plugins in order to stream audio and video on the their websites.

2. The application cache feature makes it possible for developers to utilize web applications without being connected to the Internet. This is done by creating a cache manifest file on a web server. The necessary resources to operate offline can then be retrieved through the manifest element of HTML tag. The code is simple and the resources can reached with the command: <html manifest=”/cache.manifest”>, and an AddType directive in the .htaccess file found in the root web directory: AddType text/cache-manifest .manifest. The syntax for this command will vary slightly depending on the type of server that is being utilized.

3. HTML5 is a taking a page of Apple’s book by utilizing the canvas element, which is already supported in Safari and Firefox. With this feature, developers can produce flat graphics straight through the code utilizing the Draw function. This makes it possible to bypass the use of Photoshop in order to make a 2D image, and instead place the image directly in the code.

4. Declarations have also been simplified in the new HTML5. All HTML5 syntax requires that a doctype be specified in order for the browser to render the page in standards mode. In the past, this declaration was extremely long and took a relatively large amount of code to make the declaration. With HTML5, the new doctype declaration is simply: <!DOCTYPE html>, which eliminates a lot of coding for the developer.

CSS3’s Improvements

There are also a number of new features being implemented in CSS3 that work in conjunction with HTML5 in order to simplify the life of developers. Although not completely finished, CSS3 has been separated into different levels of completion. There are some features that are complete, while there are other features that are still being tested for completion. The layout and text formatting features are ready for use by developers, with some other features still in the works. Much like HTML5, there are some browser compatibility issues, and Internet Explorer compatibility is behind as well.

CSS3 provides a number of features for developers that may not be totally necessary for the functionality of the website, but provide aesthetic beauty. With the increasing demands of users for a clean-cut website, these features within CSS3 are being welcomed with open arms by developers. Using CSS3 in conjunction with HTML5 makes it much easier to create a website that will leave visitors “oohing and aahing” over the design.

CSS3 Box Shadows

TypeFaces makes elegant use of CSS3 box shadows by outlining photos.

1. One of the best new features available in CSS3 is the ability to create box-shadows with ease. This is a feature that makes the main content of the website slide beneath or on top of another object in order to create depth within the web page. With CSS3, developers can create this illusion without the use of a new image or a JavaScript plugin. In addition, this feature can also make the shadow appear when the pointer hovers above an image.

CSS3 Rounded Corners

Just Made My Day uses CSS3 rounded corners for speech bubbles.

2. Another great feature in CSS3 is the ability to create rounded corners in a much easier manner. Instead of using images, CSS3 utilizes a div tag and a border-radius element. Currently, this requires a bit of adjustment depending on the type of browser being utilized, but once the feature is complete, it will be universal throughout all browsers.

CSS3 RGBA

WeGraphics uses the RGBA coloring to fade the opacity of images on hover.

3. Coloring in CSS3 has never been easier with the implementation of RGBA coloring. Instead of having to know hex coloring or utilizing a cheat sheet, developers can now choose the amount of red, green, blue, and opacity that will be present within the design. Another bonus to this new feature is that it does not require any browser extensions in order function properly.

Ironing Out The Kinks In CSS3 & HTML5

As mentioned before, the main concern with CSS3 is cross browser compatibility. Although a large number of features in both HTML5 and CSS3 are ready and available to use, not all browsers are capable of utilizing them yet. One of the best browsers for these new features is the recently released Firefox 5. Opera 9.5 is also a contender as a new browser able to run these features as well, but it’s not quite perfect and still shows some inability to run a few of the features. Safari, Chrome and Kindle, which are all based on WebKit technology, can all run most of these features without any problems.

Although there are a number of individuals counting down the days until an alternative is put in place of Flash for iOS devices, HTML5 is not quite ready to take its place in the audio/video playing or animation department for a conventional browser. However, it does appear that in the near future, HTML5 will eventurally overtake Flash.

With the continued development of HTML5 and CSS3, websites will be created in a new and efficient manner. JavaScripts and plugins will no longer be necessary in order to format or handle images placed in the website, in addition to many other awesome developments. With that said, with the many features available for HTML5 and CSS3 that can be implemented into established code now, getting a head start will not only make websites look better, it will also make them work faster and more efficient as well. There are a number of websites available that provide guides for HTML5 and CSS3. Get to one now and starting learning about developing for the future.

HTML5 Resources

  • Dive Into HTML5 – An online book by Mark Pilgrim detailing the differences between HTML5 and HTML4 and giving excellent examples for how to use each HTML5 feature.
  • HTML5 Rocks – Use their demos and labs for a great way to begin experimenting with the new features HTML5 has to offer.
  • HTML5 W3C Official Spec – Read the original docs for yourself.

CSS3 Resources

  • CSS3.info – A massive collection of CSS3-related tutorials and information.
  • CSS3.com – A reference guide for CSS3 properties.
  • Quirksmode – See the latest browser support for CSS3 properties.
  • CSS3 Generator – Need to generate some CSS3 code and tired of writing out all the browser prefixes? Use this generator for almost every CSS3 property.
  • CSS3 W3C Working Group – See the official current snapshot of CSS3.

Tags

htmlcssjava

Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript

The rise in the use of mobile devices has led many a developer to throw up their hands in frustration. Should a business require both a website and a mobile application? This report discusses why the future may be lie in HTML 5, CSS and JavaScript applications that work equally well on all mobile platforms.htmlcssjava

Many developers have come to the conclusion that they need to focus on a particular mobile platform, such as the iPhone, Windows 7 or Android. Others have begun to realize that there are already many development tools which allow them to take advantage of their current skillsets, whether it is HTML, CSS and JavaScript, or actual programming languages such as C or C++. These mobile application tools, as we discussed in our Special iPhone Report for Developers, are used to create native applications which can utilize the majority of the native features of mobile devices, such as the GPS, camera, contacts, accelerometer, etc.


Mobile Web App Development Tools

PhoneGap is an open source development framework for building cross-platform mobile apps using HTML, CSS and JavaScript. It enables developers to utilize the core features of the iPhone, Android, Palm, Symbian and Blackberry smartphones, including geolocation, accelerometer, contacts, sound and vibration. PhoneGap is free, however it requires additional software specific to the platform that is being developed, such as the iPhone SDK for the iPhone, Android SDK for Android, etc. The use of PhoneGap is only a bit better than creating an app for each platform, as you will still need to compile each app for each specific platform, even if the basic code is the same.



Some, such as Rhodes, allow developers to create native apps for almost all mobile platforms, including the iPhone, Windows Mobile, BlackBerry, Symbian and Android. Similar to PhoneGap, you will have to compile the code for each platform separately. It also supports the native features of most smartphones, including geolocation, contacts, and camera image capture. Rhodes is free under the MIT License. A cloud computing service called RhoHubenables developers to develop applications online using the Rhodes framework, with no need for them to have the latest SDK for each platform on their computer. Apps are created using HTML and Ruby, and are actually built in the cloud.

What About Truly Portable HTML 5 Web Apps?




Recently developers have been excited by the prospect of application development using technologies that work across all platforms. One such tool, iUI, the iPhone User Interface Framework, uses JavaScript, HTML and CSS, and is utilized to create web applications that work on any browser with HTML 5 support. Although it was designed to create apps with the look and feel of a native application built with the iPhone SDK, web apps created using iUI will work on almost all smartphones that include a standards-compliant web browser. iUI is still relatively new, and doesn’t have a User Interface, so it does require some patience and skill to use. Other, similar frameworks include iWebKit and JQTouch.



Another mobile development tool is Sencha Touch, an HTML5 Mobile App Framework. Like iUI, Sencha Touch is powered by HTML5, CSS3, and JavaScript, and works on the Android, iPhone and iPad platforms, as well as other HTML 5-compliant web browsers. It supports touch events, such as pinching and stretching, and can be web-based or wrapped in an Objective-C layer for distribution on mobile app stores. Sencha Touch is open source software, so if you are developing an open source application with a license compatible with the GNU GPL license v3, it is free to use. Sencha even has a Getting Started with Sencha Touch tutorial which features geolocation, uses the Sencha Touch API and Google Maps to display a map of the user’s location.

Chrome App Store: HTML 5 Apps on Stage




In May of 2010, Google announced the creation of its Chrome Web Store, a marketplace for web applications that are built with standard web technologies (HTML 5, CSS and JavaScript) that can be accessed and used by anyone using a web browser that supports these web technologies (such as Chrome, Safari, Opera or MSIE9). When users “install” a web application from the Chrome Web Store, a shortcut is added for which allows them to access the app, which opens in the web browser. Google hasn’t given a date when the store will officially open, but once it is open, there will be no approval process for developers to wade through, and no fee is required in order to submit an application.

Will Web Apps Eventually Become the Standard?

The World Wide Web Consortium (W3C) recently returned to work on the HTML 5 specification after years of absence. Their return has produced tensions with the Web Hypertext Application Working Group (WHATWG), a group of browser makers (including Opera Software, Mozilla, and Apple) who began work on the standard in June 2004. Ian Hickson, who is the editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012, but doesn’t expect it to become an official W3C Recommendation until the year 2022 or later–that’s right, over 12 years from now. And now for the good news…


 All the major mobile platforms, including Apple’s iOS, Google’s Android and Palm’s WebOS, use similar WebKit-based browsers, so technologies like HTML5 and CSS 3 will continue to be improved and supported. Even Microsoft is coming to the plate with support for HTML 5 forthcoming in MSIE 9. Though it may not become an official standard for a decade, it is increasingly being supported by the major browser vendors, and more sites and services, such as YouTube Mobile, Google Gmail, Scribd, and Apple’s iPhone and iPad are using HTML 5 instead of plugins such as Adobe’s Flash. HTML 5 is here to stay.

There will always be businesses who feel that they must have a native mobile application for each major platform, however many are starting to be more inclined to work smarter, not harder. The emerging web standards can be used to create compelling applications, as demos from Apple, Google and Sencha show. In the future, a web application should work for the majority of mobile platforms, if not all of them, and it should work on any HTML 5-compliant web browser, whether that browser is on a mobile device or a desktop PC.

html5-cheat-sheet-1024x793

HTML5 Beginner’s Guide

The ability to make compelling, beautiful web pages is a useful skill to have. It allows you to present information you care about whilst capturing the attention of those who visit your web page.

If you don’t want to use website platforms (such as WordPress, Drupal and Joomla) to build your website and you want to learn the basics of HTML5, then this is a right guide for you.

And oh, once you have learned the ropes of a HTML5, I highly suggest you to check out my “HTML5 Cheat Sheet” below.

HTML5 Cheat Sheet

HTML5 Cheat Sheet



Introduction

laptopHistorically, websites have been constructed with HTML, CSS and Javascript. These are known as ‘front-end’ technologies, and control the aesthetic of the website. In recent years these tools have seen a drastic refresh and now boast some amazing features, allowing you to do things that previously would have been impossible without using a complicated back-end technology like PHP, Perl or Ruby On Rails.

This refresh is known as HTML5, and has been adopted by companies and developers alike with great enthusiasm. In this article, I’m going to run you through how to use aspects of HTML5 in your own web projects. Whilst prior experience in basic web design is useful, it’s not essential.



Scenario

multimediaCharlie and the Roundheads is an Indie rock band from Huntingdon Beach, California who were recently signed to a major record label. Their A&R manager is eager for them to have a website, and has hired you to create one for them.

You’ll need to add music streaming facilities, a place for Charlie and the Roundheads to display their music videos, blog posts as well as a way for fans to sign up for email updates about the band. In addition to this, the code has to be clean and representative of modern HTML5 coding styles.

Whilst this may sound daunting at first, it’s really not.




In the next thirty minutes, you’re going to learn how to do all of this, and more.

Text Editor

smashingFirstly, we’ve got to talk about what we’re going to be using to write our code. You’re probably quite familiar with Microsoft Word or Apple Pages. These are word processors that are quite well suited for writing letters and documents, but are completely inappropriate for writing code.

There are many reasons for this but the main one is that word processors create files that cannot easily be read by web browsers like Internet Explorer, Chrome and Safari and add superfluous formatting and information to web documents. Instead, we need to create files that are as bare-bones as possible. These are called ‘plain text’ files.




To create and edit these files, we use Text Editors. You might be familiar with Notepad on Windows. That’s an example of a text editor, although it is a really basic one. Programmers and web designers tend to use text editors that are best suited to writing code.

There’s a lot of choice here

ossIf you’re on Windows, you can check out Notepad++ orTSW WebCoder. Certain distributions of Linux come with Gedit, which is a remarkably capable text editor for coders. Users of OS X might find that TextMate is best suited to their needs.

For this tutorial, I’m going to be using Sublime Text 2. Available on OS X, Linux and Windows, it is a great all-rounder text editor and whilst it isn’t free, it does come with an unlimited trial period. Please download and install it before continuing with this tutorial.

Markup

htmlTML stands for Hypertext MarkUp Language, and it refers to the code that structures all the elements in a web page. It doesn’t style the page, nor does it add any interactivity. That’s left to CSS and Javascript, which are things we’ll look at later on in this article.

First, let’s look at structuring our document and creating a sign-up form. We’ll worry about aesthetics later.




folderFirst create a new folder where you’re going to store all your code. Open Sublime Text 2 and create a new file. Save it with the text extension “signup.html”, and make sure it’s stored in the folder that you’ve created. Now, let’s add some code.

html-boilerplateThis might look a bit daunting at first. This is the boilerplate found in virtually all websites. You’ll notice that you’ve got two < html > tags surrounding everything else, as well as a pair of < head > and < body > tags. What do they do?

robotWell, < head > is where you store things like Meta Tags (these are useful for getting your site noticed in search engines), the title of your page, as well as external CSS and Javascript files.

< body > is where everything else goes, and it’s here where we’re going to put most of our focus. But first, let’s think about how websites are structured.

If you visit the websites of news organizations such as The Guardian, The BBC, CNN and Fox News, you might notice that they share some features in common. They have headers, footers, articles, sidebars and quite often boxes containing information that relates to, but is not an integral part of an article.




As you might expect, there are some tags in HTML that are explicitly for these use cases. Whilst they were only recently introduced in the new HTML5 standard, they’ve received a rapturous response from developers and designers alike. The reason for this is because they make it easy for developers to structure their code in a way that is logical, readable and well organized.

This is called Semantic Markup. What’s awesome about this is that tags do what they sound like. There are a few tags to learn here, but they’re reasonably self explanatory.

Section





tagsIn-between section tags, you’ll find the main content in a page. Think of this like a chapter in a book, encompassing everything regardless of whether it’s a diagram, a picture or some words.

Aside

Aside is a useful tag, containing information that relates to the main article, but can be removed without making the main article incoherent.

Footer





Footer is where you should store contact information, copyright information and perhaps a couple of links.

Article

Article is what it sounds like. This tag should contain things like blog posts and news stories. This should be able to be detached from the rest of the page and still remain coherent.

Header

Header is where you’ll likely store the logo for your website.

Nav

Nav is for the navigation bar, and is where you’ll store links to other parts of the site.

Form

form-333x309Now that we’ve learned about the different kinds of semantic markup that HTML5 has on offer, we’re going to use some of it to add some of the features required for Charlie and the Roundheads’s website. And where better to start with than a form?




Since we’re not adding a blog post or a news story, we’re going to use the Section Tag. It is here where we’ll write the code for our forms. Before we continue, it’s important to add a caveat that in order to do anything really useful with the data from our forms, we’ll have to use a back-end technology. Those are a little bit out of the scope for this article unfortunately. However, if you’re interested in back-end technologies, look into PHP. It’s easy to get started with, and is used by millions of developers worldwide.

mailbox-250x236But first, let’s talk about the data we’re going to try and record. Charlie and the Roundheads will want to keep in touch with their fans by email. They’ll also want to know where they should go on tour, so it might be a good idea for you to collect ZIP/Post codes. Finally, fans might want to leave a message for the band.

With this in mind, let’s start work on our first form, and bring in concepts from HTML5 as we progress.

Forms consist of labels, inputs and buttons, and are surrounded with < form > tags.

form-firstThe first input we’re going to accept is for an email address. To do that, we add a tag of < input > and do not close it. We’re going to preface this with ‘Email : ‘.




form-inputemailsThis isn’t an issue any more. You simply give your ‘input’ tag a type of ‘email’, as seen in the example below.
Before HTML5, you would have just accepted any old input, and then would have written some code to make sure that the information you had received from the user was a genuine, legitimate email address. That was time consuming and tedious.

form-type-emailWe also want to make this a required field, so we’re going to give it another attribute of ‘required’. Should a user attempt to submit this form with the email field blank, it will respond with an error message saying “Please enter an email address”. It will also do this if the user tries to submit something that isn’t a valid email. Finally, we should also give it a name to identify the field, should we end up writing some back-end code. This is done by adding an attribute of ‘name’ with a value of ‘email’. This is demonstrated below.

form-input-required-copyNow, let’s go ahead and add the fields for zip code and for the message. As I’m sure you imagined, you can’t use a type of ‘email’ for these. So, what do we know about Zip codes? Well, they’re always represented by a numerical value. Can you guess the type for that? That’s right. Number.




form-input-numberFinally, let’s look at how we’re going to accept messages. As I’m sure you’d expect, Charlie and the Roundheads have a lot of fans who might want to These break with tradition somewhat and don’t use the input tag, but rather something else.

inputThe < textarea > tag is used for when your input is likely to span multiple lines.




Whilst this would be appropriate for a message from fans, it is less so for things like emails, passwords and names.

< textarea > can take a whole bunch of attributes. We’re interested in four of then. Firstly, we want to give it a name. We also want to define some rows and columns; these specify how large the text area is going to be. Finally, we want to define if it is required or not.

form-textarea1With this in mind, I’ve decided to give it a meaningful name and make it reasonably large. I don’t want to make it required, as I don’t think that every fan will want to leave a message for the band.




What we’re left with is not exactly pretty. Don’t worry about that. We’re going to make it look good later, but first we’re going to look at adding rich media to our website.

Music and Videos

browsersIt used to be that to if you wanted to add music and movies to a web page, you’d have to rely upon a bulky, slow framework such as Flash or Silverlight. HTML5 has effectively thrown these out and replaced them with something much better.

For the next bit of Charlie and the Roundheads’ web page, we’re going to create somewhere for them to publish and share music and videos. This sounds complicated, but it’s actually really easy.

But let’s first talk about dreaded codecs. As I’m sure you know, there are a huge amount of web browsers on the market right now. There’s Internet Explorer by Microsoft, Chrome by Google, Firefox by Mozilla, Safari by Apple and Opera by… er, Opera.

Each of these handle playing music and videos slightly differently. For example, whilst Internet Explorer is capable of playing music and video encoded with the H.264 MOV codec, it cannot use the Theora codec which is favored by Opera and Firefox.




So, how do we get around that? Well, there’s no clever trick really. We just have to encode our music and movies in a whole bunch of different ways.

proov4So, let’s get started. Create a new file using the same HTML5 boilerplate we used before. Let’s also add a section semantic tag.

video-boilerplateNow, we’re ready to add some music and videos. But first, would you like to hear what I really love about HTML5? It does what it sounds like. Not sure what I mean?




Okay, would you like to take a guess at the tag for adding videos to a page? Yep. Video.

html5videoSo, now we need to add the video files. All we’ve done here is add a container for them. So, given what we know above, we’re going to add H.264 MOV and WebM8 media. As an added bonus, we’re going to have a placeholder so that should someone visit the page with an old web browser, they will see a message informing them that they ought to upgrade to something more modern.

Adding a video is easy. You just type in a < source > tag for each video you wish to embed. Fallback messages don’t need to be in a tag, either.

video-tagaddedWe also want to have some music. Unlike video, there are only two codecs you should care about.

music1As you’d expect, the tag for audio is < audio > and you can add your sources in the same way you did with movies.

audio-tagadded
html5audio-250x311

Now that we’ve got that sorted, we’re going to tackle the last requirement for Charlie and the Roundhead’s website.

Blog

notepadLet’s quickly recap what we’ve learned so far. We’ve introduced semantic markup, HTML5 forms and embedding rich media. Let’s try something simple and create a few sample blog posts, and then we’ll look at stylizing our site. This won’t take long.




First we’ll create another page called ‘Index.html’ and add the same boilerplate we had before. We’re also going to add an article tag, which is the tag specifically for blog posts and news articles. Using the familiar < p > tag, we’re going to place a few paragraphs of ‘lorem ipsum’.

blog-lorem-ipsum-1024x554Lorem Ipsum is bunch of Latin that doesn’t actually mean anything, but allows you to fill something with text and stylize it later without having to worry about doing any writing.

blog-lorem-ipsum-example-1024x549Ugly, isn’t it? Now we’re going to make it look better.

Typography

typographyTypography sounds like an arcane science involving printing presses, but the reality is something entirely different. It’s the art of arranging and stylizing text so that words are readable and look good.

It sounds simple, but it’s anything but. A close look at typography could fill a good many books, but we don’t have time for that. Let’s skip all that and jump straight into making our text look good.

You’ll have some fonts readily available to use with your computer and web browser. These are the ones you might have came across whilst writing something in Word. You might not know that a good many fonts are available online that have been created by designers passionate about typography.

Google Fonts is a great supply of these, and we’re going to use one available for free calledDroid Sans.

In each of our HTML files, we’re going to add the following line in-between our < head > tags.

< link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’ >

While we’re at it, we’re going to create a new file called style.css and add this line to each of our HTML files.

< link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css’ >

Not sure what CSS is? So, remember how I told you that HTML was the structure of a web page? Well, CSS is what makes that structure look good. it’s the aesthetics of the page.

It works by selecting elements in a page (elements like Body, P, Section), and then adding rules. So, let’s select all content within the Section tags and give it all the font style of Droid Sans.

css-typography-addedThis will result in all text within our pages having the style of Droid Sans, and looking much nicer than the default font.

css-typography-result-1024x360Now we’ve got some housekeeping to do. We need to add links to each page, add some backgrounds and add some borders. The last chapter will look at aesthetics in closer detail.

Tidying Up

Let’s tackle the low hanging fruit first. We’re going to create a navigation bar for users of Charlie and the Roundheads’ site to get around. Above the Section tag on each page, we’re going to create a Nav tag. In between that, we’re going to create an unordered list. This is identified by the < ul > Inside of those, we have < li > tags each with links to each page within the site.

links-addedNow, let’s stylize that. As it is right now, each of those tags are cascading downwards. We’re going to fix that so that they’re all on one line. Edit the CSS file from before and add the following lines.

Now that’s sorted, let’s think about the blog. So, we’ve got a lot of (admittedly pretty looking) text. However, we want to do a bit more. We want to give it a fixed width of 640 pixels, give it a thick, shaded border and give it a background color.




So, let’s edit that CSS file again. We’re going to add the following lines. These are reasonably self explanatory.

article-stylizedFinally, we want to apply a background uniformly across all pages. Back into the CSS file we dive! Since we’re colorizing the background across all pages, we’re going to create a selector of the type ‘body’. Let’s also try something a bit different.

Solid block color backgrounds don’t look too hot. Textured backgrounds do. Let’s go toCSSMatic and generate a texture that we like. Play around with the settings until you’re happy, and then click ‘Download Noise Texture’.

body-backgroundNow, we’re going to apply this as a background. Let’s dive into our CSS file and add a selector for ‘body’. We’re also going to apply a background from image. Before moving forward, please make sure that your image is in the same directory as your HTML files.

resultOnce edited, your page should look like this. As you can tell, there’s a lot more to do from here. This was just a very basic look at editing and designing content with CSS & HTML5.




If you want to build a site using WordPress, head over to my homepage.

 

Conclusion

bulb-250x250This was a brief foray into web design using HTML5 technologies, as well as some standard HTML and CSS techniques. Whilst I hope I’ve effectively taught you about the basics of web design, I’d be even more pleased if you came away from this article confident with the knowledge that creating beautiful web pages is within your grasp.




Update 2016, Feb: People behind www.webucator.com put together an video that explains all the steps listed in this article in this awesome video. You can see it here:

Source Websiteup