→ 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

→ 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

→ 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

HTML:
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.

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
Semantic HTML cheat sheet
There are hundreds of semantic tags available to help describe the meaning of your HTML documents.
Below is a cheat sheet with some of the most common ones you’ll use in this course and in your
development career.

Sectioning tags
Use the following tags to organize your HTML document into structured sections.

<header>
The header of a content section or the web page. The web page header often contains the website
branding or logo.

<nav>
The navigation links of a section or the web page.

<footer>
The footer of a content section or the web page. On a web page, it often contains secondary links, the
copyright notice, privacy policy and cookie policy links.

<main>
Specifies the main content of a section or the web page.

<aside>
A secondary set of content that is not required to understand the main content.

<article>
An independent, self-contained block of content such as a blog post or product.

<section>
A standalone section of the document that is often used within the body and article elements.

<details>
A collapsed section of content that can be expanded if the user wishes to view it.

<summary>
Specifies the summary or caption of a <details> element.

<h1><h2><h3><h4><h5><h6>
Headings on the web page. <h1> indicates the most important heading whereas <h6> indicates the least
important.

Content tags
<blockquote>
Used to describe a quotation.

<dd>
Used to define a description for the preceding <dt> element.
<dl>
Used to define a description list.

<dt>
Used to describe terms inside <dl> elements.

<figcaption>
Defines a caption for a photo image.

<figure>
Applies markup to a photo image.

<hr>
Adds a horizontal line to the parent element.

<li>
Used to define an item within a list.

<menu>
A semantic alternative to <ul> tag.

<ol>
Defines an ordered list.

<p>
Defines a paragraph.

<pre>
Used to represent preformatted text. Typically rendered in the web browser using a monospace font.

<ul>
Unordered list

Inline tags
<a>
An anchor link to another HTML document.

<abbr>
Specifies that the containing text is an abbreviation or acronym.

<b>
Bolds the containing text. When used to indicate importance use <strong> instead.

<br>
A line break. Moves the subsequent text to a new line.

<cite>
Defines the title of creative work (for example a book, poem, song, movie, painting or sculpture). The
text in the <cite> element is usually rendered in italics.
<code>
Indicates that the containing text is a block of computer code.

<data>
Indicates machine-readable data.

<em>
Emphasizes the containing text.

<i>
The containing text is displayed in italics. Used to indicate idiomatic text or technical terms.

<mark>
The containing text should be marked or highlighted.

<q>
The containing text is a short quotation.

<s>
Displays the containing text with a strikethrough or line through it.

<samp>
The containing text represents a sample.

<small>
Used to represent small text, such as copyright and legal text.

<span>
A generic element for grouping content for CSS styling.

<strong>
Displays the containing text in bold. Used to indicate importance.

<sub>
The containing text is subscript text, displayed with a lowered baseline.

<sup>
The containing text is superscript text, displayed with a raised baseline.

<time>
A semantic tag used to display both dates and times.

<u>
Displays the containing text with a solid underline.

<var>
The containing text is a variable in a mathematical expression.
Embedded content and media tags
<audio>
Used to embed audio in web pages.

<canvas>
Used to render 2D and 3D graphics on web pages.

<embed>
Used as a containing element for external content provided by an external application such as a media
player or plug-in application.

<iframe>
Used to embed a nested web page.

<img>
Embeds an image on a web page.

<object>
Similar to <embed> but the content is provided by a web browser plug-in.

<picture>
An element that contains one <img> element and one or more <source> elements to offer alternative
images for different displays/devices.

<video>
Embeds a video on a web page.

<source>
Specifies media resources for <picture>, <audio> and<video> elements.

<svg>
Used to define Scalable Vector Graphics within a web page.

Table tags
<table>
Defines a table element to display table data within a web page.

<thead>
Represents the header content of a table. Typically contains one <tr> element.

<tbody>
Represents the main content of a table. Contains one or more <tr>elements.

<tfoot>
Represents the footer content of a table. Typically contains one <tr> element.

