Scribd
Upload
18 views39 pages

HTML Css Lec1

This document provides an introduction to web development, including front-end development with HTML, CSS, and JavaScript, back-end development with server-side languages, and full stack development. It covers the basics of how the web works, front-end topics like HTML structure and CSS styling, back-end topics like server-side programming, and introduces key concepts like client-side vs server-side programming. The document provides an overview of many fundamental aspects of web development.

Uploaded by

Pranjal tiwari
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
18 views39 pages

HTML Css Lec1

This document provides an introduction to web development, including front-end development with HTML, CSS, and JavaScript, back-end development with server-side languages, and full stack development. It covers the basics of how the web works, front-end topics like HTML structure and CSS styling, back-end topics like server-side programming, and introduces key concepts like client-side vs server-side programming. The document provides an overview of many fundamental aspects of web development.

Uploaded by

Pranjal tiwari
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/ 39

Introduction to Web Development

Anshika Agarwal 05-08-2023


Basics of Web
Development
How the web works ?
Other parts of Web

• Internet Connection
• TCP/IP
• DNS
• HTTP
Front End Development

• Creation of user interface


• Look and feel of website
• HTML , CSS and Javascript
• HTML defines layout
• CSS is used to styled format the content
• Javascript adds functionality and interactivity
Back-end Development

• Focuses on server-side of web development


• Deals with logic and database operations required to make a website function properly
• Server side languages - Python , Ruby, PHP or Javascript
• Interact with APIs to retrieve and send data between the server and the front end
Full Stack Development

• Involves proficiency in both front-end and back-end development


• Capable of building complete web applications from designing and developing the
user interface to handling server side logic and database management.
Client-side Programming

• Code that runs on user’s device typically within a web browser


• Focuses on presentation or interaction layer the application
• Technologies - HTML, CSS and Javascript
• Fast and responsive user interfaces - no waiting required for server responses
• Reduced server load - less processing on server side and server only focuses on
delivering data
Server-side Programming

• Code that executes on the server


• Handling requests from clients, processing data and generating responses
• Manages application logic , data storage and business operations
• Secure data processing
• Access to system resources like database , file systems and network services
• Cross-platform capability - support different clients (web browsers, mobile Apps )
Introduction to HTML

• HTML ( HyperText Markup Language) is a markup language that tells web browsers how to
structure the web pages.
• HTML contains series of elements which we use to make content appear in certain way
Basic Structure of
HTML Document
What is HTML head ?

• Contents of the <head> element.


• Head’s content is not displayed on the page.
• Contains metadata about the document.
Adding a title

• The <title> element is metadata that represents the title of the overall HTML
document.
• When you bookmark a page , <title> contents are filled in as suggested bookmark
name.
Metadata: the <meta> element

• Data that describes data .

• Charset represents document’s character encoding.


• Providing a description helps in optimizing searches (Search Engine Optimization)
The Basics: headings
and paragraphs
Why do we need semantics?
Lists
UnOrdered Lists

• Lists of items for which the order of the items doesn’t matter
• Starts with <ul> element — wraps around all list elements
• Wrap each list item with <li> element
Lists
Ordered Lists

• Lists of items for which the order of the items does matter
• Starts with <ol> element — wraps around all list elements
• Wrap each list item with <li> element
<b> vs <strong>

• The <strong> element is for content that is of greater importance


• <b> element is used to draw attention to text without indicating that it is more
important
Image Tag

• The <img> tag is an HTML element used to embed images in a web page.
• Self enclosing tag (does not require a closing tag)
• Attributes for img tag :
• src - specifies url of the image
• alt - alternative text for the image
• Width and height - specifies dimensions of the image
Hyperlinks

• Link documents to other documents or resources


• Any web content can be converted to a link
• Basic link is created by wrapping content inside <a> element
Advanced Text Formatting
Description lists

• Mark up a set of items and their associated descriptions, such as terms and their
associated descriptions such as terms and definitions.
• Wrapper element <dl>
• Description term <dt>
• Description definition <dd>
Superscript nd subscript

• We need to use superscript and subscript when marking up items like dates, chemical
formulae and mathematical equations.
• The <sup> and <sub> elements handle this job
HTML Tables

• Structured set of data made up of rows and columns (tabular data)


• Content of table is enclosed in <table></table> tags.
• Table cell is created by <td> element
• Table row <tr> element
Document and Website Structure
Basic Sections a document

• Header - <header>
• Navigation bar - <nav>
• Main Content - <main> with various subsections represented by <article>, <section>
and <div> elements
• Sidebar - <aside>; often placed inside <main>
• Footer - <footer>
Planning a simple website
Style HTML using CSS
What is CSS ?

• CSS is a stylesheet language


• Used to selectively style HTML elements
How CSS is structured ?

• External Stylesheet
• Internal Stylesheet
• Inline Styles
How does CSS
actually work?
CSS Selectors

• Type , class and ID selectors - p, #my-id, .my-class


• Pseudo-classes and pseudo-elements - a:hover , p::first-line
• Combinators - article > p
• Attribute Selector - img[src]
CSS Box Model
Margins and Margin Collapsing
CSS Positioning

• Static
• Relative
• Absolute
• Fixed
• Sticky
Sizing items in CSS

• Setting a specific size


• Using percentages
• Percentage margins and padding
• Min and max sizes
• Viewport Units
Border

• border-style
• border-width
• border-color
Display Properties

• block
• inline
• inline-block
Thank You !!

You might also like