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

HTMLComplete Notes

HTML is the standard markup language used to define the structure of web pages. HTML uses tags to describe and define the different parts of a web page like headings, paragraphs, lists, links, images, and more. Common tags include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, and <img> for images.

Uploaded by

Srija Ponnu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTMLComplete Notes

HTML is the standard markup language used to define the structure of web pages. HTML uses tags to describe and define the different parts of a web page like headings, paragraphs, lists, links, images, and more. Common tags include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, and <img> for images.

Uploaded by

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

HTML Introduction

HTML, or Hyper Text Markup Language, is the standard markup language


for creating web pages and web applications.
It is used to define the structure and content of a web page, and is
interpreted by a web browser to render the page into a visible or audible
form.
The HTML uses a markup language which is called Tags.
Tags are enclosed within '<TagName>'
There are 6 types of tags, please check the below.
1. Structural tags: Describes the structure of the web page.
Ex : <!DOCTYPE html>, <html>, <head>, and <body>
2. Formatting tags: Helps to format the content or helps to add the links
to the content.
Ex : <h1>, <p>, and <a>
3. List tags: Used to show content in an order.
Ex : <ul> and <li>
4. Image tags: Image tags are used to add images to the web page.
Ex : <img>
5. Form tags: Form tags are used to build forms to the page.
Ex : <form>, <input>, and <button>
6. Meta tags: Used provide information about an HTML document to
search engines, browsers, and other web services.
Ex : <meta>
The basic structure of HTML :

Types of Tags in HTML :

Single tags:
This tags will not have any closing tags they themselves are
closing and opening tags
Ex :
<!DOCTYPE html> : Describe the document type
<meta> : Meta tags in HTML provide additional information
about a web page to search engines and browsers.

Empty tags:
HTML empty tags are self-closing tags that do not need a
closing tag because they do not have any content.
Ex :
<br>: Insert a line break
<hr>: Insert a horizontal rule
<img>: Insert an image
<input>: Insert an input field
<link>: Insert a link to a CSS file or other resource

Paired tags :
Tags that have a start tag and an end tag.
Ex :
<p>, div

Semantic tags :
Tags that describe the meaning of the content they contain.
Ex :
<header>, <article>, <footer>, <table>

Non-semantic tags :
Tags that do not describe the meaning of the content they contain.
Ex :
<div>, <span>, <br>

Elements :

HTML elements are the building blocks of web pages, defined by start
and end tags, and can contain content and attributes.

There are 3 types of elements in HTML.


1. Inline
2. Block
3. Inline-Block
Types of Elements :

1. Inline Elements :
Inline takes up only as much space as its content and does
not start on a new line. Can be used to create links, images, and other
small elements.
Ex :
<a>: Anchor link
<span>: Span element
<img>: Image element
<input>: Input field
<button>: Button

2. Block- level Elements :


Block-level Starts on a new line and takes up the full
width of its container. Can be used to create paragraphs, headings, and
other structural elements of a web page.
Ex :
<div>: Division element
<p>: Paragraph element
<h1> to <h6>: Heading elements
<ul> and <ol>: List elements
<table>: Table element

3. Inline- Block Elements :


Inline-block Takes up only as much space as its
content and starts on a new line. Can be used to create buttons, images,
and other elements that need to be displayed as boxes.
Ex :
<button>: Button
<img>: Image element
<input>: Input field

Attributes :
Every tag will have its own attributes. Using these attributes we can
customize and recognize the tags.
Ex :
Class : used to identify an tag.
Id : It works similarly to class.
Height: can customize height of the tag.
Width : can customize the width of the tag.

There are two types of attributes :


1. Global Attributes
2. Pre defined Attributes

Global Attributes :
These attributes can be used by any tag. There are not
limited to certain tags. You can use it in the head section to the body
section.

 accesskey - Specifies a keyboard shortcut for the element.


 class - Specifies one or more class names for the element. Classes can
be used to style the element with CSS.
 contenteditable - Specifies whether the element's content can be edited
by the user.
 dir - Specifies the direction of the element's text. Can be either ltr (left-
to-right) or rtl (right-to-left).
 draggable - Specifies whether the element can be dragged by the user.
 dropzone - Specifies whether the element can be used as a drop zone
for draggable elements.
 hidden - Specifies whether the element is hidden from the user.
 id - Specifies a unique ID for the element. IDs can be used to style the
element with CSS or to reference it with JavaScript.
 lang - Specifies the language of the element's content.
 spellcheck - Specifies whether the element's content should be
spellchecked by the browser.
 style - Specifies inline CSS styles for the element.
 tabindex - Specifies the element's place in the tab order.
 title - Specifies a tooltip that should be displayed when the user hovers
over the element.

