HTML Tutorial Topic 3

Topics

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

List

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

Unordered List

Apple
Mango
Guava
Orange

Ordered List

Apple
Mango
Guava
Orange
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>
<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>

Result

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

<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

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>

Result

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

Example

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>

Result

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>
<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>
&copy; SuperCoders 2018
</footer>

</body>
</html>

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;
}

Result

4 comments:

AtulJanuary 24, 2020 at 5:37 PM

It was great experience after reading this. thanks for sharing such good stuff with us.
Web Designing Course in Delhi
alex careyFebruary 18, 2020 at 1:16 PM
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 .
The App IdeasFebruary 19, 2020 at 12:52 PM
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
james ronalldApril 2, 2020 at 11:44 PM
Hello, this weekend is good for me, since this time i am reading this enormous informative article here at my home. Web design Singapore

Breaking

Post Top Ad

Post Top Ad

Saturday, February 17, 2018

HTML Tutorial Topic 3