What is Internet
The Internet is a vast global network that connects millions of computers, people, and other devices from around the world. It allows us to access information from anywhere in the world, send messages instantly, and interact with each other online.
The internet is a global hub of computer networks — a network of connections wherein users at any workstation may, with authorization, receive data from every other system (and often interact with users working on other computers). Internet infrastructure comprises optical fiber data transmission cables or copper wires, as well as numerous additional networking infrastructures, such as local area networks (LAN), wide area networks (WAN), metropolitan area networks (MAN), etc. Sometimes wireless services such as 4G and 5G or WiFi necessitate similar physical cable installations for internet access.
.webp)
History of the Internet
The internet evolved from ARPANET in the 1960s, initially designed to connect government researchers and allow them to share information. TCP/IP, developed in the 1970s, provided the standard for how data could be shared between networks, effectively establishing the groundwork for the modern internet. The World Wide Web, introduced in 1991 by Tim Berners-Lee, made the internet accessible to the public through user-friendly protocols like HTML, HTTP, and URLs.
What is a Website
A website is a collection of related web pages accessible through the internet under a single domain name. It's like a digital book with multiple interconnected pages, offering information, services, or interactive features. Websites are accessed through web browsers and are hosted on web servers.
The Foundation of the Web
HTML and CSS are the two core technologies that power the World Wide Web. Together, they form the building blocks of every website you visit.
🔑 Key Concept: HTML provides the structure and content, while CSS controls the presentation and styling.
HTML
Hypertext Markup Language
It defines the structure and content of a web page, including text, images, links, and other elements. HTML uses a system of tags to format and structure the content, which browsers then interpret to display the web page
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements".
Css
Cascading Style Sheet
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility, since the content can be written without concern for its presentation; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting. Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternative formatting if the content is accessed on a mobile device.
HTML is Born
Tim Berners-Lee creates HTML as a means to share documents across the internet.
CSS is Introduced
CSS 1 is released, allowing for separation of content and presentation.
HTML5 & CSS3
Modern standards bring new elements, responsive design capabilities, and advanced styling options.
Modern Web Development
HTML5 and CSS3 continue to evolve with new features and capabilities.
How They Work Together
HTML Example
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="page-header">
<h1 id="main-title">Welcome to My Site</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<main>
<p>This is the main content area.</p>
</main>
</body>
</html>
CSS Example
/* Global Styles */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
color: #333;
}
/* Header Styles */
.page-header {
background-color: #4a6fa5;
color: white;
padding: 2rem;
text-align: center;
}
#main-title {
margin: 0;
font-size: 2.5rem;
}
/* Navigation Styles */
nav {
background-color: #263b5e;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
Learning Path
HTML Proficiency Levels
Beginner
Intermediate
Advanced
Expert
CSS Proficiency Levels
Beginner
Intermediate
Advanced
Expert
HTML: The Structure of the Web
HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the meaning and structure of web content.
🔑 Key Concept: HTML uses elements to define the structure of a page. Elements are represented by tags, which are enclosed in angle brackets < >.
HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>This is the header</header>
<main>Main content</main>
<footer>This is the footer</footer>
</body>
</html>
Essential HTML Elements
Text Elements
| Element | Description | Example |
|---|---|---|
| <h1> to <h6> | Headings (h1 is most important, h6 is least) | Heading 1 |
| <p> | Paragraph | This is a paragraph. |
| <strong> | Strong importance (usually bold) | Important text |
| <em> | Emphasized text (usually italic) | Emphasized text |
| <span> | Inline container for text | Text with blue span |
Lists
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3