HTML

Web Development Basic Concepts

INTERNET

WWW

HTML

<TagName> ..... </TagName>

Tags

Opening Tag

Closing Tag

<html> ........ </html>

html

Opening Tag

Closing Tag

Basic Structure of Html

<html>
    
    <head>
        .......
    </head>

    <body>
        .......
    </body>

</html>

Not Visible

 Visible

Paragraph

<p>
    This  tag is used to 
    display text in paragraph. 
    Go ahead and try this tag 
    in your code and 
    see how it is displayed
</p>

 

Br tag

<p>
    This  tag is used to <br> 
    display text in paragraph. <br>
    Go ahead and try this tag <br>
    in your code and <br>
    see how it is displayed <br>
</p>

 

This tag is used to 
display text in paragraph. 
Go ahead and try this tag 
in your code and 
see how it is displayed 

Code

What you see

pre tag

<pre>
    This  tag is used to  
    display text in paragraph.
    Go ahead and try this tag
    in your code and
    see how it is displayed
</pre>

 

This tag is used to 
display text in paragraph. 
Go ahead and try this tag 
in your code and 
see how it is displayed 

Code

What you see

Let us give heading to paragraph

<h1> Heading </h1>

<pre>
    This  tag is used to
    display text in paragraph.
    Go ahead and try this tag
    in your code and
    see how it is displayed
</pre>

 

Heading

This tag is used to 
display text in paragraph. 
Go ahead and try this tag 
in your code and 
see how it is displayed 

Code

What you see

6 Heading

<h1> Heading </h1>

<h2> Heading </h2>

<h3> Heading </h3>

<h4> Heading </h4>

<h5> Heading </h5>

<h6> Heading </h6>

Code

What you see

Horizontal line

<h1 > Heading </h1 >

<hr >

<pre >
    This  tag is used to
    display text in paragraph.
    Go ahead and try this tag
    in your code and
    see how it is displayed
</pre >

Code

What you see

Text formating

<b> bold </b>

<i> italic </i>

<u> underlined </u>

<sup> superscript </sup>

<sub> subscript </sub>

Attributes

<p align="center"> hello </p>

attribute name

value

Attributes example

<p title="About TajMahal">
     TajMahal was built in 
    ...blahhh ....blahh....blahh 
</p>

Anchor tag

<a href="http://www.google.com">
     google 
</a>

Image

<img src="tiger.jpg">

source of image

Image path

Create a simple webpage

Unodered List

<ul>
  <li>tiger</li>
  <li>lion</li>
  <li>elephant</li>
</ul>

 list item

Odered List

<ol>
  <li>tiger</li>
  <li>lion</li>
  <li>elephant</li>
</ol>

 list item

Table

<table border="1px">
  <tr>
    <td>Animal</td>
    <td>Bird<td> 
    <td>Fruit<td>
  </tr>
  <tr>
    <td>Tiger</td>
    <td>Peacock</td> 
    <td>Mango</td>
  </tr>
</table>

 Row data

 Row data

 Row

 Row

Create Table

Table

Table

<table border="1px">
  <tr>
    <td>Animal</td> 
    <td colspan="2">Bird</td>
  </tr>
  <tr>
     <td>Tiger</td>
     <td>Peacock</td>
     <td>Parrot</td>
  </tr>
</table>

Table

<table border="1px">
  <tr>
    <td rowspan="2">Tiger</td> 
    <td>Mango</td>
  </tr>
  <tr>
    <td>Lion</td>
  </tr>
</table>

Create Table

Form

<form> . . . </form>

Input Tag



<input type="
text
number
password
submit
radio
checkbox


<input type=""  />

"

Input Text

 <input type="text" />

Code

What you see

Input Date

<input type="date"  />

Code

What you see

<textarea rows="4" cols="50">
At StudyOwl you will learn how to make a website.
We offer tutorials in all web 
development technologies.
</textarea>

Code

What you see

TextArea

<select>
  <option>Google</option>
  <option>Facebook</option>
  <option>Microsoft</option>
  <option>Twitter</option>
</select>

Code

What you see

Select tag

Create From

HTML Introduction

By Prashanth Reddy

Source: Parth

HTML Introduction

next to deck

  • 3,321

More from Prashanth Reddy