SlideShare una empresa de Scribd logo
1 de 12
WEB  DESIGN Berni Durham-Jones By xIslandDesign
Introduction  	In this unit you will: Learn basic WYSIWYG web design Learn some basic HTML programming Learn how to use functions such as hyperlinks and flash text.
WYSIWYG What is a WYSIWYG editor? A WhatYouSeeIsWhatYouGet Editor is a program that requires no programming knowledge to build a webpage.  These programs are often simple and the effects are very basic however they are good for fast page creation.
What is HTML? HTML stands for Hyper Text Mark-up Language. It consists of several tags which tell the web browser what to display. HTML is a simple language which can be easily wrote in a text editor such as notepad.
Your First HTML code In Notepad Type <html><head><title>My Own Home Page </title> </head><body><H1> I am Your-Name and this is my web Page!</H1> </body></html> Then Click Save as – mypage.html
What you have just done. You have just created your first webpage – though simple the techniques can be applied to much more complicated designs. The page consists of these tags.
THE <HTML> TAG The tag <html> tells the browser that the html code is the beginning, this tag goes at the start of every webpage you make and its sibling </html> goes at the end.
THE <HEAD> TAG The <head> tag is used to hold information about the site. The information between <head> and </head> will store info such as keywords for search engines and the title bar message.
THE <BODY> TAG This tag is were all the important content is held such as the text on your page etc. This tag is important to remember because without it the webpage will not display properly.
Dreamweaver Dreamweaver is essentially a WYSIWYG editor with some key differences- it also supports coding. This makes it one of the best software packages on the market today.
Basic Use Of Dreamweaver Behaviours panel Toolbar Work area Formatting box
Task  You will now create a webpage based on the skills you have just learned. A key point to remember is : Layers are useful for ordering text

Más contenido relacionado

La actualidad más candente

Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developerSudhirVarpe1
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack DevelopmentDhilipsiva DS
 
Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer Ramy Hakam
 
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)Dat Hoang
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a proMarko Heijnen
 
Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your pluginMarko Heijnen
 
Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.
Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.
Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.Nishant Desai
 
Understanding Auto Layout
Understanding Auto LayoutUnderstanding Auto Layout
Understanding Auto LayoutHenrique Morbin
 
A Brief Introduction To Web Building Technologies
A Brief Introduction To Web Building TechnologiesA Brief Introduction To Web Building Technologies
A Brief Introduction To Web Building Technologiesfinian lau
 
Javascript
JavascriptJavascript
JavascriptIblesoft
 
Let us know more about JQuery, write less do more
Let us know more about JQuery, write less do moreLet us know more about JQuery, write less do more
Let us know more about JQuery, write less do moretgcindia1234
 
The Startup Platform Website Bootcamp
The Startup Platform Website BootcampThe Startup Platform Website Bootcamp
The Startup Platform Website BootcampMatt Report
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Best practices in pair programming
Best practices in pair programmingBest practices in pair programming
Best practices in pair programmingLucas Aquiles
 
Women Who Mule - Workshop series #2: Ghost
Women Who Mule - Workshop series #2: GhostWomen Who Mule - Workshop series #2: Ghost
Women Who Mule - Workshop series #2: GhostAlexandra N. Martinez
 
Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Ivy Rueb
 

La actualidad más candente (20)

Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack Development
 
Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer
 
Code igniter
Code igniterCode igniter
Code igniter
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
 
Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
 
Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.
Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.
Ultimate Guide on PSD to Magento Development | Pixlogix Infotech Pvt. Ltd.
 
Presentation
PresentationPresentation
Presentation
 
Understanding Auto Layout
Understanding Auto LayoutUnderstanding Auto Layout
Understanding Auto Layout
 
A Brief Introduction To Web Building Technologies
A Brief Introduction To Web Building TechnologiesA Brief Introduction To Web Building Technologies
A Brief Introduction To Web Building Technologies
 
Javascript
JavascriptJavascript
Javascript
 
Let us know more about JQuery, write less do more
Let us know more about JQuery, write less do moreLet us know more about JQuery, write less do more
Let us know more about JQuery, write less do more
 
The Startup Platform Website Bootcamp
The Startup Platform Website BootcampThe Startup Platform Website Bootcamp
The Startup Platform Website Bootcamp
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Best practices in pair programming
Best practices in pair programmingBest practices in pair programming
Best practices in pair programming
 
Women Who Mule - Workshop series #2: Ghost
Women Who Mule - Workshop series #2: GhostWomen Who Mule - Workshop series #2: Ghost
Women Who Mule - Workshop series #2: Ghost
 
Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28Frontend Crash Coarse 09/28
Frontend Crash Coarse 09/28
 

Destacado

La violencia de género
La violencia de géneroLa violencia de género
La violencia de génerowendysmar
 
August 8 reporting day1
August 8  reporting day1August 8  reporting day1
August 8 reporting day1Live Angga
 
Bracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social MediaBracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social MediaMohamed Mahdy
 
Tugas praktikukm pemrograman c++
Tugas praktikukm  pemrograman c++Tugas praktikukm  pemrograman c++
Tugas praktikukm pemrograman c++Dendi Riadi
 
Empowerment technology
Empowerment technologyEmpowerment technology
Empowerment technologyGabby Quintero
 
TinyMCE: WYSIWYG editor 2010-12-08
TinyMCE: WYSIWYG editor 2010-12-08TinyMCE: WYSIWYG editor 2010-12-08
TinyMCE: WYSIWYG editor 2010-12-08Andy Gelme
 
Introduction of The Dream Weavers
Introduction of The Dream WeaversIntroduction of The Dream Weavers
Introduction of The Dream WeaversThe Dream Weavers
 
Contextualized online search and research skill
Contextualized online search and research skillContextualized online search and research skill
Contextualized online search and research skillAngela Giva
 
Normalization
NormalizationNormalization
NormalizationJTHSICT
 
Report Normalization documents
Report Normalization documentsReport Normalization documents
Report Normalization documentsWakil Kumar
 
Designing and building for the editor experience
Designing and building for the editor experienceDesigning and building for the editor experience
Designing and building for the editor experienceAndreas Sahle
 
Introduction to Dreamweaver
Introduction to DreamweaverIntroduction to Dreamweaver
Introduction to DreamweaverSarah Bombich
 
Penerbitan video korporat
Penerbitan video korporatPenerbitan video korporat
Penerbitan video korporatHazrul Halim
 

Destacado (20)

La violencia de género
La violencia de géneroLa violencia de género
La violencia de género
 
WYSIWYG Is a Lie
WYSIWYG Is a LieWYSIWYG Is a Lie
WYSIWYG Is a Lie
 
August 8 reporting day1
August 8  reporting day1August 8  reporting day1
August 8 reporting day1
 
Bracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social MediaBracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social Media
 
Tugas praktikukm pemrograman c++
Tugas praktikukm  pemrograman c++Tugas praktikukm  pemrograman c++
Tugas praktikukm pemrograman c++
 
Empowerment technology
Empowerment technologyEmpowerment technology
Empowerment technology
 
171dreamweaver
171dreamweaver171dreamweaver
171dreamweaver
 
Dreamweawer
DreamweawerDreamweawer
Dreamweawer
 
TinyMCE: WYSIWYG editor 2010-12-08
TinyMCE: WYSIWYG editor 2010-12-08TinyMCE: WYSIWYG editor 2010-12-08
TinyMCE: WYSIWYG editor 2010-12-08
 
Introduction of The Dream Weavers
Introduction of The Dream WeaversIntroduction of The Dream Weavers
Introduction of The Dream Weavers
 
Normalization in DBMS
Normalization in DBMSNormalization in DBMS
Normalization in DBMS
 
Contextualized online search and research skill
Contextualized online search and research skillContextualized online search and research skill
Contextualized online search and research skill
 
Normalization
NormalizationNormalization
Normalization
 
Report Normalization documents
Report Normalization documentsReport Normalization documents
Report Normalization documents
 
Foxpro
FoxproFoxpro
Foxpro
 
Designing and building for the editor experience
Designing and building for the editor experienceDesigning and building for the editor experience
Designing and building for the editor experience
 
Normalization
NormalizationNormalization
Normalization
 
Wysiwyg
WysiwygWysiwyg
Wysiwyg
 
Introduction to Dreamweaver
Introduction to DreamweaverIntroduction to Dreamweaver
Introduction to Dreamweaver
 
Penerbitan video korporat
Penerbitan video korporatPenerbitan video korporat
Penerbitan video korporat
 

Similar a Web designp pt (20)

Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html basics
Html basicsHtml basics
Html basics
 
Creating a page in HTML
Creating a page in HTMLCreating a page in HTML
Creating a page in HTML
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow Standards
 
HTML
HTMLHTML
HTML
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Let me design
Let me designLet me design
Let me design
 
HTML Basics for SEO
HTML Basics for SEOHTML Basics for SEO
HTML Basics for SEO
 
Web design in 7 days
Web design in 7 daysWeb design in 7 days
Web design in 7 days
 
Web design in 7 days by waqar
Web design in 7 days by waqarWeb design in 7 days by waqar
Web design in 7 days by waqar
 
Importance of HTML
Importance of HTMLImportance of HTML
Importance of HTML
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
 
Html
HtmlHtml
Html
 

Más de Bizzyb09

Unit 4 Presentation
Unit 4 PresentationUnit 4 Presentation
Unit 4 PresentationBizzyb09
 
Power point basics
Power point basicsPower point basics
Power point basicsBizzyb09
 
