Network

local area network (LAN)

A local area network (LAN) consists of a series of computers linked together to

form a network in a circumscribed location.
wide-area network (WAN)

A wide-area network (WAN) is the technology that connects your offices, data
centres, cloud applications, and cloud storage together. It is called a wide-area
network because it spans beyond a single building or large campus to include
multiple locations spread across a specific geographic area or even the world.

Internet

The internet is a vast network of interconnected computer networks that

enables communication and information sharing between users all over the
world.
History of internet

The internet was developed in the late 1960s and early 1970s as a way for
military and academic researchers to communicate with each other. It has
since grown to become an essential part of modern life.
How it works

The internet works by connecting devices together through a network of routers,

servers, and cables. Information is transmitted in the form of packets of data that
are sent and received by devices on the network.

World Wide Web

The WWW is a part of the internet that allows users to access and share
information through web pages, which are written in HTML and accessed
using web browsers like Google Chrome or Mozilla Firefox.
Web servers and web clients

A web server is a computer program that serves web pages to users over the
internet. A web client is a computer program or application that requests and
displays web pages from web servers.
Newsgroups

Newsgroups are online discussion forums that allow users to post messages and
communicate with each other on a particular topic or subject.
Websites and web pages

A website is a collection of web pages that are linked together and accessed through a
common URL or web address. Web pages are individual pages within a website that
contain specific information.

Uniform Resource Locator (URL)

