HTML Tutorial Topic 3


HTML Tutorial Topic 3

HTML Tutorial


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



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
HTML Blocks and Inline

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 
html class and id


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

Example 

html iframe
 



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

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

simple layout html

 

1 comments:

Post a Comment