NATARAJA MURTHY

Posts

Showing posts from September, 2020

Media

Media | HTML: Media is the almost everything, is like audio, video, recordings, images, animations and so on. Here is the media.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Media in Html</title> </head> <body> <video src="multimedia.mp4" height="312" width="420" controls> Your browser not support video files. </video><br><br> <audio src="nimbus.mp3" controls> </audio><br><br> <iframe src="https://www.youtube.com/embed/q-72epsxMUk" width="420" height="312"></iframe> </body> </html> Web view of Html: Here is the Video:

Form Elements

Form Elements | HTML: Form elements are using to get the data from user based on type data type. List of Form Elements: Input Select Text Area Button Fieldset and Legend Input Types List: Email Phone Password Check Box File Date Reset Input Attributes List: Value Read only Disabled Size Min, Max and Maxlength Auto focus Auto Complete Place Holder Height and Width Form Attribute List: Form Form Action Form Method Form Target Form Novalidate Here is formelements.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/stylesheet.css"> <title>Form Elements</title> </head> <body> <form class="form" action="submit.html" method="post" id="form1"> <fieldset> <legend>Personal Info : </legend> <label for=&quo

Forms

Forms | HTML: Forms are using to get the data from user. The data will be used in server side. Here is the forms.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="css/stylesheet.css"> <meta charset="utf-8"> <title>Forms</title> </head> <body> <p>Please Fill the Form</p> <form class="form" action="submit.html" method="post"> <label for="fname">First Name:</label><br> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last Name:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="radio" id="male" name="gender" value="m

Head

Head | HTML: Head is the hidden part in web page but it contains the effective information of web page. Head Elements List: 1.title 2.link 3.style 4.script 5.meta 6.base Here is the head.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="author" content="Nataraja Murthy"> <base href="images/" > <title>details of head tag</title> <link rel="stylesheet" href="css/stylesheet.css"> <style media="screen"> body { background-color : lightblue; } </style> <script src="js/javascript.js"></script> </head> <body> <hr> <img src="park.jpg" alt="park"> <p>Thank you for Watching...</p> </body> </html>

Java Script

Java Script | HTML: Java Script is the web programming language. It creates the behaviour to the html elements. Here is the Javascript.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="css/stylesheet.css"> <title>JavaScript in Html</title> </head> <body>  <p>Here is the way to use JavaScript</p><br>  <script> function oursScript() { document.getElementById("script001").innerHTML = "First JavaScript!"; } </script> <br> <button type="button" onclick="oursScript()">Click</button><br> <p id="script001"></p> <br>  <script src="js/javascript.

Iframes and File Paths

Iframes and File paths | HTML: iframes are using to get the other documents and File paths are using to get the files by suitable paths. Here is the iframesandPaths.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Iframes and Paths in Html</title> </head> <body>  <iframe src="ClassesAndIds.html" style="height:505px;width:300px;" title="Iframe"></iframe>  <img src="park.jpg" alt="park in current folder"> <img src="images/park.jpg" alt="park in images folder"> <img src="/images/park.jpg" alt="park in root of current web"> <img src="../images/park.jpg" alt="park in one level up folder"> </body> </html> Web view of Html: Here is the Video:

Classes And IDs

Classes and IDs | HTML: Classes and IDs both are using to access the particular element in CSS or in JS. Here is the ClassesAndIds.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <style> .class { font-size: 20px; background-color: yellow; } #id001 { font-size: 30px; background-color: orange; } #id007 { font-size: 40px; background-color: lightblue; } </style> <title>Classes and Ids</title> </head> <body>  <div class="class"> <h3>Class</h3> <p>bla bla bla</p> </div> <span class="class">bla bla bla</span>  <div id="id001"> <h3>Id</h3> <p>bla bla bla</p> </div> <span id="id007">bla bla b

Lists

Lists | HTML: Lists are presenting the items with or without order. Lists: 1. Ordered List 2. Unordered List Here is the list.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Lists in Html</title> </head> <body> <h3>Here is the details of lists in Html</h3>  <ol type="1"> <li>a</li> <li>b</li> <li><img src="images/park.jpg" alt="park"></li> </ol>  <ul style="list-style-type:none" > <li>1</li> <li>2</li> <li><a href="https://www.who.int/">WHO</a></li> </ul> </body> </html> Web view of Html: Here is the Video:

Description Lists

Description Lists: Description lists similar to lists but providing additional description to every item. Here is descriptionlists.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Description Lists in Html</title> </head> <body> <h3>Here is the Description List</h3> <dl> <dt>1</dt> <dd>One</dd> <dt>2</dt> <dd>Two</dd> <dt>3</dt> <dd>Three</dd> </dl> </body> </html> Web view in Html: Here is the Video:

Block and Inline

Block and Inline | HTML: Block elements are occupies entire width of web page and they are begins with new line but Inline elements are occupies required width and they are not begin with new line. Here is the blockandinline.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Block and Inline Elements in Html</title> </head> <body style="background-color:#FFFFFF;font-size:30px;"> <h3>Here is the Details of Block and Inline Elements</h3>  <div style="color:green;">Here is the examples : h1 to h6, p, table, tr,<p>hello</p> th, td, ol, ul and li</div>  <p>Here is the examples : <span style="color:orange;">a, img, b, i, sub, sup, strong, abbr, acronym, q, and map </span></p> </body> </html> Web view of Html: Here is t

Images

Images | HTML: Images can impact more than words. So it is easy to deliver the information. Here is the images.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="css/stylesheet.css"> <title>Images in Html</title> </head> <body>  <picture> <source media="(min-width: 525px)" srcset="images/nature.jpg"> <source media="(min-width: 350px)" srcset="images/lights.jpg"> <img src="images/park.jpg" alt="flowers"> </picture> </body> </html> Web view of Html: Here is the Video:

Maps

Maps | HTML: Maps are well designed of information. They are easy to understand by viewers. Here is the Maps.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <style> /* background image */ body { background-image : url('images/people.jpg'); background-repeat: no-repeat; background-size : cover; background-attachment : fixed; } </style> <title>Images in Html</title> </head> <body >  <img src="images/covid19.jpg" alt="corona" usemap="#coronamap"> <map name="coronamap"> <area shape="circle" coords="389,180,125" href="https://en.wikipedia.org/wiki/Coronavirus" alt="corona virus"> </map> </body> </html> Web view of Html: Here is the video:

Links

Links | HTML: Links are useful to move to other web pages or particular position in same page. Links : 1. links 2. color links 3. link bookmarks. Here is the links.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <style> a:link { color : green; } a: visited { color : orange; } a:hover { color : pink; } a:active { color : yellow; } </style> <title>Links in Html</title> </head> <body>   <p><a href="#A1">go to Absolute URL</a></p> <hr>  <h1>Here is the Relative URL, which is in local folder.</h1> <a href="ima

Quotations

Quotations | HTML: Quotations gives special meaning to normal text. List of Quotations: 1. blockquote 2. quote 3. abbreviation 4. bi-directional override 5. citation 6. address Here is the quotations.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="css/stylesheet.css"> <title>Quotations in Html</title> </head> <body> <p>Here is the blockquote:</p> <blockquote cite="https://en.wikipedia.org/wiki/World_Health_Organization"> To provide leadership, strengthen governance and foster partnership and collaboration with countries, the United Nations system, and other stakeholders in order to fulfill the mandate of WHO in advancing the global health agenda. </blockquote>. <p>Here is the <q>Build a future where people

Formatting

Formatting | HTML: Formatting means adding special format to normal text. List of Formats: 1. bold text 2. italic text 3. importent text 4. emphasized text 5. marked text 6. deleted text 7. inserted text 8. smaller text Here is the Formatting.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="css/stylesheet.css"> <title>Text formatting in Html</title> </head> <body> <p>Here is the <b>Bold tag</b></p> <p>Here is the <i>italic tag</i></p> <p>Here is the <strong>importent tag</strong></p> <p>Here is the <em>emphasized tag</em></p> <p>Here is the <mark>mark tag</mark></p> <p>Here is the <del>delete tag</del></p> <p>Here is the <ins>inserted tag</ins><

Tables

Tables | HTML: Tables are used to organize the data in well understanding manner. Here is the tables.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Tables in Html</title> </head> <body> <table border="5px" bordercolor="green" width="50%"> <caption><h3><b>Students Details</b></h3></caption> <tr> <th>Id</th> <th>Name</th> <th>Branch</th> </tr> <tr> <td>001</td> <td>Abc</td> <td>25</td> </tr> </table> </body> </html> Web view of Html: Here is the Video:

