Online Tutorial Info: December 2018

Saturday, December 29, 2018

HTML responsive

What is Responsive Web Design?
Responsive means pages will look good on all devices (desktops, tablets, and phones).

We know our page have 2 types of data images and text. So both should be responsive to make whole page responsive.

1.Responsive images:- For responsive image you should use width 100%.
<img src="img_girl.jpg" style="width:100%;">

2.Responsive texts:- VW stands for Viewport Width . Viewport is browser window size. 100vw means 100% of view port width.

Media Query:-

To resize both text and images, you should use media queries for responsive web pages.
Media query is common for make responsive text and images both.

@media screen and (max-width: 800px) { //800 px is breakpoint
#divA{
width: 100%;
}
}

//In above example media query CSS will apply for range 1px to 800px.

Responsive web design framework:-

1.Bootstrap:- In market many CSS frameworks are being use for Responsive Design.
One of them is bootstrap. For bootstrap you have to import 3 files of bootstrap js, css, jquery
CDN link is given in below example.

Excample:-

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"></div>
<div class="col-md-2"></div>
</div>
</div>
</body>

</html>

Edit HTML Responsive Example in Editor

HTML class

HTML class means we provide same css to group of elements.
Suppose we have 10 elements and we want to write equal css for every elements
then we never write CSS code 10 times, we just write CSS one time and that
class name be given to all elements.

Examples is below:-
Here in below examples we want to change font color and back ground color .

Example 1:- Apply css to total elements without writing class attribute in every elements.
<style>
.elements p{
color:red;
background-color: gray;
}
</style>

<div class="elements">
<p>content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
<p>content5</p>
<p>content6</p>
<p>content7</p>
<p>content8</p>
<p>content9</p>
<p>content10</p>
</div>

Example 2:- Apply css to total elements by writing class attribute in every elements.
<style>
.myCSS{
color:red;
background-color: gray;
}
</style>

<div id="elements">
<p class="myCSS">content1</p>
<p class ="myCSS">content2</p>
<p class="myCSS">content3</p>
</div>

Example 3:- Apply css to some elements by writing class attribute in that elements.
<style>
.myCSS{
color:red;
background-color: gray;
}
</style>

<div id="elements">
<p class="myCSS">content1</p>
<p>content2</p>
<p class="myCSS">content3</p>
</div>

Edit HTML Class Example in Editor

HTML JavaScript

What is javascript in HTML?

JavaScript is scripting technology for web browser to event handling and make web pages more dynamic.

which Tag we use for write script?

HTML forms

What is html form?

form is element in html. We use form element for define form to get input data.
Form have various nested elements.

Form syntax:-

<form>
form elements will be here
</form>

Form attributes:-

1.action attribute.
2.target attribute.
3.method attribute.
4.novalidate attribute.
5.name attribute.

Form elements type and use:-

The <input> element is the most important form element.
with input element you can use multiple attribute to create multiple things.

1.<input type="text"> defines a text field.
2.<input type="password"> defines a password field.
3.<input type="radio"> defines a radio button.
4.<input type="submit"> defines a submit button to submit form.

Form example:-

<form action="/server_page.jsp" target="_blank" method="post" name="myform1" novalidate>
<input type="text" name="name" value="onlinetutorial">
<input type="password" name="password" value="">
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="submit" value="Submit">
<form>

Edit HTML Form Example in Editor

HTML iframes

What is iframe element?

An iframe is used to display a web page within a web page.

Syntax if iframe:-

How to set Height and Width of Iframe?

Height and width attributes are given to set height and width of iframe.
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

You can set by style also.
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

How to open a page in iframe by click?

You can open a link in i-frame also by writing target="iframe_name" in link.

Answer:-
Suppose we have a iframe as below name is=iframe_first
<iframe src="demo_iframe.htm" name="iframe_first"></iframe>

and below is link to have target attribute with value="iframe_first".
If we click on below link then page will be open in above iframe.

