Scribd
Upload
5 views

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
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

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
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