SlideShare a Scribd company logo
Formatting your Web Page
Starter Activity: Format of a HTML page
What will you see if you viewed this page?
What do each of the tags do?
What should go between each of the tags?
Formatting your Web Page
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
In this lesson you will learn how to add headings,
paragraphs and line breaks using html. You will
add paragraphs of text, headings and a list of
attractions to your zoo homepage.
Lesson
Objectives
 Be able to create paragraphs on a web page
 Be able to create line breaks on a web page
 Be able to add headings on a web page
 Understand how to create a list on a web page
Formatting your Web Page
Adding Headings
Web pages are made up of more than just plain
words on a screen. There are headlines, paragraphs,
graphics, colors and much more. There are six levels
of headlines, ranging from <h1>…</h1> to <h6>…
</h6>. Here is an example of the code for some of
the headline sizes:
<h1>Level 1 Headline</h1>
<h3>Level 3 Headline</h3>
<h6>Level 6 Headline</h6>
Formatting your Web Page
Task 5: Adding a Heading to your Web page
Load the text editor and open your HTML document: firstpage.html
Add the <h1> tag to the words "Hello world." as shown in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more to come.
</body>
</html>
Save the document and then preview your work.
Formatting your Web Page
Your web page should look like this in your
browser.
Formatting your Web Page
Paragraphs & Line Breaks
To add space between paragraphs you use the
paragraph tag:
<p>…</p>
This is a container tag and must have a beginning
and an ending.
To add a single line of space, you use break tag:
<br>
This is an empty tag and stands alone. You can use
the <br> tag to insert one or more blank lines.
Formatting your Web Page
Task 6: Adding Paragraphs & Line Breaks
Load the text editor and open your HTML document: firstpage.html
At the relevant point add the tags and text that appear in red.
<h1>Hello world.</h1> This is my first web page. There's more to come.
<p>
I am learning how to use the headline, paragraph and line break tags. Writing
HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all dinner time!<br>
</p>
</body>
Save the document and then preview your work.
Formatting your Web Page
Your web page should look like this in your
browser.
Formatting your Web Page
Task 7: Zoo Homepage
1.Load the text editor and open your HTML document:
zoohomepage.html
2.Add the name of the zoo as a main heading
3.Add at least two paragraphs of text about why you should
visit the zoo
4.Add an appropriate sub heading for each of the
paragraphs
5.Create a list of all the attractions and facilities at the zoo
6.Save the document and then preview your work
Formatting your Web Page
Plenary: Test your Partner
Write three questions to test what your elbow
partner has learnt today.
When ready, ask each other your questions.
Formatting your Web Page
Keywords
 Be able to create paragraphs on a web page
 Be able to create line breaks on a web page
 Be able to add headings on a web page
 Understand how to create a list on a web page
Objectives
 Headings <h.>
 Paragraphs <p>
 Line Breaks <br>
 Tag
 Empty Tag
 HTML




Formatting your Web Page

More Related Content

What's hot

Lesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and ParagraphsLesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and Paragraphs
Keith Borgonia Manatad
 
Html project report12
Html project report12Html project report12
Html project report12
varunmaini123
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
Muhammad Shafique
 
How to create basic webpage
How to create basic webpageHow to create basic webpage
How to create basic webpage
James Erro
 
Lesson plan htmltextformattingtag
Lesson plan htmltextformattingtagLesson plan htmltextformattingtag
Lesson plan htmltextformattingtag
Keith Borgonia Manatad
 
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
 
Html basics
Html basicsHtml basics
Html basics
Zewaqar Khan
 
Html basics
Html basicsHtml basics
Html basics
Vjay Vijju
 
Lesson plan 3
Lesson plan 3Lesson plan 3
Lesson plan 3
Keith Borgonia Manatad
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
Desarae Veit
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
TonyC445
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
Marjorie Sample
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
DenMas Hengky
 
Introduction to html class-1
Introduction to html class-1Introduction to html class-1
Introduction to html class-1
NoumanBalochHere
 

What's hot (14)

Lesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and ParagraphsLesson plan: HTML Formatting Texts and Paragraphs
Lesson plan: HTML Formatting Texts and Paragraphs
 
Html project report12
Html project report12Html project report12
Html project report12
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
 
How to create basic webpage
How to create basic webpageHow to create basic webpage
How to create basic webpage
 
Lesson plan htmltextformattingtag
Lesson plan htmltextformattingtagLesson plan htmltextformattingtag
Lesson plan htmltextformattingtag
 
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 basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Lesson plan 3
Lesson plan 3Lesson plan 3
Lesson plan 3
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
Introduction to html class-1
Introduction to html class-1Introduction to html class-1
Introduction to html class-1
 

Viewers also liked

Quais são as principais doenças não transmissíveis?
Quais são as principais doenças não transmissíveis?Quais são as principais doenças não transmissíveis?
Quais são as principais doenças não transmissíveis?
Paulo Martins
 
Habitos 2013
Habitos 2013 Habitos 2013
Habitos 2013
Karina Schaefer
 
