10 New Markup Elements In HTML 5

29 04 2011

HTML 5 has a lot of new developments for web designers. If you have gotten used to HTML 4 and think that HTML 5 will be easy to learn, you could be in for a shock as you’ll have to learn a whole new language (almost).

There are still some common elements, however, HTML 5 does introduce some new markup. Here are 10 new markup elements introduced by HTML 5:

  1. Article – This markup element is for using syndicated content from another website.
  2. Command – Used for a button, radiobutton, or a checkbox.
  3. Header – Introduces a section or a document and could include navigation.
  4. Nav – Used for a section of navigation.
  5. Video – Video elements now have their own markup in HTML 5.
  6. Keygen – Generate keys to authenticate users.
  7. Embed – For embedded content, such as a widget or a plug-in.
  8. Hgroup – For a section of headings. For example, H1 to H6.
  9. Aside – Separate content that is related to the surrounding content. Resembles a sidebar in print design.
  10. Figcaption – Defines the capture of a figure element, which can include a group of stand-alone content, photos, or videos.

There are plenty more new markup elements in HTML 5. This just barely scratches the surface. To learn more HTML 5 markup with a tutorial and a free download, visit HTML Atoms.


10 Tutorials Websites To Sink Your Teeth Into

27 04 2011

Web developers are always looking for tutorials websites. I’ve got quite a list of developer tutorials that you can delve into. With these sites, you’ll spend hours learning new code that you can use in your website development. Don’t go anywhere until you try these 10 tutorials websites.

  1. AJAX Tutorials – Web 2.0 is here so you might as well learn how to code for it. These AJAX tutorials will get you started.
  2. ASP.NET Tutorials – If you are a Windows server coder, this website will give you the basics and lead you on to some advanced tutorials.
  3. CSS Atoms – Learn CSS from the bottom up.
  4. HTML Atoms – There’s no better place to learn HTML.
  5. Dot Net Tutorials – This site has more advanced .NET tutorials than any other site around.
  6. JavaScript Atoms – You can try to design a website without JavaScript, but you won’t get far. Learn how to code with JavaScript with easy-to-follow tutorials.
  7. Programming Help – This tutorials website features tutorials on CSS, AJAX, .NET, and many other coding languages.
  8. Photoshop Atoms – You can’t build a website without graphics. Learn how to create stunning graphics with this Photoshop tutorials website.
  9. The Web Made Easy – The tutorials on this website are easy, and fun.
  10. SQL Atoms – Learn SQL the easy and fun way with these awesome tutorials.

I highly recommend these website tutorials. You’ve got a lot to dig into now. Start digging. 🙂

Will HTML 5 Save The Web?

25 04 2011

HTML 5 is in the late development stage and it’s looking pretty good. I like a lot of the new ways of making certain web design elements work. I like the definitions of web design elements. And I like the overall direction that HTML is taking with the fifth generation. But will it save the Web?

In truth, the Web is in no danger of going anywhere. It’s not in the running for sudden destruction. It’s not even in decline. However, HTML is.

Let’s face it. HTML 4 is outdated and almost irrelevant. If you look at how most websites are being designed these days, the bulk of code that is going into them is CSS, PHP, and JavaScript. The Windows server equivalent is ASP.

While HTML is still being used, it makes up a small percentage of the actual code for most websites. But HTML 5 could change that.

CSS, PHP, JavaScript, and ASP will still be used after HTML 5 is released to the public. But HTML 5 does show some promise for reducing the amount of code overall in web development and the over reliance of other code in particular.

HTML 5 offers many new web design developments and some of them are based on elements that have typically not been associated with HTML. The Web may not be in danger of dying, but HTML 5 will certainly improve the way website designers and developers are creating their billboards.

Why CSS Is Necessary

15 04 2011

You already know that HTML is necessary. It’s the basic language of the World Wide Web. But did you know that CSS is necessary? It absolutely is.

CSS is necessary because it takes an HTML document and enhances it across an entire website. It does this by allowing the web developer or website designer the freedom to define certain elements of a website across multiple pages.

