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

HTML Notes (1)

HTML, or Hypertext Markup Language, is the foundational language for creating web pages and applications, structured with elements represented by tags. HTML5 introduces new semantic tags and multimedia capabilities, enhancing user experience and content organization. Essential HTML tags include <html>, <head>, <body>, and various others for structuring content, multimedia, forms, and lists.

Uploaded by

Amol Mahajan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML Notes (1)

HTML, or Hypertext Markup Language, is the foundational language for creating web pages and applications, structured with elements represented by tags. HTML5 introduces new semantic tags and multimedia capabilities, enhancing user experience and content organization. Essential HTML tags include <html>, <head>, <body>, and various others for structuring content, multimedia, forms, and lists.

Uploaded by

Amol Mahajan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML

Introduction:-

* HTML stands for Hypertext Markup Language.


* HTML is used to create web pages and web applications.
* HTML is widely used language on the web.
* We can create a static website by HTML only.
* HTML elements are represented by tags
* Technically, HTML is a Markup language rather than a programming language.

For using HTML Coding, We must have "notepad".

HTML Structure:-

* <html>:- An opening <html> tag should appear first and a closing </html> tag
should appear at the bottom of the document.

* <head>:- The head element is the first element to appear after the opening
html tag. In the document head we place things like the page title, we add
JavaScript to our page with the script tag, and we [link] to external style sheets
and other resources.

* <body>:- All of the content that is visible on a web page is nested between
opening and closing body tags. The body is the primary container of the content
that makes up a web page.
Example:-
<html>
<head>
</head>
<body>
</body>
</html>

HTML 5:-
 HTML5 is the fifth revision of HTML, a markup language to present and
structure web document.
 For example you can use audio, video, source tags to present multimedia
content easily.
 Using canvas tag you can make your web document a drawing canvas.
 HTML5 offers several new tags and attributes to enhance user experience
of Forms.

<! DOCTYPE HTML>:- For using HTML5 you must have to define <! DOCTYPE
HTML> at first .This tells the browser to write HTML5 Coding..

New Semantic Tags Added by HTML5:-


* <header>:- The header element is used to contain the content that appears at
the top of every page of your website: the logo, tagline, search prompt, and
possibly a navigational menu.

* <main>:- Use the main element between header and footer elements to
contain the primary content of your web page. The main element cannot be a
descendant of an article, aside, header, footer, or nav element. Instead, it should
be a direct descendant of the body element.
* <nav>:- Navigational menus are commonly placed at the top of a web page.in
a sidebar, or in the page footer. Wherever you happen to place a navigational
menu, wrap it in nav tags.
Example:-
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>

* <article>:- <article> is for containing related individual standalone pieces of


content, such as blog posts, videos, images, or news items. Ex:- <article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free--</p>
</article>

* <section>:- The <section> tag defines sections in a document, such as


chapters, headers, footers, or any other sections of the document.
Example:-
<section>
<h1>New Section</h1>
<p>The regarding the conservation---</p>
</section>
* <aside>:-If your website contains information that isn't directly related to the
main content of the page, it would be appropriate to wrap that information in
aside tags. For example, if you write a post that includes some technical terms,
and you add definitions for those terms in a sidebar, it would make sense to wrap
those definitions in aside tags.
Example:-
<aside>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum is a content.</p>
</aside>

*<address>:- The <address> tag defines the contact information for the
author/owner of a document or an article.If the <address> element is inside the
<body> element, it represents contact information for the document.If the
<address> element is inside an <article> element, it represents contact
information for that article.
Example:-
<address>
Written by <a href="mailto:webmaster@example.com">Jon
Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

*<footer>:- The most common use of the footer element is to place it at the
bottom of an HTML document to contain things like a copyright notice, links to
related content, address information about the owner of the website, and links to
administrative things like privacy policies and website's terms of service.
example:-
<footer>
<p>Copyright technocraft solution</p
</footer>

HTML5 Tags(Including HTML5 And HTML):-


1) Audio tag:- The <audio> tag defines sound, such as music or other audio
streams.You must have to save audio file where your html file is present.
Example:-
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
*src:- Path of media file
*type="audio/mp3":- if you can use audio tag then difine audio type.
Difine extension of audio file.like mp3,mp4 etc....
*Controls:- it is a structure of audio.

2) Video Tag:- The <video> tag specifies video, such as a movie clip or other
video streams.You must have to save video file where your html file is
present.
<video controls>
<source src="horse.ogg" type="video/ogg">
<source src="horse.mp3" type="video/mpeg">
</video>
*src:- Path of video file
*type="video/mp3":- if you can use video tag then define video type.
Define extension of video file. Like mp3, mp4 etc....
*Controls:- it is a structure of video.

3) <fieldset> Tag:- The <fieldset> tag is used to group related elements in a


form.The <fieldset> tag draws a box around the related elements. The <legend>
tag defines a caption for the <fieldset> element.
Example:-
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>

3) <h1>---<h6>Tags:- The <h1> to <h6> tags are used to define HTML


headings.
Example:-
<h1>This is heading 1</h1>

Output:- This is heading 1

4) Head tag:-The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles and
more.We can define title of webpage in title tag which shows at top of the
browser address bar.
Example:-
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Output:-The content of the document......

5) < hr>Tag:- The HTML <hr> tag is used for creating a horizontal line.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>HTML hr Tag</title>
</head>
<body>
<p>This text will be followed by a horizontal line <hr /></p>
</body>
</html>
Output:-This text will be followed by a horizontal line
________________________________________________
7) <i> Tag:- The content of the <i> tag is usually displayed in italic.
Example:-
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
Output:-He named his car The lightning, because it was very fast.

