Scribd
Upload
35 views

Web Technology Notes

Uploaded by

Robin Shrestha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Web Technology Notes

Uploaded by

Robin Shrestha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

6.

1 Introduction: Web Development

Web development involves building and maintaining websites. It ensures that a website
performs well, looks appealing, and provides a good user experience. It includes:

• Front-end development: Focuses on the visible part of the website (what users
see). This includes HTML, CSS, and JavaScript.
• Back-end development: Focuses on the server side, handling databases, user
authentication, and application logic. Technologies like PHP, Python, Ruby, or
Node.js are often used.
• Full-stack development: Combines both front-end and back-end development.

For example, building a portfolio website involves using HTML for structure, CSS for
styling, and JavaScript for interactive features like image sliders.

6.2 Web Browsers and Search Engines

• Web browsers are applications used to retrieve, display, and interact with web
pages. Popular examples include:
o Google Chrome: Fast, widely supported, and developer-friendly.
o Mozilla Firefox: Open-source, focused on privacy.
o Microsoft Edge: Integrated with Windows and supports Chrome extensions.

When you type a URL (like www.example.com), the browser communicates with
the web server to display the web page.

• Search engines: Tools used to find information on the web by searching keywords.
They crawl, index, and rank websites based on algorithms. Popular search engines
include:
o Google: The most widely used search engine, known for its powerful
algorithm.
o Bing: Microsoft’s search engine, offering different results and layout.
o DuckDuckGo: Focused on privacy, does not track users.

Example: When you search “best web development tutorials,” the search engine shows
results based on its ranking algorithm.

6.3 Overview of Various Internet & Web Technologies

• HTTP/HTTPS: HyperText Transfer Protocol (HTTP) is the foundation of


communication on the web. HTTPS adds a layer of encryption using SSL (Secure
Sockets Layer).
o HTTP is used for transferring data between a web server and a client
(browser).
o HTTPS ensures secure communication (padlock icon in the browser).
• DNS (Domain Name System): Converts human-readable domain names (like
example.com) into IP addresses that computers use to communicate.
• Web servers: Software that serves content to web browsers. Examples include:
o Apache: A free, open-source web server that powers a large portion of the
web.
o Nginx: Known for its high performance and ability to handle large amounts
of traffic.
• Client-server model: The client (browser) requests data, and the server processes
the request and responds with the data. This model is the backbone of web
applications.

Example: When you access a website, your browser (client) sends an HTTP request to the
server, which processes it and sends the requested page back.

6.4 Content Management System (CMS)


A CMS allows non-technical users to create, manage, and modify content on websites
without the need for coding. Popular CMS platforms include:

• WordPress: The most popular CMS, powering around 40% of websites globally. It
offers plugins and themes to customize websites.
• Joomla: A flexible CMS, good for both small and complex sites.
• Drupal: A powerful CMS for large, scalable sites, often used by enterprises.

CMS platforms handle everything from creating web pages to publishing blog posts,
managing user permissions, and more.

6.4 HTML: The Language of the Web

6.4.1 Objectives

• To understand the basic building blocks of web pages.


• To learn how HTML provides structure and how it interacts with CSS and
JavaScript.
• To get familiar with key HTML tags and their usage.

6.4.2 Structure of HTML

The structure of an HTML document is critical. Every HTML document follows a basic
structure:

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

• <!DOCTYPE html>: Tells the browser that this is an HTML5 document.


• <html>: The root element, containing everything within the web page.
• <head>: Contains metadata, like the title and links to CSS files.
• <body>: Contains all the visible content on the web page (text, images, links).

6.4.3 Publishing and Hosting

Publishing and hosting refer to the process of making a website live on the internet:

• Publishing: Uploading your files (HTML, CSS, images, etc.) to a server.


• Hosting: Renting space on a server to store your website’s files. Hosting services
provide the infrastructure to make your website accessible. Examples of hosting
providers include:
o Bluehost
o GoDaddy
o HostGator

After development, you use FTP (File Transfer Protocol) to upload files to the hosting
provider's server.
6.4.4 HTML Tags vs. Attributes

• Tags: Define the structure of a web page. Examples include <p> for paragraphs,
<a> for links, and <img> for images.
• Attributes: Provide additional information about HTML elements. Attributes are
included within the opening tag. For example:
o href in <a href="https://example.com">Link</a>
o src in <img src="image.jpg" alt="An image">

Attributes help define properties like links, source paths, IDs, and classes.

6.4.5 Basic Tags of HTML

• HTML: The root element of every HTML page.


