SlideShare una empresa de Scribd logo
1 de 10
Unit 2: Web Design
Html is the language we use to create websites.
The instructions in html are made up of elements
and elements are made up of tags.
Coding in html
<html> is an opening tag which appears at the
beginning of the code and </html appears at
the end. Collectively this is know as an
element.
Example Elements

<Head> </head>

<title> </title>

<body </body>

<h1> </h1>
Elements
There are two types of elements-

Container elements (which are elements that
have opening and closing tags. The tags are
the same except the closing tag has a /.

Empty elements are tags with no closing tag.
Example code
Copy this into notepad-
<html>
<head>
<title> Assumption </title>
</head>
<body> <h1> hellooooooooooo </h1>
</body>
</html>
Example code
Now add this into notepad-
<html>
<head>
<title> Assumption </title>
</head>
<body>
<h1> hellooooooooooo </h1>
<h2> hello again </h2>
</body>
</html>
Example code
Now add this into notepad-
<html>
<head>
<title> Assumption </title>
</head>
<body>
<h1ALIGN = LEFT> hellooooooooooo </h1>
<h2 ALIGN = RIGHT> hello again </h2>
</body>
</html>
Example code
Now add this into notepad-
<html>
<head>
<title> Assumption </title>
</head> <body>
<H2> <TT> Revolution</TT></H2>
Rotation and revolution occur <I> simultaenously </I>. The earth
takes <B> 365 </B> days to complete.This is called a <U> Year
</U>
</body>
</html>
Example code
Now add this into notepad-
<html>
<head>
<title> Assumption </title>
</head> <body>
<H2> <TT> Revolution</TT></H2>
Rotation and revolution occur <I> simultaenously </I>. The earth
takes <B> 365 </B> days to complete.This is called a <U> Year
</U>
</body>
</html>
Continue practicing...

Go to page 30 and go through each example
until page 34.

Find an image on the internet that you will use
as a background image for a webpage.

Copy example on page 34.

Más contenido relacionado

La actualidad más candente

YL html intro1
YL html intro1YL html intro1
YL html intro1dilom1986
 
HTML Basics 1 workshop
HTML Basics 1 workshopHTML Basics 1 workshop
HTML Basics 1 workshopJohn Allan
 
Untitled presentation (8) (1)
Untitled presentation (8) (1)Untitled presentation (8) (1)
Untitled presentation (8) (1)harishharsha16
 
Html (hyper text markup language)
Html (hyper text markup language)Html (hyper text markup language)
Html (hyper text markup language)Denni Domingo
 
Dreamweaver template
Dreamweaver templateDreamweaver template
Dreamweaver templateEvan Hughes
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)actanimation
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha
 
Formatting in html
Formatting in htmlFormatting in html
Formatting in htmlbuhiterita
 
Htmlnotes 150323102005-conversion-gate01
Htmlnotes 150323102005-conversion-gate01Htmlnotes 150323102005-conversion-gate01
Htmlnotes 150323102005-conversion-gate01Niraj Bharambe
 
Introduction to html class-1
Introduction to html class-1Introduction to html class-1
Introduction to html class-1NoumanBalochHere
 

La actualidad más candente (18)

HTML
HTMLHTML
HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
A109 base code html
A109 base code   htmlA109 base code   html
A109 base code html
 
YL html intro1
YL html intro1YL html intro1
YL html intro1
 
HTML Basics 1 workshop
HTML Basics 1 workshopHTML Basics 1 workshop
HTML Basics 1 workshop
 
html
htmlhtml
html
 
Untitled presentation (8) (1)
Untitled presentation (8) (1)Untitled presentation (8) (1)
Untitled presentation (8) (1)
 
Html (hyper text markup language)
Html (hyper text markup language)Html (hyper text markup language)
Html (hyper text markup language)
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Dreamweaver template
Dreamweaver templateDreamweaver template
Dreamweaver template
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Formatting in html
Formatting in htmlFormatting in html
Formatting in html
 
Html presantation
Html presantationHtml presantation
Html presantation
 
Htmlnotes 150323102005-conversion-gate01
Htmlnotes 150323102005-conversion-gate01Htmlnotes 150323102005-conversion-gate01
Htmlnotes 150323102005-conversion-gate01
 