<p><a href="https://www.w3schools.com" target="iframe_first">W3Schools.com</a></p>

Try HTML Iframe Example in Editor

HTML tables

What is html table?

An HTML table is defined with the <table> tag.
Tables are useful to display data in tabular form for improving readability.
This is top most tag in table.Table tag have 3 tags internally
<thead> , <tbody> ,<tfoot>

All these three tags have their own advantages.
The <thead> tag is used to group header content in an HTML table.
The <tbody> tag is used to group body content in an HTML table.
The <tfoot> tag is used to group footer content in an HTML table.

What is <TR>, <TD> and <TH> tags:-
Table row is defined with the <tr> tag.
Table data is defined with the <td> tag.
Table header is defined with the <th> tag.

Table header and footer are bold and centered by default.

Table architecture example is below:-

Example with HTML code:--
<table>
<thead>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$900</td>
</tr>
<tr>
<td>February</td>
<td>$800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Sum</th>
<th>$1700</th>
</tr>
</tfoot>
</table>
Above HTML code Example output:--

Try HTML Table Example in Editor

HTML comments

What is comment in HTML?

With comments you can easily make mark in your HTML.
Comments make you feel better for debugging , because you can easily search lines of code on demand.

Following syntax is for insert comment in HTML:-


Example1:- Now image will be hide because it will be commented.


Example2:- Paragraph here will not hide because here we putting only information by using 2 seperate comment tags without commenting our paragraph.

<p>
Hi this is my paragraph. I am a good person.
In this paragraph example you are learning how to comment
for making debugging in further maintenace or adding some functionality on web page.
</p>


Try HTML Comment Example in Editor

HTML images

Html images make web pages attractive.

HTML Images Syntax:-
The <img> tag is empty, i.e. does not have a closing tag.
<img src="url">

Example:1- Alt Attribute use
<img src="url_of_image" alt="man_image">
alt attribute provide alternate text for images.
width and height attributes use for the width and height of the image in pixels.

Example:2- Width and Height attribute use
<img src="url_of_image" alt="man_image" width="200" height="100">
width and height attributes use for the width and height of the image in pixels.

Example:3- Style Attribute use
Style attribute use for style set of image.
<img src="man1.jpeg" alt="man_image" style="width:50px;height:80px;">

Example:4- Image as link
<a href="https://www.onlinetutorial.info/2018/12/html-images.html">
<img src="smiley.jpeg" alt="online tutorial" style="width:60px;height:40px;">
</a>

Example:5- Background image
<p style="background-image:url('avtar.jpg')"></p>
Background image in style we use for set background of any element as required.

Example:5-image maps use.

<img src="manwomen_group.png" alt="Workplace" usemap="#workplacemap">
<map name="workplacemap">
<area shape="rect" coords="50,50,100,100" alt="Man" href="man.htm">
<area shape="rect" coords="50,100,150,200" alt="Women" href="women.htm">
</map>

Here you can see usemap attribute of img tag will be the name attribute of map tag for proper mapping. In map we use single image and set co-ordinate area to navigate one by one by creating created link. Here in above example 2 link will be created for man and women . now you have to create 2 page separately for defining
both entity separately in detail view.

Try HTML Image Example in Editor

Paragraph in HTML

Element <p> is used for define a paragraph.In paragraph you can not add extra spaces or extra lines
because browser will remove extra spaces and extra lines when page load.
If you want to break line then use <br> tag in paragraph.

Example:-
<p>This is a paragraph.</p>

If you want line break then use <br> as below example:-
Example:-
<p>This is my paragraph. <br> I want eat mango</p>

If you want to write poem then use <pre> tag and you should not use <p> tag because <pre> tag maintain line break and spaces . <pre> mean pre formatted text.

<PRE> tag Example 1:-
Poem example is below will be in given format at any screen.

