Basic Web Principles - HTML And CSS Explained

According to widely agreed tale, getting started
in tech has always been difficult, on my path I had the same experience. I was practically confused finding what to learn, starting out with courses I didn't understand its prerequisites and jostling from one online learning platform to the other.

In all, it felt like I was wasting my time until I spoke with a couple of friends and a mentor on adplist.com who told me that everything in programming revolves round the web and if I want to start off, I should start from the web.

Starting from the web apparently means learning HTML, CSS and Javascript which are the web development fundamentals. In this article, I'll explain the basic web principle, niching down HTML and CSS and how they make the web work.

Here’s a list of what we’ll cover in this article:

• The Web

• HTML

• CSS

The Web

For a basic understanding of web, it is a subset of the internet.

World Wide Web, is a portion of the Internet that consists of pages that can be accessed by a Web browser. In other words, the web is a collection of files and codes that are stored in a server that is divided into two; (web browser client and web server) and are connected to the internet.

Internet

This is a network of computers that communicate with each other to send and receive data (information), and each computer is identified by a unique number called the IP address.

IP Address

An IP address is a lengthy string of numbers linked to every device connected to a network that uses the Internet as the medium for communication.

To access a web on the internet, it loads through a browser which is known as the web client. For instance, someone sends you a link and when you click the link, your browser (web client) send a message to the website (web server) asking for the content of the link and the website's server receives the message and shows the link contents.

The client-side and server-side are referred to as the “front end” and the “back end", respectively. This whole process has to be constructed as lines of codes and that's where HTML, CSS and the whole web development process comes in.

What is HTML?

HTML stands for Hypertext Markup Language.
It was founded in 1989 and it's the first building block of a web page, core of every web page and starting point for anyone learning how to create content for the web.

How HTML works

Rather than using a programming language to perform functions, it uses a Markup language which uses tags end elements to create primary content of a web page. The browser then reads to understand the contents and purpose it serves in a webpage.

HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>

To define a page, each and every HTML 5 document uses a different set of component and element.

While an HTML 5 document is made up of various elements, the following components are always present on every page:

A declaration statement at the top stating that the document is an HTML 5 document
Header
Body

The <!DOCTYPE> tag in HTML is used to specify the version of HTML that a document is utilizing. This is also described as document type declaration(DTD).
Note that unlike other HTML tag, the <!DOCTYPE> tag does not have an end tag.

<html> tag is the second tag in an HTML document, all other tags are written in it and it closes as </html> By using the opening <html> tag, the browser is informed that the page will be formatted in HTML.

The <head> tag which has its closing written as </head> expressly contain details about the body, the page's title, the labels, etc. of a web page. Only specific markup elements like meta, link, script, etc. are permitted in the HTML 5 head title.

The <body> is used to specify the primary content that will be shown on a website. Such content include: text, images, videos, links, etc.

What is CSS?

CSS stands for Cascading Style Sheet.
CSS is a stylesheet language created in late 1990s to make beautiful web designs. Adding CSS to a web page will make the web pages appear aestetically pleasing.

How CSS works

Like humans, we were created with skeleton which serves as a framework for the body, then we're covered with the skin which gives beauty and makes human beautiful

The same thing with CSS, it works as the skin that covers HTML, it is used to create background colors, layout, styling, padding and every other designs that makes a webpage smart and beautiful.

Presentation and ease of use are a couple of the main things that CSS has bought to web design by translating the way content looks on a webpage and what else goes on it to complement that content.

CSS Syntax
A selector, property, and its value are the components of a CSS Syntax. The HTML element where CSS style is applied is indicated by the selector. Semicolons are used to separate each CSS property.

selector { Property: value; }

The HTML element you want to style is indicated by the selector.
One or more declarations are contained in the declaration block and are separated by semicolons.
A comma separates the name of the CSS property from its value in each declaration.

Types of CSS

- Internal CSS

<!DOCTYPE html>
<html>
<head>

<style>
body {background-color: aliceblue;}
p    {color:yellow;}
</style>

</head>
<body>
<p>This is paragraph is set at yellow color.</p>
</body>

</html>

Internal or embedded CSS works by adding CSS codes into <style> tag in the <head>section of an HTML document.
A single page can be effectively styled with this CSS style but takes time to use this style for several pages because CSS rules must be added to each page of the website.

- External CSS

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

This type of CSS works by adding an external .css folder that contains the whole stylesheet into the <head> tag in an HTML document.

A large website can be styled more effectively using this CSS type. An entire website can be changed at once by making changes to the .css file.

- Inline CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <p style="color:yellow; font-size:40px;">Yellow</p>
  </body>
</html>

Typically, inline CSS is only used to style one type of HTML element, by adding the CSS style attribute to each HTML element.

Conclusion

The first step to understanding web programming and web development is learning and understanding HTML and CSS and the most common and extensive use of learning HTML and CSS is to code for the web. Even if programming has applications in a wide range of fields, from cybersecurity to design employment, webpages are still built using HTML and CSS, with HTML serving as the structure and CSS serving as the finishing touches.

Understanding and utilizing the alternatives provided by these two programming languages will not only put you in a strong position to build your own websites, but it will also open up numerous doors and opportunities for learning additional programming languages.

In subsequent articles I shall be dissecting structures of each language and continue to open up our minds to web development.

Thank you for reading and see you soon!