html

22
HTML

Upload: google

Post on 15-May-2015

3.649 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Html

HTML

Page 2: Html

INTRODUCTION

HTML stands for Hyper Text Markup Language

predominant markup language for web pages

Developed by World Wide Web Consortium & WHATWG

Type of format Markup language

Page 3: Html

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

Start and end tags are also called opening tags and closing tags

HTML tags are not case sensitive

Page 4: Html

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

HTML Links

HTML links are defined with the <a> tag.

HTML Images

HTML images are defined with the <img> tag.

HTML Comments

Comments can be inserted in the HTML code to make it more readable and understandable but they are ignored by the browser and are not displayed.

Page 5: Html

HTML Element

An HTML element starts with a start tag / opening tag and ends with an end tag / closing tag

The element content is everything between the start and the end tag

Some HTML elements have empty content . Eg.line break

Empty elements are closed in the start tag

Most HTML elements can have attributes

Page 6: Html

HTML Attributes

Attributes provide additional information about the element

Attributes are always specified in the start tag

Attributes come in name/value pairs like: name="value"

HTML links are defined with the <a> tag.

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

Page 7: Html

HTML Styles

Styles was introduced to style HTML elements using the style attribute, or indirectly in separate style sheets (CSS)

Style Examples:

I. Background Color

II.Font Family, Color and Size

III.Text Alignment

Page 8: Html

HTML Links

Link syntax:

<a href="url">Link text</a>

A hyperlink is an address to a resource on the web.

An anchor is a term used to define a hyperlink destination inside a document.

The HTML anchor element <a>, is used to define both hyperlinks and anchors.

Page 9: Html

HTML Images

In HTML, images are defined with the <img> tag. 

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image

The syntax of defining an image:

<img src="url" />

The browser puts the image where the image tag occurs in the document.

The alt attribute is used to define an "alternate text" for an image. The "alt" attribute gives information of what is missing on a page if the browser can't load images.

Page 10: Html

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (with <tr> tag), and each row is divided into data cells (with <td> tag) where td stands for "table data," which is the content of a data cell.

Headings in a Table

Headings in a table are defined with the <th> tag.

Page 11: Html

HTML Lists

Unordered Lists

An unordered list is a list of items marked with bullets.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul><li>Coffee</li></ul>

Coffee

Page 12: Html

Ordered Lists

An ordered list is also a list of items marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol><li>Coffee</li></ol>

1.Coffee

Page 13: Html

Definition Lists

A definition list is not a list of single items. It is a list of items with a description of each item.

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).

<dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>

Coffee

Black hot drink

Page 14: Html

HTML Forms and Input

A form is an area that can contain form elements that allow the user to enter information (like text fields, textarea fields,radio buttons, checkboxes) in a form.

A form is defined with the <form> tag.

The most used form tag is the <input> tag.

When the user clicks on the "Submit" button, the content of the form is sent to the server.

Page 15: Html

HTML Colors

HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values.

The lowest value to the light sources is 0 and highest value is 255.

Hex values are written as 3 double digit numbers, starting with a # sign.

It gives a total of more than 16 million different colors to play with (256 x 256 x 256).

Page 16: Html

HTML Frames

With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The <frameset> tag defines how to divide the window into frames

The <frame> tag defines what HTML document to put into each frame

The disadvantages of using frames are:

I. The web developer must keep track of more HTML documents

II. It is difficult to print the entire page

Page 17: Html

TAG DESCRIPTION<!--...--> Defines a comment

<!DOCTYPE>  Defines the document type

<a> Defines an anchor

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines contact information for the author/owner of a document

<applet> Deprecated. Defines an embedded applet

<area /> Defines an area inside an image-map

<b> Defines bold text

<base /> Defines a default address or a default target for all links on a page

<basefont /> Deprecated. Defines a default font, color, or size for the text in a page

<bdo> Defines the text direction

<big> Defines big text

<blockquote> Defines a long quotation

<body> Defines the document's body

<br /> Defines a single line break STF

<button> Defines a push button STF

Page 18: Html

<caption> Defines a table caption

<center> Deprecated. Defines centered text

<cite> Defines a citation

<code> Defines computer code text

<col /> Defines attribute values for one or more columns in a table 

<colgroup> Defines a group of columns in a table for formatting

<dd> Defines a description of a term in a definition list

<del> Defines deleted text

<dfn> Defines a definition term

<dir> Deprecated. Defines a directory list

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a term (an item) in a definition list

<em> Defines emphasized text 

<fieldset> Defines a border around elements in a form

<font> Deprecated. Defines font, color, and size for text

<form> Defines an HTML form for user input

<frame /> Defines a window (a frame) in a frameset

Page 19: Html

<h1> to <h6> Defines HTML headings

<head> Defines information about the document

<hr /> Defines a horizontal line

<html> Defines an HTML document

<i> Defines italic text

<iframe> Defines an inline frame

<img /> Defines an image

<input /> Defines an input control

<ins> Defines inserted text

<isindex> Deprecated. Defines a searchable index related to a document

<kbd> Defines keyboard text

<label> Defines a label for an input element

<legend> Defines a caption for a fieldset element

<li> Defines a list item

<link /> Defines the relationship between a document and an external resource

<map> Defines an image-map 

<menu> Deprecated. Defines a menu list

<meta /> Defines metadata about an HTML document

<noframes> Defines an alternate content for users that do not support frames

Page 20: Html

<noscript> Defines an alternate content for users that do not support client-side scripts

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a select list

<option> Defines an option in a select list

<p> Defines a paragraph

<param /> Defines a parameter for an object

<pre> Defines preformatted text

<q> Defines a short quotation

<s> Deprecated. Defines strikethrough text

<samp> Defines sample computer code

<script> Defines a client-side script

<select> Defines a select list (drop-down list)

<small> Defines small text

<span> Defines a section in a document

<strike> Deprecated. Defines strikethrough text

<strong> Defines strong text

<sup> Defines superscripted text

Page 21: Html

<style> Defines style information for a document

<sub> Defines subscripted text

<sup> Defines superscripted text

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<textarea> Defines a multi-line text input control

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<title> Defines the title of a document

<tr> Defines a row in a table

<tt> Defines teletype text

<u> Deprecated. Defines underlined text

<ul> Defines an unordered list

<var> Defines a variable part of a text

<xmp> Deprecated. Defines preformatted text

Page 22: Html

THANK YOU