<pre>
What does little birdie say
In her nest at peep of day?
Let me fly, says little birdie,
Mother, let me fly away.
Birdie, rest a little longer
Till the little wings are stronger,
So she rests a little longer
Then she flies away.
</pre>

<PRE> tag Example 2:-
<pre>
1000000

1000

10

1
</pre>

Try HTML Paragraph Example in Editor

Style in HTML

HTML Style:-

Style is attribute to set style of html element.

Setting style syntax is below:

<tagname style="property:value;">

Example 1:- Set background color.

<body style="background-color:gray;">
<h1>Heading1</h1>
<p>Paragraph1</p>
</body>

Example 2:- Set text color
<h1 style="color:blue;">This is a heading</h1>

Example 3:- Set font family
<p style="font-family:arial;">This is a paragraph.</p>

Example 4:- Set font-size
<h1 style="font-size:100%;">This is a heading</h1>

Try HTML Style Example in Editor

What is HTML Attributes

Attributes give meta data to elements.
We use Attributes in start tag always.
Attributes are used with value.
Some attribute have not value so internally DOM manage to that attribute.

Attribute Syntax: -
<start_tag attribute_name="value1"> content or element based on requirement</endtag>

example:-
<img src="avtar.png" width="50" height="50">

Here src, width , height is attributes.

Attributes without value:-
readonly
disabled
checked
selected
multiple
etc

Try HTML Attribute Example in Editor

What is HTML Elements

HTML elements are made with start and end tags.
<tagname>contents or any other element</tagname>
Example:-
<html></html>

Some important things related to element is below:-

1.HTML elements can be nested also as below.

<html>
<head>
<title>My page title</title>
</head>
</html>

2.HTML elements are not case sensitive. This means you can use small letter
or capital letter as you wish. Bydefault you should try to use lowercase letters.

example:-
<HTML></HTML>
or
<html></html>

3.In html elements closing tag is not mandatory but we should write for proper
validation. At the time of parsing there may be chance to show abnormal behaviour
to render graphics on pages.

Example of some elements:-
Elements basically uses first letter for readability.For example paragraph element is <p></p>.

<html> for defining whole document.
<body> document body.
<h1> for heading
<p> for paragraph
<br> for break line

Try HTML Elements Example in Editor

What Is HTML DOM

HTML DOM (Document Object Model):-
When web page load in the browser at that time browser create DOM of the page.
This object is good for accessing webpage's elements and performing some event on them.
Suppose we want to search some element then we have much more option given via DOM.

Here in below if element found then element will be return as object so we can perform some task on that element.

1.Searching element object by id:-
Example: -
var elem1 = document.getElementById("myid");

2.Searching element object by class Name:-

Example: -

var var1 = document.getElementsByClassName("myclass");

3.Searching element object by tag Name:-
Example: -
var tag1 = document.getElementsByTagName("p");

Try HTML DOM Example in Editor

Saturday, December 15, 2018

What is HTML?

HTML stand for Hyper Text Markup Language.Hypertext is text displayed on a computer screen or other electronic devices and main important point is that hypertext documents are interconnected by hyperlink.

What is markup language?

In computer text processing a markup language is a language for adding metadata to
document in a way that is properly differentiated from the text because markup language's syntax differ.

HTML full form is Hyper Text Markup Language.
HTML have many elements which gives a object structure.
HTML tags are nothing just element names with angular brackets as below given example.

Example:

1- <tagname>content1</tagname>
2- <tagname>content2</tagname>

Browser never display tags on pages at execution time rendered view of tags you can see.
Browsers read HTML documents and display them.

Basic structure of HTML is written below:-

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="description of websites">
</head>
<body>
<p>paragraph1</p>
</body>
</html>

HTML versions:-

HTML 1.0 in 1991
HTML 2.0 in 1995
HTML 3.2 in 1997
HTML 4.0 in 1999
XHTML in 2000
HTML5 in 2014

Try HTML Basic Structure Example in Editor

Online Tutorial Info

Pages

Search On Google