Subscript and Superscript

Subscript and Superscript | HTML: Subscript means script or text below the normal line and Superscript means script or text above the normal line. Here is the SubandSup.html:  <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Subscript and Superscript</title> </head> <body> <h1>Here is the <sub>Subscript</sub></h1> <h1>Here is the <sup>Superscript</sup></h1> </body> </html> Web view of Html: Here is the Video:

Attributes in Html

Attributes | HTML: Attributes are using to make elements more reliable and usable. Syntax: <element attribute_name="attribute_value">content</element> List of few Attributes: 1. lang Attribute 2. dir Attribute 3. title Attribute 4. src Attribute 5. alt Attribute 6. width and height Attributes 7. id Attribute 8. href Attribute Here is the Attributes.html: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Attributes in Html</title> </head> <body> <h1 title = "Hello Friends">Title Attribue</h1> <img src = "flowers.jpeg" alt = "flowers" width="300" height="300" > <img src="" alt="flowers"> <h1 id = "111">Id attribute in html</h1> <a href="https://natarajamurthy.blogspot.com/">blogspot&

Introduction

Introduction | HTML: HTML stands for Hyper Text Markup Language. It is used for creating Web pages. It describes the structure of a Web page and consists of a series of elements. Here is the introOfHtml.html file: <html> <head> <title>Intro of HTML</title> </head> <body> <h1>Win the World with Love</h1> </body> </html> Web view of Html:  Here is the Video:

Headings, Paragraphs and Images

Headings, Paragraphs and Images | HTML: Using Headings in HTML with h1,h2,h3,h4,h5,h6, Paragraphs with p and Images with img. Here is the HeadingsParagraphsImages.html: <!DOCTYPE html> <html> <head> <title>Headings,Paragraphs and Images</title> </head> <body> <h1>Here is the details of Headings</h1> <h1>Headings with h1</h1> <h2>Headings with h2</h2> <h3>Headings with h3</h3> <h4>Headings with h4</h4> <h5>Headings with h5</h5> <h6>Headings with h6</h6> <h1>Here is the details of Paragraphs</h1> <p>this tag is used for Paragraphs and you can <br> break Paragraphs wiht br tag</p> <h1>Here is the deatails of Images</h1> <img src="flowers.jpeg"> </body> </html> Web view of Html: Here is the Video:

Style tag

Style | HTML: Style tag used to modify the properties with their related values. Syntax: <tagname style ="property:value;"> </tagname> List of Modifications with Style: 1. Font Family, Font Size and color 2. Text align 3. Background color and 4. Horizontal line Here is the Style.html: <!DOCTYPE html> <html> <head> <title>style tag in Html</title> </head> <body style = "background-color:green;"> <hr> <h1>Font Family, Font Size and Color</h1> <h1 style = "font-family:cambria;"> Font Fomily in Html</h1> <h1 style = "font-size:50px;"> Font Size in Html</h1> <h1 style = "color:#FF0000;"> Color in Html</h1> <hr> <h1>Text align </h1> <h1 style = "Text-align:center;">Text align in Html</h1> <

Packages and Imports

Packages and Imports: Packages are directories with classes and methods, Import used to get the classes and methods from Inbuilt or created packages. Syntax: import package_name; Here is the Code: //Package myPackage; (directory) // Java file in drive:Main.java import myPackage; class Main { public static void main (String[] args) { A a = new A(); a.getMe(); } } // Java file in drive:/myPackage/A.Java package myPackage; public class A { public static void getMe() { System.out.println("Thank you"); } } /* compile:/myPackage> javac A.java compile: javac Main.java run: java Main Output: Thank you */ Here is the Video:

Inheritance

Inheritance | Java: Inheritance means gets the properties from parent. With this child class can access the variables or methods from parent class. Syntax: class child_class extends parent_class . Here is the Code: import java.io.*; class Main { public static void main (String[] args) { A a = new A(1); B b = new B(3); System.out.println(a.getX()); System.out.println(b.getX()); } } class B extends A { public B(int x) { super(x); } } class A { int x; A(int x) { this.x = x; } public int getX() { return this.x; } } Output: 1 3 Here is the Video:

