Scribd
Upload
30 views110 pages

HTML

The document provides an introduction to HTML and web design concepts including: - HTML elements like headings, paragraphs, horizontal rules, and line breaks - Attributes such as class, id, style, and title - Basic HTML page structure with tags like <html>, <head>, <title>, and <body> - Empty elements and common attributes - The importance of headings for search engines and readability

Uploaded by

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

HTML

The document provides an introduction to HTML and web design concepts including: - HTML elements like headings, paragraphs, horizontal rules, and line breaks - Attributes such as class, id, style, and title - Basic HTML page structure with tags like <html>, <head>, <title>, and <body> - Empty elements and common attributes - The importance of headings for search engines and readability

Uploaded by

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

COURSE ON WEB

DESIGNING
 Hypertext Markup Languages (HTML)
 Cascading Style Sheet (CSS)
 Java Script
 JQuery
 Bootstrap
 SEO
warm up quiz
what is html?
different between Web design and Web
develop?
what is mark up language, Scripting Language
and Framework?
HTML
INTRODUCTION HTML

 HTML stands for Hyper Text Markup Language


 Standard markup language for creating Web pages
 Describes the structure of a Web page
 HTML support Text,Image,Multimedia content
 platform Independent
 Not case sensitive Language
History of HTML
• HTML was created by Sir Tim Berners-Lee in late 1991
• HTML 1.0 was released in 1993
• HTML 2.0, published in 1995
• HTML 3.0, where Dave Raggett
• HTML 4.01, which is widely used and was a successful version of
HTML
• HTML 5 extended version of HTML 4.01, which was published in
the year 2012.
Prerequisites
 Text editor (visual studio code, Notepad, notepad+
+,Bluefish, sublime text, etc..)

 HTML

 Web Browser (Edge, Chrome,Firefox, Safari, Opera)

 Operating System(Windows, Mac OS, Linux)


HTML Basics

• <!DOCTYPE html>
• <html>
• <head>
• <title> title here </title></head>
• <body>
Website content here </body>
• </html>
 The <!DOCTYPE> declaration represents the document type,
and helps browsers to display web pages correctly.

 The HTML document itself begins with <html> and ends with
</html>.

 Title tag is Used for Title of webpage

 The visible part of the HTML document is between <body> and


</body>.
Basic Program (first.html)
• <!DOCTYPE html>
• <html>
• <head>
• <title> My first program<title></head>
• <body>
• <h1> Hello world</h1>
• </body>
• </html>
HTML Elements
 An HTML element is defined by a start tag, some content, and an end tag.
 The HTML element is everything from the start tag to the end tag:

Syntax:

<tagname>Content goes here...</tagname>

Example:

<h1>My First Heading</h1>


Nested HTML Elements
 HTML elements can be nested (this means that
elements can contain other elements).

 All HTML documents consist of nested HTML


elements.
Sample program:(first.html)
• <!DOCTYPE html>
• <html>
• <head>
• <title> first Title</title></head>
• <body>
• <h1>My First Heading</h1>
• <p>My first paragraph.</p></body>
• </html>
Empty HTML Elements - Assignment

 HTML elements with no  <embed>


content are called empty  <hr>
 <img>
elements.  <input>
 <area>  <link>
 <base>  <meta>
 <br>  <param>
 <col>  <source>
 <track>
 <wbr>
Empty HTML Elements - Assignment

 HTML elements with no  <embed> - container for an


content are called empty external resource, such as a web
elements. page, a picture, a media player, or
a plug-in application.
 <area> -image  <input>- user can enter data
 <base> - URL  <meta>- information about data
 <br>- break  <param>- specifies - name,value
 <col>-column properties  <source>- specify multiple media
for each column resources
 <hr> - line break  <track>-src, kind, lang, label
 <img> - with src (.jpg)  <wbr>- element to add word break
 <link>-clickable opportunities.
•
Example program(empty.html)
<html>
• <head><title> Hello</title>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <h1> HELLO WORLD</h1><hr/>
• <p>this is my first program for empty tag </p><br/>
• <img src=”girl.png” alt=”empty”>
• </body>
• </html>
HTML Attributes

 HTML attributes provide additional information about HTML elements.

 All HTML elements can have attributes


 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
 Attribute value enclosed by Double Quotes
Common Attributes
 Title
 Href
 Id
 Class
 Style
 Src
 lang
Href attribute

<a href="https://url.com">Click here…</a>


