HTML Notes pdf

7/27/2019 HTML Notes pdf

1/55


2/55

22

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 isa markup language

A markup language is a set ofmarkuptags

HTML uses markup tags to describe webpages


3/55

33

HTML Tags

HTML tags are keywords surroundedby angle brackets like

HTML tags normally come in pairs

like and The first tag in a pair is the start tag,

the second tag is the end tag

Start and end tags are also calledopening tags and closing tags.


4/55

44

HTML Documents = Web Pages

HTML documents describe webpages

HTML documents contain HTML

tags and plain text HTML documents are also called web

pages

The purpose of a web browser (like Internet Explorer orFirefox) is to read HTML documents and display them asweb pages. The browser does not display the HTML tags,but uses the tags to interpret the content of the page:


5/55

55

Example

First Heading

first paragraph


6/55

66

Example Explained

The text between and describes the web page

The text between and

is the visible page content The text between and is

displayed as a heading

The text between

and
isdisplayed as a paragraph


7/55

77

Editing HTML

We may use plain text editor (likeNotepad) to edit HTML. This is thebest way to learn HTML.

However, professional webdevelopers often prefer HTML editorslike FrontPage or Dreamweaver,

instead of writing plain text.


8/55

88

HTM or HTML Extension?

When you save an HTML file, youcan use either the .htm or the.html extension. We use .htm inour examples. It is a habit from

the past, when the software onlyallowed three letters in fileextensions.

With new software it is perfectlysafe to use .html.


9/55

99

HTML Headings

HTML headings are defined with the to tags.

This is a headingThis is a headingThis is a heading


10/55

1010

HTML Paragraphs

HTML paragraphs are defined with the

tag.

This is a paragraph

This is another paragraph


11/55

1111

HTML Links

HTML links are defined with the

tag.

Delhi University


12/55

1212

HTML Images

HTML images are defined with the tag.


13/55

1313

HTML Elements

An HTML element is everything fromthe start tag to the end tag:

Start tag Element content End tag

This is a paragraph

This is a link

*The start tag is often called the opening tag. The end tag is

often called the closing tag.


14/55

1414

HTML Element Syntax

An HTML element starts with a start tag / opening tag

An HTML element 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

Empty elements are closed in the start tag

Most HTML elements can have attributes


15/55

1515

Nested HTML Elements

Most HTML elements can benested (can contain other HTMLelements).

HTML documents consist ofnested HTML elements.


16/55

1616

HTML Document Example

This is my first paragraph


17/55

1717

Example Explained

The

element:


The

element defines a paragraph in the HTML

document

The element has a start tag

and an end tag


18/55

1818

The element:


The element defines the body of theHTML document

The element has a start tag and anend tag

The element content is another HTML element(a paragraph)


19/55

19

The element:


The element defines the whole HTML document

The element has a start tag and an end tag


20/55

2020

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget

the end tag:

This is a paragraph

This is a paragraph

The example above will work in most browsers, but don't

rely on it. Forgetting the end tag can produce unexpected

results or errors.


21/55

2121

Empty HTML Elements

HTML elements without content are called empty elements.

Empty elements can be closed in the start tag.
is an empty element without a closing tag (it defines a

line break).

Adding a slash to the start tag, like
, is the proper wayof closing empty elements, accepted by HTML

Even if
works in all browsers, writing
instead ismore future proof.


22/55

22

HTML Attributes

HTML elements can have attributes

Attributes provide additionalinformation about the element

Attributes are always specified in thestart tag

Attributes come in name/value pairs

like: name="value"


23/55

2323

Attribute Example

HTML links are defined with the tag. The link

address is provided as an attribute:

Delhi University


24/55

24

Always Quote Attribute Values

Attribute values should always be

enclosed in quotes.

Double style quotes are the most

common, but single style quotes arealso allowed.


25/55

2525

HTML Rules (Lines)

The tag is used to create an

horizontal rule (line).

Example

This is a paragraph

This is a paragraph

This is a paragraph


26/55

2626

HTML Comments

Comments can be inserted in the HTML code to

make it more readable and understandable.Comments are ignored by the browser and are notdisplayed.

Comments are written like this:

Note: There is an exclamation point after the opening

bracket, but not before the closing bracket.


27/55

2727

How to View HTML Source

To find out, click the VIEW option inyour browser's menu bar and selectSOURCE or PAGE SOURCE. This willopen a window that shows you theHTML code of the page.


28/55

2828

HTML Formatting Tags

HTML uses tags like and for

formatting output, like bold or italictext.

These HTML tags are calledformatting tags.


29/55

2929

Formatting Text

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is subscript and

superscript


30/55

30

Address Formatting

Donald Duck

BOX 555
Disneyland

USA


31/55

3131

Deleted and Inserted Text

a dozen istwentytwelvepieces

Most browsers will overstrike deleted text and underline inserted text.

Some older browsers will display deleted or inserted text as plain text.


