Web Development Learning Basic HTML -Day 01

I was wondering about starting learning web development. So I take a mission to learn web development from zero. Today is my first day of learning Web Development. Today I have learned about some basics of HTML.

To check the code preview hit the play button or to copy the codes hit the copy icon from the code editor top right menu items.

Quick Navigation

What is HTML?

Those who want to start you already know its full form is Hyper Text Markup Language. It’s a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

Learn more about the definition of HTML form here.

To save a file on your server or desktop or pc or mac you have to save it as .html format.

What I have learned today in Basic HTML?

I have learned 5 types of simple tags.

Paragraph (<p></p>)
Writing in paragraphs.

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P>

Bold (<b></b>)
Making something bold.

Lorem Ipsum is simply dummy text<b>Lorem Ipsum is simply dummy text</b> Lorem Ipsum is simply dummy text

Strong (<strong></strong>)
Emphasizing the priority of bold items.

Lorem Ipsum is simply dummy text
<strong>Lorem Ipsum is simply dummy text</strong>

Difference between Bold vs Strong

Check the code first, don’t look at the other elements like styles. You can see the output.

<!DOCTYPE html>
<html>

<head>
	<title>b tag</title>
	
	<style>
		body {
			text-align:center;
		}
		h1 {
			color: green;
		}
	</style>
</head>

<body>
	<h1>GeeksforGeeks</h1>
	
	
<p>
		Without <strong>internet</strong>
		we can not use gfg
	</p>

	
	
<p>
		<b>GeeksforGeeks:</b> A computer
		science portal for geeks
	</p>

</body>

</html>

Output:

Source: https://www.geeksforgeeks.org/difference-between-strong-and-bold-tag-in-html/

Greengeeks wanted to show the importance of the word “internet” so they used tag whereas for the word “GeeksforGeeks”, they just simply wanted to format the text in bold.

Learn more here.

Italic (<i></i>)
Making italic format

Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text
<i>Lorem Ipsum is simply dummy text</i>
Lorem Ipsum is simply dummy text

6 types of headings
- H1
- H2
- H3
- H4
- H5
- H6

Some Common Attributes

Learned some common attributes used in HTML.

With Attributes

5 types of tags: Tags with Attributes
- Anchor Tag: <a></a>, tag attribute: href
  In easy terms, anchors are places name, and a tag attribute href is a reference that means where is the place.

My name is <a href="https://gtarafdar.com">gobinda</a>.

Image Tag: <img/>, tag attribute: SRC (source)
In image we have to link the image source.

<P>This is my image</p>
<img src="https://gtarafdar.com//wp-content/uploads/2020/09/Gtarafdar-banner.png" alt="gobinda">

Imput tag: <imput/>, tag attribute: type
The tag specifies an input field where the user can enter data. The element is the most important form element.

<form action="">
    <input type="text">
    <input type="email" name="" id="">
    <input type="password" name="" id="">
    <input type="time" name="" id="">
    <input type="radio" name="" id="">
    <input type="button" value="submit">
</form>

Empty Tag

In this group, we will not get any tags in it.

Break (<br>)
Giving a line break just use it.

<form action="">
    <input type="text"> <br>
    <input type="email" name="" id=""> <br>
    <input type="password" name="" id=""> <br>
    <input type="time" name="" id=""> <br>
    <input type="radio" name="" id=""> <br>
    <input type="button" value="submit">
</form>

Horizontal Rule: (<hr>)
Giving a big underline in page or page break.

<h1>What is Lorem Ipsum?</h1><hr> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</P>

Input Tag: <input/>
It’s also an empty tag.

Learn more about input tags from here.

Container Tag

Div: <div></div>
The <div> tag defines a division or a section in an HTML document. The tag is used as a container for HTML elements – which are then styled with CSS or manipulated with JavaScript. The tag is easily styled by using the class or id attribute.

<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
}
</style>
</head>
<body>

<h1>The div element</h1>

<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>

</body>
</html>

Source code: Code is from w3school.

Unordered List: <ul></ul>
List which are not listed on ordered manner.

<p>Here is the unordered list exmple </p>
<ul>
  <li>Mango</li>
  <li>Apple</li>
  <li>Grape</li>
  <li>Guava</li>
</ul>

Ordered List: <ol></ol>
Listed in orderd manner.

<p>Here is the ordered list exmple </p>
<ol>
  <li>Mango</li>
  <li>Apple</li>
  <li>Grape</li>
  <li>Guava</li>
</ol>

Form: <form></form>
Webiste’s several types of forms

<form action="">
    <input type="text"> <br>
    <input type="email" name="" id=""> <br>
    <input type="password" name="" id=""> <br>
    <input type="time" name="" id=""> <br>
    <input type="radio" name="" id=""> <br>
    <input type="button" value="submit">
</form>

Declaration (Special)

Document type

div: <!DOCTYPE html>
All HTML documents must start with a declaration. The declaration is not an HTML tag. It is an “information” to the browser about what document type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2nd site</title>
    <link rel="shortcut icon" href="https://gtarafdar.com//wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2021/02/cropped-gtarafdar-favicon-e1613034491698.png.webp" type="image/x-icon">
</head>
<body>
    <h1>habi jabi</h1>
    <p>hajajajajjajajaskdjhhjtdfghkjfghjkfhgjk</p>
    <hr>
    <p>hjashdjahsdjhasjdhasjd  shdjkahsdjahsdasdhajhaksjhdjas  sshdahdjsahdkjash ashoashda oijasidj</p>
    <a href="https://gtarafdar.com">gobinda</a>
    <img src="https://gtarafdar.com//wp-content/uploads/2020/09/Gtarafdar-banner.png" alt="gobinda">

<form action="">
    <input type="text">
    <input type="email" name="" id="">
    <input type="password" name="" id="">
    <input type="time" name="" id="">
    <input type="radio" name="" id="">
    <input type="button" value="submit">
</form>
</body>
</html>

Closing

That’s what I have learned today about the basics of HTML. See you tomorrow.