Web Technology Notes
Web Technology Notes
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.
• 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.
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.
• 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.1 Objectives
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>
Publishing and hosting refer to the process of making a website live on the internet:
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.
• 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>
The <font> tag was used to define font properties but is now deprecated in favor of CSS.
However, here’s how it was used:
For modern web development, it's better to use CSS for styling fonts:
p{
font-size: 16px;
color: blue;
}
The <br> tag is used to insert a line break without starting a new paragraph.
Comments help developers leave notes in the code without affecting the output.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<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>
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>
Links (also known as hyperlinks) allow users to navigate between different pages or parts
of a page.
• 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.
• Anchor tag and Hyperlink: The <a> (anchor) tag creates hyperlinks, and the href
attribute contains the URL of the link destination.
• 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.
<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:
• Radio Button:
• Checkbox:
• Button:
<button type="submit">Submit</button>
Example form:
<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>
<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>
• Source: Used in media elements like <audio> and <video> to specify multiple
sources.
<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>
• Canvas: The <canvas> element is used to draw graphics, such as shapes, text, and
images via JavaScript.
• 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.
CSS (Cascading Style Sheets) is a language used to style HTML content. It controls the
look and layout of a webpage.
Example:
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 36px;
}
</style>
Inline CSS applies styles directly within an HTML tag using the style attribute.
Example:
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>
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:
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.
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.