32/55

3232

Text Formatting Tags

Deprecated. Use styles instead

Deprecated. Use insteadDeprecated. Use instead

Defines deleted text

Defines inserted text

Defines superscripted text

Defines subscripted textDefines strong text

Defines small text

Defines italic text

Defines emphasized text

Defines big textDefines bold text

DescriptionTag


33/55

33

Hyperlinks, Anchors, and Links

In web terms, a hyperlink is a reference (an address)

to a resource on the web. Hyperlinks can point to any resource on the web: anHTML page, an image, a sound file, a movie, etc.

An anchor is a term used to define a hyperlinkdestination inside a document.

The HTML anchor element , is used to defineboth hyperlinks and anchors.

We will use the term HTML link when the element points to a resource, and the term HTML

anchor when the elements defines an addressinside a document..


34/55

3434

An HTML Link

Link syntax:

Link text The start tag contains attributes about the link.

The element content (Link text) defines the part to bedisplayed.

Note: The element content doesn't have to be text. You can

link from an image or any other HTML element.


35/55

3535

The href Attribute

The href attribute defines the link "address".

This element defines a link to DelhiUniversity Website:

Visit Delhi

University The code above will display like this

in a browser:

Visit Delhi University


36/55

3636

The target Attribute

The target attribute defines where

the linked document will be opened.

The code below will open thedocument in a new browser window:

Visit DelhiUniversity


37/55

37

The Alt Attribute

The alt attribute is used to define an "alternate text"for an image. The value of the alt attribute is anauthor-defined text:

The "alt" attribute tells the reader what he or she ismissing on a page if the browser can't load images.The browser will then display the alternate textinstead of the image. It is a good practice to include

the "alt" attribute for each image on a page, toimprove the display and usefulness of your documentfor people who have text-only browsers.


38/55

38

Basic Notes - Useful Tips

If an HTML file contains ten images -

eleven files are required to displaythe page right. Loading images taketime, so my best advice is: Use

images carefully.


39/55

39

Tables

Tables are defined with the

tag. A table is divided into rows (withthe tag), and each row isdivided into data cells (with the

tag). The letters td stands for "tabledata," which is the content of a datacell. A data cell can contain text,

images, lists, paragraphs, forms,horizontal rules, tables, etc.


40/55

40

Example

row 1, cell 1row 1, cell 2



41/55

41

Tables and the Border Attribute

If you do not specify a border attribute the table will bedisplayed without any borders. Sometimes this can beuseful, but most of the time, you want the borders toshow.

To display a table with borders, you will have to use theborder attribute:

Row 1, cell 1Row 1, cell 2


42/55

42

Headings in a Table

Headings in a table are defined with the tag.

HeadingAnother Heading

row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2


43/55

43

Empty Cells in a Table

Table cells with no content are not displayed very well in mostbrowsers.


row 2, cell 1

Note that the borders around the empty tablecell are missing (NB! Mozilla Firefox displays theborder).


44/55

44

Empty Cells in a Table

To enforce border display by the browser thefollowing code should be used.

row 1, cell 1row 1, cell 2row 2, cell 1


45/55

45

Unordered Lists

An unordered list is a list of items. The list

items are marked with bullets (typicallysmall black circles). An unordered list starts with the tag.

Each list item starts with the tag.

Coffee

Milk


46/55

46

Ordered Lists

An ordered list is also a list of items. The

list items are marked with numbers. An ordered list starts with the tag.

Each list item starts with the tag.

Coffee

Milk


47/55

47

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user toenter information (like text fields, textarea fields,drop-down menus, radio buttons, checkboxes, etc.) ina form.

A form is defined with the tag.

.input elements

.


48/55

48

Input

The most used form tag is the

tag. The type of input isspecified with the type attribute. Themost commonly used input types are

being explained one by one.


49/55

49

Text Fields

Text fields are used when you want the user to type letters,numbers, etc. in a form.

First name:
Last name:

Note that the form itself is not visible. Also note that in mostbrowsers, the width of the text field is 20 characters bydefault.


50/55

50

Radio Buttons

Radio Buttons are used when you want the user to selectone of a limited number of choices.

Male
Female

Note that only one option can be chosen.


51/55

51

Checkboxes

Checkboxes are used when you want the user to select one ormore options of a limited number of choices.

I have a bike:

I have a car:
I have an airplane:

The Form's Action Attribute and the


52/55

52

The Form s Action Attribute and theSubmit Button

When the user clicks on the "Submit" button, the contentof the form is sent to the server. The form's actionattribute defines the name of the file to send the contentto. The file defined in the action attribute usually doessomething with the received input.

Username:


53/55

53

If you type some characters in the

text field above, and click the"Submit" button, the browser willsend your input to a page called

"html_form_submit.asp". The pagewill show you the received input.


54/55

54

Complete Form Code

ApplesBananasCherries


55/55

5555

Thank You