Scribd
Upload
11 views18 pages

Website Development

This document provides an introduction to web development, focusing on the fundamental technologies of HTML and CSS. It outlines the components of web development, including front-end and back-end development, and explains the roles of HTML and CSS in creating visually appealing and interactive websites. The document also discusses various CSS types, properties, and tools for web development, emphasizing the importance of continuous learning in this field.

Uploaded by

vanshikas1020
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views18 pages

Website Development

This document provides an introduction to web development, focusing on the fundamental technologies of HTML and CSS. It outlines the components of web development, including front-end and back-end development, and explains the roles of HTML and CSS in creating visually appealing and interactive websites. The document also discusses various CSS types, properties, and tools for web development, emphasizing the importance of continuous learning in this field.

Uploaded by

vanshikas1020
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

WEB DEVELOPMENT: 15-09-2023

1
INTRODUCTION:
◦ Welcome to web development fundamentals: HTML and CSS.
◦ In this presentation, we will explore the core technologies that power the web.
◦ HTML and CSS are essential tools for building modern, dynamic and visually appearing
website.

2
What is the web development:
◦ Web Development is a process of creating and maintaining websites.
◦ It involves various technologies, including HTML and CSS.
◦ Web development work on the client side (front-end) and server side (back-
end) of web applications

3
Components of web development:
◦ Web Design: This involves creating the visual elements of a website, such as
layout, colors, and graphics.
◦ Front-End Development: Front-end developers work on the client-side of web
applications. They use technologies like HTML (Hypertext Markup Language), CSS
(Cascading Style Sheets).
◦ Back-End Development: Back-end developers work on the server-side of web
applications. They build and maintain the server, databases, and application logic
that handle data storage, retrieval, and processing.

4
HTML:
◦ HTML is the backbone of web content.
◦ It provide structure and semantics of web pages.
◦ Element like heading paragraph, list and link are defined using html tag.
◦ Example <h1> Hello world!</h1>
<P1> This is paragraph</p1>

5
BASIC HTML SYNTAX:
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Welcome to my web page</h1>
<p1>This is paragraph</p1>
</body>
</html>

6
SOME HTML ELEMENTS & ATTRIBUTEs:
◦ ELEMENTS: The HTML element is everythings from the start tag to the End tag.
◦ Example: <h1>….</h1>
<p1>….</p1>
<body>…..</body>
◦ ATTRIBUTES: Attributes are always specified in the start tag and it provide
additional about elements.
◦ Example: href <a>
src <img>
alt <img>

7
CSS:
◦ CSS is responsible for the presentation and layout of web content.
◦ It allow you to style html elements, such as changing colors, fronts, and positioning.
◦ CSS selector targets specify html element like id and class.
◦ Example: h1 {color:blue;font-size:24px;}

8
TYPE OF CSS:
◦ Inline CSS- It involve styling HTML element with their tags, directly affecting their
appearance.
◦ Example: <!Doctype html>
<html>
<body>
<h1 style=“color; blue;”> This is heading<h1>
</body>
</html>

◦ Internal CSS- it is use <style> within an HTML document <head>section to apply style to
specific page element.
◦ Example: <html>
<head>
<style>
h1{color: red;}
</style>
<body>
<h1> this is heading</h1> 9

</body>
External CSS:

◦ It placed in sperate .CSS files and linked to HTML document enaling consistent
styling across multiple page.
Example: <html>
<head>
<link href =“style.css” rel =“ stylesheet ”>
</head>
<body>
<h1> This is a heading</h1>
</body>
</html>

10
The role of CSS in web design:
◦ CSS enables responsible design for different screen size (desktop, tablet , mobile).
◦ It enhance user experience by making website visually appearing.
◦ CSS framework like provides pre-design style and layout.

11
CSS Properties:
◦ Color:(rgb, hex )
◦ Margin:(top, right, bottom, left)
◦ Padding:(top, right, bottom, left)
◦ Text- decoration
◦ Text- Aling(center ,right, left)
◦ Border(color, width)
◦ Line weight(line height)
◦ Display Flex
◦ Justify-content
These are some properties that are used in CSS.

12
Front-End vs. Back-End
Development:
◦ Front-End Development: focused on the user interface (UI) and user experience
(UX).
◦ Back-end development : concerned with server –side logic, databases, and
application functionality.
◦ Web developer often specialize in one or both areas.

13
Tools for Web Development:
◦ Text Editors: Sublime text, visual studio code etc.
◦ Local Development environments: XAMPP, MAMP, OR DOCKER.

14
Project Coding

15
Output

16
CONCLUSION:
◦ HTML and CSS are building block of web development.
◦ They unable us to create interactive visually appearing, and dynamic website.
◦ Keep learning and exploring the ever-evolving world of the web development!

17
18

You might also like