SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Creating your first Web page
Starter Activity: Mark Zuckerburg
Find out who Mark Zuckerberg is, what he is
currently worth and how he made his money.
Creating your first Web page
Lesson
Objectives
Creating your first Web page
In this lesson you will learn about the essentials of html
and how to view the html code of websites. You will
create and preview your own first web page and start to
develop a homepage for the zoo.
 Understand what html is and what is does
 Understand how HTML documents are structured
 Understand the difference between tags and
elements
 Be able to create a simple HTML document
What is HTML?
•HTML stands for HyperText Markup Language.
The code uses “tags” that tell the web browser how
to display text and images on a web page.
•For example, to display ‘Cardinal Allen’ as a
heading on a web page you would need to write
the code: <h1>Cardinal Allen </h1>
•The red parts are known as HTML tags. In case
they tell the web browser to display the text as a
heading
Creating your first Web page
Task 1: Viewing the Code!
Even though HTML code is hidden you can still view
it.
1.Open Internet Explorer, Chrome or Firefox
2.Enter the address for a website
3.Click ‘View’ in the top toolbar and then click on
source. In a matter of seconds, you will see the
hidden code of that page.
How many lines of code has your webpage been
created from?
Creating your first Web page
HTML Essentials
1.HTML can be written in Notepad
2.HTML is not case sensitive
3.HTML tags are always surrounded by < and >
4.Words between < and > are called elements
5.Tags typically occur in 'begin-end' pairs. <tag> ……
</tag>
6.HTML documents are divided into two main
parts: the head and the body
Creating your first Web page
How are HTML documents Structured
HTML documents must contain the tags: <html>,
<head>, <title> and <body>.
Creating your first Web page
Task 2: Creating your first Web page
Step 1. Open up the text editor Notepad
Step 2. Enter the following:
<html>
<head>
<title> This is my first web page</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>
Step 3. Save the document as: firstpage.html in your ‘Coding
Websites’ folder.
Creating your first Web page
Task 3: Preview your first Web page
To preview your new document, open a web
browser. On the tool bar (located up near the top of
the browser):
1.Select File menu.
2.Select Open Page
3.A dialogue box appears. Select Choose File
4.Go to where you saved your file, click on it.
5.Click Open
Creating your first Web page
Your web page should look like this in your
browser.
You have successfully created your first web page.
Creating your first Web page
Task 4: Zoo Homepage
1.Using your skills and knowledge create a
homepage for the zoo website. You need to include
a title and some introductory text.
2.Save the document as: zoohomepage.html in
your ‘Coding Websites’ folder and then preview
your work.
Creating your first Web page
Plenary: Key Points
Write down five key points which summarise
today’s learning.
Creating your first Web page
Keywords
Objectives
 Title
 HTML
 Tag
 Source
 Elements
 Head
 Body
 Web browser




Creating your first Web page
 Understand what html is and what is does
 Understand how HTML documents are structured
 Understand the difference between tags and elements
 Be able to create a simple HTML document

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Html
HtmlHtml
Html
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
Html basics
Html basicsHtml basics
Html basics
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
Html
HtmlHtml
Html
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designing
 
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
CSS
CSSCSS
CSS
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 

Andere mochten auch

Hyperlinks and Evaluation
Hyperlinks and EvaluationHyperlinks and Evaluation
Hyperlinks and Evaluationcachs_computing
 
AD_International_Surface Treatment and Manufacturing_DEF
AD_International_Surface Treatment and Manufacturing_DEFAD_International_Surface Treatment and Manufacturing_DEF
AD_International_Surface Treatment and Manufacturing_DEFRoland Schellen
 
Introdução à Telefonia IP
Introdução à Telefonia IPIntrodução à Telefonia IP
Introdução à Telefonia IPIP10
 
Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?
Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?
Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?Creuna
 
What we carry from this planet arise roby
What we carry from this planet   arise robyWhat we carry from this planet   arise roby
What we carry from this planet arise robyArise Roby
 
Estruturas externa-e-interna de "Frei Luís de Sousa"
Estruturas externa-e-interna de "Frei Luís de Sousa"Estruturas externa-e-interna de "Frei Luís de Sousa"
Estruturas externa-e-interna de "Frei Luís de Sousa"Maria Góis
 
Metodo AIDA - Definición y Apliciacion
Metodo AIDA - Definición y ApliciacionMetodo AIDA - Definición y Apliciacion
Metodo AIDA - Definición y ApliciacionTodo Mkt
 

