Friday, June 30, 2017

Why CSS is used to define?

Actually CSS is used to define styles for our web pages, including the design, layout and variations in display for different devices and screen sizes.

Define the characterestics of CSS.

  • 1.CSS   stands for Cascading Style Sheets
  • 2.CSS   describes how HTML elements are to be displayed on screen, paper, or in other media
  • 3.CSS  saves a lot of work. It can control the layout of multiple web pages all at once
  • 4.External stylesheets are stored in CSS files

Define the CSS Structure.

CSS Structure

body {
    background-color: blue;
}

h1 {
    color: red;
    text-align: right;
}

p {
    font-family: verdana;
    font-size: 15px;
}

What is CSS is a language?

CSS is a language that describes the style of an HTML document.
It describes how HTML elements should be displayed.

Thursday, June 29, 2017

Show the add New Elements to HTML.

<!DOCTYPE html>
<html>
<head>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
      display: block;
      background-color: #dddddd;
      padding: 50px;
      font-size: 30px;
 
}
 
</style>
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

What is New in HTML5?

The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>

Show the New HTML5 Elements.

New HTML5 Elements:-

The most interesting new HTML5 elements are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.

What is new HTML5 API's?

New HTML5 API's (Application Programming Interfaces)

The most interesting new API's in HTML5 are:
  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

Show the HTML History.

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1

What are removed elements in HTML5?

Removed Elements in HTML5

The following HTML4 elements have been removed in HTML5:
Removed Element Use Instead
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>  
<frameset>  
<noframes>  
<strike> CSS, <s>, or <del>
<tt> CSS

Monday, June 26, 2017

Show the HTML5 datalist Element.

Example

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

What does The datalist element specifie?

The <datalist> element specifies a list of pre-defined options for an <input> element.

What are HTML5 Form Elements?

HTML5 Form Elements

HTML5 added the following form elements:
  • <datalist>
  • <keygen>
  • <output>

Give an example of button element.

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

What the button element ?

The <button> element defines a clickable button:

How to write down option value?

<option value="fiat" selected>Fiat</option>

Show the structure of textarea.

  The structure of textarea
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

What is the textarea element?

Ans:-    The <textarea> element defines a multi-line input field (a text area)

Sunday, June 25, 2017

Show the structure of select item.

  The structure of select item
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

What does the select element define?

ANS:-  Actually The <select> element defines a drop-down list.

Saturday, June 24, 2017

When GET must NOT be used?

GET must NOT be used :-when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too

what will be the effect of using GET?

when GET is used, the submitted form data will be visible in the page address field

When to use Get?

ANS:-The default method when submitting form data is GET.

How to write down The Name Attribute?

The Name Attribute

Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

What is The fieldset element ?

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

Example

<form action="/action_page.php">
  <fieldset>
    <legend>Valuable information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

When to use post ?

 Use POST:-

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.
POST has no size limitations, and can be used to send large amounts of data.

Show the structure of Submit Button.

Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Nill"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Bro"><br><br>
  <input type="submit" value="Submit">
</form>

What is the The action attribute?

The action attribute:

Actually The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

What is the structury of Radio Button Input?

Radio Button Input

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

How to look like in a browser?

This is how it will look like in a browser:
First name:

Last name:

How to write down form?

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

What is text input?


 

Text Input

<input type="text"> defines a one-line input field for text input:

Show the structure of input type element.

Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)

Describe about Form elements.

Really an HTML form contains form elements.
On the otherhand Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Show the structure of form.

<form>
.
form elements
.
</form>

What is The HTML element?

ANS:- The HTML <form> element defines a form that is used to collect user input

Friday, June 23, 2017

How to attribute Minimization ?

Attribute Minimization Is Forbidden

Wrong:
<input type="checkbox" name="vehicle" value="bus" checked />
Correct:
<input type="checkbox" name="vehicle" value="bus" checked="checked" />
Wrong:
<input type="text" name="lastname" disabled />
Correct:
<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML?

   Convert from HTML to XHTML

  1. Add an XHTML <!DOCTYPE> to the first line of every page
  2. Add an xmlns attribute to the html element of every page
  3. Change all element names to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. Quote all attribute values

Must Attribute Values be Quoted?

Yes, Attribute Values Must Be Quoted

This is wrong:
<table width=100%>
This is correct:
<table width="100%">

How does the XHTML Attribute Names write down?

This is correct: in Lower case
<table width="200%">

Must Empty Elements also be closed?

Yes, Empty Elements Must Also Be Closed

This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

Must XHTML Elements always be closed?


XHTML Elements Must Always Be Closed

This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Must XHTML Elements be properly nested?

XHTML Elements Must Be Properly Nested: Description is given below

In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>

Define the characterestics of XHTML Elements & Attributes.

XHTML Elements

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

XHTML Attributes

  • Attribute names must be in lower case
  • Attribute values must be quoted
  • Attribute minimization is forbidden

