Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

HTML NOTE.

This document collection of three files project

Uploaded by

surjeetkaran777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML NOTE.

This document collection of three files project

Uploaded by

surjeetkaran777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

1

HTML CSS JavaScript

2
What is HTML?
• Hyper Text Markup Language
• HTML is the code that is used to structure a web page and its
content.
• HTML element tell the browser how to display the content.
• An HTML document is a text document saved with the .html or
.htm extension, containing text and specific tags enclosed in < >
• Created by Tim Berners-Lee in 1991 to structure content on the
World Wide Web.

HTML Tags
The component used to design the structure of websites are called
HTML tags.
Basically, It is a container for some content or other HTML tags. Most
of html elements have opening & closing tags.
An HTML element is a complete set that consists of a start tag (or
opening tag), content, and an end tag (or closing tag).

<p> This is a paragraph</p>

content

Element

3
Basic HTML Page

<!DOCTYPE html> tells browser you are using HTML5


<html> root of an html document
<head> container for metadata
<title>My First Page</title> page title
</head> closing tag
<body> defines the document body
<p>hello world</p> contain data in paragraph tag
</body>
</html>

❖ <!Doctype>

• The <!DOCTYPE > declaration represents the document


type and helps browsers to display web pages correctly.
• It must only appear once, at the top of the page.
• The <!DOCTYPE> declaration is not case sensitive.

4
❖ Head

• The <head> element contains metadata and links to


resources for the HTML document.
• It is placed before the <body> element.

Common elements inside <head> include:


o <title>: Specifies the document’s title (displayed in
the browser tab).
o <meta>: Defines metadata like character set,
viewport settings, and SEO keywords.
o <link>: Links to external resources like stylesheets.
o <style>: Contains internal CSS for styling.
o <script>: Embeds or links JavaScript files.
o <base>: Sets a base URL for relative links.
o <noscript>: Provides fallback content for browsers
with JavaScript disabled.

5
❖ Meta
• Defines metadata about an HTML document. Metadata is
data(information) about data.
• Always placed inside the <head> tag.
• Not displayed on the page, but machine-parsable.
• Used by browsers, search engines, and other services.
Common Uses:

o Character encoding: <meta charset="UTF-8">


o Page description: <meta name="description"
content="Page description">
o Keywords: <meta name="keywords"
content="HTML, CSS, JavaScript">
o Author: <meta name="author" content="Author
Name">
o Viewport settings: <meta name="viewport"
content="width=device-width, initial-scale=1.0">

• Viewport: Controls the user's visible area of a web page.


• width=device-width: Sets page width to device width.
• initial-scale=1.0: Sets the initial zoom level when the page
loads.

▪ <html lang=”en”>

• The lang="en" attribute specifies that the content of the


HTML document is in English.
• It is added to the <html> tag, like this: <html lang="en">

6
❖ Title
1. The <title> tag defines the webpage's title, shown in the
browser tab and bookmarks.
2. It is placed within the <head> section of the HTML
document.
3. Essential for SEO, influencing search engine rankings and
click-through rates.
4. It appears in the browser tab, bookmarks, and search
engine results.
5. Improves accessibility by helping users understand the
page's purpose.
6. Only one <title> tag is allowed per HTML document.

❖ Body
1. The <body> tag defines the main content of an HTML
document displayed in the browser.
2. It contains all visible elements like text, images, videos,
and interactive features.
3. Placed directly after the <head> and before the closing
<html> tag.
4. Only one <body> tag is allowed per HTML document.
5. Attributes like class, id, and style can be used to apply
styles and scripts.
6. JavaScript can manipulate the <body> content for
dynamic updates.

7
First HTML File name [ index.html ]
It is the default name for a website's homepage.

HTML is NOT case sensitive


✓ <html> = <HTML>
✓ <p> = <P>
✓ <head> = <HEAD>
✓ <body> = <BODY>

❖ Comment
▪ Syntax: <!-- Comment -->
▪ Not displayed on the webpage.
▪ Explains code, disables code, or adds notes.

Example: <!-- This is a sample comment -->

8
❖ Tags in HTML

9
10
Document Structure

• <html>
• <head>
• <title>
• <body>
• <a href="URL" target="_blank"> (for linking to another
page or resource)

11
Text Content

• <span> (for inline text)


• <div> (for block-level grouping)
• <br> (line break)
• <hr> (horizontal rule)

Lists

• <ul> (unordered list)


• <ol> (ordered list)
• <li> (list item)

Tables

• <table>
• <thead>
• <tfoot>
• <tr> (table row)
• <th> (table header)
• <td> (table cell)

Forms

• <form>
• <select>
• <input type="text">
• <input type="password">
• <input type="email">
• <input type="radio">
• <input type="checkbox">
• <textarea>
• <button>

12
• <option>
• <fieldset>
• <legend>

Semantic Elements

• <header>: Introductory content like logos or headings.


• <footer>: Footer content like links or metadata.
• <nav>: Navigation links section.
• <main>: Main content of the page.
• <figure>: Groups images or media.
• <figcaption>: Caption for <figure> content.
• <section>: Thematic grouping of content.
• <article>: Standalone content like posts.
• <aside>: Secondary content like sidebars.

Meta Tags

• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width,
initial-scale=1.0">
• <meta name="description" content="Description here">
• <meta name="keywords" content="keyword1,
keyword2">

Attributes

• id="value"
• class="value"
• placeholder="value"
• title="value"
• disabled
• alt="value"
• checked
13
• required
• readonly
• href="URL"
• type="type"

Media

• <audio>
• <video>
• <source>
• defer (for deferring the execution of a script)
• async (for asynchronous script loading)

