SlideShare a Scribd company logo
1 of 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
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.
Lesson
Objectives
 Understand what html is and what is does
 Understand how HTML documents are structured
 Understand the difference between tags and
elements
Creating your first Web page
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
 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
Objectives
 Title
 HTML
 Tag
 Source
 Elements
 Head
 Body
 Web browser




Creating your first Web page

More Related Content

What's hot

What's hot (20)

Html beginners tutorial
Html beginners tutorialHtml beginners tutorial
Html beginners tutorial
 
Teaching Web Frontend Technologies To A Toddler
Teaching Web Frontend Technologies To A ToddlerTeaching Web Frontend Technologies To A Toddler
Teaching Web Frontend Technologies To A Toddler
 
Html
HtmlHtml
Html
 
Developing a Shutterfly Website
Developing a Shutterfly WebsiteDeveloping a Shutterfly Website
Developing a Shutterfly Website
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
Web technologies
Web technologiesWeb technologies
Web technologies
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
Godaddy Blog Setup
Godaddy Blog SetupGodaddy Blog Setup
Godaddy Blog Setup
 
Html.ppt
Html.pptHtml.ppt
Html.ppt
 
Learn html through programs
Learn html through programsLearn html through programs
Learn html through programs
 
Html
HtmlHtml
Html
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For Beginners
 
Social Bookmarking with Del.icio.us
Social Bookmarking with Del.icio.usSocial Bookmarking with Del.icio.us
Social Bookmarking with Del.icio.us
 
Shareist
ShareistShareist
Shareist
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 
Secrets of the Gutenberg Editor
Secrets of the Gutenberg EditorSecrets of the Gutenberg Editor
Secrets of the Gutenberg Editor
 
Tabs using j query
Tabs using j queryTabs using j query
Tabs using j query
 
How To Become A Web Page Master Builder
How To Become A Web Page Master BuilderHow To Become A Web Page Master Builder
How To Become A Web Page Master Builder
 
Week 5 Lecture
Week 5 LectureWeek 5 Lecture
Week 5 Lecture
 

Viewers also liked

Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)
Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)
Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)Michał Molski
 
Presentaciones capítulo 3 parte4
Presentaciones capítulo 3 parte4Presentaciones capítulo 3 parte4
Presentaciones capítulo 3 parte4Oscar Martinez
 
Rock music
Rock musicRock music
Rock musicmjroman2
 
Travelling to ny
Travelling to nyTravelling to ny
Travelling to nymjroman2
 
Wyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein Sclerosis
Wyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein SclerosisWyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein Sclerosis
Wyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein SclerosisMichał Molski
 
Reflection of Team Project
Reflection of Team ProjectReflection of Team Project
Reflection of Team Projectalfred lopez
 
Zeety ERPNext - manual de instalación (centos 7)
Zeety   ERPNext - manual de instalación (centos 7)Zeety   ERPNext - manual de instalación (centos 7)
Zeety ERPNext - manual de instalación (centos 7)Paulo Coronado
 
Reaproveitamento de código com Xamarin e MVVM Cross
Reaproveitamento de código com Xamarin e MVVM CrossReaproveitamento de código com Xamarin e MVVM Cross
Reaproveitamento de código com Xamarin e MVVM CrossRicardo Dorta
 
Int. à Logica de Programação
Int. à Logica de ProgramaçãoInt. à Logica de Programação
Int. à Logica de Programaçãoamansilha
 
Introduçãso a linguagem c
Introduçãso a linguagem cIntroduçãso a linguagem c
Introduçãso a linguagem csergiocrespo
 
Apostila teoria anatomia_e_ fisiologia
Apostila teoria anatomia_e_ fisiologiaApostila teoria anatomia_e_ fisiologia
Apostila teoria anatomia_e_ fisiologiaFabiana Costa
 
Insuficiência Venosa - Saúde do Adulto
Insuficiência Venosa - Saúde do AdultoInsuficiência Venosa - Saúde do Adulto
Insuficiência Venosa - Saúde do AdultoEnfº Ícaro Araújo
 