• HEAD: Contains metadata (e.g., title, character set, linked files).
• TITLE: Specifies the title of the webpage displayed in the browser tab.
• BODY: Contains all visible elements, such as headings, paragraphs, images, and
links.

Examples of basic formatting with tags:

<body style="background-color: #f0f0f0;">


<h1 style="color: #333;">Welcome</h1>
<p>This is a paragraph with <strong>bold</strong> text.</p>
</body>

• Foreground and Background Color: Set with inline CSS (style attribute), or by
linking to an external stylesheet.
6.4.6 Heading Tag (H1 to H6)

Headings in HTML define the hierarchy of content. <h1> is the most important heading
(often used for the main title), and <h6> is the least important.

<h1>This is an H1 Heading</h1>
<h6>This is an H6 Heading</h6>

Headings can also be aligned using the ALIGN attribute:

<h1 align="center">Centered Heading</h1>

6.4.7 FONT Tag and Attributes

The <font> tag was used to define font properties but is now deprecated in favor of CSS.
However, here’s how it was used:

<font size="4" color="blue">This text is blue and size 4</font>

• Size: The size attribute defines the font size (1-7).


• Color: The color attribute sets the text color.

For modern web development, it's better to use CSS for styling fonts:

p{
font-size: 16px;
color: blue;
}

6.4.8 Paragraph Formatting (P)


The <p> tag is used to define paragraphs in HTML.

<p>This is a paragraph of text. It is separated from other elements by default spacing.</p>

You can also style paragraphs using CSS:

<p style="text-align: justify;">This is a justified paragraph.</p>

6.4.9 Break Line (BR)

The <br> tag is used to insert a line break without starting a new paragraph.

<p>First line.<br>Second line on a new line.</p>

6.4.10 Comments in HTML

Comments help developers leave notes in the code without affecting the output.

<!-- This is a comment -->

6.4.11 Formatting Text

Several tags are used to format text:

• Bold: <b>Bold Text</b>


• Italic: <i>Italic Text</i>
• Underline: <u>Underlined Text</u>
• Mark: <mark>Highlighted Text</mark>
• Superscript: <sup>Text<sup>
• Subscript: <sub>Text<sub>
• Blockquote: <blockquote>Quoted Text</blockquote>

Example:

<p>This is <b>bold</b> and <i>italic</i> text.</p>

6.4.12 Ordered List (OL)

An ordered list (<ol>) creates a numbered list:

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Attributes for <ol>:

• type: Defines the list type (numbers, letters, Roman numerals).


• start: Specifies the starting value for the numbering.

Example with attributes:

<ol type="A" start="3">


<li>Third item</li>
<li>Fourth item</li>
</ol>

6.4.13 Unordered List (UL)


An unordered list (<ul>) creates a list of items without any specific order, typically
displayed with bullet points. You can change the bullet style using the type attribute.

<ul>
<li>First item</li>
<li>Second item</li>
</ul>

• type: This attribute specifies the bullet style. Possible values are:
o disc: Default solid circle (●).
o circle: A hollow circle (○).
o square: A solid square (■).

Example:

<ul type="square">
<li>First item with square bullet</li>
<li>Second item with square bullet</li>
</ul>

6.4.14 ADDRESS Tag

The <address> tag is used to define the contact information for the author or owner of a
document. Typically, it is displayed in italic style, and it usually includes email addresses,
phone numbers, or links.

<address>
Written by <a href="mailto:[email protected]">Webmaster</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Creating Links (Anchor Tag and Hyperlink)

Links (also known as hyperlinks) allow users to navigate between different pages or parts
of a page.

• Link to other HTML documents or data objects:

<a href="https://www.example.com">Visit Example.com</a>

• Links to other places in the same HTML document: You can link to a specific
section of the same document using anchor tags with the id attribute.

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>


<p>This is Section 1.</p>

• Links to places in other HTML documents:

<a href="about.html#section2">Go to Section 2 in About Page</a>

• Anchor tag and Hyperlink: The <a> (anchor) tag creates hyperlinks, and the href
attribute contains the URL of the link destination.

6.4.15 Tables: Creating Tables Using TH, TR, and TD Tags


Tables in HTML allow you to display data in a structured format with rows and columns.

• Table Tags:
o <table>: Defines the table.
o <tr>: Defines a table row.
o <th>: Defines a header cell (bold and centered by default).
o <td>: Defines a standard data cell.

Example of a simple table:

<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
</tr>
</table>

6.4.16 Forms: Creating Forms Using Textbox, Radio, Checkbox, Textarea, and
Button
Forms in HTML allow users to submit data to a web server. Common input elements
include text boxes, radio buttons, checkboxes, and buttons.

• Textbox:

<input type="text" name="username" placeholder="Enter your name">

• Radio Button:

<input type="radio" name="gender" value="male"> Male


<input type="radio" name="gender" value="female"> Female

• Checkbox:

<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to Newsletter

• Textarea (for multi-line input):

<textarea name="comments" rows="4" cols="50">Enter your comments


here...</textarea>

• Button:

<button type="submit">Submit</button>

Example form:

<form action="/submit-form" method="POST">


<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br><br>

<label for="subscribe">Subscribe to newsletter:</label>


<input type="checkbox" id="subscribe" name="subscribe" value="yes"><br><br>

<textarea name="comments" rows="4" cols="50">Your


comments...</textarea><br><br>

<button type="submit">Submit</button>
</form>

6.4.17 Introduction to HTML5 Elements (Audio, Embed, Source, Track, and Video)

HTML5 introduced several new elements to handle multimedia and graphic content
without the need for external plugins.

• Audio:

<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

• Embed: Embeds external content, such as a video or plugin.

<embed src="sample.pdf" width="600" height="400">

• Source: Used in media elements like <audio> and <video> to specify multiple
sources.

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

• Track: Provides subtitles or captions for videos.

<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>

6.4.18 HTML5 Graphics Using Canvas and SVG

• Canvas: The <canvas> element is used to draw graphics, such as shapes, text, and
images via JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>


<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

• SVG (Scalable Vector Graphics): A language for describing 2D graphics in XML.


Unlike canvas, SVG maintains its shape and quality when scaled.

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

6.4.19 Concept of Domain Name and Web Hosting

• Domain Name: A domain name is the unique address used to access a website (e.g.,
www.example.com). It maps to an IP address through DNS (Domain Name
System).
• Web Hosting: Web hosting refers to the service that provides storage space on a
server for your website files so that they can be accessed over the internet.

Steps to publish a website:

1. Purchase a Domain Name: Register a unique domain (e.g., GoDaddy,


Namecheap).
2. Choose a Web Hosting Provider: Select a hosting plan (e.g., Bluehost, HostGator).
3. Upload Website Files: Use FTP (File Transfer Protocol) or a hosting control panel
to upload your files to the server.

6.5 Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) is a language used to style HTML content. It controls the
look and layout of a webpage.

6.5.1 Introduction to Cascading Style Sheets


CSS enables separation of content from design. It allows for consistency across multiple
web pages and reduces code repetition.

Example:

<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 36px;
}
</style>

6.5.2 Inline CSS

Inline CSS applies styles directly within an HTML tag using the style attribute.

Example:

<h1 style="color: red;">This is an inline styled heading</h1>

6.5.3 Embedded CSS

Embedded (or internal) CSS is written within the <style> tag in the <head> section of an
HTML document.

Example:
<head>
<style>
p{
color: blue;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>This is an embedded style.</p>
</body>

6.5.4 External CSS

External CSS is defined in a separate .css file and linked to an HTML document. This
allows you to apply styles across multiple pages.

Example: In HTML:

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

6.5.4 External CSS

External CSS allows you to write your styles in a separate file, usually with a .css extension.
This file is then linked to your HTML documents, making it easier to manage styles across
multiple pages. Using external stylesheets enhances code organization and reusability.

• In HTML: Use the <link> tag in the <head> section to link to an external CSS file.

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

• In CSS (styles.css): The actual styles are written in the linked CSS file.

body {
background-color: lightyellow;
}

h1 {
color: green;
font-size: 30px;
}

p{
color: navy;
font-family: "Arial", sans-serif;
}

The external stylesheet styles.css will now style the HTML file wherever it’s linked.

Advantages of External CSS:

1. Separation of concerns: HTML handles the structure, while CSS handles the
design.
2. Reusability: You can apply the same CSS file to multiple web pages.
3. Maintainability: It's easier to update styles in a single CSS file rather than multiple
HTML files.
4. Faster loading times: Once the CSS file is cached, it reduces load times on
subsequent page visits.
Conclusion of CSS

CSS provides flexibility and control over the layout, appearance, and responsiveness of
web pages. By mastering CSS, you can create visually appealing and well-structured
websites, ensuring consistency across pages.

With these concepts, you’ve covered a wide range of fundamental HTML and CSS topics
essential for building modern, interactive, and well-designed web pages. Here's a brief
recap:

• HTML is the backbone of web pages, structuring content with elements such as
headings, paragraphs, lists, links, forms, and multimedia (audio, video, canvas, etc.).
• CSS complements HTML by providing styles, making the web pages visually
appealing and ensuring they adapt to different devices and screen sizes.

You might also like