In this lesson, we will learn about working of web pages, with a focus on following key points,
- What are the technologies used in the creation of web pages?
- How to build and style websites using HTML and CSS.
While studying, working, or even doing daily tasks, we use the internet every day and browse through various web pages. But did you ever think about how these web pages are made? Or how to build one of your own? In this lesson, we will learn about the two popular programming languages behind every web page, HTML and CSS, and how we can use these languages to create our web pages.
Working of Web Pages
All web pages are HTML documents. To improve the style, appearance, and interactivity of a website, external files such as style sheets (CSS files) and scripts (JavaScript files) are linked with the original HTML document. These files can also be embedded within the HTML document (which we will discuss in upcoming sections!).
What are HTML and CSS?
We've mentioned that HTML and CSS are core components behind web pages. But what are they, and what corresponding functions do they have behind the scenes?
HTML, is short for HyperText Markup Language. It is the standard language for creating web pages. It consists of various elements which define the content and provide a proper structure to the various objects of the page. Headings, paragraphs, navigation bars, etc. are all different elements implemented in HTML.
CSS, or Cascading Style Sheets, are responsible for styling the appearance of the HTML elements on the web page. CSS defines different rules to define how HTML elements appear on the page. Fonts, colors, alignment, and placement of elements on the web page are all defined using CSS.
Basics of HTML
As mentioned earlier, HTML consists of various elements that define the structure and content of the page. Each of these elements has a specific purpose. For example, all the content of the web page must be enclosed within the <body> element. All element content is also enclosed within tags, which are angle brackets <> surrounding the element name.
Tags and Attributes
Tags mostly occur in pairs, with an opening and a closing tag. Opening tag consists of the element name enclosed in angle brackets and indicates the beginning of the element. For example, <p>, for paragraph element. Closing tag consists of the element name and a forward slash enclosed in angle brackets. For example, </p>, which closes the paragraph element.
Attributes are properties of HTML elements that provide additional information. They are defined after the element name in the opening tag. The attribute name is followed by an equals sign, to which the attribute value is assigned in quotation marks. For example, the id attribute allows assigning a unique identifier to an HTML element as follows.
Setting up an HTML Web page
Now let's start setting up a basic web page. We initialize the HTML document using some specific tags, which consist of <!DOCTYPE html>, <html>, <head> and <body>.
1<!DOCTYPE html>
2<html>
3<head>
4<title> My First Webpage </title>
5</head>
6<body>
7<h1> Hello World! </h1>
8</body>
9</html>This creates a document like this.
Let's analyze the purpose of each of these elements.
<!DOCTYPE html>element: This element defines the document type declaration, and informs the browser about which language we are using to create the website. Since we're using HTML,htmlis specified. Without this specification, the browser will not be able to display the web page.<html>element: This element defines the entire HTML document, and encloses all other elements.<head>element: This element defines the metadata about the document. For example, links to style sheets, scripts, or the title of the page (the<title>element as you can see in the above example too) are all defined within this element.<body>element: All the visible content of the webpage is displayed within this element. Various other elements such as paragraphs, headings, etc are defined within this element.
Try this exercise. Click the correct answer from the options.
The correct sequence of HTML tags for starting a web page is
Click the option that best answers the question.
- head, title, html, body
- html, head, title, body
- html, body, title, head
- head, html, title, body
Basics of CSS
Web pages would be extremely boring if they only had black and white text as we created above. In most web pages that you've seen, there are colors, images, and several other interactive elements that make it look appealing. CSS helps us achieve this purpose.
Since we've understood how a basic webpage can be created, let's see how it can be styled. Style sheets are created and linked with the HTML document using the <link> tag within the head element.
1<!DOCTYPE html>
2<html>
3<head>
4<title> My First Webpage </title>
5<link rel="stylesheet" href="style.css">
6</head>
7<body>
8<h1> Hello World! </h1>
9</body>
10</html>Style sheets can also be defined within the HTML document using the <style> tag within the head element. However, the recommended approach is to use external style sheets.
CSS Rules
CSS styles can be applied to elements in an HTML document. More specifically, it defines the rules that need to be applied to an element or group of elements in HTML.
In CSS, rules begin with a selector. The selector is the HTML element that we want to style. This is followed by curly braces, inside which is the declaration. The declaration specifies the properties that need to be styled along with a corresponding value. The property must be followed by a colon and the declaration by a semi-colon.
Note that if we specify the selector as an HTML element, then all the HTML elements in the document will be styled in the same way. This saves a lot of time as we do not have to style elements individually!
Build your intuition. Is this statement true or false?
HTML document has "elements" which are styled using "rules".
Press true if you believe the statement is correct, or false otherwise.
Adding CSS to an HTML Web page
Let's work through an example of adding a style sheet to a basic HTML document. Consider a simple HTML document below,
1<!DOCTYPE html>
2<html>
3<head>
4 <title> My First Webpage </title>
5 <link rel="stylesheet" href="style.css">
6</head>
7<body>
8 <h1> Hello World! </h1>
9 <p> This is my first webpage. </p>
10</body>
11</html>Let's start by changing the color of the h1 heading in style.css.
1h1{
2 color: blue;
3}
Now let's specify a change in multiple properties of the paragraph element. CSS allows us to specify multiple properties within a single rule, so we can change the background color and font size of a paragraph element as,
1p{
2 background-color: gray;
3 font-size: 25px;
4}
We can see that now our simple webpage looks a little more colorful than before.
Common CSS Properties
CSS provides an abundant amount of styling properties to work with. Some common CSS properties are discussed in the table below.
| CSS Property | Value | Usage |
|---|---|---|
font-style | normal / italic/ oblique | Allows for styling the font |
font-weight | normal / bold | Adds weight to the font |
font-size | n px | Specify an integer value of n to adjust font size |
background-color | Color name or Hex code of color | Adds color to the background of element. |
padding | n px | Creates a space around the HTML element. |
Summary
This lesson only lists down the basics of HTML and CSS and does not go into depth about many other HTML tags and CSS properties. There are other options available for content creation and styling in both HTML and CSS. Try searching and experimenting with other common HTML elements and CSS properties to create beautiful websites!
One Pager Cheat Sheet
- We will discover how to create websites using the
programming languages, HTML and CSS, and learn about the technologies behind today's web pages. - The
HTMLdocument islinkedto external style sheet (CSS) and script (JavaScript) files to enhance the style, appearance, and interactivity of a web page. - HTML
elementsand their appearance on web pages is managed byHyperText Markup Language(HTML) andCascading Style Sheets(CSS). HTML consists of variouselementsenclosed withintagsand sometimes further defined byattributesto provide additional information.- The basic HTML document is created using the
<!DOCTYPE html>,<html>,<head>and<body>tags which define the document type, enclose all elements, set the metadata and display the visible content respectively. - Boldly structuring webpages with
Headings,Paragraphs,Hyperlinks, andImagestags, HTML allows us to display content in a meaningful way. - The correct sequence of HTML tags to start a web page is
<html>,<head>,<title>, and<body>. - CSS helps us to add color and life to a basic webpage by creating style sheets and applying
rulesto HTML elements to control their styling. - CSS is used to change the appearance of HTML elements by defining
selectorsanddeclarationswithinrules. - By adding a
CSS stylesheetto an HTML document,multple propertiesof different elements can be easily changed to modify the appearance of the webpage. - CSS allows for the styling of font (e.g. font-style, font-weight and font-size), background color and padding of HTML elements, such as through specifying
font-style,font-weight,font-size,background-colorandpaddingwith values inpx. - This lesson introduces the basics of HTML and CSS, but there are many other
HTML tagsandCSS propertiesavailable that can be experimented with to create beautiful websites!