Viewers also liked (20)

Rochola 2013
Rochola   2013Rochola   2013
Rochola 2013
 
Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)
Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)
Usuwanie żylaków parą wodną - Steam Vein Sclerosis (SVS)
 
Presentaciones capítulo 3 parte4
Presentaciones capítulo 3 parte4Presentaciones capítulo 3 parte4
Presentaciones capítulo 3 parte4
 
Palestra para pais
Palestra para paisPalestra para pais
Palestra para pais
 
Rock music
Rock musicRock music
Rock music
 
Travelling to ny
Travelling to nyTravelling to ny
Travelling to ny
 
Wyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein Sclerosis
Wyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein SclerosisWyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein Sclerosis
Wyniki leczenia żylaków parą wodną metodą ablacji SVS - Steam Vein Sclerosis
 
Frases
FrasesFrases
Frases
 
Seminario palavra expositiva
Seminario palavra expositivaSeminario palavra expositiva
Seminario palavra expositiva
 
Zimbra
ZimbraZimbra
Zimbra
 
Reflection of Team Project
Reflection of Team ProjectReflection of Team Project
Reflection of Team Project
 
Zeety ERPNext - manual de instalación (centos 7)
Zeety   ERPNext - manual de instalación (centos 7)Zeety   ERPNext - manual de instalación (centos 7)
Zeety ERPNext - manual de instalación (centos 7)
 
Progeria.2
Progeria.2Progeria.2
Progeria.2
 
Protocolo 1
Protocolo 1Protocolo 1
Protocolo 1
 
Reaproveitamento de código com Xamarin e MVVM Cross
Reaproveitamento de código com Xamarin e MVVM CrossReaproveitamento de código com Xamarin e MVVM Cross
Reaproveitamento de código com Xamarin e MVVM Cross
 
Hablemos de VHI/SIDA
Hablemos de VHI/SIDAHablemos de VHI/SIDA
Hablemos de VHI/SIDA
 
Int. à Logica de Programação
Int. à Logica de ProgramaçãoInt. à Logica de Programação
Int. à Logica de Programação
 
Introduçãso a linguagem c
Introduçãso a linguagem cIntroduçãso a linguagem c
Introduçãso a linguagem c
 
Apostila teoria anatomia_e_ fisiologia
Apostila teoria anatomia_e_ fisiologiaApostila teoria anatomia_e_ fisiologia
Apostila teoria anatomia_e_ fisiologia
 
Insuficiência Venosa - Saúde do Adulto
Insuficiência Venosa - Saúde do AdultoInsuficiência Venosa - Saúde do Adulto
Insuficiência Venosa - Saúde do Adulto
 

Similar to 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
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLOlivia Moran
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1Juvywen
 
HTML (presentation)
HTML (presentation)HTML (presentation)
HTML (presentation)laraibali21
 
CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptHamzaAhmad861123
 
Web design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introductionWeb design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introductionMustafa Kamel Mohammadi
 

Similar to 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
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Web design 101
Web design 101Web design 101
Web design 101
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
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
 
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
 
Html
HtmlHtml
Html
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
 
Let me design
Let me designLet me design
Let me design
 
HTML (presentation)
HTML (presentation)HTML (presentation)
HTML (presentation)
 
CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.ppt
 
Html
HtmlHtml
Html
 
Web design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introductionWeb design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introduction
 
Html introduction
Html introductionHtml introduction
Html introduction
 

More from 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
 
Algorithms
AlgorithmsAlgorithms
Algorithms
 
Sounds and images
Sounds and imagesSounds and images
Sounds and images
 

Recently uploaded

unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 

Recently uploaded (20)

unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 

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. 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. Lesson Objectives  Understand what html is and what is does  Understand how HTML documents are structured  Understand the difference between tags and elements Creating your first Web page
  • 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  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 Objectives  Title  HTML  Tag  Source  Elements  Head  Body  Web browser     Creating your first Web page