What is HTML

HTML is a coding language used to make grapical interview with website on the web browser

building a website is as like building a house for for the basic things like buttons and texts are in HTML, CSS adding colors and changing the decor, javaScipt is for changeing settings adding animations and more!

!

<p>

<p> stand for paragraph here is an example how can we use it:

<p>Hello</p>

output:

Hello

<h1> <h2> <h3> <h4> <h5> <h6>

<h1-h6>: H stand for hero that this will change the font size of the text <h1> is the biggest and <h6> is the smallest here is an example how it works:

<h1>this is h1</h1> <h2>this is h2</h2> <h3>this is h3</h3> <h4>this is h4</h4> <h5>this is h5</h5> <h6>this is h6</h6>

output:

this is h1

this is h2

this is h3

this is h4

this is h5

this is h6

<br>

<br> stand a line break this will add a line break between stuff here is an example:

<p>Hello</p> <br> <p>Bye</p>

output:

Hello

Bye

<hr>

<hr> stand a Horizontal Rule this will create a visible line in the webiste here is an example:

<p>Hello</p> <hr> <p>Bye</p>

output:

Hello

Bye

<img>

<img> stand a image this will display image in the website here is an example:

<img src="https://example/goku.jpg" alt="goku" width="400px">

output:

src="" you will place the img link there is could be local like /home/Downloads/img.png or it could be link from the internet

alt="" this will tell the user what is this image if the image didnt load

width="" this is the width of the image px meaning is pixel

<video>

<video> This will display videos in the website here is an example:

<video src="https://media.vlipsy.com/vlips/LmebGdds/360p.mp4" controls loop autoplay> </video>

output:

src="" you will place the video link there is could be local like /home/Downloads/video.mp4 or it could be link from the internet

alt="" this will tell the user what is this video if the video didnt load

width="" this is the width of the video

Tags are used to put media settings here is some common Tags:

< autoplay, muted, controls, loop >

<a>

<a> This is used for hyperlinks here is an example:

<a href="https://google.com">Google</a>

output:

Google

href=""here we place the link of the hyperlink

<audio>

<audio> This is used for audios here is an example:

<audio src="music.mp3" controls></audio>

output:

src="audio.mp3"here we place the audio link

controlshere we Add controls to the audio

Text formatting

text formatting you need to know to to format your text in html so it dont look boring, here is an example how it works:

<p>this is normal text</p> <p>this is <b>bold</b> text </p> <p>this is <i>italic</i> text</p> <p>this is <big>big</big> text</p> <p>this is <small>small</small> text</p> <p>this is <sub>subscript</sub> text</p> <p>this is <sup>superscript</sup> text</p> <p>this is <del>deleted</del> text</p> <p>this is <mark>marked</mark> text</p>

Output:

this is normal text

this is bold text

this is italic text

this is big text

this is small text

this is _subscript text

this is ^superscript text

this is ~~deleted~~ text

this is marked text

Color

color: to change colors in html we need to use command in the command style="color;A Color"" here is an example how it works:

<p style="color: red;"">This is color red</p> <p style="color: Blue;"">This is color Blue</p>

Output:

This is color red

This is color blue

Note: You can set colors using Hex,RGB,HSL And by there names

Background-color

background-color changes the backgorund color of an Element, here is an example how it works:

<p style="background-color: red;"">This is color red</p> <p style="backgorund-color: Blue;"">This is color Blue</p>

Output:

This is color red

This is color Blue

Note: You can set Background colors using Hex,RGB,HSL And by there names

unordered List

Unordered List is a list with no orders it will make every thing under each others here is an example how it works:

<ul> <li>Water</li> <li>Coffee</li> <li>Pizza</li> </ul>

Output:

Water
Coffee
Pizza

ul stand for unordered list this will make the list
li stand for list item this will be the stuff inside the list

ordered List

ol will make the list it will make the stuff listed with number,alphabet,Roman here is an example how it works:

<ol> <li>Water</li> <li>Coffee</li> <li>Pizza</li> </ol>

Output:

Water
Coffee
PIzza

type="" is the type you would like to list with:


type= "A" this will make the type capital alphabet

type= "a" this will make the type alphabet

type= "I" this will make the type capital Roman numerals

type= "i" this will make the type Roman numerals

type= "1" this will make the type Numbers

Description List

dl This will make a List with Description here is an example how it works:

<dl>  <dt>Water</dt> <dd>Cold</dd> <dd>Warm</dd> <dd>mid</dd>  <dt>Coffee</dt> <dd>Esspresso</dd> <dd>Latte</dd> <dd>Mocha</dd>  <dt>Pizza</dt> <dd>Margherita</dd> <dd>pepporoni</dd> <dd>Cheese</dd> </dl>

Output:

Water: Cold; Warm; mid
Coffee: Esspresso; Latte; Mocha
Pizza: Margherita; pepporoni; Cheese

dt Stand for Definition Term

dd Stand for Definition Description

<table>

table: will make Tables here is an example how it works:


<table>
<tr bgcolor="blue">
        <th>Sunday</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
</tr>
<tr bgcolor="red">
        <th>Close</th>
        <th>Open</th>
        <th>Open</th>
        <th>Open</th>
        <th>Open</th>
        <th>Open</th>
        <th>Close</th>
</tr>
</table>

Output:

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
Close	Open	Open	Open	Open	Open	Close

tr Stand for Table Row

th Stand for Table Header

bgcolor Stand for BackGround Color

<div>

div is like a box every thing inside that box will change as the box, here is an example how it works:

<div style="color:rgb(255, 38, 0);">
    <p>paragraph one</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas placeat adipisci maiores rem inv
    entore asperiores harum provident eveniet! Incidunt, repudiandae. 
    Earum, iure expedita. Assumenda repudiandae quasi, consequuntur nesciunt suscipit.</p>
