Understanding HTML5 Structure

In this article we will discuss HTML5, what should we know from HTML5? Let’s look at this article.

HTML5 is the latest version of HTML whose status has been recommended by the W3C although it is not 100% perfect, but some are already usable.

HTML5 is very powerful, to the point that the late Steve Jobs once said HTML5 as a replacement for Flash, Steve Jobs’ words influenced programmers who wanted to develop Flash a little more. Of course make some of them move to HTML5. Steve Jobs also said that Flash is heavy and wasteful of battery. And Apple won’t support Flash anymore.

HTML5

HTML5 Logo

An explanation of the HTML5 logo You can read the full details on W3

The following is an HTML5 logo that has been installed on many websites that have implemented HTML5 on their website

Animating Gallery Pages Quickly and Easily

Gallery is one of the important elements on the website, the gallery is usually used to display photos of activity or event documentation.

Some people are a little difficult to beautify this gallery page.

In this article, we will show you the easiest way to create a gallery page for your website, what we made can also be combined with the techniques in our previous tutorial, namely Creating a Popup Image Gallery with Jquery and HTML5.

To create a gallery page, follow these steps.

  1. Creating HTML Structure

First create the HTML structure here, pay attention to the javascript, css styles, and html body, how come they are all empty?

Don’t worry because we will fill it with a script that we will get from the website “lift effect for lists”.





Gallery

  1. After the HTML structure is created, now open the website: lift effect for lists
  2. Then set the existing effect options as you like, we tried with settings like the picture below.
  3. Then click the Generate button

Then you will be given HTML, CSS and Javascript/Jquery code.

Now put each code in the HTML structure that we created above.

  1. Done, here is the resulting DEMO, please select the effect you want for better results.

Conclusion:
This method is used to help you create a first impression when the page is opened only
For more information, you can combine it with our previous tutorial, namely: Creating a Popup Image Gallery With Jquery and HTML5

Ok that’s it for this tutorial

Creating Dropdown Menus With Jquery and CSS

Creating a dropdown menu with css, the menu is the most important thing in a website, a good menu will make it easier for visitors to explore our website, especially when our website turns out to have a page consisting of sub and sub sub pages.

In this tutorial we will try to create a Dropdown menu with CSS, and we will beautify the menu we created with a little help from Jquery.

In previous articles, we have also made sample menus several times, maybe they can be used as other references.

Tips for Creating Horizontal Menus With CSS
Creating Menu Slides With CSS and Jquery
OK, let’s get started.

HTML Structure
Here we need to prepare the HTML structure first, create a file with the name index.html, then write the following code.

Creating a Fixed Position and Responsive Menu

This article will discuss about positioning in CSS, we will make a case study of a menu whose position is fixed, commonly called a floating menu, or flying menu or fixed position menu.

The menu will not move even if we scroll down.

This style is currently being applied by many web designers, many social media websites also apply a menu that has a fixed position, for example Twitter, Facebook, Pinterest also apply it.

Okay, let’s just start making.

First prepare the index.html file

insert 2 fonts from google web font in the head and /head section of the html file.



Then create an HTML structure as follows

Trend Web Design 2012 version of T-WD

Trends in the world of web design are always changing, now there are trends in frameworks, responsive web, and more. If we remember some time ago almost all website layouts are made with tables. Now almost all of them have tables, or do not use tables to form the layout. But tables are of course still very useful in many situations, but not for web view frameworks.

In writing on the last day of 2012, Tutorial-webdesign.com will discuss some of our own version of web design trends during 2012.

  1. Responsive Web Design
    The year 2012 is arguably the year of Responsive Web Design, Responsive web design is a website display design that can adjust the screen size of the device when the website is opened. So the website can be opened with Mobile, Tablet PC, Desktop, Widescreen TV, etc. without making it difficult for visitors to enjoy the existing content.

responsive-web-design

This can be proven by the number of websites that have changed their design from previously unresponsive to responsive, including Microsoft.com, Mashable.com, etc.

And there are many tools that can be used to make it easier to create responsive web designs, such as Frameworks, Plugins, and others.

  1. CSS3 and HTML5
    html5-css3

It is undeniable, CSS3 and HTML5 were discussed a lot during 2012, many websites are starting to use the advanced features of HTML5. Dipenghunjung 2012 W3C has also stated that HTML5 features are complete. The many CSS3 Generator and HTML5 Starter templates are also increasingly making people interested in using these 2 technologies.

  1. Framework & Grid System
    HTML & CSS Framework is also a byword during 2012

Zurb Foundation, Twitter Bootstrap, Skeleton could be some that many designers are starting to like.

Previous frameworks such as the 960 Grid System are also still widely used.

twitter-bootstrap

  1. Single Page, Parallax & Fixed Navigation
    Websites consisting of only 1 page (Single Page) were widely used during 2012:

http://www.apple.com/iphone/features/

http://www.visualboxsite.com/
Usually this single page is combined with interesting effects from Jquery Scroll or Parallax such as (Scrollolama)

http://titanic.q-music.be/
http://www.webdesigner-jakarta.com
This type of web design usually also implements Fixed Navigation (Menu whose position does not change place). For example, the menu on the Twitter and Facebook websites.

parallax-effect-jquery

  1. Infinite scroll
    We’ve always been familiar with the term paging, or website page numbering with numbers and links for the Next Page or Previous page, such as Google. However, during 2012 many designers did not use Paging/Pagination, but preferred Infinite Scroll, where the website will load other content if we scroll. As if it’s endless, usually Social Media websites and news websites use this method, because of their large content. You can prove it on the Facebook, Twitter, Pinterest, Mashable websites.

infinite-scroll

  1. Custom Font Faces
    Some time ago we used to use Arial, Verdana or just standard fonts to apply on our website. But now we can say that we can use all fonts, the website becomes more attractive, it doesn’t need to be designed in photoshop, we can use the font we want just by including the font with its CSS3 Font-face feature, or we can simply embed it from Google web fonts, Adobe Edge, or Typekit.

font-face

  1. Ribbon and Circle
    There seem to be a lot of Web Designers using the Ribbon on their websites during 2012.

ribbon

In addition, the Circle shape is no less trendy.

CircleNavigationEffect

This could be due to the CSS3 feature which has also made it possible to create web element forms like that.

  1. Big Image / Background
    We know that images are the elements that can most attract the attention of website visitors, the use of super large images is widely used by web designers in 2012.

big-image

  1. Minimalist & Simple
    Minimalist designs are still popular this year, although many people think that minimalist designs are made lazily, and there is no art, but in the web world, minimalist designs are widely used because of many considerations too, Bandwidth, Acceptable Almost all ages, and easy to match colors.

minimalist

  1. Infographics
    The last thing we have observed that it is widely used this year is the use of infographics instead of web pages, the use of infographics has become a trend because many people think that visualizing images and interesting writing can make people understand more about the intent of the content presented.

infographic

Metro Style
In this year too

Learn HTML5 and CSS3

HTML5 and CSS3 are not new, it’s been a few years since we heard the two words. However, it seems that in 2013 HTML5 and CSS3 will be increasingly used. It’s also because the W3C has declared that HTML5 features are complete.

HTML5 and CSS3
HTML5 and CSS3

HTML5 and CSS3 are the future of websites, in the future HTML5 and CSS3 will be more widely used. So there’s no harm in us starting to study it from now on. Many people have used HMTL5 but that doesn’t mean we’re too late to learn it from now on.

This post will not explain at length, but we just want to urge friends in Indonesia to start and don’t hesitate to use HTML5 and CSS3 on the website you create. Because the browser already supports, the resources and tutorials are numerous.

For those of you who want to know more about HTML5 and CSS3, maybe the following site can increase your knowledge about HTML5 and CSS3.

Visit -> HTML FIVE WOW

Tutorial-Webdesign.com will also try as much as possible to write some interesting things about HTML5 and CSS3

We also invite you all to write what you learn on this site, share it with others, from community to community.

Some sites that might be able to further increase your knowledge about HTML5 and CSS3

10 Free Responsive Web Templates

We will show a Free / Free Responsive Template in this article, hopefully it will be useful for speeding up the work of friends.

Responsive web design is currently being discussed a lot by web designers and web developers around the world. Several large-scale websites have also started migrating their websites to be responsive, so that they can be opened on almost all devices, especially mobile phones. tablet computers and personal computers.

Many designers deliberately create HTML and CSS templates to be used by others for free to help speed up website creation, here we show some free templates that can be used to create websites or to learn from what other programmers have made.

Brownie

Creating Fixed Menu When Scrolling With CSS3, Jquery & HTML5

This time tutorial-webdesign.com will try to make a menu whose position is always on top (fixed) after the web page is scrolled, not just above, the menu that was previously integrated with this website page will change color as well. The point here we will learn how to remove and add classes to the html tag when the menu is scrolled with the help of jquery.
Slightly different from what we made earlier in the tutorial Creating a Fixed Position and Responsive Menu where we don’t need javascript for that, because we put the menu directly at the top of the website page with CSS.

To change the shape of the menu like that, of course we need Javascript to get the event when the mouse is scrolled, this time we use Jquery to practice deleting and then adding a class with another name when the website is scrolled.

Okay, let’s just make the HTML structure, here we try to use HTML5 tags for practice.

HTML Structure

The code above is our HTML structure in brief, the details will be described below each of the contents of each section.
header
The header section is generally filled with the title and description of the website (tagline).

Fixed Menu When Scroll

Navigation
In this section is our menu, it’s simple, it’s just a div in which there is a menu list (ul > li)

Learn HTML5 With Videos

Learning HTML5 Watching video tutorials and examples is a good thing, there are many ways to learn, including reading, asking, listening and seeing. This time we will try to learn by watching videos about HTML5 that we may not know about.

Many people say HTML5 is the future of websites, the new features of HTML5 are quite a lot. HTML5 when combined with CSS3 will be very good results, coupled with knowledge of JavaScript it will produce something powerful.

HTML5
Image by slavik_V

HTML5 features such as Canvas, Local Storage, Web SQL Database, Drag & Drop, Web Socket, Audio, Geo Location, Input type (Validation), Semantic Markup, and others are worth learning immediately.

Here we can see how and what we can learn from HTML5.

What is HTML5?

Tomomi Imura, “Mobile Web: Real Life Examples of HTML5 for Mobile”

Learn About HTML5 and the Future of the Web

Introduction to HTML 5

Cool Website Examples With HTML5

HTML5 is amazing, HTML5 is called the future of website technology. HTML5 has many advanced features compared to the previous HTML.

HTML5 will be more sophisticated when combined with CSS3 and Javascript like Jquery.

In this post, we will show you some sophisticated websites made using HTML5.

  1. James Anderson 613