Text Tags :
In HTML we use the text tags to edit the content in our web page. There are
different types of text tags that we use to edit the content on our page.
1. Headings: used to set headings at different levels in different sizes.
a. We have the heading tags in a range of h1 to h6.
b. The higher we go the smaller text we get.
2. Paragraph: used to write the content as a paragraph
3. Lists: used to describe the content in a list
a. Lists are two types :
i. Ordered List
ii. Unordered List
b. Every list used the <li> tag in order to specify the points.
4. Definition List: Used to make the content a definition.
a. In Definition, we have the different tags which are used to specify
the content as heading and explanation.
Ex :
dl : used to declare the declaration list
dt : used to declare the definition term
dfn : used to declare the side heading for the definition
dd : used to declare the definition data
5. Table: Used to create tables in our web page.
a. To create tables we use these tags.
Ex :

<table>: Defines a table.


<tr>: Defines a table row.
<th>: Defines a table header cell.
<td>: Defines a table data cell.
<caption>: Defines a table caption.
<thead>: Defines a table header section.
<tfoot>: Defines a table footer section.
<tbody>: Defines a table body section.
<colgroup>: Defines a group of columns in a table.
<col>: Defines a column in a table.
6. Graphic Tags : Used to add pictures to the web page.
a. We have two graphic tags that we can use on our webpage.
i. Image
ii. Figure
a. Image : An image tag is used to add a picture to the webpage.
a. To insert an image we use the image tag - <img src =” ”>
b. Figure : A figure tag is used to add a picture along with the
description.
a. We use the combination of the image tag and figure tag in
order to add the description for the image.
b. We have to place the image tag in <figure> tag and add
the description tag <figcaption>.
7. Link tags : Links in HTML are used to connect the two pages or
resources to a webpage.
a. We can select or click on a link. When we click on it will take us
to a new page.
b. We select different options whether we need to open the link in
the same page or a different page, using an attribute called target.
c. To link the content in a page we need to use the anchor tag <a>.
d. We use the href attribute in order to add the address or path.
8. Multimedia Tags : Used to add multimedia data to our web page.
a. We have the following tags in order to add the multi-media data.
i. Audio – add the audio to the web page.
ii. Video – add the video to the web page.
b. We need to use the control tag to provide the playback options
for both video and audio tags.
i. src: Specifies the URL of the audio/video file.
ii. controls: Adds audio/video controls (play, pause, volume,
etc.).
iii. autoplay: Specifies that the audio/video should start playing
automatically.
iv. loop: Specifies that the audio/video should restart when
finished.
v. preload: Specifies if and how the audio/video should be loaded
when the page loads.

Anchor tag : .

1. Internal Linking (Within Project):


Internal linking is used to create links within the same website or
project. It helps users navigate between different pages or sections of
the same project.

Syntax :

<a href = “localPage_Address”> content </a>

2. External Linking (From Our Project to External Pages):


External linking is used to create links that lead to pages outside of the
current website or project.

Syntax :

<a href = “External_Website”> content </a>

3. Hash-Based Navigation (Within Page):


Hash-based navigation is used to create links that navigate to specific
sections or elements within the same page. It is often used for smooth
scrolling to different sections of a long webpage.
Syntax :

<!-- Linking to a section within the same page -->


<a href="#section-id">Go to Section</a>

In this case, the `#section-id` refers to the `id` attribute of an HTML


element within the same page. For example:

<h2 id="section-id">Section Title</h2>


<p>This is the content of the section.</p>
Figure Tag :
The `<figure>` tag in HTML is used to encapsulate any content that is
referenced from the main content, such as images, diagrams, photos, code
listings, etc. It is often used in conjunction with the `<figcaption>` (figure
caption) element to provide a caption for the content. The `<figure>` and
`<figcaption>` elements help to associate a caption with the content it
describes, providing context.
Here's an example of how the `<figure>` tag can be used:
Ex :
<figure>
<img src="example.jpg" alt="An example image">
<figcaption>Caption for the image</figcaption>
</figure>
<figure>` Tag:
- Encloses the content being referenced (in this case, an image).
- It is a container for the referenced content.

<img>` Tag:
- The actual content being referenced (image, diagram, etc.).
- The `src` attribute specifies the URL of the content.
- The `alt` attribute provides alternative text for accessibility.

