Scribd
Upload
82 views

Web Devlopment

This document provides an overview of web development using HTML and CSS. It introduces HTML as the language used to define web pages, covering HTML document structure, common tags, and how to create basic web pages. It then introduces CSS for styling web pages, covering basic syntax, CSS types (inline, internal, external), ID and class selectors, and the CSS box model which describes the layout of elements. The document provides a foundation for understanding HTML and CSS for front-end web development.

Uploaded by

Shristi
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
82 views

Web Devlopment

This document provides an overview of web development using HTML and CSS. It introduces HTML as the language used to define web pages, covering HTML document structure, common tags, and how to create basic web pages. It then introduces CSS for styling web pages, covering basic syntax, CSS types (inline, internal, external), ID and class selectors, and the CSS box model which describes the layout of elements. The document provides a foundation for understanding HTML and CSS for front-end web development.

Uploaded by

Shristi
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/ 21

WEB DEVELOPMENT

WITH
HTML AND CSS
SUBMITTED BY: SHRISTI YADAV
ROLL NO: 2119213
B.TECH (3rd SEM)
TABLE OF CONTENTS
0 INTRODUCTION TO
02
1 INTRODUCTION HTML

0 HTML DOCUMENT CREATING WEB PAGES


3 STRUCTURE 04 WITH HTML

0
5 HTML TAGS
CONTINUE……….
0
INTRODUCTION OF CSS 07 ADVANTAGES OF CSS
6
0
8 BASIC SYNTAX 09 CSS ID AND CLASS

1
0 CSS TYPES
11 CSS BOX MODEL
INTRODUCTION
Web Development refers to the building, creating, and maintaining of websites.
It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the
internet i.e. websites.

• There are two broad divisions of web development –front-end development


(also called client-side development) and back-end development (also called
server-side development).
• Front-end development refers to constructing what a user sees when they
load a web application – the content, design and how you interact with it.
This is done with three codes – HTML, CSS and JavaScript.
INTRODUCTION TO
HTML
- Hypertext Markup Language (HTML)

Hypertext - Electronic text with hyperlink references


Markup - Like a print editor marking a page with format notes (e.g., bold)
Language - Set of instructions that can be translated to a machine

- Language used to define web pages

- Server sends HTML to the browser

- Browser reads HTML and renders the page

May require downloading data from server (e.g., images)

- Right click on a webpage and select “View Page Source” to see the HTML
HTML DOCUMENT STRUCTURE
Html used predefined tags and attributes to tell the browser how to display content, means in
which format, style, font size, and images to display. Html is a case insensitive language. Case
insensitive means there is no difference in upper case and lower case ( capital and small letters)
both treated as the same, for r example ‘D’ and ‘d’ both are the same here. 
There are generally two types of tags in HTML: 
 
- Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >)
tags.
- Empty Tags: These tags do not require to be closed.
SYNTAX
An HTML Document is mainly divided into two parts: 
 
- HEAD: This contains the information about the HTML document. For Example, the Title of the
page, version of HTML, Meta Data, etc.
- BODY: This contains everything you want to display on the Web Page.

<!DOCTYPE HTML >


<html>
<head>
<title> The title of your html page </title>
</head>
<body>
<p> welcome to html5!!</p>
</body>
</html>
CREATING WEB PAGES WITH
HTML
The first step of creating a web page is to create an HTML document. An HTML
document can be created in any text editor even on a notepad. So any text editor can
be used to make an Html file. We just need to add extension .html /.htm . Let us
create the first basic HTML program.
To create an HTML document follow the following steps:
Step 1: Open your text editor such as Notepad Sublime text, etc.
Step 2: Write the code given below in the text editor.
C0NTINUE….
<!DOCTYPE html>
<html>
<head>
<title>First HTML file</title>
</head>
<body>
Hello Everyone!!
</body>
</html>
Step 3: Save this file with the .html/.htm extension.
Step 4: Open that file with any browser. The output will be displayed.
HTML TAGS
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening
tag, content and closing tag. But some HTML tags are unclosed tags.
- All HTML tags must enclosed within < > these brackets.
- Every tag in HTML perform different tasks.
- If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)
SOME HTML TAGS
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line
across the webpage.

HTML Meta Tags


DOCTYPE, title, link, meta and style

HTML Text Tags


<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>,
<del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags


<a> and <base>
SOME HTML TAGS
HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>

HTML List Tags


<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and
legend

HTML Scripting Tags


script and noscript
INTRODUCTION TO
CSS
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages
all at once
External stylesheets are stored in CSS files
ADVANTAGES OF
- CSS saves time − You can write CSS once and then reuse the same
CSS
sheet in multiple HTML pages. You can define a style for each HTML
element and apply it to as many Web pages as you want.

- Easy maintenance − To make a global change, simply change the


style, and all elements in all the web pages will be updated
automatically.

- Global web standards − Now HTML attributes are being deprecated


and it is being recommended to use CSS. So it's a good idea to start
using CSS in all the HTML pages to make them compatible with
future browsers.

- Platform Independence − The Script offer consistent platform


independence and can support latest browsers as well.
BASIC SYNTAX
A CSS rule set contains a selector and a declaration block.

- Selector: Selector indicates the HTML element you want to style. It could be any tag
like <h1>, <title> etc.
- Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For the above example, there are two declarations:
color: yellow;
font-size: 11 px;
CSS ID & CLASS
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors
called "id" and "class".
 The id Selector
- The id selector is used to specify a style for a single, unique element.
- The id selector uses the id attribute of the HTML element, and is defined with a "#".
 The class Selector
- The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements.
- This allows you to set a particular style for any HTML elements with the same class.
- The class selector uses the HTML class attribute, and is defined with a "."
CSS TYPES
Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It
sets the background color, font-size, font-family, color, … etc property of elements on a web
page. 
There are three types of CSS which are given below: 
• Inline CSS
• Internal or Embedded CSS
• External CSS

● Inline CSS: Inline CSS contains the CSS property in the body section attached with element
is known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute. 
CONTINUE……
● Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e. the
CSS is embedded within the HTML file.
 
● External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc.). CSS property written
in a separate file with .css extension and should be linked to the HTML document
using link tag. This means that for each element, style can be set only once and that will be
applied across web pages.
CSS BOX MODEL
In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:
CONTINUE……
Explanation of the different parts:
- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
EXAMPLE: -
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
THANK YOU!!

You might also like