Andere mochten auch (13)

Päihdestrategia 2013
Päihdestrategia 2013Päihdestrategia 2013
Päihdestrategia 2013
 
Hyperlinks and Evaluation
Hyperlinks and EvaluationHyperlinks and Evaluation
Hyperlinks and Evaluation
 
Algorithms
AlgorithmsAlgorithms
Algorithms
 
Andalucía jornalera
Andalucía jornalera Andalucía jornalera
Andalucía jornalera
 
TPS DAS K9-SAR_redact
TPS DAS K9-SAR_redactTPS DAS K9-SAR_redact
TPS DAS K9-SAR_redact
 
AD_International_Surface Treatment and Manufacturing_DEF
AD_International_Surface Treatment and Manufacturing_DEFAD_International_Surface Treatment and Manufacturing_DEF
AD_International_Surface Treatment and Manufacturing_DEF
 
Introdução à Telefonia IP
Introdução à Telefonia IPIntrodução à Telefonia IP
Introdução à Telefonia IP
 
Elastix 1 o1 introduccion
Elastix 1 o1   introduccionElastix 1 o1   introduccion
Elastix 1 o1 introduccion
 
Elastix lab ece-book-esp(2)
Elastix  lab ece-book-esp(2)Elastix  lab ece-book-esp(2)
Elastix lab ece-book-esp(2)
 
Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?
Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?
Frokostseminar 26 mai: Hvordan temme det store innholdsdyret?
 
What we carry from this planet arise roby
What we carry from this planet   arise robyWhat we carry from this planet   arise roby
What we carry from this planet arise roby
 
Estruturas externa-e-interna de "Frei Luís de Sousa"
Estruturas externa-e-interna de "Frei Luís de Sousa"Estruturas externa-e-interna de "Frei Luís de Sousa"
Estruturas externa-e-interna de "Frei Luís de Sousa"
 
Metodo AIDA - Definición y Apliciacion
Metodo AIDA - Definición y ApliciacionMetodo AIDA - Definición y Apliciacion
Metodo AIDA - Definición y Apliciacion
 

Ähnlich wie Creating your first web page

Creating your first web page
Creating your first web pageCreating your first web page
Creating your first web pagecachs_computing
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some AttributesHIFZUR RAHMAN
 
Html introduction
Html introductionHtml introduction
Html introductionRanjithaM32
 
How to Create a Simple Webpage Using Notepad.pptx
How to Create a Simple Webpage Using Notepad.pptxHow to Create a Simple Webpage Using Notepad.pptx
How to Create a Simple Webpage Using Notepad.pptxminhanaa21
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Erin M. Kidwell
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfHumphrey Humphrey
 
Html beginner
Html beginnerHtml beginner
Html beginnerwihrbt
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1Juvywen
 
CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptHamzaAhmad861123
 
Hyper Text Marup Language
Hyper Text Marup LanguageHyper Text Marup Language
Hyper Text Marup LanguageAniketPujari
 
Html beginners tutorial
Html beginners tutorialHtml beginners tutorial
Html beginners tutorialnikhilsh66131
 

Ähnlich wie Creating your first web page (20)

Creating your first web page
Creating your first web pageCreating your first web page
Creating your first web page
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some Attributes
 
Html basic
Html basicHtml basic
Html basic
 
Web design 101
Web design 101Web design 101
Web design 101
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
Html introduction
Html introductionHtml introduction
Html introduction
 
How to Create a Simple Webpage Using Notepad.pptx
How to Create a Simple Webpage Using Notepad.pptxHow to Create a Simple Webpage Using Notepad.pptx
How to Create a Simple Webpage Using Notepad.pptx
 
Unit 2.2 Part 1
Unit 2.2 Part 1Unit 2.2 Part 1
Unit 2.2 Part 1
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Html beginner
Html beginnerHtml beginner
Html beginner
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
 
CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.ppt
 
Hyper Text Marup Language
Hyper Text Marup LanguageHyper Text Marup Language
Hyper Text Marup Language
 
Html beginners tutorial
Html beginners tutorialHtml beginners tutorial
Html beginners tutorial
 
Html
HtmlHtml
Html
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Let me design
Let me designLet me design
Let me design
 

Mehr von cachs_computing (20)

It and computing assessment
It and computing assessmentIt and computing assessment
It and computing assessment
 
Forest archery game
Forest archery gameForest archery game
Forest archery game
 
Scratching the surface
Scratching the surfaceScratching the surface
Scratching the surface
 
