An Overview to Semantics in HTML5

The semantic HTML structure is one which tells how is HTML used on web pages. The proper presentation of HTML elements on the web page is explained by this. Semantics is required that is it is easy to communicate with the non-programmer as well. 

By the use of semantic tags, we actually provide the additional information to the document that is being built. It provides proper and complete information on the workflow of the content that is displayed.

Learning core concepts like semantic tags is really important for every learner pursuing any HTML & CSS3 course.

Semantics has been divided into four different categories:

• First one is - Document structure tags
• Secondly, Textual meaning tags
• Then, Media type tags
• The last one is Correlation tags

Now, firstly we will see Document Structure Tags:

•         header: It is used to show the header content of the webpage such as logo, navigation bar etc.

•         footer: It is used to show footer content of the webpage such as copyright details, navigation links, contact information, etc.

•         main: It is used to show the unique content of the webpage.

•         nav: It is used to show the navigation bar buttons. It is mainly used in header or footer or in aside element

•         section: It is used to divide the page into sections or chapters

•         aside: It is used to show that there is some more content related to the website but not directly to that page.

•         article: It is used to write the blog or article in this tag.

Now, secondly, we will discuss about Textual Type Tags:

•         h1 to h6: These tags are used to highlight the title or content.

•         strong: This helps in making the content bold and standout about other content.

•         mark: It is used as a highlighter.

•         cite: It is used to mark the original content

•         blockquote or q:  Both these are used when text is directly related to the quotation

•         time: It is used to tell the time.

Thirdly we will discuss Media Type Tags:

•         audio: It is used to attach audio to the page.

•         video: It is used to attach the video to the content

•         picture: It is used to pick the best picture among so many on the web browser on the basis of the media query.

Lastly, we will discuss Correlation Tags:

•         ul: Used to highlight the starting of an unordered list

•         figure and figcaption: It is used to insert a figure. It is usually paired with figcaption to caption the image as well.

Conclusion:

Hello, my name is Paras Puri. I’m pursuing Graphics MasterPlus course from ADMEC Multimedia Institute. This blog is one of the parts of my HTML & CSS3 projects.

I hope my blog will be useful to you. And it also explains all the semantics of HTML clearly. Since they are a vital part of HTML coders and very helpful for web designers.

Understanding Borders in CSS with Live Examples

Web designers need different types of borders around various elements in a web page e.g. text, pictures, videos etc. If you are learning HTML & CSS course then you can ignore borders. With the help of this property we can identify the border of the box and how it should look, here we are talking about the border which is representing an element. This property is used to identify the border of the box and how it should look, here the border of the box is representing an element.

There are three possible properties of the border:

⦁ Border-style: It specifies the style of the border by having different values whether it may be solid, dashed line, double line, or one of the other possible values
⦁ Border-color: It specifies the color of the border
⦁ Border-width: It specifies the width of a border
Different Border-Styles in CSS

⦁ Solid
It means single line (solid) border.
⦁ Dotted
 Border is formed by a sequence of the dotted line.
⦁ Dashed
short lines are used for Border.
⦁ None
It means border does not exist.
⦁ Inset

Border is in 3D.  The border looks like as it is fixed in the page by using this style of border.

⦁ Outset
This border-style is used to set the border in 3D. The border looks like as it falls out of the page by using it.
⦁ Double
Border is double lined.
⦁ Groove
Border is in 3D. It looks as it is cut up the page.
⦁ Ridge
It is opposite of groove.
⦁ Mix
Here border on each side is different.

Different Border-Colors in CSS

This property is used to set the color of the border which can be set by four different types:

The color of the border can be set by using different types:
⦁ name - specify a color name, like "blue"

.solid{
width: 300px;
border: 3px solid;
border-color: blue;
}


⦁ Hex - specify a hexadecimal value, like "#ff0000"

.solid{
width: 300px;
border: 3px solid;
border-color: #1f5dc1;
}


⦁ RGB - specify an RGB value (Combination of Red, Green, and Blue), like "rgb(255,0,0)"

.solid{
width: 300px;
border: 3px solid;
border-color: rgb(12, 242, 92);
}


⦁ Transparent – No border is there.

.solid{
width: 300px;
border: 3px solid;
border-color: transparent;
}

Different Border-Width in CSS

The border-width property specifies the width of the border.

We can use a specific unit for the width of a border and that units are (px, pt, cm, em, etc) or we can specify it by using any pre-defined value from three options: thin, medium, or thick.

⦁ Specifying width in pixels.
.solid{
width: 300px;
border: 3px solid blue;
}


⦁ Specifying width by using one of the pre-defined values: thin, medium, or thick.

.solid{
width: 300px;
border: medium solid yellow;
}
 