</div>

<div style="color: blueviolet;">
    <p>paragraph two</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas placeat adipisci maiores rem inv
    entore asperiores harum provident eveniet! Incidunt, repudiandae. 
    Earum, iure expedita. Assumenda repudiandae quasi, consequuntur nesciunt suscipit</p>
</div>

<div style="color: rgb(6, 189, 0);">
    <p>paragraph three</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas placeat adipisci maiores rem inv
    entore asperiores harum provident eveniet! Incidunt, repudiandae. 
    Earum, iure expedita. Assumenda repudiandae quasi, consequuntur nesciunt suscipit</p>
</div>

Output:

paragraph one

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas placeat adipisci maiores rem inv entore asperiores harum provident eveniet! Incidunt, repudiandae. Earum, iure expedita. Assumenda repudiandae quasi, consequuntur nesciunt suscipit

paragraph two

paragraph there

here we used the lorem to make raw text, there are a paragraph and a header text we placed them both in a div and changed the div color and as you see color changed only for the stuff inside the div

<span>

span is like the div but for smaller stuff like if you want this only sentence, here is an example:

<div style="color:rgb(255, 38, 0);">
    <p>paragraph one</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span style="color: darkorchid;"> Voluptas placeat adipisci maiores rem inv
    entore asperiores harum provident eveniet!</spam> Incidunt, repudiandae. 
    Earum, iure expedita. Assumenda repudiandae quasi, consequuntur nesciunt suscipit.</p>
</div>

Output:

paragraph one

as you see we set the style color to darkorchid

<meta>

<!-- Character Encoding -->

<meta charset="UTF-8">

Sets the character encoding to UTF-8.

<!-- Viewport Settings (Responsive Design) -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Makes the page responsive on mobile devices.

<!-- Description for SEO -->

<meta name="description" content="This is a description of my website.">

Helps search engines understand your page with a description.

<!-- Author Info -->

<meta name="author" content="Your Name">

Defines the author of the page.

<!-- Refresh or Redirect Page -->

        <meta http-equiv="refresh" content="5; url=https://example.com">

Redirects the page after 5 seconds.

<iframe>

<!-- Embedding a Website -->

        <iframe src="https://www.example.com" width="600" height="400"></iframe>

Displays an external webpage inside your site.

Output

<!-- Embedding a YouTube Video -->

        <iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        frameborder="0" allowfullscreen></iframe>

Embeds a YouTube video.

Output

<!-- Embedding a PDF File -->

        <iframe src="document.pdf" width="600" height="500"></iframe>

Displays a PDF file inside a webpage.

Output

<button>

<button>: The <button> tag is used to create clickable buttons in HTML. Buttons can be used in forms, for navigation, or for other interactive elements. Here is an example of how it works:

<!-- Basic Button -->

        <button>Click Me</button>

Creates a simple button.

Output:

<!-- Submit Button in a Form -->

        <form>
            <input type="text" placeholder="Enter your name">
            <button type="submit">Submit</button>
        </form>

Submits a form when clicked.

Output:

<!-- Reset Button in a Form -->

        <form>
            <input type="text" placeholder="Enter your name">
            <button type="reset">Reset</button>
        </form>

Resets the form fields when clicked.

Output:

<!-- Disabled Button -->

        <button disabled>Disabled Button</button>

Creates a button that is not clickable.

Output:

<form>

<form>: The <form> tag is used to create an interactive form where users can enter and submit data. Forms are commonly used for user input, such as login pages, contact forms, and surveys. Here is an example of how it works:

<!-- Basic Form -->

        <form>
            <label>Name:</label>
            <input type="text" name="name" placeholder="Enter your name">
            <button type="submit">Submit</button>
        </form>

Creates a simple form with a text input and a submit button.

Output:

<!-- Login Form -->

        <form>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Enter username">
            <br>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Enter password">
            <br>
            <button type="submit">Login</button>
        </form>

Creates a simple login form with username and password fields.

Output:

<!-- Radio Buttons -->

        <form>
            <p>Choose your gender:</p>
            <input type="radio" name="gender" value="male"> Male
            <input type="radio" name="gender" value="female"> Female
            <input type="radio" name="gender" value="other"> Other
        </form>

Allows users to select one option from a group.

Output:

<!-- Checkbox -->

        <form>
            <p>Select your interests:</p>
            <input type="checkbox" name="interest" value="music"> Music
            <input type="checkbox" name="interest" value="sports"> Sports
            <input type="checkbox" name="interest" value="reading"> Reading
        </form>

Allows users to select multiple options.

Output:

<!-- Select Dropdown -->

        <form>
            <label>Choose a country:</label>
            <select name="country">
                <option value="usa">USA</option>
                <option value="uk">UK</option>
                <option value="canada">Canada</option>
            </select>
        </form>

Creates a dropdown menu.

Output:

<!-- Textarea (Multi-line Input) -->

        <form>
            <label>Your Message:</label>
            <textarea name="message" rows="4" cols="30" placeholder="Type your message..."></textarea>
        </form>

Allows users to enter multi-line text.

Output:

<!-- Disabled Input Field -->

        <form>
            <label>Read-only Field:</label>
            <input type="text" value="This cannot be edited" disabled>
        </form>

Creates a non-editable input field.

Output:

Blog

Trying My Best in cybersecurity, tutorials, and more!

HTML

Python

Linux

Windows

CSS

Nmap

JavaScript

Bash

php

CCNA

SubMasking

Security+

CCNP

A+

CEH

SQL

Ruby

Perl

Docker

Firewall

Wireshark