HTML 5 Simple Tutorial Part 3

HTML Tutorial Topic 3
Prevoiusly we Learned Basic HTML Elements and
Tables.
Now Lets Start Topic 3

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

List
List – list as we know it contains list of item in
ordered or unordered.
Example
Unordered List
● Apple
● Mango
● Guava
● Orange
Ordered List
1.Apple
2.Mango
3.Guava
4.Orange
5.Banana

List
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>

List
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
List Example HTML
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<p>Unordered List</p>
<ul>
<li>Mango</li>
<li>Guava</li>
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
</ul>
<p>Ordered List</p>
<ol>
<li>Carrot</li>
<li>Onion</li>
<li>Potato</li>
<li>Tomato</li>
<li>Cabbage</li>
</ol>
</body>
</html>
Browser View

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
Block Elements Example
<html>
<body>
<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
</div>
<span style=”border:1px solid red;padding:2px”>
I am a inline with border and (Padding so i dont Touch the Border Of Span
</span>
</body>
</html>
Result :

Some List Of Block Elements
<div>
<article>
<section>
<header>
<footer>
<main>
<aside>
<form>
<ul>
<ol>
<p>
<pre>
<section>
<table>
<li>
<h1>-<h6>
Some List Of Inline Elements
<a>
<button>
<input>
<span>
<select>
<textarea>
<i>
<time>
<img>
<small>

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
E.g <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

Class and id
Simple selecting element in css
<html>
<head><style type="text/css">
div.firstclass{ background: red; }
div.secondclass{ color:white; }
div#firstid{ background: grey; color: black; }
</style></head>
<body>
<div class="firstclass">
i am a div which is selected and controlled by css
</div><span>
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
</div>
</body>
</html>

Iframes
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=”http://sswebtricks.blogspot.in/”
width=”100%” height=”400px”>

Iframes
Lets Create a iframe
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<iframe src="http://sswebtricks.blogspot.in/"
width="100%" height="600px"></iframe>
</body>
</html>
Browser View

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>
● A simple Layout Of Webpage lets create it.

Simple Web Page
<!DOCTYPE html>
<html>
<head>
<title>Simple layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Welcome To SuperCoders</header>
<nav>
<a href="#">Home</a>
<a href="#">Post</a>
<a href="#">Signup</a>
</nav>
<aside>
<p>I m a sidebar where some notification comes</p>
</aside>
<main>
<section>
<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>
</section>
</main>
<footer>
© SuperCoders 2018
</footer>
</body>
</html>

Simple Web Page
Style.css
body{
margin:0px;
padding: 0px;
}
header{
padding: 10px;
background: orange;
}
aside{
background: tomato;
width: 18%;
padding: 10px;
float: left;
height: 400px;
}
main{
background: red;
width: 78%;
padding: 10px;
float:left;
height: 400px;
}
footer{
text-align: center;
clear: both;
color: white;
background: green;
padding: 10px;
}
nav{
background: pink;
padding: 10px;
}
nav a{
background: yellow;
padding: 5px;
margin: 5px;
}

HTML 5 Simple Tutorial Part 3

Recommended

More Related Content

What's hot (18)

Similar to HTML 5 Simple Tutorial Part 3 (20)

Recently uploaded (20)

HTML 5 Simple Tutorial Part 3