Posts

Showing posts from June, 2019

Introduction and Format of HTML

Image
What is HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page. Format of HTML < !DOCTYPE  html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > The  <!DOCTYPE html>  declaration defines this document to be HTML5 The  <html>  element is the root element of an HTML page The  <head>  element contains meta information about the document The...

Headings In HTML

Image
HEADINGS IN HTML <!DOCTYPE html> <html> <body> <h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6> </body> </html> Output: Paragraph tag in HTML HTML paragraphs are defined with the   <p>   tag. EXAMPLE:  <p> This is a Paragraph </p> <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> Output: This is a paragraph. This is another paragraph.

Font Tag

FONT TAG IN HTML The FONT tag in HTML is used to specify the size, color, and font of text it encloses. The FONT tag is a Container element, it has both an ON tag and OFF tag. <!DOCTYPE html> <html> <body> <p><font size="3" color="red">This is some text!</font></p> <p><font size="2" color="blue">This is some text!</font></p> <p><font face="verdana" color="green">This is some text!</font></p> </body> </html> Output: This is some text! This is some text! This is some text! Note:  The font element is not supported in HTML5. Use CSS instead.

Lists In HTML

LISTS IN HTML LISTS: HTML supports several types of list elements that are included with in the BODY tag of the Document. These elements may be Nested, one set of  elements may be embedded within another set of elements. LIST ITEM <LI> TAG: A List Item tag <LI> is used to define a each item of list. This tag is an empty tag, it has an ON tag  but does not require an OFF tag. Once the Items are defined using the <LI> tag, the list (by DEFAULT) appears as  bullets  form in the web browser. <!DOCTYPE html> <html> <body> <h2>An HTML list</h2>   <li>Coffee   <li>Tea   <li>Milk </body> </html> Output: An HTML list Coffee Tea Milk Different types of lists can be created in an HTML document. They are: 1. Unordered List 2. Ordered List 3.Definition List UNORDERED LIST <UL> TAG: an u...

Ordered Lists

ORDERED LISTS IN HTML An ordered list  defines a list of elements in  which the order of items is taken into account. The list items are enclosed by <OL> and </ OL> tags. The ordering here is rendered by a numbering scheme, using Arabic numbers, letters or Roman numerals. An ordered list is also called a numbered list. An ordered list starts with the  <ol>  tag. Each list item starts with the  <li>  tag . <!DOCTYPE html> <html> <body> <h2>An ordered HTML list</h2> <ol>   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>   </body> </html> Output: An ordered HTML list Coffee Tea Milk Ordered list of numbers: <!DOCTYPE html> <html> <body> <h2>Ordered List with Numbers</h2> <ol type="1">   <li>Co...

Definition List Tag

DEFINITION LIST TAG The definition list tag is used to build a list of items, Where each item has some block of text acting as a definition.  The tags used for creating a definition list are: <DL>:Definition List <DT>:Definition List Term <DD>:Definition List Description <!DOCTYPE html> <html> <body> <h2>A Description List</h2> <dl>   <dt>Coffee</dt>   <dd>- black hot drink</dd>   <dt>Milk</dt>   <dd>- white cold drink</dd> </dl> </body> </html> Output: A Description List Coffee - black hot drink Milk - white cold drink

Nesting List

NESTING LISTS HTML allows nesting of lists any kind of list can be nested inside any other list. For Example, an ordered list can be nested within an unordered list, or an ordered list can be nested within another ordered list. <!DOCTYPE html> <html> <body> <h2>A Nested List</h2> <p>List can be nested (lists inside lists):</p> <ul>   <li>Coffee</li>   <li>Tea     <ul>       <li>Black tea</li>       <li>Green tea</li>     </ul>   </li>   <li>Milk</li> </ul> </body> </html> Output: A Nested List List can be nested (lists inside lists): Coffee Tea Black tea Green tea Milk

Setting Background-color in html

Image
Setting the background-color of a web page just by using only html This bgcolor is used for setting the background color to the body code: <!DOCTYPE html> <html> <body bgcolor="skyblue"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output:

Text Formats in html

Based on the text we should use different types of formats in text for example: some important points must be BOLD and to write logarithms we should write power on top corner and base of the logarithms below it. So based on the text we are using we use different types of text formats such as: BOLD ITALIC BIG SMALL STRIKE STRONG and many BOLD: <!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> </body> </html> Output: This text is bold ITALIC: <!DOCTYPE html> <html> <body> <p><i>This text is italic</i></p> </body> </html> Output: This text is italic

Strong big and small tags in html

<Strong> tag is used to highlight the text in a paragraph mainly. Here we can see the difference between both normal text and strong text <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><strong>This text is strong.</strong></p> </body> </html> Output: This text is normal. This text is strong. Big: This is used make the text Big and look good <!DOCTYPE html> <html> <body>  <big>Small</big> Formatting </body> </html> Output: Small  Formatting Small: This is used to make text smaller when compared to normal text. <!DOCTYPE html> <html> <body> <h2>HTML <small>Small</small> Formatting</h2> </body> </html> Output: HTML  Small  Formatting

subscript superscript and strike

Subscript and superscript are used in mathematical calculations where we use powers and bases. for Example:Logarithms. It is represented by <sub>. Subscript: <!DOCTYPE html> <html> <body> <p>This is <sub>subscripted</sub> text.</p> </body> </html> Output: This is  subscripted  text. Superscript: <!DOCTYPE html> <html> <body> <p>This is <sup>superscripted</sup> text.</p> </body> </html> Output: This is  superscripted  text. Strike: This is not supported by html5. We can use <s> or <del> instead of this <strike>. <!DOCTYPE html> <html> <body>  <strike>not yet available!</strike> now available! <p>The strike element is not supported in HTML5. Use CSS instead.</p> </body> </html> ...

insert delete mark and em tags in html

Insert <ins> tag is used to insert the text in the middle of the paragraph <!DOCTYPE html> <html> <body> <p>My favorite <ins>color</ins> is red.</p> </body> </html> Output: My favorite color  is red. Delete: <del> is same as <strike> <!DOCTYPE html> <html> <body> <p>My favorite color is <del>blue</del>  </body> </html> Output: My favorite color is blue Mark: <mark> tag is used to mark the important information of the paragraph. It is used highlight the text. <!DOCTYPE html> <html> <body> <h2>HTML <mark>Marked</mark> Formatting</h2> </body> </html> Output: HTML  Marked  Formatting emphasize: This is used  for emphasizing the text. Here this shows the difference between normal ...