Introduction to HTML & CSS

  • Special languages are used to create websites. CSS and HTML are the two fundamental languages that are applied to the creation of web pages.
  • The structure of a web page is developed using HTML.
  • CSS is applied in the styling and designing of the web page.
  • It is time we learn the fundamental tags and properties of HTML.

What is HTML?

  • HTML is a short form of Hypertext Markup Language.
  • It is applied in the creation of web pages on the basis of tags.

All the HTML pages begin with the fundamental structure:

  • <html> - The main tag
  • <head> - Contains information about the web page.
  • <title> - It shows the title of the webpage on the web browser.
  • <body> - It contains all the content of webpages.

Head and Title Tag

The <head> section contains such information as the page title.

Example:

<title>My Web Page </title>

The title is shown on the tab of the browser window.

Body Tag and Its Attributes

The visible contents of the webpage are in the body tag.

It can also be customised in terms of appearance:

  • background – Set background
  • bgcolor – Set background colour
  • text – Sets text colour
  • link - Sets the colour of links
  • alink - Sets colour of active link
  • vlink – Sets colour of visited link

These features modify the appearance of the webpage.

Font Tag and Its Attributes

Text style is changed with the help of the tag font.

Attributes include:

  • colour – Changes text colour
  • size – Changes text size
  • face – Changes font style

Example:

<font color=”yellow” size=”3” facial=”arial”>Hello Students </font>

Center Tag

The centre tag is applied to place the text or content at the centre of the page.

Example:
<center> My Welcome to My Website </center>

BR Tag

This tag is used to shift to the next line.
It creates a line break.

HR Tag and Its Attributes

The horizontal line is drawn with the help of the <hr>tag .To draw a horizontal line, the tag is used:

Attributes include:

  • size – Thickness of the line
  • width - Length of the line
  • align - Alignment (right, centre, left)
  • noshade - Removes shading
  • colour - Changes line colour

Example:

<hr size="3" width="50%" color="red">

What is CSS?

  • While the structure is created by using the code, it is with the help of CSS that the page looks attractive.
  • CSS is an abbreviation for Cascading Style Sheets.

CSS controls:

  • Colours
  • Fonts
  • Text size
  • Background
  • Layout
  • Spacing

If the skeleton is in the form of the language of interfaces, called the language of markup language (or a markup language) or the code of the structure of the document, the language of presentation (the language of the user interface) or CSS is responsible for the decoration of the document.

Uses of CSS

CSS is used to beautify an architecture created with HTML.

CSS is used to:

  • Make animations
  • Adjust UI
  • Control Responsiveness
  • Improve layout

CSS is used to make web pages attractive and organised.

 

QUIZ FOR HTML AND CSS

1. A student codes and constructs the minimal framework of a webpage, including tags such as <html>, <head> and <body> tags. Which language is being used?

A) CSS
B) HTML
C) JavaScript
D) Python

Answer: B) HTML

2. Clicking on a webpage, which HTML tag displays the text in the browser tab?

A) <body>
B) <title>
C) <font>
D) <center>

Answer: B) <title>

3. A student is expected to write the content that is supposed to be visible on the webpage, like text, images and links. Where is the HTML tag where this content should be put?

A) <head>
B) <title>
C) <body>
D) <html>

Answer: C) <body>

4. A student would desire to alter the colour, size and style of the text on a webpage using HTML. What tag allows these changes to be carried out?

A) <font>
B) <body>
C) <title>
D) <hr>

Answer: A) <font>

5. As a student prepares a webpage, he/she wishes to have a welcome message in the middle of the page. Which tag should be used?

A) <center>
B) <font>
C) <body>
D) <title>

Answer: A) <centre>

6. A programmer intends to relocate text to the next line and not begin a fresh paragraph. What is the HTML tag that accomplishes this?

A) <hr>
B) <br>
C) <font>
D) <center>

Answer: B) <br>

7. A webpage has a horizontal line that divides two parts, and the designer changes the thickness and colour. Which tag is used for this?

A) <hr>
B) <br>
C) <font>
D) <body>

Answer: A) <hr>

8. A student designs a webpage format by use of HTML but wishes to make it visually appealing with the use of colours, fonts and layout modifications. What technology is to be utilised?

A) CSS
B) Python
C) Networking
D) Database

Answer: A) CSS

9. What technology plays the biggest role in regulating how a webpage looks and appears?

A) HTML
B) CSS
C) Operating System
D) Compiler

Answer: B) CSS

10. To make a webpage more interactive, a web designer adds animations, modulates the layout and controls spacing. What technology can be used to achieve these improvements?

A) HTML
B) CSS
C) Networking
D) Cloud Computing

Answer: B) CSS