Posts tagged with “html5”

How to optimize the image use in HTML and CSS3?

Monday, 29 September, 2014

You’ll hardly find a website that doesn’t use images. One can’t overlook the fact that we’re living in a digital era, and thus, adding images help to increase engagement rate on your site. There are some stats that will further illustrate why adding images to a site is so important. According to a few sources, articles with images get 96 percent more views while a press release gain 45 percent views and so on. Plus, around 67% of consumers say that image-quality is very important for choosing and purchasing a product from an e-commerce site.

So, now that you’ve become convinced about adding images to your site make sure to embed them in the best possible way. Unfortunately, not all of us still understand how to place images in the website in the right manner. Remember, while adding images ensure that they’re relevant and helps to interact your message clearly, and are high in quality.

Did you know that search engine such as Google index your images just like text? That’s true, just like Google indexes the keyword placed in your text, similarly it deploys crawlers to index and rank your images as well. In order to make your images search engine optimized you’ll have to pay focus on trimming image sizes to optimize the site performance.

How to Work With Images in HTML?

In order to optimize your images for your website when using HTML as your choice of markup, you will have to understand about image tags that lets you insert an image on your site’s web page in the best possible manner. For example, let’s have a look at the following code:

2
<img title="Trending Product" alt="Some of the latest trending products of our company" src="images/products/trendingproduct.jpg" />

In order to use the image tag correctly, you’ll first have to understand about each and every attribute of the img tag, as listed below:

The title attribute:

When a user will hover over the image placed in your site, its title will be displayed in the form of a pop up. Now see the above code, here when your site visitors will move their mouse over the image, they’ll see a pop up with the text “Trending Product,” which will the name of your product (make sure to keep the title descriptive, and gives information about what the image is about).

The src attribute:

src also referred to as source is specifying the location where your image is stored – it can be either an URL or an image folder within your directory.

The ALT attribute:

Alt is the most important attribute of the image tag. The text within the Alt attribute is used when some doesn’t load or is being used by some visually impaired. Also, search engine uses to determine how to index an image. The alt attribute is very useful not only for the visually impaired, but also optimizes your SEO. Since, this attribute is so important make sure to use it correctly by giving right description about your image with relevant keywords.

Size of the image:

A lot of sites suffer one common problem while adding images that is slow page loading time. So, make sure to define the correct image size. So, if you don’t want to degrade your site’s performance ensure to cut down the image file size but without sacrificing it’s quality. For instance, if your image appears as 60×60, then use an image file of size 60×60. If you’re using a large-size image 600×600 image, and tells the browser to resize it to 60×60, the browser will still load the large image and later resize it to a smaller size. But make sure not to let your browser shrink the larger image to a small one. For this, you can make use of an image editing program instead.

How to Work With Images in CSS3?

The web is filled with lots of CSS tricks that helps to optimize the image, however here we’ve discussed about a single trick that you’ll find quite useful when you can’t change the image on your site’s page, because you don’t have access to HTML. You can achieve your objective using the CSS box-sizing property.

For example, if you want to replace an img tag on your site with an image that is hosted somewhere else, but don’t have access to the markup (as shown in the code below) you can use the box-sizing property to keep dimensions fixed and add the other (new) image as the background image.

1
2
3
4
5
6
<body>
<!-- .header across website on other pages with different children, so no background image is added-->
<div class="header">
<img class="newBanner" src="http://xyz1.com/banner.png">
</div>
</body>

Code after including CSS3 box-sizing property:

/* All in one selector */

