Monday, 27 April 2015

HTML for Juniors | PART : 7


HTML for Juniors | PART  : 7
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 Comments and CSS (Cascading Style Sheets)
Comment tags < !- - and - -> are used to insert comment in HTML.


HTML  Comments tags
You can add comments to your HTML page by using the following syntax .
< ! - - write your comment here - - >

*    NOTE
There is an exclamination mark in the opening tag, but it will not in the closing tag.

·        Comments are not displayed by the browser, but they can help document your HTML.
·        With comments you can place notifications and reminders in your HTML.
Example :
<-- I am a girl -->
<p>I love to write articles..</p
<!-- Remember to add more information here -->

·        Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.
Example :
<!-- Do not display this at the moment
<img border="0" src="pic_girl.jpg" alt="Girl">
-->
Conditional Comments
You might stumble upon conditional comments in HTML.
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
Conditional comments defines HTML tags to be executed by Internet Explorer only.

Software Program Tags

·        HTML comments tags can also be generated by various HTML software programs.
·        For example <!--webbot bot--> tags wrapped inside HTML comments by FrontPage and Expression Web.
·        As a rule, let these tags stay, to help support the software that created them.

HTML CSS
CSS means Cascading Style Sheets.

<html>
<head>
<style>
body {background-color:purple}
h1   {color:white}
p    {color:blue}
</style>
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>

RESULT

Styling HTML with CSS
Styling can be added to HTML elements in 3 ways:
  • Inline
 using a style attribute in HTML elements
  • Internal
 using a <style> element in the HTML <head> section
  • External
using one or more external CSS files
The most common way to add styling, is to keep the styles in separate CSS files.

CSS Syntax
CSS styling has the following syntax.

element { property:value; property:value }
·        The element is an HTML element name. The property is a CSS property. The value is a CSS value.
·        Multiple styles are separated with semicolon.

Inline Styling (Inline CSS)
·        Inline styling is useful for applying a unique style to a single HTML element.
·        Inline styling uses the style attribute.
·        This inline styling changes the text color of a single heading.
Example:
<h1 style="color:blue">This is a Blue Heading</h1>

Internal Styling (Internal CSS)
·        An internal style sheet can be used to define a common style for all HTML elements on a page.
·        Internal styling is defined in the <head> section of an HTML page, using a <style> element:
Example :
<html>
<head>
<style>
body {background-color:purple}
h1   {color:white}
p    {color:blue}
</style>
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>

External Styling (External CSS)
·        External style sheet are ideal when the style is applied to many pages.
·        With external style sheets, you can change the look of an entire web site by changing one file.
·        External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page.

Example:
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>
RESULT

CSS Fonts
·        The CSS color property defines the text color to be used for the HTML element.
·        The CSS font-family property defines the font to be used for the HTML element.
·        The CSS font-size property defines the text size to be used for the HTML element.

Example:
<html>
<head>
<style>
h1 {
    color:orange;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:yellow;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>

RESULT
The CSS Box Model
Every HTML element has a box around it, even if you cannot see it.
·        The CSS border property defines a visible border around an HTML element.
Example:
p {
    border:1px solid black;
}
·        The CSS padding property defines a padding (space) inside the border.
Example:
p {
    border:1px solid black;
    padding:10px;
}
·        The CSS margin property defines a margin (space) outside the border.
Example:
p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

The id Attribute
·        All the examples above use CSS to style HTML elements in a general way.
·        To define a special style for one special element, first add an id attribute to the element.
Example:
<p id="p01">I am a girl.</p>
RESULT
·        then define a different style for the (identified) element.
Example:
p#p01 {
    color:blue;
}

The class Attribute
·        To define a style for a special type (class) of elements, add a class attribute to the element.
Example:
<p class="error">I am different</p>
·        Now you can define a different style for all elements with the specified class.
Example:
p.error {
    color:blue;
}

Deprecated Tags and Attributes in HTML5
·        In older HTML versions, several tags and attributes were used to style documents.
·        These tags and attributes are not supported in HTML5!
·        Avoid using the <font>, <center>, and <strike> elements.
·        Avoid using the color and bgcolor attributes.
Chapter Summary
·         Comment tags < !- - and - -> are used to insert comment in HTML.
  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for visible element borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

  
HTML for Juniors | PART  : 6
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 Comments and CSS (Cascading Style Sheets)
Comment tags < !- - and - -> are used to insert comment in HTML.


HTML  Comments tags
You can add comments to your HTML page by using the following syntax .
< ! - - write your comment here - - >

*    NOTE
There is an exclamination mark in the opening tag, but it will not in the closing tag.