Conociendo más de elastix 101
Conociendo más de elastix 101 Conociendo más de elastix 101
Conociendo más de elastix 101
enriquetcampos.org
 
Proporcionalidade
ProporcionalidadeProporcionalidade
Proporcionalidade
Paulo Martins
 
Endodontic-Periodontal Relationship Brief Presentation
Endodontic-Periodontal Relationship Brief PresentationEndodontic-Periodontal Relationship Brief Presentation
Endodontic-Periodontal Relationship Brief Presentation
Iraqi Dental Academy
 
Neurotoxoplasmose
NeurotoxoplasmoseNeurotoxoplasmose
Neurotoxoplasmose
ligadaneurounisc
 
Trabalho dsp doenças sexualmente transmissíveis
Trabalho  dsp doenças sexualmente transmissíveisTrabalho  dsp doenças sexualmente transmissíveis
Trabalho dsp doenças sexualmente transmissíveis
R C
 
Parotid region
Parotid region Parotid region
Parotid region
ddert
 
Clínica Médica II (parte 1)
Clínica Médica II (parte 1)Clínica Médica II (parte 1)
Clínica Médica II (parte 1)
Will Nunes
 
Space Invaders Avignon
Space Invaders Avignon Space Invaders Avignon
Space Invaders Avignon
Prénom RVLEB
 
Cvs misc-1-csbrp
Cvs misc-1-csbrpCvs misc-1-csbrp
Cvs misc-1-csbrp
Prasad CSBR
 
Space Invaders Cote d'Azur
Space Invaders Cote d'AzurSpace Invaders Cote d'Azur
Space Invaders Cote d'Azur
Prénom RVLEB
 
Toxoplasmose
ToxoplasmoseToxoplasmose
Software de Centralita IP - VocalBOX
Software de Centralita IP - VocalBOXSoftware de Centralita IP - VocalBOX
Software de Centralita IP - VocalBOX
Inicia Soluciones
 
Preparación y empaque de los materiales de uso hospitalario - CICAT-SALUD
Preparación y empaque de los materiales de uso hospitalario - CICAT-SALUDPreparación y empaque de los materiales de uso hospitalario - CICAT-SALUD
Preparación y empaque de los materiales de uso hospitalario - CICAT-SALUD
CICAT SALUD
 
Registros de Enfermagem
Registros de EnfermagemRegistros de Enfermagem
Registros de Enfermagem
Andréa Dantas
 
Space Invaders Clermont-Ferrand
Space Invaders Clermont-FerrandSpace Invaders Clermont-Ferrand
Space Invaders Clermont-Ferrand
Prénom RVLEB
 
Hackeo
HackeoHackeo
Hackeo
seminario4
 

Viewers also liked (18)

Quais são as principais doenças não transmissíveis?
Quais são as principais doenças não transmissíveis?Quais são as principais doenças não transmissíveis?
Quais são as principais doenças não transmissíveis?
 
Habitos 2013
Habitos 2013 Habitos 2013
Habitos 2013
 
Conociendo más de elastix 101
Conociendo más de elastix 101 Conociendo más de elastix 101
Conociendo más de elastix 101
 
Proporcionalidade
ProporcionalidadeProporcionalidade
Proporcionalidade
 
Endodontic-Periodontal Relationship Brief Presentation
Endodontic-Periodontal Relationship Brief PresentationEndodontic-Periodontal Relationship Brief Presentation
Endodontic-Periodontal Relationship Brief Presentation
 
Neurotoxoplasmose
NeurotoxoplasmoseNeurotoxoplasmose
Neurotoxoplasmose
 
Trabalho dsp doenças sexualmente transmissíveis
Trabalho  dsp doenças sexualmente transmissíveisTrabalho  dsp doenças sexualmente transmissíveis
Trabalho dsp doenças sexualmente transmissíveis
 
Parotid region
Parotid region Parotid region
Parotid region
 
Clínica Médica II (parte 1)
Clínica Médica II (parte 1)Clínica Médica II (parte 1)
Clínica Médica II (parte 1)
 
Space Invaders Avignon
Space Invaders Avignon Space Invaders Avignon
Space Invaders Avignon
 
Cvs misc-1-csbrp
Cvs misc-1-csbrpCvs misc-1-csbrp
Cvs misc-1-csbrp
 
Space Invaders Cote d'Azur
Space Invaders Cote d'AzurSpace Invaders Cote d'Azur
Space Invaders Cote d'Azur
 
Toxoplasmose
ToxoplasmoseToxoplasmose
Toxoplasmose
 
Software de Centralita IP - VocalBOX
Software de Centralita IP - VocalBOXSoftware de Centralita IP - VocalBOX
Software de Centralita IP - VocalBOX
 
Preparación y empaque de los materiales de uso hospitalario - CICAT-SALUD
Preparación y empaque de los materiales de uso hospitalario - CICAT-SALUDPreparación y empaque de los materiales de uso hospitalario - CICAT-SALUD
Preparación y empaque de los materiales de uso hospitalario - CICAT-SALUD
 