Different Border-Sides in CSS

By using border-width, we can give different width and color to the border by categorizing it in four types. Four types of the property i.e. bottom border, right border, top border, and the left border.

.solid{
width: 300px;
border-top: 2px solid #f0890a;
border-right: 3px dashed #ed4725;
border-bottom: 4px dotted #f0890a;
border-left: 5px double #ed4725;
}

Conclusion
CSS shorthand properties (properties which can have multiple values) are great, and border property is one of them. It is a great way to reduce the length of the code of a CSS document.
To become a master of CSS you should have a sound practical knowledge of each and every concept. For attaining such knowledge, you need to join an ideal training institute for HTML and CSS training.

Join Web Development Institute for enriching your skills and become a CSS Master with sound practical understanding.

10 Important Points Never to Skip While Learning HTML

You might be thinking that can I be a good HTML programmer. Of course you can, you just need to make a proper planning that how to start so that you can understand the lessons and the concepts being taught because when it comes to practice you find it quite difficult. So here are some important points that should be kept in mind when you are learning HTML course either from an institute, from a book, or from online.

1. First, Work on Basics: This is the very first thing when you are a beginner you need to know what are the basic points to be kept in mind so that you can go through easily. It usually happens that few questions comes in our mind that form where to start, whom to listen and what to ignore. Just to keep these questions away follow these steps.
2. Learn Making Mistakes: It sounds little tricky but there is a famous saying that one should learn from his mistakes. Keep your mind open for trying out new things and keep learning by doing. Don't be hard on yourself, learn through trials and errors.
3. Understand What HTML is and What We can do with: HTML is the mother tongue of the web browser we can say. All the web pages are written in HTML. Basically you can say that HTML which stands for Hyper Text Mark-up Language is the foundation for all the web pages and web sites. Without HTML you will not be able to organize the text, images and other content of your web page. It is used to describe the structure of the web page. We use elements in HTML which are the building blocks of web pages. HTML elements are represented with tags and are highlighted with angle tags. Browser doesn't display HTML tags rather it uses them to render the content to the web page.
4. Choose Suitable Text Editor and Build Something: There is a variety of text editors available such as sublime text editor, notepad, notepad+, text mate and many more so choose whichever is suitable to you. But here for the beginners we will prefer to use plain text editor that is notepad so that they can perfectly understand the basic structure. And now is the time to start the working so lets get started:

<!DOCTYPE HTML>

<HTML>

<head>

<title>My First HTML Page</title>

</head>

<body>

<h1>Hey! I'm using HTML</h1>

</body>

</HTML>

So, this is the basic structure  we follow, whatever we write in the body section is displayed on the browser.
5. Working with Tags and Elements: In HTML a tag describes the element and highlights it with angular brackets. Tags are of two types:
▪    Opening Tags: This is the opening tag <p> of an HTML element. These tags are used to kick off the document and also we can describe the properties of the element in the opening tags.
▪    Closing Tags: these tags are as same as the opening tags but with a little bit difference of a forward slash i.e. </p>.
6. Check Your Work: Now is the time to check what you have coded in your text editor and for that you have to save your file first so press Ctrl+S and them save your file with the extension .htm or .HTML both are considered as same eg. Index.HTML. Now right click on the file and click on the button open with and choose your favorite browser and click on it and the file you have made is in front of you.
 7. Speed Up Your Workflow: Now you have learned the basics of HTML. All about the structure and what HTML is and what you can do with so explore your knowledge go through the details and speed up your workflow. Lots and lots of content is available on different websites so what you have to do is study more and gain knowledge from it.
8. Stay Focused and Practice Everyday: If you want to become master in a language that stay focused one it, clear all the necessary concepts because it becomes easy to pick up another language when you become master on one language otherwise you will mess up all the concepts. As you all know Repetition + Focus + Consistency = Key of Success. So for a smooth transition you need to practice on continuous basis. 
9. Apply Your Own Skills: Whatever you wish to create... start it as soon as possible. Now you have learned all the basic terms so start building with your own skills whatever comes in your mind by doing this you will ask more questions to yourself and will try to answer them and in this way you will find new ways to solve the problems.
10. Keep Learning: By tracking your learning you will get more focused and will also get self -motivated. The best way of being a good programmer is to be a good learner. So keep learning and keep exploring your skills and wherever you get stuck don't lose your hope, just keep fetching the same until you get the desired results.

At last here we can just say that keep learning, keep practicing and keep exploring. All the time you will spend in learning will pay you back sooner than you have thought of. Join ADMEC Multimedia Institute a renowned platform where you can enhance your web designing and development skills at advanced level for accomplishing a successful career.
Always remember that you will never be done with learning, you can enhance it more and more by joining advanced web designing courses.