Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html list

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html list
Showing posts with label html list. Show all posts
Showing posts with label html list. Show all posts

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

 

Start Learning Html5 Semantics in an hour.


Learn HTML5 Semantics in An Hour.

Now what is semantics?


Html5 Comes in new data element which describe what type of content,section is for that element.like Header <header> Footer <footer>,sidebar <aside> etc.




A basic HTML5 Page Example.
===================================================


<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
This is the Header of our Site like for Site Title Menu
</header>
<nav>This is nav bar of our site</nav>
<aside>
This is sidebar of our site
</aside>
<section>
This is content of our site
</section>
<footer>
This is footer of our site
</footer>


</body>
</html>


This Simple page give output like this.






Since We look there is only plain text written on browser so as we all know tha html is only structure of page alignment designs and behaviour of our page control by javascript and css we will cover javascript and css in next post.


Now lets start Study more html general elements which we used and their property and default css value of their elements.


Before starting lets discuss about attribute what is attribute since every elements as has default attribute or we use custom attribute for js.


Anchor Tag (<a></a>)


<a> this is anchor tag which we used for linking our html page from one page to other
Attributes:
href : Url (e.g href=”http://google.com “ ,href=”page2.html”).
Rel : (nofollow,next,search,prev,tag,help,author) e.g rel=”nofollow” This used for nofollow the url generally used for search engines To Not follow this link.
Target : _blank - Open Link in New Tab.
_parent - Open Link in Same Window.
E.g <a href="hello.html">Link</a>


where hello.html is our next page and link is test which works as masking of link and href is a default attribute of anchor tag<a> .


Address Tag (<address></address>)
Address Tag Defines TheContact Information of an Article.The Text Inside Address Tag is Render in Italic Font.
E.g <address>Abc,New Delhi,India</address>


Area Tag (<area>)
Area tag Defines an Area in image mapping where we Create A image map i.e Clickable link in image by image area and coordinates .if you want More about image mapping and how to create it i already posted a article on this please read it.
E.g <img src=”hello.png” alt=”hello” usemap=”#hello”>
<map name=”hello”>
<area shape=”rect” coords=”0,0,82,120” href=”next.html”>
<area shape=”circle” coords=”120,58,8”’ href=”next2.html”>
</map>
Attributes :
Coords – This is coordinates of area of circle,rectangle of image.
Href- This is Link of url on click on image area.
Target- _blank,_parent.
Article Tag (<article></article>)
Article Tag defines the article in webpage such as post,comments.
E.g- <article>Again new post is Ready</article>


Audio Tag (<audio></audio>)
Audio tag Play the sound in webpage,such as music.
E.g - <audio controls=”controls”>
<source src=”hello.mp3” type=”audio/mp3”>
Your browser not supported
</audio>
if Your Browser not Support Audio tag it print the text “your browser not supported”.


Bold Text (<b></b>)


<b> this is for bold the text in our site.
E.g- <b>hello</b>

Body Tag (<body></body>)

<body> this is used for our body of site every contents of our site go inside body tag
E.g- <body>covers all</body>

  Break Tag(</br>)
<br> used for breaking the lines

Button Tag (<button></button>)
<button> create a button in our site
E.g <button>click</button>


Form Elements like (form,input,select,checkbox,radio,textarea)

lets read about input element select and textarea which used in submitting form.
we can create a form by using element <form>

e.g- <form action="hello.php" method="post">

</form>

here action is a
attribute for where we send the values of input fields and method is the method of sending data like get or post

if we use
get the then the value will show in our Url if we use post then value will be send hidden who carry value from one page to another all input field inside form will send the value by carrying value in its name attribute.
Note: - if we upload file using form then we must add extra attribute (enctype=”multipart/form-data”).

Input tag (<input>)
creates a input like radio,text,checkbox,file
<input type="text" name="hello"> (textbox)
<input type="radio" name="hello2"> (radio)
<input type="checkbox" name="hello3"> (checkbox)
<input type="submit" value="submit">(submit button)
<input type="reset" value="reset"> (reset input button>
<input type="file" name="file">(for file uploading)

Note :- using file uploading we must used enctype="multipart/form-data" attribute in our html form for sending the file data to server.


Select and option tag (<select></select>)
Select tag get value from its child tag option which we selected.


<select name="hello4">
<option>1</option>
<option>2</option>
</select>



div tag (<div></div>)
Div is a element for creating a small section in our site

Table,table row,table column(<table><table>,<tr><td>)
<table>
create a row column data in a table
<tr> this is table row 
<td> this is table column
<th>this is table heading

<table>
<tr><td>one</td><td>two</td></tr> 
<tr><td>three</td><td>four</td></tr> 
</table>

if we want two merge two column the simply use
attribute in td colspan=2
if we want to merge two row of a cell the simple use attribute in td rowspan=2

unordered list (ul),ordered list (ol),defination list(dl)

Unordered list
<ul>
<li>item1 </li>
<li>item2 </li>
<li>item3 </li>
<li>item4 </li>
</ul>

Ordered List
<ol>
<li>item1 </li>
<li>item2 </li>
<li>item3 </li>
<li>item4 </li>
</ol>


Defination list
<dl>
<li>item1 </li>
<li>item2 </li>
<li>item3 </li>
<li>item4 </li>
</dl>

image tag (<image>)
<img src="hello.jpg">
for displaying image in our site
where
src is the attribute for image path.
Alt attribute is used in image tag to display text if image will not loading .
Style Tag <style>

<style></style>
for css style of our page


Script Tag <script>

<script></script>
for script of our page like js.

<link>
for calling of external stylesheet in our page
<link rel="stylesheet" href="stylesheet.css">

for calling of external js
<script src="heelo.js"></script>


Paragraph tag <p></p>


<p> paragraph tag for certain paragraph in our site.


Title Tag <title>


<title>title tag of our site


Heading tag <hn- n=1,2,3,4,5,6>)

h1-h6 heading tag in our site.
<h1>.................</h1>
<h2>.................</h2>
<h3>.................</h3>
<h4>.................</h4>
<h5>.................</h5>
<h6>.................</h6>
Strong,Emphazise,Italic tag (<strong>,<em>,<i>)


Strong text - <strong>this is strong wriiten text</strong>
Emphazise - <em> this is em text</em>
Italic - <i>this is italic text</i>
Video tag <video>


<video controls=”controls” height=”100” width=”100”>
<source src=”hello.mp4” type=”video/mp4”>
Your Browser not Supported.
</video>
Video tag is used For adding video is our websites. If video tag not support your browser then it prints te text “your browser not support”.


Iframe <iframe>


iframe tag is used to load external webpage in our site.
Attribute
src=”hello.html”
E.g <iframe src=”hello.html” height=”100” width=”100”>



Thanks all This post Will be Update More Soon..




0