Category: HTML & CSS

html_attributesnew
Posted on By

HTML ATTRIBUTES

Hello Friends,

HTML attributes is the properties by virtue of which HTML element change its nature.

I make this simple to understand it better.

we take an example of a plain white wall which does not look impressive with its white look but when we paint the same wall with some amazing color then it starts looking attractive and we can also draw few pictures over a wall.

So, here color and pictures are the attributes of a wall which makes it beautiful and attractive.

In the same manner HTML attributes just like color, background color, style, fonts and etc make our HTML document more attractive and beautiful.

In simple language, we can say that HTML attributes do the makeup of our HTML document.

In our next tutorial, we will let you explain each attribute with an example.

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about html attributes.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html_quotation_and_citation_element
Posted on By

HTML QUOTATION AND HTML CITATION ELEMENT

Hello Friends,

In this blog post, I am going to explain about HTML quotation and HTML citation.

First of all, you should know that what is HTML quotation and HTMLcitation?

You would have definitely heard about single quotes(‘ ‘) and double quotes(” “). These are the quotation mark, when we keep any sentence or paragraph inside these quotation mark then it is considered as a quotation.

Where we use these HTML quotation mark?

Generally, we use these quotation mark to express the words said by others in our writing, for example,

Merry said “She is learning HTML” If we want to write this without quotes then we will write this like:

Merry said that she was learning HTML. These were the example of direct and indirect speech. So quotation mark is used in case of direct speech.

We also use quotation mark to represent any special name or any other important sentence that has to draw some extra attention.

And citation if used to define the title of the work.

We will explain you all elements which are used to quotes the sentences and citation. See the below example for the same.

HTML <q> for Short HTML Quotations:

This element is used to get a short quotation, browser adds the quotation mark to the text which is written between <q> and </q>. See the below example for the same.

<p>The goal of education is to: <q>make people understood about their rights and duty.</q></p>

HTML <blockquote> for HTML Quotations:

This element is used to define a section which is quoted from another source. See the the below example for the same. Browser usually indent <blockquote> element means they leave some space before and after the quotation.

<p>Here is a quote from a5theory website:</p>
<blockquote cite="http://a5theory.com/aws-ses-complete-guide-to-setup/">
There is nothing like this, this is just a name given by them to their service may be AWS provides some additional service with this like SNS for spam and bounce configuration and etc…… so they just would have given this name. do not confuse with this name.
</blockquote>

HTML <abbr> for Abbreviations:

This element is used to provide the abbreviation or achronym to the specific word or sentense. This abbreviation gives an idea to the browsers, translation system and all serch-engine to display the information about any word or sentense. See the below example for the same.

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="A5theory">WHO</abbr> was founded in 2017.</p>

<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

</body>
</html>

HTML <address> for Contact Information:

This element is used to display the contact information of(author/owner) of a document or an article. Usually they are displayed in Italic and most of the browsers leaves a line break before and after the address. See the below example for the same.

<address>
Written by Jen lee.<br>
Visit us at:<br>
A5theory.com<br>
United states<br>
USA
</address>

HTML <cite> for Work Title:

This element is used to display the title and it is usually displayed in Italic. See the below example for the same.

<p><cite>The A5theory</cite> by Anurag Tiwari. Developed in 2017.</p>

HTML <bdo> for Bi-Directional Override:

This element is used to define the bi-directional override and used to override the current text text direction. See the below example for the same.

<!DOCTYPE html>
<html>
<body>

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post HMTL Quotation and HTML citation.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html_text_formatting_featureimg
Posted on By

HTML TEXT FORMATTING

Hello Friends,

In this blog post, I am going to let you know about HTML Text Formatting.

However, we have explained you about the style attribute in the previous blog post where we told you to format the text with the help of style attribute. but there are some more special HTML element which can be used for formatting the html text. See the few examples for HMTL Text formatting below.
htmlformating1

So now we will look for some more element which is used to format the HMTL text. For example, <b> and <i> are some special element which is used to get Bold and Italic formatting output.

This formatting element was designed to get a special type of text formatting. Now we will see few more element and their special effect over html  text.

Below you can see the list of some special elements.

<b> – Bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Small text
<del> – Deleted text
<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text

We will see these special element one by one with one example.

<b>:

<b> defines a bold text where it the text is not considered to be important. this tag is just a way to style the text as bold.

<b>This text is bold</b>

<strong>:

this tag is display the text as strong formate which looks alike <b> but there is difference between these two tag. <strong> tag is used for the text which is important.

<strong>This text is strong</strong>

<i>:

this tag is used to define the italic tag which is not considered to be more important.

<i>This text is italic</i>

<em>:

this element is defines emphasized text, which has some important mearnning.

