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

HTML Notes

Uploaded by

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

HTML Notes

Uploaded by

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

HTML

What is html?

- Html stands for hyper text markup language was created by Tim Berners-Lee in 1991 as
a standard for creating web pages.
- HTML is like the skeleton of a website.
- Html gives structure to web page
- It contains text known as tags
- Tags are understandable by browser.

What is a html document?

- An HTML document is a text document saved with the '.html' or '.htm' extension,
containing text and specific tags enclosed in '< >'.

What is tag?

- Html instructions known as tags


- An HTML tag acts as a container for content or other HTML tags.
- Tags are words enclosed within < and > angle brackets.

Type of tags in html

1. Open tags or container tags


- It has a range
- E.g. <p></p>
2. Close tags or empty tags
- It does not have a range.
- E.g. <br/>, </hr>

What is an html element?

- An HTML element is a complete set that consists of a start tag (or opening tag), content,
and an end tag (or closing tag).
- HTML Element = Start Tag + Content + End Tag
- E.g.
- <h1>Content</h1>

1|Page
What is an attribute in html?

- 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.
- E.g.
- <a href="https://www.example.com">Go to Example</a>

Basic structure of html

<!doctype html>

<html>

<head>

<titile></title>

</head>

<body>

<h1>hello html</h1>

</body>

</html>

<!doctype html5>

- It defines that this document is the html5 document

<html>

- Root element for html document

<head>

- It contains meta information about the web page

2|Page
<title>

