SlideShare une entreprise Scribd logo
1  sur  21
Télécharger pour lire hors ligne
Mohamed Elabnody
Web Design (Tools)
http://www.Elabnody.net
Elabnody@msn.com
Lecture (2)
2013
Outline
 Basic Concept
 How the web work
 How browser display web pages
 Web site components
 Tools for creating Web sites
 Web Design Free Tools
www.elabnody.net 3
Introduction
 Web design encompasses many different skills
and disciplines in the production and
maintenance of websites.
 The different areas of web design include
 web graphic design;
 interface design;
 authoring, including standardized code and
proprietary software;
 user experience design;
 and search engine optimization.
 Often many individuals will work in teams
covering different aspects of the design
process, although some designers will cover
them all.
www.elabnody.net 4
2.1 Basic Concept
 The World Wide Web (WWW or Web) is a :
graphical interface that utilizes the Internet to
distribute and retrieve information
 A Web site is a : collection of linked Web
pages, Starts with a home page and Pages are
linked together with a hyperlink, or link
 A Web browser is a : specific software
program required to display Web pages
www.elabnody.net 5
2.1 Basic Concept
 Access Web pages by entering its Uniform
Resource Locator (URL) into the Web browser’s
address bar
 Search Engine is a Software programs that
find Web sites and Web pages
 Entertainment web sites include : music,
videos, sports, games, and more
www.elabnody.net 6
2.1 Basic Concept
 URL
 www.elabnody.net
 WWW: Represents World Wide Web
 elabnody: site name reserved on the network
(Domain Name)
 .net: suffix determines the type of the site's activity
reserved to the network and these subsequent
commercial means as there several suffixes with
various activities such as:
www.elabnody.net 7
Gov Com Net Org Edu
Government commercial networks Organizations educational
2.1 Basic Concept
 Types of Web Sites are:
 Personal,
 Organizational
 and Commercial
www.elabnody.net 8
2.2 How the web work
www.elabnody.net 9
Request
Web Browser
ClientServer
http://
2.2 How the web work
 Web information stored in documents
called Web Pages
 Web pages are files stored in computers
called web servers
 Web servers that read web pages called
Web clients
 Browser brings web pages from the server
by requesting Request
www.elabnody.net 10
2.2 How the web work
 To get to any site on the web you must
know the address first ?! The address is: a
hyperlink destination is encoded Uniform
Resource Locator (URL )hyperlink is
divided into basic parts
 The title of the page form is
http://www.microsoft.com/office/office2010.
aspx
 Where www.microsoft.com represents the
server name, and / office / represents the
Path, and office2010.aspx represent filename
www.elabnody.net 11
2.3 How Browser display web
pages?
www.elabnody.net 12
<html>
<head>
<title>Welcome !! </title>
</head>
<body>
<p>
This is my first webpage
</p>
</body>
</html>
2.4 Web site components
 The Web site consists of:
