WEB TECHNOLOGY
1.Introduction
2. Web basics
3. Server-side programming
4. Client-side scripting
5. Web applications
6. Web 2.0
7. Information representation and sharing – XML
8. Web services
9. The Semantic Web
PREV NEXT

HTML (Hypertext Markup Language):

 

HTML is a markup language used for creating the structure and content of web pages. It provides a set of predefined tags or elements that define the various components of a web page. HTML allows you to specify headings, paragraphs, links, images, tables, forms, and more.

 

HTML documents consist of a hierarchical structure of nested elements. Each element is represented by tags, which are enclosed within angle brackets (< and >). Tags can have attributes that provide additional information about the element.

 

For example, here's a simple HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a paragraph of text.</p>
  <img src="image.jpg" alt="An image">
  <a href="https://example.com">Visit Example.com</a>
</body>
</html>

In this example, we have the <html> element as the root element, which contains the <head> and <body> elements. The <head> element provides meta-information about the document, such as the page title, while the <body> element holds the visible content.

 

HTML has evolved over time with new versions, with HTML5 being the latest major revision. HTML5 introduced many new features, including semantic elements (e.g., <header>, <nav>, <section>) that provide clearer structure and meaning to web pages, multimedia support, canvas for 2D graphics, and improved form handling.

 

XHTML (Extensible Hypertext Markup Language):

 

XHTML is a stricter and more well-formed version of HTML. It follows the syntax and rules of XML (eXtensible Markup Language). XHTML documents are written using XML syntax, which requires elements to be properly nested and closed with appropriate end tags.

 

XHTML was introduced to promote the use of stricter coding practices and adherence to XML standards. It aimed to address some of the inconsistencies and ambiguities in HTML. XHTML documents must conform to specific rules, such as using lowercase tag names, closing all tags, and quoting attribute values.

 

Here's an example of an XHTML document:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a paragraph of text.</p>
  <img src="image.jpg" alt="An image" />
  <a href="https://example.com">Visit Example.com</a>
</body>
</html>

In this example, you can see that all tags are closed, and the attribute values are enclosed in quotes. The document also includes a Document Type Definition (DTD) declaration, which specifies the rules and structure for the document.

 

XHTML was an important transition towards the more modular and standardized approach of HTML5.

 

CSS (Cascading Style Sheets):

 

CSS is a style sheet language used to describe the presentation and layout of HTML (or XHTML) documents. It separates the content of a web page from its visual representation, allowing developers to control the design aspects.

 

With CSS, you can define styles for HTML elements, such as setting colors, fonts, margins, padding, positioning, and more. CSS works by selecting elements using selectors and applying rules to modify their appearance.

 

Here's an example of CSS code:

 

h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: gray;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: green;
}

In this example, we define styles for <h1>, <p>, and <a> elements. We set the color, font size, line height, and text-decoration properties to modify their visual representation.

 

CSS can be applied to HTML documents in three ways:

 

  • Inline Styles: Styles can be directly added to individual HTML elements using the style attribute. For example:

 

<h1 style="color: blue; font-size: 24px;">Hello</h1>

 

Internal Stylesheets: Styles can be placed within the <style> tags in the <head> section of an HTML document. For example:


 

<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>

External Stylesheets: CSS styles can be stored in separate external .css files and linked to HTML documents using the <link> element. For example:


 

<head>
  <link rel="stylesheet" href="styles.css">
</head>

 

Using CSS, developers can achieve consistent styling across multiple web pages and easily update the design by modifying the stylesheets.

 

CSS3, the latest version of CSS, introduced many advanced features like animations, transitions, gradients, flexible box layout (flexbox), grid layout, and more, providing even more powerful styling capabilities.

 

By combining HTML/XHTML for content structure and CSS for presentation and layout, developers can create visually appealing and well-structured web pages.

 

PREV NEXT