<tr>
Represents a row in a table. Contains one or more <td> elements when used within <tbody> or <tfoot>.
When used within <thead>, contains one or more <th> elements.

<td>
Represents a cell in a table. Contains the text content of the cell.

<th>
Defines a header cell of a table. Contains the text content of the header.

<caption>
Defines the caption of a table element.

<colgroup>
Defines a semantic group of one or more columns in a table for formatting.

<col>
Defines a semantic column in a table.

META TAGS:

HTML <meta> tags

Earlier in the course, you learned about meta tags and how you can leverage them to convey
information to search engines to better categorize your pages. We recommend that you keep this cheat
sheet handy when building your web applications. The structure of a meta tag is as follows.

Name
The name of the property can be anything you like, although browsers usually expect a value they
understand and can take an action upon. An example would be <meta name="author" content="name">
to state the author of the page.

Content

The content field specifies the property's value. For example, you can use <meta name="language"
content="english">, to specify the language of the webpage to search engines.

Charset

The charset is a special field that lets you specify the character encoding used for the page so that the
browser can display it properly. The most frequently used is utf-8, and you would add it to your HTML
header as follows: <meta charset="UTF-8">

HTTP-equiv

This field stands for HTTP equivalent, and it’s used to simulate HTTP response headers. This is rare to
see, and it’s recommended to use HTTP headers over HTML http-equiv meta tags. For example, the
next tag would instruct the browser to refresh the page every 30 minutes: <meta http-equiv="refresh"
content="30">
Basic meta tags (meta tags For SEO)
<meta name="description"/> provides a brief description of the web page

<meta name=”title”/> specifies the title of the web page

<meta name="author" content="name"> specifies the author of the web page

<meta name="language" content="english"> specifies the language of the web page

<meta name="robots" content="index,follow" /> tells search engines how to crawl or index a certain
page

<meta name="google"/> tells Google not to show the sitelinks search box for your page when showing
search results

<meta name="googlebot" content=”notranslate” /> tells Google you don’t want to provide an automatic
translation for your page if the user uses a different language

<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" /> specifies the last modified date
and time on which you have made certain changes

<meta name="rating" content="safe for kids"> specifies the expected audience for your page

<meta name="copyright" content="Copyright 2022"> specifies a Copyright

<meta http-equiv="..."/> tags

<meta http-equiv="content-type" content="text/html"> specifies the format of the document returned

by the server

<meta http-equiv="default-style"/> specifies the format of the styling document

<meta http-equiv="refresh"/> specifies the duration of the page before it’s considered stale

<meta http-equiv=”Content-language”/> specifies the language of the page

<meta http-equiv="Cache-Control" content="no-cache"> instructs the browser how to cache your page

Responsive design/mobile meta tags

<meta name="format-detection" content="telephone=yes"/> indicates that telephone numbers should
appear as hypertext links that can be clicked to make a phone call

<meta name="HandheldFriendly" content="true"/> specifies that the page can be properly visualized
on mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> specifies the area of the
window in which web content can be seen

When you share a link, most social networks generate a preview of the link to let users know
what the linked webpage is about.
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.

Open Graph Protocol

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

→ additional info about meta tags : https://www.dofactory.com/html/metatags

→ sementic tags concept must read: https://www.freecodecamp.org/news/semantic-html5-elements

→ add open graph twitter card : https://www.digitalocean.com/community/tutorials/how-to-add-

twitter-card-and-open-graph-social-metadata-to-your-webpage-with-html

→ essential meta tags for social media : https://css-tricks.com/essential-meta-tags-social-media

→ meta element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

→ open graph protocol: https://ogp.me/
FORM VALIDATION:
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

→ 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 red 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

FORM SUBMISSION:

the form is submitted is determined by two essential attributes: action and method
The action attribute specifies to which web address the form must be sent. This is address is
location of server-side code that will process the request.
<form action="/login">
</form>
It is important to note that “action” can be a full URL address such as https://meta.com, an
absolute path such as /login, or a relative path such as login.