Registros de Enfermagem
Registros de EnfermagemRegistros de Enfermagem
Registros de Enfermagem
 
Space Invaders Clermont-Ferrand
Space Invaders Clermont-FerrandSpace Invaders Clermont-Ferrand
Space Invaders Clermont-Ferrand
 
Hackeo
HackeoHackeo
Hackeo
 

Similar to Formatting your web page

Html
HtmlHtml
Html
mazario
 
Headings
HeadingsHeadings
Headings
myrajendra
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
google
 
Html basics
Html basicsHtml basics
Html basics
Adityaroy110
 
Html basics
Html basicsHtml basics
Html basics
Vivek Khandelwal
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
Bhavani Testone
 
Html basic file
Html basic fileHtml basic file
Html basic file
Md Mozaddidul Karim
 
Html BASICS
Html BASICSHtml BASICS
Html basics
Html basicsHtml basics
Html basics
Yernur Kassymbayev
 
Html basics
Html basicsHtml basics
Html basics
Adityaroy110
 
Html basics
Html basicsHtml basics
Html
HtmlHtml
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
NextGenr
 
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangaloreHtml ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
fathima12
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
adampcarr67227
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For Beginners
DHTMLExtreme
 
Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
vidyamittal
 
html.pptx
html.pptxhtml.pptx
html.pptx
developper2
 
Html intro
Html introHtml intro
Html intro
Danielle Oser, APR
 

Similar to Formatting your web page (20)

Html
HtmlHtml
Html
 
Headings
HeadingsHeadings
Headings
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
 
Html basic file
Html basic fileHtml basic file
Html basic file
 
Html BASICS
Html BASICSHtml BASICS
Html BASICS
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html
HtmlHtml
Html
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangaloreHtml ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
Html basics NOTE
 
HTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docxHTML Lab ProjectTo create a simple web page you will need .docx
HTML Lab ProjectTo create a simple web page you will need .docx
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For Beginners
 
Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
 
html.pptx
html.pptxhtml.pptx
html.pptx
 
Html intro
Html introHtml intro
Html intro
 

More from cachs_computing

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

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

How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 

Recently uploaded (20)

How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 

Formatting your web page

  • 2. Starter Activity: Format of a HTML page What will you see if you viewed this page? What do each of the tags do? What should go between each of the tags? Formatting your Web Page </head> <body> </body> </html> <html> <head> </head> <body> </body> </html>
  • 3. In this lesson you will learn how to add headings, paragraphs and line breaks using html. You will add paragraphs of text, headings and a list of attractions to your zoo homepage. Lesson Objectives  Be able to create paragraphs on a web page  Be able to create line breaks on a web page  Be able to add headings on a web page  Understand how to create a list on a web page Formatting your Web Page
  • 4. Adding Headings Web pages are made up of more than just plain words on a screen. There are headlines, paragraphs, graphics, colors and much more. There are six levels of headlines, ranging from <h1>…</h1> to <h6>… </h6>. Here is an example of the code for some of the headline sizes: <h1>Level 1 Headline</h1> <h3>Level 3 Headline</h3> <h6>Level 6 Headline</h6> Formatting your Web Page
  • 5. Task 5: Adding a Heading to your Web page Load the text editor and open your HTML document: firstpage.html Add the <h1> tag to the words "Hello world." as shown in red. <html> <head> <title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come. </body> </html> Save the document and then preview your work. Formatting your Web Page
  • 6. Your web page should look like this in your browser. Formatting your Web Page
  • 7. Paragraphs & Line Breaks To add space between paragraphs you use the paragraph tag: <p>…</p> This is a container tag and must have a beginning and an ending. To add a single line of space, you use break tag: <br> This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines. Formatting your Web Page
  • 8. Task 6: Adding Paragraphs & Line Breaks Load the text editor and open your HTML document: firstpage.html At the relevant point add the tags and text that appear in red. <h1>Hello world.</h1> This is my first web page. There's more to come. <p> I am learning how to use the headline, paragraph and line break tags. Writing HTML isn't as hard as it appears. </p> <p>Here's a list of items I like about school:<br> Science<br> Reading<br> But most of all dinner time!<br> </p> </body> Save the document and then preview your work. Formatting your Web Page
  • 9. Your web page should look like this in your browser. Formatting your Web Page
  • 10. Task 7: Zoo Homepage 1.Load the text editor and open your HTML document: zoohomepage.html 2.Add the name of the zoo as a main heading 3.Add at least two paragraphs of text about why you should visit the zoo 4.Add an appropriate sub heading for each of the paragraphs 5.Create a list of all the attractions and facilities at the zoo 6.Save the document and then preview your work Formatting your Web Page
  • 11. Plenary: Test your Partner Write three questions to test what your elbow partner has learnt today. When ready, ask each other your questions. Formatting your Web Page
  • 12. Keywords  Be able to create paragraphs on a web page  Be able to create line breaks on a web page  Be able to add headings on a web page  Understand how to create a list on a web page Objectives  Headings <h.>  Paragraphs <p>  Line Breaks <br>  Tag  Empty Tag  HTML     Formatting your Web Page