<em>This text is emphasized</em>

<small>:

This element is used to get smaller text.

<h3>HTML <small>Small</small> Formatting</h3>

<mark>:

This element is used to highlight or mark any particular html text.

<h3>HTML <mark>Marked</mark> Formatting</h3>

<del>:

This element defines the text which has been (deleted)removed from the html text.

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

<ins>:

This element defines inserted(addded) text.

<p>My favorite <ins>color</ins> is blue.</p>

<sub>:

This element used to define the <sub>subscripted</sub> text.

<p>This is <sub>subscripted</sub> text.</p>

<sup>:

This element is used to define <sup>superscripted</sup> text.

<p>This is <sup>superscripted</sup> text.</p>

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about HTML text formating.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

style_attribute_featureimage
Posted on By

HTML STYLE ATTRIBUTE

Hi Friends,

In this blog post, I am going to explain about the most interesting HTML attribute that is html style attribute.

The html style attribute is used to set the property like text-size, color(text-color, background-color), text alignment and etc.

there is a proper syntax for writing the HTML style attribute. See the below example for HTML style sample and standard syntax.

<tagname style="property:value;">

Here property is a CSS property and value is like a CSS value.

HTML Style – back-ground-color:

Using this property we define the background-color of our page or any other HTML element.

The below example set the color of a page to blue. See the below example for the same.

<body style="background-color:blue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Style –  text-color:

This property define the color for a HTML text element. See the below example for the same.

<h1 style="color:grey;">This is a heading</h1>
<p style="color:blue;">This is a paragraph.</p>

HTML Style – Fonts:

font-family is used to set the font style for an HTML element. See the below example for the html style.

<h1 style="font-family:Arial;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Style –  text-size:

This property is used to get the desired font size to the HTML element. See the below example for the same.

<h1 style="font-size:250%;">This is a heading</h1>
<p style="font-size:150%;">This is a paragraph.</p>

HTML Style –  text Alignment:

This HMTL property define the text-alignment of an HTML element in horizontal direction. See the below example for the same html style.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:left;">Centered paragraph.</p>

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about HTML Style.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

htmlparagraph_featureimage
Posted on By

HTML Paragraph tag, Line break tag, HTML pre tag

Hello Friends,

In this blog post, I am going to let you know about the HTML Paragraph.

It is denoted by HTML element <p >, See the below example for the same.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

When you see the html paragraph in output window or browser then you will see the browser itself leaves a space or margin before and after the Paragraph.

HTML Display:

You can not predict exact HTML output over the browser.

It will also depend on your screen size whether it is larger or smaller. So window screen size definitely affects the HTML output.

you can not manipulate output by adding extra spaces or lines to your HTML code as a browser will remove the line and extra space when a page will load.

See the example below for the same.

<p>
In this paragraph
lots of lines in the
source code will before
ignored by the browser.
</p>

<p>
In this paragraph
lots of spaces in the
source code will be
ignored by the browser.
</p>

Never forget the END tag:

A browser would display the output correctly even you missed writing END tag.

See the example below for the same.

<p>This is a paragraph.
<p>This is another paragraph.

The example explained above can work on most of the browser but we should not be dependent as it is not sure to work always and can produce an unexpected result at any point in time.

HTML Line Break:

If you want to break a line without starting a paragraph then you should use <br> HTML tag.

This is an empty tag and thus don’t have any END tag. See the below example for the same.

<p>This is<br>a paragraph<br>with line breaks.</p>

What is HTML paragraph Poem problem?

As per this problem if you write a poem inside a paragraph tag with a proper line break and spaces but it will always display in one single line. See the below example for the same.

<p>
The moon is shining o'er the field.

A little breeze is blowing.

The radish leaves are crisp and green.

The lettuces are growing.
</p>

So what is the solution for as such problem?

HTML <pre> tag is the solution for this problem. This tag is used for preformatted text.

The text inside this <pre> tag displayed as you write with the fixed width and font size.

It also maintains all line break and spaces that you have given while writing. See the below example for the same.

<pre>
The moon is shining o'er the field.

A little breeze is blowing.

The radish leaves are crisp and green.

The lettuces are growing.
</pre>

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about HTML paragraph.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html_heading_feature-image
Posted on By

HTML HEADING: HTML HEADER, HTML INSPECTOR.

Hello Friends,

Today I am going to let you know about the HTML heading.

In HMTL you have are provided total six tags for writing the html heading. which is from <h1> to <h6>.

Here h1 is considered as a most important heading where as h6 is considered as a least important heading.

you can see the HMTL headings example below.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Now the question is why these HTML heading are important whereas we can get the same effect with the help of CSS?

HTML heading are very important and this is used to identify the structure of your document. Your content information is analyzed with the help of headings.