Introduction
IntroductionIntroduction
Introduction
 
Desktop publishing
Desktop publishingDesktop publishing
Desktop publishing
 
Spreadsheets
SpreadsheetsSpreadsheets
Spreadsheets
 
Internet
InternetInternet
Internet
 
Getting technical introduction
Getting technical introductionGetting technical introduction
Getting technical introduction
 
It and computing assessment
It and computing assessmentIt and computing assessment
It and computing assessment
 
Introduction
IntroductionIntroduction
Introduction
 
Word processing 2
Word processing 2Word processing 2
Word processing 2
 
Word processing 1
Word processing 1Word processing 1
Word processing 1
 
Desktop publishing
Desktop publishingDesktop publishing
Desktop publishing
 
Spreadsheets
SpreadsheetsSpreadsheets
Spreadsheets
 
Introduction functional skills
Introduction functional skillsIntroduction functional skills
Introduction functional skills
 
Internet
InternetInternet
Internet
 
Search engines
Search enginesSearch engines
Search engines
 
Fetch execute cycle
Fetch execute cycleFetch execute cycle
Fetch execute cycle
 
Sounds and images
Sounds and imagesSounds and images
Sounds and images
 
Binary
BinaryBinary
Binary
 

Kürzlich hochgeladen

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
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
 
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
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
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
 
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
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
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
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
🐬 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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
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
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
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
 
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
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 

Kürzlich hochgeladen (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
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
 
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
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
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
 
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
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
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
 
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
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 

Creating your first web page

  • 2. Starter Activity: Mark Zuckerburg Find out who Mark Zuckerberg is, what he is currently worth and how he made his money. Creating your first Web page
  • 3. Lesson Objectives Creating your first Web page In this lesson you will learn about the essentials of html and how to view the html code of websites. You will create and preview your own first web page and start to develop a homepage for the zoo.  Understand what html is and what is does  Understand how HTML documents are structured  Understand the difference between tags and elements  Be able to create a simple HTML document
  • 4. What is HTML? •HTML stands for HyperText Markup Language. The code uses “tags” that tell the web browser how to display text and images on a web page. •For example, to display ‘Cardinal Allen’ as a heading on a web page you would need to write the code: <h1>Cardinal Allen </h1> •The red parts are known as HTML tags. In case they tell the web browser to display the text as a heading Creating your first Web page
  • 5. Task 1: Viewing the Code! Even though HTML code is hidden you can still view it. 1.Open Internet Explorer, Chrome or Firefox 2.Enter the address for a website 3.Click ‘View’ in the top toolbar and then click on source. In a matter of seconds, you will see the hidden code of that page. How many lines of code has your webpage been created from? Creating your first Web page
  • 6. HTML Essentials 1.HTML can be written in Notepad 2.HTML is not case sensitive 3.HTML tags are always surrounded by < and > 4.Words between < and > are called elements 5.Tags typically occur in 'begin-end' pairs. <tag> …… </tag> 6.HTML documents are divided into two main parts: the head and the body Creating your first Web page
  • 7. How are HTML documents Structured HTML documents must contain the tags: <html>, <head>, <title> and <body>. Creating your first Web page
  • 8. Task 2: Creating your first Web page Step 1. Open up the text editor Notepad Step 2. Enter the following: <html> <head> <title> This is my first web page</title> </head> <body> Hello world. This is my first web page. There's more to come. </body> </html> Step 3. Save the document as: firstpage.html in your ‘Coding Websites’ folder. Creating your first Web page
  • 9. Task 3: Preview your first Web page To preview your new document, open a web browser. On the tool bar (located up near the top of the browser): 1.Select File menu. 2.Select Open Page 3.A dialogue box appears. Select Choose File 4.Go to where you saved your file, click on it. 5.Click Open Creating your first Web page
  • 10. Your web page should look like this in your browser. You have successfully created your first web page. Creating your first Web page
  • 11. Task 4: Zoo Homepage 1.Using your skills and knowledge create a homepage for the zoo website. You need to include a title and some introductory text. 2.Save the document as: zoohomepage.html in your ‘Coding Websites’ folder and then preview your work. Creating your first Web page
  • 12. Plenary: Key Points Write down five key points which summarise today’s learning. Creating your first Web page
  • 13. Keywords Objectives  Title  HTML  Tag  Source  Elements  Head  Body  Web browser     Creating your first Web page  Understand what html is and what is does  Understand how HTML documents are structured  Understand the difference between tags and elements  Be able to create a simple HTML document