1
2
3
4
5
6
7
8
9
10
.newBanner&nbsp;{
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: url(http://xyz2.com/mynewbanner.png) no-repeat;
width: 150px; /* Width of new image */
height: 234px; /* Height of new image */
padding-left: 150px; /* Equal to width of new image */
}

Conclusion

So, if you too want to use the image in the right way in HTML and CSS3, then hopefully this post will help you understand about how to use image tag correctly in HTML, and the CSS3 trick that let you replace an existing image with another one hosted elsewhere.

Ben Wilson is an enthusiastic writer and skilled WordPress developer. He has built up many WordPress website and also helped in  converting HTML to WordPress theme for many companies He likes sharing insightful knowledge about WordPress having more than half decade of experience.

20 Unbelievably easy HTML and CSS web designing tutorials for beginners

Thursday, 14 March, 2013
beginner level tutorials on html css tutorials

So you’ve managed to start your small business and the cheapest way to market is through a digital platform. However, creating a website from scratch is just a little too alien for you. On the other hand, hiring a web designer is just out of the question. You end up asking yourself, “What can I do?” Simple! Just learn how to use Dreamweaver and we’re all set! Wrong!

To be able to create a genuine and good website, you must have a good grasp on HTML and CSS. Knowing how to use Dreamweaver and other software applications of such is good, but it can only get you as far as “copying a template” and NOT designing your own website. These two languages make it possible for you to customize your website according to your needs and your market’s wants.

Hypertext Markup Language or HTML is the foundation of all websites. It is the language of which websites are encoded. Contrary to what most of us know, it is fairly easy to understand and simple to apply. CSS or Cascading Style Sheets on the other hand is an advanced addition to HTML. It applies a specific command to all pages so that you wouldn’t have to repeat HTML commands in every page.

There are many software applications in the market today that offer easy solution to putting up your own website. However, these don’t really address the issue of “creating” your own website. It’s more like a cloning procedure. Hence, the knowledge of HTML and CSS codes are therefore inimitable. That is why in this post, we have gathered 20 easy, simple beginner level tutorials on web designing using HTML and CSS.

Basics of CSS

Basics of CSS
CSS Basics has a holistic approach to guiding their audience in understanding CSS codes. If it’s your first time to encounter CSS, this is the tutorial for you. Learn how to separate content from style and a lot more.

CSS Tricks

css tricks and tutorials
Is mostly tutorials by Chris Coyier and has a fun approach to learning CSS and HTML. There are videos, demos, snippets, and forums available for your heart’s content.

Design and Code Your First Website in Easy to Understand Steps

Design and Code Your First Website in Easy to Understand Steps
This tutorial will help you learn to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give them the tools to write your own standards-compliant websites!

CodeNique – Free Tutorials on HTML & CSS

CodeNique - Free Tutorials on HTML & CSS
This showcases brief and basic tutorials on HTML, XHTML, CSS, and JavaScript. Being new to web designing you are sure to understand their big collection easily.

HTMLdog – Beginner level tutorials on HTML & CSS

Beginner level tutorials on HTML & CSS
This is not only for beginners but also for intermediate and professional levels. Their wide array of articles, references, and examples make HTML and CSS easy to learn.

From PSD to HTML: Building a Set of Website Designs Step by Step

Design and Code Your First Website in Easy to Understand Steps
This tutorial will take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

HTML Basics

HTML Basics
HTML.net is a free online tutorial for HTML and CSS that support a wide range of different languages. Learn HTML and CSS codes in your native language.

Friendly Bit – Beginner’s guide to CSS

Beginner’s guide to CSS
This is a blog that focuses on web development with good and simple examples making it very easy to understand and learn. CSS has never been this easy!

W3 Schools – Learn to Create Websites

W3 Schools - Learn to Create Websites
This boasts of their easy-to-navigate format. Learn CSS and HTML fast by checking out their references and examples features. Their wide range of tutorials isn’t just for beginners but also for advanced CSS and HTML users as well.

Quackit – HTML – CSS Tutorials for beginners

HTML - CSS Tutorials for beginners
Instructs you to making a website from a beginner’s point of view up to an advanced pace. They have tutorials from the very meaning of HTML and CSS up to publishing and hosting your website design.

F1 website Design – Learn how to make a website

Learn how to make a website
F1 website design offers a complete beginners package in learning the basics of HTML and CSS. You don’t really have to know anything about it; all you need to do is to get started with their tutorials.

MSDN Beginner Developer

MSDN Beginner Developer
Learn the foundations of internet and web development in MSDN. They offer multiple levels of tutorials from beginning to advanced level. All you need to do is engage.

H Scripts – Beginners Guide to HTML

Beginners Guide to HTML
Has a large collection of web developing resources for webmasters. Such resources are tools, tutorials, references, scripts, images and a lot more.

VineyarDesigns – Free Flash CS3 Tutorial

Free Flash CS3 Tutorial
Explains the basic concepts of flash CS3 and CS4. Vineyardesigns approaches flash in a very simple way you won’t even have to have basic knowledge about it.

Web Developers Notes

Web Developers Notes
Has free tools, tips, notes, web developing tutorials on CSS and HTML, JavaScript, flash, SQL, web graphics and promotions. Learn their basics and start your web design.

Photoshop tutorials for beginners

Photoshop tutorials for beginners
Features their short movies about their tutorials on how to apply what you have just learned; discusses its practicality and importance. Learning basic Photoshop has never been more fun.

jQuery for absolute beginners

jQuery for absolute beginners
Is an official resource for all issues concerning jQuery. It’s like a library of tutorials, documentation, and examples on jQuery.

Free Flash Tutorials

Free adobe flash tutorials
Flash tutorials for beginners galore followed by Flash Animation and Flash Actionscript. So if you’re a beginner in Flash, learn the basics here.

Photoshop Beginners Guide

photoshop beginners guide
This is a blog dedicated to everything about Photoshop. From it’s basics to advanced phase. It has tutorials, tips, tricks, and everything you need or might need to know.

HTML Best Practices for beginners

Design and Code Your First Website in Easy to Understand Steps
Has tutorials and articles that showcases the basics of HTML and CSS especially its best practices for beginners. Web developing has never been easier!

This guest article was written by Elmor G. Go, who is in constant pursuit of the unknown and unparalleled. He likes to learn new and exciting things from marketing to graphic designing. A jack of all trades trying to get the best slice out of the cake called life. As a member of DigitalRoom’s creative team, he is involved in designing free print templates.

Pure CSS – HTML accordion using Details & Summary elements

Monday, 11 June, 2012

Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets.

HTML5 – CSS3 duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign such as animations, user interaction, gaming, geolocation, 3D modeling, visualizations etc… those things were possible only with Javascript or flash earlier.

Demo

Before we continue to the css/html code, let’s take a look at the fully-functional accordion widget here…

Details and Summary Elements

By using the <details> and <summary> elements together we can create an accordion like toggle widget.
As per W3C specification the detail element is defined as

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element will be hidden by default unless the open attribute is set.
W3C defines the summary element as

The <summary> tag defines a visible heading for the <etails> element. The heading can be clicked to view/hide the details.

However it is not always necessary to define the summary element, if there is no child summary element, the user agent will provide its own legend.

Usage – Syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>

Browser Support

It is really unfortunate that only chrome and android browser at the moment offer full native support to the detail and summary elements. Opera announced that they will soon support this feature. For the time being wa can get it work on other browsers with the help of polyfills. There is an awesome jquery fallback script created by Manuel Bieh which will do the trick on other browsers.
source: http://caniuse.com/details