T:\Faculty 2\Teacher Training\How To Reference Correctly
T:\Faculty 2\Teacher Training\How To Reference CorrectlyT:\Faculty 2\Teacher Training\How To Reference Correctly
T:\Faculty 2\Teacher Training\How To Reference CorrectlyBizzyb09
 
Referencing
ReferencingReferencing
ReferencingBizzyb09
 
Excel Presentation
Excel PresentationExcel Presentation
Excel PresentationBizzyb09
 
Excel Presentation
Excel PresentationExcel Presentation
Excel PresentationBizzyb09
 
Gcse Law Specification 2010
Gcse Law Specification 2010Gcse Law Specification 2010
Gcse Law Specification 2010Bizzyb09
 
Powerpoint1 For Gcse
Powerpoint1 For GcsePowerpoint1 For Gcse
Powerpoint1 For GcseBizzyb09
 
Powerpoint2 For Gcse
Powerpoint2 For GcsePowerpoint2 For Gcse
Powerpoint2 For GcseBizzyb09
 
Sales Promotion
Sales PromotionSales Promotion
Sales PromotionBizzyb09
 
Ao1b Customer Service
Ao1b Customer ServiceAo1b Customer Service
Ao1b Customer ServiceBizzyb09
 
Ao1b Consumer Complaints
Ao1b Consumer ComplaintsAo1b Consumer Complaints
Ao1b Consumer ComplaintsBizzyb09
 
Gcse Prejudice 1
Gcse Prejudice 1Gcse Prejudice 1
Gcse Prejudice 1Bizzyb09
 

Más de Bizzyb09 (13)

Unit 4 Presentation
Unit 4 PresentationUnit 4 Presentation
Unit 4 Presentation
 
Power point basics
Power point basicsPower point basics
Power point basics
 
T:\Faculty 2\Teacher Training\How To Reference Correctly
T:\Faculty 2\Teacher Training\How To Reference CorrectlyT:\Faculty 2\Teacher Training\How To Reference Correctly
T:\Faculty 2\Teacher Training\How To Reference Correctly
 
Referencing
ReferencingReferencing
Referencing
 
Excel Presentation
Excel PresentationExcel Presentation
Excel Presentation
 
Excel Presentation
Excel PresentationExcel Presentation
Excel Presentation
 
Gcse Law Specification 2010
Gcse Law Specification 2010Gcse Law Specification 2010
Gcse Law Specification 2010
 
Powerpoint1 For Gcse
Powerpoint1 For GcsePowerpoint1 For Gcse
Powerpoint1 For Gcse
 
Powerpoint2 For Gcse
Powerpoint2 For GcsePowerpoint2 For Gcse
Powerpoint2 For Gcse
 
Sales Promotion
Sales PromotionSales Promotion
Sales Promotion
 
Ao1b Customer Service
Ao1b Customer ServiceAo1b Customer Service
Ao1b Customer Service
 
Ao1b Consumer Complaints
Ao1b Consumer ComplaintsAo1b Consumer Complaints
Ao1b Consumer Complaints
 
Gcse Prejudice 1
Gcse Prejudice 1Gcse Prejudice 1
Gcse Prejudice 1
 

Web designp pt

  • 1. WEB DESIGN Berni Durham-Jones By xIslandDesign
  • 2. Introduction In this unit you will: Learn basic WYSIWYG web design Learn some basic HTML programming Learn how to use functions such as hyperlinks and flash text.
  • 3. WYSIWYG What is a WYSIWYG editor? A WhatYouSeeIsWhatYouGet Editor is a program that requires no programming knowledge to build a webpage. These programs are often simple and the effects are very basic however they are good for fast page creation.
  • 4. What is HTML? HTML stands for Hyper Text Mark-up Language. It consists of several tags which tell the web browser what to display. HTML is a simple language which can be easily wrote in a text editor such as notepad.
  • 5. Your First HTML code In Notepad Type <html><head><title>My Own Home Page </title> </head><body><H1> I am Your-Name and this is my web Page!</H1> </body></html> Then Click Save as – mypage.html
  • 6. What you have just done. You have just created your first webpage – though simple the techniques can be applied to much more complicated designs. The page consists of these tags.
  • 7. THE <HTML> TAG The tag <html> tells the browser that the html code is the beginning, this tag goes at the start of every webpage you make and its sibling </html> goes at the end.
  • 8. THE <HEAD> TAG The <head> tag is used to hold information about the site. The information between <head> and </head> will store info such as keywords for search engines and the title bar message.
  • 9. THE <BODY> TAG This tag is were all the important content is held such as the text on your page etc. This tag is important to remember because without it the webpage will not display properly.
  • 10. Dreamweaver Dreamweaver is essentially a WYSIWYG editor with some key differences- it also supports coding. This makes it one of the best software packages on the market today.
  • 11. Basic Use Of Dreamweaver Behaviours panel Toolbar Work area Formatting box
  • 12. Task You will now create a webpage based on the skills you have just learned. A key point to remember is : Layers are useful for ordering text