●<a>...</a>- element
●<a> -Tag
●href - Attribute
Src, alt, height, width Attributes

• <img src="img_girl.jpg" alt=”error” height=”10px”


width=”20px”>

 <img> - tag
 Src - specific path Attribute
 Alt -alternative text attribute
 Height - Specified height of Image
 Width -Specified width of Image
Class and Id attribute

 The class attribute is often used to point to a class


name in a style sheet. It can also be used by a
JavaScript to access and manipulate elements with the
specific class name.
 The id attribute specifies a unique id for an HTML
element. The value of the id attribute must be unique
within the HTML document.
• Example:
• <p class=”paragraph” id=”name”>text here ..</p>
● <p> is tag
● <p>...</p> element
● Class and Id are attribute
Title attribute

 The title attribute specifies extra information about an


element.
 The information is most often shown as a tooltip text when
the mouse moves over the element.
 Syntax: <element title="text">
 Example:
<p title=”click here…”>hello world</p>
Style attribute

 <p style="color:red;">This is a red


paragraph.</p>

 The style attribute is used to add styles to an


element, such as color, font, size, and more.
lang Attribute
 Always include the lang attribute inside the
<html> tag, to declare the language of the Web
page. This is meant to assist search engines and
browsers.
 <html lang="en">
• Country codes can also be added to the
language code in the lang attribute. So, the first
two characters define the language of the
HTML page, and the last two characters define
the country.
• <html lang="en-US">
Heading
 HTML headings are titles or subtitles that you want to
display on a webpage.
 HTML headings are defined with the <h1> to <h6>
tags.
 <h1> defines the most important heading. <h6>
defines the least important heading.
 Web Page Contained only one <h1> Tag.
Example program(heading.html)
<html>
<head><title> HEADING</title>
</head><body>
<h1>Heading 1</h1><h2>Heading 2</h2>
<h3>Heading 3</h3><h4>Heading 4</h4>
<h5>Heading 1</h5><h6>Heading 6</h6>
<body>
</html>
Example

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
Why Heading is Important

 Search engines use the headings to index the structure and content
of your web pages.
 Users often skim a page by its headings. It is important to use
headings to show the document structure.
 <h1> headings should be used for main headings, followed by
<h2> headings, then the less important <h3>, and so on.
HTML Paragraphs
 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.
• Syntax:
• <p> text here…</p>
HTML Horizontal Rules
 The <hr> tag defines a thematic break in an
HTML page, and is most often displayed as a
horizontal rule.

 <hr> and <hr/> are same.


Sample program(horizontal.html)
<html>
<head><title>horizontal rules</title></head>
<body>
<h1> Welcome</h1>
<hr/><p> this is my first webpage </p>
<hr/><p> Welcome to my webpage </p>
<hr/> </body></html>
HTML Line Breaks
 The HTML <br> element defines a line break.
 Use <br> if you want a line break (a new line) without
starting a new paragraph
• Example:

<p>This is<br>a paragraph<br>with line breaks.</p>


• Output:
This is

a paragraph

with line breaks.


<p> Vs <pre>
<p>

• </p>My Bonnie lies over the ocean.


Output:
• My Bonnie lies over the sea.
My Bonnie lies over the
• My Bonnie lies over the ocean. ocean. My Bonnie lies
over the sea. My Bonnie
• Oh, bring back my Bonnie to me. lies over the ocean. Oh,
bring back my Bonnie to
• </p>
me.
<pre>
• The HTML <pre> element defines
preformatted text.
• The text inside a <pre> element is displayed in
a fixed-width font (usually Courier), and it
preserves both spaces and line breaks
• Example
• <pre>
Output:
• My Bonnie lies over the ocean.
• My Bonnie lies over the ocean.
My Bonnie lies over the sea.
• My Bonnie lies over the ocean. My Bonnie lies over the sea.
• Oh, bring back my Bonnie to me.
My Bonnie lies over the ocean.
• </pre>
Oh, bring back my Bonnie to
me.
Sample program
<html>
<head><title>paragraph</title></head>
<body>
<h1>Paragraph</h1>
<hr/>
<p>this is my new paragraph </p>
<p>welcome<br/>to <br/> my paragraph</p>
<pre>hello World paragraph</pre></body>
</html>
HTML Styles
 The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
 The HTML style attribute has the following syntax:

 <tagname style="property:value;">

 The property is a CSS property. The value is a CSS value.


Style attribute and value

• Background Color : background-color:#000;