Methods

Methods | Java: Methods are behavior of class. Syntax: class class_name { void/int method_name(par1,par2,...,parn) { // statements... } } Here is the Code: import java.io.*; class Main { public static void main (String[] args) { A a = new A(); a.setX(3); System.out.println(a.getX()); } } class A { int x; void setX(int x) { this.x = x; } int getX() { return this.x; } } Output: 3 Here is the Video:

Access Modifiers

Access Modifiers | Java: Access Modifiers are controllers of data of variables, methods and classes. Those are four default, public, protected and private. Syntax: access_madifier int x; Here is the Code: import java.io.*; class Main { public static void main (String[] args) { A a = new A(1); System.out.println(a.getX()); } } class A { private int x; A(int x) { this.x = x; } public int getX() { return this.x; } } Output: 1 Here is the Video:

Constructors

Constructors | Java: Constructor is called when the object is created. It is also a method with the same name of class. Syntax: class class_name { // statements. class_name(par1,par2,...,parn) // constructor { // statements } } Here is the Code: import java.io.*; class Main { public static void main (String[] args) { A a = new A(1); A b = new A(); System.out.println(a.x); System.out.println(b.x); } } class A { int x; A(int x) { this.x = x; } A() { this.x = 2; } } Output: 1 2 Here is the Video:

Classes and Objects

Classes and Objects | Java: Classes are custom/used data types, and Objects are instances of the data type. Syntax: Class: class_name { // statements... } Oject: class_name object_name = new class_name(); Here is the Code: import java.io.*; class Main { public static void main (String[] args) { A a = new A(); a.x = 1; System.out.println(a.x); B b = new B(); b.y = 2; b.z = 3; System.out.println(b.y); a.c = b; System.out.println(a.c.z); } } class A { int x; B c; } class B { int y; int z; } Output: 1 2 3 Here is the Video:

Static methods

Static Methods | Java: Static methods are having collection of statements to perform particular task. Syntax: static void/int method_name(par1,par2,...,parn) { // statements. } Here is the Code: import java.io.*; class Main { public static void main (String[] args) { A(); B(); print("Hello"); sum(1,2); int a = mult(1, 2); System.out.println(a); } static void A() { System.out.println("I am in A"); } static void B() { System.out.println("I am in B"); } static void print(String str) { System.out.println(str); } static void sum(int a,int b) { System.out.println(a+b); } static int mult(int a,int b) { return a * b; } } Output: I am in A I am in B Hello 3 2 Here is the Video:

Arrays

Arrays | Java: Arrays are using for storing the multiple same data type values. Syntax: int[] a = {1, 2, 3}; int[] b = new int[n]; where n is the size of an array. Here is the Code: import java.io.*; class Main { public static void main (String[] args) { int[] a = {1, 2, 3}; System.out.println(a[2]); for(int i=0;i<a.length;i++) { System.out.println(a[i]); } int[] b = new int [5]; for(int i=0;i<b.length;i++) { b[i]=5; System.out.println(b[i]); } } } Output: 3 1 2 3 5 5 5 5 5 Here is the Video:

Conditional Statements: Loops

Java | Loops: Loops also conditional statements. There are two loops one is while loop and another one is for loop. Loops are executes the statements multiple times until the condition of loop become false. Syntax: while( condition ) { // statements... } for(variable assignment; condition ; modification of variable) { // statements... } Here is the Code: import java.io.*; class Main { public static void main (String[] args) { int i = 1; while(i <= 5) { System.out.print(i+" "); i++; } System.out.println(); int sum = 0; for(int j=1;j<=5;j++)

Conditional Statements: If - Else Statement

Java | If - Else Statement: If - else statement is one of the conditional statement. if checks the condition, if condition is true if block executes otherwise else block executes. Syntax: if ( condition ) { // statements... } else { // statements... } Here is the Code: import java.io.*; class Main { public static void main (String[] args) { int i = 1; if( i % 2 == 0) { System.out.println("Even"); } else { System.out.println("Odd"); } int a = 1, b = 2; int min; if( a < b ) { min = a; } else { min = b; } System.out.println("Min value is :" + min); } } Output: Odd Mi