Follow us on :  

Lessons for HTML

Lesson 21: Block and Inline elements

In HTML, elements are categorized into inline elements or block elements. Based on these classifications, the behavior of elements may vary. Block elements Some of the HTML elements like the headings and paragraph elements form a block structure in web pages. When these elements occur in the web page, they are rendered as separate blocks ...


Lesson 22: Semantics and Structure

Semantics Semantics in the context of HTML refers to the use of the appropriate elements for the appropriate meaning.  It is possible to make a web page entirely out of div and span elements. We can style this page to exactly match the normal browser style. In fact, most of the users of the web ...


Lesson 23: Tables

Tables Tables are a way to represent data that have correlation when arranged in rows and columns. They are useful since we can infer info easily from them. We use the <table> element in order to describe tables in HTML. There are many elements that are related to tables. Learning the various elements for constructing ...


Lesson 24: Tables and Accessibility

Table Captions You can include a caption for a table by using the <caption> element. The <caption> element occurs just after the starting tag of <table> element. The content of the table element is shown in browsers and read aloud by screen readers. Users having screen readers can figure out what the table is about ...


Lesson 25: Accessible Images

Alternative Text One of the ways to make images more accessible to visitors using screen readers is to include alternative text for all images. We can include alternative text by using the alt attribute. The alternative text is shown when an image is unavailable. If the alternative text is descriptive, it might be useful when ...


Lesson 26: Vector Images

What are Vector images? Normally we use images in formats like jpg, png, and gif for web pages. These are scalar images. These images are made up of a fixed number of pixels. Each pixel can represent a single color. These pixels are arranged in rows and columns to form an image. When these pixels ...


Lesson 27: Responsive Images: Resolution Switching

Need for Responsive Images At the beginning of the web, web pages were viewed only on desktop screens. As mobile technology has improved over the years, more people began to access the Internet from their smartphones. This has lead to devices that support the internet having different sizes, orientations, and resolutions. Responsive design has emerged ...


Lesson 28: Responsive Images: Art direction

Need for Art Direction Resolution switching is an effective technique for responsive images for most images. This is especially true for square images. But in some other cases, this is not an effective solution. Traditionally, desktops have a landscape orientation. So many images may be in landscape orientation. But recently mobile phones have become popular. ...


Lesson 29: Audio and Video

Audio element The audio element is used for adding audio tracks to the web page. Just like the picture element the audio element has multiple source elements that provide the same track in multiple formats. The browser chooses the first source that it supports. If the browser has no support for audio, we can specify ...


Lesson 30: Embed and Object elements

History of Embedding Content Many years ago the support for media like audio and video was lacking. Many plugins like Adobe Flash rose to the occassion. They became quite popular and were adopted by many websites. But these plugins were insecure and had potential security flaws. There were many plugins that provided additional features not ...