Hyper Text Markup Language, Cascading Style Sheet

IT for Engineers
Sanjivani Rural Education Society’s
Sanjivani College of Engineering, Kopargaon-423603
(An Autonomous Institute Affiliated to Savitribai Phule Pune University, Pune)
NAAC ‘A’ Grade Accredited, ISO 9001:2015 Certified
Department of Information Technology
(NBA Accredited)
Mr. N. L. Shelake
Assistant Professor

Web Design
Course Contents: -
Web Design Mr. N. L. Shelake Department of Information Technology

HTML
 Basics of Web Design
 Webpage
 Website
 Web Browser
 Web Server
 Domain Name
 URL
 Protocol

WebPage
 A webpage is a single, individual document or resource
that is part of a larger website and is accessible on the
World Wide Web.
 Webpages are typically written in HTML (Hypertext
Markup Language) and can contain various types of
content, including text, images, multimedia elements,
links, forms, and more.

WebPage
 When you access a webpage through a web browser, you
are viewing the content that has been designed and coded
to be displayed in that specific format.
 Some key characteristics and components of a webpage
 HTML Structure
 Content
 Hyperlinks
 Styling and Layout
 Scripting
 Metada
 Accessibility
 Security

Website
 A website is a collection of related webpages and digital
content that is accessible through a common domain name
or web address (URL).
 It is typically hosted on web servers and made available
on the World Wide Web for users to access through web
browsers.
 Websites serve various purposes, including providing
information, promoting products or services, offering
interactive features, and facilitating communication.

Web Browser
 A web browser, often simply referred to as a "browser," is
a software application or program that allows users to
access and view information, content, and websites on the
World Wide Web.
 Web browsers retrieve and display web pages, which are
documents written in HTML (Hypertext Markup
Language) and may include text, images, videos, links,
and interactive elements.

Web Server
 A web server is a specialized software application or
hardware device that serves as the backbone of the World
Wide Web by storing, processing, and delivering web
content to users' web browsers upon request.
 In simpler terms, it's a computer system responsible for
hosting websites and making them accessible to users
over the internet.

Domain Name
 A domain name is a human-readable and user-friendly
address or label used to identify and access resources on
the internet, primarily websites.
 Domain names are used to make it easier for people to
navigate the internet, rather than having to remember
complex IP (Internet Protocol) addresses, which are
numerical representations used by computers to identify
each other on the internet.

Domain Name
 The top-level domain is the part of the domain name that
appears to the right of the last dot. Common TLDs include
".com," ".org," ".net," ".gov," ".edu," and many more.
TLDs can have specific purposes or restrictions (e.g.,
".edu" is reserved for educational institutions, ".gov" for
government entities).

URL
 A URL, or Uniform Resource Locator, is a string of characters
that serves as the web address or reference to identify and
locate resources on the internet.
 URLs are used to specify the location of web pages,
documents, images, videos, and other resources accessible via
the World Wide Web.
 They are a fundamental component of web navigation and are
used by web browsers to retrieve and display web content.
 http://www.sanjivaniIT.com/home/index.html

Protocol
 A protocol, in the context of computer networking and
communication, is a set of rules and conventions that
dictate how data is transmitted, received, and processed
between devices or systems on a network.
 Protocols ensure that data exchange occurs in an orderly
and standardized manner, enabling different devices and
software applications to communicate effectively and
understand each other.

HTML Mr. N. L. Shelake Department of Information Technology
HTML
 HTML
 Hypertext Markup Language, is the standard language
used to create webpages on the World Wide Web
 you can create your own Website.
 HTML elements, attributes, events, color names, entities,
character-sets, URL encoding, language codes, HTTP messages,
browser support,

HTML
 Early Development (1980s):
The concept of hypertext was introduced by computer scientist
Ted Nelson in the 1960s, but the actual development of HTML
began in the late 1980s when British computer scientist Tim
Berners-Lee, working at CERN, created the first web browser and
web server.
He also defined the first version of HTML, which was a basic
markup language for creating documents with links

HTML
 HTML 1.0 (1991): The first official specification of HTML,
HTML 1.0, was released in 1991. It was a simple markup
language with limited formatting and linking capabilities.
 HTML 2.0 (1995): HTML 2.0 was published as an IETF
(Internet Engineering Task Force) RFC in 1995. It introduced
new features like forms and tables, which improved the structure
and interactivity of webpages.
 HTML 3.2 (1997): HTML 3.2 brought further improvements in
formatting and added support for CSS (Cascading Style Sheets),
which allowed for better control over the visual presentation of
web content.

HTML
 HTML 4.01 (1999): HTML 4.01 was a major milestone. It
introduced more advanced features, such as frames, scripting
with JavaScript, and improved support for multimedia
elements. It was widely used on the web for many years.
 XHTML (2000): XHTML (Extensible Hypertext Markup
Language) was introduced as an XML-based reformulation of
HTML 4.01. It aimed for stricter rules and better compatibility
with XML.

HTML
 HTML5 (2014): HTML5 marked a significant advancement in web
