Scribd
Upload
2 views

Chapter 1 - Introduction to Web Development

The document provides an overview of web development, explaining the internet and the web, and detailing the components of web development including web design, front-end and back-end development, and full-stack development. It distinguishes between a website and a webpage, and outlines the building blocks of web development such as HTML, CSS, and JavaScript. Additionally, it lists various web development tools and content management systems (CMS) that facilitate website creation and management.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Chapter 1 - Introduction to Web Development

The document provides an overview of web development, explaining the internet and the web, and detailing the components of web development including web design, front-end and back-end development, and full-stack development. It distinguishes between a website and a webpage, and outlines the building blocks of web development such as HTML, CSS, and JavaScript. Additionally, it lists various web development tools and content management systems (CMS) that facilitate website creation and management.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

WD 101: Web

Development
& Application

INSTRUCTOR: MAR JUNE J. GABON


What is Internet?
•The internet is simply a network of computers that communicate with each
other to send and receive data (information).

•Each of these computers on the internet can be distinguished and located by


a unique number called an IP Address. An IP Address looks something like
this: 168.212.226.204
What is the Web?
• The Web is a subset of the internet.

• Like every other computer network out there, the Web is made up of two
main components: the web browser client and the web server.

• The client requests the data and the server shares or serves its data. To
achieve this, the two parties have to establish an agreement. That
agreement is called the Application Programming Interface or in short,
the API.
• But this data has to be arranged and formatted into a form that's
understandable by end-users who have a wide range of technical
experiences and abilities.

• This is where the whole concept of web development come into play.
What is Web Development?
• Web development refers to the process of creating websites or web
applications. It includes several aspects, including:
• Web Design: The layout, appearance, and user experience (UX) of a website.
• Web Page: is a document that is displayed in a web browser, such as Google
Chrome, Mozilla Firefox, or Safari.
• Front-End Development: Coding the visual and interactive parts of the site
using languages like HTML, CSS, and JavaScript.
• Back-End Development: Managing databases, servers, and applications to
ensure everything works behind the scenes.
• Full-Stack Development: A combination of front-end and back-end
development.
• Websites are hosted on servers, and users access them using browsers such as
Google Chrome, Mozilla Firefox, or Safari.
Website vs Webpage
• A webpage is a single document that can be viewed in a web browser. It is
made using HTML and can include text, images, links, videos, and other
multimedia content.
• A website is a collection of interconnected webpages under a single
domain (e.g., www.example.com). A website can consist of multiple
webpages with a common theme or purpose, like a business site, an online
store, or a blog.
Website vs Webpage
• A webpage is a single document that can be viewed in a web browser. It is
made using HTML and can include text, images, links, videos, and other
multimedia content.
• A website is a collection of interconnected webpages under a single
domain (e.g., www.example.com). A website can consist of multiple
webpages with a common theme or purpose, like a business site, an online
store, or a blog.
Website vs Webpage
• A webpage is a single document that can be viewed in a web browser. It is
made using HTML and can include text, images, links, videos, and other
multimedia content.
• A website is a collection of interconnected webpages under a single
domain (e.g., www.example.com). A website can consist of multiple
webpages with a common theme or purpose, like a business site, an online
store, or a blog.
Building Blocks of Web
Development
• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript
Building Blocks of Web
Development
• HTML (HyperText Markup Language) HTML Example:

• Definition: HTML is the standard markup <!DOCTYPE html>


<html>
language for creating web pages and web <head>
applications.
<title>My Web Page</title>
• Purpose: It provides the structure of a
webpage by defining various elements such as </head>
<body>
headings, paragraphs, links, images, lists,
forms, and more. <h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text on my web page.</p>
• Key Features: <a href="https://www.example.com">Visit Example
Website</a>
• Uses tags (elements) to structure content, such
as <h1> for headings, <p> for paragraphs, and </body>
<a> for links. </html>

• HTML documents are made up of nested


elements and can include attributes to provide
additional information about elements.
Building Blocks of Web
Development
• CSS (Cascading Style Sheets) CSS Example:

• Definition: CSS is a stylesheet language used body {


background-color: lightblue;
to describe the presentation of a document font-family: Arial, sans-serif;
written in HTML or XML (including XML dialects }
such as SVG and XHTML).
h1 {
• Purpose: It controls the layout and visual color: navy;
text-align: center;
appearance of web pages, allowing developers }
to apply styles such as colors, fonts, spacing,
and positioning. p{
font-size: 16px;
• Key Features: line-height: 1.5;
}
• Enables responsive design through media
queries, allowing web pages to adapt to different
screen sizes and devices.
• Supports various styling options, including text
colors, background images, margins, padding,
and borders..
Building Blocks of Web
Development
• JavaScript JavaScript Example:

• Definition: JavaScript is a high-level, interpreted document.getElementById("demo").innerHTML = "Hello, World!";

programming language that is widely used for function changeColor() {


adding interactivity to web pages. document.body.style.backgroundColor = "yellow";
}
• Purpose: It enables dynamic content, client-side
validation, and interactive features on web
pages, enhancing user experience.
• Key Features:
• Allows manipulation of HTML elements and CSS
styles dynamically (the Document Object Model -
DOM).
• Supports asynchronous programming with AJAX
(Asynchronous JavaScript and XML), allowing data
to be fetched without reloading the entire page.
Web Development Tools
• VS Code (Visual Studio Code): A lightweight, open-source code editor
widely used by developers.
• Sublime Text: A popular text editor known for its speed and simplicity.
• Notepad++: A free source code editor and Notepad replacement that
supports several programming languages. It’s lightweight and ideal for quick
edits.
• Dreamweaver: A powerful web development tool that provides a visual
interface for building websites. It supports both code and WYSIWYG (What
You See Is What You Get) editing, making it suitable for developers and
designers alike.
• Chrome DevTools: Built-in tools in Google Chrome for inspecting web page
elements, debugging JavaScript, and optimizing performance.
• Postman: A tool for testing APIs by making HTTP requests to endpoints.
CMS (Content Management
Systems)
CMS platforms are used for building and managing websites without deep
coding knowledge.
• WordPress: The most popular CMS, especially for blogs and small business
websites.
• Drupal: A more complex and flexible CMS, often used for large, content-
heavy websites.
• Joomla: A middle-ground CMS with a balance of user-friendliness and
flexibility.
• Wix: A user-friendly, cloud-based website builder that allows users to create
and manage websites through a drag-and-drop interface without coding.
• Webflow: A web design tool, CMS, and hosting platform that allows
designers to build responsive websites visually, with the ability to add
custom code if desired.
CMS (Content Management
Systems)
CMS platforms are used for building and managing websites without deep
coding knowledge.
• WordPress: The most popular CMS, especially for blogs and small business
websites.
• Drupal: A more complex and flexible CMS, often used for large, content-
heavy websites.
• Joomla: A middle-ground CMS with a balance of user-friendliness and
flexibility.
• Wix: A user-friendly, cloud-based website builder that allows users to create
and manage websites through a drag-and-drop interface without coding.
• Webflow: A web design tool, CMS, and hosting platform that allows
designers to build responsive websites visually, with the ability to add
custom code if desired.

You might also like