Show the Document Structure ofXHTML.

 Document Structure:-

  • XHTML DOCTYPE is mandatory
  • The xmlns attribute in <html> is mandatory
  • <html>, <head>, <title>, and <body> are mandatory

Show the structure of HTML code.

This HTML code works fine in most browsers (even if it does not follow the HTML rules):
<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

Why do we use XHTML?

Ans;-Because many pages on the internet contain "bad" HTML.

What are the Characterestics of HTML?

  • Characterestics of  HTML:-
  • XHTML is almost identical to HTML
  • XHTML is stricter than HTML
  • XHTML is HTML defined as an XML application
  • XHTML is supported by all major browsers


What Is XHTML?

Ans:-XHTML stands for EXtensible HyperText Markup Language

Thursday, June 22, 2017

What are The ISO-8859-1 & UTF-8 Character Set?

The ISO-8859-1 Character Set:-

8859-1 is identical to ASCII for the values from 0 to 127.
8859-1 does not use the values from 128 to 159.
8859-1 is identical to UTF-8 for the values from 160 to 255.

The UTF-8 Character Set:-

UTF-8 is identical to ASCII for the values from 0 to 127.
UTF-8 does not use the values from 128 to 159. 
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10 000 different characters.
For a closer look, study our .

What is the ASCII Character Set?

The ASCII Character Set:-

ASCII uses the values from 0 to 31 (and 127) for control characters.
ASCII uses the values from 32 to 126 for letters, digits, and symbols.
ASCII does not use the values from 128 to 255.

Define about Character Encoding

 Character Encoding:

ASCII was the first character encoding standard (also called character set). ASCII defined 127 different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .
ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.
ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes.
Because ANSI and ISO-8859-1 were so limited, the default character encoding was changed to UTF-8 in HTML5.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

Show The HTML charset Attribute.

The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the <meta> tag:

For HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For HTML5:

<meta charset="UTF-8">

Show Some Other Entities Supported by HTML.

Some Other Entities Supported by HTML

Char Number Entity Description
© &#169; &copy; COPYRIGHT SIGN
® &#174; &reg; REGISTERED SIGN
&#8364; &euro; EURO SIGN
&#8482; &trade; TRADEMARK
&#8592; &larr; LEFTWARDS ARROW
&#8593; &uarr; UPWARDS ARROW
&#8594; &rarr; RIGHTWARDS ARROW
&#8595; &darr; DOWNWARDS ARROW
&#9824; &spades; BLACK SPADE SUIT
&#9827; &clubs; BLACK CLUB SUIT
&#9829; &hearts; BLACK HEART SUIT
&#9830; &diams; BLACK DIAMOND SUIT

Describe Some Greek Letters Supported by HTML

Some Greek Letters Supported by HTML

Char Number Entity Description
Α &#913; &Alpha; GREEK CAPITAL LETTER ALPHA
Β &#914; &Beta; GREEK CAPITAL LETTER BETA
Γ &#915; &Gamma; GREEK CAPITAL LETTER GAMMA
Δ &#916; &Delta; GREEK CAPITAL LETTER DELTA
Ε &#917; &Epsilon; GREEK CAPITAL LETTER EPSILON
Ζ &#918; &Zeta; GREEK CAPITAL LETTER ZETA

Show Some Mathematical Symbols Supported by HTML.

Some Mathematical Symbols Supported by HTML

Char Number Entity Description
&#8704; &forall; FOR ALL
&#8706; &part; PARTIAL DIFFERENTIAL
&#8707; &exist; THERE EXISTS
&#8709; &empty; EMPTY SETS
&#8711; &nabla; NABLA
&#8712; &isin; ELEMENT OF
&#8713; &notin; NOT AN ELEMENT OF
&#8715; &ni; CONTAINS AS MEMBER
&#8719; &prod; N-ARY PRODUCT
&#8721; &sum; N-ARY SUMMATION

Descsribe another common use of the non-breaking space.

