AryanSchoolTech: July 2018

Wednesday, 4 July 2018

The Importance of Div Tag & Span Tag in HTML

Lets see why the Div tag is considered one of the most important tag while designing the web page layout.

DIV Tag: DIV tag is known as division tag. Div tag does sectional division in the HTML document, by enclosing with large section of HTML elements together in a group. So Div tag is also known as block-level element. Thus we can apply CSS to the whole section of elements by using Div tag. And updation or changes to the CSS script also becomes easy. Use of Div Tag makes the web page to look more presentive and with systematic block contents to avoid misinformation about the webpage or website. <div> is open tag and </div> is closing tag. It also supports Global and Events attributes.

Example:

DIV tag representation

SPAN Tag: SPAN tag makes style changes to small section of the tag's inline content whether it be a text or image content. So Span tag is also known as inline element. <span> is open tag and </span> is closing tag. It supports Global and Events attributes.

Sample Code:

<!DOCTYPE html>
<html>
<head>
<h1>Importance of DIV & Span Tags</h1>
</head>
<body>
<div id= header style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">
Welcome to <a href="https://aryanschooltech.blogspot.com/">AryanSchoolTech !</a><br>
<b>About Div Tag & Span Tag</b>
<div id= nav style="background-color:lime;border:1px solid pink;padding:20px;font-size:20px">navigation </div>
<div class=article style="display: table-cell;width:600px; background-color:orange; border:1px solid pink;padding:20px;font-size:20px">
About Div tag
<div id= section style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">HTML div element is used to wrap large sections of elements.
<img src="images.png" height="200" width="400">
</div>
</div>
<div class=a style="display: table-cell;width:700px;background-color:yellow; border:1px solid pink;padding:20px;font-size:20px">
About Span tag
<div id= section style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">HTML span element is used to wrap small portion of texts, image etc.
<p>This text has used span element to color the word <span style="color:blue;font-weight:bold;">blue</span> as a style.</p>
<img src="span.jpg" height="100" width="400">
</div>
</div>
<p>Thank You!</p>
</div>
</body>
</html>

OUTPUT:

Use of Div tag and span tag

Monday, 2 July 2018

Three Ways to Insert CSS in HTML document.

To make the CSS script writers or website developer feel comfortable about the inserting ways of CSS script in to HTML document. Each of the three ways of embedding CSS into HTML document has some kind of benefits and convinence. As many developers needs to work as per their client's requirements, so they need to keep in mind the changes/updation of CSS scripts and accordingly uses the particular CSS inserting way.
We can style and design the tags which are enclosed within the <html> tag of the HTML document.
The three ways for embedding CSS are:

External Style
Internal Style
Inline Style

1. External CSS:

External StyleSheet is another way to insert CSS script into the HTML document. In this way there is a insertion of link tag referencing to the source css file which is externally saved as .CSS file formate. The changes or updations made on to the external css file will perform it's effect on the website's HTML document as it has external link to .CSS. External CSS is prefered when there is need of global CSS change of the website. It is used only for global site change.

Code Sample:

Save as the below script by exstyle.css :

h1 {color:blue;}
img {
padding:1px;
border:1px solid #021a40;
background-color:#fffff;
}
h2 {color:red;}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}

Save as the below script by ExternalCSS.html:

<!DOCTYPE html>
<html>
<head><br />
<link rel="stylesheet" type="text/css" href="/Users/natas/OneDrive/Desktop/Desktop/DSJ/SchoolTech/extstyle.css" /><br />
</head>
<body bgcolor = "pink">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 align= "center">Link tag demo</h2>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

OUTPUT:

Output for External Stylesheet (ExternalCSS.html)

2. Internal CSS:

Internal Stylesheet is another way to insert CSS script into the HTML document.
In this way the CSS script is inserted (internally) within the STYLE tags of HTML, in between the HTML head element. So even if the developer needs to change/update the script he will only make changes to the script content within the STYLE tags. The changes within the STYLE tags makes effects on the webpages's or site's presentation.

Code Sample:

Save as the below script by InternalCSS.html:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:blue;}
img {
padding:1px;
border:1px solid #021a40;
}
h2 {color:red;}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
</style>
</head>
<body bgcolor = "pink">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 align= "center">Link tag demo</h2>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

OUTPUT:

Output for Internal Stylesheet (InternalCSS.html)

3. Inline CSS:

Inline CSS is another way of embedding CSS into HTML document. In this the CSS script is added inline with the specific HTML tags. Individual tag is styled by using style attribute within the HTML tags. It's use is convinent only then, when there isn't need of reusing the tag style for each webpage of a site and when there is need of individual tag style for every web page.

Code Sample:

Save as the below script by InlineCSS.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor = "pink">
<h1 style="color:blue" align= "center">Image tag demo</h1>
<img style="padding:1px;border:1px solid #021a40" src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 style="color:red" align= "center">Link tag demo</h2>
<a style="color: (internal value);text-decoration: underline;cursor: auto" href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

OUTPUT:

Output for Inline Stylesheet (InlineCSS.html)

The best and common way is to use External CSS link ie. to keep the whole CSS in a separate folder to avoid confusion between the CSS scripts and the HTML code. Also to make global changes and updations in the CSS file to have effective design to whole website at a time. It reduces the style scripting time for each and every web page of a website.

Introduction to CSS

Well, before moving to the Introduction of CSS; I would recommend to just refer the previously written article named as "About JavaScript & CSS3 in HTML" .
CSS is Cascading Style Sheets. I've simplified the meaning and the importance of CSS by giving an actress example. Like about the looking and dressing of an "xyz" actress in her normal days and how the looking and dressing sense changes while attending some celebrations or programs. This is just an analogy to show how simple the HTML structure is before adding CSS and the changes occur to the webpage or website after adding CSS into the HTML document. CSS properties gives refreshing look to the web page. CSS code includes selectors , properties and it's value. Selectors are nothing but the Html tags on which the CSS Styling is done. Properties can be height,width,size,color,style,margin etc. Values are like 400px for height ,400px for width,green for color,etc. CSS has control over font- size,style,color of the selectors . It also controls the website's layout designs and other effects as there is variations in the screen size or Laptop,mobile and other displays. There are three ways to insert CSS into the HTML, do check this article "Three Ways to Insert CSS in HTML document".

HTML vs CSS + HTML

Invention of CSS3:

IT was invented by Håkon Wium Lie on October 10, 1994, he formed CSS3 working group to look after and maintain the CSS documents known as specifications; the group is named as W3C.

W3C members ratified the specification officially and they called it as recommendations. Because the W3C ie. World Wide Web Consortium can't takeover the control they only can recommend about the working of Internet and how it can evovle its structure or design.

About CSS Versions:

CSS1 ie. the level 1 CSS, this version came out in December 1996. It is the official recommendation of the W3C; describes about a simple visual formatting model to all HTML tags.
CSS2 ie next version level of CSS, which came out in May 1998. This version became the W3C recommendation which decribes about the additional features on CSS1 with having support media-specific style sheets e.g. downloadable fonts,printers and aural devices, element positioning and tables.
CSS3 built on older CSS versions, came out in June 1999 ans become the W3C recommendation. This version divided the recommendation into documents and are declared as modules which futher extends it's fetures in CSS2 version.

CSS3 Modules:

Includes new extended module features along with the old moldule specifications.
They are Selectors, Box model, Image Values and Replaced Content,Text Effects,2D/3D Transformations,Backgrounds and Borders,Animations,Multiple Column Layout,User Interface.

Advantages of CSS:

Easy to learn: Easy to understand and easy to learn the CSS language even by a 10th grade school going kid or by a non tech guy.
Pages load faster: Once you wirte a CSS rule for a specific tag then you can reoccur the CSS style for the same HTML element to several different web pages. This behaviour of CSS of reoccurrence of the similar style formate for other webpag's tags when the tags are defined once earlier; leads to load the pages faster as the codesize is less.
Saves time: Apply CSS on each HTML tag, so as to use it in several web pages. You can write CSS once and can reuse the sheet on multiple HTML web pages of a website.Thus it helps to save your time.
Superior styles to HTML:CSS has wider arrays of attributes to design and represent to give the best look to a website. CSS attributes are much better than the HTML attributes in about styling the webpages.
Easy mantainance: When there is need to make global change to a website, then just change/update the CSS rule for various HTML tags. THus it is easy to mantain the CSS design of website.
Multiple Device compatibility: The same CSS code along with the HTML document becomes valid and best for content optimizing, when the website run through several different displays or screen sizes. Different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
Platform Independence: The CSS script can run over various latest browsers and is not a platform specific.
Global Web Standards:Now HTML attributes are deprecated so it is recommended to use CSS. Thus using CSS in all the HTML pages to make them compatible to future browsers.
Offline Browsing: The speciality of CSS that it can store automatically the web applications in the catche. Can view the sites offline and also loads the page quickly.

Topics

Wednesday, 4 July 2018

The Importance of Div Tag & Span Tag in HTML

Monday, 2 July 2018

Three Ways to Insert CSS in HTML document.

1. External CSS:

Code Sample:

2. Internal CSS:

Code Sample:

3. Inline CSS:

Code Sample:

Introduction to CSS

Invention of CSS3:

About CSS Versions:

CSS3 Modules:

Advantages of CSS:

Recent Blog

About Me