HTML For Juniors | PART : 5

HTML For Juniors | PART : 5

In this article I’ll be discussing basic part of HTML that a junior (beginner) needs to know. From juniors I mean to all those who are who just passed High School or are 14 years or above.

 HTML Styling

 

 

 

·        Every HTML element has a default style (background color is white and text color is black).

·        Changing the default style of an HTML element, can be done with the style attribute.

·        This example changes the default background color from white to lightgrey

Example :

<body style="background-color:lightgrey">
  <h1> This is a big room</h1>
  <p>This is a small room.</p>
</body>

The HTML Style Attribute

 

The HTML style attribute has the following syntax

Example :

style="property:value"

The property is a CSS property. The value is a CSS value

HTML Text Color

 

The color property defines the text color to be used for an HTML element

Example :

<body>
  <h1 style="color:blue"> I love ice -cream </h1>
  <p style="color:red"> I love chocolates.</p>
</body>

HTML Fonts

 

 

The font-family property defines the font to be used for an HTML element:

Example :

body>
  <h1 style="font-family:verdana"> I love ice -cream </h1>
  <p style="font-family:courier"> I love chocolates.</p>
</body>

HTML Text Size

 

The font-size property defines the text size to be used for an HTML element:

Example :

body>
  <h1 style="font-size:300%"> I love ice -cream </h1>
  <p style="font-size:160%"> I love chocolates.</p>
</body>

HTML Text Alignment

 

The text-align property defines the horizontal text alignment for an HTML element:

Example :

<body>
  <h1 style="text-align:center">Centered Heading</h1>
  <p>I am a girl.</p>
</body>

HTML Formatting Elements

 

 

 

Formatting elements were designed to display special types of text:

• Bold text
• Important text
• Italic text
• Emphasized text
• Marked text
• Small text
• Deleted text
• Inserted text
• Subscripts
• Superscripts

---

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.

Example :

<p>I love ice - cream.</p>

<p><b> I love chocolates</b></p>

HTML Italic and Emphasized Formatting        

 

The HTML <i> element defines italic text, without any extra importance.

Example :

<p>I love ice - cream.</p>

<p><i> I love chocolates</i></p>

The HTML <em> element defines emphasized text, with added semantic importance.

Example :

<p>I love ice - cream.</p>

<p><em> I love chocolates</em></p>

HTML Small Formatting

 

The HTML <small> element defines small text:

Example :

<h>HTML <small>Small</small> Formatting</h>

HTML Marked Formatting

 

The HTML <mark> element defines marked or highlighted text:

Example :

<h>HTML <mark>Marked</mark> Formatting</h>

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) of text.

Example :

<p>My favorite color is <del>blue</del> purple .</p>

HTML Inserted Formatting

 

The HTML <ins> element defines inserted (added) text.

Example :

<p>My favorite <ins>color</ins> is purple</p>

HTML Subscript Formatting

 

The HTML <sub> element defines subscripted text.

Example :

<p>This is _subscripted text.</p>

HTML Superscript Formatting

 

The HTML <sup> element defines superscripted text.

Example :

<p>This is ^{superscripted} text.</p>

Summary

• Use the style attribute for styling HTML elements.
• Use background-color for background color.
• Use color for text colors.
• Use font-family for text fonts.
• Use font-size for text sizes.
• Use text-align for text alignment.

HTML Text Formatting Elements

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text

**********-------------------------------------------------------------------------

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×

HTML For Juniors PART :4

HTML  For Juniors PART :4

HTML Attributes

• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"

The language Attribute

·         The document language can be declared in the <html> tag.

·         The language is declared in the language attribute.

·         Declaring a language is important for accessibility applications (screen readers) and search engines:

Example:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

·         First two letters specify the language (en). If there is a dialect, use two more letters (US).

The title Attribute

·         HTML paragraphs are defined with the <p> tag.

Example :

<p title="c-sharpcorner">
c-sharpcorner is a website in which the articles, blogs… etc are written on “TECHNOLOGY ”.

