SlideShare una empresa de Scribd logo
1 de 17
Web Page Designing
Amit Mali
Web Strategist and Trainer
www.amitmali.com
What is Web Page
a hypertext document connected to the World Wide Web.
What is a web browser
a computer program with a graphical user interface for
displaying HTML files, used to navigate the World Wide Web
What are Web Servers
Web servers are computers that deliver (serves up) Web
pages. Every Web server has an IP address and possibly a
domain name
Types of Website
◦Static
◦Dynamic
Web Page Structure
Basic structure tags
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<!DOCTYPE>
The <!DOCTYPE> declaration is not an HTML tag;
it is an instruction to the web browser about what version of HTML the page is
written in.
The <!DOCTYPE> declaration must be the very first thing in your HTML
document, before the <html> tag.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser
knows what type of document to expect.
<html>
The <html> tag tells the browser that this is an HTML document.
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
<head>
The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts,
styles, meta information, and more.
The following elements can go inside the <head> element:
◦ <title> (this element is required in an HTML document)
◦ <style>
◦ <link>
◦ <meta>
◦ <script>
◦ <noscript>
<title>
The <title> tag is required in all HTML documents and it defines the title of the
document.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
<BODY>
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as
text, hyperlinks, images, tables, lists, etc.
HTML Attributes
•HTML elements can have attributes
•Attributes provide additional information about an element
•Attributes are always specified in the start tag
•Attributes come in name/value pairs like: name="value"
•Examples
• <html lang= "en-US“ >
• <p title= "About W3Schools“ >
• <a href= "http://www.amitmali.com" >This is a link to amit mali’s website</a>
• <img src= “demo.jpg " alt= "W3Schools.com" width= "104" height= "142“ >
Cascading Style Sheets (CSS)
is a style sheet language used for describing the
presentation of a document written in a markup language
Syntax of CSS
Their are three ways to insert CSS
External style sheet
Internal style sheet
Inline style
Web Page Designing

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
 
Html project
Html projectHtml project
Html project
 
Html basics
Html basicsHtml basics
Html basics
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
Css backgrounds
Css   backgroundsCss   backgrounds
Css backgrounds
 
CSS
CSSCSS
CSS
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 

Similar a Web Page Designing (20)

Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Html2
Html2Html2
Html2
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptx
 
Html 5
Html 5Html 5
Html 5
 
Html
HtmlHtml
Html
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Web technology
Web technologyWeb technology
Web technology
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML - LinkedIn
HTML - LinkedInHTML - LinkedIn
HTML - LinkedIn
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 

Último

Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxnegromaestrong
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfSanaAli374401
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Shubhangi Sonawane
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 

Último (20)

Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 

Web Page Designing

  • 1. Web Page Designing Amit Mali Web Strategist and Trainer www.amitmali.com
  • 2. What is Web Page a hypertext document connected to the World Wide Web.
  • 3. What is a web browser a computer program with a graphical user interface for displaying HTML files, used to navigate the World Wide Web
  • 4. What are Web Servers Web servers are computers that deliver (serves up) Web pages. Every Web server has an IP address and possibly a domain name
  • 7. Basic structure tags <!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 8. <!DOCTYPE> The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
  • 9. <html> The <html> tag tells the browser that this is an HTML document. The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
  • 10. <head> The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more. The following elements can go inside the <head> element: ◦ <title> (this element is required in an HTML document) ◦ <style> ◦ <link> ◦ <meta> ◦ <script> ◦ <noscript>
  • 11. <title> The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
  • 12. <BODY> The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
  • 13. HTML Attributes •HTML elements can have attributes •Attributes provide additional information about an element •Attributes are always specified in the start tag •Attributes come in name/value pairs like: name="value" •Examples • <html lang= "en-US“ > • <p title= "About W3Schools“ > • <a href= "http://www.amitmali.com" >This is a link to amit mali’s website</a> • <img src= “demo.jpg " alt= "W3Schools.com" width= "104" height= "142“ >
  • 14. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language
  • 16. Their are three ways to insert CSS External style sheet Internal style sheet Inline style