·        Comments are not displayed by the browser, but they can help document your HTML.
·        With comments you can place notifications and reminders in your HTML.
Example :
<-- I am a girl -->
<p>I love to write articles..</p
<!-- Remember to add more information here -->

·        Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.
Example :
<!-- Do not display this at the moment
<img border="0" src="pic_girl.jpg" alt="Girl">
-->
Conditional Comments
You might stumble upon conditional comments in HTML.
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
Conditional comments defines HTML tags to be executed by Internet Explorer only.

Software Program Tags

·        HTML comments tags can also be generated by various HTML software programs.
·        For example <!--webbot bot--> tags wrapped inside HTML comments by FrontPage and Expression Web.
·        As a rule, let these tags stay, to help support the software that created them.

HTML CSS
CSS means Cascading Style Sheets.

<html>
<head>
<style>
body {background-color:purple}
h1   {color:white}
p    {color:blue}
</style>
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>

RESULT

Styling HTML with CSS
Styling can be added to HTML elements in 3 ways:
  • Inline
 using a style attribute in HTML elements
  • Internal
 using a <style> element in the HTML <head> section
  • External
using one or more external CSS files
The most common way to add styling, is to keep the styles in separate CSS files.

CSS Syntax
CSS styling has the following syntax.

element { property:value; property:value }
·        The element is an HTML element name. The property is a CSS property. The value is a CSS value.
·        Multiple styles are separated with semicolon.

Inline Styling (Inline CSS)
·        Inline styling is useful for applying a unique style to a single HTML element.
·        Inline styling uses the style attribute.
·        This inline styling changes the text color of a single heading.
Example:
<h1 style="color:blue">This is a Blue Heading</h1>

Internal Styling (Internal CSS)
·        An internal style sheet can be used to define a common style for all HTML elements on a page.
·        Internal styling is defined in the <head> section of an HTML page, using a <style> element:
Example :
<html>
<head>
<style>
body {background-color:purple}
h1   {color:white}
p    {color:blue}
</style>
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>

External Styling (External CSS)
·        External style sheet are ideal when the style is applied to many pages.
·        With external style sheets, you can change the look of an entire web site by changing one file.
·        External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page.

Example:
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>
RESULT

CSS Fonts
·        The CSS color property defines the text color to be used for the HTML element.
·        The CSS font-family property defines the font to be used for the HTML element.
·        The CSS font-size property defines the text size to be used for the HTML element.

Example:
<html>
<head>
<style>
h1 {
    color:orange;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:yellow;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>
<h1>I am a girl.</h1>
<p>I love to write articles..</p>
</body>
</html>

RESULT
The CSS Box Model
Every HTML element has a box around it, even if you cannot see it.
·        The CSS border property defines a visible border around an HTML element.
Example:
p {
    border:1px solid black;
}
·        The CSS padding property defines a padding (space) inside the border.
Example:
p {
    border:1px solid black;
    padding:10px;
}
·        The CSS margin property defines a margin (space) outside the border.
Example:
p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

The id Attribute
·        All the examples above use CSS to style HTML elements in a general way.
·        To define a special style for one special element, first add an id attribute to the element.
Example:
<p id="p01">I am a girl.</p>
RESULT
·        then define a different style for the (identified) element.
Example:
p#p01 {
    color:blue;
}

The class Attribute
·        To define a style for a special type (class) of elements, add a class attribute to the element.
Example:
<p class="error">I am different</p>
·        Now you can define a different style for all elements with the specified class.
Example:
p.error {
    color:blue;
}

Deprecated Tags and Attributes in HTML5
·        In older HTML versions, several tags and attributes were used to style documents.
·        These tags and attributes are not supported in HTML5!
·        Avoid using the <font>, <center>, and <strike> elements.
·        Avoid using the color and bgcolor attributes.
Chapter Summary
·         Comment tags < !- - and - -> are used to insert comment in HTML.
  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for visible element borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

HTML for Begineers | PART :8

HTML for Begineers | PART  :8 HTML Links and Images ·         Links are nearly found in all the web pages. Links allows ...

  • HTML For Juniors | PART : 6
    HTML For Juniors | PART  : 6 In this article I’ll be discussing basic part of HTML that a junior (beginner) needs to know. From junior...
  • HTML for Begineers | PART :8
    HTML for Begineers | PART  :8 HTML Links and Images ·         Links are nearly found in all the web pages. Links allows ...
  • HTML For Juniors PART :4
    HTML  For Juniors PART :4 HTML Attributes HTML elements can have   attributes Attributes provide   additional information  ...