This repo contains all my Web Development related practice codes.
-
<!DOCTYPE html> ... </html>- description for browser that the contents are in HTML5, also start & end for a web page. -
<head> ... </head>- define the head portion of the document which contains information related to the document. -
<body> ... </body>- defines the html document's body. -
<title> ... </title>- allows you to give a web page a title, placed inside<head> ... </head>of html document. -
<meta charset="utf-8">- specifies which character set a website is written with, placed inside<head> ... </head>of html document. -
UTF-8- UTF stands for Unicode Transformation Format. Every character is encoded & can check more details here. -
<h1> ... </h1>- html heading tag (goes from h1-largest till h6-smallest). -
<p> ... </p>- for paragraph inside html body.<p align="center"> ... </p>- center alignment of the contents of paragraph.<p align="left"> ... </p>- left alignment of the contents of paragraph.<p align="right"> ... </p>- right alignment of the contents of paragraph.<p align="justify"> ... </p>- jusified alignment of the contents of paragraph.
-
<br>or<br />- line break, single line space. -
<strong> ... </strong>- for bold fonts. -
<em> ... </em>- for emphasizing or italics font. -
<ol> ... </ol>- for ordered list. -
<ul> ... </ul>- for unordered list. -
<li> ... </li>- list items, to be written eiter inside<ol> ... </ol>or<ul> ... </ul>tags. -
<img>- used for inserting image in web page.<img src="path to image">- syntax for adding image.<img src="path to image" alt="alternate desc.">- add alternate description which will be shown in case image is not accessible.<img src="path to image" width="400" height="450">- to customize the width & height of the image.
-
<table> ... </table>- used for creating a table in web page. -
<caption> ... </caption>- used for giving heading of the table. -
<tr> ... </tr>- used for the rows in the table, to be used inside<table> ... </table>tag. -
<th> ... </th>- used for column heading in the table, to be used inside<table> ... </table>tag. -
<td> ... </td>- used for putting data in cells in a table, to be used inside<table> ... </table>tag. -
<a> ... </a>- Anchor tag. User for hyper link or reference(href).<a href="link">Open Link</a>- Opens the link in same page itself.<a href="link" target="_blank">Open Link</a>- Opens the link in another tab.<a href="tel:+919876543210">Call me.</a>- Click to call the number.<a href="mailto:example@yahoo.com">Mail me</a>- Click to mail.<a href="#block">Jump</a>- Go to specific part of the same page itself, has some prerequisite.(Will be updated later)
-
Special symbols - Either use the following code or copy from internet.
- Use
for Non breaking space ( ) - Use
£for pound (£) - Use
€for euro (€) - Use
§for section (§) - Use
©for copyright (©) - Use
®for registered (®) - Use
™for trademark (™) - Use
°for degree (°)
- Use
-
<video controls> <source src="path"> </video>- used for insterting video in the web page.autoplay- if mentioned, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.controls- if mentioned, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.height- the height of the video's display area.loop- if specified, the browser will automatically seek back to start upon reaching the end of the video.poster- A url for an image to be shown while the video video is downloading.src- the url of the video to embed.width- the width of the video's display area.
-
<audio controls> <source src="path"> </audio>- used for insterting audio in the web page.autoplay- if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.controls- if this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking and pause/resume playback.loop- if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.preload- this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience.src- The url of the audio embed.
-
<form> ... </form>- The form tag is used to collect user input. It can have attributes such as :<form action="/action.php"> ... </form>- defines the action to be performed when the form is submitted, the php file will process the user inputs.
-
<input>- Form element for input field, stays inside<form> ... </form>tag. Can have attribute as following.<input type="text">- Displays a single-line text input field<input type="radio">- Displays a radio button (for selecting one of many choices)<input type="checkbox">- Displays a checkbox (for selecting zero or more of many choices)<input type="submit">- Displays a submit button (for submitting the form)<input type="button">- Displays a clickable button
- CSS can be implemented into HTML in 3 ways :
- Inline : need to add the style attribute to HTML tag (eg:
<h1 style="color:white;">CSS</h1>) - Internal : need to add
<style>...</style>tag inside<head>...</head>tag in the HTML page. - External : need to add an another page of css & link it with HTML page.
- Inline : need to add the style attribute to HTML tag (eg:
