If you are living in the modern day computer world, your second best friend is probably - let me guess - Google, right? Just kidding! But I am sure you have an online presence of some kind - a social media account, a personal blog or maybe even a business!We spend hours online - reading blogs, watching videos, scrolling through Pinterest, you name it! Ever wondered what goes on behind the scenes of those websites you browse? Today’s post gives you a brief introduction on how these websites are created and how to make them look beautiful!Every website that you visit usually consists of multiple web pages. Every web page is made up of three layers - Content Layer, Presentation Layer and Behavior Layer - that work together to create a specific user experience. HTML handles the content layer of the web page, CSS provides for the presentation layer and the behavior layer is handled by Javascript!
Even if you do not build websites, knowing the basics of HTML and CSS is an incredibly useful skill to have in today’s internet world. So if you are intimidated by the technical jargon, code etc., don’t worry. We will dig into the fundamentals of HTML and CSS and understand how they work together. We will also build our own web page! Excited? Let’s go!
HTML stands for HyperText Markup Language. Just as we, humans, use languages to communicate with each other, HTML is a language of the internet! Web browsers like Google Chrome read and interpret HTML to render the information you request for on the web.HTML is essentially the building block of every website. It defines the structure of every web page and its content.
While getting started with HTML, it’s important to understand a few common terms associated with the language:
Elements: These are designators that define the order and structure of the content within a web page. <span> , <p> , <div>, <h1>, <title> etc. are all examples of basic HTML elements. Each HTML element is enclosed within a start and end tag as shown below.
Element: <div> … </div>
Tags: The use of angle brackets around an HTML element creates what’s called an HTML tag. HTML tags most often occur in pairs of start and end tags.A start tag indicates the beginning of an HTML element and looks like this:
Start Tag: <span>
An end tag indicates the end of an HTML element and consists of a forward slash as shown below:
End Tag: </span>
Attributes: We use attributes to provide additional information about an HTML element. Some common attributes include id, class, src and href. Attributes are defined within the start tag of an element after its name. Each attribute is defined by a name and a value. For example, the element below includes a href attribute as shown below:
<a href=“http://www.google.com”> Google Search Engine </a>
CSS stands for Cascading Style Sheets. CSS defines the visual style and appearance of the web pages. So if you see italicized text or a background image on a web page, it is CSS that is doing the trick!
Common CSS terms: Here are some of the common CSS terms that are useful to know: a {color: #484848; font-size: 14px; font-weight: 300px;}
Selectors: A selector designates the exact HTML elements to target for styling. Selector generally targets all HTML elements of one type directly or a specific instance of an element, identified by an attribute such as id or class. The styles to be applied to the targeted element are enclosed within curly brackets following the selectors. For example, the selector in the above code is targeting all the elements.
Properties: A property determines the styles that will be applied to an HTML element. There are several properties that are available for use. Some of the common properties are font, background-color, size and color. In the example above, we are using the color, font-size and font-weight properties to style the element.
Values: Each property has a value associated with it. The value defines the behavior of the property. For example, the value 14px defines the behavior of the font-size property.
Even though very often HTML & CSS are used together in the same context, they are far from being the same. While HTML defines the structure of the web page, CSS defines the style and appearance.To make this easier to understand, let’s compare a website to a house. HTML is like the bricks that make up the house while CSS is the paint and decor that makes the house presentable and beautiful.A webpage can exist without CSS, but never without HTML.
Now on to the exciting part, let’s build our own web page. It is a super simple and fun activity!You will need:A Text Editor to write the code for your web page. Some of my favorite code editors are Sublime Text, Notepad++ , Brackets. A Web Browser to view your web page. Anything from Google Chrome to internet explorer will do.
3 - steps to creating your own web page:
Step 1: Create a folder in your documents and name it, I am going with MyWebPage1.0 for mine.
Step 2: Create a text file inside the folder and paste the following HTML code in it. Name it as Webpage.html and save as an HTML file type.
Step 3: Next, create another text file inside the folder and paste the following CSS code in it. Name it as style.css and save it as a CSS file type.That’s it, now double click on your HTML file to run it on your web browser. Here’s a screenshot of the webpage you can expect to see on your browser.
There you go, you’ve created your first web page! Feel free to play around by changing the HTML and CSS code to alter your web page. The best way to learn HTML and CSS is to really just experiment and have fun exploring the various possibilities that they offer.
.png)