<figcaption>` Tag:
- Provides a caption for the content within the `<figure>` element.
- Describes or adds context to the content.
This structure is useful for semantic HTML and is particularly helpful for
accessibility. Screen readers, for example, can use the association between
the `<figure>` and `<figcaption>` to provide additional information about
the content to users with visual impairments.

Example with other content (not an image):

<figure>
<code>
<pre>
// Some code snippet
function example() {
console.log("Hello, World!");
}
</pre>
</code>
<figcaption>Code snippet example</figcaption>
</figure>

<section>:
Functionality:
Represents a thematic grouping of content, typically with a heading.
Working:
It helps in organizing the content of a page into sections, making it
semantically meaningful and improving accessibility.

<header>:
Functionality:
Represents introductory content at the beginning of a section or page.
Working:
Typically used to contain headings, logos, navigation menus, and other
elements that are usually found at the top of a page or section.
<main>:
Functionality:
Represents the main content of the document.
Working:
It contains the primary content of the web page, excluding headers,
footers, and sidebars. It's intended to directly relate to or be the central focus
of the document.

<nav>:
Functionality:
Represents a section of the page dedicated to navigation links.
Working:
It's used to define a navigation menu. Inside a <nav> element, you
might find a list of links or other navigation-related elements.

<footer>:
Functionality:
Represents a footer for a section or page.
Working:
It typically contains metadata, copyright information, links to related
documents, or other information relevant to the section or page.
<span>:
Functionality:
Represents an inline container that doesn't inherently represent
anything.
Working:
It's used to apply styles or scripting to a specific part of the text
without affecting the structure. It's often used with CSS to style specific
portions of text.

<article>:
Functionality:
Represents a self-contained piece of content that could be distributed
and reused independently.
Working:
It's used for content that makes sense on its own, such as a news
article, blog post, or forum post. It often includes a heading and may contain
images, paragraphs, or other elements.

<aside>:
Functionality:
Represents content that is tangentially related to the content around it,
such as a sidebar.
Working:
It's often used for content like a sidebar, pull quote, or related links. It
is not the primary content but provides additional context or supplementary
information.

Form Tags :
This form uses the following attributes:
1. The <form> tag uses the action attribute to specify the URL of the
page where the form data will be submitted, the method attribute to
specify the HTTP method that will be used to submit the form data,
and the id attribute to specify the ID of the form.
a. In forms we have the following attributes
i. Action : defines what type of action need to perform in
that form
1. Syntax : action = “Relative URL & Absolute URL
or empty”
ii. Method : defines how the data needs to transfer.
1. Syntax : method = “GET /POST /PUT /DELETE”
a. GET : Appends form data to the URL in a query
string. Suitable for small amounts of data and
non-sensitive information.
b. POST : Sends form data in the body of the
HTTP request. Suitable for large amounts of
data and sensitive information. It is more secure
to transfer the data.
2. The <input> tags use the id, name, type, placeholder, required, max,
min, maxlength, pattern, value, size, accept, alt, checked, disabled,
readonly, src, and width attributes.
a. We use different input types to accept the input from user.
i. Text – accepts text from user
ii. Checkbox – allows user to select multiple options
iii. Radio – gives a radio button to select the between
multiple options
iv. Submit Button – acts as submit
b. We have the following attributes for input tag
i. Type : what type of input like text, checkbox, radio,…
1. Syntax : type = ” Text/ radio/ checkbox/submit/
reset/file”
ii. Name : used to identify or group the set of data together
1. Syntax : name = “DefineGrpName”
iii. Placeholder : used to give a name inside the textbox/ area
so that the user can understand what needs to enter.
1. Syntax : placeholder = “description”
iv. Value : used to give a certain value for the so that it will
collect at server side
1. Syntax : value = “name/value”
v. Checked : will the check the selected value when the form
loaded by default.
1. Syntax : <input type = “checkbox/radio” checked>
3. The <label> tags use the for attribute to specify the ID of the input
field that the label is associated with.
4. The <select> tag uses the id, name, size, multiple, and disabled
attributes.
a. The <option> tags use the value, label, and selected attributes.
b. Syntax :
<select>
<option> dropDown value 1</option>
<option> dropDown value 2</option>
<option> dropDown value 3</option>
……
<option> dropDown value n</option>
</select>
5. The <textarea> tags use the id, name, rows, cols, placeholder, and
wrap attributes.
a. Will give a some text area to enter the data to the client.
b. There are some attributes we can use for the text area input tag
i. Rows : will create the rows to enter the data (height).
ii. Cols : will create the columns to enter the data (width).
6. The <button> tags use the type, form, value, and disabled attributes.
a. We can use the same submit and reset input types to this one
as well.
7. The <fieldset> tags use the id, name, and disabled attributes. Group
related elements together.
a. The <legend> tag uses the align attribute.
8. The <datalist> tag uses the id attribute.
a. Is similar to select tag but the only difference is it will give
suggestions instead of values.
b. Due to that we can enhance the user experience.
i. Syntax :
<input list="listName" >
<datalist id=" listName ">
<option value="value 1">
<option value="value 2">
<option value="value 3">
……
<option value="value N">
</datalist>
9. We can also use the disabled attribute to disable the input field.

You might also like