What is HTML
What is HTML, coding is the Hypertext Markup Language used to structure website pages. It is the most important building block of a website. It tells how words and images should be arranged and displayed on a website. Website browsers understand this code and display the content as pages.
About HTML
HTML stands for HyperText Markup Language and it is the most widely used language for writing web pages.
As its name suggests, HTML is a markup language, which means you use HTML to simply mark up a text document with tags that tell a web browser how to display it.
Language
Languages are used to communicate from one person to another person.
Level of computer language-
- Low level or machine language,
- Middle level or assembly language,
- High level language
Low level or machine language
Low level language written in binary number that means 0 and 1 used to develop an operating system for particular machine.
Middle level or assembly language
Middle level language written in english and it contains assembler to translate english code in binary that means machine language used to develop an operating system for particular machine.
High level language
High level language written in english and it contains compiler and interpriter to translate english code in binary that means machine language used to develop an application softwares.
What is tag
A letter which is surrounded by angle bracket is called tag. For example if stpce is written like this then you will call it text but if is written like this then you will say it is tag because here stpce is surrounded by angle bracket.
more concept about tags
- Text <html>
- html body
- <html> <body>
Use of tags Tags
are used to display our contents on webpage and it also defines the place of our contents .Important topics about tags.
1. A tag starts with bricket and closed with </>Ex-
2. A start tag also called opening tag and closed tag also called closing tag .
3. A tag must be closed with </> brickets
4. A tag marked our content to display them on webpage .
Ex-our content HTML Versions & Element
- VERSIONS YEAR
HTML 1991
HTML 2.0 1995
HTML3.2 1997
HTML4.01 1999
XHTML 2000
HTML5 2014HTML ELEMENTS
An html element must have contents</closing tag>
Example : –
<starting tag> My name is amit : contact </closing tag>
HTML DOCTYPE DECLARATIONS & TYPOGRAPHY TAGS
Doctype Declarations
Doctype declaration is a comment that tells in which version of HTML coding is done.Types of Doctype
The doctype declaration tells our web server that we are coding in HTML
Doctype declaration is a comment that tells in which version of HTML coding is done.
Types of Doctyp Declaration
- HTML 4.01
- XHTML
- 3.HTML 5
1.) HTML 4.01 Doctype Declaration Syntax :-
<!DOCTYPE HTML PUBLIC “//W3C//DTDHTML4.01Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>
2.) XHTML & HTML 4.01 Doctype Declaration Syntax <!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>
3.) HTML 5 Doctype Declaration Syntax
DOCTPE And <!doctype html>
Note:
Always have to do doctype declaration in html 5 version
If you do the doctype declaration in html5 version then you can take advantage of all the features of HTML 4 and XHTML.HTML
HTML 4 basic Structure in HTML 5 Doctype Declaration.
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- Write Title Content Here
- </title>
- </head>
- <body>
- Write Body Content Here
- </body>
- </html>
Typography tags
Heading text tags
- <h1> your text </h1>
- <h2> your text </h2>
- <h3> your text </h3>
- <h4> your text</h4>
- <h5> your text </h5>
- <h6> your text </h6>
Paragraph text tags
- <p> your text</p>
Centered text tags
- <center>Center Content write Here </center>
Moving text tags
- <marquee>Moving Content Write Here</marquee>
HTML Formatting Tags
HTML formatting tags are special codes that are used to change or control the appearance of text and content on a website. These tags help the website understand how the content should be displayed and enable it to present information to the user in a clear and attractive manner.
Empty Element Tags
- <hr> = horizontal line Tag
- <br> = Line Break Tag
Pre Formatting tag
- <pre> = This tag is accept keyboard formatting
Formatting Tags
- <b> : Define bold text
- <u> : Define underline text
- <i> : Define italic text
- <em> : Define emphasized text
- <sup> : Define superscript text
- <sub> : Define subscript text
- <strong> : Define strong text
- <small> : Define small text
- <mark> : Define highlighted text
HTML attribute
An HTML attribute is a special information added to a tag that is written as name=”value” inside the initial type of the element and changes the behavior or properties of the HTML element. For example, the src attribute in the <img> tag defines the URL of the image, and the href attribute in the <a> tag specifies the link address.
HTML Attribute is the way to optimize the features of tag.
Attributes are always use in opening tag.
Example :-
<tag attributename = “value”>
</tag>
All HTML element have attributes.
<body>
ATTRIBUTES VALUE
- bgcolor : “blue”
- background : “image.jpg”
- text : “blue”
<h1> to <h6>
ATTRIBUTES VALUE
- align “left” : “right” “center”
- title : “any text”
<hr>
ATTRIBUTES VALUE
- width : “right” “center”
- color : “anycolor”
- size : “10”
- align : “left” “right” “center”
<marquee>
ATTRIBUTES VALUE
- direction : “up” “down” “right” “left”
- behavior : “scroll” “alternate”
- scrollamount : “50%” “20”
- bgcolor : “blue”
HTML <font> , <img> & <a> Tag
<font> Tag : It is used to customize any text of HTML
To change the letters, use <font> tab. The letters you want to change, mark them with <font> tag.
Example:
- <font>your text here</font>
Attributes of <font> tag
Attribute Name Value
- color “blue” , “green” , “red”
- face Arial
- size “5” default font
<img> Tag : It is used to insert image on foreground
The <img> tag is used to insert images in the website. The <img> tag is an empty element tag, so we just start with it and do not lock it.
Attributes of <img> tag
Attribute Name Value
- src : “imagename.jpg”
- width : “300” & “40%”
- height : “300”
- alt : “image name”
- border : “2”
<a> Tag : It is used to link(connect) one content to another content
To indicate which file will open after clicking on a link, we use <a> tag i.e. anchor Image ya table bana hai
Attributes of <a> tag
Attribute Name Value
- href : “filename.ext”
- download : “download”
- target : “blank” “ self ” “top”
HTML Advanced Multimedia with Plug-ins
- AUDIO = <audio> </audio>
- VIDEO = <video> </video>
- IMAGE = <img>
- Plug-ins = <embed> , <object> ( pdf )
Attributes of <audio> tag
Attribute Name Value
- src : “audioname.mp3”
- controls : “controls”
- autoplay : “autoplay”
- muted : “muted”
Attributes of <video> tag
Attribute Name Value
- src : “videoname.mp3”
- controls : “controls”
- autoplay : “autoplay”
- muted : “muted”
- width : “720”
- height : “480”
Attributes of <img> tag
Attribute Name Value
- src : “audioname.mp3”
- width : “720”
- height : “480”
- alt : “imagename”
- border : 1,2,3,4
Attributes of <embed> tag Don’t Lock embed tag
Attribute Name Value
- src : “filename.ext”
- width : “720”
- height : “480”
Attributes of <object> tag
Attribute “Name Value”
- data : “filename.ext”
- width : “720”
- height : “480”
HTML List
Lists are the way to display contents in bullets and numbering formation.
- Bullets : ο etc..
- Numbering : 1 2 3 , A B C , i ii iii iv , a b c d .
The Two Types of List
- Unordered list (unnumbered list)
- Ordered list (numbered list) 1 2 3 , A B C , i ii iii iv , a b c d
Unordered list tag = <ul> </ul>
<ul>
- <li>This is a list</li>
- <li>This is a list</li>
- <li>This is a list</li>
- <li>This is a list</li>
</ul>
Attributes of Unordered list <ul> tag
Attribute Name Value
- type “circle” , “square” , “disk”
Ordered list tag = <ol> </ol>
<ol>
- <li>This is a list</li>
- <li>This is a list</li>
- <li>This is a list</li>
- <li>This is a list</li>
</ol>
Attributes of Ordered list <ol> tag
Attribute Name Value
- type “a” , “A” , “(i)”
- start 8
HTML Table
In HTML, a table is a text that is used to organize data on a website into rows and columns. Tables are created on a website using the <table> tag. Tags such as <tr> (row), <th> (header cell), and <td> (data cell) are used to insert data into a table.
Table is a block structure of rows and columns which allows you to create a webpage layout in html language.
ROWS : —
COLUMNS : |||||||.
List of some tags
- <table> </table> : Start table coding.
- <tr> </tr> : to create rows.
- <td> </td> : to create columns.
- <th> </th> : to create headings for columns.
- <caption> </caption> : to define table name.
Attributes of <table> tag
Attribute Name Value
- width 500
- height 600
- border 1
- bordercolor “red”
- align “left” , ”center” , ”right”
- bgcolor “skyblue”
- cellspacing 20
HTML Form
An HTML form is a part of web pages that collects user data. It allows users to enter data using elements such as checkboxes, radio buttons, text fields, and submit buttons and send it to the server. These forms are designed for user interaction, allowing websites to collect information from users, such as registration, login details, or any type of feedback.
Html Forms are the way to get any information from user on your web server
Tags
<form> </form>
- This is used to start form coding
<input> (Empty element tag)
- It is used to create the form column.
- This column is for the user to type and is called input field.
- Through this column we can take a lot of information from the user.
Example: First name, Last name, mobile no, username, password
<textarea> </textarea>
It is used to make the length of the form but we use it when we have to give more information to the user.
- Example:
Attributes of <input> tag
Attributes : Values
- type : text , password , date , search , number , radio, checkbox , button , submit , color , email , website , file , hidden , image , reset , tel , week, month , range
- name : Content name
- placeholder : Insert any text for watermark
- size : 30
- value : Use in special case
- Max, : maxlength 12
- required : required