Home - touseefbaigcodes/Frontend-Notes GitHub Wiki
Welcome to the Frontend-Notes wiki!
Hypertext Markup Language, is a standard markup language used to create and structure/skeleton of the web pages on the internet. HTML is composed of elements and tags, where each element is represented by a tag, such as
for paragraphs, for links, and for images.
In the context of web development, HTML forms the backbone of web pages, providing essential structure, while CSS adds styling, and JavaScript enables interactivity.
Defines the structure and content of a web page.
provide additional information about elements. For example, an tag uses the src attribute to specify the image source.
<header>, <footer>, <article>, <section>, <aside> and <nav> provides the additional information about the structure and content of the web page enhancing both accessibility and SEO.
it is declaration which describes the version of the HTML that is HTML5 and ensures the browser interprets the page based on the HTML5 standards.
is the root element of an HTML document and it has a lang attribute that sets language.
section of an HTML document contains meta, link and title tags.
Mata tags describes information about the web page, such as: Its character encoding.
responsiveness on different devices, author ect.
The <title> tag specifies the name of the document.
The <body> tag is the main container for all visible content on the page.
Open Tag: Tag consist of element name and enclosed in angle brackets such as <a>, <p>.. defines beginning of the element
Close Tag: specifies the end of the element </a>, </dev>..
Void/Self-closing Tag: Does not have closing tag and content such as <img>, <br>, <input>, <hr>, <link>, <meta>.
The div stands for "division," is a block-level container that groups other HTML elements together to keep things organized on a webpage. It is not semantic because it doesn't specify the type of context in it.
Tables are used to display data in a tabular format.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>Buttons are used to trigger actions. Input is used to collect data from the user.
<fieldset>
<legend>Enquery</legend>
<form action="backent.php">
<!-- label tag is used once we click on label what we have given for a specific id (ex id="name" as we click on Name)it will directs towards our inpur -->
<label for="name">Name:</label>
<div>
<input
type="text"
value="read only bcs we have used readonly"
name="myname"
id="name"
required=""
autofocus=""
readonly=""
disabled=""
/>
</div>
<br />
<!-- maxlenght => that the max lengh(number of letters that can be used) of the a text -->
<div>Role: <input type="text" name="myrole" maxlength="90" /></div>
<br />
<div>Email: <input type="email" name="myemail" /></div>
<br />
<div>color: <input type="color" name="color" /></div>
<br />
<div>password: <input type="password" name="password" /></div>
<br />
<!-- we can give min and max number also we can use min and max in range -->
<div>Age: <input type="number" min="10" max="55" /></div>
<br />
<div>Date: <input type="date" /></div>
<br />
<div>time: <input type="time" /></div>
<br />
<div>month: <input type="month" /></div>
<br />
<div>week: <input type="week" /></div>
<br />
<div>range: <input type="range" value="80" /></div>
<br />
<div>Datetime: <input type="datetime-local" /></div>
<br />
<div>CheckBox<input type="checkbox" name="tt"/>dancing</div>
<br />
<div><input type="checkbox" name="tt" />singing</div>
<br />
<div><input type="checkbox" name="tt"/>reading</div>
<br />
<div>upload img:<input type="file" /></div>
<br />
<div>Are you eligible?: <input type="checkbox" /></div>
<br />
<div>Date: <input type="date" name="mydate" /></div>
<br />
<div>Mob number: <input type="number" name="mobno" /></div>
<br />
<div>
Gender: <input type="radio" name="mygender" />Male<input
type="radio"
name="mygender"
checked=""
/>Female<input type="radio" name="mygender" />Others
</div>
<br />
<!-- we have to give name( mygender) same for provided items so that we can select only one item else we can select all item -->
<strong> Write about yourself <br /></strong
><textarea name="mytext" cols="50" rows="10"></textarea> <br />
<br />
<label for="Country">Country</label>
<select name="" id="">
<option value="">Please select a option</option>
<optgroup label="Asia">
<option value="India">India</option>
<option value="Shrilanka">Shrilanka</option>
<option value="Pakistan">Pakistan</option>
</optgroup>
<optgroup label="Europe">
<option value="">USA</option>
<option value="">France</option>
<option value="">Germany</option>
</optgroup>
</select>
<br />
<br />
<input type="submit" value="Submit Now" /><input
type="reset"
value="Reset Now"
/><br />
<div><br /></div>
</form>
</fieldset>
<p>This is a <i>highlighted</i> text.</p>
<p>This is an <em>important</em> word.</p>
<p>This is a normal sentence. <small>This is smaller text.</small></p>
<p>This is a <span style=" font-weight: bold;">highlighted</span> word.</p>Any sequence of whitespace characters (space, line break, tab) is treated as a single space in HTML.
###Audio and Video tags:
<video src="small.mp4.mp4" width="300px" height="300px" controls autoplay muted loop ></video>
<audio src="Dil_Keh_Raha_Hai_Dil_Se_(Meri_Yaad)_Video_Song__Adnan_Sami__Tera_Chehra(128k).m4a"></audio>