Chapter 2 - Creating Webpage Template with HTML5

Summary

This 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

00:00

📝 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.

05:02

🎯 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.

10:03

🌐 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.

15:04

🏋️‍♂️ 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.

20:05

📘 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.

25:10

🔍 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.

30:11

🛠️ 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.

35:15

📁 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.

40:18

🔚 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.

Keywords

💡HTML5

HTML5 is the fifth major revision of the Hypertext Markup Language (HTML), which is the standard markup language for creating web pages and web applications. It includes new elements, attributes, and behaviors that enable a more interactive and dynamic user experience. In the video, HTML5 is used to build a web page template, emphasizing the use of semantic elements to structure the content, such as header, nav, main, and footer.

💡Web Page Template

A web page template is a pre-designed layout that serves as a blueprint for creating web pages. It typically includes standardized sections like headers, navigation menus, main content areas, and footers. In the video, the process of creating a web page template using HTML5 is discussed, highlighting how it can be used as a pattern for other pages on a website.

💡Semantic Elements

Semantic elements in HTML5 are tags that provide meaning to the web content. They help define the structure of a web page in a way that is more descriptive and accessible. Examples include 'header', 'nav', 'main', 'section', 'article', and 'aside'. The video emphasizes the importance of using these elements to outline specific sections of a web page, enhancing both the structure and accessibility.

💡Website File Management

Website file management refers to the organization and maintenance of the various files that make up a website, including HTML, CSS, JavaScript, images, and media files. The video discusses the importance of systematically organizing these files into folders and subfolders to maintain a structured and efficient workflow for web development.

💡Web Document Validation

Web document validation is the process of checking the markup language (like HTML) against a set of rules to ensure that it is well-formed and adheres to the standards set by organizations like the World Wide Web Consortium (W3C). The video mentions the significance of validating HTML documents to confirm that the code is correct and follows established rules, ensuring a higher level of quality and compatibility.

💡Wireframe

A wireframe is a visual guide that represents the structure and layout of a web page. It is a simplified, schematic representation that outlines where different elements such as text, images, and navigation will be placed. In the video, designing a website involves creating a wireframe to plan the layout of the web pages, including the header, navigation area, main content, and footer.

💡Navigation Area

The navigation area of a web page is the section that contains links to other pages or sections within the website. It is crucial for providing users with an easy way to navigate through the site. The video script discusses the inclusion of a navigation area in the web page template, typically positioned immediately after the header.

💡Main Content Area

The main content area is the central part of a web page where the primary information or content is displayed. It is distinguished from other areas like headers, footers, and navigation bars. In the video, the 'main' semantic element in HTML5 is used to define this area, ensuring that it contains the primary content of the web page.

💡Footer Area

The footer area of a web page is typically located at the bottom and contains supplementary information such as copyright notices, contact information, and links to privacy policies. The video script mentions the footer area as part of the web page template, indicating that it contains the footer content of the web page.

💡Symbol Entities

Symbol entities in HTML are used to represent characters that are not directly accessible from the keyboard or are reserved in HTML. They are denoted by a name or a number preceded by '&' and followed by ';'. The video discusses the use of symbol entities like '&' for ampersand and '<' for less than, which are essential for correctly displaying certain characters in web pages.

💡Heading Elements

Heading elements in HTML, denoted by 'h1' to 'h6', are used to define headings and subheadings in a document. They are important for structuring content and making it easier for users to scan and understand the page layout. The video script includes the use of heading elements, such as 'h1', to provide a title or heading before paragraphs of text or sections of a page.

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