Scribd
Upload
8 views2 pages

HTML CSS Notes Detailed

The document provides detailed notes on HTML forms, including their structure, attributes, and common elements used for user input collection. It also covers iframes for embedding web pages, responsive web design techniques, and the fundamentals of CSS for styling web pages. Key topics include CSS syntax, selectors, the box model, and advantages of using CSS in web development.

Uploaded by

MAHARAJA A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views2 pages

HTML CSS Notes Detailed

The document provides detailed notes on HTML forms, including their structure, attributes, and common elements used for user input collection. It also covers iframes for embedding web pages, responsive web design techniques, and the fundamentals of CSS for styling web pages. Key topics include CSS syntax, selectors, the box model, and advantages of using CSS in web development.

Uploaded by

MAHARAJA A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Forms and CSS – Detailed Notes

1. HTML Form
HTML forms are used to collect user input and send it to the server for processing. Forms can
contain text fields, checkboxes, radio buttons, file inputs, and more.

Structure:
<label>Name:</label> <input type="text" name="username"> <input type="submit"
value="Submit"> </form>

Form Attributes:
- action: Specifies the URL to send form data.
- method: HTTP method used (GET or POST).
- target: Specifies where to display the response (e.g., _blank).
- enctype: Defines encoding type (for file uploads use multipart/form-data).
- autocomplete: Enables or disables autofill.
- novalidate: Disables HTML form validation.

Common Form Elements:


, , , , , , , and .

2. Working with IFrames


An iframe (Inline Frame) is used to embed another webpage inside the current HTML document.

Example:
<iframe src="[Link] width="600" height="400" title="Example"></iframe>

Attributes:
- src: URL of the page to display.
- width/height: Set size of iframe.
- name: Used for targeting.
- allowfullscreen: Enables fullscreen display.
- sandbox: Restricts iframe capabilities for security.

3. Building Responsive Webpages


Responsive web design makes web pages look good on all devices (desktops, tablets, and
phones).

Techniques:
1. Viewport Meta Tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Use relative units (% or em) instead of pixels.
3. Use CSS Flexbox and Grid for layouts.
4. Use media queries to adapt styles:
@media (max-width: 600px) { body { background-color: lightblue; } }
4. Cascading Style Sheets (CSS)
CSS is used to design and style web pages. It controls layout, colors, fonts, spacing, and more.

CSS Syntax:
selector { property: value; }

Example: h1 { color: blue; text-align: center; }

Applying CSS:
- Inline: <h1 style="color:red;">
- Internal: <style>h1 { color:blue; }</style>
- External: <link rel="stylesheet" href="[Link]">

Selectors:
Universal (*), Element (p), Class (.class), ID (#id), Grouping (h1, p), Descendant (div p).

Margins and Padding:


Margin = space outside the border.
Padding = space between border and content.

Text and Font Properties:


- text-align, text-decoration, text-transform, letter-spacing, word-spacing, text-shadow.
- font-family, font-size, font-style, font-weight.

Box Model:
Every element is a box with content, padding, border, and margin.
Example:
div { margin:10px; border:1px solid black; padding:5px; }

Positioning:
- static, relative, absolute, fixed, sticky.
z-index determines which element appears on top.

CSS Advantages:
1. Separation of design and content.
2. Faster page loading.
3. Easier maintenance.
4. Consistent design across pages.

You might also like