Week 1: HTML in depth

The digital space is a world
of connection and opportunity. Take this moment for example, the web has
made it possible for you to enroll in this program where you will learn from the
personal stories of developers at meta. Isn’t that exciting? By the time you have completed
this professional certificate, you can become a creator
of digital experiences. Connection is evolving and so are you. You might not have a background
in tech at all and that’s okay. Even if you have no experience, this program can get your job
ready within a single year. So, how can this professional
certificate prepare you for a job at an organization like meta? The front end developer professional
certificate will help you build job ready skills for a front end development role
while earning a credential from meta. From meta developers you will learn
about how they collaborated, create and test responsive, high performance
websites and applications. You’ll also discuss interesting
topics with other aspiring front end developers and complete a range of
coding exercises to improve your skills. It’s important to complete
all the courses in the certificate in order as each
course will build on your skills. Although we have a recommended
schedule for each course, the program is entirely self paced, which
means your time is your own to manage. As you make your way through the first
four courses in the certificate, you’ll learn how to code interactive web
pages using HTML, CSS and JavaScript. You’ll also learn how to use the bootstrap
framework before diving into the world of React, a widely used JavaScript
library that was created here at meta. Websites built using React are fast,
scalable, secure and allow for rich user experience. It’s no wonder it’s the choice
of leading companies. For your final project you will complete
a beautiful professional website for your portfolio, complete with interactivity
to showcase during your job search. You’ll also be ready to collaborate
with other developers as you will have learned to use GIT and
GIT hub for version control. If you’re hoping to operate independently
or in a smaller team, not to worry. We’ve also got you covered when it
comes to the basics of user experience. You’ll learn how to research
a user’s needs, create wire frames using popular industry tools like
Figma and design interactivity. In the final course, you will prepare for
the coding interview. You’ll practice your interview skills,
refine your resume and tackle some common coding challenges that typically
form part of technical job interviews. Once you complete the program, you’ll get access to
the meta career programs job board. A job search platform that connects you
with over 200 employers who have committed to sourcing talent through
meta certificate programs. Who knows where you’ll end up? Whatever the future of connection looks
like, you’ll be part of its creation. Let’s get started.

Hello and welcome to this
course on HTML and CSS. Every day when you
browse the Internet, you’re interacting with
HTML and CSS code. By now, you probably know a little bit about
how that works. If you’re taking this course, you want to find out
even more. That’s great. There will be a short
overview of HTML and CSS just after
this introduction. But first, let’s briefly go through what you’ll be
doing in this course. You’ll start off by learning how HTML is used in the real-world. This includes learning about semantic and Meta tags
and the importance of having a structured
approach so that you can create well-formed
web pages. Next up are user
input and forms. In this part of the course, you will create and test
a form by yourself. You will learn about
advanced input types, how to validate input, and provide feedback to improve the user experience of a form. But what would the
web be without media? The next HTML section will focus on bringing websites to life with media elements. You will learn how to embed video and audio players
and even iframes. Following the module about HTML, is when all about CSS. This part of the course will
go beyond basic styling. You will learn how to create layouts with grids
and flex boxes. You will also learn about CSS
selectors and how you can combine them to refine the styling of elements
on your web pages. Not only that, but you’ll
also learn how to use pseudo-class
selectors to improve the interactivity of a web page. But there’s even more. You will learn how
to add effects on web pages using purely CSS and you will cover basic transform and
transition animations, as well as more advanced
animations using key frames. Next, you will learn how to use browser developer tools and UI testing to debug
HTML and CSS code. The final part of the module is about the graded assessment. For this assessment, you
will build a homepage for a fictional
company and you’ll get an opportunity to review
your classmates projects as well since this is a
peer graded assignment. There are many videos
in the course that will gradually guide you towards your goal of becoming
a developer. Watch, pause, rewind, and re-watch the videos until you are confident
in your skills. Then consolidate your knowledge by consulting the
course readings and putting your skills into practice during the
course exercises. Along the way, you’ll
encounter several knowledge quizzes where you can
self check your progress. Remember, you’re not alone in considering a career
as a developer, which is why you’ll also
work with course discussion prompts that help you to
connect with your classmates. It’s a great way to
share knowledge, discuss difficulties, and grow a network of contacts in
the web development world. You have probably encountered a few new words and technical
terms in this video. Don’t worry if you don’t fully understand all these
terms right now. Everything will
become clearer soon. After all, this is part of the reason why you’re
taking this course.

The combination of HTML and CSS has meant that web browsing can be done on a variety of devices and not just computers and phones. Which of the following statements about CSS are true? Select all that apply.

CSS gives you control over spacing and positioning of content on a web page.

That’s correct! It also gives you control over color, size and fonts.

CSS describes the look and layout of a document written in HTML.

That’s correct! CSS describes the look and layout of a document written in HTML.

You can change a web page’s appearance with CSS without editing its HTML.

That’s correct! This is possible because there is a separation between content and style in CSS.

The average person doesn’t know much about what happens behind the scenes when they browse the Internet on their
phone or computer. But as an aspiring developer, you are aware of how the
content on screen is controlled by HTML and CSS. By now you know that HTML is a markup language used
to create webpages. In fact, it’s the most basic
and fundamental language for creating webpages. Together with CSS, it has helped the web browser expand beyond
just desktop computers. HTML has been around since 1990, and it was originally
designed to provide a way for people to share information
over the Internet. HTML webpages used to only
show basic images and text. The websites you browse
today are very different. This is because HTML
can do much more than just defining how content is
displayed in the browser. HTML is great, but
together with CSS, it can do so much more. CSS is a stylesheet
language that is used to describe the look and layout of a document written in HTML. While CSS is not a
programming language, it does allow for some
programming like features, such as variables
and nested rules. What it does is gives
you control over color, size, spacing, fonts,
positioning, and more. One of the fundamental
principles of CSS is the separation
of content and style. That means you can change a webpages appearance without editing its underlying HTML. W3C, the organization responsible for standards
for the worldwide web, manages both HTML and
CSS specifications. They continually improve
their capabilities to ensure that they are always oriented towards current requirements. Many new features were added
to the current version of HTML that make it easier to
use than previous versions. These are better support for multimedia content such
as audio and video, improved support for responsive
design such as adopting the webpage layout depending on the device the
webpage is viewed on, new form input types such as
sliders and range inputs, date and color pickers, new form validation features, and new ways to work with texts such as spell
checking and text editing. Some major additions
released for CSS in 2011 ensure that CSS can style and control a
website regardless of the media content or the device used for
viewing the page. The additions to the current
version are; media queries, which allow for different
styles to be applied depending on the device being
used; box sizing, which allows developers
to specify how they want their content
to be sized and padded; multiple backgrounds,
which means you can specify multiple background
images for an element; border images, which allow developers to
specify an image as a border instead of
a solid color or style; text shadows, which means you can
add shadows behind text for a more
three-dimensional look; and transformations
and transitions, which allow developers to
animate elements on a webpage. In essence, the combination
of HTML and CSS allows websites to adapt
their design and layout based on the devices
on which they’re viewed. While this feature was
initially used to support mobile devices like cell
phones and tablets, the usage of HTML
and CSS has grown beyond the traditional
web browser and webpages. Today, webpages can be viewed not only on
computers, cell phones, and tablets, but also on video game consoles
and even smart TVs. The web browser has truly expanded beyond traditional
desktop devices, and it’s all thanks to the
combination of HTML and CSS.

