Showing posts with label HTML. Show all posts

Wednesday, September 23, 2020

HTML iFrame | Video and Audio

Introduction to iframe

An iframe or inline frame is used to display external objects including other web pages within a web page. An iframe pretty much acts like a mini web browser within a web browser. Also, the content inside an iframe exists entirely independent of the surrounding elements. The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline Frame.

The basic syntax for adding an iframe to a web page can be given with:

<iframe src="URL"></iframe>

The URL specified in the src attribute points to the location of an external object or a web page.

Setting Width and Height of an iFrame

The height and width attributes are used to specify the height and width of the iframe.

Example

<iframe src="hello.html" width="400" height="200"></iframe>

You can also use CSS to set the width and height of an iframe, as shown here:

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

Note: The width and height attribute values are specified in pixels by default, but you can also set these values in percentage, such as 50%, 100% and so on. The default width of an iframe is 300 pixels, whereas the default height is 150 pixels.

Removing Default Frameborder

The iframe has a border around it by default. However, if you want to modify or remove the iframe borders, the best way is to use the CSS border property.

The following example will simply render the iframe without any borders.

Example

Similarly, you can use the border property to add the borders of your choice to an iframe. The following example will render the iframe with 2 pixels blue border.

Example

Using an iFrame as Link Target

An iframe can also be used as a target for the hyperlinks. An iframe can be named using the name attribute. This implies that when a link with a target attribute with that name as value is clicked, the linked resource will open in that iframe. Let's try out an example to understand how it basically works:

Example

 <p><a href="https://www.beta-labs.in" target="myFrame">Open Beta-Labs.in</a></p> 

Embed YouTube video using iframe

You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many more properties for the video.

Following are some steps to add YouTube video on your webpage:

Goto YouTube video which you want to embed.
Click on SHARE ➦ under the video.
Click on Embed <> option.
Copy HTML code.
Paste the code in your HTML file
Change height, width, and other properties (as per requirement).

iframe Important attribute

src: The src attribute is used to give the pathname or file name which content to be loaded into iframe.
name: It gives the name to the iframe. The name attribute is important if you want to create a link in one frame.
height: It defines the height of the embedded iframe, and the default height is 150 px.
width: It defines the width of the embedded frame, and the default width is 300 px.
frameborder: It defines whether iframe should have a border or not. (Not supported in HTML5).
allowfullscreen: If true then that frame can be opened in full screen.
sandbox: This attribute is used to apply extra restrictions for the content of the frame

allow-forms: It allows submission of the form if this keyword is not used then form submission is blocked.
allow-popups: It will enable popups, and if not applied then no popup will open.
allow-scripts: It will enable the script to run.
allow-same-origin: If this keyword is used then the embedded resource will be treated as downloaded from the same source.

srcdoc: The srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports).
scrolling: It indicates that browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)

HTML5 - Audio & Video

HTML5 features include native audio and video support without the need for Flash. The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Embedding Video

HTML5 Video tag or <video> is used to add videos on a webpage. Video tag supports mp4, ogg, mov and H.264 files. To embed a video, create a video tag. `src` is compulsory attribute for video tag. `controls` attribute can add play/pause button, video timeline, mute button, volume controller, full screen, subtitles options on player. Here is the simplest form of embedding a video file in your webpage –

Example

<video src = "intro.mp4" width = "425" height = "240" controls>
Your browser does not support the <video> element.
</video>

You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format.

Video Attribute Specification

The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control −
src: The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.
width: This attribute specifies the width of the video's display area, in CSS pixels.
height: This attribute specifies the height of the video's display area, in CSS pixels.
controls: If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.
autoplay: This Boolean attribute if specified, the video will automatically begin to playback as soon as it can do so without stopping to finish loading the data.
loop: This Boolean attribute if specified, will allow video automatically to seek back to the start after reaching at the end.
autobuffer: This Boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play.
preload: This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
poster: This is a URL of an image to show until the user plays or seeks.

Embedding Audio

HTML5 Audio tag is used to play audio files, like mp3, ogg and AAC. All browsers supporting audio tag are having built-in player.
The easiest way to include Audio Tag in a webpage is to use audio tag. `src` is compulsory attribute in audio tag. `controls` attribute can show control bar to user. User can play/pause, change timeline, mute, and increase the volume of audio playing using controls.

HTML5 Audio Example

<audio src = "sound.wav" controls autoplay>
        Your browser does not support the <audio> element.   
</audio>

You can use <source>; tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and the browser will use the first recognized format. Audio Attribute Specification almost the same as the video. The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control.

Monday, August 3, 2020

Responsive Web Layout

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites. Responsive web design is broken down into three main components:

1. flexible layouts

2. media queries

3. flexible media

1. Flexible Layouts

The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

Responsive Page layouts: Say you’re looking to provide three different responsive page layouts: one for desktops, one for tablets (or laptops), and one for smartphones. Which page dimensions should you target as your cutoffs (e.g., 480px)?