The absolute path, which starts with a forward slash, will use the base address of the current
website, such as https://meta.com and combine it with the absolute path. For example, if /login
is the absolute path, the form will be submitted to https://meta.com/login. If the address is
https://meta.com/company-info/ and /login is the absolute path, the submission address will still
be https://meta.com/login.

Similarly, a relative path will combine the current web address with a relative path. For ex, if
the web browser is currently on the web page https://meta.com/company-info/, and the relative
path is set to login, the form will be submitted to https://meta.com/companyinfo/login

→ imp note: When the action attribute is not specified, the form will default to the same URL
there are two ways a form can send data to the web server using the HTTP GET method or the HTTP
POST method

<form method="get">
</form>
<form method="post">
</form>

→ The form will default to the HTTP GET method when the method attribute is not provided.

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

Glossary: HTML form elements

<input>
It is used to create interactive controls, for example, buttons and various types of text fields and so on,
to accept input or data from the user. The key attribute of this element is type. Some common values for
the type include: button, checkbox, date, email, number, password, submit, text, and url. These values
dictate the appearance of the element
→additional info about input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
<label>
Defines a label for an element. It has an attribute "for", the value of which should be equal to the id
attribute of the element it is associated with. Note how in the example above, the <label> is associated
with the <input> using its id value.

<select>
Defines a drop-down list of options presented to the user. It has a couple of attributes:
• Form, the id of the form in which the drop-down appears
• Name specifies the name of the control
• Multiple Boolean attribute, when specified, indicates if a user can select multiple options out of
the list
• Required indicates if the user is required to select an option before submitting a form
• Size mentions the number of visible options in a drop-down list
The options in a drop-down list are defined using the <option> element inside <select>. Note the
example in the <option> description below.

<textarea>
Defines a multi-line input field, typically to allow the user to input longer textual data. The common
attributes for this element include:
• cols defines the width of the text area, the default value is 20
• form the form element the text area is associated with
• maxlength when specified, limits the maximum number of characters that can be entered in the
text area
• minlength the minimum number of characters that the user should enter
• readonly once set, the user cannot modify the contents
• rows defines the number of visible text lines for the text area

<button>
Defines a clickable button. The onclick attribute defines the behavior when the button is clicked by the
user. For example, in the code below, an alert message is shown to the user.
<fieldset>
Used to group related input elements in a form. For instance, elements related to the user’s personal
information and educational qualification can be grouped separately in two field sets.

<legend>
Defines a caption for the <fieldset> element. For example:
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
</fieldset>

<datalist>
Specifies a list of pre-defined options for an input element. It differs from <select> since the user can
still provide textual or numeric input other than the listed options.

<output>
Represents the result of a calculation (typically the output of a script) or the outcome of the user action.

<option>
Defines an option for the drop-down list. The following code example demonstrates how a simple list
can be defined, with the rendered view below the code block.

<optgroup>
Defines a group of related options in a drop-down list. Its attribute label names the group.

DIFFERENT TYPES OF INPUT TYPES:

Button, Checkbox, Radio, Submit, Text, Password, Date, Datetime-local, Email, File, Hidden, Image,
Number, Range, Reset, Search, Time, Tel, Url, Week, Month

Button:
This displays a clickable button, commonly used in HTML forms to activate a script when clicked.

Checkbox:
Defines a checkbox allowing single values to be selected or deselected. Used for choosing one or more
options from a limited set.
Radio:
Displays a radio button, allowing the selection of a single value from multiple choices, often presented
in radio groups.

Submit:
Displays a submit button for submitting form values to a server. The form-handler is specified in the
form’s "action" attribute.

Text:
Defines a basic single-line text field for user input.

Password:
Defines a single-line password field, obscuring the entered value, suitable for sensitive information.

Date:
Displays a control for entering a date with no time (year, month, and day).

Datetime-local:
Defines a control for entering both date and time, including the year, month, day, and time in hours and
minutes.

Email:
Defines a field for entering an email address, validating automatically when submitted.

File:
Displays a control for selecting and uploading a file from the user's computer.

