<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navbar-header">
<img src="img/logo.png" / alt="selva">
</div>
</div>
<div class="container theme-showcase">
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/ alt="">
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a href="#">JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left"/>
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the <a href ="#">Job Board ></a>
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span><img src="img/article-logo.png" /></span>
<span>ARTICLES</span>
<span>COLUMNS</span>
<span>BLOG</span>
<span>TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span>ABOUT</span>
<span>AUTHORS</span>
<span>MASTHEAD</span>
<span>CONTRIBUTE</span>
<span>STYLE GUIDE</span>
<span>CONTACT</span>
<span>SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<p class="footer-title">Shopify Expert</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
I have an one doubt in in HTML. When add image in HTML, the alt attribute is need or not.
But I know the use of alt atrribute, when remove this attribute, there is no change in my web page.
So I want to know the alt attribute is needed or not?
The alt tag is used to make your website more accessible to those using screenreaders and such or non-visual browsers, as they won't be able to view the image.
If you have an alt tag, it will be used instead.
http://www.w3.org/QA/Tips/altAttribute
A text equivalent brings the following benefits to your web site and its visitors in the following common situations:
Nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images.
Some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page.
Search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.
The alt attribute is required according to the HTML 4.01 specification, but your page will display whether the alt attributes are present or not. It will only display differently if you turn off image loading in your browser.
It's up to you whether you'd like to make your website more accessible to those not willing or able to view images or not.