Scribd
Upload
5 views

HTML Css Notes

The document provides an overview of web development, covering aspects such as web design, programming, and database management. It details HTML as the standard markup language, including its structure, tags, and attributes, as well as CSS for styling web pages. Additionally, it emphasizes responsive web design and practical applications like creating a simple website and using Bootstrap for implementation.

Uploaded by

Vivek Tripathi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML Css Notes

The document provides an overview of web development, covering aspects such as web design, programming, and database management. It details HTML as the standard markup language, including its structure, tags, and attributes, as well as CSS for styling web pages. Additionally, it emphasizes responsive web design and practical applications like creating a simple website and using Bootstrap for implementation.

Uploaded by

Vivek Tripathi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

• Web development refers to the creating, building,

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.
 Laying out the design of the website so that it works
in browsers.
 Making websites more interactive.
 Developing the logic by which a web application
works.
 Testing and improving web applications.
 Building databases and bringing that information
to be displayed on the web page or application.
 Making websites safer (cyber security).
 Improving website performance and speed.
 HTML is the standard markup language for creating
Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using
markup
 HTML elements are represented by tags
 HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use
them to render the content of the page
 HTML tags:
› <p>, <h1> - <h6>, <a>, <img>, <div>, <span>
 Self-closing tags:
› <br>, <hr>, <img>
 Common attributes:
 id, class, src, href, alt, title
 Ordered lists (<ol>)
 Unordered lists (<ul>)
 Definition lists (<dl>)
 Tables (<table>, <tr>, <th>, <td>)
 Block level elements :
› <div>, <p>,<h1> to <h6>, <form>, <table>
etc.
 Inline elements:
› <img>, <a>, <span>, <input> etc.
 Audio tag
 Video tag
 Iframe tag
 Form elements: <form>, <input>,
<textarea>, <button>, <select>, <option>
 Attributes for form elements: action,
method, name, value
 Method: get vs Post
 New input types:
› email, url, date, number, range
 Form validation attributes:
› required, pattern, min, max
 Create one simple Website
 Tourism place for your city
 Create pages:
› Home
› About
› Contact
› Places to Visit
 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
Types

Internal External Inline


CSS CSS CSS
 Selectors are something using which we
can select the HTML elements.
 Below are different types of selectors.
› Element Selector : p {color:red;}
› Class Selector : .c1{color:red;}
› Id Selector : #id1{color:red;}
› Universal Selector : # {color:red;}
 The CSS font properties define the font
family, boldness, size, and the style of a
text.
› font-family: "Times New Roman", Times, serif;
› font-style : normal| italic| oblique;
› font-size: 10px| 10%;
› font-weight: normal | bold| 100-900;
› font-variant: normal | small-caps;
 Used to set border of any element
 Border: 2px solid red
 2px: border size
 Solid: border style
 Red: border color
 Used to set a display of element
 Inline
 Block
 Inline-block
 Flex
 grid
 To set a position of element
 Static
 Relative
 Absolute
 Fixed
 sticky
 A combinator is something that explains the
relationship between the selectors.
 A CSS selector can contain more than one simple
selector. Between the simple selectors, we can
include a combinator.
 There are four different combinators in CSS:
› descendant selector (space) : div p {}
› child selector (>): div >p { }
› adjacent sibling selector (+): div+p {}
› general sibling selector (~): div~p {}
 Create a mindsprint webpage using
HTML & CSS
 What is Responsive web design:
 Responsive web design is about creating web sites
which automatically adjust themselves to look good on
all devices, from small phones to large desktops.
 Example: www.getbootstrap.com
Easy to use

Responsive Features

Mobile first approach

Browser compatibility
 Use CDN (content delivery links)
 You can download library directly and
include the same.
 Uses of classes
 Container:
› Use the default margins and padding
 Container-fluid:
› Cover the entire width
 Margins
 Paddings
 Height
 Width
 Implement the same page using
bootsrap.

You might also like