ANS:-Another common use of the non-breaking space is to prevent that browsers truncate spaces in HTML pages.
If anybody write 10 spaces in his text, the browser will remove 9 of them. To add real spaces to your text, he can use the &nbsp; character entity.
The non-breaking hyphen (&#8209;) lets you use a hyphen character (‑) that won't break.

What is a non-breaking space?

Actually A non-breaking space is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.
Examples:
  • § 10
  • 10 km/h
  • 10 PM

What is Non-breaking Space?

Ans:  &nbsp

Sunday, June 18, 2017

Show the Combining Diacritical Marks.



Combining Diacritical Marks



Here are some examples:
Mark Character Construct Result
 ̀ a a&#768;
 ́ a a&#769;
̂ a a&#770;
 ̃ a a&#771;
 ̀ O O&#768;
 ́ O O&#769;
̂ O O&#770;
 ̃ O O&#771;

Some Other Useful HTML Character Entities.

Some Other Useful HTML Character Entities

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
Note: Entity names are case sensitive.

Why do we use &It or &60 ?

Ans  :-To display a less than sign (<) we must write: &lt; or &#60;

Why Character entities are used?

Character entities are used to display reserved characters in HTML

Describe html computer element.



TagDescription
<code> Defines programming code
<kbd> Defines keyboard input 
<samp> Defines computer output
<var> Defines a variable
<pre> Defines preformatted text

Show the example of a variable.

The variable could be a variable in a mathematical expression or a variable in programming context:

Example

Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.
Result:
Einstein wrote: E = mc2

What is The HTML element?

The HTML <var> element defines a variable.

Show the html samp element.

Example

<p>If you input wrong value, the program will return <samp>Error!</samp></p>
Result:
If you input wrong value, the program will return Error!

What is the html samp element?

###  The HTML <samp> element represents output from a program or computing system.
Text surrounded by <samp> tags is typically displayed in the browser's default monospace font

Show aexample of kbd.

Example

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:
Save the document by pressing Ctrl + S

What is kbd code?

The HTML <kbd> element represents user input, like keyboard input or voice commands.

Show the computer code.

Computer code :-
 
<code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>

Define a responsive Web Design.

Responsive Web Design makes your web page look  nice on all devices (desktops, tablets, and phones).
A Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any types of screen.

What is CSS Flexbox?



Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier

Describe about CSS Floats.

*** It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility

How many ways to create multicolumn layouts?

***There are four different ways to create multicolumn layouts. Each way has its pros and cons:
  • HTML tables
  • CSS float property
  • CSS framework
  • CSS flexbox

Descrive about HTML Layout Elements.

HTML Layout Elements

  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

 

Define about html HTML Layout Elements.

  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

What is the HTML head Element?

1.The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
2.HTML metadata is data about the HTML document. Metadata is not displayed.
3.Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
The following tags describe metadata:
<title>, <style>, <meta>, <link>, <script>, and <base>

What is the instruction of using relative file?

###When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains. 

Show the structure of Relative File Path.

<img src="/images/picture.jpg" alt="flower">

Define about relative file path.

***  A relative file path points to a file relative to the current page.
In this example the file path points to a file in the images folder located at the root of the current web

Show a example of absolute File Paths?

<img src="https://www.facebook.com/images/picture.jpg" alt="Mountain">

What is an absolute file path?

***   An absolute file path is the full URL to an internet file.

Describe the HTML File Paths.

            

HTML File Paths

             Pat

Description
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder located in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder located at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder

Why File paths are used ?

Basically File paths are used when linking to external files like:
  • Web pages
  • Images
  • Style sheets
  • JavaScripts

What is A file path ?

**A file path describes the location of a file in a web site's folder structure.

Sunday, June 11, 2017

What is anAn iframe can be used?

1.An iframe can be used as the target frame for a link.
2.The target attribute of the link must refer to the name attribute of the iframe.

With CSS, you canCan we change the size, style and color of the iframe's border

With CSS, anybody can also change the size, style and color of the iframe's border:

Example

<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

Define a structureIframe - Remove the Border.

Example

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

Show the Iframe - Set Height and Width.

Iframe - Set Height and Width

Example

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

 

What is the structure of Iframe Syntax?

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

What is Iframe Syntax?

**An HTML iframe is defined with the <iframe> tag.

Define the The class Attribute on Inline Elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Show a structure of The class Attribute.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

What is the HTML class attribute?

**The HTML class attribute makes it possible to define equal styles for elements with the same class name.
Here we have three <div> elements that point to the same class name.

Friday, June 9, 2017

What is An inline element?

***An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.

Show a example of Example of block-level elements.

Examples of block-level elements:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>

How HTML lists can be styled?

HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu.

Show the total summary of list.

  • The total summary of list.
  •  
  • Use the HTML <ul> element to define an unordered list
  • Use the CSS list-style-type property to define the list item marker
  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to describe the term in a description list
  • Lists can be nested inside lists
  • List items can contain other HTML elements
  • Use the CSS property float:left or display:inline to display a list horizontally

Show the structure of Horizontal List.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

Thursday, June 8, 2017

Show the Nested HTML Lists.

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Do you know about HTML Description Lists?




Yes, The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Show the structure of Uppercase Roman Numbers,Lowercase Roman Numbers:

Uppercase Roman Numbers:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
 

Lowercase Roman Numbers:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 

Show the structure of Numbers,Uppercase Letters,Lowercase Letters

Numbers:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 

Uppercase Letters:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 

Lowercase Letters:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
 

Show the description of The type attribute.

The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Wednesday, June 7, 2017

What is Ordered HTML List?

Ordered HTML List

1. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Write down the structure of squre and none value.

Example - Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
 
 

Example - None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
 

Show the structure of Disc and Circle value.

Example - Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
 
 

Example - Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
 

Define the style of the list item marker.

 The CSS list-style-type property is used to define the style of the list item marker:


Value                       Description


disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

How to write down unordered html list?

Ans-An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Tuesday, June 6, 2017

Define the CSS border-collapse property.

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}