HTML,CSS AND WEB DEV NOTES
Structure of HTML Document
<!Doctype html>: lets the browser knows that to expect html document
<html>: Parent element for all the content inside the web page
<head>:It will not showup on the page but it will be used have the information regarding the
webpage like title,meta tags,stylesheet linking etc..
<title>First Webpage</title>: This tag defines the title of the HTML document, which is
displayed in the browser's title bar or tab.
<body> : used to write content and it will be visible to the end user
<meta charset="UTF-8">: This meta tag sets the character encoding for the document to
UTF-8, which is a widely used character encoding scheme that supports a wide range of
characters and languages. Default in the modern browsers
<meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag specifies the
compatibility mode for Internet Explorer. It sets the document to the highest available mode
for the specific version of IE being used.(helpful while rendering in the ie browsers to render
it correctly)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is
used to define the viewport properties for responsive web design. It sets the width of the
viewport to the device's width and ensures the initial zoom level is set to 1.0.
Without this tag
With this tag
Anatomy of HTML element
Example
<h1>Hello world<h1>
Opening Tag : Name of the element one which is written inside angle brackets
Closing tag one which is written inside </>
Content is the one which is written between opening and closing tags(could be text or
element or anything)
Attributes: Attruibutes provide more information about the elements and html allows more
than 1 attribute for example
Here img is the image element and alt is the attribute
User Agents
Think of the user agent as a messenger between the user and the website. When you open a web
page using a web browser like Google Chrome, the browser acts as the user agent. It sends a request
to the website's server, asking for the page's content and resources. The server then responds with
the requested information, and the user agent (browser) displays it on your screen.
User agents are important because they help websites deliver the right content and format based on
the capabilities of the accessing software. For example, if you visit a responsive website on your
mobile phone, the user agent (mobile browser) informs the website that it's being accessed from a
small screen device. In response, the website may adjust its layout and content to fit better on a
mobile screen, providing a more optimized user experience.
Markup
Document Sections
1) Headers: Giving heading related information or grouping of headers can be done
Heading Elements
1. <h1>: This is the highest level of heading and represents the main heading of a page or
section. It carries the most significance and should be used sparingly. Example:
<h1>Welcome to My Website</h1>
2. <h2>: The second level heading is used for subheadings within <h1> sections. It denotes a
slightly lower level of importance. Example: <h2>About Me</h2>
3. <h3>: The third level heading is used for subheadings within <h2> sections. It continues to
provide a hierarchical structure to the content. Example: <h3>Education</h3>
4. <h4>: The fourth level heading is used for subheadings within <h3> sections, and so on. It
helps to break down the content into smaller sections. Example: <h4>University
Degree</h4>
5. <h5>: The fifth level heading represents subheadings within <h4> sections. It provides
further granularity to the content hierarchy. Example: <h5>Major: Computer Science</h5>
6. <h6>: The sixth and final level of heading represents subheadings within <h5> sections. It is
the least significant heading level. Example: <h6>Coursework</h6>
Main Element
Meaning: For putting our dominant content in our site and should not have more than one main element
Footer Element
Meaning: Helps to group information related to end of any section or the web page or site example
like contact address,copyright information,organization details or link to external sites etc..
Section Element
Meaning: It is typically used to group related content together and give it a meaningful structure.
The <section> element helps organize and divide the content into distinct sections, making it easier
for both developers and users to understand the page's structure.
Article Element
Meaning: article element is used to write the information which can exist independently and The
<article> element represents a standalone unit of content that can be read, shared, or referenced on
its own.
Aside Element
Meaning: Not the main information but also not the irrelevant information just like an add on to the
primary information just like some sidebars or quotes or whatever
Nav Element
Meaning: Used to group the list of navigation links. It represents a set of navigation options that
help users navigate within a website or between different sections of a webpage.
Table Element
Main wrapper: <table>
For headings <thead>
For body content <tbody>
For keeping content in row wise <tr>
For writing actual content <td> (inside tbody)
For writing actual content <th> (inside thead)
For writing footer content <tfoot>
For spanning the single cell we can use rowspan or colspan
Anchor Tag
Used for Navigating it to different site
Used for navigating it to same site and different file
Used for same page just different id
Attributes
rel=”nopener” means newly opened document will not have the previous window
methods
rel=”no follow” will usually used for external links where you are hinting the search
bots to not follow that link like that you are not endorsing that link
rel=”noreferrer” way of telling browser to not show information about from where
the link got redirected
target=”_self” opens in the same window
target=”_blank” opens in new window
Lists In HTML
HTML5 offers three types of lists
1) Orderderlist:Use it only incase of ordering of the list matters
2) UnorderList:Doesn’t matter the order on how things are ordered
3) Description List: to display list as key-value pairs
Explaination
1) OrderedList:
Syntax:
How to change the type of how its displayed
It accepts type attribute and its displayed as
How to control the order of it ( start attribute)
How to Reverse the Order (reversed attribute)
UnorderedList
Basic Syntax
1) type=disc
2) type=”none”
3) type=”square”
4) type=”circle”
Dl,dt,dd: Used when you want to represent some content in key value pairs dl is the parent and dt is
for title and dd is for description
Example:
Redering:
Forms in HTML
Input type( <input type=${type} />
type=”text” for single line text entry
type=”tel” for phone numbers
type=”password” for password types
type=”email” for email types
type=”range” for sliders
type=”number” for only numeric inputs
<textarea> for multi line text inputs(cols and rows for controlling size)
type=”file” for accepting files
type=”url” for url inputs
type=”radio” for radio buttons
type=”checkbox” for checkboxes
<select> tag for dropdown and option tag for dropdown options
type=”search” for search box
type=”submit” for form positive action
type=”reset” for resetting the form
type=”date/time” for date/time fields
type=”hidden” for storing the values related to form and not be visible to
user
Form Notes
input types must bee written in <form></form>
form takes method=”GET/POST” and action url
for writing labels for input fields <label>text</text>
<fieldset></fieldset> for grouping input types
<legend> for writing labels for fieldsets
To provide list for input use <datalist> and link that id to input using list
attribute
Form Attributes
“disabled” for disabling the input these values are not sent along with
form and doesn’t receive focus
“readonly” receives focus and sent along with form but will not be
available for user to edit
“name” and “value” is mandatory for form submission form omits fields
without name and value attribute can be used for prepopulation of data
Give same name for group of radio buttons(because only one value is
accepted)
“for” attribute is basically used with label element to tell browser for
which input element it is associated with basically its an id of (input
element)
minlength and maxlength for controlling the number of characters in
input
min and max attribute for controlling the values in
(type=number,range,date(“yyyy-mm-dd”),time(“09:00”)
size attribute for controlling the visbility size of input
accept=”.docx,.pdf” for type=”file” for controlling the which types of
files to be accepted and multiple attribute for accepting multiple files
required attribute for making input field as mandatory
step attribute on how much to increase or decrease incase
of(type=number/range)
placeholder for helper text before user enters any value
checked for pre selecting the radio/checkbox
selected attribute for preselecting option in dropdown
use(selected,disabled) in option tag
use optgroup tag for grouping the options in dropdown and then
provide label for it
novalidate can be used on form element to tell browser to ignore any
required field validations
autofocus for putting cursor on pageload
form encytype attributes
HTML Media
Audio
<audio> is the tag
Provide controls attribute for (volume.play,pause)controls for user
It takes <source src=”audiosource type=”audio/mp3” /> as children
You can provide different types of sources but only takes the first
supported one
Use autoplay attribute if want to paly it on pageload and muted if
initially you want audio element to be muted
Supported mp3,ogg,wav
Any text provided inside audio used as fallback content for not
supporting browsers
Video
<video > is the tag
Provide controls attribute for (volume.play,pause)controls for user
It takes <source src=”videosource type=”video/mp4” /> as children
You can provide different types of sources but only takes the first
supported one
Use autoplay attribute if want to play it on pageload and muted if initially
you want audio element to be muted,loop to continuously play it
Supported formats mp4,webm,ogg
Can adjust height and width of video using the respective attributes
Any text provided inside video used as fallback content for not
supporting browsers
Use poster attribute for using this as thumbnail
Use track attribute for providing subtitles to a video
The `sandbox` attribute in an HTML `<iframe>` element is used to restrict the
behavior of the embedded content within the iframe. It provides a way to
create a secure environment for potentially untrusted content, such as ads or
third-party widgets, by limiting what the content is allowed to do. The
`sandbox` attribute accepts a list of space-separated values, each representing
a specific restriction. Here are the allowed values for the `sandbox` attribute
and their use cases:
1. **`allow-same-origin`**:
- **Use Case**: Allows the iframe's content to be treated as if it has the same
origin as the parent window, relaxing the same-origin policy for the iframe. This
means the content can access its own origin's resources (e.g., cookies and local
storage) but not those of other origins.
- **Example**: Use this when you need to embed content from the same
domain and want to enable seamless communication with the parent window.
2. **`allow-scripts`**:
- **Use Case**: Permits the execution of JavaScript within the iframe.
Without this value, JavaScript in the iframe is disabled.
- **Example**: Commonly used when you want to include interactive
elements like forms or dynamic widgets that require scripting.
3. **`allow-popups`**:
- **Use Case**: Allows the iframe's content to open new windows or pop-up
dialogs, such as alert or confirm dialogs.
- **Example**: Useful when embedding content that may need to display
pop-up notifications or authentication dialogs.
4. **`allow-popups-to-escape-sandbox`**:
- **Use Case**: Allows pop-up windows opened by the iframe's content to
navigate the top-level window (parent window) if they share the same origin.
- **Example**: Necessary when the iframe needs to open pop-up windows
that interact with the parent window.
5. **`allow-presentation`**:
- **Use Case**: Allows the iframe's content to start a presentation session or
control a presentation device, typically used for web presentations.
- **Example**: Useful for embedding presentation slides or interactive
content for online presentations.
6. **`allow-top-navigation`**:
- **Use Case**: Permits the iframe's content to navigate the top-level
browsing context, which is the parent window or the window that contains the
iframe.
- **Example**: Use with caution, only when you want the iframe to have the
ability to change the URL of the parent window.
7. **`allow-top-navigation-by-user-activation`**:
- **Use Case**: Allows top-level navigation, but only when initiated by a user
action, such as clicking a link or button in the iframe.
- **Example**: Provides a safer way for the iframe to navigate the parent
window, but still requires user interaction.
8. **`allow-storage-access-by-user-activation`**:
- **Use Case**: Enables the iframe's content to request access to storage
mechanisms like cookies and local storage, but only after a user activation
event (e.g., a click).
- **Example**: Ensures that storage access is granted based on user
interaction.
9. **`allow-forms`**:
- **Use Case**: Allows the iframe's content to submit forms. Without this
value, form submissions are disabled.
- **Example**: Commonly used when embedding content with forms that
need to be submitted.
10. **`allow-modals`**:
- **Use Case**: Permits the use of modal dialogs within the iframe's
content, such as `alert`, `confirm`, and `prompt` dialogs.
- **Example**: Useful when the iframe content may need to display modal
dialogs for user interaction.
These values can be combined in the `sandbox` attribute to impose multiple
restrictions simultaneously based on your specific security requirements.
Always consider the security implications when using the `sandbox` attribute
and select the values that best align with your use case to ensure a secure and
controlled environment for embedded content.
Iframes in Html
<iframe> is the tag used
Takes src attribute which can be your html or any other
webpage
width and height attributes for controlling the layout view
frameborder for controlling border of iframe
allowfullscreen attribute to decide if the iframe can be viewed
in fullscreen
use sandbox attribute to control what can that iframe do if not
provided any kind of values it will restrict every thing from the
iframe possible values are (allow-forms,allow-scripts,allow-
downloads,allow-popups,allow-top-navigation)
Global Attributes
using id for uniquely identifying the element
using class for applying/selecting the group of elements
using data-* attribute for storing extra information about
elements
using tab-index for controlling if user can reach it through tab
or not (use -1 for removing the control)
using title for tooltip/extra information about the element
using lang attribute for specifying the language of the element
using disabled for disabling any element
using hidden for hiding the element
using contenteditable for allowing user to edit the information
using style attribute for styling the elements
using draggable attribute for specifying if element can be
dragged or not
QuickBites
Div element has no meaning at all need to use whenever there is no meaning at all
and should be last resort
Blockquote: used as sematic tag to quote an external information which takes cite as an
attribute which can help for serch engines to render fast it will not render in user view just
adds some space
Example :
Strong: used for bold text <strong> text <strong>
Em: for emphasising text <em>Text</em>
Ul; For underlining the text <u>Text</u>
del for strike through in the text <del>text</del>
<progress> tag is used for showing progress bars and html can be written inside it for a
fallback incase progress element is not supported (suppots max and value)
Use figcaption for providing the caption to the image and use figure element for wrapping
both image and its caption
Use details and summary for the accordion actions
<sup> for superscript and <sub> for subscript
<address> and <time> for representing respective information
<pre> for preserving any line breaks or spaces in the code
<code> for representing any code elements
<template> this just used for storing something which is hidden on pageload and can be
used later after by js
