Do Fonts have Family - Chapter 3C

Chapter 3C

(This unit covers changing Font’s Family through in-line styling)

We have learned about changing font’s color through in-line styling in the previous chapter. In this article we will learn about how we can change font’s family (i.e. to Arial, Times New Roman etc)

The syntax for changing font’s family is very much similar to the syntax for changing font’s color.

The only thing we need to change is its attribute (i.e color) and its value (i.e. blue) from previous syntax with new attribute (i.e font-family) and its value (i.e. Garamond) respectively.

For E.g.

                 

Changing Font-Family

The above example changes the family of font from default (i.e. Calibri) to Garamond.

For better understanding let’s do some change in the code.

Click on the Image to Enlarge

Now Lets do something different, we'll change the font family of paragraph section to Helvetica.

Changing Font-Family of Heading & Paragraph

In the above example we have changes the Font Family of the paragraph through in-line styling.

For any query related to this topic, please leave comment.

Do not spam as it will be removed.

Changing Font Color - Chapter 3B

Chapter 3B

(This unit covers changing Font’s color through in-line styling)

As I told you earlier, you can use in-line style attribute not only with <p> but with many other tags as well.

Let’s take an example through heading tag. We will change the font color in heading.

The style attribute for changing font color is very much similar to the syntax we use in previous chapter for changing font size. The only thing we need to change is its attribute (i.e font-size) and its value (i.e. 20px) from previous syntax with new attribute (i.e color) and its value (i.e. red) respectively.

For E.g.

For better understanding lets do the changes we need in the code.

Click on the Image to Enlarge

The above example changes the color of font from default (i.e. black) to Blue.

Now Lets do something different, we'll change the font size and color at once. It's simple we can use two or more attributes at once in in-line styling but just separating it with a semi colon (;).

Let's do the changes in above mentioned example only but in the paragraph section.

Click on the image to enlarge

In the above example, we changed the paragraph's font size to 20px and color to red at once through in-line styling.

For any query related to this topic,please leave comment.

Do not spam as it will be removed.

What about Font Size - Chapter 3A

Chapter 3A

(This unit covers customization of Font Size through in-line styling.)

Now you know how to do in-line styling, we’ll see some practical implementation of it by changing its attributes.

We’ll dive into Fonts and see how we can customize it.

Remember <p> and </p> are opening and closing tags respectively. We’ll use our in-line styling on them.

To change the font size, we’ll use font-size as attribute followed by a colon. Next enter the value that you want for your text and end it with px.

E.g. <p style = “font-size:20px”>

Example of Changing Font Size

The above example changes the Font Size of paragraph from default to 20px.

For any query related to this topic,please leave comment.

Do not spam as it will be removed.

Let's do In-line Styling - Chapter 3

Chapter 3

(This unit covers importance of In-line styling)

We have learnt about Comments in previous chapter. Now you know enough to write code in HTML.

Let’s put pedal to the metal and start doing some styling for our HTML pages. If you remember, HTML is like skeleton of your website and CSS is like skin & make-up on it.

In this session, we’ll learn about in-line styling and discuss the following:

• What is in-line styling?
• Why we need them?
• How to use them?

What is in-line styling?

In-line styling simply means we can do some styling directly in our HTML files. No need to worry about separate CSS file.

Why we need them?

In-line styling is very important if our website needs only few styling changes. We can write styling code in our HTML file only.

Moreover, we’ll learn to do in-line styling first because after this learning CSS will be very easy.

How to use them?

Using in-line styling is very easy as it is use along with any other HTML tags used for text. (i.e. <p>, <h1> etc...)

We can give tags more command by inserting some attributes in the opening tag.

The main syntax is shown below:

<HTML Tag style = “attribute: value”>

Here HTML Tag can be <p> or <h1>, <h2> many more...

Style starts the in-line styling.

Attributes are characteristics such as font-size, font-color, font-family etc..

Value is simply values related specifically to its attributes.

For E.g.

The above example of in-line styling simply changes the color of font to red.

For any query related to this topic,please leave comment.

Do not spam as it will be removed.

Is Commenting Good? Chapter 2

Chapter 2

(This unit will cover the important use of commenting)

Till now you have learned a lot about writing codes. It’s easy for you to understand your written codes but what if someone else has to read / understand your code. It will be a complex task to understand what exactly the single line of code is doing.

To make this task easy we use comment feature. Below is detailed description about:

• What are comments?
• Why they are important?
• How to use them?

What are comments?

Comments are Simple Human Readable Descriptions that you write inside any Code, specifying what that Code is doing at that particular line.

Through use of comments in your code, you can add notes in your programming code just to remind what that line-of-code means in future. Browsers do not display comments. They are just useful information for you and others.

Why they are important?

If any program is well commented then finding bugs inside that code or the maintenance of that code is very easy.

Apart from these use, commenting any program makes its more readable and understandable for other programmers who are working on your code. Any programmer can utilize your previous piece of codes into new program just by simply reading the comments.

How to use them?

To make any line into a comment we have to write within <! -- YOUR COMMENTS -->

Commenting a line starts with <! -- and ends with  - ->

Example of Commenting in HTML

For any query related to this topic,please leave comment.

Do not spam as it will be removed.

Making of List - Chapter 1

Chapter 1

(This unit will cover advance HTML Structure – Making Lists)

In this chapter we’ll understand exactly:

• What is List?
• Why they are Important?
• Types of List – Ordered & Unordered
• How to use each of the Lists.

What is List?

A List is the number of useful items written together, one below the other. For E.g. your grocery list.

Why they are Important?

Suppose you are making a website related to Food or you are writing an article on famous Foods. Then you need to show your users the Food Dishes in a category of Lists.

Another E.g. Whenever we want to categories any items in ascending/descending order, we use List.

Types of List?

Any List can be written either in ordered form or unordered form.

Ordered List – Any list that is numbered.

Unordered List – Any list that is not numbered, but written in Bullets.

How to use them?

Ordered List – The HTML tag for Ordered List are <ol> and </ol>.  <ol> and </ol> specifies the opening and closing of Ordered List respectively.

To make ordered list, we start with the opening tag <ol>.

To write each individual items within ordered list, we use <li> and</li> tags.

Each list item is written only in one line. That means entire Element is written in one line.

Then to close our Ordered List we use the closing tag </ol>.

An example of Ordered List

Unordered List – If we want to show our users any list in bullet points, we use Unordered List.

The best things about them are they work exactly same as Ordered List but the only difference is in their HTML tags. Instead of <ol> and </ol>, we use <ul> and </ul>.

Rest all things are similar.

An example of Unordered List

For any query related to this topic,please leave comment.

Do not spam as it will be removed.

Introduction to Advance HTML

Congratulation!! You have done an awesome Job!

Here’s quick overview of things you have learned so far.

• What is HTML actually.
• How to setup <head> and <body> tags.
• How to use Headings and Paragraphs in a website.
• How to add images to a website.
• How to make Hyperlinks.

In this advance course, we’ll take a step up. We will be covering advance topics like:

• Making lists – Ordered & Unordered.
• Customizing the Font’s size, colour and type.
• Changing the background colour of website.
• Proper Alignment of Text.
• Adding Tables into a website.
• Using of Div & Span.

With this we’ll complete our HTML Course and we’ll then start learning CSS.

Happy Learning J