• Text Color : color:#fff;
• Font Type : font-family:verdana;
• Text Size : font-size:300%;
• Text Alignment : text-align:center;
HTML Formatting Elements

Formatting elements were designed to display


special types of text
Formating Elements

 <b> - Bold text  <small> - Smaller text


 <strong> - Important text  <del> - Deleted text
 <i> - Italic text  <ins> - Inserted text
 <em> - Emphasized text  <sub> - Subscript text
 <mark> - Marked text  <sup> - Superscript text
 <u>- underline
Example Program(formating.html)
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
output
Difference between strong and bold tag
 Strong Tag:
It is used to show importance of the text by making it
bold or highlighting it semantically.

 Bold tag:
bold tag is just offset text conventionally styled in bold.
HTML Quotation
• <blockquote>
• <q>
• <abbr>
• <address>
• <cite>
• <bdo>
<blockquote>
• The HTML <blockquote> element defines a section that is
quoted from another source.

• Browsers usually indent <blockquote> elements.

• <blockquote>....</blockqoute>
<q>
The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

<q>....</q>
<abbr>
• The HTML <abbr> tag defines an abbreviation or an acronym,
like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

• Marking abbreviations can give useful information to browsers,


translation systems and search-engines.

• <abbr title="World Health Organization">WHO</abbr>


<address>
• The HTML <address> tag defines the contact information for
the author/owner of a document or an article.

• The contact information can be an email address, URL,


physical address, phone number, social media handle, etc.
• <address>.......</address>
<cite>
• The HTML <cite> tag defines the title of a creative work (e.g.
a book, a poem, a song, a movie, a painting, a sculpture, etc.).

• The text in the <cite> element usually renders in italic.

• <cite>...</cite>
<bdo>
• BDO stands for Bi-Directional Override.

• The HTML <bdo> tag is used to override the current text


direction

• <bdo dir="rtl">......</bdo>
HTML Semantic Elements
• A semantic element clearly describes its meaning to both the
browser and the developer.

• Non-semantic elements: <div> and <span> - Tells nothing


about its content.

• Semantic elements: <form>, <table>, and <article> - Clearly


defines its content.
• <article> • <main>
• <aside> • <mark>
• <details> • <nav>
• <figcaption> • <section>
• <figure> • <summary>
• <footer> • <time>
• <header>
HTML <section> Element
• The <section> element defines a section in a document.

• According to W3C's HTML documentation: "A section is a


thematic grouping of content, typically with a heading."
• Examples of where a <section> element can be used:
• Chapters
• Introduction
• News items
• Contact information
HTML <article> Element
• The <article> element specifies independent, self-contained
content.

• An article should make sense on its own, and it should be


possible to distribute it independently from the rest of the web
site.
• Examples of where the <article> element can be used:

• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles
HTML <nav> Element
• The <nav> element defines a set of navigation links.
HTML <header> Element
• The <header> element represents a container for introductory
content or a set of navigational links.

• A <header> element typically contains:


– one or more heading elements (<h1> - <h6>)
– logo or icon
– authorship information
HTML <footer> Element

• The <footer> element defines a footer for a document or


section.
• A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
HTML <aside> Element
• The <aside> element defines some content aside from the
content it is placed in (like a sidebar).

• The <aside> content should be indirectly related to the


surrounding content.
<figure> and <figcaption>
• The <figure> tag specifies self-contained content, like
illustrations, diagrams, photos, code listings, etc.

• The <figcaption> tag defines a caption for a <figure> element.


The <figcaption> element can be placed as the first or as the
last child of a <figure> element.
• Example:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
HTML Comment Tag
HTML comments are not displayed in the browser, but they
can help document your HTML source code.

Syntax:
<!-- Write your comments here -->
Comments TYpe
 Hide Content
Comments can be used to hide content.

 Hide Inline Content:


Comments can be used to hide parts in the middle of the
HTML code.
HTML Colors
• Why color important for website?
• website where place we are using colors?
• how to insert color?
HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or HSLA
values.

RGB : rgb(red, green, blue) 0 and 255.

RGBA : rgba(red, green, blue, alpha) -alpha value


between 0 to 1
HEX : #rrggbb - values between 00 and ff

HSL - hsl(hue, saturation, lightness)

values between 0 to 100%

HSLA -hsla(hue, saturation, lightness, alpha)


• Example:

<h1 style="background-color:rgb(60, 60,


60);">COLOR</h1>
What is CSS?
• Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
• With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and
laid out, what background images or background colors are to
be used, different displays for different devices and screen
sizes, and much more
Using CSS
• Inline CSS
• Internal CSS
• External CSS
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML
element.

