SlideShare a Scribd company logo
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

More Related Content

What's hot

HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
css.ppt
css.pptcss.ppt
css.ppt
bhasula
 
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
Manoj kumar Deswal
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
Nimish Gupta
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
Danny Ambrosio
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Basic html
Basic htmlBasic html
Learning Html
Learning HtmlLearning Html
Learning Html
Damian Gonz
 
Html tags or elements
Html tags or elementsHtml tags or elements
Html tags or elements
Webtech Learning
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
AAKASH KUMAR
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
Pranay Agrawal
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
Hameda Hurmat
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
McSoftsis
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
Randy Connolly
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
palhaftab
 

What's hot (20)

HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
css.ppt
css.pptcss.ppt
css.ppt
 
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
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Basic html
Basic htmlBasic html
Basic html
 
Learning Html
Learning HtmlLearning Html
Learning Html
 
Html tags or elements
Html tags or elementsHtml tags or elements
Html tags or elements
 
Html
HtmlHtml
Html
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
CSS
CSSCSS
CSS
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 

Viewers also liked

Hyperlinks and Evaluation
Hyperlinks and EvaluationHyperlinks and Evaluation
Hyperlinks and Evaluationcachs_computing
 
Andalucía jornalera
Andalucía jornalera Andalucía jornalera
Andalucía jornalera
Candy Zapata Caballero
 
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 IP
IP10
 
Elastix 1 o1 introduccion
Elastix 1 o1   introduccionElastix 1 o1   introduccion
Elastix 1 o1 introduccion
enriquetcampos.org
 
Elastix lab ece-book-esp(2)
Elastix  lab ece-book-esp(2)Elastix  lab ece-book-esp(2)
Elastix lab ece-book-esp(2)
enriquetcampos.org
 
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 roby
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"
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
 

Viewers also liked (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
 

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 Attributes
HIFZUR RAHMAN
 
Html basic
Html basicHtml basic
Html basic
Nital Shingala
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
DenMas Hengky
 
Html introduction
Html introductionHtml introduction
Html introduction
RanjithaM32
 
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
minhanaa21
 
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
 
Class1slides
Class1slidesClass1slides
Class1slides
Alexis Goldstein
 
Html
HtmlHtml
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
Humphrey Humphrey
 
Html beginner
Html beginnerHtml beginner
Html beginnerwihrbt
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
Juvywen
 
CreatingWebPages-Part1.ppt
CreatingWebPages-Part1.pptCreatingWebPages-Part1.ppt
CreatingWebPages-Part1.ppt
HamzaAhmad861123
 
Hyper Text Marup Language
Hyper Text Marup LanguageHyper Text Marup Language
Hyper Text Marup Language
AniketPujari
 
Html beginners tutorial
Html beginners tutorialHtml beginners tutorial
Html beginners tutorial
nikhilsh66131
 
Html introduction
Html introductionHtml introduction
Html introduction
Nuhu Abdul Razak
 

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
 
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
 
Html
HtmlHtml
Html
 
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
 

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
 
Sounds and images
Sounds and imagesSounds and images
Sounds and images
 
Binary
BinaryBinary
Binary
 

Recently uploaded

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 

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