HTML is foundational to websites and there is a lot that you can do with it. Which of the following are you able to do with HTML? Check all that apply.

You can build forms with HTML.

That’s correct! You can build forms with a wide range of inputs.

You can display data in tables with HTML.

That’s correct! HTML enables you to display data in tables.

You can add images to a web page with HTML.

That’s correct! HTML enables you to add images to a web page.

Perhaps you know a little about HTML and CSS from
another course you did, or perhaps you don’t
know much at all. Either way, a quick
summary will be useful. So let’s explore some basic HTML and CSS principles
and practices. HTML stands for Hypertext
Markup Language. But what does that mean? Hypertext is text which
contains links to other text. Markup refers to tags and elements used within a document. HTML elements with their
opening and closing tags in angle brackets make
up an HTML document. These elements form
the structure of a webpage and describe what to display to
the web browser. When it comes to HTML, it’s important to know about the purpose of HTML
in the web browser. The use of HTML tags
and correct syntax, and how HTML elements are
used in a web document. But what can you do with HTML? You can add images to a
web page with HTML code. You can use it to
display data in tables, and you can build forms with
a wide range of inputs. Also, using the
correct HTML structure and appropriate elements as a foundation is
an essential part of building accessible websites. HTML can assist in ensuring web accessibility
by supporting the technology people
with disabilities use to interact with and
understand websites. Another important concept to know about when
you’re talking about HTML is the Document
Object Model or DOM. Users need to be able to interact with elements
on a web page. This means that HTML
document must be represented in a way that JavaScript code can
query and update it. That’s the function of the DOM. It’s a model of the
objects in your HTML file. Web developers
interact with the DOM through JavaScript
to update content, set up events and
animate HTML elements. Now that you’ve covered
the basics of HTML, let’s move on to CSS or
Cascading Style Sheets. If HTML is the frame and
structure of a building, then CSS is the paint, wallpaper, fixtures,
and overall style. CSS tells the web browser how to display HTML elements on screen. You use CSS to style elements
within an HTML document, create an appealing layout for your webpage using
the box model, and arrange page elements
using normal document flow. That was your HTML
and CSS refresher. Now get ready to
dive deeper into learning more about
these two topics.

What is Semantic HTML?

• Semantic HTML uses specific tags to describe the meaning and purpose of content on your web pages, rather than just how it should look.
• Think of it like labeling items in a well-organized kitchen. Instead of just having containers, you label them “flour,” “sugar,” etc. Semantic HTML does the same for your web page elements.

Why Semantic HTML Matters

• Accessibility: Screen readers and other assistive technologies rely on semantic tags to interpret and convey the structure of your page to users with disabilities.
• SEO: Search engines like Google analyze semantic markup to better understand the content and relevance of your pages. This can potentially improve your search rankings.
• Maintainability: Semantic code is easier to read, understand, and update, making your website more maintainable for you and other developers.

Key Semantic HTML Tags

Here’s a breakdown of some of the most important semantic tags and when to use them:

• Structural Tags
  • <header>: Typically used for the top section of your page, including logos, titles, and navigation.
  • <nav>: Defines the main navigation links on your site.
  • <main>: Encloses the primary content of your page.
  • <article>: Represents a self-contained piece of content, like a blog post, news article, or product listing.
  • <section>: Divides content into thematic sections within an article or the main page.
  • <footer>: Placed at the bottom of the page, often containing copyright information, contact details, or secondary links.
• Textual Tags
  • <h1> – <h6>: Heading tags, with <h1> being the most important and <h6> the least. Use these to structure your content hierarchically.
  • <p>: Represents a paragraph of text.
  • <em>: Emphasizes text.
  • <strong>: Marks text as strongly important.
  • <ul>: Defines an unordered list (bullet points).
  • <ol>: Defines an ordered list (numbered).
  • <li>: Represents a list item within a <ul> or <ol>.

Tutorial: Building a Semantic Web Page

Basic Structure: Start with the core HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Title</title>
</head>
<body>
    <header>
        </header>
    <main>
        </main> 
    <footer>
       </footer>
</body>
</html>

Add a Blog Post: Let’s create a sample blog post using semantic elements:

<main>
    <article>
        <header>
            <h1>The Importance of Semantic HTML</h1>
            <p>By Jane Doe, August 15th, 2023</p>
        </header>
        <section>
            <h2>Introduction</h2>
            <p> ... </p>
        </section>
        <section>
            <h2>Benefits of Semantic HTML</h2>
            <p> ... </p>
        </section>
    </article>
</main>

Tips

