Scribd
Upload
2 views

03-HTML-CSS

The document provides an overview of HTML and CSS, detailing their roles in web development, including the evolution of the web and the distinction between static and dynamic pages. It covers key concepts such as HTML elements, attributes, and the use of CSS for styling, as well as client-side and server-side programming. Additionally, it includes references to resources for further learning about HTML and CSS.

Uploaded by

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

03-HTML-CSS

The document provides an overview of HTML and CSS, detailing their roles in web development, including the evolution of the web and the distinction between static and dynamic pages. It covers key concepts such as HTML elements, attributes, and the use of CSS for styling, as well as client-side and server-side programming. Additionally, it includes references to resources for further learning about HTML and CSS.

Uploaded by

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

HTML and CSS

Kameswari Chebrolu

https://d2v4zi8pl64nxt.cloudfront.net/javascript-seo/59
48abfc0e2df5.02876591.gif

Examples are from : https://www.w3schools.com/html/default.asp


Web
• Enormously popular application that provides a
tremendous wealth of information
• Origins: 1989 Tim Berners-Lee (CERN) proposed
mechanism to distribute high-energy physics data
(reports, photos, blueprints etc)
– Proposal eventually lead to World Wide Web (WWW)
• 1993, first graphical browser Mosaic was released
• 1994, W3C (world wide web consortium) was formed
to develop web and standards
Web Client-Server Interaction
Typical Workflow (At high level)
• Web Request:
– A user enters a web address (URL) in their browser
• Web address corresponds to some website
– One or more requests are sent to the web server hosting the website
• Processing:
– Server processes each request
• May run server-side scripts, query databases, or performing other tasks to generate a
response.
• Response:
– The generated response(s) are sent back to user's browser
• Delivery:
– Browser interprets each response, combines them and displays the web page
• Repeat above steps:
– User interacts with the page causing more requests to be sent out
– Receives corresponding responses and sees new information, and so on
Static Pages
• Early days of Internet, websites consisted mostly
of static resources
– Developers coded static files (HTML) by hand and
deployed on server
• User type website’s URL in browser which results
in request(s) to server (via HTTP protocol) asking
for static files
• Web server returns static files (e.g HTML) on disk
in the form of HTTP response
Modern Web: Dynamic Pages
Client-side Programming
• Code that runs in the browser
– E.g. Javascript
• Note: HTML, CSS are for markup/styling
• Primarily concerned with improving the
appearance and behavior of a rendered web
page
– Selecting and styling UI components, creating
layouts, form validation etc
Server Side Programming
• Code that runs in the server
– Helps create dynamic pages
– E.g. PHP, Python, Ruby, C#, and JavaScript
(NodeJS)
• Developers typically write their code using web
frameworks (Django/Python, Flask etc)
– Collections of functions, objects, rules and other
code constructs
– Helps solve common problems, speed up
development etc
Our Focus: Static Pages and Client Side
Programming!
HTML5
• HTML stands for Hyper Text Markup Language
– Many versions, current version is 5
• Tells browsers how to display content
• Supports text, text elements, tables, embedded
images, audio/video elements etc
• Supports hyperlinks: links to other documents or
document parts
• Also supports embedded code, executed at
client-side browser: javascript
• How to View HTML Source when browsing?
– Right-click a webpage in browser and select
"View Page Source"
From https://www.w3schools.com/html/
Elements/Tags
• HTML is just a series of elements
• Element defined by a start tag, some content,
and an end tag
• Tag: Enclosed within <,>
– E.g. <p>, </p>, <li>, </li>
– HTML tags are not case sensitive; <P> same as <p>.
– But strongly recommend use of lowercase
• Example Element: <p> This is a para </p>
• The <html> element is the root element and it
defines the whole HTML document
• HTML elements with no content are called
empty elements.
– The <br> tag defines a line break, and is an empty
element without a closing tag
• Elements can be nested
Attributes
• Attributes provide additional information
about elements
– Always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
– E.g: <p style="color:red;">This is a red
paragraph.</p>
– E.g: <a href="https://www.w3schools.com">Visit
W3Schools</a>
– <img src="img_girl.jpg" width="500"
height="600">
Headings
Paragraph

<br> : line break

<Pre>: preformatted text

<hr> tag defines a break in HTML


page; often displayed as a horizontal
rule
Style
style attribute
add styles to an
element, such
as color, font,
size,
Formatting
Comment
Favicon

HTML Tutorial
Links
● Use the <a> element to define a link
a. Use the href attribute to define the link address
b. Use the target attribute to define where to open the
linked document
● Use the <img> element (inside <a>) to use an image
as a link
● Use the mailto: scheme inside the href attribute to
create a link that opens the user's email program
Tables

Tr: table row


Th: table header
Td: table data
Lists
HTML Video

controls attribute adds video controls, like play, pause, and volume
Browser will use the first recognized format among src

The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.
iframe

iframe is used to display a web


page within a web page.
Forms
• HTML form is used to collect user input
• User input is sent to a server for later processing
• <form> element is used to create a HTML form
– <input> element is the most used form element
• Displayed in many ways, depending on the type attribute
– <label> element is useful for screen-reader users
– <select> defines a dropdown
– <textarea> defines a multi-line input field (a text
area)
● Id and for should match for binding label to
input
● More on id later (primarily used for
identification and styling
● name attribute is used by server-side script
(e.g., PHP, Python, etc.) to identify and
process the data
Cascading Style Sheets (CSS)
• HTML designed to define structure and
semantics of a document, not so much
presentation
– Initially, developers used tags like <font>, <b>, and
<i> to apply styles
– Messy and hard-to-maintain code
• Not easy to update/change visual design across pages
without altering many files!
• Separate document content from presentation
→ led to development of CSS
– Principle of separation of concerns
• Style sheet language used for describing the
presentation of a document
– Presentation: Layout, colors, fonts etc
• spacing between elements, how elements are positioned
and laid out
• what background images or background colors are to be
used
– Can also help create animations, responsive web
designs
• Responsive: adapt to different screen sizes and devices
• Saves effort, can control the layout of multiple
web pages all at once
• CSS can be added to HTML documents in 3
ways:
– Inline - by using the style attribute inside HTML
elements
– Internal - by using a <style> element in the
<head> section
– External - by using a <link> element to link to an
external CSS file (most common)
Inline
Internal
External
More Complex Example
Div

● <div> stands for "division", HTML ELEMENT


● generic container used to group and structure content on a webpage
● No semantic meaning but serves as a way to organize and apply styles to
related elements via CSS
Classes
• class is an attribute to assign a specific class
or classes to one or more elements
• Used for styling or scripting purposes
– Can apply the same styles or behavior to multiple
elements
Div+Class
id
• id attribute is used to identify a specific element
– id attribute must be unique within a single HTML
document
– Note class attribute can be applied to multiple elements,
and multiple elements can share the same class!
• id attribute is used by CSS and JavaScript to
style/select a specific element
– Use hash character (#), followed by an id name; then,
define the CSS properties within curly braces {}
• The value of the id attribute is case sensitive
References
Core Reference:
https://www.w3schools.com/html/default.asp
• CSS in depth:

https://www.w3schools.com/css/default.asp

You might also like