HTML & CSS.ppt

FULL STACK WEB
DEVELOPMENT
HTML & CSS

WEB Technologies Structure
Front-end Languages Back-end Languages DataBases
HTML
CSS
Bootstrap
JavaScript
JavaScript
PHP
C,C++
Java
Python etc.,
SQL
MYSQL
NOSQL
Oracle
MongoDB

Website
A website is a collection of many web pages, and web pages are digital
files that are written using HTML(HyperText Markup Language). To make your
website available to every person in the world, it must be stored or hosted on a
computer connected to the Internet round a clock. Such computers are known
as a Web Server.
A web page is a text file written in the HyperText Markup Language
(HTML) that describes the content of the web page and includes references
to other web resources. A web page is a structured document that primarily
consists of hypertext, text with hyperlinks.
WebPage

HTML text Editors
• An HTML file is a text file, so to create an HTML file we can use any
text editors.
• Text editors are the programs which allow editing in a written text,
hence to create a web page we need to write our code in some text
editor.
• There are various types of text editors available which you can
directly download, but for a beginner, the best text editor is Notepad
(Windows), VS Code
• After learning the basics, you can easily use other professional text
editors which are, Notepad++, Sublime Text, Vim, etc.
• In our tutorial, we will use Notepad and sublime text editor.
Following are some easy ways to create your first web page with
Notepad, and sublime text.

Protocol
A protocol is a set of rules and guidelines for communicating data.
Types of Protocols
•HTTP
•HTTPS
•FTP
•SMTP

URL
URL gives the address of files created for webpages or other documents like
an image, pdf for a doc file, etc.
https://www.digitalgurus.co.in
Types of URL
Absolute URL:
This type of URL contains both the domain name and directory/page path.
Relative URL:
This type of URL contains the path excluding the domain name.

INTRODUCTION OF HTML
• HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
• HTML invented in TIM BERNERS LEE – 1991
• So many versions of HTML like HTML, HTML 2.0, HTML 4etc.,
• Present Updated version is HTML5 introduced in the year of
2014
• HTML 5.1 - 2016 & HTML 5.2 - 2017

INTRODUCTION OF CSS
• CSS stands for Cascading Style Sheet
• It is used to apply a styles for webpages
• CSS was first proposed by Hakon Wium Lie on October 10, 1994
while working with Tim Berners-Lee at CERN and the rest in
history.
• 1996 - First version of CSS was invented.
• 1998 - Second version of CSS was invented.
• 1999 - Third version of CSS was invented.
• CSS was not only styling language in development at the time,
but the very element of cascading and developing sequence.

WHAT IS AN HTML Tags
HTML Tags are pre-defined elements in HTML, enclosed
within these brackets < > signs. For example: <html>, <table>,
etc. All HTML tags has a particular function associated with
them.
Each tag has a special function and a combination of various
tags developes a website. For example, a <p> tag defines a
paragraph in the website and a <table> tag displays a table.

HTML Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Logical Part
Visual Part

An HTML document has two distinct parts HEAD
and BODY
• <HTML>
• <HEAD>
• .............
• .............
• .............
• </HEAD>
• <BODY>
• .............
• .............
• .............
• </BODY>
• </HTML>

HEAD Tag <HEAD>
• HEAD tag comes after the HTML start tag. It contains TITLE tag to give
the document a title that displays on the browsers title bar at the
top. The Format is:
<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>

BODY Tag <BODY>
• The BODY tag contains all the text and graphics of the document with all the
HTML tags that are used for control and formatting of the page.The Format
is:
<BODY>
Your Document goes here
</BODY>
An HTML document, web page can be created using a text editor,
Notepad or WordPad. All the HTML documents should have the
extension .htm or html. It require a web browser like Internet
Explorer or Netscape Navigator/Communicator to view the
document.

Example Explained
•The <!DOCTYPE html> declaration defines that this document is an HTML5
document
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the HTML page
•The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
•The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
•The <h1> element defines a large heading
•The <p> element defines a paragraph

Types of tags in HTML
There are two types of tags in HTML that
1. Paired Tags (Opening and Closing Tags)
2. Unpaired Tags (Singular Tag)
• Paired Tags
Paired tags are a set of two tags with the same name. In each Paired
tag set, one is an opening tag, and the other one is the closing tag.
The closing tag has a / slash, it means that the tag is closed now.
Syntax: <tag> Content </tag>
Example:
<html></html>, <table></table>, <form></form>, <span></span>,
<ul></ul>, <p></p>,<head></head>, <div></div>

Unpaired Tags
• Unpaired tags are single tags with no closing tag. These tags are also
called Singular Tags. These are also called non-container
tags because they do not contain any content.
Example:
<br>
<hr>
<meta>
<input>

HTML Elements:
• An HTML element is defined by a start tag, some content, and an end tag.
• HTML element everything from the start tag to the end tag
<tagname>Content goes here….</tagname>
Ex:<h1>Hello world</h1>
<p>Nature is very beautiful………</p>

HTMLAttributes:
• An HTML attributes provides additional information about HTML
elements.
• HTML elements can have attributes.
• Attributes are always specified in the start tag.
Ex:<a href=“https://www.digitalgurus.co.in”>
Digital Gurus </a>
<img src=“img.png”>

Styles of CSS:
These are the three types,
•Inline CSS
•Internal CSS
•External CSS

Inline CSS:
• By using the style attribute inside HTML elements.
• It is used to apply a style attribute inside HTML elements.
Ex: <h1 style=“color:blue;”>A Blue Heading</h1>
<p style=“color:red;”>A red paragraph</p>