For instance, navigational elements are typically common across multiple pages of a website. You can define those elements in CSS. Other elements that can be defined through CSS and that are typically common across multiples pages of a website include:

  • Background features
  • Menus and buttons
  • Font attributes
  • Header and footer attributes
  • Link attributes
  • Wrapper attributes
  • Embedded features

This, of course, is just a short list. There are plenty more website features and attributes that can be defined across multiple pages of a website and CSS is the perfect language for doing that.

Particularly helpful is when you have common features within a single section of your website but that are different from features of other sections. In that case, you’ll need more than one CSS document. Each CSS document defines the features of its respective website section.

You can learn more about CSS and take a few CSS tutorials from one of my favorite websites, CSS Atoms.

Should Facebook Dictate Your Web Design?

8 04 2011

Since Facebook is the most trafficked website online and it’s becoming more and more “cool” to create a website that is interactive through Facebook (and Twitter) – well, through social media in general – we must ask ourselves whether we can go too far in making our web design “Facebook-friendly.”

Don’t get me wrong. I’m not against Facebook. I’m not even against making your website Facebook-friendly, or social media interactive. In fact, I highly encourage the use of APIs to include elements of social into any website. But let’s distinguish between making your website more social and socializing it to a degree it is overly so.

Some websites demand it, of course. If you are building a social network and you want your niche social network to be viewed as an extension of Facebook, then incorporating Facebook’s API makes sense. But if you are building a business website through which you hope to obtain new business, then letting your visitors know they can interact with you on Facebook is enough. Making your website a mini-social network is overkill.

Website owners must use critical thinking in determining the extent to which they make their website social. Don’t do it just to be doing it. If it makes sense for your visitors, then go for it. Otherwise, less can often be more.

Where Did The CSS Tutorials Go?

4 04 2011

CSS tutorials are a great way to learn how to design your websites with style. In fact, CSS stands for Cascading Style Sheets. These are file documents written in code that defines the elements of your web pages across multiple pages. It makes changing certain elements on your web pages easier by allowing you to change the style definitions within the CSS file instead of on every page on which those elements appear.

So where do you go to find suitable CSS  tutorials? Glad you asked.

A site that I recommend is CSS Atoms. At this site you’ll find all kinds of tutorials that are easy to follow and which will teach you the basics of CSS while also giving a few advanced tips. Here is a sample tutorial to whet your appetite.

Borders With CSS Border-Style Property

  • border-style: none;
  • border-style: dotted;
  • border-style: dashed;
  • border-style: solid;
  • border-style: double;
  • border-style: groove;
  • border-style: ridge;
  • border-style: inset;
  • border-style: outset;

Get more information on this CSS border-style tutorial.

Here’s another tutorial for added measure:

Embossed Text In CSS3

  • Create a standard HTML page with Div ID tag
  • Add the CSS style code to define the parameters of your button:
    • background
    • filter
    • border
    • cursor
    • border-radius
    • height
    • position
    • text-align
    • width
  • Define button text parameters
    • font-family
    • font-size
    • font-weight
    • color
    • margin
    • position
    • text-shadow

    Learn more about the Embossed Text CSS tutorial. And there’s plenty more where this came from.

    Social Networking Icons – Which Ones Do You Need?

    30 03 2011

    When you build a new website or start a blog, do you know which social networking icons you are going to need to put on the site? In this day of Internet marketing, you don’t want to build a new site without them. Social media traffic is starting to grow across the board and the site icons are one reason why.

    So which social networking icons are important?

    The answer to this question largely depends on the type of website that you are designing. If you are designing a website that is strictly business, for instance, you will probably want a LinkedIn icon on every page of the website. You may also want a Facebook icon on the site as well, and a Twitter icon. But what if the site is more social or not business-oriented at all?

    For instance, a dating website? In that case, you’d want to include Facebook and Twitter icons, but a LinkedIn icon is much less important. Other icons might be included as well.

    I think a ‘share by e-mail’ icon is almost always necessary. That’s because no matter how many site visitors you have, you’ll almost always have a large number of them who are not active on the social networks. But they will share your stories and web pages with their friends. Give them that option with a ‘share by e-mail’ icon.