- Element specifies a title for the HTML page (which is shown in the browser's title bar or
in the page's tab)

<body>

- Element defines the document's body, and is a container for all the visible contents, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Heading tags

- Its defines heading


- Displayed in larger and bolder font
- There are 6 level of heading tags
1. <h1></h1>
2. <h2></h2>
3. <h3></h3>
4. <h4></h4>
5. <h5></h5>
6. <h6></h6>

Text formatting tags

1. Paragraph tags
- Used to create paragraph
- Syntax <p>this is paragraph</p>

2. Used to insert black line in the document


- Syntax <br>

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

4. Physical and logical tags

A. Physical tag
- It describes the physical appearance of the content.
- Physical tags are used to indicate exactly how specific characters are to be formatted.

3|Page
1. Bold tags
- Defines bold text
- <b></b>

2. Italic tag
- Defines italic text
- <i></i>

3. Big tag
- Defines big text
- <big></big>

4. Small tag
- Defines small text
- <big></big>

5. Sup tag
- Defines superscripted text
- <sup>hello</sup>

6. Sub tag
- Defines subscripted text
- <sub>hello</sub>

B. Logical tags
- These tags indicate the purpose of text, such as whether it's a heading, code, or an
address.

1. Abbreviation tag
- It used to defines abbreviation or short of an element
- <abbr title=”world health organization ”>WHO</abbr>

2. Address tag
- Used to indicate the contact information about person or organization
- Text inside the address tag will be displayed in italic format.
- <address>shant niwas, pune</address>

4|Page
3. Blockqoute
- Used to specify the text is quoted from another section
- Cite tag –it specify source of quotation (auther)
- <blockqoute>
<p>
Google is an American multinational corporation technology
company that offers a variety of products and services
</p>
<cite>
http://www.google.com
</cite>
</blockqoute>

4. Code tag
- Used specify the text is computer code
- <code></code>

5. Del tag
- Used to specify portion of text deleted from document
- <del>the content is deleted</del>

6. Ins tag
- Specify text has been inserted into document
- <del>deleted text</del> <ins>inserted text</ins>

7. Def tag
- Used to mark term that is being defined in document
- <p>
<def>java</def> is programming language.
</p>

8. Kbd tag
- Used to define keyword input
- <kbd>this is keyboard input</kbd>

9. Samp tag
- Used to define sample output from computer program
- <samp></samp>

5|Page
10. Strong tag
- Used to define text with strong importance
- <strong>java is high level programming language</strong>

11. Var tag


- Used to define variable in programming or mathematical expression
- Content displayed in italic format
- <var></var>

Semantic and non-semantic element

Semantic element

- Semantic elements clearly describes the purpose of content they contain to both browser
and developer

1. Article tag
- Used to define article
- <article></article>

2. Section tags
- Represents a thematic grouping of content.
- Defines section of documents such as chapter , header or any other content
- <section></section>

3. Mark tag
- Used to mark or highlight the content
- <mark></mark>

4. Figure tag
- It used to add self-contained content like illustration , diagrams and photos in a document
- Figcaption tag- it used to set caption image
- E.g.
<figure>
<img src=””>
<figcaption></figcaption>
</figure>

6|Page
5. Details tag
- It used for content or information which initially hidden but could be displayed if user
wants to see it
- Summary tag
- Used with details tag to specify visible heading
- <details>
<summary>More Info</summary>
<p>This is the additional information that can be revealed
by clicking the summary.
</p>

</details>

6. Header tag
- Used to define the introductory content of a section or a webpage.
- It typically contains elements like headings, logos, navigation links, and other
introductory information relevant to the content that follows.
<header>
<h1>welcome to my web page</h1>
</header>

7. Main tag
- The <main> tag is used to encapsulate the main content
- <main></main>

8. Footer tag
- used to define the footer section of a document
- it typically contain information about copyright information , contact details, links related
documents or social media.
- <footer></footer>

Non semantic elements

- A non-semantic element don’t have any meaning.


- They don’t tell anything about content they contain
- Used for only grouping purpose

7|Page
1. Div

- Its generic container for grouping other HTML elements together.


- It does not provide any specific meaning or structure on its own but is commonly used for
layout and styling purposes.

<div><div>

2. Span

- The <span> tag in HTML is an inline, non-semantic element used to group and style a
portion of text or other inline elements.
- It does not provide any meaning or structure but is useful for applying CSS styles or
JavaScript functions to a specific part of content.

<span><span>

List in html

- In html list is way to display item in structured format, either in ordered or unordered
way.
- There are main three type of list

1. Unordered list
2. Ordered list
3. Descriptive list

1. Unordered list

- An unordered list displays items in bullets format


- Unordered list enclosed within <ul></ul> tag
- Each list item is enclosed within <li></li> tag
- Type attribute specify type of bullet
- Disc – solid circle
- Square – solid square
- Circle – hollow circle

<ul type=”disc”>

<li> item 1</li>

<li> item 2</li>

<li> item 3</li>

</ul>

8|Page
2. Ordered list

- An ordered list displays the items in numbered format


- Ordered list enclosed within <ol></ol> tag
- Each element enclosed within <li></li> tags
- Type attribute specify type of sequence (bullet)
- Type- 1, A, a, I, i

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

3. Definition list or descriptive list

- Definition list is not list of items.


- Its list of term and explanation of term

<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>

<dt>CSS</dt>
<dd>A style sheet language for designing web pages</dd>
</dl>

4. Nested list
- The list inside another list is known an nested list

9|Page
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
</ul>

Img tag

- The <img> tag in HTML is used to embed an image in a webpage.


- It is an empty tag, means it doesn't have a closing tag, and it uses attributes
- Key Attributes of the <img> Tag:
1. Src - Specifies the path to the image file (can be a relative or absolute URL).
2. alt (Alternative Text) -Provides alternative text for the image if it cannot be displayed.
3. width and height-Used to specify the dimensions of the image. You can define the
size in pixels or percentage.
4. Title-Displays a tooltip when the user hovers over the image.
5. Loading-Specifies whether to load the image immediately (eager) or defer loading
until it’s visible on the screen (lazy).

<img src="nature.jpg"
alt="Beautiful nature view"
width="400"
height="300"
title="Nature view"
loading="lazy">

10 | P a g e
Anchor tag

- The anchor tag (<a>) in HTML is used to create hyperlinks.


- It allow users to navigate from one page to another or to different sections of the same
page.
- It can link to external websites, internal pages, or even specific parts of a page using IDs
(known as "anchor links").

- Key Attributes of the <a> Tag:

1. href (Hypertext Reference)- Specifies the destination URL of the link. This can be an
external link, an internal page, or an anchor within the same page.
2. Target-Defines where the linked document will open.
a. _blank: Opens the link in a new tab or window.
b. _self: Opens the link in the same tab (default behavior).
3. Title-Provides additional information about the link, displayed as a tooltip when the
user hovers over the link.

<a href="https://www.example.com" target="_blank" title="Visit


Example website">

Visit Example

</a>

- Linking to Sections within the Same Page:


<!-- This is the section we're linking to -->
<h2 id="section1">Section 1</h2>

<!-- Link to the section -->


<a href="#section1">Go to Section 1</a>

- Displaying image
<a href=”nature.jpg”>view image</a>

11 | P a g e
Table tag

- Html table is used to display data in tabular format(rows and columns)


- <table></table> It is container for entire table
- <thead></thead> It groups table heading rows
- <tbody></body> It groups table data rows
- <th></th> It defines table heading cell that is usually bold and centered
- <td></td> It defines table data cell

- Attributes of <table> tag

1. Border – add the border around the border and its cell
2. Cellpadding –add space between content and cell wall
3. Cellspacing –add the space between cells
4. Width –sets width of table
5. Align –align the table(center, left, rigth)
6. bgColor=”red”

- Attributes of <td> and <th> tag

1. Colspan -The colspan attribute is used to make a cell span across multiple columns.
This means that a single cell can take the place of multiple cells horizontally.

2. Rowspan -The rowspan attribute is used to make a cell span across multiple rows.
This means that a single cell can take the place of multiple cells vertically.

12 | P a g e
<table border="2" cellpadding="10" cellspacing="10" width="300"
align="center" bgColor="white">

<thead>

<tr>

<th>Id</th>

<th>Name</th>

</tr>

</thead>

<tbody>

<tr>

<td>101</td>

<td>satyajit</td>

</tr>

<tr>

<td>102</td>

<td>Pranav</td>

</tr>

<tr>

<td colspan="2" rowspan="2"></td>

<td></td>
</tr>

<tr>

<td></td>

</tr>

</tbody>

</table>

13 | P a g e
Pre tag
- The <pre> tag in HTML is used to display preformatted text. It preserves both spaces and
line breaks as they appear in the HTML code, meaning the text is displayed exactly as it
is written inside the tag.

<pre>
This text will appear
exactly as written,
with line breaks and
multiple spaces.
</pre>

Img tag
- Img tag used to embed image in web page.
- It is empty tag , mean doesn’t have closing
- Attributes
- Src –it specifies path or url of image
- Alt –it provides alternative text for image if can’t be displayed
- Title –displays tooltips when user hover over image
- Loading –value(lazy or egger)
- Width and height
<img src=”home.jpg” width=”100” height=”100” alt=”loading”
title=”some info” loading=”lazy”>

Image as link

- When users click on the image, they will be redirected to the specified URL.
<a href=”https://www.google.com”>

<img src=”icon.jpg”>

</a>

14 | P a g e
Image map
- An image map in HTML allows you to define clickable areas (hotspots) on an image that
link to different destinations.
- You can use an image map to create interactive images where different parts of the
image lead to different URLs.
<img src="image.jpg" alt="Image with map" usemap="#mapname">

<map name="mapname">

<area shape="rect" coords="34,44,270,350"


href="https://example.com/page1" alt="Link 1">

<area shape="circle" coords="337,300"


href="htts://example.com/page2" alt="Link 2">

<area shape="poly" coords="220,210,300"


href="https://example.com/page3" alt="Link 3">

</map>

Html character entities


- HTML character entities are special codes used in HTML to represent reserved or special
characters.
- They are used when you want to display a character that might otherwise be interpreted
as HTML code.
- Entities start with an ampersand (&) and end with a semicolon (;).

Iframe tag
- <Iframe> tag specifies the inline frame
- It used to contain or embed another html document within the current html document
- It's commonly used to display content from other websites, like videos, maps, or other
web pages, inside a small section of the main page.
- Attributes
- Src- specifies the address of document to embed in the iframe
- Width and height
<iframe src=”home.html” width=”100” height=”100”></iframe>

15 | P a g e
Html form
- Html form is used to collect user input in the webpage and can then be send to the server
for processing.
- <form></form> In html form tag is used to create form

- Attributes of <form> tag


1. Action –it specifies url where the form data will be send when the form is submitted.
2. Enctype –specifies the encoding type when submitting form, Commonly used for file
uploading. Value is multipart/form-data
3. Method –it specifies http method
a. Get –Send form data as URL parameter , visible in URL
b. Post –Sends the form data in request body more secure for sensitive information.
4. Name –Indentifies the form –useful for accessing form in javascript

Form elements
1. Input tag
- <input/>
- It can take different types using the type attribute.
- Different Values-

1. Text –A single line text field (Default)


o <input type="text" name="username">

2. Password –A text field where character are masked (hidden)


o <input type="password" name="password">

3. Email –A text field for email address , includes basic validation


o <input type="email" name="email">

4. Tel –A text field for telephone number


o <input type="tel" name="phone">

5. Search –A text field designed for search inputs


o <input type="search" name="search">

6. Number –A field for numeric inputs with optional min, max and step attributes
o <input type="number" name="age" min="1" max="100">

7. Radio –A radio button for selecting one option from group


o <input type="radio" name="gender" value="male"> Male
o <input type="radio" name="gender" value="female"> female

16 | P a g e
8. Checkbox –A checkbox for selecting one or more option from group
o <input type="checkbox" name="subscribe" value="yes">
Subscribe to Xyz

9. Range –A slider to select value between specified range


o <input type="range" name="volume" min="0" max="100"
step=”10”>

10. Submit –A button to submit form data to server


o <input type="submit" value="Login ">

11. Reset –A button to reset all form fields to their initial value
o <input type="reset" value="Reset">

12. Image – A graphical version of submit button


o <input type=”image” scr=”icon.jpg”>

13. Date, Datetime-Local, month, week, time

14. Hidden –A field that stores data , without displaying to user


o <input type="hidden" name="userID" value="12345">

15. Color –A color picker


o <input type="color" name="favcolor">

16. File –A filed for file upload


o <input type="file" name="myfile ">

17. Value –defines initial value of field

18. Placeholder –Provides hint text to use of what should be entered in input field

19. Required –It indicated that field must be filled before submitting form

2. Label tag
- Defines label for html elements to make them accessible and user-friendly
o <label for="username">Username:</label>
o <input type="text" id="username" name="username">

3. TextArea tag
- Creates multi-line text input area
- Its useful for larger block of text
o <textarea name="comments" rows="4" cols="50"></textarea>

17 | P a g e
4. Select tag
- Define drop-down list of options
o <select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>

5. Optgroup tag
- It used to group options inside a select dropdown list for easier navigation

o <select name="tech">
<optgroup label="Front-End">
<option value="-1">select tech</option>
<option value="html">html</option>
<option value="css">css</option>
</optgroup>
<optgroup label="Back-end">
<option value="java">java</option>
<option value="php">php</option>
</optgroup>
</select>

6. Button tag
- Creates clickable buttons
- Used to submit form data and also used to perform some action with javascript
o <button type="submit">Submit</button>

7. Fieldset tag
- It groups related filed in the form
- Legend tag
- Provides caption to group

o <fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
</fieldset>

18 | P a g e
8. Datalist tag
- Provides list of predefined options to input field

o <input list="mylist" name="city">

<datalist id="mylist">
<option value="pune"></option>
<option value="mumbai"></option>
<option value="delhi"></option>
</datalist>

Audio and Video tag

- The HTML <audio> and <video> tags are used to embed media (audio and video files)
directly into a webpage.
- They provide a simple way to include multimedia content with built-in controls such as
play, pause, volume, and more.

1. Audio tag

- The <audio> tag is used to embed audio content like music or sound files into a webpage.
- It can play formats like MP3, OGG, or WAV.

- Attributes of audio tag


1. Controls : Adds controls for the user to interact with the audio.
2. Autoplay : Starts playing the audio as soon as it is ready.
3. Type : specifies type of source.
4. Src : specifies source of audio.

<audio controls>
<source src="audiofile.mp3" type="audio/mpeg" autoplay>
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

19 | P a g e
2. Video tag

- The <video> tag is used to embed video content into a webpage.


- It supports formats like MP4, WebM, and OGG.
- Attributes
1. Controls : Adds controls for the user to interact with the audio.
2. Autoplay : Starts playing the audio as soon as it is ready.
3. Type : specifies type of source.
4. Src : specifies source of audio.

<video controls width="600">


<source src="video.mp4" type="video/mp4" autoplay>
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>

20 | P a g e

You might also like