technology. It introduced new elements and APIs for multimedia,
graphics, and interactivity. Features like the <video>, <audio>,
and <canvas> elements revolutionized web content. HTML5 also
emphasized improved semantics and accessibility.
 HTML Living Standard (Ongoing):Maintained as a "living
standard." This means it continually evolves and receives updates
without specific version designations. The development is overseen
by the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).

HTML
 HTML (Hypertext Markup Language) uses tags to structure
web content.
 Tags are enclosed in angle brackets < > and come in pairs, with
an opening tag and a closing tag

How HTML Works:
 HTML documents are created using HTML tags. Tags are
enclosed in angle brackets (< >) and usually come in pairs, with
an opening tag and a closing tag
 Tags may have attributes that provide additional information
about an element. Attributes are added to the opening tag.
<tagname>Content goes here</tagname>
<a href="https://www.example.com">Visit Example</a>

HTML
Steps to create a simple HTML program
 Open Notepad: You can do this by pressing the Windows key on
your keyboard, typing "Notepad" in the search bar, and selecting
the Notepad application from the search results.
 Create a New Document: In Notepad, click on "File" in the top
left corner and select "New" to create a new blank document.
 Write Your HTML Code: You can now start writing your
HTML code in the Notepad document.

HTML
 Save the File: To save your HTML file, click on "File" and then
select "Save" or press Ctrl + S. Choose a location to save the file
and give it a name with the ".html" extension, for example,
"index.html". Make sure to select "All Files" from the "Save as
type" dropdown, so it doesn't add a ".txt" extension.
 View in a Web Browser: After saving the file, you can open it in
a web browser to see how it looks. Right-click on the HTML file
you just created and select "Open with" and then choose your
preferred web browser (e.g., Chrome, Firefox, Edge).

HTML
 <!DOCTYPE>: Defines the document type and version of
HTML being used.
 <html>: The root element that encapsulates the entire HTML
document.
 <head>: Contains meta-information about the document, such as
the title, character encoding, and linked stylesheets or scripts.
 <title>: Sets the title of the webpage, which appears in the
browser's title bar or tab.
 <body>: Contains the visible content of the webpage, including
text, images, links, and more.

HTML
 <link>: Links external resources like stylesheets (CSS) to the
HTML document.
 <style>: Contains inline CSS for styling the content within the
HTML document.
 <script>: Includes JavaScript code within the HTML document
for interactivity.
 <meta>: Provides metadata about the document, such as the
character set, author, and description.

HTML
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>

HTML Headings
HTML headings are
defined with the <h1> to
<h6> tags.
<h1> defines the most
important heading. <h6>
defines the least
important heading:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is heading 1</h1>
</body> </html>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

HTML Links
HTML links are defined with the <a> tag. The link's destination is
specified in the href attribute. Attributes are used to provide
additional information about HTML elements.
<html>
<body>
<a href="https://www.sanjivani.org.in">This is a link</a>
</body>
</html>

HTML Links
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="/default.html">CSS Tutorial</a></p>
</body>
</html>

HTML Images
HTML images are defined with the <img> tag. The source file (src),
alternative text (alt)
<html>
<body>
<img src="sanjivanilogo.jpg" alt="W3Schools.com"
width="104" height="142">
</body>
</html>

HTML Color
<html>
<body bgcolor=“yellow”>
<font color=“Red”>
<h3 style="color:Red;">Hello World</h3>
<p style="color:Blue;">Sample Program of HTML.</p>
<p style="color:Green;">First program of HTML Color</p>
</body>
</html>

HTML
 <h1> to <h6>: Headings of decreasing importance, with <h1>
being the most important and <h6> the least.
 <p>: Defines a paragraph of text.
 <a>: Creates hyperlinks to other webpages or resources.
 <img>: Embeds images on the webpage.
 <ul>: Defines an unordered (bulleted) list.
 <ol>: Defines an ordered (numbered) list.
 <li>: Represents list items within <ul> or <ol>.

HTML Text Formatting
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements
 The HTML <b> element defines bold text, without any extra
importance. The HTML <strong> element defines text with strong
importance. The content inside is typically displayed in bold.
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<strong>This text is important!</strong>
</body>
</html>

HTML <i> and <em> Elements :
 The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc. The HTML <em> element defines
emphasized text. The content inside is typically displayed in italic. A screen
reader will pronounce the words in <em> with an emphasis, using verbal stress
<html>
<body>
<i>This text is italic</i>
<p><em>This text is emphasized.</em></p>
</body>
</html>

HTML <small> Element
 The HTML <small> element defines smaller text
<html>
<body>
<p>This text is normal.</p>
<p><small>This text is emphasized.</small></p>
</body>
</html>

HTML <del> Element
 The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text:
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>

HTML <mark> Element
 The HTML <mark> element defines text that should be marked or
highlighted:
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>

HTML <sub> Element
 The HTML <sub> element defines subscript text. Subscript text
appears half a character below the normal line, and is sometimes
rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>

HTML <sup> Element
 The HTML <sup> element defines superscript text. Superscript text
