Showing posts with label HTML. Show all posts
CSS comments
CSS comments are just like the comments we use in programming language.In programming languages, we use comment line for documentation purpose or instead of deleting some lines.
Sample code to illustrate comment lines:
<html>
<head>
<title>Sample</title>
<body>
<table border = " 1 " >
<tr>
<th>Date</th>/* It represents heading*/
<th>Day</th>
</tr>
<tr>
<td>1/1/2014</td>/*First cell of the table*/
<td>Wednesday</td>/*Second cell of the table*/
</tr>
<tr>
<td>2/1/2014</td>
<td>Thursday</td>
</tr>
<tr>
<td>3/1/2014</td>
<td>Friday</td>
</tr>
<tr>
<td>4/1/2014</td>
<td>Saturday</td>
</tr>
<tr>
<td>5/1/2014</td>
<td>Sunday</td>
</tr>
</tr>
</table>
</body>
</html>
Sample code to illustrate comment lines:
<html>
<head>
<title>Sample</title>
<body>
<table border = " 1 " >
<tr>
<th>Date</th>/* It represents heading*/
<th>Day</th>
</tr>
<tr>
<td>1/1/2014</td>/*First cell of the table*/
<td>Wednesday</td>/*Second cell of the table*/
</tr>
<tr>
<td>2/1/2014</td>
<td>Thursday</td>
</tr>
<tr>
<td>3/1/2014</td>
<td>Friday</td>
</tr>
<tr>
<td>4/1/2014</td>
<td>Saturday</td>
</tr>
<tr>
<td>5/1/2014</td>
<td>Sunday</td>
</tr>
</tr>
</table>
</body>
</html>
HTML
HTML tables:
In real time applications,user may want to prepare applicant details,Employee details, Student report card, and so on.These application would be effective,if they are in a tabular format.If these applications are to be presented in a web page,it can be done with HTML.
HTML provides the choice for the user to create tables.To create a table in HTML, <table> tag is used.Usually,application such as microsoft word, staroffice writer will display the details of first row as bold,when the data is in presented in a tabular format.
Similarly,browsers make the text which is present between the tag <th> as bold.Hence,in HTML we may use the tag for heading purpose.A table is divided into rows by <tr> tag and each row is divided into cells by <td> tags.
Example:
<th>HEADING</th>
<tr>FIRST ROW</tr>
<td>FIRST CELL</td>
Sample code to create a table in web page:
<html>
<head>
<title>Sample</title>
<body>
<table border = " 1 " >
<tr>
<th>Date</th>
<th>Day</th>
</tr>
<tr>
<td>1/1/2014</td>
<td>Wednesday</td>
</tr>
<tr>
<td>2/1/2014</td>
<td>Thursday</td>
</tr>
<tr>
<td>3/1/2014</td>
<td>Friday</td>
</tr>
<tr>
<td>4/1/2014</td>
<td>Saturday</td>
</tr>
<tr>
<td>5/1/2014</td>
<td>Sunday</td>
</tr>
</tr>
</table>
</body>
</html>
In real time applications,user may want to prepare applicant details,Employee details, Student report card, and so on.These application would be effective,if they are in a tabular format.If these applications are to be presented in a web page,it can be done with HTML.
HTML provides the choice for the user to create tables.To create a table in HTML, <table> tag is used.Usually,application such as microsoft word, staroffice writer will display the details of first row as bold,when the data is in presented in a tabular format.
Similarly,browsers make the text which is present between the tag <th> as bold.Hence,in HTML we may use the tag for heading purpose.A table is divided into rows by <tr> tag and each row is divided into cells by <td> tags.
Example:
<th>HEADING</th>
<tr>FIRST ROW</tr>
<td>FIRST CELL</td>
Sample code to create a table in web page:
<html>
<head>
<title>Sample</title>
<body>
<table border = " 1 " >
<tr>
<th>Date</th>
<th>Day</th>
</tr>
<tr>
<td>1/1/2014</td>
<td>Wednesday</td>
</tr>
<tr>
<td>2/1/2014</td>
<td>Thursday</td>
</tr>
<tr>
<td>3/1/2014</td>
<td>Friday</td>
</tr>
<tr>
<td>4/1/2014</td>
<td>Saturday</td>
</tr>
<tr>
<td>5/1/2014</td>
<td>Sunday</td>
</tr>
</tr>
</table>
</body>
</html>
Sample output:
HTML
Coding can be made effective with HTML, but designing with HTML is little difficult,since you will have to design only with your code.Alternative way of designing is to go with "CSS".(i.e) Cascading style sheet.
Using this we can design a web page more effective and attractive than the one made with HTML.
In this session,we can see about the basic inline and embedded styles and formatting with CSS.
Inline styles:
Using style sheet, we can code or design as follows:
<style>
h1{color:green}
</style>
To make a inline style,provide the attributes in a single tag.
<H1 style=textsize:14>
The above formatting is called inline style.An embedded style can be made by typing some property and values inside the heading tags
Sample code for embedded style:
<style>
H1
{
fontcolor:blue;
}
</style>
Fonts:
In HTML, we can specify a font type and size as follows:
<font face="arial,times new roman">ABC</font>
The same can be done with CSS as follows:
Font face:arial,Timesnew roman;
Sample web page using above concepts:
<html>
<head>
<title>New webpage</title>
<style>
H1
{
fontsize:14;
fontytype:arial,time new roman;
}
</style>
<body>
<font color="blue">The text is in blue</font>
</body>
</html>
Using this we can design a web page more effective and attractive than the one made with HTML.
In this session,we can see about the basic inline and embedded styles and formatting with CSS.
Inline styles:
Using style sheet, we can code or design as follows:
<style>
h1{color:green}
</style>
To make a inline style,provide the attributes in a single tag.
<H1 style=textsize:14>
The above formatting is called inline style.An embedded style can be made by typing some property and values inside the heading tags
Sample code for embedded style:
<style>
H1
{
fontcolor:blue;
}
</style>
Fonts:
In HTML, we can specify a font type and size as follows:
<font face="arial,times new roman">ABC</font>
The same can be done with CSS as follows:
Font face:arial,Timesnew roman;
Sample web page using above concepts:
<html>
<head>
<title>New webpage</title>
<style>
H1
{
fontsize:14;
fontytype:arial,time new roman;
}
</style>
<body>
<font color="blue">The text is in blue</font>
</body>
</html>
HTML Tutorial 1
INTRODUCTION TO BASIC HTML
Welcome to Chapter 1 : intro to HTML
Part 1- HTML Structure Presentation
Part 2- Layout of an HTML file
Part 3- Working with Tables & List
Part 4- HTML Forms & Input
Part 5- Styling & Inline CSS
Part 1- Introduction to HTML
What is HTML?
Where to type these HTML Codings??
Normally we can use any text editor to Execute the HTML tags and to Create the pages .. i prefer to use the Notepad ++ .
Click Here to Download Text Editor Software
HTML Uses Tag Elements :
Content is wrapped in an open and closing tag ,
HTML Document Layout
Block Elements
Block Level Elements:
Creates a large block of content
new lines before and after element
Consumes the whole width available
Examples
Inline Elements
Inline Level Elements :
Examples
Element Attributes
Example :
"href" is the name of the attribute of the anchor <a> (link) tag
"http://vidyarthiplus.com/vp" is the value of the "href" attribute of the <a> (link) tag
other common attributes :
Style - styling can be done via "style" attribute
Id & class - specifies identification to an element
title- adds extra info about the element. Also Displayed in a toottip in some browser
Sample Output :
Welcome to Chapter 1 : intro to HTML
Part 1- HTML Structure Presentation
Part 2- Layout of an HTML file
Part 3- Working with Tables & List
Part 4- HTML Forms & Input
Part 5- Styling & Inline CSS
Part 1- Introduction to HTML
What is HTML?
- HTML is a Hypertext Markup Language
- HTML is not a Programming language
- Language of the Browser
- The World Wide Web Consortium Creates the Standards of HTML
- CSS is used to style HTML pages
Where to type these HTML Codings??
Normally we can use any text editor to Execute the HTML tags and to Create the pages .. i prefer to use the Notepad ++ .
Click Here to Download Text Editor Software
HTML Uses Tag Elements :
Code:
<p>this is a Paragraph</p> - paragraph
<h1>this is a heading</h1> - heading
<i></i> - Italic
<b></b> - BoldContent is wrapped in an open and closing tag ,
Code:
<p>this is a Paragraph</p>
<h1>this is a heading</h1>HTML Document Layout
Code:
<!DOCTYPE html>
<html> //open tag of HTML
<head> //open tag of Head
<title>Page Title</title> //open and close tag of title
</head> //close tag of Head
<body> //open tag of body
<p>Hi Welcome to vidyarthiplus !! </p> //open and close tag of Paragraph
</body> //close tag of Body
</html> //close tag of HTMLBlock Elements
Block Level Elements:
Creates a large block of content
new lines before and after element
Consumes the whole width available
Examples
Code:
<h1> - <h6> Headings , ( h1 with Maximum font size and so on)
<form> - forms
<div> - div tagsInline Elements
Inline Level Elements :
- No new Lines
- Can be placed aside other elements
- Cannot define width
Examples
Code:
<a> - links (known as anchor tag)
<strong> & <b> - both indicates the Size of the font
<input/>- input
<span> - Span tagsElement Attributes
- Most of the attributes are Name-Value pairs Separated with an "="
- Attributes provide additional information about an element
- Attributes are always specified in the Start tag
Example :
"href" is the name of the attribute of the anchor <a> (link) tag
Code:
<a href="www.vidyarthiplus.com/vp">Vidyarthiplus</a>"http://vidyarthiplus.com/vp" is the value of the "href" attribute of the <a> (link) tag
other common attributes :
Style - styling can be done via "style" attribute
Code:
<h1 style="color:red"> This Heading will be red</h1>Id & class - specifies identification to an element
Code:
<p id="mypara">This paragraph has an ID</p>title- adds extra info about the element. Also Displayed in a toottip in some browser
Code:
<a href="www.vidyarthiplus.com/vp" title="click here to go V+">
This paragraph has an id</a>Sample Output :
