Web Development Basics - HTML
Aabhas Saxena
IITian | Co - Founder Khabri Bai | Education was my escape from poverty, and it can be yours too ?? | Let's stay in touch, and navigate our paths side by side ??
<h1> Your heading here </h1>
<h1> to <h6> ----> Heading tags
<p> </p>----> Paragraph tag
<!-- Your Comment Here --> Comment tag
<!DOCTYPE?html>
<html>
??<head>
??<title>Title</title>
??</head>
<body>
Body Goes Here
.
.
??</body>
</html>
How to add images to your webpage.
<img> tag along with "src" attribute is used to add images to the webpage. <img tag is an open tag i.e. it does not need a closing tag. All <img> tags must have "alt" attribute which improves readability for the screen readers as well as tells the browser what to display in case the image fails to load.
<img src = "url of image" alt = "Alt text">
Anchor tag (<a> </a>) - Create links to external web pages.
<a> </a> tag is used to create a link to the external web address. It needs "href" attribute to take the address.
<a href = "Link Here"> Link Text Here</a>
Create internal web page links using anchor (<a></a>) tag:
To create an internal link assign href to # followed by id of the element to which you want to link your text. Eg below:
<a href = "#contacts -header"> Text</a>
<h2 id = "contacts-header">Contacts</h2>
"target" is an <a></a> tag attribute target = "_ blank" is used to open the link in a new page.
<a href = "Link here" target = "_blank"> Link Text Here </a>
We can make a dead link by assigning href = "#".
<a href = "#"> Link Text Here</a>
Lists in HTML : Bulleted Unordered List
<ul> </ul> tag is used to create an unordered list. Each line is defined by <li></li> tag. Bulleted lists are created using this way. eg:
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
Lists in HTML : Bulleted Unordered List
<ol> </ol> tag is used to create an ordered list. Each line is defined by <li></li> tag. Ordered numbered lists are created using this way. eg:
<ol>
<li>Apple</li>
<li>Orange</li>
</ol>
Getting Text Input From User
<input type = "text"> tag with "text" attribute is used to take text input. Input tag is a self closing tag. You can add placeholder text using "placeholder" attribute. To mark an input as required/mandatory use "required" attribute.
<input type = "text" placeholder = "Text" >
Similarly inputs of other types like "radio"and "checkboxes" can be created
Its a general practice to put a input button inside <label></label> element . To create a radio inputs group we can have a same name attribute with all radio inputs associated with the related radio inputs. Example: Below code generate a group of 3 radio button out of which we can select one.
<p>Select a Fruit You Like: </p>
<label>
<input type = "radio" name ="fruit">Apple</input>
</label>
<label>
<input type = "radio" name ="fruit">Mango</input>
</label>
<label>
<input type = "radio" name ="fruit">Grape</input>
</label>
Forms commonly use?checkboxes?for questions that may have more than one answer. Checkboxes are a type of?<input></input> button. We can create a checkbox by type = "checkbox" in a fashion similar to creating radio buttons. More than one checkboxes can be selected from a group
领英推荐
<p>Select All Fruits You Like: </p>
<label>
<input type = "checkbox" name ="fruit">Apple</input>
</label>
<label>
<input type = "checkbox" name ="fruit">Mango</input>
</label>
<label>
<input type = "checkbox" name ="fruit">Grape</input>
</label>
When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type?radio?and?checkbox?report their values from the?value?attribute. <form></from> element is described below
Forms : HTML
Forms are made using <form> </form> element in HTML. We can also specify a url where we want the data to be submitted using "action" attribute of the <form></form> element.
<button> </button> element is used to add button to the form. Its attribute "type" is used to define the type of button. type = "submit" submits the form to action URL.
<form action ="url to submit form data">
<input type = "text" placeholder = "Name" required>
<button type = "submit">Submit </button>
</form>
Note : Since Name field is "required" user cannot suit an empty name here.
Example of a form with checkbox and radio button:
<form action ="url to submit form data">
<input type = "text" placeholder = "Type Your Name" required>
<p>Select All Fruits You Like: </p>
<label>
<input type = "checkbox" name ="fruit" value = "apple">Apple</input>
</label><br>
<label>
<input type = "checkbox" name ="fruit" value = "mango">Mango</input>
</label><br>
<label>
<input type = "checkbox" name ="fruit" value = "grapes">Grape</input>
</label><br>
<button type = "submit">Submit </button>
<p>Select a Fruit You Like: </p>
<label>
<input type = "radio" name ="fruit" value = "apple">Apple</input>
</label>
<label>
<input type = "radio" name ="fruit" value = "mango">Mango</input>
</label>
<label>
<input type = "radio" name ="fruit" value = "grapes" checked>Grape</input>
</label>
</form>
You can set a checkbox or radio button to be checked by default using the?checked?attribute.
Division Element (<div></div> tag)
The?div?element, also known as a division element, is a general purpose container for other elements.
The?div?element is probably the most commonly used HTML element of all.
Just like any other non-self-closing element, you can open a?div?element with?<div>?and close it on another line with?</div>
Some Tags are used to give structure to the HTML document:
These tags help people to parse and understand the HTML easily. These tags are also helpful in doing SEO, and help you appear in search results. These were introduced in HTML 5