</p>

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example  :

<a href="http://www.c-sharpcorner.com">This is a link</a>.

Size Attributes

·         HTML images are defined with the <img> tag.

·         The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

·          

Example :

<img src=" E:\Walls\HTML\c#corner.jpg" width="104" height="142”

The alt Attribute

·         The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.

·         The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage, i.e. a blind person, can "hear" the element.

Example :

<img src=" E:\Walls\HTML\c#corner.jpg"alt="www.c-sharp corner.com"  width="104" height="142” >

Always Use Lowercase Attributes

·         The HTML5 standard does not require lower case attribute names.

·         The title attribute can be written with upper or lower case like Title and/or TITLE.

·         Lower case is the most common.

·         Lower case is easier to type.

 Summary

• All HTML elements can have attributes.
• The HTML title attribute provides additional "tool-tip" information.
• The HTML href attribute provides address information for links.
• The HTML width and height attributes provide size information for images.
• The HTML alt attribute provides text for screen readers.
• Always use lowercase HTML attribute names.

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×

HTML for Juniors | Part3

HTML for Juniors PART -3

In this article I’ll be discussing basic part of HTML that a junior (beginner) needs to know. From juniors I mean to all those who are who just passed High School or are 14 years or above.

DFFERENT TAG USED IN HTML

1.<BR> tag


This tag is used to break line.


Example:

Name: Shresthi Jaiswal <br> Class: 10th


2.<P> tag


This tag is used to write in a paragraph.


Example:


<p>Success is neither magical nor mysterious. Success is natural consequence of consistently applying the basic fundamentals. </p> <p>A constant struggle , a ceaseless battle to bring success from inhospitable surroundings , is the price of all great achievements. </p>


3.<B> tag


This tag is used to emphasize the text.


Example:


My name is <b> Shresthi </b>


4.<I>


This tag is used to markup the text in italic style.


Example:


My name is <i> Shresthi </i>


5.<U>


This tag is used to underline the text.


Example:


My name is <u> Shresthi </u>
　
Headings　

Headings	Size
H1	Extra Large
H2	Very Large
H3	Large
H4	Medium
H5	Small
H6	Very Small

Example:

<H1>HTML</H1>

<H2>HTML</H2>

<H3>HTML</H3>

<H4>HTML</H4>

<H5>HTML</H5>

<H6>HTML</H6>

<CENTER> tags

This tag is used to center the text.

Example:

<center> C-Sharp Corner </center>

<BG COLOR=" ">

This tag is used to set the color of the background.

Example:

<BG COLOR= "BLUE">

Welcome to C-Sharp Corner!

Creating Lists

There are two types of lists :

ORDERED LIST

Each thing you type after the <OL> between </OL> tag will appear next to a number on the web page　in a consecutive manner.

Example:

<OL type= "1" >

<LI> Name : Shresthi</LI>

<LI> Class : 10^{th </LI>}

</OL>

UNORDERED LIST

Each thing you type after the <UL> between </UL> tag will appear next to a bullet on the web page.

Example:

<UL type= "*" >

<LI> Name : Shresthi</LI>

<LI> Class : 10th </LI>

</UL>

<TABLE> tag

This tag is used to create a table .

Attributes of table tags	Syntax
BORDER	<TABLE BORDER=" ">
BORDERCOLOUR	<TABLE BORDERCOLOUR=" ">
BGCOLOUR	<TABLE BGCOLOUR= " ">
ALIGN	<TABLE ALIGN= " " >
CELLPADDING	<TABLE CELLPADDING= " ">
HEIGHT & WEIGHT	<TR HEIGHT=" " WEIGHT= " ">

Example:

Name	maths	Science	english
Akash	87	85	82
Sherya	88	89	90
Tarun	79	82	85

<A HREF= " "> tag

This tag is used for creating links.

Example:

<a herf= "^{http://imshresthi.blogspot.in/" imshresthi >}

<IMG SRC= " "> tag

This tag is used for inserting the image.

Example:

<img src= "App..le.jpg">

　

Foreign Characters

<STRIKE> tag
This tag is used to crosses out the words.
Example:
<strike>This is wrong page.</strike>
<SUP> tag
This tag is used to superscript the text.
Example:
^E=MC2
<SUB> tag
This tag is used to subscript the text.
Example:
_H2O
<SPAN> tag
This tag is used for section in a document.
<STRONG> tag
This tag is used to text something important.
　
　

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×

HTML for Juniors PART -2

HTML for Juniors PART -2

In this article I’ll be discussing basic part of HTML that a junior (beginner) needs to know. From juniors I mean to all those who are who just passed High School or are 14 years or above. 

 

DFFERENT TAG USED IN HTML

⦁ <BR> tag

This tag is used to break line.

Example: 

Name: Shresthi Jaiswal <br> Class: 10th

⦁ <P> tag

This tag is used to write in a paragraph.

Example:

<p>Success is neither magical nor mysterious. Success is natural consequence of consistently applying the basic fundamentals. </p> <p>A constant struggle , a ceaseless battle to bring  success from inhospitable surroundings , is the price  of all great achievements. </p>

⦁ <B> tag  

This tag is used to emphasize the text.

Example:

My name is <b> Shresthi </b>

⦁ <I>

This tag is used to markup the text in italic style.

Example:

My name is <i> Shresthi </i>

⦁ <U>

This tag is used to underline the text.

Example:

My name is <u> Shresthi </u>

⦁ Headings

 

Headings Size

H1 Extra Large

H2 Very Large

H3 Large

H4 Medium

H5 Small

H6 Very Small

Example:

<H1>HTML</H1>

<H2>HTML</H2>

<H3>HTML</H3>

<H4>HTML</H4>

<H5>HTML</H5>

<H6>HTML</H6>

⦁ <CENTER> tags

This tag is used to center the text. 

Example:

<center> C-Sharp Corner </center>

⦁ <BG COLOR=” ”>

This tag is used to set the color of the background.

Example:

<BG COLOR= “BLUE”>

Welcome to C-Sharp Corner!

⦁ Creating Lists

There are two types of lists :

⦁ ORDERED LIST

Each thing you type after the <OL> between </OL> tag will appear next to a number on the web page in a consecutive manner.

Example:

<OL type= “1” >  

<LI> Name : Shresthi</LI>

<LI> Class : 10th </LI>

</OL>

⦁ UNORDERED LIST

Each thing you type after the <UL> between </UL> tag will appear next to a bullet on the web page.

Example:

<UL type= “*” >  

<LI> Name : Shresthi</LI>

<LI> Class : 10th </LI>

</UL>

⦁ <TABLE> tag

This tag is used to create a table .

Attributes of table tags Syntax

BORDER <TABLE BORDER=“ ”>

BORDERCOLOUR <TABLE BORDERCOLOUR=“ ”>

BGCOLOUR <TABLE BGCOLOUR= “ ”>

ALIGN <TABLE ALIGN= “ ” >

CELLPADDING <TABLE CELLPADDING=  “ ”>

HEIGHT & WEIGHT <TR HEIGHT=“ ” WEIGHT=  “ ”>

Example:

Name maths Science english

Akash 87 85 82

Sherya 88 89 90

Tarun 79 82 85

⦁ <A HREF= “ ”> tag

This tag is used for creating links.

Example:

<a herf= “http://imshresthi.blogspot.in/” imshresthi >

⦁ <IMG SRC= “ ”> tag

This tag is used for inserting the image.

Example:

<img src= “App..le.jpg”>

 

⦁ Foreign Characters

 

⦁ <STRIKE> tag

This tag is used to crosses out the words.

Example:

<strike>This is wrong page.</strike>

⦁ <SUP> tag

This tag is used to superscript the text.

Example:

^E=MC2

⦁ <SUB> tag

This tag is used to subscript the text.

Example:

_H2O

⦁ <SPAN> tag

This tag is used for section in a document.

⦁ <STRONG> tag

This tag is used to  text something important.