Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Html….

Содержание

What is HTML?HTML stands for Hyper Text Markup Language .It is used to design and develop Web Pages.Tim Berners-Lee invented the World Wide Web and HTML HTML isA Simple mark up language (NOT a programming language)Browser/Platform
HTML…. What is HTML?HTML stands for Hyper Text Markup Language .It is used HTML-not a programming languageMarkup Language is used for adding extra features, like HTML tags and attributesThe HTML instructions are called tags, and look like Which of the following statements are TRUE about HTMLABCDHTML is compiled by Structure of HTML Document    Title of the Web Page Main HTML Elements:-Tip: Always add the declaration to your HTML documents, so HTML Document - HeadEnclosed in  tagTags that can go in the Structure of HTML Document	Use of TITLE tag HEADINGS  Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Using Font Tag and its attributes   Using Font Tag and its attributes Using TABLE Tag and its attributes HTML Document – Body Enclosed in  tag.Some important attributes of the HTML Document – Body BACKGROUNDTEXTBGCOLOR     BODY tags Formatting the web page tag Allows you to specify the font face Formatting the web pageFACE = calibriSIZE = 5COLOR = yellow Text Formatting tagsParagraphs   -  used to create paragraphs.Line Breaks Text Formatting tagsHeader TagsHTML has six level of headings.Displayed in larger and Text Formatting tags	Tag 	 		Description….	 	-  Bold	……    	- Text Formatting tags HTML Presentation Physical tags This is bold  9:40 Which of the following statements are TRUE about HTML A B C ListsLists actually require two tags:the list tag itself andthe tag or tags Lists-UnOrdered ListsAn ordered list starts with the tag. Each list item starts Lists-Ordered ListsAn ordered list starts with the tag. Each list item starts Lists- Definition ListsA definition list is a list of items, with a Linking Pages	A link is a unidirectional pointer from a source document that Linking Pages – Contd……Com If you set the target attribute to Which of the following statements are TRUE about HTMLABCDTRUEFALSEFALSE tag used to TablesDisplays data in a tabular formatA table is divided into rows (with Table structure	 		  first header cell contents   last header Creating tables 1 Account details Creating tables 2       	MINI STATEMENT Creating tables 3Cell that spans two rows: First Name: Bill Gates Telephone: FormsUsed for creating Graphical User Interface (GUI)In a web application client interact tag is used to add elements to the formNAME = “controlname”TYPE FormsACTION indicates a program on the server that will be executed when A text field can be added to the form by typing A Radio Buttons:Radio buttons with the same NAME are grouped together Screen Printer The Input Element…..contd!!!!4.Checkboxes:- Used for multiple selection List Box ( Drop-down box)SIZE number of lines to displayVALUE indicates ButtonsThe Submit buttonSends the form contents to the server when clickedBy default Form examplesFirst name: Male File and ImageThe file controlAvailable from HTML 4.0This form control is used File and Image How to specify the path for submitting the data from a html SummaryHTML structureDifferent elements and attributesCreating tablesInteraction with the client using forms. Thank You		………….!!!!!!
Слайды презентации

Слайд 2 What is HTML?
HTML stands for Hyper Text Markup

What is HTML?HTML stands for Hyper Text Markup Language .It is

Language .
It is used to design and develop Web

Pages.
Tim Berners-Lee invented the World Wide Web and HTML
HTML is
A Simple mark up language (NOT a programming language)
Browser/Platform Independent (plain ASCII text format)
Not Case Sensitive
HTML is Interpreted by browser (NOT compiled).
A medium for User Interface (GUI)



Слайд 3 HTML-not a programming language
Markup Language is used for

HTML-not a programming languageMarkup Language is used for adding extra features,

adding extra features, like structure or presentation of the

text, objects etc. 
Programming language is used for creating programs.
HTML is interpreted by the browser, not like other programming languages..
E.g:- in a car, 
markup language would be the tools used to create the body and design
programming language - the tools used to build an engine


Слайд 4 HTML tags and attributes
The HTML instructions are called

HTML tags and attributesThe HTML instructions are called tags, and look

tags, and look like
….. Text here……..  
There

are two types of markup tags:
Container tags – Tags that have starting as well as ending part.
Title of the Web Page
Empty tags –: Tags that do not have the closing part.

,

(HTML instructions + text to which the instructions apply)= HTML elements
An attribute is an additional feature you can use to configure the element
Attributes are optional.

e.g.

This is a heading name


Element

End Tag

Attribute

Start Tag


Слайд 5 Which of the following statements are TRUE about

Which of the following statements are TRUE about HTMLABCDHTML is compiled

HTML
A
B
C
D
HTML is compiled by browser
HTML is Case Sensitive
used to

design and develop Web Pages

The HTML instructions are called Tags

FALSE

FALSE

TRUE

TRUE


Слайд 6 Structure of HTML Document


Structure of HTML Document  Title of the Web Page

Title of the Web Page


Body Section -->

Contents



An HTML file can be created by using a simple text editor viz notepad, textpad, Eclipse IDE editor
HTML file must have an extension htm or html.



Слайд 7 Main HTML Elements:-
Tip: Always add the declaration

Main HTML Elements:-Tip: Always add the declaration to your HTML documents,

to your HTML documents, so that the browser knows

what type of document to expect.

DOCTYPE:-
Document Type Declaration
The declaration must be the very first thing in your HTML document, before the tag.
The declaration is not an HTML tag.
It is an instruction to the web browser about what version of HTML the page is written in.
This tag does not have an end tag.
The declaration is NOT case sensitive.


Слайд 8 HTML Document - Head
Enclosed in tag

Tags

HTML Document - HeadEnclosed in  tagTags that can go in

that can go in the document head

a. Indicates the title of the document that is used as the window caption <br>b.<STYLE> To Include CSS (Cascading Style Sheet)<br>c.<LINK> specifies the relationship between the current document and other documents.<br><head><link rel="stylesheet" type="text/css" href="/mystyle.css"></head> <br>d.<SCRIPT> specifies the client side script name which used to perform the client side validation<br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide9"> <a href="/img/tmb/13/1292546/a7734bc604f014e049d671628f1fea71-720x.jpg" target="_blank">Слайд 9</a> Structure of HTML Document<br><br><br><br><br><br> Use of TITLE tag </h3> <div class="image"> <a href="/img/tmb/13/1292546/a7734bc604f014e049d671628f1fea71-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Structure of HTML Document Use of TITLE tag "><img src="/img/tmb/13/1292546/a7734bc604f014e049d671628f1fea71-720x.jpg" title="Html…." alt="Structure of HTML Document Use of TITLE tag"></a> </div> <div class="text"> <h4><br><br><br><br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide10"> <a href="/img/tmb/13/1292546/83d755987e1753da716612842be75043-720x.jpg" target="_blank">Слайд 10</a> <br> <br>HEADINGS<br> <br> <br>Heading 1 <br>Heading </h3> <div class="image"> <a href="/img/tmb/13/1292546/83d755987e1753da716612842be75043-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" HEADINGS Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 "><img src="/img/tmb/13/1292546/83d755987e1753da716612842be75043-720x.jpg" title="Html…." alt="HEADINGS Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6"></a> </div> <div class="text"> <h4>2<br> Heading 3<br> Heading 4<br> Heading 5<br> Heading 6<br></h4> </BODY><br> </HTML><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide11"> <a href="/img/tmb/13/1292546/3e397367454f8f708375b39c4bc10715-720x.jpg" target="_blank">Слайд 11</a> Using Font Tag and its attributes<br> </h3> <div class="image"> <a href="/img/tmb/13/1292546/3e397367454f8f708375b39c4bc10715-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Using Font Tag and its attributes"><img src="/img/tmb/13/1292546/3e397367454f8f708375b39c4bc10715-720x.jpg" title="Html…." alt="Using Font Tag and its attributes"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide12"> <a href="/img/tmb/13/1292546/c55717af9894afc64b90ab811060cc65-720x.jpg" target="_blank">Слайд 12</a>   Using Font Tag and its attributes<br> </h3> <div class="image"> <a href="/img/tmb/13/1292546/c55717af9894afc64b90ab811060cc65-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="  Using Font Tag and its attributes"><img src="/img/tmb/13/1292546/c55717af9894afc64b90ab811060cc65-720x.jpg" title="Html…." alt="  Using Font Tag and its attributes"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide13"> <a href="/img/tmb/13/1292546/1b4c4cd02c719c7a91a598e5ae24f7a7-720x.jpg" target="_blank">Слайд 13</a> </h3> <div class="image"> <a href="/img/tmb/13/1292546/1b4c4cd02c719c7a91a598e5ae24f7a7-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/13/1292546/1b4c4cd02c719c7a91a598e5ae24f7a7-720x.jpg" title="Html…." alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide14"> <a href="/img/tmb/13/1292546/7af41336f1f266385e36a594deac97ce-720x.jpg" target="_blank">Слайд 14</a> Using TABLE Tag and its attributes<br> </h3> <div class="image"> <a href="/img/tmb/13/1292546/7af41336f1f266385e36a594deac97ce-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Using TABLE Tag and its attributes"><img src="/img/tmb/13/1292546/7af41336f1f266385e36a594deac97ce-720x.jpg" title="Html…." alt="Using TABLE Tag and its attributes"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide15"> <a href="/img/tmb/13/1292546/45f762a9d5aacf77015c71684d8659ad-720x.jpg" target="_blank">Слайд 15</a> HTML Document – Body <br>Enclosed in </h3> <div class="image"> <a href="/img/tmb/13/1292546/45f762a9d5aacf77015c71684d8659ad-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="HTML Document – Body Enclosed in tag.Some important attributes of the BODY tag:BACKGROUND :- Specifies an image to be tiled as background. BACKGROUND = “url of the image” BGCOLOR :-Specifies the background colorBGCOLOR = “color” / “#rrggbbTEXT :- Specifies the color of text in the page TEXT = “color” / “#rrggbb”LINK :-Specifies the link color.LINK = “color” / “#rrggbb”ALINK =Specifies the active link colorALINK = “color” / “#rrggbb”VLINK:-Specifies the visited link color.VLINK = “color” / “#rrggbb”Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB)."><img src="/img/tmb/13/1292546/45f762a9d5aacf77015c71684d8659ad-720x.jpg" title="Html…." alt="HTML Document – Body Enclosed in tag.Some important attributes of"></a> </div> <div class="text"> <h4>tag.<br>Some important attributes of the BODY tag:<br>BACKGROUND :- Specifies</h4> an image to be tiled as background.<br> BACKGROUND = “url of the image”<br> <body background=“x.jpg”> <br>BGCOLOR :-Specifies the background color<br>BGCOLOR = “color” / “#rrggbb<br><body bgcolor=“yellow”><br>TEXT :- Specifies the color of text in the page<br> TEXT = “color” / “#rrggbb”<br><body text=“#FF0000”><br>LINK :-Specifies the link color.<br>LINK = “color” / “#rrggbb”<br>ALINK =Specifies the active link color<br>ALINK = “color” / “#rrggbb”<br>VLINK:-Specifies the visited link color.<br>VLINK = “color” / “#rrggbb”<br>Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).<br><br><br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide16"> <a href="/img/tmb/13/1292546/e8b468587afb00c42a8382559dee93a0-720x.jpg" target="_blank">Слайд 16</a> HTML Document – Body <br>BACKGROUND<br>TEXT<br>BGCOLOR<br><br><br><br> </h3> <div class="image"> <a href="/img/tmb/13/1292546/e8b468587afb00c42a8382559dee93a0-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="HTML Document – Body BACKGROUNDTEXTBGCOLOR BODY tags Welcome to UBS BODY tags Welcome to UBS BODY tags Welcome to UBS"><img src="/img/tmb/13/1292546/e8b468587afb00c42a8382559dee93a0-720x.jpg" title="Html…." alt="HTML Document – Body BACKGROUNDTEXTBGCOLOR BODY tags"></a> </div> <div class="text"> <h4> BODY tags <br><br><br> </h4> <h1>Welcome to UBS</h1><br><body><br></html><br><p><!DOCTYPE html><br><html><br><head><br> <title>BODY tags


Welcome to UBS







BODY tags


Welcome to UBS





Слайд 17 Formatting the web page
tag Allows you to

Formatting the web page tag Allows you to specify the font

specify the font face and font size.
Some common attributes

are
FACE specifies the font type.
Defaults fonts like “Arial”, “Times New Roman”, and “Courier” are available in all Systems.
SIZE specifies the font size. Value can range from 1 to 7. The default is 3.
SIZE can be set as a relative value using + or – .
COLOR- The color of a font can be specified using a hexadecimal number value six characters long.

The Written Word

The Written Word


Слайд 18 Formatting the web page
FACE = calibri
SIZE = 5
COLOR

Formatting the web pageFACE = calibriSIZE = 5COLOR = yellow

= yellow



BODY

tags


Welcome to UBS



This is a lecture of Business Computing

HTML Presentation



Слайд 19 Text Formatting tags
Paragraphs
- used

Text Formatting tagsParagraphs  - used to create paragraphs.Line Breaks

to create paragraphs.

Line Breaks

-

to insert blank lines in the document.
e.g. :

This
is a para
graph with line breaks



Horizontal Lines

- used to draw a horizontal line across the web page.
It is useful to separate different sections of a single page.
Attributes:- Size,Width,Align
e.g:


Слайд 20 Text Formatting tags

Header Tags
HTML has six level of

Text Formatting tagsHeader TagsHTML has six level of headings.Displayed in larger

headings.
Displayed in larger and bolder fonts.
Different level heading tags

Heading 1 (This being the largest)

Heading 2


Heading 3


Heading 4


Heading 5

Heading 6


The font size of the heading will go on decreasing from H1 to H6.

Слайд 21 Text Formatting tags

Tag Description
…. - Bold
……

Text Formatting tags	Tag 	 		Description….	 	- Bold	……  	- Italic….

- Italic
….

- Underline
- Strikethrough
…. - Typewriter (monospaced)
- Centers the text on the screen.
…. - Subscript
…. - Superscript
…. - Bigger font (one font size bigger)
…. - Small font (one font size smaller)

Слайд 22 Text Formatting tags


HTML Presentation

Text Formatting tags HTML Presentation Physical tags This is bold

=“FF00FF”>
Physical tags

This is bold



9:40 PM 10/7/2012This is Italic

This is underline

This is Monospaced

This is Strike-through

This is Strike-through



Some more physical tags


This is Big

This is even Bigger

This is small

This is even smaller

This is superscript

This is subscript




Слайд 23 Which of the following statements are TRUE about

Which of the following statements are TRUE about HTML A B

HTML
A
B
C
D
In tag FACE attribute

specifies the font type


tag is used to specify line breaks

tag is used to create paragraphs

is the biggest heading element

TRUE

FALSE

TRUE

TRUE


Слайд 24 Lists
Lists actually require two tags:
the list tag itself

ListsLists actually require two tags:the list tag itself andthe tag or

and
the tag or tags used to define individual list

items


Слайд 25 Lists-UnOrdered Lists
An ordered list starts with the

Lists-UnOrdered ListsAn ordered list starts with the tag. Each list item

tag.
Each list item starts with the tag.
TYPE

attributes specifies the type of bullet
TYPE = “disc” | “circle” | ”square”



  • Savings
  • Current
  • Transactional



Слайд 26 Lists-Ordered Lists
An ordered list starts with the

Lists-Ordered ListsAn ordered list starts with the tag. Each list item

tag.
Each list item starts with the tag.
TYPE

attribute controls the numbering scheme
TYPE = 1 | A | a | I | i



  1. Savings
  2. Current
  3. Transactional



Слайд 27 Lists- Definition Lists
A definition list is a list

Lists- Definition ListsA definition list is a list of items, with

of items, with a description of each item.
Definition list

are enclosed with in
and

- Definition term.
- Data definition.



Savings
Only limited number of transactions per day
$20 minimum balance
Current
Overdraft facility
0 minimum balance



Слайд 28 Linking Pages
A link is a unidirectional pointer from

Linking Pages	A link is a unidirectional pointer from a source document

a source document that contains the link to some

destination
Anchor tag
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
Link text with other documents by using the href attribute:-
HREF (Hypertext Reference)
NAME (bookmarks inside the page)
TITLE
TARGET (Define where the linked document will be opened)

e.g.: Click here

Link text with same documents, by using the name attribute







Useful Tips Section
……………………………………………………
Useful Tips Section

Create a link to the "Useful Tips Section" inside the same document:

create a link to the "Useful Tips Section" from another page:


Слайд 29 Linking Pages – Contd……




Com

If

Linking Pages – Contd……Com If you set the target attribute to

you set the target attribute to "_blank", the link

will open in a new browser window/tab.






Слайд 30 Which of the following statements are TRUE about

Which of the following statements are TRUE about HTMLABCDTRUEFALSEFALSE tag used

HTML
A
B
C
D
TRUE
FALSE
FALSE
tag used to create hyperlinks
tag used to

create hyperlinks

    tag used to create bulleted list

      tag used to create numbered list

      FALSE


Слайд 31 Tables
Displays data in a tabular format
A table is

TablesDisplays data in a tabular formatA table is divided into rows

divided into rows (with the tag), and each

row is divided into data cells (with the tag).
…..
: define a table
Some attributes
ALIGN = LEFT | RIGHT | CENTER
BORDER = n (Number of Pixels )
BGCOLOR = “color” | “#rrggbb”
CELLSPACING = n (Number of Pixels )
CELLPADDING = n (Number of Pixels )
WIDTH= % Of Parent | n (pixels)

Слайд 32 Table structure

Table structure	 		 first header cell contents  last header cell

first header

cell contents last header cell contents

first row, first cell contents first row, last cell contents

last row, first cell contents last row, last cell contents


Слайд 33 Creating tables 1
Account details

Creating tables 1 Account details

WIDTH=“100%">

AccountNoCustomer Name


1001Jack


1002Tom



Слайд 34 Creating tables 2

Creating tables 2    	MINI STATEMENT  			Account ID

ALIGN="CENTER">
MINI STATEMENT


Account ID
Date
Amount
54576989
12-Jan-2009
3000.00
56783297
27-Feb-2009
500.00


Слайд 35 Creating tables 3



Cell that spans two rows:

Creating tables 3Cell that spans two rows: First Name: Bill Gates

border="1">

First Name:
Bill Gates


Telephone:
555 77

854


555 77 855








Слайд 36 Forms
Used for creating Graphical User Interface (GUI)

In a

FormsUsed for creating Graphical User Interface (GUI)In a web application client

web application client interact through GUI.

It is enclosed between

the
and
tags.
. input elements .

Forms become powerful when connected to a server application

A single HTML page can have multiple forms.



Слайд 37 tag is used to add elements to

tag is used to add elements to the formNAME =

the form
NAME = “controlname”
TYPE = text / password /

checkbox / radio/ submit / reset / button / hidden / file
VALUE
MAXLENGTH
SIZE

All elements should be named by setting a unique value to the name attribute.
The value attribute is used to set a default value for the control.



Form elements


Слайд 38 Forms

FormsACTION indicates a program on the server that will be executed

future manipulation of data by scripting language
ACTION indicates a

program on the server that will be executed when this form is submitted. Mostly it will be an ASP or a JSP script.
METHOD indicates the way the form is submitted to the server - popular options are GET/POST -->

(form elements go here)



Слайд 39 A text field can be added to the

A text field can be added to the form by typing

form by typing

A

password field can be added to the form by typing

when the text is entered, stars appear instead of the typed letters
Attributes are
VALUE is the default value loaded
SIZE sets the size of the field in no. of characters
MAXLENGTH specifies max number of characters that can be entered to the control

Text Box/Password


Слайд 40 Radio Buttons:
Radio buttons with the same NAME are

Radio Buttons:Radio buttons with the same NAME are grouped together Screen Printer

grouped together

one button can be selected in a group
VALUE data to be sent to the server
CHECKED will preselect the button

Printer


Слайд 41 The Input Element…..contd!!!!
4.Checkboxes:-

Used for multiple

The Input Element…..contd!!!!4.Checkboxes:- Used for multiple selection

selection

value to be transmitted to the server
e.g: contact=email will be sent to the server

CHECKED sets the checkbox to be selected by default
Here “Notify by email” is visible to the user and the value “email” is not visible to the user





Слайд 42 List Box ( Drop-down box)
SIZE number of

List Box ( Drop-down box)SIZE number of lines to displayVALUE

lines to display
VALUE indicates what will be sent to

the server
SELECTED sets the default selected item
MULTIPLE will allow multiple selection of items
Eg:

Слайд 43 Buttons
The Submit button
Sends the form contents to the

ButtonsThe Submit buttonSends the form contents to the server when clickedBy

server when clicked
By default only submit button can invoke

the action page and send data to server.

The Reset button
Resets all the form controls to the default state.
.
A button
No predetermined action like submit or reset.
Script should be written to make it work. (this will be covered in later chapters)
.

Слайд 44 Form examples




First name:

Form examplesFirst name: Male

type="text" name="FirstName" value=“Ruby">

Last name:

name="sex" value="male">Male

I have a bike

I have a car







If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".







Слайд 45 File and Image
The file control
Available from HTML 4.0
This

File and ImageThe file controlAvailable from HTML 4.0This form control is

form control is used to upload a file to

the server

It is possible to set maxlength and size values to file control
It’s Not suggested because the path name might be larger than the size specified
The file form control is not supported by all browsers
The image control
The image control creates a graphical version of submit button
NAME=“flname”>

Слайд 46 File and Image

File and Image

Слайд 47 How to specify the path for submitting the

How to specify the path for submitting the data from a

data from a html FORM to server side program


A

B

C

D

Using GET method

Using action attribute of


Using POST method

External CSS is reusable

TRUE

FALSE

FALSE

TRUE


Слайд 48 Summary
HTML structure
Different elements and attributes
Creating tables
Interaction with the

SummaryHTML structureDifferent elements and attributesCreating tablesInteraction with the client using forms.

client using forms.


  • Имя файла: html….pptx
  • Количество просмотров: 129
  • Количество скачиваний: 0