Skip to content

Basic HTML

Jump to bottom
AYU$H $HARMA edited this page Apr 21, 2021 · 1 revision
<title>BASIC</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style>

This is first HTML file Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

This Is a Paragraph in paragraph tag inside body.

This Is Bold Line
This is itallic
This is Strikethrough
This Is Underlined

This text is strong This text is emphasized strong and em means that the text is "important".


Sized Emojis

😀 😄 😍 💗 

  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.

HTML Small Formatting

HTML Marked Formatting

My favorite color is blue red.

My favorite color is red.

This is subscripted text.

This is superscripted text.

This is a link
This is a link to p01 ID Paragraph of Same Page Jump to Chapter 4 ID Of Different Page
This Is An Image

This is a red paragraph at center with 200% larger font size and colourful background.

This text will be written from right to left

Boarder With HTML Colour

Tomato

Dodger Blue

Violet

Green

Orange

Gray

Slate Blue

Light Gray

Medium Sea Green

I am different

Locked in a frame? Click here Go To Top!

Open me in new tab!

Smiley face The image will float to the right of the text.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
  • Coffee
  • Tea
  • Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
<iframe src="https://web.dev/" height="200" width="300"></iframe> <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

W3Schools.com


This Will be changed

<script> document.getElementById("demo0").innerHTML = "Hello JavaScript! I'm Changed"; </script>

The button Element

Click Me!

JavaScript can change the style of an HTML element.

<script> function myFunction() { document.getElementById("demo1").style.fontSize = "25px"; document.getElementById("demo1").style.color = "red"; document.getElementById("demo1").style.backgroundColor = "yellow"; } </script> Click Me And See Magic!
<script> function light(sw) { var pic; if (sw == 0) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script>

Light On Light Off

Hello World! 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.


x = 5;
y = 6;
z = x + y;

Save the document by pressing Ctrl + S Represents Keyboar User Input

If you input wrong value, the program will return Error! Represent Output

The var Element

Einstein wrote: E = mc2.


Figure With Caption

Trulli Fig1. - Trulli, Puglia, Italy.

Text input fields

First name:

Last name:

Note that the form itself is not visible.

Also note that the default width of text input fields is 20 characters.

Radio Buttons

Male
Female
Other

HTML Forms

First name:

Last name:


If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".

The form target attribute

When submitting this form, the result will be opened in a new browser tab:

First name:

Last name:


The method Attribute

This form will be submitted using the GET method:

First name:

Last name:


After you submit, notice that the form values is visible in the address bar of the new browser tab.

The method Attribute

This form will be submitted using the POST method:

First name:

Last name:


After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab.

The select Element

The select element defines a drop-down list:

Choose a car: Volvo Saab Fiat Audi

Allow Multiple Seletcions

Use the multiple attribute to allow the user to select more than one value.

Choose a car: Volvo Saab Fiat Audi

Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.

Textarea

The textarea element defines a multi-line input field.

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

Grouping Form Data with Fieldset

The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.

Personalia: First name:

Last name:


The output Element

The output element represents the result of a calculation.

0 100 + =

Note: The output element is not supported in Edge prior version 13.

Sorry, your browser does not support inline SVG. Sorry, your browser does not support inline SVG. Sorry, your browser does not support inline SVG. Sorry, your browser does not support inline SVG. SVG Sorry, your browser does not support inline SVG.

Clone this wiki locally