SlideShare a Scribd company logo
1 of 3
Getting Started
Before you can start building your web page
you need to do the following:
1. Create a folder in your documents called …
webpage
2. Open up Notepad++, create a new document
and save it into your “webpage” folder as…
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
This line tells the web
browser to expect an
HTML web page.
TASK 1
Type these tags into your
blank document in Notepad
then save the file.
(Don’t forget to indent it in the same
way as here.)
This section gives
information about the site
(it’s one of the places
search engines look for
information.)
All of the content (the
visible parts) of your
website will go into the
<body> section.
<!DOCTYPE html>
<html>
<head>
<title>My Hero Website!</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my website, hope you like it!</p>
</body>
</html> CHALLENGE 1
 Add a suitable title, heading and opening paragraph
to your web page.
 Investigate different types of heading you could use,
what happens when you type <h6> </h6> ?
 <p> is a paragraph, add some content about your
Hero

More Related Content

What's hot

What's hot (20)

Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
Html cheat sheet
Html cheat sheetHtml cheat sheet
Html cheat sheet
 
46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world46h interaction 1.lesson Hello world
46h interaction 1.lesson Hello world
 
Html
HtmlHtml
Html
 
HTML Basics 2 workshop
HTML Basics 2 workshopHTML Basics 2 workshop
HTML Basics 2 workshop
 
Tm 1st quarter - 3rd meeting
Tm   1st quarter - 3rd meetingTm   1st quarter - 3rd meeting
Tm 1st quarter - 3rd meeting
 
Your first HTML File
Your first HTML FileYour first HTML File
Your first HTML File
 
Html2
Html2Html2
Html2
 
CHILD Site Coordinator Training
CHILD Site Coordinator TrainingCHILD Site Coordinator Training
CHILD Site Coordinator Training
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 
CSS- Cascading Style Sheet
CSS- Cascading Style SheetCSS- Cascading Style Sheet
CSS- Cascading Style Sheet
 
Wetpaint
WetpaintWetpaint
Wetpaint
 
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
Master page
Master pageMaster page
Master page
 
Dreamweaver cs6
Dreamweaver cs6Dreamweaver cs6
Dreamweaver cs6
 
Web design 101
Web design 101Web design 101
Web design 101
 
WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?
 

Viewers also liked

Reti sequenziali (Flip-Flop Set-Reset)
Reti sequenziali (Flip-Flop Set-Reset)Reti sequenziali (Flip-Flop Set-Reset)
Reti sequenziali (Flip-Flop Set-Reset)marcopandamolinari
 
Encuesta sobre el uso del internet
Encuesta sobre el uso del internetEncuesta sobre el uso del internet
Encuesta sobre el uso del internetJuan Gómez
 
Del experimento de michelson y morley a la deteccion de ondas gravitacionales
Del experimento de michelson y morley a la deteccion de ondas gravitacionalesDel experimento de michelson y morley a la deteccion de ondas gravitacionales
Del experimento de michelson y morley a la deteccion de ondas gravitacionalesUniversidad del Cuaca
 
Análisis del curso Asesoría para el Uso de tics en la formación
Análisis del curso Asesoría para el Uso de tics en la formaciónAnálisis del curso Asesoría para el Uso de tics en la formación
Análisis del curso Asesoría para el Uso de tics en la formaciónERIKA STELLA RODRIGUEZ DUQUE
 
An Introduction to Functional Training
An Introduction to Functional TrainingAn Introduction to Functional Training
An Introduction to Functional TrainingVishy Dadsetan
 

Viewers also liked (10)

Horizontal pull ups
Horizontal pull upsHorizontal pull ups
Horizontal pull ups
 
Final proyect 5 Test
Final proyect 5 TestFinal proyect 5 Test
Final proyect 5 Test
 
La creación
La creaciónLa creación
La creación
 
Reti sequenziali (Flip-Flop Set-Reset)
Reti sequenziali (Flip-Flop Set-Reset)Reti sequenziali (Flip-Flop Set-Reset)
Reti sequenziali (Flip-Flop Set-Reset)
 