• Nest elements carefully: Semantic tags can be nested within each other to reflect the hierarchical structure of your content.
• Don’t overuse <div>: While the <div> tag is still useful, try to favor descriptive semantic tags whenever possible.
• Validate your HTML: Use an HTML validator (https://validator.w3.org/) to check for errors and ensure your markup is correct.

By using semantic HTML, you’ll create web pages that are more accessible, search engine friendly, and easier to maintain – benefiting both users and your development process!

Semantic tags describe the meaning of a web page and they help search engines and accessibility software like screen readers  to understand the contents of a page. Which of the following statements are true? Choose all that apply.

Basic HTML tags like the heading and list tags can be used to describe content.

That’s correct! For example, a heading tag like h1 describes that the content is a heading.

The article element is used for complete, self-contained compositions on a web page.

That’s correct! Examples include a blog post, or an article published in an online magazine or newspaper.

The main navigation links of your website should be added inside the nav element.

That’s correct! The main links allow users to navigate between different parts of your web  page.

By now you know that HTML describes
the content of a web page. But how do you describe
the meaning of a web page, to understand this in a real world
context think of buttons in an elevator. The vertical arrangement
of buttons isn’t enough for someone to understand their meaning. To convey the meaning or semantics
of the buttons numbers are added so that people know which button
will take them to which floor. When you write HTML it’s good practice
to semantically describe the content. This allows search engines and
accessibility software such as screen readers to understand
the contents of a page, fortunately you can do this by
using some basic HTML tags. For example using a heading tags such
as H1 describes that the content is a heading. Similarly the UL and
OL tags describe lists. However, there are many more semantic HTML
elements available to you as a developer. In this video I will share
a structured approach you can take to make sure that you
create a well formed web page. Let’s revisit the basic structure
of an HTML page which includes the head and body. Inside the body tag you can lay out
the website with very semantic tags to describe each of the sections. For a typical HTML page the structure
can be semantically described using the header, main and
footer semantic HTML tags. For example, suppose you lay out your page
with a header section that contains some company logo and navigation links. Then a main section contains sections and
articles. Finally a footer section contains contact
information and social media links. The main navigation section of your
web page can also be described semantically using the Nav tag. Depending on how web pages designed
the Nav element is often placed after the header element and
the header element is used for logos. The main links of your website
are then added inside the Nav element. It is common practice for developers to specify their links as
an unordered list inside the Nav element. Next is the main content of a web page. The two key semantic elements for
your main content are the article and section elements. First let’s examine the article element. The HTML specification
states that according to the World Wide Web Consortium’s website, the article element indicates
content which represents a complete. Or self contained composition in
a document page application or site that is independently distributable. That’s quite a mouthful. It may help to think of
a page in a newspaper. There are many articles on the page and you can cut out the individual
articles with scissors if you want to. The articles you can remove
are the article element. Examples of this include a forum post,
a magazine or a newspaper article, a blog entry, a user submitted comment,
an interactive widget or gadget or
any other independent item of content. Let’s examine how the article
element is used say you are developing a blog
about your summer holiday. It’s good practice to contain the blog
post content inside of the article element because it’s a complete
self-contained composition on a web page. You should place the article
element within your main element. Then you add your regular heading and
paragraph tags inside the article element. The reason for doing it this way is
because the main element semantically represents the main content of the page. And inside of it there can be
multiple article elements for something like a blog post list. At the end of your document
is the footer element. This might contain additional
navigation links or other content. It is important to note that semantic
elements are not limited to this structure. Since their purpose is to describe
the semantics of the content, the elements can be nested
inside of each other. If it accurately describes the content, let’s update the previous example
to use a nested semantic structure. You add a header element
to the article element, inside the header element at the heading
element with the blog title and a paragraph element describing
the date and author of the blog post. Inside the main element at
the content of the blog post. That’s it,
let’s examine the section element. You can add a section element to
semantically define individual sections of the article. It is important to note that sections
should contain heading elements to semantically describe the section. It is also possible to use section
elements to describe different sections of your webpage, the section element
doesn’t require the article element. It all depends on how you want to
semantically describe your page. And now you know how to semantically
describe the contents of a web page, your web pages more accessible
because the content is semantically described to add meaning. Now, search engines and accessibility
software can easily understand the contents of your well formed web page.

Is the following statement true or false? If you want to create an unordered list you should use the li tag.

False

That’s correct! For an unordered list you use the ul tag. The li tag is list item.

The Little Lemon Restaurant has asked me
to add a new blog page to their website. They’ve told me that the page will
contain several blog posts, and that it must use semantic html so
that search engines and accessibility software can understand
the semantics of the page. I’ve set up my basic html document
structure in a file named blog.html. I’ll start off by adding my
basic semantic structure. First I add the header element. Followed by the nav element, Followed by the main element. Followed by the footer element. Remember this structure describes
the semantics of this html document. Specifically the header element will be
used to display the Little Lemon logo, and the nav element will be used to describe
the navigational structure of the website. The main element will feature
the main content of the web page, and the footer will be used to
display copyright information. When a search engine or accessibility
software reads this document, the semantic tags will help
the software understand the purpose and meaning of different
sections of the document. I will now add the details
to each element. Inside the header element, I add
the Little Lemon logo using the image tag. Inside the nav element, I add the navigation links in an a ordered
list element using the ul tag. I then add three list item
elements using the li tag. Inside the list items, I add the hyperlinks for index.html, location.html and blog.html using the anchor tag. In the main element,
I add an h1 tag for the blog heading. The restaurant told me that there will
be two blog posts for their website. So I add two article elements
after the h1 element. Inside the first article element, I add
an h2 tag for the title of the blog post. The title is 20% off this weekend. I then add a paragraph
element below the title which contains the blog post text. Inside the second article element,
I add an h2 tag for the title which is our new menu. Again I add a paragraph element below the
title which contains the blog post text. Finally, I add a paragraph
element to the footer element. In this paragraph element,
I add the copyright notice. The blog pages now semantically
described through the html document. I now save the file by pressing
Control and S or Command and S on Mac. I then right click the blog.html file and
select live preview to preview the file. The blog page looks good and
all thanks to proper semantic design that ensures accessibility and
search engine optimization. I’m sure that the Little Lemon Restaurant
will get lots of business through their blog, and their customers with disabilities will be
able to access the blog with no problems

You want to improve the SEO of a website. What metadata should you add to the head element of the website and why? Check all that apply.

Author metadata to inform search engines who the author of the web page is.

That’s right. Author metadata specifies the author of the web page.

Viewport data to help web browsers display websites at the appropriate scale on the device being used.

That’s right.  Mobile devices will by default attempt to render a web page as if it is being viewed on a desktop. The solution is to define viewport metadata.

Description metadata to help search engines understand what the web page is about.

That’s right. The description metadata describes the content of the web page.

Robots metadata to improve how search engines analyze the website.

That’s right. The name “robots” comes from the automated software, often referred to as “bots”, that search engines use to analyze websites.

When was the last time
you used a search engine? Probably in the last few hours or minutes. Perhaps you just wanted to
quickly look something up or maybe you needed more in
depth information on a topic. Either way, the search engine you used
will have returned a list of results that were most relevant to
what you searched for. But how does a search
engine determine which web pages are most relevant in this video? You will learn how search
engines analyze web pages and how meta tags help provide information for
search engines. A major part of launching a website
is a process called search engine optimization or SEO. This process involves making improvements
to a website’s content semantics and delivery to improve its
ranking in search results. You might be wondering what exactly
does a search engine do when it analyzes a web page? Well when a search engine
visits your website, it analyzes the html document and
media content. If it finds a link to
another html document, it follows the link to that document and continues following links until it is
finished analyzing the entire website. Based on the results of the analysis and
the content on your website, the search engine will rank
the website for various search terms. So while your website might be the number
one result for one search term, it could rank very low for another. Every search engine has its own
algorithm for ranking websites. And while it’s not disclosed how
the ranks are determined, there are many best practices you can follow to
influence how search engines analyze and rank your website. But for now let’s just focus on how
meta tags influence website ranking. Meta tags define metadata
about a web page. What is metadata? You ask? It’s data about other data which in
this case is data about the web page. Meta tags are added inside the head
element of your html document and as you know, nothing inside the head
element is displayed in the web browser. In other words, meta tags are unseen
elements within the browser. Note that there is no closing tag for
the meta tag. The meta element has two attributes,
name and content. The name attribute specifies
the name of the metadata and the content attribute specifies
the value of the metadata. Let’s examine some examples of metadata. The author metadata specifies
the author of the web page. The name attribute is author and
the content attribute is the person and company who are the author
of the web page. The description metadata describes
the content of the web page. This is often used by search engines
as descriptive text in search results. The name attribute is
set to description and the content attribute is
the descriptive text. The keywords metadata was previously
used to provide search keywords for search engines. However, this led to a lot of websites
using the keywords metadata to manipulate search rankings. One of the major search engines
now ignores this metadata and another uses keywords metadata as
a spam indicator because of this, it’s recommended not to include
this metadata in modern web pages. Another type of metadata
is the robot’s metadata and it tells search engines if and
how they should analyze your web page. The name robots comes from the automated
software often referred to as bots, that search engines used
to analyze websites. The content attribute for
Robots has four possible values. Index tells the bot to analyze the page. Follow tells the bot to also
visit all links on the web page. No index tells the bot
not to analyze the page. Some bots will ignore this so it’s best not to rely on this to stop
bots from analyzing your page and no follow tells the bot not to
visit links on the web page. Again, some bots will ignore this value so
it’s best not to rely on it. Finally, there’s the view ports metadata. The view port metadata is important
when designing responsive web pages. Why you might ask because when
a web pages viewed on a phone or tablet, the device will by default
attempt to render the web page as if it is being viewed on a desktop. This results in a poor browsing
experience for the user. The solution is to define
view ports metadata. There are many values available for
view ports metadata. The most used value for the mobile
experiences is to set the width to device dash with and the initial scale to 1.0, you can learn more about view
ports in the additional reading. It’s important to note that view port
metadata does not solve all the issues with browsing websites on mobile devices. The other part of the solution
is responsive web design. But we were talking about search
engine optimization, right? View port metadata is important for
the user experience and it’s also important for
search engine optimization. This is because many search engines now
include websites mobile experience as a part of their ranking algorithms, there
is more metadata that you can define on you web page to specifically improve
its presence on social media. But that’s for later video. For now it’s important to know that
author description, keywords, robots and view ports metadata all play a role in the
search engine optimization of web pages.

When adding a new CSS and a new JavaScript file to the template web page, what needs to be done? Check all that apply.

• Add the JavaScript file to the js folder
• Add a script element to reference the JS file 
• Add the CSS file to the css folder 
• Add a link element to reference the CSS file 

An important part of being a developer is not just
the tools you use, such as your integrated
development environment, but also the repository
of knowledge and code templates you
build up over time. In this video, I’m going to introduce you
to one of these templates, which will help you get set up quickly for building webpages. Let’s open Visual Studio Code to go through the
templates step-by-step. In the folder, we
have index.html along with the JS folder
and a CSS folder. Inside the JS folder, there’s a file named script.js. There is no content
in this file. It is added to this
folder so that you can easily add JavaScript
code to the webpage. I recommend that you add any other JavaScript
files to this folder too. Next, I’ll open the CSS folder. In the folder there’s a
file named styles.css. Again, there is no
content in this file, but it is here so
that you can easily add CSS rules to the webpage. Again, it’s best if you add any other CSS files
also to this folder. I go back to my
template folder and open it in Visual Studio Code. I open the index.html file. The file has a semantic HTML
document structure set up. At the top, there is
the DOCTYPE declaration followed by the
HTML root element. Inside the root element, there are the head and body
elements in the head element. The title and meta tags are already optimized
for search engines. I recommend that you
update the title along with the description
and author meta tags. Below, are the Meta tags for
the Open Graph Protocol. Don’t worry about the
details of these tags just yet as you learn about
them in a later video. For now, the main
thing to know is that if you plan on sharing the
webpage on social media, you should remember to uncomment this HTML section and update
the content attributes. The next block of commented
out code is for icons. If you want to show an icon in the web browser tab
for your website, you can update the href attributes here to
point to your icon. Remember it you always
link elements for the CSS style sheet to the last section of
the head element. To speed things up for you, there is a link already
set up to reference the styles.css file in
the CSS folder. By now you can probably see
how useful this template is. Let’s continue to
the body element. The body element
already contains a basic semantic structure. This includes the header element for your website title or logo, the nav element for your
website navigation, the main element for
your main content, and the footer element
for any copyright notices or links to secondary webpages. Below the footer element, you add script elements
for JavaScript files. To make your life easy, a script element is already
set up to reference the script.js file in the JS folder. With this template,
you’ll be able to quickly start building
out webpages. It’s worth keeping a
copy of this template on your local machine to use and reference in
future projects. In this video, you’ve
been introduced to a semantic HTML
template that you can use for building webpages. Good luck.

Frontend developers use the Open Graph Protocol to improve the user experience of shared links because it helps social media platforms create a preview of the shared web page.

Yes

That’s correct, the Open Graph Protocol is a set of metadata rules that allows web pages to describe themselves to social networks. Social media platforms use these meta tags to create a preview of the shared web page.

Social networks are a great tool to share content with
friends and family, and even with coworkers
and business partners. When you share a link, most social networks
generate a preview of the link to let users know what the linked
webpage is about. Now that you’re
learning more about front end web development, you’re probably wondering how social networks generate
these previews. In this video, you will
learn how Meta tags help webpages create previews
of other web pages. By using Meta tags to control what information is
displayed to users, you can get more clicks when
you share your websites. But the Meta tags web developers
use for this purpose are different from the traditional SEO Meta tags that you learned about earlier
in this lesson. Traditional SEO Meta tags are oriented towards search
results, not direct links. Facebook’s rapid growth
led to millions of people sharing thousands
of links every day. To improve the user experience, they had to find a way to
display information about a website before a user
clicks on the link. To address this challenge, Facebook established the
Open Graph Protocol in 2010. The Open Graph
Protocol is a set of Metadata rules that allow web pages to describe
themselves to social networks. There are many Metadata options available within the protocol, but before you learn about them, let’s first discuss how the Open Graph Protocol
Metadata is defined. Earlier in this lesson, you learned that Meta
tags are defined inside of the head element
of an HTML document. The Open Graph Protocol also uses Meta tags added
to the head element, but they are slightly different. Instead of the name attribute, the Open Graph Protocol uses the property attribute to
define the Metadata name. Then, like the
regular Meta tags, it uses the content attribute to define the Metadata value. Each property in the Open
Graph Protocol starts with og : as a convention to identify it as an Open Graph
Protocol related tag. The Open Graph Protocol
requires that you must always include four
properties on a webpage. These are title,
type, URL, and image. The title property defines
the title of the page, this is the text that will
appear in the preview. The type property defines
the type of content, such as website, video,
music, or article. Depending on the value
you specify as the type, other properties
may be required. You will learn about
these in a later video. The URL property defines
the permanent web address that the social network must
use for the specific page. The image property
defines a URL to an image that must display
when the website is shared. Together, these Open Graph
Protocol properties enables social media platforms to create a preview of the
shared web link. Say, you share a blog post. The title of the post
is the og:title, the blog post URL is the og:url, and the image that
displays is the og:image. There are several other
optional properties that you will learn
more about later. But let’s briefly
explore three of these. The description
property provides a description of the webpage. The locale property
describes the language and territory of the
webpage’s content. For example, en_US
specifies that the page is in English and the locale is the United States. The site name property
describes the name of the overall website that
the webpage belongs to. You’ve now learned how to use Metadata to describe
web pages so that social networks can improve user experience by
previewing shared content. Next time you share a
website on a social network, you can use what
you’ve learned about Open Graph Protocol properties
to generate more clicks.

As a developer, you can add client-side validation to a form by using specific input types. 

Yes

Correct. Client-side validation checks for errors as soon as they are typed into the form. The web browser does this by validating the submitted data against the specified input type. The web browser will show an error message if the wrong type of input has been submitted.

You’ve most likely
encountered forms when registering an
account on a website, or when filling out your address for something you’ve
bought online. As a developer, you’ll use HTML forms to
capture user input. Capturing input is one thing, but the form also needs to
ensure the data is usable. How can you ensure the
user input is valid? For example, let’s say you are building an online
food delivery website. Say a user accidentally
makes an error when entering the delivery address
and the form accepts it, although the location
does not exist. It will cause a very
bad user experience when the food never arrives. This is where form
validation comes in. Form validation is a process that ensures that
the data entered by the user in a form is valid and conforms to rules
defined by the developer. There are two methods
of form validation, client-side validation and
server-side validation. Client-side
validation checks for errors as soon as they
are typed into the form. This is done by the web
browser or by JavaScript code, and provide the user
with immediate feedback. The client-side
validation process starts by checking if a form has
been filled out correctly. If there are no errors, the form will be submitted to
the server for processing. However, if there are errors, an error message will
alert the user of the invalid data and how to change it for
successful submission. For example, you decide to use the input element with its
type attributes set to email. If the user does not enter
a valid email address, the web browser will
display an error message informing them
that the data they entered is not a
valid email address. On the other hand, server-side
validation checks for errors after the data has been submitted to
the web server. Server-side validation is more secure because it
prevents malicious users from tampering with
your website’s code and submitting invalid
data to your server. When the form data is
received by the web server, the backend will validate the
data before processing it. This validation can run
more complex checks, such as checking the
data against a database, or validating the data against
business requirements. Most websites use
both client-side and server-side
validation to provide immediate feedback to users, but also to protect against malicious data submission and
to ensure data integrity. Let’s examine how HTML allows you to do simple
client-side validation. HTML has several input types that are validated
by the web browser. As demonstrated in the example, email is used for
email addresses. Others include “tel”
for telephone numbers, “url” for URLs such
as www.data.com, “date” for date values, “time” for time values, “number” for numeric values, “range” for numeric values which have a minimum and
maximum value, and “color” for color selection. Say for instance, a
user makes mistakes on a user account
form when entering a telephone number and URL, the browser will validate
the entered data against the requirements
of the input type and provide user feedback. Another example is the
required attribute, which indicates
that the user must supply a value to
an input field. The web browser will
alert a user if a required value is outstanding. That’s the basics of client and server-side validation of forms. You’ll learn more about HTML
validation capabilities in the next reading.

You are asked to help create a signup form. What can you do to improve the user experience of the form? Select all that apply.

Ensure that the correct input types are used.

That’s right! Using specific input types makes it easier to complete a form correctly because users are warned if they enter an incorrect response.

Add labels for each input element.

That’s right! Labels will help users understand what they need to add in each field. It is important to set the ID attribute of each input field so that the corresponding label can be associated with it.

The Little Lemon restaurant wants to expand its service by taking online orders to deliver food to
customers at home. To do this, they
need their customers to set up an account
on their website. In this video, you will
learn how to create a simple signup form for user accounts on the
Little Lemon website. I’ve set up my basic
HTML document structure in a file named, signup.html. I start off by adding
the form element. The restaurant requires that the customer data
is sent securely. I will set the method
attribute to post so that is submitted using an
HTTP post request. You will learn more about different methods of
form submission later. For now, you just need
to know that if you send a form via an HTTP post request, it improves the data
security of the form. The restaurant wants to collect the customer’s first name, last name, and email address. Of course, the form also needs
a field for the password, and another to
confirm the password. I need to create a form
with five fields in total. I’ll start by adding
the input elements, also known as the form fields. First, I’ll set up
six div elements, one for each input element, and one for the sign up button. The div elements will
cause each field of the form to display
in its own CSS block. Now, I’ll start adding
the input elements. I add an input element for the first name to the
first div element. Since the user will input plain texts for this form field, I set the type
attribute to text. I also set the name and id
attributes to user_first_name. Remember that the
name attribute sets the key for the value
submitted to the web server. Later in this video, I’ll explain why I
set the ID attribute. Next, I add an input
element for the last name. Like the first name element, I set the type
attribute to text, and the name and ID
attributes to user_last_name. I then add an input element
for the email address. To make sure users enter a valid email address
in this field, I set the type
attribute to email. Earlier you learned
that doing so establishes HTML’s
client-side validation. I also set the name and ID
attributes to user_email. Next, I add the input
element for the password. I want the password to be hidden on screen as the user types it, so I set the type
attribute to password. When an input field
is set to password, each character
that a user enters will display as a
placeholder character, such as the bullet point. The content in the field
will contain the password that the user enters,
but it will be hidden. I then set the name and ID
attributes to user_password. Finally, I add the input element for confirming the password. Again, I set the
type to password to hide the content of the
input field on screen. I then set the name and ID attributes to
user_confirm_password. Now that our input
fields are set up, I save the file and open the Live Preview to
check the webpage. Everything displays correctly. However, I’d like to
improve the user experience by informing the user what
each field represents. To do this, I’ll
add a label element before each input element. Now I want to explain why I set the ID attribute for each input field
earlier in the video. The reason for this, is that it allows me to associate a label with
each input element. Labels improve the
user experience and assist accessibility software
and understanding the form. I now add a label element
above the first input element. Inside the label element, I add the descriptive
text for the input field. In this case, the text
description will be first name. Then, to associate the
label with the input field, I add the four attribute
and set its value to match the value of the ID attribute
of the input element. Finally, I’ll add a
line break tag after the label element so that the input field displays
below the label. I then repeat the same process
for each input element. I save the file again and
open the Live Preview. Oh, yes, that’s much better. The form labels now display
above the input fields. To finalize the form, I need to add one more
thing, the submit button. Inside the last div element, I add a button element. I set the button type
attribute to submit. Then inside the button element, I add the text, sign up. I save the file again and
open the Live Preview. The form is now ready to use. Once the backend is set up by a backend developer to accept the data
submitted via the form, users will be able to
create their accounts. In this video, you
learned how to create a basic form with several
different input fields, each in its own CSS block, you covered how
to set the method attribute to submit the
form in a secure way, and you also now know
how to associate a label with an input field to
improve the user experience. Good luck with creating
your own signup forms.

What additional attributes can you add to an element on an HTML form to improve client-side validation? Check all that apply.

minlength

That’s right. You can specify the minimum number of characters required for a form field by adding for example:

minlength=”3″ inside the input type element.

maxlength

That’s right. You can specify the maximum number of characters allowed for a form field by adding for example:

maxlength=”12″ inside the input type element.

required

That’s right. If it is essential that a user submit a response to a specific field on your form, you should add:

Required inside the input type element.

Have you ever completed
a form online and then after you’ve clicked
on the submit button, one of the fields turned red. There are many reasons for error messages when you
complete online forms, the format could be wrong, but sometimes an error
results when a field is empty or if a value is
too long or too short. As a developer, you can
use HTML and CSS to guide users to enter the correct data on
forms and in this way, save web server resources. In this video, you
will learn more about the capabilities of
client-side validation in HTML and how to use CSS to effectively alert users
when data is incorrect. By now you’ve learned about the different HTML input types and how they validate
the format of data, but there are additional
attributes that you can apply to elements for
further validation. First, let’s explore
how you can ensure that the user provides a
value to a form field. This example of a log-in
form contains two fields, one for the username and
one for the password. It also contains a submit
button to submit the form. If a user hasn’t
added a username or password and clicks
the “Submit” button, the browser will allow the form to submit
to the web server. But this is a waste of server
resources because although the server-side
validation will pick up the missing information and prevent the processing
of the request, a HTTP request was
still submitted. Let’s improve this form by using client-side validation to ensure the user enters values
to both fields. Now with the required
attribute in the code, if one of the
fields is empty and the user clicks
the submit button, the request will not be
submitted to the web server. The web browser will focus on the first empty
input element and inform the user that
a field is empty. Now the form creates a much
better user experience and prevents unnecessary usage
of web server resources, but user input that is
too short or too long would also result in unnecessary submissions
to the web server. So another way to
validate user input is to specify the required
length for data. Let’s say you want the
usernames to be at least three characters long and a
maximum of 12 characters, or maybe you want to ensure
more secure passwords by requiring a minimum
password length of five characters. Fortunately, there are two
more attributes you can use to ensure the
correct length of data. You can add the min
length and max length attributes to the fields to
specify the required length. In this case, since the minimum value for the
username is set to three, a two-character entry
would be invalid. If you click the
submit button now, the web browser will inform you of the length requirements. A built-in function
of the browser will generate the message
displayed on screen. Again, a much better
user experience and management of web
server resources. Now let’s focus on
the way the browser communicates errors
to the users, like a form field that turns red when the data is invalid. This can be readily
implemented using CSS. To highlight a field in red
when the data is invalid, you use the input
element selector. You then apply the pseudo-class
selector called invalid. You will learn more about
pseudo-class selectors later in this course. For now, the key thing
to know is that they are used to select elements
based on their state, such as whether the input
data is valid or invalid. Then you add a CSS property to set the border of
the element to read. But since all the
form fields are empty when the form
loads initially, their state is still
practically invalid. This will cause all form
fields to display read from the start like demonstrated in this Real-world example
of a login screen. Ideally, you only
want fields to appear red as the user
enters invalid data. To do this, you need to apply another pseudo-class
called focus, which checks if the
user is currently entering data into this field. Now the form will
appear normal when the page first loads, and when the user
starts inputting data, the field will turn red
if the data is invalid. This video gave you a brief introduction
to how you can use client-side validation and CSS pseudo-class
selectors to improve the user experience of forms. As you learn more about
JavaScript in other courses, you will be able to use even
more advanced techniques to improve form validation.

You’ve surely booked
something online before. Perhaps it was tickets to a show or accommodation
for a holiday. The ability to book things
online is super convenient. That’s one of the reasons why the Little Lemon
restaurant is adding a table booking system
to their website. By now, you should know that a HTML form will be an
ideal solution for that. Like most restaurants,
Little Lemon has different table sizes and different sections
in the restaurant where customers can be seated. Therefore, the HTML
form must allow customers to decide between
the available table sizes, as well as if they want to
sit indoors or outdoors. Since both choices have
limited options available, it will be best to use radio
buttons for the input. Radio buttons are ideal for this forum because they
allow me to set up groups of options of which only one option and the
group can be selected. Now, let’s explore how to set up a HTML form with radio buttons. I’ve opened Visual
Studio Code and added a new file called booking.html. I’ve set up the
basic HTML structure and added a form element. First, I’ll add to
fieldset elements, one for the table size
and one for location. The fieldset element defines a group for the radio buttons. Without the fieldset elements, all radio buttons will
belong to the same group, but for this form,
we need two groups. On the first fieldset element, I set the id attribute to size. On the second fieldset element, I set the id attribute
to location. Below the fieldset elements, I add a button element. On the button element, I set the type attribute to submit. Inside the element, I
add the text book table. There are three different tables sizes available at Little Lemon; two-person, four-person,
and six person tables. Inside the first
fieldset element, I add three input elements representing the three
different tables sizes. On the first input element, I set the type attribute to radio and the value
attribute to two. I then set the name
attribute to size. It is important to set the
name attribute value to match the value of the id
attribute in the fieldset. This tells the browser, which fieldset the
input belongs to. After the element, I add
the text two-person table. On the second input element, I set the type attribute to radio and the value
attribute to four. I then set the name
attribute to size. After the element, I the
text, four-person table. Since the four-person table
is the most common booking, I want to have this option
selected by default. To do this, I add the checked attribute
to this input element. On the third input element, I set the type
attribute to radio and the value attribute to six. I then set the name
attribute to size. After the element, I add
the text, six-person table. In the second fieldset element, I add two input elements representing the table
location at the restaurant. On the first input element, I set the type
attribute to radio and the value
attribute to indoors. I then set the name
attribute to location, matching the id of the
second fieldset element. Since the indoor booking
is the most common, I’ll add the checked
attribute to this input element so that
it is selected by default. On the second input element, I set the type
attribute to radio and the value
attribute to outdoors. Again, I set the name
attribute to location. I save the file and open
it in Live Preview. Success. The form is
set up correctly. Let’s test it. If I choose an option for the table size and then
choose a different option, my previous choice
is deselected. The table location
field behaves the same. I can only choose
indoors or outdoors. However, I’m testing this form on a laptop with a large screen. On a mobile device with
a way smaller screen, it may be difficult
for the user to accurately select the
small button elements. Luckily, there is a
way to improve this by setting the text and
button as the input area. I open booking.html again, for each input
element and texts, I wrap them in a label element, which will group the texts
with the input element. I save the file again and
return to Live Preview. If I click on the text now, the corresponding input
element is selected. Selecting the desired
choice will be much easier on a
mobile device now. A user will be able to select
the button specifically. This form has a much better
user experience now. In this video, you’ve
covered how to use radio buttons to create a
simple online booking form. Hopefully, Little Lemon will get a lot more table bookings now.

If you must add a question on a form where users need to pick an option from a very long list, you can add a datalist input type which will allow the user to begin typing to narrow down the available options based on their input.

Yes

That’s right. The Datalist input type is also useful when the list of options might become longer in future.

Little Lemon
restaurant is becoming very popular in
their local area, so much so that they’ve opened a second Little Lemon
in another area nearby. Because of this,
they want to update the form of their
table booking system. In this video, you
will learn how to add advanced HTML
features to a form. They’ve also added some new
tables to the restaurant. They’ve also asked to replace
the table size field with a field for the number of people and to remove the
table location field. Finally, they want
customers to be able to choose which restaurant
they want to book at. The owners have told me
that they’re hoping for continued success and
growth of the business, and so I should plan for more restaurant
locations to be added. I opened booking.html
in Visual Studio Code. I’ll start by
deleting the previous table and location fields. I then add three div
elements for the new fields. Next, I’ll add the field
for the booking date. Luckily, HTML provides a
built-in field type called date that’ll present a calendar to the customer when
the field is clicked. To add this, I add
an input element to the first div element and set
its type attribute to date. I also set the ID and name
attributes to booking_date. To provide a good
user experience, I’ll add a label element
before the input element. Inside the label element, I add the text
description, booking date. I also add the for attribute and set its value
to booking_table so that accessibility
software can describe the purpose of the input
field to its users. Next, I’ll add the field
for the number of people. The restaurant has told me that the maximum booking
is 10 people, so I’ll use the
range input type. The range type
allows me to specify the minimum and maximum
values of the field. I add an input element to
the second div element. I set its type
attribute to range. I also set its ID and name
attributes to booking_people. To set the minimum value, I add the attribute min, which is short for minimum, and set its value to one. Then to set the maximum value, I add the attribute max, which is short for maximum, and set its value to 10. Again, to provide a
good user experience, I add a label before the element and set its content
to number of people. I then set the for attribute
to booking_people. Now, I’ll add the
new location field. The restaurant currently
has two locations, but they said they
might add more later. To allow for expansion later, I’ll use a data
list, input type. The data list input type
allows me to specify a list of available options that will
appear in a drop-down list. There can be tens and
hundreds of options, so the field allows the
user to begin typing, and it will narrow down the available options
based on their input. Since there are only
two locations so far, the customer will
be able to select their location from
the drop-down list. When more locations
are added later, the customer will be able to
begin typing their location and quickly select
their location from a reduced set of options. Setting up the data
list input type requires a few more steps
than the other input types. First, I add an input element. Then I set the name and ID attributes to booking_location. Then I add an attribute called list and set its
value to locations. This value is important
for the next step. I then add a data
list element and set the ID attribute
to match the value of the list attribute
on the input element. In this case, I set the ID
attribute to locations. Inside the data list element, I then add two option elements. On the first option element, I add the value attribute
and set it to Downtown. On the second option element, I add the value attribute
and set it to Uptown. Again, to provide a
good user experience, I add a label before the input element and set
its content to location. I then set the for attribute
to booking_location. I save the file, and
open it in live preview. When I click on the date field, the browser opens a calendar and allows me to select a date. The range input type is
presented as a slider that I can slide left and
right to the value I want. Finally, the data list input allows me to select
an option for the location or begin typing to narrow down
the available options. In this video, you
learned how to use advanced features of HTML forms. You should now be able
to add a calendar, create a slider with values, and add a datalist that
allows users to either select an option from the
drop-down list or by typing their option. With the continued
success of Little Lemon, I’m sure I’ll be updating this form again in
the near future.

When ordering products online, you fill out your address
and your credit card number, then you click on
an Order button that confirms your order. Because you are learning more about front-end
development, you might be wondering
what exactly happens when you click
on that order button. In this video, you will
learn what happens when forms are submitted
in the web browser. By now, you know that the web
browser communicates with a web server using a HTTP
request response cycle. This means that the web browser sends requests to
the web server, and the web server
sends back a response. Up to now, the main type of requests you’ve
been introduced to were for resources
such as HTML documents, images, CSS files,
and JavaScript files. But it is also possible to send data as part of a request. This is how form send
data to the web server. In fact, there are
two ways a form can send data to the
web server using the HTTP GET method or
the HTTP POST method. You can specify which
method the form should use with the method attribute
of the form element. Let’s examine an example
form and see how the data can be sent using
the two different methods. This login form, excepts
a username and password. It also has a login button that submits the form
to the web server. How would it work if the method
attribute is set to GET? When the Login
button is clicked, the form data is sent as
part of the request URL. This means that the user
data is appended to the end of the URL in the
web browser navigation bar. The web server receives
the HTTP GET request, and extracts the form
data from the URL. While this is an easy
way to submit data, it has three key problems. First, the length of a
URL is limited to around 2,000 characters depending on the web browser you’re using. Some web browsers allow more, but there are inconsistencies
between browsers. So if you have a large form, some data may be lost when it sent via the GET Method
to the web server. Second, the length
of a requested URL is also limited on
some web servers. Popular web server software such as Apache web
server or Engine X, have a default limit of
around 4,096 characters. Again, if you have a large form, some data may be lost. The final problem is security. Since the data is included
as part of the URL, it means that your
data is stored in your web browser history and possibly in the request
logs on the web server. If you’re transmitting
personal information such as addresses or
credit card numbers, this is a major privacy
and security risk. Now, let’s focus on
how the form would work if we set the method
attribute to post. When the form is submitted
using the post method, the form data is inserted into the content of the HTTP request. When the submit
button is pressed, it will send an
HTTP post request with the data contained in
the body of the request. The HTTP post method is more secure than the HTTP GET method. However, the data
could still be read by a third party listening
to the HTTP request. To secure this completely, HTTPS is used to
encrypt the data so that only the sender and receiver can
understand the data. Once the web server
receives the request, it processes it and sends
back an HTTP response. If the request was successful, the response will direct the web browser
to a new webpage. If errors occurred, there
are many ways this can be handled by the webpage as
explained in a previous video. You should now be
familiar with how forms are sent to web servers, and the difference
between GET and POST.

What are the advantages of styling HTML forms with CSS? Check all that apply.

You can specify styling for element types using element selectors

That’s right. Alternatively, you can specify the styling of individual elements. When you style HTML forms with CSS it will display the same across browsers creating a consistent user experience.

You can specify the styling of individual elements.

That’s right. Alternatively, you can style element types using element selectors. When you style HTML forms with CSS it will display the same across browsers creating a consistent user experience.

It creates a consistent user experience across browsers.

That’s right. By default, browsers handle forms differently but if you style a form with CSS all browsers will display the form in the same way.

An important part of being a front-end developer
is to provide a good user experience on the websites and web
applications that you develop. That includes ensuring
that users can complete HTML forms
without issues. There are many web browsers available today for browsing
the World Wide Web. However, each one
is developed by a different company using
different technologies. As a result, you will find
that your HTML forms will appear differently when you view them on different web browsers. But a form may even
appear differently on the same browser when you view the form on a
Windows PC or a Mac. This makes the creation of a consistent user
experience challenging. In this video, you will explore how form elements displayed differently on
various web browsers and how to solve this problem. First, let’s focus on the most common form
element, the input elements. The same input type HTML code displays differently in web
browsers such as Firefox, Microsoft Edge,
Chrome, and Safari. For example, there are
subtle differences in the height and corners
of the input box. There is also a difference in the default input box widths of Firefox and Safari compared to other browsers like
Microsoft Edge and Chrome. Safari on Mac OS
differs a lot from the other browsers using a thinner border on
regular corners. Next, let’s explore the
checkbox input type. Again, the exact same
input type HTML code, will let the checkbox
displayed differently in a checked and unchecked
state in different browsers. Notice that Microsoft Edge uses a gray color
in the check state, while the other web
browsers use blue, even still, each browser is using a different
shade of blue. Also notice how the border of the checkbox varies
between each web browser. Safari’s checkbox is also
smaller than the other. Now that you’ve explored
how HTML form elements can appear inconsistently
across different web browsers, let’s focus on how
to solve this. As you know, CSS
allows you to define the visual styling
of HTML elements. Defining CSS rules for the
different HTML form elements will ensure that your
element is styled consistently across
web browsers. For example, you can use
elements selectors to select a different element types and apply CSS properties to them. It’s also possible to study the individual input
types using CSS rules. You can add a CSS rule
using the element selector. To select the input
HTML element, use the input element selector, and then specify the
individual styling by adding a pair of
square brackets, and then type equals in
this case text or email. Then apply CSS properties
to set the font, width, height, and border. If you specify styling
with CSS in this way, the individual elements
of your forms will display consistently
across browsers. Luckily, there are
a lot of resources that simplify the
styling of forms. Popular libraries and frameworks such as Bootstrap, Tailwind CSS, and Foundation provides
CSS rules for forms, uninsured visual
consistency across different devices and browsers. You should now know why it is
important to pay attention to the appearance of
different HTML elements across web browsers, and how you can ensure
consistency with CSS rules.