8) <img> Tag:-The <img> tag defines an image in an HTML page. The <img> tag
has two required attributes: src and alt.
Example:-<img src="smiley.gif" width="42" height="42">
*src:-path of image
Attributes of image:-
1)height:- Specifies the height of an image in px
2)width:- Specifies the width of an image in px

9) <a>Tag:-The <a> tag defines a hyperlink, which is used to link from one page
to another.
Example:-
<html>
<body>
<a href="https://www.google.com">Visit Google.com!</a>
</body>
</html>
*href:- The most important attribute of the <a> element. Which indicates path
of specified files or links.
Output:- Visit Google.com!

10) <br> Tag:-The <br> tag inserts a single line break.


Example:-
<html>
<body>
<p>
To break lines <br> in a text, <br> use the br element.
</p>
</body>
</html>

Output:- To break lines


in a text,
use the br element.

11) <center> Tag:-The <center> tag is used to display sentence or heading or


contents in center
Example :- <center>This text will be center-aligned.</center>
Output :- This text will be center-aligned.

12) <div> Tag:- The <div> tag defines a division or a section in an HTML
document. Define contents in div tag is not related to each other .It has separate
contents....
Example:-
<div style="background-color:lightblue">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
13) <ol> Tag:- The <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
Example:-
<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:-
1. Coffee
2. Tea
3. Milk

14 <ul>Tag:- The <ul> tag defines an unordered (bulleted) list.Use the <ul> tag
together with the <li> tag to create unordered lists.
Example:-
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:- An Unordered List:
 Coffee
 Tea
 Milk

15) <p> Tag:-The <p> tag defines a paragraph.


Example:- <p>This is some text in a paragraph.</p>
Output:- This is some text in a paragraph.

16)<select> Tag:- The <select> element is used to create a drop-down list.The


<option> tags inside the <select> element define the available options in the list.
Example:-
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option
</select>
</body>
</html>
17)<small>Tag:- The <small> tag defines smaller text
Example:-<p><small>Copyright 1999-2050 by Refsnes Data.</small></p>
Output:-Copyright 1999-2050 by Refsnes Data.

18 <span>Tag:-The HTML <span> tag is used for grouping and applying styles
to inline elements.
There is a difference between the span tag and the div tag. The span tag is used
with inline elements whilst the div tag is used with block-level content.
Example:-
<html>
<body>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes.</p>
</body>
</html>
Output:-My mother has blue eyes.

18) <strong>Tag:- this tag is define bold elements in sentene or headings


Example:- <strong>Strong text</strong><br>
Output:- Strong text

19) <sub> Tag:-The <sub> tag defines subscript text. Subscript text appears
half a character below the normal line,and is sometimes rendered in a smaller
font. Subscript text can be used for chemical formulas, like H 2O to be written as
H2O.
Example:-
<p>This text contains <sub>subscript</sub> text.</p>
Output:-This text contains subscript text.

20)<sup>Tag:-The <sup> tag defines superscript text. Superscript text appears


half a character above the normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like WWW[1].
Example:- <p>This text contains <sub>subscript</sub> text.</p>
Output:-This text contains subscript text

21)<table> Tag:-The <table> tag defines an HTML table.


Example:-
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

22)<td> Tag:-The <td> tag defines a standard cell in an HTML table


Example:-
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

23)<tr> Tag:-The <tr> tag defines a row in an HTML table.


Example:-
<table>
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
</table>

24) <th> Tag:-The <th> tag defines a header cell in an HTML table.We can
give table heading
Example:-
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
25) <thead>:- The <thead> tag is used to group header content in an HTML
table.
Example:-
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>

26)<textarea> Tag:- IF we have 1 or more lines for contents like address,that


time we can use <textarea>tag.
Example:-
<html>
<body>
<textarea rows="4" cols="50">
Lorem ipsum you will learn how to make a website. We offer free tutorials
in all web development technologies.
</textarea>
</body>
</html>

27)<u> Tag:-This tag is used for underline.


Example:-<p>This is a <u> paragraph </u>.</p>
Output:- This is a paragraph

28) <optgroup> Tag:-The <optgroup> is used to group in droup-down list.


Example:-
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>

29)Email Validation:- If we want to give validation of email then we can define


email validation
<input type="email" name="email">
if we can run on browser then if we provide wrong email id then it gives error
message like "Please enter valid email address".

30)Password:- We can't write password infront of user thats why we give


password validation that shows password in bullet form
<input type="password">

31)Number Validation:- if we want to enter only integer or digit then we can


define number validation
<input type="number" min="5" max="10">
if we can run on browser then if we provide characters or alphabets then it gives
error message like "Please enter number".
We can also provide minimum and maximum number validation like shows
minimum 5 and maximum 10 digits

32) Range:- we can define range like shows 1 to 5 digits.The <input


type="range"> defines a control for entering a number whose exact value is not
important (like a slider control).
<input type="range">

33) date:- The date defines a date picker.

Example:- Birthday: <input type="date" name="bday">


Output:- Birthday:01/02/2019

34) Required:- A "Required Field" is a field that must be filled in with value
before submission of a form. Required field sometimes known as Compulsory
field. It is validation of html
If we found empty field in form then give error message like "Please enter"
Example:-Username: <input type="text" name="usrname" required>

You might also like