Chapter 2 - Creating Webpage Template with HTML5
Summary
TLDRThis video lesson focuses on building a web page template using HTML5. It guides viewers through understanding website file management, utilizing HTML5 semantic elements, and crafting a web page structure. The tutorial covers creating a homepage, validating web documents, and applying unique content. Viewers are walked through designing a Fitness Club website, including wireframing, file organization, and integrating HTML5 elements to establish a basic template, concluding with a homepage creation and validation using the W3C validator.
Takeaways
- 📝 The video is a lesson on building a web page template using HTML5, focusing on the structure, elements, and content creation.
- 🌐 It emphasizes the importance of website file management and the organization of various file types like HTML, CSS, images, and media.
- 📑 HTML5 semantic elements are crucial for defining the structure of web pages, including 'header', 'nav', 'main', 'footer', 'section', 'article', and 'aside'.
- 🎨 The lesson discusses the design process for a 'Forward Fitness Club' website, including the purpose, target audience, and accessibility considerations.
- 🛠️ The process of creating a web page template involves crafting an HTML document, integrating HTML5 elements, and transforming it into a reusable template.
- 🖌️ The video provides a checklist for designing a website, which includes planning, wireframing, and choosing appropriate graphics, colors, and typography.
- 🔍 The significance of web document validation is highlighted, ensuring that the HTML code is error-free and follows W3C standards.
- 📝 The video includes a step-by-step guide to creating a basic HTML template for a fitness club website, including adding navigation links and footer content.
- 🌐 It explains the use of HTML entities for special characters that are not recognized by HTML, such as copyright symbols and ampersands.
- 🔑 The video mentions the use of comments in HTML to add notes that won't appear on the webpage but are useful for developers.
- 🔍 The final takeaway is about the importance of validating the HTML document using the W3C validator to ensure it meets web standards and is error-free.
Q & A
What is the main topic of this video lesson?
-The main topic of this video lesson is building a web page template using HTML5.
What are the objectives of the chapter for the lecture?
-The objectives are to understand website file management, HTML5 semantic elements, web page structure, the process of creating a web page template, adding static content, the significance of web document validation, and the application of unique content to a web page.
What is the purpose of the Forward Fitness Club website mentioned in the script?
-The purpose of the Forward Fitness Club website is to promote fitness services and gain new clients, facilitating a healthy lifestyle and helping clients meet their fitness and nutrition goals.
Who is the target audience for the Forward Fitness Club website?
-The target audience for the Forward Fitness Club website are adults between the ages of 18 and 35 within the local community.
What is the significance of using HTML5 semantic elements when creating a web page template?
-HTML5 semantic elements are significant because they define the structure of the web page and outline specific sections, making the content more accessible and understandable for both users and search engines.
What are the initial steps in designing a website according to the script?
-The initial steps include crafting an HTML document that forms the basic structure of the web page, integrating HTML5 elements to outline specific sections, and transforming the HTML document into a template that can be used as a pattern for other pages on the site.
What is the importance of web document validation?
-Web document validation is important as it verifies the validity of the HTML code, confirming that all code is correct and follows the established rules set by the W3C organization, ensuring the website's compatibility and accessibility.
How should a website be organized in terms of file management?
-A website should be organized systematically with a main folder and subfolders for different file types such as HTML, CSS, images, media, audio, video, and scripts to keep the site maintainable and scalable.
What are some of the HTML5 semantic elements mentioned in the script?
-Some of the HTML5 semantic elements mentioned are header, nav, main, footer, section, article, and aside.
What is the role of the 'nav' element in an HTML5 document?
-The 'nav' element indicates the start and end of a navigation area within the web page, containing hyperlinks to other web pages within the website.
Can you explain the use of symbol entities in HTML5 as mentioned in the script?
-Symbol entities in HTML5 are used to insert special characters or symbols that are not recognized by HTML. They are represented by entity names or numbers and are used to ensure that characters like the copyright sign, ampersand, and less than or greater than signs are displayed correctly in the web page.
Outlines
📝 Introduction to HTML5 Web Page Template Building
This paragraph introduces the video lesson on constructing a web page template using HTML5. It sets the stage for the chapter's objectives, which include understanding website file management, HTML5 semantic elements, web page structure, and the creation of a web page template with static content. The importance of web document validation and the incorporation of unique content into a web page are also highlighted. The lecture and lab activities are outlined, with the latter focusing on applying HTML5 semantic elements to create, validate, and design a homepage for an HTML template.
🎯 Website Design Checklist and Planning
The second paragraph delves into the meticulous process of website design, emphasizing the need for a comprehensive plan that outlines the website's purpose, target audience, and other essential elements. It mentions a sample checklist for a Forward Fitness Club website, detailing the site's mission, target demographic, and the importance of multi-platform display. The paragraph also covers the initial structure of the website, consisting of five pages with a hierarchical layout, and touches on aspects like graphics, color schemes, typography, and accessibility.
🌐 Website File Management and HTML5 Semantic Elements
This paragraph discusses the importance of systematic file organization for websites, which may consist of various file types such as HTML, CSS, images, and media files. It provides a step-by-step guide on creating folders and subfolders for a structured file management system. Furthermore, it explains the use of HTML5 semantic elements to define the structure of a web page, including 'header', 'nav', 'main', 'footer', 'section', 'article', and 'aside', and their respective roles in webpage design.
🏋️♂️ Designing a Fitness Club Website Template
The fourth paragraph focuses on the practical application of the discussed concepts by designing a template for a fitness club website. It outlines the steps to create a basic web page template, including the use of HTML5 structural elements within the body tag. The paragraph provides a detailed explanation of how to integrate the header, navigation, main content, and footer areas into the template, creating a foundational structure for the website.
📘 Understanding Heading Elements and Symbol Entities in HTML
This paragraph explains the use of heading elements in HTML to signify the beginning of new topics and to provide structure to the content. It distinguishes between heading levels, ranging from H1 to H6, and their role in helping users quickly navigate through the webpage. Additionally, it covers the use of symbol entities for characters not recognized by HTML, such as the copyright symbol and other special characters, and provides examples of how to correctly implement them.
🔍 Validating HTML Documents for Accuracy
The sixth paragraph highlights the importance of validating HTML documents to ensure that the code is error-free and adheres to the standards set by the W3C organization. It describes the process of validating an HTML file and the benefits of incorporating validation as part of web page testing. The paragraph also provides a practical example of how to validate a document using notepad and a web browser.
🛠️ Crafting the Forward Fitness Club Homepage
This paragraph provides a detailed walkthrough of creating the homepage for the Forward Fitness Club website. It includes the process of adding header elements, navigation links, main content with welcoming statements and promotional information, and a footer with copyright and creator credits. The paragraph emphasizes the importance of clean coding and real-time output checking to ensure the webpage's functionality and visual appeal.
📁 Organizing Website Files and Submitting Assignments
The eighth paragraph discusses the organization of website files and how to submit the completed web page template as part of the course assignment. It guides viewers on how to access and organize their folders, save their work, and submit a screenshot of their completed project. The paragraph concludes with instructions on how to use the template for future chapters and the importance of maintaining an organized file structure.
🔚 Chapter Conclusion and Website Validation
The final paragraph summarizes the chapter's key learning points, which include preparing a website with organized folders, using HTML5 structural elements to create a web page template, validating the template, and developing a homepage. It also guides viewers on how to validate their website using the W3C validator and correct any errors before concluding the video with a reminder to stay safe and a sign-off until the next lesson.
Mindmap
Keywords
💡HTML5
💡Web Page Template
💡Semantic Elements
💡Website File Management
💡Web Document Validation
💡Wireframe
💡Navigation Area
💡Main Content Area
💡Footer Area
💡Symbol Entities
💡Heading Elements
Highlights
Introduction to building a web page template using HTML5.
Understanding website file management and HTML5 semantic elements.
Objective of the chapter: creating a web page template, adding static content, and validating web documents.
Discussion on the significance of web document validation.
Application of unique content to a web page.
Designing a website using HTML5 semantics and creating a web page template.
Creating a home page and validating HTML documents.
Checklist for designing a website and its importance in the planning process.
Crafting an HTML document as the basic structure of a web page.
Integration of HTML5 elements to outline specific sections of the web page.
Transforming an HTML document into a template for other pages on the site.
Sample website plan for a Forward Fitness Club, detailing purpose, target audience, and multi-platform display.
Importance of a hierarchical structure in website design with links to the home page.
Design elements like graphics, color, typography, and accessibility attributes.
Basic template code for a simple web page with header, navigation, main content, and footer.
Importance of systematic file organization in website management.
Using HTML5 semantic elements like header, nav, main, and footer to define the structure of a web page.
Explanation of heading elements and their role in indicating new topics on a web page.
Use of symbol entities in HTML and their significance in displaying special characters.
Process of validating an HTML document to ensure code correctness and adherence to W3C standards.
Steps for creating and validating an HTML document, including naming conventions and file management.
Conclusion of the chapter summarizing the learned skills in preparing a website and creating a web page template.
Transcripts
[Music]
hello everyone good morning good
afternoon good evening or whatever time
in the world you are watching this video
so welcome to this another video Lesson
for chapter two and it talks about
building a web page template using HTML5
so to give you a heads up
uh this discussion will let you follow
and produce an output as we go along
with the coding part of this discussion
process
so
or the objective of this chapter so for
your lecture you're going to understand
the website file management
HTML5 semantic elements web page
structure the process of creating a web
page template and adding static content
the significance of web document
validation and the application of unique
content to a web page and for your lab
of course we are going to apply the
knowledge that you have learned from the
lecture and you're going to apply HTML5
semantic elements and simple codes
creating and validating an HTML template
designing a semantic wireframe and
developing a unique homepage for an HTML
template and for us to cover those
objectives we are going to have the
following topics so first we're going to
design a we're going to do designing a
website using HTML5 semantics creating a
web page template using simple entities
creating a home page and validating your
HTML documents all right
so last time we have talked about the
the checklist for designing a website so
I have a sample here so again in case
you have in case you have already
forgotten so this checklist material for
a web or the website plan so this
material explores the fundamental of web
design and development providing
Essential Knowledge for a budding web
designers so designing a website is
saying as I I have mentioned last time
it is a meticulous process that demands
time
planning and deep understanding of the
clients or stakeholders needs so this
process starts with a comprehensive plan
detailing the purpose of the website and
its target audience so one of the
initial steps in this process is
crafting an HTML document okay which
forms the basic structure of the web
page so HTML5 elements are then
integrated to outline specific sections
of the web page
and then this HTML document can be
transformed into a template and
it should be redesigned
a web page used as a pattern for other
pages on the site so the focus of this
discussion will be on the
building a web page template using HTML5
and
subsequently creating a home page from
this template okay so I read we already
have a sample here so remember your
checklist last time
it is already filled up
um
in this
um
web page or website that we are going to
create so this one is for a forward
Fitness club website plan or it's a gym
okay so
then for this particular website as we
go on with the different chapters sonagi
enhance
and the plan is already made here so
let's have first the purpose of the
website
okay so it says seared the purpose of
the website is to promote uh Fitness
services and gain new clients so the
forward Fitness club mission
is to facilitate a healthy lifestyle and
help our clients meet their Fitness and
Nutrition goals and then
website no so very firm
um
achievable all right and then for your
target audience
so the forward Fitness club customers
are adults between
the ages 18 and 15 within the local
community so
all right this is just a general a
general plan a same local community
but in your case if you are going to
create your site you have to mention
your local community and then for the
multi-platform display
so forward Fitness club recognizes the
growth in smartphone and tablet usage so
it should not be viewable only for
desktop but also with other devices so
you know a smartphone and tablet usage
and once a a single website that
provides an optimal viewing experience
regardless of the of whether visitors
are using a desktop laptop tablet or a
smartphone and then for the wireframe
and sitemap so dito the initial website
will consist of five web pages so limang
web pages
in the future okay arranged in a
hierarchical
structure or hierarchical structure
remember you have different uh
structures for creating website right
but this one younger gamit indito is
Young hierarchical structure with links
to the home page on every page so each
web page will include a heading area
navigation area your main content area
and footer area
and then for your graphics uh forward
Fitness club wants to
display its fitness equipment and Logo
to help with local branding so photos of
the facility members and staff will
increase visual appeal and for your
color a simple Lang Tayo so forward
Fitness club wants to use black and
white as the primary colors for a clean
sophisticated look
okay and then for the typography
actually this is a color
um
you have to mention the different colors
used
schemes okay so ion if necessary you
need to provide the color codes HTML
um but very specific encoder you have to
mention the RGB or the hex code or my
hsl and okay so for the future neon and
then for your typography
um to make the content easy to read
the website will use a serif font style
for paragraphs list and other body body
content while providing contrast by
using a sensory font style for
navigation links and headings okay
all right and then for your
accessibility so this one standard so
standard accessibility attributes such
as alternative text for graphics will be
used to address uh
address accessibility all right
then okay
for the preline plan
all right
basic template
so this is the code and this will be the
etomunan simple template
web page all right and then so earlier
the site map was mentioned so at Insight
not nothing okay so as mentioned kanina
it will have five web pages to build the
website so what are those five uh
we're beaches so you have the home page
the about us the glasses nutrition page
and con contact as a pitch okay so for
the home page
it will introduce the fitness center and
its mission statement okay and then for
about us page it will showcase the
facilities equipment and services for
the classes page
um
chapter today
all right
[Music]
and then
and then
after your site map
it will be followed by your wireframe so
uh before no if you're going to create a
website
um it's going to be
videos or very time consuming for you to
finish your website
so I have a sample here so 18 wireframe
so satastian in the header you have your
logo your links this will be your
navigation area the image banner and the
new paragraphs here and images and then
the footer okay for a basic web page
template
from header to footer okay
[Music]
next
um so important renewing file management
folder new so websites are uh websites
actually use uh several types of files
uh that includes HTML files similar
image files media uh sometimes similar
audio and video files by an in the CSS
files so even a simple website
even a simple website might use hundreds
of files okay websites hundreds of files
therefore each site must follow a
systematic method to organize its files
so before you begin to create your first
HTML page
start by creating a folder and
subfolders to contain and organize your
website files as shown in this figure
website new Young Fitness Club kanina in
forward Fitness club so uh
okay
files okay that is not the organized way
to do it so for you to be organized
um after this folder also called uh your
main folder the other term is the root
folder Okay so
the apartment folder for your CSS files
for your images for your media audio
videos
Fitness site my audio video okay and
then young scripts
JavaScript so
okay
next
now
um so this one is using HTML5 semantic
elements so as you learned in chapter
one uh you already begin uh creating a
new HTML document by adding the basic
required HTML elements to it and debug
you started with doctype HTML and
body elements all right so within the
body element
um you next at HTML elements that Define
the structure of the page
so inside the body you will have this
different semantic elements header
um that indicates the Header information
of the web page so header content
typically consists of a business name or
logo and is commonly positioned
immediately after the opening by the tag
so sababino open body tag now
okay and then next by the way
it's a web page template all right and
then after the header that is followed
by the nav so nav is short for
navigation so this indicates the start
and end of a navigation area within the
web page
uh the nav element
contains hyperlinks
hyperlinks to other web pages within a
website and is commonly positioned
immediately after the closing
header back
okay
next for the mean Main
so this this indicates the start and end
of the main content area of a web page
so my main contents
open and close main tags so it contains
the primary content of the web page and
then only one main element can appear on
a page
all right and then that is followed by
the footer
Sox
which indicates the start and end
of the footer area of a web page and it
contains the filter content of the web
page
okay and then
you can also see there yamanga section
uh the section elements
so the section area of a web page sodito
it contains a specific group being of
content of a web page
you can create other sections Okay small
squares
websites my picture that was made
description
that is a section okay a section of a
web page and then you have an article
this indicates the start and end of an
article area of a web page so dito it
contains such as four rooms or plug
posts okay
website you know other readings other
recommendations so those are
placed inside the open and closed
article element or tag and then finally
you have your aside
so it indicates the start and end of an
aside area of a web page so uh what is
contained here it contains information
about nearby content and is typically
displayed as a sidebar
okay
[Music]
usually you know typically it's a left
side known web page okay but for now
later
nav main footer
okay
um
so we will have the of course the
Declaration sorry
the Declaration document beginning with
the dog type
HTML head and the body
and then inside the body as mentioned
kanina it should have header NAB mean
and footer okay document
all right
and then for the
um or other elements
creating a web page we also have your
heading elements heading is different
from Pandora it's heading so you use
heading elements to provide a title or
heading before a paragraph of text or
section of a page so headings indicate
that a new topic is starting and
typically
um identify or summarize the topic so
just like in a book
[Music]
that is the heading so on a web page
heading appears in a large larger font
size than normal text
it should make it easy for users to
quickly scan the page and identify its
section so this figure here that you see
on the screen
um
it shows example of heading elements of
Intel's website okay the text in blue
heading
adding adding heading element before the
paragraph okay
so heading sizes or
levels one I run from one
uh one being the largest
and iron and six
are the subheadings okay
so the start tag of heading is
H1 H2 H6 so well on H7 H7
and so on all right
um
in the upcoming steps you
will insert the head heading element
with the header element on the template
file for the Fitness website later
and then
um
symbol entities are not all characters
are
um not all characters are recognized by
HTML
5. young literally
Ampersand greater than less than sign
sometimes when you look at them in the
document in this appear as it is okay so
what we do for the symbol entities we
use the The Entity name or entity number
okay so when adding content to a web web
page you often need to insert symbol or
characters like human copyright sign
register trademark currencies less than
greater than sine what else number signs
or
foreign
Copyright symbol so you have to start
with end
just like here and and it should end
with a semicolon okay semicolon no not
colon so
Copyright symbol
you use n copy
all right
for Ampersand use end amp semicolon
um actually
entity name with the entity number
sometimes it's difficult to remember
them
for other characters
um like Diamond Stars
entity name but they have a decimal
number and a hex number
all right so more on this uh if you want
to see more you can go to w3schools.com
reference site and you can check there
the other symbols that you can use
okay
and now assuming that you have already
created your HTML documents
um
compared to other programming languages
right but with HTML you can see
the results already sub browser however
how do you know if you have committed
mistakes or
um
after creating an HTML file you validate
the document to verify the validity of
the HTML code when you validate an HTML
document you confirm that all of the
code is correct and follows the
established Rules by the remember young
w3c organization that
um
organization that validates websites
debug so
um
again that's the organization that sets
the standards for HTML so the w3c
recommends validating all HTML documents
and making validation part of your web
page testing so much
foreign
I have already opened my notepad plus
plus here
and
the browser where we are going to view
your web page later
okay so in this case uh Naseebo name
file
somewhere in my PC as you can see
when you name your when you name this
HTML document you name it as template
okay template.html
alright
the HTML head and body
okay
so in this uh this is the part where you
will follow this I don't know this video
by by coding
canvas
for you guys okay
okay
um video
okay
so
uh inside the head uh by the way this is
the comment tag for html capagyan text
green you will not see this inside the
web page okay
so I kindly indicate your full name for
example I'm going to put mine
is uh
WD 2010
[Music]
um
and then the activity is
a fitness club
template and then the date when you have
created this
so July
foreign
2023
okay and then save it by the way
so when you see this in red uh color it
means Independence so when I run it
but when I when you save it it will turn
into blue
berries
and then don't forget your title
our title will be forward
Fitness club
and then
you as I've mentioned before seban
classes
but this title is for your tab name
okay
[Music]
next let us now proceed with the body
um so for your body we need
we need header
header
and
apples followed by after the header
yes you got it right it's the nav
followed by your mean
s
and of course your footer
[Music]
okay I am so for the header
so for the header we put here the
your H1
okay
so check nothing
again
by the way Ctrl s and then sub browser
F5 paramabilis and then for your
navigation
so
um for the navigations links
uh
so here we need the Home
tapos
about us
about us
about us
followed by human being slides
uh before nutrition with the glasses
and then contact us
and check nothing
no
now uh let's make this kite in a simple
web page launcher we need to make it
stylish okay so gamitine and character
entities so end
and B SP
that means no breaking space
all right so no breaking space is an
invisible space And Then followed by
um
number nine four seven five
semicolon
and then another and bsp
[Music]
yeah
space between home and the
the This Bar
okay
c9475 I'm just going to copy paste this
okay
[Music]
apostito
and Tito
na 10 output
okay
somehow stylishness
all right
so make sure our code is clean as we go
along
and then for the mean
I think
so let's put a paragraph tag open p and
then close parandita malito later
we need one two three three of this
and then inside it
is
welcome statement no
um here
welcome to forward Fitness club our
devices
so our mission is to help out our
clients meet their Fitness and Nutrition
goals
uh very nice man and then next paragraph
output
from time to time check your output
and then
your next statement
foreign
[Music]
so this one talks about if you have
struggled with getting healthy
only spelling getting healthy and need
the motivation and resources to make a
healthy lifestyle change contact us
today our facility includes
state-of-the-art equipment convenient
group training classes and nutrition
tips and information
wrong spelling is wrong information to
keep you healthy
again
and
hmm
and then in the last paragraph
s
and you can post them and while doing
this you can pause the video and then
for our last paragraph
with we provide a free one-week
membership to experience the benefits of
our equipment and facility so this one
this one week trial gives you complete
access to our equipment training classes
and nutrition planning
contact us
today to start your free trial
opening statements inviting but
okay so that's the main
and then lastly for the footer
um
or the footer
you put this
so
um
copyright sign so copyright 2023 All
Rights Reserved and then you can even
put here created by
your name is
and then in website name
and
then second output
template
our FM basic template this is for the
home page now so in the future
web page which will we will be creating
uh for the next chapters okay that's why
I want you to see this
as we go on with the next chapters
website
okay so you learn for I know for today's
video
zoom out kunan
and so foreign
[Music]
so how are you going to submit this
after watching this video
this time
um
driving folders new so I hope you
already have your
your ways to access your folder
schools
all right
okay
so
full during you let's see
sampling folders
but I belong
Okay so
really midterm finals
Ayan so how are you going to submit this
screenshot Lang so screenshot
a screenshot YouTube
foreign
that's why you have your folders
[Music]
and then
so inside your Berlin
and so on
Hanson 2
um
um
template
okay
see
um
video
sorry about that
so for HO2 L again you see
template
name
all right
zip you can just from your computer you
can just drag your files uh Tunes prelim
folder
okay so that's about this chapter
so
let's conclude this chapter on billison
um so for the chapter some summary in
this chapter you you learned how to
prepare a website by organizing folders
for the web page files using HTML5 uh
structural elements to create a web page
template validating the template and
then creating the home page so the items
are listed
below
so the items listed are
iron attention
okay
we cannot we cannot summarize the
chapter without validating our website
no
Panama validate go to
okay it's a Google search new Young W3 C
validator
hmm
that was in first result click New
London
um
this is called the validator.w3.org
document
[Music]
open with notepad plus plus
um you can actually I know there are
three ways to validate your documents
here you can validate by URL
in our case
um you can validate by file upload
or validate by direct inputing direct
input code
scanning and
tapos check
okay
spelling
[Music]
okay so in this case I only have two
errors
okay
there
foreign
[Music]
foreign
and then check again
but in this case uh here trailing slash
on void elements has no effect and
interacts badly with unquoted attribute
values anyway
so so far okay
okay
okay
um
[Music]
nutrition planning
foreign
all right so
um
I am going to end this video now so with
all that things been discussed uh thank
you all for watching and I'll see you on
the next video Lesson I'll see you in
the lab I'll see you everywhere anywhere
in school so keep safe everyone and
God bless
foreign
تصفح المزيد من مقاطع الفيديو ذات الصلة
HTML and CSS for Beginners Part 2: Building your first web page!
Semantic HTML Tags | HTML5 Semantic Elements Tutorial
Introduction to HTML | An HTML5 Tutorial for Beginners
HTML Tutorial for Beginners
CLASS 8 | CHAPTER 9 | IMAGES, LINKS AND FRAMES IN HTML 5 | CYBER TOOLS | KIPS
CSS Course | Make a Glassmorphic SignUp Page using Basic CSS | Mini Project | Web Development 23
5.0 / 5 (0 votes)