Internal CSS:
• By using the <style> element in the <head> section.
• It is used to define a style for a single HTML page.
Ex:<head>
<style>
body{background-color: powderblue;}
h1{color:blue;}
p{color:red;}
<style>
<head>
<body>
<h1>Hello World</h1>
<p> Nature is very beautiful………</p>
</body>

External CSS:
• By using a <link> element to link to an external css file.
• It is used to define a style for a many HTML pages.
Ex: <head>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<h1>Hello World</h1>
<p> Nature is very beautiful………</p>
</body>

Styles.CSS file:
Ex:
body{background-color: powderblue;}
h1{color:blue;}
p{color:red;}

Block-Level Elements:
• It always starts on a new line, and the browsers automatically
add some space before and after the element.
• It always takes up the full-width available.
Ex:<address>,<article>,<aside>,<blockquote>,<canvas>,<dd>,
<div>,<dl>,<dt>,<fieldset>,<figcaption>,<figure>,<footer>,
<form>,<h1> to <h6>,<header>,<hr>,<li>,<main>,<nav>,
<noscript>,<ol>,<p>,<pre>,<section>,<table>,<tfoot>,<ul>,
<video>

Inline Elements:
• It does not start on a new line.
• It only takes up as much width as necessary.
Ex:<a>,<abbr>,<acronym>,<b>,<bdo>,<big>,<br>,
<button>,<cite>,<code>,<dfn>,<em>,<i>,<img>,<input>,
<kbd>,<label>,<map>,<object>,<output>,<q>,<samp>,
<script>,<select>,<small>,<span>,<strong>,<sub>,<sup>,
<textarea>,<time>,<tt>,<var>

Class Attribute:
• The HTML class attribute is used to specify a class for an HTML element.
• Multiple HTML elements can share the same class.
Ex: <head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>

</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>

ID Attribute:
• The HTML id attribute is used to specify a unique id for an HTML element.
• You cannot have more than one element with the same id in an HTML
document.
Ex: <head><style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style></head>
<body>
<h1 id="myHeader">My Header</h1>
</body>

HTML Page Title & Favicon:
A favicon image is displayed to the left of the page title in
the browser tab
Ex: <head>
<title>Digital Gurus</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

HTML Heading Tag:
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important
heading.
Ex: <body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>

HTML Paragraph Tag:
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
Ex: <body>
<p>A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.</p>
</body>

HTML Break Tag:
<br>
Tag: br stands for break line, it breaks the line of the code.
HTML Horizontal Rule Tag:
<hr>
Tag: hr stands for Horizontal Rule. This tag is used to put a line
across the webpage

HTML Comment Tag:
• HTML comments are not displayed in the browser, but they can help
document your HTML source code.

Ex: <body>


</body>

CSS Comments:
• CSS comments are not displayed in the browser, but they can help document
your HTML source code.
Ex: <head><style>
/* This is a single-line comment */
p {color: red;}
</style></head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>

CSS Comments:
Ex: <head><style>
/* This is
a multi-line
comment */
p {color: red;}
</style></head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>

HTML Colors:
• Background Color
You can set the background color for HTML elements:
Ex:<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>

HTML Colors:
• Text Color
You can set the color of text:
Ex:<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p></body>

HTML Colors:
Border Color
You can set the color of borders:
Ex:<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>

HTML RGB Colors:
• An RGB color value represents RED, GREEN, and BLUE light sources.
• Each parameter (red, green, and blue) defines the intensity of the color with a value
between 0 and 255.
• This means that there are 256 x 256 x 256 = 16777216 possible colors!
rgb(red, green, blue)
Ex:<body>
<h1 style="color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
</body>

HTML RGBA Colors:
• An RGBA color value is an extension of RGB with an Alpha channel (opacity).
• RGBA color values are an extension of RGB color values with an Alpha channel - which
specifies the opacity for a color.
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all)
rgba(red, green, blue, alpha)
Ex:<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
</body>

HTML HEX Colors:
• A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB
(blue) hexadecimal integers specify the components of the color.
• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and
the other two (green and blue) are set to 00.
• Another example, #00ff00 is displayed as green, because green is set to its highest
value (ff), and the other two (red and blue) are set to 00.
• To display black, set all color parameters to 00, like this: #000000.
• To display white, set all color parameters to ff, like this: #ffffff.
#rrggbb

HTML HEX Colors:
Ex: <body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1></body>

HTML HSL Colors:
• HSL stands for hue, saturation, and lightness.
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
• Lightness is also a percentage value. 0% is black, and 100% is white.
hsl(hue, saturation, lightness)
Ex: <body>
<h1 style="color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
</body>

HTML HSLA Colors:
• HSLA color values are an extension of HSL with an Alpha channel (opacity).
• HSLA color values are an extension of HSL color values, with an Alpha channel - which
specifies the opacity for a color.
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all)
hsla(hue, saturation, lightness, alpha)
Ex: <body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1></body>

HTML Formatting Elements:
Formatting elements were designed to display special types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
•

HTML <b> & <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.
Ex:<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is bold.</strong></p>
</body>

HTML <i> & <em> Elements:
• The HTML <i> element defines a part of text in an alternate voice or mood.
The content inside is typically displayed in italic.
• The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.
Ex:<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
<p><em>This text is italic.</em></p>
</body>

HTML <small> Element:
• The HTML <small> element defines smaller text
Ex:<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>

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

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
Ex:<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>

HTML <ins> Element:
• The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text
Ex:<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>

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
Ex:<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>H<sub>2</sub>O</p>
</body>

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]
Ex:<body>
<p>This is <sup>superscripted</sup> text.</p>
<p>a<sup>2</sup>
</body>

HTML & CSS.ppt

More Related Content

What's hot (20)

Similar to HTML & CSS.ppt (20)

Recently uploaded (20)

HTML & CSS.ppt