appears half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]:
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>

HTML attributes
 id: Provides a unique identifier for an element.
 class: Specifies one or more class names for an element, allowing
for CSS styling or JavaScript manipulation.
 src: Specifies the URL of an external file, such as an image or a
script.
 href: Specifies the URL of the linked page in an anchor `<a>` tag.
 alt: Provides alternative text for an image when the image cannot
be displayed.
 style: Allows inline CSS styling for an element.
 title: Specifies extra information about an element when the mouse
hovers over it.

HTML Colors
 Background Color
 Text Color
 Border Color

HTML
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul> </body> </html>

HTML
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> </body> </html>

HTML
<html>
<body>
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table></ol> </body> </html>

CSS Mr. N. L. Shelake Department of Information Technology
Cascading Style Sheets
It is a stylesheet language used for describing the
presentation of a document written in HTML
CSS is used to control the layout, design, and visual
presentation of web pages
It separates the content (HTML) from its styling, making
websites more flexible and maintainable
CSS uses a set of rules that define how elements are styled

A CSS rule consists of a selector (the HTML element to
style) and a declaration block (the styling properties)
h1 { color: red; font-size: 24px; }
CSS Selectors are used to target specific HTML elements
Common selectors include element selectors (e.g., h1, p),
class selectors (e.g., .my-class), and ID selectors (e.g.,
#my-id).

<html>
<head>
<title> CSS Example</title>
<style>
body {
background-color: lightgreen;
font-family: Arial;
}
h1 {
color: red;
} </style></head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph with some text. This is a paragraph with
some text. This is a paragraph with some text.</p>
</body>
</html>

CSS properties define how the selected elements should
be styled
Common properties include color, font-size, margin,
padding, background-color, and text-align.
The CSS box model defines how elements are rendered in
terms of content, padding, border, and margin.
Understanding the box model is crucial for controlling
element spacing and layout

The <style> element is placed within the <head> of the
HTML document.
Inside the <style> element, you can define your CSS rules.
These rules will only apply to elements within this specific
HTML document.
In this case, we have defined styles for the <body>, <h1>,
elements.

External CSS is defined in a separate .css file and linked
to an HTML document using the <link> element.
Internal CSS is defined within the HTML document using
the <style> element.
Inline CSS is applied directly to individual HTML
elements using the style attribute

<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is an External CSS Heading</h1>
<p>This is a paragraph with external CSS applied.</p>
</body>
</html>

/* styles.css */
h1 {
color: #007BFF;
font-size: 28px;
}
p {
font-size: 16px;
margin: 10px;
padding: 10px;
background-color: #f0f0f0;

Color and Text Properties
color: Sets the text color.
font-size: Specifies the size of the font.
font-family: Defines the font type for text.
font-weight: Sets the thickness or boldness of text.
text-align: Determines text alignment (left, right, center,
justify).
text-decoration: Controls text decoration (underline,
overline, line-through

Color and Text Properties
Background
<h1 style="background-color:Yellow;">Hello World</h1>
Font Color
<h1 style="color:Red;">Hello World</h1>
CSS Border Color
<h1 style="border:2px solid Blue;">Hello World</h1>

Box Model Properties
In CSS, the term "box model" is used when talking about
design and layout.
The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders,
padding, and the actual content
The box model allows us to add a border around elements,
and to define space between elements

Explanation of the different parts:
 Content - The content of the box, where text and images
appear
 Padding - Clears an area around the content. The padding is
transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is
transparent

<html> <head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
} </style> </head>

<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border.</div>
</body>
</html>

padding: 50px;: This line sets the padding inside the <div> elements to 50
pixels. Padding is the space between the content of the element and its border.
So, each <div> will have 50 pixels of space between its content and the border.
margin: 20px;: This line sets the margin around the outside of the <div>
elements to 20 pixels. Margin is the space between the border of an element
and other elements on the page. So, each <div> will have 20 pixels of space
around it.

div: This is a selector. It targets all <div> elements in your HTML document.
This rule will be applied to every <div> element in the page.
background-color: lightgrey;: This line sets the background color of the
targeted <div> elements to "lightgrey." This means that the background of each
<div> will appear in a light grey color.
width: 300px;: This line sets the width of the <div> elements to 300 pixels.
So, each <div> will be 300 pixels wide.
border: 15px solid green;: This line specifies the border of the <div>. It sets
the border to be 15 pixels wide, with a solid style, and colored green. So, each
<div> will have a 15-pixel wide solid green border around it.

Text Styling Properties
line-height: Controls the space between lines of text.
letter-spacing: Adjusts the space between characters.
text-transform: Changes the capitalization of text
(uppercase, lowercase).
white-space: Specifies how white space within an element
is handled.

IT For Engineers
Thank You

Hyper Text Markup Language, Cascading Style Sheet

More Related Content

What's hot (20)

Similar to Hyper Text Markup Language, Cascading Style Sheet (20)

More from Nitin Shelake (19)

Recently uploaded (20)

Hyper Text Markup Language, Cascading Style Sheet