HOW TO MAKE YOUR FIRST SIMPLE WEBSITE USING CSS & HTML FOR BEGINEERS.

Published in

DSC RNGPIT

6 min readMay 24, 2020

You can make your website using any web technologies like html, PHP, JavaScript, xml, CSS, etc. for that first you should know something about the web technology.

1. WHAT IS WEB TECHNOLOGY?

Web technology is a name for technology primarily for the world wide web(WWW). However this tend to focus more towards technology that includes in the creation, maintenance and development of web-based applications.

From a developers point of view, these are things like languages, data storage mechanisms and service that allow us to create platforms and applications for the web.

You can find web frameworks for Java, Python and a few other languages so that developers can use it for backend. These are known as server-side technologies.

On the other side, you have client-side web technologies, which include things like HTML, CSS, JavaScript.

However, web technology is not limited to the developers. Web browsers, for example, are in the category of web technology as it is technology that allows a user to access the web.

2. NOW KNOW ABOUT ONE OF THE TECHNOLOGY: HTML(HYPER TEXT MARKUP LANGUAGE).

BASICS:-

HTML stands for Hyper Text Markup Language.
We can create a static website by HTML only.

Technically, HTML is a Markup language rather than a programming language.

Let’s see what is meant by Hypertext Markup Language, and Web page.

· Hyper Text: Hyper Text simply means “Text within Text.” A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage.

· Markup language: Markup language makes text more interactive and dynamic.

· Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. You can reach to it by entering the URL in search bar.

Now note that HTML document is made of many HTML tags and each HTML tags contains different content. Listed are some basic tags that are used while using html.

· <!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.

· <html> :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>.

· <head>: It should be the first element inside the <html> element, which contains the title of webpage.

· <title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately.

· <body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.

· <h1> : Text between <h1> tag describes the first level heading of the webpage.

· <p> : Text between <p> tag describes the paragraph of the webpage.

It is platform-independent because it can be displayed on any platform like Windows, Linux, etc. It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML.

The basic example of html.

It will look like this in the browser.

3. AFTER MAKING YOUR WEBSITE NOW IT’S TIME TO MAKE IT ATTRACTIVE USING CSS.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

What does CSS do?

You can add new looks to your old HTML documents.
You can completely change the look of your website with only a few changes in CSS code.

Why to use CSS?

These are the three major benefits of CSS:

1) Save your time and reduce the length and repetitions in code

Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process. CSS was created to solve this problem.

2) It has more features or attributes than html

CSS provides more detailed attributes than plain HTML to define the look and feel of the website.

CSS Syntax:

A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:

color: yellow;
font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value “yellow” is assigned to color property.

CSS can be of three types:

1) Internal: An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

2) External: An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file. To use an external style sheet, add a link to it in the <head> section of the HTML page.

3) Inline: An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.

The basic example of CSS.

It will give this output.

4. AFTER THAT PROVIDE LINKING OF WEBPAGES USING HTML LINKS:

Now, after creating two or more pages it is necessary to give them linking in between and you are able to move from one webpage to the another using hyperlinks. Basically, hyperlink is the link that joins two webpages with each other. Link can be anything either text or image.

Hyperlinks can be given using <a> tag.

<a href=”link”> click here </a>

Example of hyperlink: