Course Content

Other Courses

Tribhuvan university > CSIT - 2074 Syllabus > Web Technology > Old Questions > Model Question

Web Technology - Old Questions

Syllabus Notes Old Questions Unit Wise Questions Question Bank

1. Explain the structure of HTML file with example. How is HTML different from CSS? Explain three different ways for inserting CSS code into an HTML file.

10 marks | Asked in Model Question

HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages. It describes the structure of a Web page.

Structure of HTML document

Every HTML document consists of four basic structure elements: html, head, title, and body. Each of these is explored in detail below:

1. Html Element

  • Start tag: <html> - First tag in the document which declares you are writing an HTML element.
  • End tag: </html> - Last tag in the document.

2. Head Element

  • Start tag: <head> - Second tag, follows the <html> tag, and starts the head section, which describes the document.
  • End tag: </head> - Fifth tag, follows the </title> tag and closes the head section.

3. Title Element

  • Start tag: <title> - Third tag, follows the <head> tag, and contains the title you want for the document. This information will be displayed in the title bar at the top of the browser window.
  • End tag: </title> - Fourth tag, immediately follows, without any spaces, the title you want for the document and precedes the </head> tag.

4. Body Element

  • Start tag: <body> - Sixth tag, follows the </head> tag to denote starting the content of the document.
  • End tag: </body> - Next to last tag in the document, follows the end of the document content and precedes the </html> tag. 

E.g. 

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

</head>

<body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

</body>

</html>

Difference Between HTML and CSS

1. HTML is the basic markup language which describes the content and structure of the web pages. On the other hand, CSS is the extension to the HTML which modifies the design and display of the web pages.

2. HTML file can contain CSS code while CSS stylesheets can never contain HTML code in it.

3. HTML comprises of tags surrounding content. Whereas CSS comprised of selectors succeeded by a declaration block. 

Ways for inserting CSS code into an HTML file

1. Inline CSS

  • 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 following example sets the text color of the <h1> element to blue:
    <h1 style="color:blue;">A Blue Heading</h1>

2. Internal CSS
  • 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.
E.g.
<!DOCTYPE html>
<html>
<head>
<style>
    body{background-color: powderblue;}
    h1{color: blue;}
    p{color: red;}
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

3. External CSS
  • An external style sheet is used to define the style for many HTML pages.
  • To use an external style sheet, add a link to it in the <head> section of each HTML page.
E.g.
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

//style.css
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}