Introduction to HTML & CSS

Web improvement accompanies an enormous arrangement of rules and procedures each site designer should think about. In the event that you need a site to look and capacity as you wish them to, you need to get comfortable with web advances that will assist you with accomplishing your objective.

Building up an application or a site normally boils down to knowing 3 fundamental languages: JavaScript, CSS, and HTML. And keeping in mind that it sounds very muddled, when you understand what you are doing, understanding web innovation and the manner in which it works turns out to be essentially simpler.The advantages of learning HTML, CSS or any web innovation is that it enables you to make your thoughts on a “page”. Without the information on these dialects you will be restricted in utilising site developers or employing somebody to make your vision.

Web Technology

Web technology is defined as the methods by which computers connect with one another using markup languages and multimedia packages. Web technology has experienced a drastic transformation in recent decades, from some marked web pages to very specific work on an uninterrupted network.

In this blog i will give you a basic introduction of the first two fundamental languages of a web application which is HTML & CSS.

HTML

“If someone had protected the HTML language for making Web pages, then we wouldn’t have the World Wide Web.”- Feng Zhang

HTML stands for Hyper Text Markup Language, the most commonly used language on the Web to create web pages.HTML is one of the first things you can learn. Thanks to HTML, web browsers know what to show when they receive a message.

Actually, HTML is a Markup language as opposed to a programming language. Originally, HTML was created with the goal of defining the structure of documents, such as headings, paragraphs, lists, and so on, to encourage the sharing of scientific information among researchers. HTML is now commonly used to format web pages with the aid of various tags available in the HTML language.

Evolution of HTML from past to present

Source: Vlad Alexander

Why you should learn HTML?

Originally, HTML was created with the goal of defining the structure of documents, such as headings, paragraphs, lists, and so on, to encourage the sharing of scientific information among researchers. HTML is now commonly used to format web pages with the aid of various tags available in the HTML language.
HTML is an Unquestionable requirement for understudies and working experts to turn into an extraordinary Computer programmer exceptionally when they are working in Web Improvement Space. I will list down a portion of the main aspects of learning HTML:

  • HTML is Not difficult to Learn and Utilise.
  • HTML supported for all browsers.
  • HTML is the most friendly web technology
  • HTML is Essential of all Programming Languages.
  • HTML can Coordinate Effectively with Different programming languages.

On the off chance that you need to begin a carrier as an expert website specialist, HTML and CSS planning is an unquestionable requirement ability.

Why do we use HTML?

HTML is utilised to make pages that are delivered over the web. Pretty much every page of the web is having html labels in it to deliver its subtleties in the program.Shown below is the list of some Uses of HTML

  • Development of web pages - HTML is used widely in the development of sites on the world wide web. Each page contains a collection of HTML tags with hyperlinks to connect to other pages. Each page we witness is written on the worldwide web using an HTML-code version.
  • Navigation via Internet - This is one of the most innovative use of HTML. The use of the hypertext definition enables this navigation. It’s essentially a text that makes reference to other web pages or text and can navigate to referenced text or page by clicking on it. For the hyperlink to the web pages HTML is used extensively. A user can easily navigate between websites on different servers and between websites.
  • Capability of using offline- Once data can be stored in a browser, the developer can think about an application technique while the user is disconnected. HTML 5 has an application cache feature that will determine how the browser handles the offline situation. Application cache, which is responsible for offline capability, actually consists of various elements, including API methods for generating changes, reading manifest files and events. By using any of the properties in HTML 5, the developer can verify whether the application is online or not.

The Basic Structure of an HTML Document

`<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>First Heading</h1>
<p>first paragraph.</p>
</body>
</html>
  • <!DOCTYPE html> — declaration defines that this document is an HTML 5 document
  • <html> — HTML root element
  • <head> — This tag represents the head of the web page
  • <body> — This tag represents the body of the document.
  • <h1> — Represents the headings of the document.
  • <p>- Represents the paragraphs of the Document.

Once you learn about HTML.you may be wondering “How i am going to style my website”.This where CSS takes place.Now i am going to give a brief introduction about CSS.

CSS

Evolution of CSS

  • CSS was proposed in 1994 as a web styling language.To help to solve some problems of HTML
  • There were other styling languages proposed at this time,such as style sheet for HTML but CSS won
  • CSS2 became the recommendation in 1998 by W3C
  • CSS3 was started in 1998 but it has never been completed.Some parts are still being developed and some components work on some browsers.

The Basic Syntax of CSS

Source: https://www.w3schools.com/css/selector.gif

Example of a CSS

  • body is a selector in CSS (it points to the HTML element you want to style: <body>).
  • margin is a property, and 0 is the property value.
  • padding is a property, and 0 is the property value.
  • box-sizing is a property, and border-box is the property value.
  • overflow-x is a property, and hidden is the property value
  • background is a property, and rgb(48,48,47) is the property value.

Why you should learn CSS?

If you already know about html,you’’ll definitely know how a web page looks without CSS. It looks really bad.

Today almost all websites use CSS to design their websites and enhance their user experience.Let me demonstrate how a website looks without CSS using a small website that that i built using html & CSS.

Part of the HTML code of the website

Part of the CSS code of the Website

Now let’s see the difference of when using CSS and not using CSS.

Output of the website without using CSS (Only HTML)

Output of the website without using CSS

Output of the website using CSS

Output of the website using CSS

Now you can clearly see how the website looks terrible without any CSS. This is why we use CSS.

Then there is the question why you should learn about CSS, and the first response I can give is to create a web page. Without CSS, you will definitely not build a website. It can also be argued that you can build a web page using one of the front end frames. Well you can, but without learning CSS you really can’t accomplish any template you want on your web page. You’ll need CSS also basic stuff like putting a backdrop on a div name.

You must know CSS if you also plan to become a web developer. You need to know every factor that affects your website, including CSS, to satisfy your customer demands. I will list down a portion of the main aspects of learning CSS:

  • CSS Saves time
  • CSS can be preserved and revised much more quickly.
  • CSS is more consistent in style.
  • CSS ease to show various types to different viewers.
  • CSS has a greater accessibility.

Conclusion

And after reviewing all of the above uses of CSS, it can be concluded that CSS can be very useful when performing inter phase web application representation and styling across various domains. Thus, on the basis of project needs, company criteria, the CSS may be applied in order to achieve the desired target.

So that’s it for this blog see you on my next blog which will be based on the other fundamental languages of a web application: JavaScript