What is HTML?
HTML stands for Hyper Text Markup Language. Developed by scientist Tim Berners-
When writing HTML, you add "tags" to the text in order to create the structure. These tags tell the browser how to display the text or graphics in the document.
HTML is a markup language for describing web documents (web pages).
- HTML stands for Hyper Text Markup Language.
- A markup language is a set of markup tags.
- HTML documents are described by HTML tags.
- Each HTML tag describes different document content.
Example of HTML coding:-
File save with Extension :abc.html (Note: abc is html file name and .html is extension of html file).
File save with Extension :abc.html (Note: abc is html file name and .html is extension of html file).
<!DOCTYPE html>
<html>
<head>
<title>Programming Language</title>
</head>
<body>
<h1>ABC</h1>
<p> a to z </p>
</body>
</html>
Advanced coding:- HTML 5:-
<!DOCTYPE html>
<html>
<head>
<title>Programming Language</title>
</head>
<body>
<header>This is Content Area</header>
<nav>
<ul class="ul1">
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
<section>
<article>
<h1>ABC</h1>
<p >a to z</p>
</article>
<article>
</section>
<aside>
<h2>Follow us</h2>
</aside>
<footer>This is footer</footer>
</body>
</html>
What is Css?
Cascading Style Sheets, or CSS, allow you to specify things like the font you want on your page, the size of your text, whether the page is to have 2 columns, whether your text is to be in bold or italics, and so on. In other words, it is the part that lets you control the appearance of your web page.
You may be used to the Microsoft Word "doc" format, where everything from the text you type to the appearance of the document is specified in a single file, transparent to you. On the web, the raw information is specified in HTML and most of the appearance is determined by the CSS.
Example of Css:
File save======>index.html
<html>
<head>
<title>Html & Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>this is header </header>
<h1>ABC</h1>
<p>A To Z</p>
</body>
</html>
<head>
<title>Html & Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>this is header </header>
<h1>ABC</h1>
<p>A To Z</p>
</body>
</html>
File save=====> style.css
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form mrthod='post' action='registration_form.php'>
<table width='' border='5' align='center'>
<tr>
<th bgcolor='green'colspan='7'><u>USER REGISTRATION FORM</u></th>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>FIRST NAME:</td>
<td><input type='text' name='f_name'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>LAST NAME:</td>
<td><input type='text' name='l_name'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>FATHER`S NAME:</td>
<td><input type='text' name='fathr_name'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>AGE:</td>
<td><input type='text' name='age'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>GENDER:</td>
<td><select name='gender'>
<option value='null'>SELECT GENDER</option>
<option value='m'>MALE</option>
<option value='f'>FEMALE</option>
</td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>ADDRESS:</td>
<td><input type='text' name='address'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>REGION:</td>
<td><select name='region'>
<option value='null'>SELECT RESION</option>
<option value='s'>SINDH</option>
<option value='b'>BALOCHISTAN</option>
<option value='p'>PUNJAB</option>
<option value='k'>KPK</option>
</td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>COUNTRY:</td>
<td><select name='country'>
<option value='null'>SELECT COUNTRY</option>
<option value='pk'>PAKISTAN</option>
<option value='du'>DUBAI</option>
<option value='ir'>IRAN</option>
<option value='tr'>TURKEY</option>
</td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>EMAIL:</td>
<td><input type='text' name='email'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>CONTACT #:</td>
<td><input type='text' name='cntact'></td>
</tr>
</table>
</form>
</body>
</html>
NOW WE CREATE FORM
(A simple registration form coding in html codes)
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form mrthod='post' action='registration_form.php'>
<table width='' border='5' align='center'>
<tr>
<th bgcolor='green'colspan='7'><u>USER REGISTRATION FORM</u></th>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>FIRST NAME:</td>
<td><input type='text' name='f_name'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>LAST NAME:</td>
<td><input type='text' name='l_name'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>FATHER`S NAME:</td>
<td><input type='text' name='fathr_name'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>AGE:</td>
<td><input type='text' name='age'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>GENDER:</td>
<td><select name='gender'>
<option value='null'>SELECT GENDER</option>
<option value='m'>MALE</option>
<option value='f'>FEMALE</option>
</td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>ADDRESS:</td>
<td><input type='text' name='address'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>REGION:</td>
<td><select name='region'>
<option value='null'>SELECT RESION</option>
<option value='s'>SINDH</option>
<option value='b'>BALOCHISTAN</option>
<option value='p'>PUNJAB</option>
<option value='k'>KPK</option>
</td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>COUNTRY:</td>
<td><select name='country'>
<option value='null'>SELECT COUNTRY</option>
<option value='pk'>PAKISTAN</option>
<option value='du'>DUBAI</option>
<option value='ir'>IRAN</option>
<option value='tr'>TURKEY</option>
</td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>EMAIL:</td>
<td><input type='text' name='email'></td>
</tr>
<tr>
<td bgcolor='sky blue' align='right'>CONTACT #:</td>
<td><input type='text' name='cntact'></td>
</tr>
</table>
</form>
</body>
</html>
RESULT
No comments:
Post a Comment