Hidden:
Defines a control not displayed but whose value is submitted to the server.

Image:
Defines an image as a graphical submit button.

Number:
Defines a control for entering a number, with optional restrictions like min and max values.

Range:
Displays a range widget for specifying a number between two values, often represented using a slider.

Reset:
Displays a button that resets form contents to their default values.

Search:
Defines a text field for entering a search query.

Time:
Displays a control for entering a time value in hours and minutes, with no time zone.

Tel:
Defines a control for entering a telephone number, with optional validation using the "pattern" attribute.

Url:
Displays a field for entering a text URL, performing automatic validation before submission.

Week:
Defines a control for entering a date consisting of a week-year number and a year, with no time zone.

Month:
Displays a control for entering a month and year, with no time zone.

INPUT ATTRIBUTES:
When filling in HTML forms, we expect users to abide by certain rules, like using numbers when asked
to, or properly formatting a URL or an email when needed. However, humans are prone to errors and in
some cases, they may overlook some of the data they input. That’s why it’s important to ensure the
shape of the data we expect in each field is correct. HTML form validation is a set of attributes we can
add to form inputs to perform automatic validation on the user’s behalf. The most important attributes
you’ll find yourself using for validation are the following.

Required
Denotes a mandatory input that the user can’t leave empty. It can be used with any input type, like
password, radio, text and so on. <input type="text" id="firstName" name="firstName" required>

Maxlength
Specifies the maximum length of a text input, in other words, the maximum number of characters that
can be entered for a specific field. If provided, it will prevent the user from entering more characters
than the limit. <input type="text" id="description" name="description" maxlength="50">

Minlength
Specifies the minimum length of a text input. If set, the input will not accept fewer characters than
those specified. <input type="password" id="password" name="password" minlength="8">

Min and max attributes

Determine the minimum and maximum values allowed for an input field. They are usually applied to
numerical text inputs, range inputs or dates. <input type="number" id="quantity" name="quantity"
min="1" max="10"> <input type="range" id="volume" name="volume" min="1" max="100">
Multiple
Indicates that the user can enter more than one value in a single input field. This attribute can only be
used for email and file input types. <input type="file" id="gallery" name="gallery" multiple>

Pattern
Defines a particular pattern that an input field value has to fulfill to be considered valid. This attribute
expects a regular expression to specify the pattern. It works with text, date, search, URL, tel, email and
password input types. For example, you can restrict phone numbers to be only from the UK. <input
type="tel" id="phone" name="phone" pattern=”^(?:0|\+?44)(?:\d\s?){9,10}$” >

MEDIA ELEMENTS :
You start with a video tag itself. Then you add a source element. Note that the source element
has no closing tag. In the source element, you add two attributes, src, also known as source, and type.
In the src attribute, you add the address of the video file. In this case, it's linked to a file named
dance.mp4. In the type attribute, you add the value video forward/mp4 since the file is an MP4 file.
Remember I mentioned that the file types are supported by most web browsers. In case the file type is
not supported, the video tag allows for multiple sources to be specified. The web browser will check
through the sources and use the first one that it supports. If you prefer the web browser to use one
format over another, then make sure to specify them in the preferred order. There are also attributes
available for the video tag itself, which allow you to customize the video player. For example, you can
specify the width and height of the player using the width and height attributes. If you want to enable
player controls such as a pause and volume button, you can add the controls attribute
example for above explanation:

<video loop controls>

<source src= “ video-adress“ type=”video/video extension”>
</video>
<audio loop controls>
<source src= “ audio-adress“ type=”audio/audio extension”>
</audio>

