Introduction to web technology Section 1

(Section 2 Section 3 Section 4 Section 5  Section 6)

Unit 1

Introduction: Introduction to web technology – HTML – types of HTML tags basic Structure of HTML – Web design principles – HTML attributes – styles – Hypertext - Formatting text – Forms & formulating instructions & formulation elements – Commenting code – Back grounds – Images- Hyperlinks – Lists Tables – Frames.

Unit 1

Introduction to web technology

Web technology encompasses the tools, protocols, and languages that enable the creation, delivery, and interaction with content over the internet. It's the foundation upon which websites, web applications, and online services are built, allowing users to access and share information, communicate, and conduct various activities online. 

World Wide Web (WWW):

The system of interconnected hypertext documents accessed via the internet. 

Web Browser:

Software applications like Chrome, Firefox, or Safari that render web pages and allow users to interact with them. 

Web Server:

A computer that stores and delivers web pages and other resources to users' browsers. 

Web Pages:

Documents formatted using HTML (HyperText Markup Language) that display content, including text, images, and multimedia. 

Web Development:

The process of creating and maintaining websites and web applications, involving both frontend (user interface) and backend (server-side) development. 

Key Technologies:

HTML (HyperText Markup Language): The foundation of web pages, defining the structure and content. 

CSS (Cascading Style Sheets): Used to style the appearance of web pages, controlling colors, fonts, layout, and more. 

Java Script: A scripting language that adds interactivity and dynamic behavior to web pages. 

Protocols (e.g., HTTP, TCP/IP): Rules that govern how data is transmitted and exchanged over the internet. 

Web APIs: Interfaces that allow different software systems to communicate and exchange data. 

Databases: Systems used to store and manage the data that powers web applications. 

Frontend vs. Backend:

Frontend Development:

Focuses on the user interface, the part of the website or application that users directly interact with.

Backend Development:

Deals with the server-side logic, database management, and other behind-the-scenes operations. 

In essence, web technology is the comprehensive framework that enables the internet as we know it, from the simple display of information to the complex interactions of online applications. 

HTML

What is HTML?

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link

HTML is generally not case-sensitive 

Who invented html?

Sir Timothy John Berners-Lee (born 8 June 1955), also known as TimBL, is an English computer scientist best known as the inventor of the World Wide Web, HTML, the URL system, and HTTP. 

HTML, or HyperText Markup Language, was invented by Tim Berners-Lee. 

He developed HTML in the early 1990s (1989)

The first version of HTML, publicly introduced in 1991, laid the foundation for web development by allowing users to format text and create hypertext links, enabling navigation between documents. 

Who invented xhtml language?

XHTML (eXtensible HyperText Markup Language) was developed by the World Wide Web Consortium (W3C). 

It was released in 2000 and was designed as a stricter, XML-based version of HTML, aiming to bring the rigorous syntax rules of XML into web development for improved consistency, compatibility, and data handling.

Who invented html5 language?

HTML5 was first released in a public-facing form on 22 January 2008, with a major update and "W3C Recommendation" status in October 2014. Its goals were to

Types of HTML tags

HTML tags can be broadly categorized based on their function and behavior:

There are generally two types of tags in HTML 

Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.

Empty Tags: These tags are self-closing and do not require a closing tag.”

Empty tags in HTML, also known as "void elements" or "self-closing tags," are HTML elements that do not require a closing tag because they do not contain any content or other nested elements. They are used to insert or define specific elements within the document structure. 

HTML documents are structured using various tags that define the content and its presentation.

HTML tags are categorized based on their function and the type of content they represent. 

Examples of Paired HTML Tags:

Paragraphs: <p>This is a paragraph.</p>

Headings: <h1>This is a heading.</h1>

Bold Text: <b>This text is bold.</b>

Italic Text: <i>This text is italic.</i>

Divisions: <div>This is a content division.</div>

HTML Document Structure: <html>...</html>, <head>...</head>, <body>...</body>

Common examples of empty tags in HTML:

<br> (Line Break): Inserts a single line break.

<img> (Image): Embeds an image into the document, using attributes like src for the image source and alt for alternative text.

<input> (Input Field): Creates an input control for web forms, with various types like text, password, checkbox, etc.

<link> (External Resource Link): Links the current document to an external resource, most commonly used to link CSS stylesheets.

<meta> (Metadata): Provides metadata about the HTML document, such as character set, viewport settings, or keywords for search engines.

<hr> (Horizontal Rule): Creates a thematic break or a horizontal line to separate content.

<embed> (External Content): Inserts external applications or interactive content.

<source> (Media Source): Specifies multiple media resources for <audio> and `

Here are some of the main types of HTML tags:

Structural Tags: 

These tags define the overall structure of an HTML document.

<!DOCTYPE html>: Declares the document type and version of HTML.

<html>: The root element of an HTML page.

<head>: Contains meta-information about the HTML document (e.g., title, links to stylesheets).

<title>: Specifies the title of the HTML page, displayed in the browser tab.

<body>: Contains all the visible content of the HTML document.

Heading Tags: 

Used to define headings and subheadings within the content.

<h1> to <h6>: Define headings of different levels, with <h1> being the largest and <h6> the smallest.

Paragraph and Text Formatting Tags: 

Used for structuring and styling text.

<p>: Defines a paragraph.

<b> / <strong>: Makes text bold, with <strong> indicating stronger importance.

<i> / <em>: Makes text italic, with <em> indicating emphasis.

<br>: Inserts a line break.

<hr>: Inserts a horizontal rule (thematic break).

<mark>: Highlights text.

<sub> / <sup>: Subscript and Superscript text.

List Tags: 

Used for creating ordered, unordered, and description lists.

<ul>: Defines an unordered list.

<ol>: Defines an ordered list.

<li>: Defines a list item within <ul> or <ol>.

<dl>: Defines a description list.

<dt>: Defines a term in a description list.

<dd>: Describes the term in a description list.

Link and Image Tags: 

Used for linking to other pages and embedding images.

<a>: Defines a hyperlink. The href attribute specifies the destination URL.

<img>: Embeds an image. The src attribute specifies the image source.

Form Tags: 

Used for creating interactive forms to collect user input.

<form>: Defines an HTML form.

<input>: Defines an input control (e.g., text field, checkbox, radio button).

<textarea>: Defines a multi-line text input control.

<button>: Defines a clickable button.

<select>: Defines a drop-down list.

<option>: Defines an option in a drop-down list.

<label>: Defines a label for an input element.

Table Tags: 

Used for creating tabular data.

<table>: Defines an HTML table.

<thead>: Defines the table header.

<tbody>: Defines the table body.

<tfoot>: Defines the table footer.

<tr>: Defines a table row.

<th>: Defines a header cell in a table.

<td>: Defines a standard data cell in a table.

Semantic and Layout Tags: 

Provide meaning to the content and help structure the page layout.

<div>: A generic container for flow content, often used for layout.

<span>: An inline container for phrasing content.

<header>: Represents introductory content or a set of navigational links.

<nav>: Represents a section of navigation links.

<main>: Represents the dominant content of the <body>.

<article>: Represents self-contained content.

<section>: Represents a standalone section of content.

<aside>: Represents content indirectly related to the main content (e.g., a sidebar).

<footer>: Represents the footer of a document or section.

Self-Closing/Empty Tags

These tags do not require a closing tag as they do not contain content.

<br> The <br> tag in HTML is a line break element used to create a line break within a block of text, effectively starting a new line without creating a new paragraph.

<img> The <img> tag in HTML is used to embed an image into a web page. It is an empty element, meaning it does not have a closing tag. src (source): This is a mandatory attribute that specifies the path to the image file. This path can be relative to the HTML document or an absolute URL to an image hosted online.

<meta> Meta tags in HTML provide metadata about an HTML document, which is data about the data. These tags are always placed within the <head> section of an HTML document and are not displayed directly on the webpage content.

<input> The <input> tag in HTML is a crucial element used within web forms to collect user input. It is a self-closing tag, meaning it does not require a separate closing tag.

<link> The HTML <link> tag defines the relationship between the current document and an external resource. It is an empty element, meaning it does not have a closing tag, and primarily relies on its attributes to function. 

Key attributes of the <link> tag:

href: Specifies the URL of the external resource.

rel: Defines the relationship between the current document and the linked document (e.g., "stylesheet", "icon", "preload").

type: Specifies the media type of the linked resource (e.g., "text/css", "image/x-icon").

as: Used with rel="preload" or rel="prefetch" to indicate the type of content being loaded (e.g., "script", "style", "image").

media: Specifies the media query for which the linked resource applies (e.g., "print", "screen and (max-width: 600px)").

The <link> tag is typically placed within the <head> section of an HTML document, as it does not directly display content but rather establishes connections to external resources that affect the page's appearance or functionality.

(Section 2 Section 3 Section 4 Section 5 Section 6 )