Wednesday, July 16, 2014

Web design

Learn html

rule: Copy every example code in your computers notepad and save by writing .html at last.
Do not keep any space.
Html starts by the sign <>
and end </>



Heading

h1= largest heading
h2= heading smaller then h1
h3= heading smaller then h2
h4= heading smaller then h3
h5= heading smaller then h4
h6= heading smaller then h5

Example: <h1>Largest heading</h1>

HTML Paragraphs

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links


<a href="http://www.w3schools.com">This is a link</a>


HTML Images



<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">


HTML break



<br>This is a book</br>

This book is red.

HTML Comment Tags

Example



<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->



HTML Tages

link
<a href="http://www.w3schools.com/">Visit W3Schools</a>
<hr> 
Defines a horizontal line
Defines a comment
id
Specifies a unique id for an element
Defines bold text
Defines important text

Metatag

HTML <meta> Element

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
<meta> tags always go inside the <head> element.

Button

<nav>
<ul>
<div><a href=""><button style="border-radius:10px;background:black;"><font color="white">Home</font></button></a></div>
<div><a href="http://nysurrahman.blogspot.com/2014/08/download-software-free.html"><button  style="border-radius:10px;background:black;"><font color="white">Software</font></button></a></div>
<div><a href="http://nysurrahman.blogspot.com/2014/08/change-your-ip-address.html"><button  style="border-radius:10px;background:black;"><font color="white">Computer</font></button></a></div>
<div><a href="http://nysurrahman.blogspot.com/2014/07/meta-tag.html"><button  style="border-radius:10px;background:black;"><font color="white">Web Design</font></button></a></div>
</ul>
</nav>

Horizontal Menu bar(Code).


Html Part


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="index.css" rel="stylesheet" type="text/css" />   
</head>

<body>

<nav>
<div id="navmenu">
<ul>
<li><a href="#" class="Active">Home</a></li><ul>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Service</a></li>
</ul>
</li>
</ul>
</div>

</nav>

</body>

</html>

CSS part

Css file should save as: Index.css
Css and Html keep in a same folder.

@charset "utf-8";
/* CSS Document */
#navmenu{
margin:opx;
padding:opx;
}
#navmenu ul{
margin:opx;
padding:0px;
}
#navmenu li{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
}
#navmenu ul li a{
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#039;
}
For any help comments below.

<meta> Tags - Examples of Use

Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

1 comment:

  1. Thank You for your the fantastic and educational report. I will be checking back in a number of nights for some far more updates.

    Seo Services In Georgia

    ReplyDelete