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
