Scribd
Upload
44 views

HTML For Beginers PDF

This document provides an introduction and examples of key HTML elements for beginners. It covers headings, paragraphs, bold, italics, lists, hyperlinks, images, tables, forms, and more. Examples are given of each element along with possible attributes. For instance, it shows how to create ordered and unordered lists, and how lists can have type attributes like numbers, letters, or roman numerals. It also demonstrates how to add images, hyperlinks, and forms with inputs for text, radio buttons, and submissions. The goal is to help beginners learn the basic building blocks of HTML through examples and explanations of elements and attributes.

Uploaded by

Md.Muzibur Rahman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

HTML For Beginers PDF

This document provides an introduction and examples of key HTML elements for beginners. It covers headings, paragraphs, bold, italics, lists, hyperlinks, images, tables, forms, and more. Examples are given of each element along with possible attributes. For instance, it shows how to create ordered and unordered lists, and how lists can have type attributes like numbers, letters, or roman numerals. It also demonstrates how to add images, hyperlinks, and forms with inputs for text, radio buttons, and submissions. The goal is to help beginners learn the basic building blocks of HTML through examples and explanations of elements and attributes.

Uploaded by

Md.Muzibur Rahman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML for Beginners

MD. ABDULLAH AL ZAMAN (PROYASH)


Department of Physics, (Master’s Student)
University of Chittagong,
Chittagong-4331, Bangladesh
Phone: +8801627041786
E-mail: [email protected]
Researchgate: www.researchgate.net/profile/Md_Abdullah_Zaman

<!DOCTYPE html>
<html>
<head>
<title> Title here </title>
</head>
<body>
<h1> This is Head and Horizontal line.Head can be increased up to 6 (h1-h6)</h1><br/><hr/>
<a herf="#bot">bottom</a> //Switching
 BASICS
This is an example of simple line.<br/>
<b>This Is an example of BOLD</b><br/>
<strong>This an example of STRONG</strong><br>
<strike> This an example of strike</strike><br/>
<u> This Is an example of UNDERLINE </u><br/>
<i>This Is an example of italic letter</i><br/>
This is an example of <sup> superscript</sup>
This Is an example of <sub>subscript </sub>
<p>This is an example of paragraph<br/>Bangladesh is an independent nation.
we became independent in 1971<br/>after a great liberation war by sacrificing
an ocean of blood</p><br/>
<center> this is an example of center</center>

 ORDER LIST
<ol>This an example of order list
<li>Book</li>
<li>Pen</li>
<li>Mobile</li>
</ol><br/>

Examples of Order list with attributes.<br/>


Type 1= 1,2,3..<br/>
Type a=a,b,c..<br/>
Type i=i,ii,iii,iv....<br/>
<ol type="a">
<li>BOOK</li>
<li>PEN </li>
<li>MOBILE</li><br/>
</ol>

another example
<ol type="i">
<li>BOOK</li>
<li>PEN</li>
<li>MOBILE</li>
</ol>
<br/>

 UNORDER LIST
<ul> This an example of unorder list
<li>Book</li>
<li>Pen</li>
<li>Mobile</li>
</ul><br/>

Examples of unorder list with attributes.<br/>

Types="circle","Disk","Square"<br/>
An example:<br/>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><br/><br/>

 FONT
This is the example of font size,face and color:<br/>
colors like "Red,green,blue,lime,gold,pink,cyan,yellow,maroon.<br/>
To write bangla the text style is sutonnyMj.<br/>
For using bangla, write in the MS WORD using font SutonnyMJ<br/>
copy it and paste it between the tags.<br/><br/>

<font size="15" face="sutonnyMj" color="blue">mbmewaZ </font>


<br/>
<font size="10" face="Times new roman" color="RED">HELLO BANGLADESH </font>

 HYPERLINK
Examples of hyperlink:<br/>
Connet to :- <a href="http://www.facebook.com">FACEBOOK</a><br/>
Use the<a href="http://www.google.com">GOOGLE SEARCH</a>

<a href="ankhi.html">click here</a> //example of making reation between two pages in a same folder
 IMAGE
This is the example of using images.Use the datapath of<br/>
that file or keep the image in the same folder where the webpage will be saved.
<img src="c.jpg"><br/>

This is the example of image with attributes.<br/>


Align=(center,middle,left,right,top**default is middle),height,width,border<br>

<img src="ro.jpg" height="200" width="200"><br/>

**Images can also be used as a hyperlink. Just use the format of adding image in the place of lebel of the hyperlink**
<a href="wwww.facebook.com"> <img sre="1.jpg" height="30" width="40"></a> //use an image as a link

<a name="bot"> //switching point

 TABLE
<center>This is the example of table with attributes like border and alignment</center>

<table border="2" align="center">


<tr> <th>sl</th><th>book</th><th> pen</th><th> box</th></tr>
<tr> <td>01</td><td>180</td><td>240</td><td>780</td></yr>
<tr><td>02</td><td>730</td><td>680</td><td>320</td></tr>
<tr><td>03</td><td>550</td><td>580</td><td>270</td></tr>
<tr><td colspan=4 align=center>merge cell</td></tr>
</table>

 FORM AND SUBMIT


<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

You might also like