IFRAME:
An iframe is HTML element that allows you to place or embed content from another website into a
webpage. It's defined using the iframe HTML tag. How it works is that it embeds another browsing
instance inside the page. What this means is that it runs the embedded webpage, similar to how a
webpage runs in another tab of your web browser. Therefore, it's running the HTML, CSS, and
JavaScript of the embedded webpage. An iframe is often used to display adverts, but it can also be used
to embed content from another website, such as a social media post. The content that's embedded is
defined using the src attribute. The value of the attribute is the URL of the content. It's also possible to
set the width and height of an iframe using the width and height attributes. While iframe is very useful
It security has been a concern since its inception because it's vulnerable to malicious code and
injection. As previously mentioned, a webpage can run JavaScript code. It's important to ensure that
you trust the website you're embedding into your own. Fortunately, there are some attributes that can be
applied to limit the behavior of the iframe. The first attribute is the allow attribute, which limits which
browser features the iframe can access. There are many possible values that can be set on the allow
attribute. For now, let's examine how to disable camera and microphone access in an iframe. On your
iframe element, you add the allow attribute and set its value to camera none and microphone none.
Now that was easy. The second attribute to improve security is the sandbox attribute. Similar to the
allow attribute, there are many values that can be set. The sandbox attribute limits behavior within the
iframe, such as preventing files from being downloaded and preventing pop-up windows. For now, the
important thing to note is that when the sandbox attribute is used with an empty value, all sandbox
restrictions will apply to the iframe. Individual sandbox restrictions can be removed by adding
attributes. For example, if you want to allow file downloads in the iframe, you would allow the allow
downloads value. While these restrictions help to keep your users secure, there may still be security
vulnerabilities in your web browser that the embedded web page can exploit. Therefore, it's always best
to be cautious when using iframes and ensure that you trust the website that you are embedding

iFrame sandbox cheat sheet

The <iframe> is the inline frame element that embeds an HTML page into another page. Apart from
the global attributes, which can be a part of the iframe, major element-specific attributes are listed
below.

allow
It specifies what features or permissions are available to the frame, for instance, access to the
microphone, camera, other APIs and so on. For example:
• allow="fullscreen” the fullscreen mode can be activated
• allow=“geolocation” lets you access the user’s location
To specify more than one feature, a semicolon-separator should be used between features. For example,
the following would allow using the camera and the microphone:
<iframe src="https://example.com/…" allow="camera; microphone"> </iframe>

name
The name for the <iframe>. For example: <iframe name = "My Frame" width="400"
height="300"></iframe>
height
It specifies the height of the frame. The default value is 150, in terms of CSS pixels. width

width
Specifies the width of the frame, in terms of CSS pixels. The default value is 300 pixels.

referrerpolicy
A referrer is the HTTP header that lets the page know who is loading it. This attribute indicates which
referrer information to send when loading the frame resource. The common values are:
• no-referrer The referrer header will not be sent.
• origin The referrer will be limited to the origin of the referring page
• strict-origin The origin of the document is sent as the referrer only when using the same
protocol security level (HTTPS to HTTPS)

sandbox
To enforce greater security, a sandbox applies extra restrictions to the content in the <iframe>. To lift
particular restrictions, an attribute value (permission token) is used. The common permission tokens are
listed below:
• allow-downloads Allows the user to download an item
• allow-forms Allows the user to submit forms
• allow-modals The resource can open modal windows
• allow-orientation-lock Lets the resource lock the screen orientation
• allow-popups Allows popups to open
• allow-presentation Allows a presentation session to start
• allow-scripts Lets the resource run scripts without creating popup windows

Note that when the value of this attribute is empty, all restrictions are applied. To apply more than one
permission, use a space-separated list. For example, the following would allow form submission and
scripts while keeping other restrictions active:
EX: <iframe src="my_iframe_sandbox.html" sandbox="allow-forms allow-scripts">
</iframe>
src
The URL of the page to embed in the <iframe>. Using the value about:blank would embed an empty
page.

srcdoc
Let's you specify the inline HTML to embed in the <iframe>. When defined, this attribute would
override the src attribute. For instance, the following code will display "My inline html" in the frame,
instead of loading my_iframe_src.html.
<iframe src="my_iframe_src.html" srcdoc="<p>My inline html</p>" >
</iframe>

loading
This attribute let's you specify if the iframe should be loaded immediately when the web page loads
(eager) or loaded when iframe is displayed in the browser (lazy). This allows you to defer loading
iframe content if it is further down your web page and outside of the display area when the page is
initially loaded.
EX:<iframe src="my_iframe_src.html" loading="lazy" >
</iframe>