• An inline CSS uses the style attribute of an HTML element.

Syntax:
<element style="attribute:value;">Content</element>
Inline CSS
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green;
background: yellow">
Pumo Technovation
</h2>
<p style="color: black">
Happy Preparation!!.
</p>
</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML
page.
• An internal CSS is defined in the <head> section of an HTML
page, within a <style> element.
element{
attribute:value;
attribute2:value;}
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for many
HTML pages.

• To use an external style sheet, add a link to it in the <head>


section of each HTML page

<link rel="stylesheet" href="style-sheet-name.css">


External CSS
Externalcss.html Styles.css Output

<!DOCTYPE html> body {


<html> background-color: grey;
<head> }
<link rel="stylesheet" h1 {
href="styles.css"> color: pink;
</head> }
<body> p{
color: yellow;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p>

</body>
</html>
HTML Links
• HTML links are hyperlinks.
• You can click on a link and jump to another document.

Syntax:
<a href="url">link text</a>
By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
 _self - Default. Opens the document in the same window/tab as
it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
HTML Links Type
 Link to an Email Address
<a href="mailto:mailid">Text here...</a>

 Use an Image as a Link


<a href="Target-page"><img src="image-path" ></a>
HTML Images
The HTML <img> tag is used to embed an image in a web page.
The <img> tag has two required attributes
The <img> tag is empty Tag
Image Attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image
 height- height of images
 width -width of image
 Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Background Image on a HTML element

• use the HTML style attribute and the CSS


background-image property:

<body style="background-image:
url('img_girl.jpg');">
HTML Lists
• Unorder List
• Order List
• Description Lists
Unorder List
• An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.

 disc Sets the list item marker to a bullet (default)


 circle Sets the list item marker to a circle
 square Sets the list item marker to a square
 none The list items will not be marked
• Example:
• Syntax:
<ul style="list-style-type:disc|circle|square|non;">
<li>value1</li>
<li>value2</li>
<li>value3</li>
</ul>
Ordered HTML List
• An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
 type="1" numbered with numbers (default)
 type="A" numbered with uppercase letters
 type="a" numbered with lowercase letters
 type="I" numbered with uppercase roman numbers
 type="i" numbered with lowercase roman numbers
Syntax:

<ol type="1|I|i|A|a">
<li>value1</li>
<li>value2</li>
<li>value3</li>
</ol>
HTML Description Lists
• A description list is a list of terms, with a description of each
term.

• The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term
Syntax:
<dl>
<dt>Title</dt>
<dd>- Description</dd>
<dt>Title</dt>
<dd>- Description</dd>
</dl>
HTML Tables
 HTML tables allow web developers to arrange data into rows
and columns.

 Table Cells
Each table cell is defined by a <td> and a </td> tag.

 Table Rows
Each table row starts with a <tr> and end with a </tr> tag.
• Table Headers
• <th> tag using insert the Heading of cells
Example:
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td> </tr>
</table>
HTML Table Padding & Spacing
• HTML Table - Cell Padding

 Cell padding is the space


between the cell edges and the
cell content.
 By default the padding is set to 0.
<table cellpadding="1">
HTML Table-Cell Spacing

 Cell spacing is the space between each cell.


 By default the space is set to 2 pixels.
Example:
<table cellspacing="5" cellpadding="1">
HTML Table Colspan & Rowspan
• To make a cell span over multiple columns, use the
colspan attribute

Example:
 <th colspan="2">Name</th>
 <th rowspan="2">Phone</th>
HTML Forms
 What is form?
 Where using Form?
 which type of inputs we are using?
• An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
• Syntax:
<form>
form elements
</form>
Form Attributes
The Action Attribute
• The action attribute defines the action to be performed
when the form is submitted.

The Target Attribute


• The target attribute specifies where to display the
response that is received after submitting the form.
The <input> Element

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden"> • <input type="search">
• <input type="image"> • <input type="submit">
• <input type="month"> • <input type="tel">
• <input type="number"> • <input type="text">
• <input type="password"> • <input type="time">
• <input type="radio"> • <input type="url">
• <input type="range"> • <input type="week">
• <input type="reset">
HTML Input Attributes
• value • multiple
• readonly • pattern
• disabled • placeholder
• size • required
• maxlength • step
• min and max • autofocus
• height and width
HTML <select> Tag
drop-down list
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

You might also like