HTML Tutorial Topic 3 - Supercoders | Web Development and Design | Tutorial for Java, PHP, HTML, Javascript HTML Tutorial Topic 3 - Supercoders | Web Development and Design | Tutorial for Java, PHP, HTML, Javascript


Post Top Ad

Post Top Ad

Saturday, February 17, 2018

HTML Tutorial Topic 3

HTML Tutorial Topic 3

HTML Tutorial


  • Today I Cover This All Topics
  • List
  • Blocks
  • Classes and id
  • Iframes
  • Some Useful Tips 


List as we know it contains list of item in ordered or unordered.

Unordered List
  • Apple
  • Mango
  • Guava
  • Orange

Ordered List
  1. Apple
  2. Mango
  3. Guava
  4. Orange
  5. Banana
We Can Create Easily List in HTML By Using
<ul> - for unorder list
<ol> - for ordered list.

<li> is a nested Element Which Comes Inside Both in ul and ol for list Items.

E.g - <ul><li>First Item</li></ul>
We Can Customize List Item Easily Like Ordered List in Roman no. Format or Unordered List Item in square type items.
For Ordered List

We Use Attribute type=”value”

Where Values is
1 = For Number List Items
A= For uppercase Numbered List Item
a= For Lowercase Numbered
I = For Uppercase Roman Numbered
i = For Lowercase Roman Numbered
For UnOrdered List

We Use CSS style=”list-style:values”

Where Values is
circle = For Circle Number List Items
disc = For disc Numbered List Item
square = For Square  Numbered
none = For Simply Print item without Bullets
List Example HTML
<!DOCTYPE html>
<p>Unordered List</p>
<p>Ordered List</p>


Block and Inline Elements 

Block Elements – Block elements are such elements that stretch full width under body and start with new line.

E.g : <div>,<article>

Inline Elements – Inline Elements are such which does not takes full width cover only small part that it needs.

E.g : <span>,<button> 

Simple Example 

<div style=”padding:2px;border:1px solid red;margin-bottom: 10px;”>
I am A Block Element, I used Border So it Clearly Show Much It Takes Width, Padding For items don’t touch the Div Border and Margin bottom So i dont Touch the Span
<span style=”border:1px solid red;padding:2px”>
I am a inline with border and (Padding so i dont Touch the Border Of Span 

HTML Blocks and Inline

Some List Of Block Elements

Some List Of Inline Elements<a>

Class and id

Since, We use class and id for select elements  in our webpage by using javascript or css.

We can declare multiple elements in our web page but if we declare multiple then css select the multiple multiple id but js does not select it.

Id is always unique.
We can use multiple class value in element but not in id
<span class=”first second”>

We select class by using (.) dot and (#) for id.
E.g for id – botton#myfirstid{ color:red }
#myfirstid{ color:red } both is same but in upper it select only button elements.

For class – button.myfirstclass{ color:yellow }
.myfirstclass { color:yellow } both is same but first one select only input elements

 Simple selecting element in css
<head><style type="text/css">
div.firstclass{  background: red; }
div.secondclass{ color:white; }
div#firstid{ background: grey; color: black; }
<div class="firstclass">
i am a div which is selected and controlled by css
css not select me because my class is same but i am a span element
</span><div id="firstid">
css control me by my id and element
</div><span id="firstid">
css not control me by my id and element because i am span element
</span><div class="firstclass secondclass">
i a muti class element so firstclass and secondclass both select me

html class and id


Iframes is used to display a embeded webpage in your current webpage just like adding other webpages or other website.
E.g – we see embed youtube in many sites.
Code : - 
<iframe src=””100%height=”400px”>


html iframe

Lets Create a iframe

<!DOCTYPE html>
<iframe src="" width="100%" height="600px"></iframe>



Html iframe

Some Useful Tips

For Reloading Webpages after some seconds we use.
<meta http-equiv="refresh" content="30">
  where content= seconds
use this code inside every meta tag comes inside head tag

For Zoom View in Mobile Device or Creating Responsive (i cover this in css) web page we use.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

For writing computer codes or special codes like html in simple,programing language which print in programatic from we use <pre> tag
 Note : this will not execute in web page it just display codes in programatic form.
<pre>Your Codes</pre>

Simple Web Page Layout

<!DOCTYPE html>
<title>Simple layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
<header>Welcome To SuperCoders</header>
<a href="#">Home</a>
<a href="#">Post</a>
<a href="#">Signup</a>
<p>I m a sidebar where some notification comes</p>
<h2>What is Lorem Ipsum?</h2>
<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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
&copy; SuperCoders 2018



padding: 0px;
padding: 10px;
background: orange;
background: tomato;
width: 18%;
padding: 10px;
float: left;
height: 400px;
background: red;
width: 78%;
padding: 10px;
height: 400px;
text-align: center;
clear: both;
color: white;
background: green;
padding: 10px;
background: pink;
padding: 10px;

nav a{
background: yellow;
padding: 5px;
margin: 5px;


simple layout html



  1. It was great experience after reading this. thanks for sharing such good stuff with us.
    Web Designing Course in Delhi

  2. Are you looking for Cross PlatForm App Development Services.Multi-device supported mobile app is a very important weapon for the growth of business.We provide a range of services in cross platform mobile app development with the support of our deep web application development and mobile application .

  3. This is amazing blog i never ever had seen earlier.. I like the way you share.

    Mobile App Ideas
    Web Development
    Dating App Development Company


  4. Awesome!
    Thanks for sharing such good article. This is really helpful.

    Game Apps
    News App
    Social Media
    Trending Apps

  5. Hello, this weekend is good for me, since this time i am reading this enormous informative article here at my home. Web design Singapore


Post Top Ad