title
This attribute let's you add a description to the iframe for accessibility purposes. The value of this
attribute should accurately describe the iframe's content
<iframe src="history.html" title="An embedded document about the history of my family" >
</iframe>
CSS:
CSS or cascading style sheets is a set of rules that enhance the appearance of web pages
In the early years of the internet browsers adopted CSS because it presented an opportunity for
better visual designs and more creativity As browsers continue to develop and grow beyond
traditional devices. C. S. S. S capabilities developed in parallel. This development includes the
introduction of responsive design in CSS and has further grown from there with layout options
such as flex boxes, grids and boxes

CSS can be used to enhance a web page by modifying fonts, colors, layout, size and other style
formatting options that make the web page more presentable.

CSS web layouts :

→ layout is one of the most important components of designing a good web page because
layouts help divide a page into different sections, thus making the page more presentable

→ the idea behind any CSS web layout is to create an optimally designed web page, that has a
good view ports at any given point. In other words, CSS layouts are all about how the
content of your web pages organized when it comes to creating layouts

TYPES OF LAYOUTS:

display: box and flexbox and grid

VIEW PORT:
The browser window that is visible to the user on the screen is called the view ports

DISPLAY:
→ The display property specifies the type of box that you want to use for a given html element.
the display property determines if a rendered boxes in line or block box models, allocate
rectangles or boxes to html elements

Grid and Flexbox:

The main difference between the two is that flex box is one dimensional while grid as
the word implies is two dimensional

flex box:
Flex box is short for flexible box model and it was introduced before the grid layout. For
example, the flex box property with an I. D. Named sample contains the display property
with flex as its value, flex box adds responsiveness to CSS with float elements and
positioning one dimensional refers to the fact that a given flex box container will arrange
items in either a column or a row along its axis. The flex box container applied over an
element can flex to shrink or expand. Thus resulting in a flexible responsive design

Flexbox is like a line of boxes where you can decide how they should line up
horizontally or vertically. It's good for arranging things in one direction, like a row or a
column. It's flexible and adjusts well to different screen sizes
 Flexbox is single-dimensional, which means you can align it either along a row or a
column and it is set to row alignment by default. There are two axes, the main and cross-
axis, much like the x and y-axis used in coordinate geometry. When aligned along the
row, the horizontal axis is called the main axis and the vertical axis is called the cross
axis. For the items present inside the flexbox container, the placement starts from the
top-left corner moving along the main or horizontal axis. When the row is filled, the
items continue to the next row. Note that with the help of a property called flex-
direction, you can instead flip the main axis to run vertically and the cross axis will then
be horizontal. In such a case, the items will start from top left and move down along the
vertical main axis. The properties you choose will help better control alignment, spacing,
direction and eventually styling of the container and items present inside it.

flex-box properties:
flex-direction: Determines the main axis direction of the flex container and specifies
how flex items are placed in the flex container. Possible values are row, row-reverse,
column, and column-reverse.

flex-wrap: Specifies whether flex items are forced onto a single line or can wrap onto
multiple lines if needed. Values include nowrap, wrap, and wrap-reverse.

flex-flow: A shorthand property for setting both flex-direction and flex-wrap in one
declaration.

justify-content: Aligns flex items along the main axis of the flex container. It helps
distribute extra space when flex items do not use all available space. Values include flex-
start, flex-end, center, space-between, and space-around.

align-items: Aligns flex items along the cross axis of the flex container. Values are
stretch, flex-start, flex-end, center, and baseline.

align-content: Aligns a flex container's lines within the flex container when there is
extra space on the cross-axis. Values include stretch, flex-start, flex-end, center, space-
between, and space-around.

order: Sets the order of a flex item relative to the other flex items inside the same
container. By default, all flex items have a value of 0, but this property allows altering
their order.
 flex-grow: Specifies the ability of a flex item to grow if necessary. It dictates what