2. Media Queries

Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.

Media queries allow you to customize the presentation of your web pages for a specific range of devices like mobile phones, tablets, desktops, etc. without any change in markups. A media query consists of a media type and zero or more expressions that match the type and conditions of a particular media features such as device width or screen resolution.

Syntax

@media media type and (condition: breakpoint) {
// CSS rules
}

We can target different media types under a variety of conditions. If the condition and/or media types meet, then the rules inside the media query will be applied, otherwise, they won’t.

Breakpoints: Breakpoints are maybe the most common term you will hear and use. A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries. Let’s go back to our example at the beginning:

@media (max-width: 480px) {

        .text {
          font-size: 16px;
        }
  }

Here, the breakpoint is 480px. Now the media query knows when to set or overwrite the new class. Basically, if the width of a device is smaller than 480px, the text class will be applied, otherwise, it won’t.

Now let’s see some common breakpoints for widths of devices:

· 320px — 480px: Mobile devices

· 481px — 768px: iPads, Tablets

· 769px — 1024px: Small screens, laptops

· 1025px — 1200px: Desktops, large screens

· 1201px and more — Extra large screens, TV

As I said above, these breakpoints can differ and there is no standard exactly defined, but these are some commonly used ones.

Set the viewport: Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.

<!DOCTYPE html>

<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    …
  </head>
  …

Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels. A device (or density) independent pixel being a representation of a single pixel, which may on a high density screen consist of many physical pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

3. Flexible Media

The final, equally important aspect to responsive web design involves flexible media. As viewports begin to change size media doesn’t always follow suit. Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.

One quick way to make media scalable is by using the max-width property with a value of 100%. Doing so ensures that as the viewport gets smaller any media will scale down according to its containers width.

img, video, canvas {
    max-width: 100%;
}

See the Pen Responsive Web Layout-1 by PANKAJ (@pankkap) on CodePen.

Friday, July 17, 2020

Live your Website with GIT | GitHub

Nowadays software development takes place in a distributive way. This focuses on one such technology that supports distributed software development i.e GIT. According to the latest Stack Overflow developer survey, more than 70 percent of developers use Git, making it the most-used VCS in the world. Git is commonly used for both open source and commercial software development, with significant benefits for individuals, teams and businesses.

Popular companies that use Git and GitHub for source code hosting:

Netflix
Amazon
Airbnb
Google
IBM

What is GIT?

Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git relies on the basis of distributed development of a software where more than one developer may have access to the source code of a specific application and can modify changes to it which may be seen by other developers.
Initially designed and developed by Linus Torvalds for Linux kernel development in 2005.
Every git working directory is a full-fledged repository with complete history and full version tracking capabilities, independent of network access or a central server.
Git allows a team of people to work together, all using the same files. And it helps the team cope up with the confusion that tends to happen when multiple people are editing the same files.

What is GitHub?

GitHub, developed in 2008, is a web application that hosts Git repositories. The team that started GitHub saw that Git could solve important problems for many teams – but Git itself is often difficult to use. GitHub adds a bunch of collaboration and exploration tools on top of Git to help you (and your team) be more productive.

For instance, GitHub makes it easy to share code between multiple computers and developers. It's become the centralized organization tool of the open-source community and, in turn, is used by thousands of companies and teams. Some GitHub users have one repo they work with every day, some have hundreds.

Some of the most important tools GitHub layers on top of Git include:

Pull Requests which are a way for developers to propose changes and solicit feedback/discussion from other developers (called Code Review).
Issues which developers use to track bugs, enhancements, or other requests that are associated with a given repository.

Git | GitHub in Visual Studio Code and Live your First Website

In this, you will learn how to clone an existing Git repository from GitHub. We will use the Visual Studio Code, but the same processes apply for using any Git-compatible client with GitHub.

Step-1: Download the Software and install it.

Download Visual Studio Code

Download Git-SCM

Step-2: Create a Github account

Goto www.github.com and sign into your account. If you’re a new user, you can simply sign-up. You’ll have a username from here. Let us say that it’s your_username

Step-3: CONFIGURING GIT

Go to the Git Bash terminal and type this to configure git

git config --global user.name “your_username”

Now type command to link your email too.

git config --global user.email “your_emailid”

Step-4: Create a Github Repository

Go to your github account and create a repository with a name( lets say name of your project). We are creating a repository with the name Fullstack-1_2020

Step-5: Clone a Repository

Copy the repo URL to your clipboard, in this example, https://github.com/pankkap/Fullstack-1_2020.git

Step-6: Open a new VS Code window.

Press Ctrl+Shift+P to show the Command Palette. The Command Palette provides an easy and convenient way to access a wide variety of tasks, including those provided by 3rd party extensions.

Execute the Git: Clone command. It may help to type “Git” to bring it to the shortlist.