Introduction to html class-1
Introduction to html class-1Introduction to html class-1
Introduction to html class-1
 

Similar a Web design

Similar a Web design (20)

An introduction to html
An introduction to htmlAn introduction to html
An introduction to html
 
IT Unit III.pptx
IT Unit III.pptxIT Unit III.pptx
IT Unit III.pptx
 
Hyper text markup Language
Hyper text markup LanguageHyper text markup Language
Hyper text markup Language
 
Title, heading and paragraph tags
Title, heading and paragraph tagsTitle, heading and paragraph tags
Title, heading and paragraph tags
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
Lesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and ParagraphsLesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and Paragraphs
 
Html example
Html exampleHtml example
Html example
 
HTML guide for beginners
HTML guide for beginnersHTML guide for beginners
HTML guide for beginners
 
html.pdf
html.pdfhtml.pdf
html.pdf
 
Lesson plan htmltextformattingtag
Lesson plan htmltextformattingtagLesson plan htmltextformattingtag
Lesson plan htmltextformattingtag
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdf
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)
 
TagsL1.pptx
TagsL1.pptxTagsL1.pptx
TagsL1.pptx
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 

Más de Max Friel

Más de Max Friel (20)

Assum 4
Assum 4Assum 4
Assum 4
 
Assum 3
Assum 3Assum 3
Assum 3
 
Tourism
TourismTourism
Tourism
 
Practice programs
Practice programsPractice programs
Practice programs
 
Project 1
Project 1Project 1
Project 1
 
Practice and debugging
Practice and debuggingPractice and debugging
Practice and debugging
 
Debugging
DebuggingDebugging
Debugging
 
Strings
StringsStrings
Strings
 
Loops
LoopsLoops
Loops
 
Loops
LoopsLoops
Loops
 
If conditions
If conditionsIf conditions
If conditions
 
Keywords used in javascript
Keywords used in javascriptKeywords used in javascript
Keywords used in javascript
 
Variables
VariablesVariables
Variables
 
Basics
BasicsBasics
Basics
 
Developing html skills 1
Developing html skills 1Developing html skills 1
Developing html skills 1
 
Matching game
Matching gameMatching game
Matching game
 
activity flowcharts
activity flowchartsactivity flowcharts
activity flowcharts
 
Lesson one
Lesson oneLesson one
Lesson one
 
Summer course
Summer courseSummer course
Summer course
 
Law
LawLaw
Law
 

Último

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 

Último (20)

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 

Web design

  • 1. Unit 2: Web Design Html is the language we use to create websites. The instructions in html are made up of elements and elements are made up of tags.
  • 2. Coding in html <html> is an opening tag which appears at the beginning of the code and </html appears at the end. Collectively this is know as an element.
  • 3. Example Elements  <Head> </head>  <title> </title>  <body </body>  <h1> </h1>
  • 4. Elements There are two types of elements-  Container elements (which are elements that have opening and closing tags. The tags are the same except the closing tag has a /.  Empty elements are tags with no closing tag.
  • 5. Example code Copy this into notepad- <html> <head> <title> Assumption </title> </head> <body> <h1> hellooooooooooo </h1> </body> </html>
  • 6. Example code Now add this into notepad- <html> <head> <title> Assumption </title> </head> <body> <h1> hellooooooooooo </h1> <h2> hello again </h2> </body> </html>
  • 7. Example code Now add this into notepad- <html> <head> <title> Assumption </title> </head> <body> <h1ALIGN = LEFT> hellooooooooooo </h1> <h2 ALIGN = RIGHT> hello again </h2> </body> </html>
  • 8. Example code Now add this into notepad- <html> <head> <title> Assumption </title> </head> <body> <H2> <TT> Revolution</TT></H2> Rotation and revolution occur <I> simultaenously </I>. The earth takes <B> 365 </B> days to complete.This is called a <U> Year </U> </body> </html>
  • 9. Example code Now add this into notepad- <html> <head> <title> Assumption </title> </head> <body> <H2> <TT> Revolution</TT></H2> Rotation and revolution occur <I> simultaenously </I>. The earth takes <B> 365 </B> days to complete.This is called a <U> Year </U> </body> </html>
  • 10. Continue practicing...  Go to page 30 and go through each example until page 34.  Find an image on the internet that you will use as a background image for a webpage.  Copy example on page 34.