1 HTML محمد احمدی نیا [email protected]. 2 Of 43 What is HTML? HTML stands for Hyper...

1

HTML

محمد احمدی نیا[email protected]

2 Of 43

What is HTML?

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

زبانهای برنامه سازی وب

3 Of 43

HTML - Getting Started

Editing HTML HTML can be written and edited using many different

editors like Dreamweaver and Notepad. .HTM or .HTML File Extension

First.html


4 Of 43

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 Comments

5 Of 43

HTML Elements

An HTML element is everything from the start tag to the end tag: <p> sample text </p>

Nested HTML Elements Most HTML elements can be nested (can contain

other HTML elements). <p> <i>sample text </i></p>


6 Of 43

The <html> element

The <html> element defines the whole HTML document.The element has a start tag <html> and an end tag </html>.


7 Of 43

The <head> element

The < head > element defines the head of the HTML document.The element has a start tag < head > and an end tag </ head >.

<head> tag will contain the <title> tag plus any scripts you may have.


8 Of 43

The <body> element

The <body> element defines the body of the HTML document.The element has a start tag <body> and an end tag </body>.

The contents of web page placed in this tag


9 Of 43

Basic HTML tags<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

10 Of 43

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" <font size="12" color="red" >sample text</ font >


11 Of 43

<TITLE> tag

<HEAD><TITLE>Barbaros Ozdogan Internet Business Systems </TITLE>

</HEAD>

It is as simple as it sounds-The title element names your document, like title of a book.

Every HTML document you create should include a title-and only one title-within the HEAD element.

Title

12 Of 43 12

Background color

Attribute added to the <BODY> tag There are 16 color names you can add (red, blue,

yellow, etc.) or you have to know the hexadecimal code

Examples<BODY BGCOLOR=“red”>

<BODY BGCOLOR=“#00FFFF”>

13 Of 43

HTML Colors

There are 16 color names you can add (blue, yellow, etc.) or you have to know the hexadecimal code

Colors are displayed combining RED, GREEN, and BLUE light(RGB)

HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign #FF1A00


14 Of 43

HTML Colors

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)


15 Of 43 15

Changing the text color

Same codes as for background color Attribute of the body tag, too Example would lead to a light blue page with dark

purple text

<BODY BGCOLOR=“#00FFFF” TEXT=“#800000”>

16 Of 43

Text formatting tags


17 Of 43

HTML Headings

Headings are defined with the <h1> to <h6> tags. Use HTML headings for headings only.


18 Of 43

HTML Headings


19 Of 43

HTML Paragraphs

HTML documents are divided into paragraphs. Paragraphs are defined with the <p> tag.

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


20 Of 43

HTML Text Formatting

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text


21 Of 43

HTML Text Formatting


22 Of 43

HTML Fonts

The HTML <font> Tag Should NOT be Used deprecated in HTML 4, and removed from HTML5

Determine font, size and color of text<font size="3" face="verdana" color="blue">

sample font text

</font>


23 Of 43

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph

<p>This is<br />a para<br />graph with line breaks</p>


24 Of 43

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.

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


25 Of 43

HTML Links

Links allow users to click their way from page to page

Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways:

To create a link to another document, by using the href attribute

To create a bookmark inside a document, by using the name attribute


26 Of 43

HTML Link Syntax

<a href="url" target="location " >link lable</a> href : destination web page of link target : The target attribute specifies where to open the linked

document.(_self, _blank,…) link lable : text or image

<a href="second.html" >link to second</a>

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>


27 Of 43

HTML Links - The name Attribute

A named anchor inside an HTML document: <a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips">

Visit the Useful Tips Section</a>


28 Of 43

HTML Images

images are defined with the <img> tag <img> tag is empty

<img src=“source" alt="some_text" width=" width " height=" height " /> src: the URL of the image alt: an alternate text, if the image cannot be displayed width: specify the width of an image height: specify the height of an image<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />


29 Of 43

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag) and each row is divided into data cells (with the <td> tag) A <td> tag can contain text, links, images, lists, forms,

other tables, etc.


30 Of 43

HTML Tables

<table border="1"><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>


31 Of 43

Table Attribute

Attribute Value Description

alignleftcenterright

Deprecated. Use styles instead.Specifies the alignment of a table according to surrounding text

bgcolorrgb(x,x,x)#xxxxxxcolorname

Deprecated. Use styles instead.Specifies the background color for a table

border pixels Specifies the width of the borders around a table

cellpadding pixelsSpecifies the space between the cell wall and the cell content

cellspacing pixels Specifies the space between cells

widthpixels%

Specifies the width of a table


32 Of 43

HTML Lists

The most common HTML lists are ordered and unordered lists: An ordered list:

1. The first list item

2. The second list item

3. The third list item An unordered list:

o List itemo List itemo List item


33 Of 43

HTML Unordered Lists An unordered list starts with the <ul type=“type”>.

Type: Specifies the kind of marker (disc, square, circle) Each list item starts with the <li> tag. The list items are marked with bullets

<ul type=“circle”><li>Coffee</li><li>Milk</li></ul>

• Coffee

• Milk


34 Of 43

HTML Ordered Lists An ordered list starts with the <ol type=“type” start=“symbol”> tag.

Type: Specifies the kind of marker (1,A, a, I,i) Start: Specifies the start value

Each list item starts with the <li> tag. The list items are marked with numbers.

<ol type=“1” start=“3”><li>Coffee</li><li>Milk</li>

</ol>

3. Coffee

4. Milk


35 Of 43

HTML Forms and Input

HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A form can contain input elements like:

text fields, checkboxes, radio-buttons, submit buttons, select lists, textarea and …

The <form> tag is used to create an HTML form:<form>.input elements.</form>


36 Of 43

HTML Forms - The Input Element

The most important form element is the input element.

An input element can be of type text field, checkbox, password, radio button, submit button, and more.

<input type=“value" />


37 Of 43

Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into:

<form>First name: <input type="text" name="firstname"

/><br />Last name: <input type="text" name="lastname" />

</form>


38 Of 43

Password Field

<input type="password" /> defines a password field:<form>

Password: <input type="password" name="pwd" /></form>


39 Of 43

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a

limited number of choices<form>

<input type="radio" name="sex" value="male" /> Male<br />

<input type="radio" name="sex" value="female" /> Female</form>


40 Of 43

Checkboxes

<input type="checkbox" /> defines a checkbox Checkboxes let a user select ONE or MORE options of a

limited number of choices.<form>

<input type="checkbox" name="vehicle1" value="Bike" /> I have a bike<br />

<input type="checkbox" name="vehicle2" value="Car" /> I have a car </form>


41 Of 43

Submit Button

<input type="submit" /> defines a submit button. A submit button is used to send form data to a server The data is sent to the page specified in the form's action

attribute<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user" /> <br /><input type="submit" value="Submit" />

</form>


42 Of 43

drop-down menu

create a simple drop-down list.<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>


43 Of 43

textarea element

create a multi-line text input control. In a text-area the user can write an unlimited number

of characters.<form action="">

<textarea rows="10" cols="30"> The cat was playing in the garden</textarea>

</form>


1 HTML محمد احمدی نیا [email protected]. 2 Of 43 What is HTML? HTML stands for Hyper...

Documents

Transcript of 1 HTML محمد احمدی نیا [email protected]. 2 Of 43 What is HTML? HTML stands for Hyper...