amount of the available space inside the flex container the item should take up. A value
of 0 means it should not grow.

flex-shrink: Specifies the ability of a flex item to shrink if necessary. It dictates how
much the flex item will shrink relative to the rest of the flex items in the flex container
when there isn't enough space.

flex-basis: Defines the default size of an element before the remaining space is
distributed. It can be set in absolute lengths, percentages, or keywords like auto.

flex: A shorthand property for setting flex-grow, flex-shrink, and flex-basis in one
declaration.

gap:gap property can be used to create space between the items along the main axis. You
can also individually configure the gaps in rows and columns using row-gap and
column-gap properties.

Grid:
CSS Grid Layout is a two-dimensional layout system in CSS that allows for the creation
of complex grid-based layouts with rows and columns. It provides precise control over
the placement and sizing of elements within a grid container, enabling designers to
create sophisticated and responsive layouts with ease. CSS Grid offers features such as
grid lines, grid tracks, and grid areas, making it suitable for building both simple and
intricate web interfaces

CSS Grid is like a grid or a table where you can place things in rows and columns. It's
great for organizing content in two directions, both horizontally and vertically. It's useful
for creating more complex layouts with different sections and arranging items precisely
CSS units of measurement
A web page, as you know it, is two-dimensional. In other words, it has width and height. There are a
number of other ways you can express this such as vertical and horizontal, length and breadth, x and y
axis and so on. Another property of a web page is its size which can either be static or dynamic. When
you’ve encountered enough CSS code, you will note a number of different ways in which the values for
the same property can be declared using different units of measurement. Most of these units of
measurement are used to account for the dynamism and dimensionality of a web page.
Let’s examine the most widely used units of measurement. They can broadly be categorized as
Absolute and Relative units.

Absolute units
Absolute units are constant across different devices and have a fixed size. They are useful for activities
like printing a page. They are not so suitable when it comes to the wide variety of devices in use today
that have different viewport sizes. Because of this, absolute units are used when the size of the web
page is known and will remain constant.
The table for absolute units can be seen below:

Unit Name Comparison

Q Quarter-millimeters 1Q = 1/40th of 1cm

mm Millimeters 1mm = 1/10th of 1cm

cm Centimeters 1cm = 37.8px = 25.2/64in

in Inches 1in = 2.54cm = 96px

pc Picas 1pc = 1/6th of 1in

pt Points 1pt = 1/72nd of 1in

px Pixels 1px = 1/96th of 1in

Of these, the pixels and centimeters are most frequently used for defining properties.

Relative values
When you create a web page, you will almost never have only a single element present inside it. Even
in case of containers such as flexboxes and grids, there’s usually more than one element present that
rules are applied to. Relative values are defined ‘in relation’ to the other elements present inside the
parent element. Additionally, they are defined ‘in relation’ to the viewport or the size of the visible web
page. Given the dynamic nature of web pages today and the variable size of devices in use, relative
units are the go-to option in many cases. Below is a list of some of the important relative units.

Unit Description and relativity

em Font size of the parent where present.

ex x-co-ordinate or height of the font element.

ch Width of the font character.

rem Font size of the root element.

lh Value computed for line height of parent element.

rlh Value computed for line height of root element which is <html>.

vw 1% of the viewport width.

vh 1% of the viewport height.

vmin 1% of the smaller dimension of viewport.

vmax 1% of the larger dimension of viewport.

% Denotes a percentage value in relation to its parent element.

Many of these units are used in terms of the relative size of fonts. Some units are more suitable
depending on the relative context. Like when the dimensions of the viewport are important, it's more
appropriate to use vw and vh. In a broader context, the relative units you will see most frequently used
are percentage, em, vh, vw and rem.
Much like the absolute and relative units discussed above, certain properties have their own set of
acceptable values that need to be taken into account. For example, color-based properties such as
backgroundcolor will have values such as hexadecimal, rgb(), rgba(), hsl(), hsla() and so on. Each
property should be explored on an individual basis and practicing with the code will help you to decide
which of these units of measurement are the most suitable choice.