Basics of HTML and CSS
When it comes to Web Designing and Web Development, it is a very vast and broad field that a person cannot cover from a blog. Yet, being a novice to Web Designing and Web Development, I thought of sharing some of the knowledge I had gained so far in this context. The components namely HTML, CSS and JavaScript are the components that any website is made up of. In this blog, I have written about HTML and CSS only, since JavaScript is a complex scripting language that I cannot cover from this blog. Let me start off with HTML. HTML decides the basic structure of any website. In order to design and develop a website, HTML is essential. First, let me introduce the full form of HTML. HTML stands for Hyper Text Markup Language. It is a markup language, not a programming language. A markup language is a computer language that uses tags to define elements within a document. You can use any text editor that you prefer to type an HTML document. It should be saved with an .html extension.
Most of the HTML elements have starting and ending tags. HTML is not a case sensitive language. Every HTML document must start and end with <HTML> and </HTML> tags. When a user is viewing a web page the text to be displayed in the title bar is enclosed within the <TITLE> and </TITLE> tags. Then comes the <BODY> tag. Whatever the content that should be displayed in the webpage is typed within the <BODY> and </BODY> tags. But this content is not directly enclosed within the <BODY> and </BODY> tags. This content is enclosed within some other tags, depending on the type of the text that should be displayed. If it is a heading, depending on the significance of the heading there are 6 levels of heading namely h1,h2,h3,h4,h5 and h6. h1 is the most significant heading, while the significance gradually decreases when the number increases from 1 to 6. Accordingly, h6 is the least significant heading. Headings are enclosed within <hn> and </hn> where n is an integer from 1 to 6 according to the significance of the heading. Then comes the paragraph tags. Whatever the text that should be displayed in the webpage as a paragraph is enclosed within <p> and </p> tags.
The output will be as follows.
If you want to add images to your webpage, you have to use the <img> tag. The image tag has no ending tag. Now its time to write about attributes of a tag. Attributes are special words used inside the opening tag to control the element’s behaviour. Some of the tags used in HTML including the <img> tag has an attribute called src which stands for source. The src attribute of the image tag specifies the source of the image. It can be path of the image or the URL of the webpage having the image. There are also attributes called alt, height and width in the image tag which specifies alternative text, height and width for the image. Alternative text means the text that will be displayed if the image is not displayed. The way of using <img> tag with the above-mentioned attributes is as follows.
There are a lot more tags and attributes in HTML, but since this blog becomes lengthy, I will stop writing about HTML and move to the next component of a website. That is CSS.
CSS stands for Cascading Style Sheets. CSS is used to style a web page. There are 3 ways that CSS can be used in web designing. Those are,
- Inline CSS
- Internal CSS
- External CSS
1. Inline CSS
In Inline CSS, whatever the content that is to be styled is styled within the same line that the content is defined. For this, the style attribute is used. An example is shown below.
By using the above Inline CSS, the text of the paragraph is made blue. The output will be as follows.
2. Internal CSS
In Internal CSS, the specifications for styling is given within the <style> and </style> tags. Unlike in Inline CSS, Internal CSS gives the specifications for styling the whole website at once at the start of the HTML code. Therefore, website designers are relieved from the burden of styling each and every element they use in the HTML document inline. Here is how to use internal CSS.
The output will be as follows
3. External CSS
In External CSS, the specifications for styling is given in a separate external stylesheet. By using an external style sheet, the styling of an entire website can be changed by changing just one file. The style definitions are saved in an external .css file and is imported to the HTML document. You can choose any text editor to write your external stylesheet. The external .css file should not contain any HTML tags. An example is shown below.
When using external CSS, the HTML document must include a reference to the external style sheet file inside the <link> tag within the head section. Here is how this external stylesheet is linked to the HTML document.
The output will be as follows.
Okay, that’s it.
You may be wondering whether this is all you have to know about HTML and CSS. Of course not. You have to know a lot more than this about HTML and CSS in order to be a professional web designer and web developer.
Hoping to see you soon from my next article!!