1. Storage Space:
Which you booked to view your files
on the Internet ... As set in the hard
disk space Hard Disk on your PC to
store files and data
2. Domain Name
A name that is written in the
browser to go to the site, such as
www.elabnody.net
www.elabnody.net 13
2.5 Tools for creating Web
sites:
www.elabnody.net 14
HTML
Hypertext
Markup
Language
Editors
Share Point
Dreamweave
Flash
CSS
Cascading Style
Sheets
XML
Extensible
Markup
Language
WML
Wireless
Markup
Language
Sothink Widgets
www.elabnody.net 15
Banner Maker
www.elabnody.net 16
Animation Online
(http://www.animationonline.com/ )
Banner Maker
www.elabnody.net 17
Cool Text
(http://www.cooltext.com/ )
Banner Maker
www.elabnody.net 18
Media Maker - 3DTextMaker
(http://www.3dtextmaker.com/ )
www.elabnody.net 19
2.6 Web Design Free Tools
 Joomla (CMS)
 Word Press
www.elabnody.net 120
21www.elabnody.net
HTML 4.0

Contenu connexe

Tendances

Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 

Tendances (20)

How the Web Works
How the Web WorksHow the Web Works
How the Web Works
 
Lecture 1 intro to web designing
Lecture 1  intro to web designingLecture 1  intro to web designing
Lecture 1 intro to web designing
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
Website Introduction
Website IntroductionWebsite Introduction
Website Introduction
 
Principles of web design
Principles of web designPrinciples of web design
Principles of web design
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Presentation on World Wide Web (WWW)
Presentation on World Wide Web (WWW)Presentation on World Wide Web (WWW)
Presentation on World Wide Web (WWW)
 
World wide web An Introduction
World wide web An IntroductionWorld wide web An Introduction
World wide web An Introduction
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
World Wide Web (WWW)
World Wide Web (WWW)World Wide Web (WWW)
World Wide Web (WWW)
 
Introduction to Web Hosting.
Introduction to Web Hosting.Introduction to Web Hosting.
Introduction to Web Hosting.
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Website design with Wordpress ppt
Website design with Wordpress pptWebsite design with Wordpress ppt
Website design with Wordpress ppt
 
Web server and web-hosting
Web server and web-hostingWeb server and web-hosting
Web server and web-hosting
 
world wide web
world wide webworld wide web
world wide web
 
Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
Website
WebsiteWebsite
Website
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Web Browser
Web BrowserWeb Browser
Web Browser
 
web browser ppt
web browser pptweb browser ppt
web browser ppt
 

Similaire à Web Design (Tools)

How to Create a College Website Page Using HTML
How to Create a College Website Page Using HTMLHow to Create a College Website Page Using HTML
How to Create a College Website Page Using HTML
YahyaMemon2
 

Similaire à Web Design (Tools) (20)

Web development
Web developmentWeb development
Web development
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Web Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTREWeb Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTRE
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 
CODE IGNITER
CODE IGNITERCODE IGNITER
CODE IGNITER
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptx
 
Presentation on web designing
Presentation on web designingPresentation on web designing
Presentation on web designing
 
Web development: Why do we need it ?
Web development: Why do we need it ?Web development: Why do we need it ?
Web development: Why do we need it ?
 
​Web ​Development
 ​Web ​Development ​Web ​Development
​Web ​Development
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.
 
Web Programming Assignment
Web Programming AssignmentWeb Programming Assignment
Web Programming Assignment
 
Website creation Module Topic in Digital Marketing Syllabus
Website creation Module Topic in Digital Marketing SyllabusWebsite creation Module Topic in Digital Marketing Syllabus
Website creation Module Topic in Digital Marketing Syllabus
 
How to Create a College Website Page Using HTML
How to Create a College Website Page Using HTMLHow to Create a College Website Page Using HTML
How to Create a College Website Page Using HTML
 
Web Design Guide
Web Design Guide Web Design Guide
Web Design Guide
 
Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
 
webdevelopmentppt-2210923044639 (1).pptx
webdevelopmentppt-2210923044639 (1).pptxwebdevelopmentppt-2210923044639 (1).pptx
webdevelopmentppt-2210923044639 (1).pptx
 
webdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptxwebdevelopmentppt-210923044639 (1) (1).pptx
webdevelopmentppt-210923044639 (1) (1).pptx
 
uuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptxuuserinterfacewebdevelopmentnewoneppt.pptx
uuserinterfacewebdevelopmentnewoneppt.pptx
 

Dernier

Dernier (20)

Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.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
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 

Web Design (Tools)

  • 1. Mohamed Elabnody Web Design (Tools) http://www.Elabnody.net Elabnody@msn.com Lecture (2) 2013
  • 2.
  • 3. Outline  Basic Concept  How the web work  How browser display web pages  Web site components  Tools for creating Web sites  Web Design Free Tools www.elabnody.net 3
  • 4. Introduction  Web design encompasses many different skills and disciplines in the production and maintenance of websites.  The different areas of web design include  web graphic design;  interface design;  authoring, including standardized code and proprietary software;  user experience design;  and search engine optimization.  Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. www.elabnody.net 4
  • 5. 2.1 Basic Concept  The World Wide Web (WWW or Web) is a : graphical interface that utilizes the Internet to distribute and retrieve information  A Web site is a : collection of linked Web pages, Starts with a home page and Pages are linked together with a hyperlink, or link  A Web browser is a : specific software program required to display Web pages www.elabnody.net 5
  • 6. 2.1 Basic Concept  Access Web pages by entering its Uniform Resource Locator (URL) into the Web browser’s address bar  Search Engine is a Software programs that find Web sites and Web pages  Entertainment web sites include : music, videos, sports, games, and more www.elabnody.net 6
  • 7. 2.1 Basic Concept  URL  www.elabnody.net  WWW: Represents World Wide Web  elabnody: site name reserved on the network (Domain Name)  .net: suffix determines the type of the site's activity reserved to the network and these subsequent commercial means as there several suffixes with various activities such as: www.elabnody.net 7 Gov Com Net Org Edu Government commercial networks Organizations educational
  • 8. 2.1 Basic Concept  Types of Web Sites are:  Personal,  Organizational  and Commercial www.elabnody.net 8
  • 9. 2.2 How the web work www.elabnody.net 9 Request Web Browser ClientServer http://
  • 10. 2.2 How the web work  Web information stored in documents called Web Pages  Web pages are files stored in computers called web servers  Web servers that read web pages called Web clients  Browser brings web pages from the server by requesting Request www.elabnody.net 10
  • 11. 2.2 How the web work  To get to any site on the web you must know the address first ?! The address is: a hyperlink destination is encoded Uniform Resource Locator (URL )hyperlink is divided into basic parts  The title of the page form is http://www.microsoft.com/office/office2010. aspx  Where www.microsoft.com represents the server name, and / office / represents the Path, and office2010.aspx represent filename www.elabnody.net 11
  • 12. 2.3 How Browser display web pages? www.elabnody.net 12 <html> <head> <title>Welcome !! </title> </head> <body> <p> This is my first webpage </p> </body> </html>
  • 13. 2.4 Web site components  The Web site consists of: 1. Storage Space: Which you booked to view your files on the Internet ... As set in the hard disk space Hard Disk on your PC to store files and data 2. Domain Name A name that is written in the browser to go to the site, such as www.elabnody.net www.elabnody.net 13
  • 14. 2.5 Tools for creating Web sites: www.elabnody.net 14 HTML Hypertext Markup Language Editors Share Point Dreamweave Flash CSS Cascading Style Sheets XML Extensible Markup Language WML Wireless Markup Language
  • 16. Banner Maker www.elabnody.net 16 Animation Online (http://www.animationonline.com/ )
  • 17. Banner Maker www.elabnody.net 17 Cool Text (http://www.cooltext.com/ )
  • 18. Banner Maker www.elabnody.net 18 Media Maker - 3DTextMaker (http://www.3dtextmaker.com/ )
  • 20. 2.6 Web Design Free Tools  Joomla (CMS)  Word Press www.elabnody.net 120