A URL is a unique address that identifies a particular web page on the internet. It
consists of the protocol (http:// or https://), the domain name, and the path to the
web page.
Blog

A blog is a type of website that contains regularly updated content, often written in a
personal or informal style. Blogs can be used for personal or professional purposes
and can cover a wide range of topics.

Internet service

Internet service refers to the various types of Internet connectivity and related
services that are provided by Internet service providers (ISPs) to users. Here are
some of the common types of Internet services:

Dial-up

Dial-up internet service uses a telephone line to connect a computer to the

internet. It is a slow and outdated technology that is rarely used today.

Broadband

Broadband internet service uses a high-speed connection to provide faster and

more reliable internet access. Types of broadband internet include cable, DSL,
fibre-optic, and satellite.

Mobile broadband

Mobile broadband provides internet access through cellular networks. It is

commonly used on smartphones and tablets, but can also be used on laptops
and other devices with a cellular data connection.

Wi-Fi
 Wi-Fi is a wireless networking technology that allows devices to connect to the
internet without using cables or wires. It is commonly used in homes, offices, and
public places like cafes and airports.

Web hosting

Web hosting is a service that allows individuals and businesses to store their
website files on a server that is connected to the internet. Web hosting providers
offer a range of services, including website creation tools, email hosting, and
website maintenance and support.

Domain Registration

Domain registration is the process of reserving a unique web address, or domain

name, for a website. Domain registration services allow users to choose and
register a domain name for their website.

1. A domain name is made up of two parts: the top-level domain (TLD) and the
second-level domain (SLD). For example, in the domain name "example.com,"
".com" is the TLD, and "example" is the SLD.

2. There are various types of TLDs, including country code TLDs (ccTLDs) such
as ".us" and generic TLDs (gTLDs) such as ".com," ".org," and ".net."
3. Domain names are unique and cannot be duplicated. If a domain name is
already registered, you will need to choose a different one.
4. Domain names can be used for websites, email addresses, and other online
services. They are an important part of establishing a strong online presence and
branding.

Cloud computing

Cloud computing is a technology that allows users to access computing resources,

such as storage and processing power, over the internet. Cloud computing services
can be used for a variety of purposes, including data storage, application hosting,
and website hosting.

Internet protocols (IP)

Internet protocols are a set of rules and standards that govern how devices
communicate with each other over the Internet. Here are some of the most
important internet protocols:
 1. Transmission Control Protocol (TCP): TCP is a reliable transport protocol that
ensures data is transmitted without errors. It establishes a connection between
two devices, and data is transmitted in small packets.
2. Internet Protocol (IP): IP is responsible for routing data packets between
devices on the internet. It assigns unique IP addresses to devices so that data
can be sent to the correct destination.
3. Hypertext Transfer Protocol (HTTP): HTTP is the protocol used for transmitting
web pages over the internet. It defines how web browsers request pages from
web servers and how servers respond to those requests.
4. File Transfer Protocol (FTP): FTP is a protocol used for transferring files
between devices on the internet. It provides a simple way to transfer files, either
from a server to a client or from one client to another.
5. Simple Mail Transfer Protocol (SMTP): SMTP is the protocol used for sending
email messages over the internet. It defines how email clients send messages to
email servers and how servers route those messages to their destination.

These are just a few of the many internet protocols in use today. By following these
protocols, devices can communicate with each other and share information over the
internet in a reliable and efficient manner.

Introduction of Basic HTML

HTML (Hypertext Markup Language) is the standard markup language used for
creating web pages and applications. It provides the structure and formatting of
content on the World Wide Web. Understanding HTML is essential for anyone
involved in web development, whether you're a beginner or an experienced developer
looking to refresh your knowledge.

Key points about HTML:

Structure:

HTML uses a hierarchical structure to organize content. The basic building

block is the HTML element, represented by tags. Elements can be nested
within each other to create a structured document.

Tags:

HTML tags are used to define elements and provide structure to the content.
Tags are written as opening and closing pairs, enclosed in angle brackets (<
>). For example, the <html> tag is used to define the root of an HTML
document.

Attributes:
 HTML tags can have attributes that provide additional information or modify
the behaviour of an element. Attributes are added within the opening tag and
consist of a name and a value. For example, the <img> tag uses the "src"
attribute to specify the image source.

Elements:

HTML elements define the different parts of a web page, such as headings,
paragraphs, images, links, tables, and forms. Each element has a specific
purpose and may contain other elements or text content.

Basic HTML Structure:

<!DOCTYPE html>: This declaration is placed at the very beginning of an HTML

document to indicate that it follows the HTML5 standard.

<html> element: This is the root element of an HTML document and contains all
other elements.

<head> element: This element provides information about the document but is not
displayed on the webpage. It typically includes the <title> element, which sets the
title displayed in the browser's title bar.

<body> element: This element contains the visible content of the webpage, such as
text, images, links, and other HTML elements. Everything that is displayed on the
webpage is placed within the <body> tags.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

In the example above, the content between the opening and

closing <body> tags is what will be displayed in the browser
window when the HTML document is rendered. The <h1> tag
represents the main heading, and the <p> tag defines a
paragraph.
Headings

HTML provides six levels of headings, from <h1> to <h6>, where <h1> represents the
highest level and <h6> represents the lowest level. Headings are used to indicate the
hierarchical structure of the content.

Example:

<h1>This is Heading Level 1</h1>

<h2>This is Heading Level 2</h2>
<h3>This is Heading Level 3</h3>

In the example above, the text within each heading tag will be displayed with
different font sizes, with <h1> being the largest and most important heading, and
<h6> being the smallest.

Paragraphs

Paragraphs are used to group and display blocks of text. The <p> tag is used to
define a paragraph.

Example:

<p>This is a paragraph of text.</p>

You can have multiple paragraphs by using multiple <p> tags:

<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

In the above example, each <p> tag represents a separate paragraph, and they will
be displayed as separate blocks of text on the webpage.

It's important to note that both headings and paragraphs are block-level elements,
which means they start on a new line and take up the full width available. They can
be styled using CSS(Cascading Style Sheets) to change their appearances, such as
font size, color, and spacing.

Images
The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced
image.

The <img> tag has two required attributes:

● src - Specifies the path to the image

● alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and
height are not specified, the page might flicker while the image loads.

Display an image in HTML, you can use the <img> tag. Here's an example of how
to include an image in your HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>My Image</h1>
<img src="image.jpg" alt="Description of the image">
</body>
</html>
Or

<img src="img_girl.jpg" alt="Girl in a jacket" width="500"

height="600">

In the above example, the <img> tag is used to insert an image. The src attribute
specifies the source or URL of the image file (in this case, "image.jpg"). The alt
attribute provides alternative text that is displayed if the image cannot be loaded.
This text is also useful for screen readers to describe the image to visually
impaired users.

Text formatting

HTML provides various elements for text formatting.

Paragraphs: Use the <p> element to define paragraphs of text.

<p>This is a paragraph of text.</p>

<p>This is another paragraph.</p>

Bold and Italic Text: You can make text bold using the <strong> or <b> tags, and
italic using the <em> or <i> tags. The semantic choice between <strong> and
<b>, as well as <em> and <i>, is important for screen readers and search engines.

<strong>This text is bold</strong>

<em>This text is italicized</em>

Underline and Strikethrough: You can underline text using the <u> tag and add a
strikethrough using the <s> or <del> tags.

<u>This text is underlined</u>

<s>This text has a strikethrough</s>

Superscript and Subscript: The <sup> tag is used for superscript text, and the
<sub> tag for subscript text.

E = mc²

H₂O

Line Breaks: To insert a line break without creating a new paragraph, use the <br>
tag.

This is a line.<br>

This is the next line.

This is a line.<br>

This is the next line.

Horizontal Rule: To add a horizontal rule (a line that separates content), use the
<hr> tag.

<p>This is some content.</p>

<hr>

<p>This is more content.</p>

<p>This is some content.</p>

<hr>
<p>This is more content.</p>

Blockquotes: To indicate a block of quoted text, use the <blockquote> element.

<blockquote>

<p>This is a blockquote.</p>

<p>It can span multiple paragraphs.</p>

</blockquote>

Preformatted Text: The <pre> element is used for preformatted text, maintaining
spaces and line breaks as they appear in the HTML code.

<pre>

This is preformatted text.

It preserves spaces and line breaks.

</pre>

Remember to use these HTML text formatting elements wisely and semantically,
considering the purpose of each tag and their impact on accessibility and search
engine optimisation (SEO)

Fonts and Styling: To apply specific fonts, you can use the <style> tag or use
CSS classes.

<!-- Using style attribute -->

<p style="font-family: Arial, sans-serif;">This text has a custom font.</p>

<!-- Using CSS classes (define in the <style> tag or external CSS file) -->

<style>

.custom-font { font-family: "Courier New", monospace; }

</style>

<p class="custom-font">This text uses a custom font defined in the CSS class.</p>

Other Formatting: You can adjust the size of the text using the font-size property
in CSS. For example:

<p style="font-size: 20px;">This text has a larger font size.</p>

Remember that inline styles (style attributes) are generally not recommended for
large-scale projects. It's better to define styles in a separate CSS file and link it to
your HTML file using the <link> tag in the <head> section. This helps keep your
HTML clean and separates the structure from the presentation.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a
little hand.

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays
for different devices and screen sizes, and much more!

Using CSS
CSS can be added to HTML documents in 3 ways:

● Inline - by using the style attribute inside HTML elements

 ● Internal - by using a <style> element in the <head> section
● External - by using a <link> element to link to an external CSS
file
The most common way to add CSS, is to keep the styles in external CSS files. However, in
this tutorial we will use inline and internal styles, because this is easier to demonstrate,
and easier for you to try it yourself.

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, and the text color
of the <p> element to red:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

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.

The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:

<!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>

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:

<!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>

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more
about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>