Most importantly search engine use this heading to get all the information about your web page content so here heading play an important role in recognizing your content that affects the rank of your page.

So you should be very careful while making the headings for your document.

HTML heading should not be used for jsut making a sentense big and bold though it should be as per the it’s virtue that can easily identify your content uder it.

HTML Heading:

As we have already introduced with all the types of HTML heading. HTML headings have their default size, but we can also specify the desired size with the help of style attribute.

<h1 style="font-size:80px;">Heading 1</h1>
.
.
.
.
.
<h6 style="font-size:100px;">Heading 1</h6>

Hroizontal Rule:

<hr> tag is used to get the horizontal break between the contents. You can see the example given below.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HMTL <head> header Tag:

HTML head tag has nothing to do with HTML headings. This tag is just for writing HMTL metadata.

HTML metadeta is data about HTML documents, title, styles, links, script and other meta infomation. You can see the example below for the same.

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>
.
.
.

How to see the HMTL source code of any webpage in the browser?

It is really nice to function to see the HMTL source code of any webpage and inspect it at the spot and experiment changes by making a change in the HMTL attribute value though this is a temporary change to see the effect.

How to see the HMTL source code at the browser and inspect the HTML element?

This is really a very simple process, just open a web-page at the browser and then drag your mouse at webpage anywhere. Now make a right click on your mouse and choose the option to inspect element. See the image below for the same.

inspect1

You will see a window open on the right-hand side. where you can easily get the full HTML and CSS source code for your web-page. Now click on an inspect button and then click on web-page specific part whose HMTL source you are looking for. See the below image for the same.

inspect2

Now you can test your changes by changing the value of HTML and corresponding CSS. See the below image for the same.

inspect3

In a case of any queries, you can write us at a5theorysgmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about HTML heading.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

htmlelementfeatureimg
Posted on By

HTML ELEMENT

Hello Friends,

In this blog post, I am going to let you know about the HTML element.

What is HTML element?

An HTML element consists of start and ends tag with content inserted between the tag.

There is one opening tag and one closing tag and content is written between these two tags.

See the example below for the same.

<p>This is my first paragraph</p>
<h1>This is my first heading</h1>

Empty HTML Element:

SO this was about the HTML element with both opening and closing tag, but there are some HTML element which has only one tag with no content is called empty element.

See the example below for the same.

<br>

this is a complete tag without any closing tag and is used for breading the line.
You can also write this tag as <br/> though it is not necessary with the HMTL version5.

But if you close all HTML element properly then:

It can help you to achieve a strict validation.

Your document will be readable by XML parser.

Nested HTML element:

These are those elements which are written inside another HTML element, or when one or more HTML elements are written inside other HMTL elements then these HMTL elements are called nested HTML elements.

See the example below for the same.

<html>
<body>
<h1>This is my first heading.</h1>
<p>this is my first paragraph.</p>
</body>
</html>

In this example <html> tag describe the whole document and contains <body> tag inside it.

<body> element consist two more elements inside it one is <h1> and another is <p>.

SO here <html> element nesting <body> which is further nesting <h1> and <p>.

Are HMTL tags case sensitive?

No, HMTL tags are not case sensitive. You can write them in either way. But we recommend you to make the habit of lower case letters as it is being used by many standard HTML editors.

What mistake should you avoid while writing the content inside the opening and closing tag or HTML Element?

Generally when we write the HMTL code and sometimes we forget to write the closing tag but it does not impact the result in output.

This could be your best case while you get no error even after leaving the closing tag, but you should never do this mistake.

You should always write the closing tag if it is applicable to the concerned HMTL element.

The reason is that if you are not writing the closing tag then you can get an unexpected result at the browser and it can also distort the flow and effect of nearby HMTL element.

So make sure you write the complete HTML element where it is applicable.

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about HTML Element.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html_basic_feature_img
Posted on By

HTML BASICS: HTML TAGS & BASIC HTML PAGE.

Hello Friends,

Today I came with HTML basics, which is very important to know before learning HTML in brief. Here I will let you know about the html tags and basic html page.

It is also helpful in case when you just want to take an overview of HTML basics as for interview purpose or teaching purpose.

It will also help the beginners to accelerate their knowledge of HTML.

You must be familiar with the HTML basic when you are going to learn any version of HTML. HTML learning is really a fun and prepares you for building a fantastic webpage design.

In this blog, I am going to let you know about few basic html tags though there could be few tags which you are not familiar with, don’t worry we will explain all these tags in later blogs or chapter.

HTML DECLARATION:

<!DOCTYPE html>

This is HTML declaration and shows your HTML version you are using, you must write this at the top of your HTML document before all the tags.

What if you will not write this declaration in your HTML document? will this make any change to your HTML code?

Actually, this declaration tag notifies to the browser that which version of HTML you are using so browser gives the support to all the tags of that HTML version.

In case you miss to write this statement then it can be a case that browser will not support most of the newly updated tags.

So simply we can say this html basics statement or declaration affects the browser compatibility of your HTML document.

HTML BASICS TAGS:

<html></html>

An HTML document start with <html> tag and ends with </html> tag.

<body></body>

All visible part of an HTML document is kept inside this body tag.

<h1>…</h1>

This is HTML heading tag, you can find the range of this heading tag from <h1> to <h6>, here number shows the priority of the heading such as h1 shows that heading is most important heading and h6 shows that it is least important heading.

<p>…..</p>

This tag is used for writing a paragraph inside the HTML document.

<a href=”http://a5theory.com/”>Click here</a>

This is a ling tag and used for putting the link in the HTML document. When any user clicks this link then a user will be redirected to the href address given in the link.

<img src=”sampleimage.jpg” alt=”a5theory.com” width=”100″ height=”100″>

This is the image tag and used for putting the image in the HTML document, you need to put the full image path in the src section of this tag.

Example:

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post HTML Basics.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

htmleditorfeatureimg
Posted on By

HTML EDITOR

Hello Friends,

In this blog post, I am going to explain you about HTML Editor.

Whenever we decide to learn HTML language then first thing which comes to our mind is where to start from writing HTML code which is a genuine question.

If we talk on a broad level then there are various professional HTML editor to write HTML code to design a professional webpage like NetBeans IDE which allow us to write the HTML code.

But at the basic level or for new learners or beginners Notepad is the best option to write HTML code though you can use any version of notepad.

What is the step by step procedure to write and run an HTML code in notepad as a HTML Editor?

This is a very simple process to use nodepad as a HTML Editor, you just need to follow the procedure given below.

First, open your notepad, see the below image for the same.

htmleditor1

Then write HTML code in your notepad. See the below image for the same.

htmleditor2

Now save your program or code with HTML or HTM extension at desktop though you can save it anywhere on your desktop. See the below image for the same.

htmleditor3

htmleditor4

Now you can run your program on the browser. See the below image for the same.

htmleditor5

htmleditor6

So, here you have learned how to make HTML program at basic HTML editors like notepad. We will also let you know about some professional editors which are used to write the HTML code and to design the webpage.

professionalhtmleditors

So you can use any of the professional HTML editor to develop your webpage for your website.

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about html editor.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html-banner
Posted on By

HTML INTRODUCTION

 What is HTML?

HTML stands for Hyper Text Markup Language and used for creating the web pages.

For your better understanding, I explain you with an example of building construction.

A building construction is done with the help of brick, sand, and cement. So here brick, cement, and sand are the elements which together form a beautiful building.

In the same manner, HTML elements are used to construct a beautiful web page. When several HTML tags are written in a proper manner then they form a beautiful web page as per requirement.

Heading, Paragraph, Title, table are few example of tags which are used to write a specific type of content on the webpage as per the requirement.

How to design a simple HTML document?

you can achieve this by writing a simple HTML code which is also known as standard code. Please see the image below.

htmlimg1

How to run this program in the web browser?

There are several editors where you can write and run the HTML program, we will let you give the detailed description for all the HTML editors later. But as for now you just write down this code in a notepad and then save it with any name with HTML extension like as ‘myfirsthtmlprogram.html‘.

Once you will save this program then you will see a browser file is generated at your desktop within your default browser and then you can open that file and see the effect of your HTML code, now you can make an update to your code and can get the desired result.

How will this program display in the browser?

Web Browsers:

The web browser (Chrome, IE, Firefox, Safari) is used to read the HTML documents and display them on the screen.

The browser does not display the tag instead they show the effect of or property of that tag.

htmltitle

How many HTML versions have launched till now?

There are many version which has been launched till now with some update in the HTML tags. See the image below.

htmlimg2

HTML Tags

HTML tags are the name of HTML element inclosed with a pair of angle bracket(<>).

<tagname>Here we write the content…</tagname>

  • All HTML tags are written in pair like <h1>….</h1> except few of them like<img/>, </br> and etc.
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name
  • The start tag is also called the opening tag, and the end tags the closing tag.

HTML PAGE STRUCTURE

You can see the basic structure of HTML PAGE in below image.

htmlimg4

HTML: The <!DOCTYPE> Declaration

The <!DOCTYPE>  This declaration represents the type of document whether it is in HTML or HTML5 and this also helps to the browser to display the page correctly.

This declaration must appear once at the top of the document before any HTML tag.

This is not case sensitive.

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

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about HTML.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!