Tutorial HTML , CSS
HTML
1) Who makes Web standards?
World Wide Web Consortium makes web standards.
There website is w3.org
2) What is the latest version of HTML?
HTML 5.
3) Write a basic HTML to display “Hello World”?
<html>
<head>
</head>
<body>
<p>
Hello World
</p>
</body>
</html>
4) What is HTML?
HTML is a language for describing web pages.- HTML stands for Hyper Text Markup Language
- HTML is not a programming language, it is a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
5) How to display HTML links?
<a href = “http://www.source.com”> This is a link to the website.</a>
6) How to display an image?
<img src = “img.jpg” width=“22” height =”44” />
7) How to put a line break?
<br/>
8) What are HTML attributes?
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Example href is an attribute in the example below:-
<a href = “http://www.source.com”> This is a link to the website.</a>
9) Write down some common attributes?
Below is a list of some attributes that are standard for most HTML elements:| Attribute | Value | Description |
| Class | classname | Specifies a classname for an element |
| Id | id | Specifies a unique id for an element |
| Style | style_definition | Specifies an inline style for an element |
| Title | tooltip_text | Specifies extra information about an element (displayed as a tool tip) |
10) How to create horizontal lines.
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.11) How to write comments in HTML?
<!-- This is a comment -->
12) HTML Output important point
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.
13) Give some Text formatting example?
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
14) Examples of style attribute
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
15) How to open the link in new browser window
<a href="http://www.source.com/" target="_blank">Visit Source</a>
16) How to specify an anchor in html
The name attribute specifies the name of an anchor.
| <a name="tips">Useful Tips Section</a> |
| <a href="#tips">Visit the Useful Tips Section</a> |
| <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a> |
17 ) How to define a table element?
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
17) How to define a form element.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
18) How to define radio buttons.
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
19) What is a DocType?
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
Example:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
20) Some elements that can be defined in the head section of html
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.
21) What is a meta data
Metadata is information about data.The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
Examples
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
22) Some useful entities to display spaces, less than etc.
| Result | Description | Entity Name | Entity Number |
| | non-breaking space | |   |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| § | section | § | § |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
| ™ | trademark | ™ | ™ |
23) What is XHTML
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML is a W3C Recommendation
CSS
1) Inline style
<p style="text-align:right;color:red;font-size:20px;"> text with 20 size</p>
2) Style inside the head element
<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
3) External Style sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
4) CSS Comments
/*This is a comment*/
5) The id selector
The style rule below will be applied to the element with id="para1":
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
{
text-align:center;
color:red;
}
</style>
6) The class selector
<style type="text/css">
.center {text-align:center;}
p.center {text-align:center;}
</style>
No comments:
Post a Comment