Encuesta sobre el uso del internet
Encuesta sobre el uso del internetEncuesta sobre el uso del internet
Encuesta sobre el uso del internet
 
All unit 3 Final Proyect
All unit 3 Final ProyectAll unit 3 Final Proyect
All unit 3 Final Proyect
 
Photo album Mafalda
Photo album MafaldaPhoto album Mafalda
Photo album Mafalda
 
Del experimento de michelson y morley a la deteccion de ondas gravitacionales
Del experimento de michelson y morley a la deteccion de ondas gravitacionalesDel experimento de michelson y morley a la deteccion de ondas gravitacionales
Del experimento de michelson y morley a la deteccion de ondas gravitacionales
 
Análisis del curso Asesoría para el Uso de tics en la formación
Análisis del curso Asesoría para el Uso de tics en la formaciónAnálisis del curso Asesoría para el Uso de tics en la formación
Análisis del curso Asesoría para el Uso de tics en la formación
 
An Introduction to Functional Training
An Introduction to Functional TrainingAn Introduction to Functional Training
An Introduction to Functional Training
 

Similar to Getting Started - Create Your First Webpage

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 ToddlerOludotun Longe
 
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
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
W6 - Intro to HTML.pdf
W6 - Intro to HTML.pdfW6 - Intro to HTML.pdf
W6 - Intro to HTML.pdfTekobashiCarlo
 
Html introduction
Html introductionHtml introduction
Html introductionRanjithaM32
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1Juvywen
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLMeghan Frisco
 
Basic Webpage
Basic WebpageBasic Webpage
Basic Webpagebmike06
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfHumphrey Humphrey
 
Joomla Beginner Template Presentation
Joomla Beginner Template PresentationJoomla Beginner Template Presentation
Joomla Beginner Template Presentationalledia
 
Title, heading and paragraph tags
Title, heading and paragraph tagsTitle, heading and paragraph tags
Title, heading and paragraph tagsSara Corpuz
 

Similar to Getting Started - Create Your First Webpage (20)

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
 
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
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
W6 - Intro to HTML.pdf
W6 - Intro to HTML.pdfW6 - Intro to HTML.pdf
W6 - Intro to HTML.pdf
 
Html introduction
Html introductionHtml introduction
Html introduction
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
 
HTML guide for beginners
HTML guide for beginnersHTML guide for beginners
HTML guide for beginners
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Itc lab 03
Itc lab  03Itc lab  03
Itc lab 03
 
Basic Webpage
Basic WebpageBasic Webpage
Basic Webpage
 
puissance-2roue
puissance-2rouepuissance-2roue
puissance-2roue
 
Html lesson1 5
Html lesson1 5Html lesson1 5
Html lesson1 5
 
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
 
Joomla Beginner Template Presentation
Joomla Beginner Template PresentationJoomla Beginner Template Presentation
Joomla Beginner Template Presentation
 
Title, heading and paragraph tags
Title, heading and paragraph tagsTitle, heading and paragraph tags
Title, heading and paragraph tags
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 

Getting Started - Create Your First Webpage

  • 1. Getting Started Before you can start building your web page you need to do the following: 1. Create a folder in your documents called … webpage 2. Open up Notepad++, create a new document and save it into your “webpage” folder as… index.html
  • 2. <!DOCTYPE html> <html> <head> </head> <body> </body> </html> This line tells the web browser to expect an HTML web page. TASK 1 Type these tags into your blank document in Notepad then save the file. (Don’t forget to indent it in the same way as here.) This section gives information about the site (it’s one of the places search engines look for information.) All of the content (the visible parts) of your website will go into the <body> section.
  • 3. <!DOCTYPE html> <html> <head> <title>My Hero Website!</title> </head> <body> <h1>Welcome to my website!</h1> <p>This is my website, hope you like it!</p> </body> </html> CHALLENGE 1  Add a suitable title, heading and opening paragraph to your web page.  Investigate different types of heading you could use, what happens when you type <h6> </h6> ?  <p> is a paragraph, add some content about your Hero