Linking & Imports

• <link rel="stylesheet" href="styles.css">


• <link rel="icon" href="icon.ico">
• <style> (for embedded CSS)
• <script> (for JavaScript)

❖ Attributes
Attributes defines the properties or characteristics of a html
element.
▪ Attributes modify the behavior, functionality, or
appearance of an element by providing additional
information.
▪ They allow you to customize the behavior of HTML
elements.
Example: <html lang="en">

14
❖ Heading tags
• Its defines heading
• Displayed in larger and bolder font

There are 6 level of heading tags


1. h1 (most important)
2. h2
3. h3
4. h4
5. h5
6. h6 (least important)
❖ Paragraph tags
Used to create paragraph
Syntax: <p>this is paragraph</p>

❖ <br>
Used to insert black line in the document. Self closing tag.
Syntax: <br>

❖ Horizontal ruler
Used to draw horizontal line across the web page.
Syntax: <hr>

❖ Bold tags
Defines bold text.
Syntax: <b>Sabika</b>

❖ Italic tag
Defines italic text .
Syntax: <i> Afrin</i>
15
❖ Big tag
Defines big text.
Syntax: <big></big>

❖ Small tag
Defines small text.
Syntax: <big></big>

❖ Sup tag
Defines superscripted text.
Syntax: <sup>hello</sup>

❖ Sub tag

Defines subscripted text.


Syntax:<sub>hello</sub

❖ Anchor Tag
Used to add links to your page
Syntax: <a href="https://google.com"> Google </a>
<a href="https://example.com" target="_blank">Visit
Example</a>

href stands for Hypertext Reference. It defines the URL or path


the hyperlink points to.
The target attribute in an <a> tag specifies where to open the linked
document:
_self: Default, opens in the same tab.
_blank: Opens in a new tab or window.
_parent: Opens in the parent frame.

16
_top: Opens in the full body of the window.
_framename: Opens in a named frame or iframe.

❖ Image Tag
Used to add images to your page
Syntax: <img src="/image.png" alt="Random Image">
scr means source & alt means alternative text.

❖Video Tag
<video src="myVid.mp4"> My Video </video>
Attributes
- controls
- height
- width
- loop
- autoplay

❖Pre Tag
Used to display text as it is (without ignoring spaces & next line)
Syntax: <pre> This
is a sample
text.
</pre>

17
❖Div Tag
o Div is a container used for other HTML elements
o Block Element (takes full width)
o Used for grouping and organizing content.
o Primarily for styling and layout with CSS.

❖Span Tag
o Span is also a container used for other HTML elements
o Inline Element (takes width as per size)
o used for styling or grouping small pieces of content within a line.

Example:

<body>
<div>
<h1> Welcome to my website </h1>
</div>

<div>
<p>This is a simple example using div </p>
</div>
</body>

18
List : Div Tags
<address> <fieldset>
<article> <figcaption>
<aside> <figure>
<canvas> <footer>
<dd> <form>
<div> <h1>-<h6>
<dl> <header>
<dt> <hr>
<main <li>

List : Span Tags


<a> <i>
<img> <input>
<label> <select>
<small> <span>
<strong> <sub>
<sup> <textarea>
<abbr> <acronym>
<b> <big>
<br> <button>
<cite> <script>

❖List in HTML
Lists are used to represent real life list data.
▪ Unordered list
<ul>
<li> Apple </li>
<li> Mango </li>
</ul>

19
▪ Ordered list
<ol>
<li> Apple </li>
<li> Mango </li>
</ol>

❖Table
• <table> defines a table structure
• <tr> is used for table rows.
• <td> defines table data (cells).
• <th> defines table headers.

Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>afrin</td>
<td>21</td>
</tr>
<tr>
<td>sabika</td>
<td>23</td>
</tr>
</table>

Output:

20
1. <caption>: Provides a title or
description for the table.
<table>
<caption>EmployeeInformation</caption>
</table>

2. colspan: Specifies how many columns a cell should


span.
<td colspan="2">Merged Cell</td>

3. <thead>: Groups the header content in a table


(usually used with <th>).
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>

4. <tbody>: Groups the body content of a table


(usually used with <td>).
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>

21
❖ Form in HTML
Forms are used to collect data from the
user.
1. <form>: Container for all form elements, specifies
action and method (GET/POST).
2. <input>: Defines interactive controls (text, radio,
checkbox, button).
3. <label>: Associates a label with a form element for
accessibility.
4. <textarea>: Multi-line input for text content.
5. <select> and <option>: Creates dropdown menus
for selecting values.
6. <button>: Creates clickable buttons for form
submission or actions.
7. Forms are used for collecting user input and
submitting it to a server.
8. Checkbox: A checkbox is an input element in forms that
allows users to select one or more options from a list.

22
1. USE AUTOFOCUS FOR INPUT FIELDS
Explanation: The autofocus attribute automatically focuses
on a specific input field when the page loads, improving the
user experience for login or search pages.

2. DISABLE AUTOCOMPLETE FOR FORMS


Explanation: You can disable the browser's autocomplete
feature for input fields where you want users to manually
enter data.

3. ADD PLACEHOLDER TEXT IN INPUTS

Explanation: The placeholder attribute adds a hint inside


input fields to guide users on what to enter.

23
4. USE THE REQUIRED ATTRIBUTE
Explanation: The required attribute ensures users fill in a particular
field before submitting the form.

5. USE MAILTO: FOR EMAIL LINKS


Explanation: Create a clickable email link that opens the default
email client with a pre-filled recipient.

24
25
Output:

26

You might also like