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

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


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

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

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

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

Презентация на тему Introducing the World Wide Web

Содержание

In 1969, the first transmission over the Internet took placeWeb pages are the basic unit of a website, and every website is a collection of one or more pagesIntroducing the World Wide Web
Lecture 1-2Senior-Lecturer: Sarsenova Zh.N. In 1969, the first transmission over the Internet took placeWeb pages are Web pages are written in HTML (HyperText Markup Language)A markup language is Fire up your favorite text editorStart writing HTML content.When you finish your HTML tags are formatting instructions that tell a browser how to transform To create a tag, you type HTML code between the brackets. (look Example 1 Container elements are, by far, the most common type. They apply formatting Nesting elements is one of the basic building block techniques of web This word has italic and bold formatting.This word has italic and bold formattingExample 3 DOCTYPE – tells process Web files - such as validators, Web browsers, Any HTML document begins with the following tag pair - This element HTML Page Structure Certain styles can be enforced to the browser by using following tags. Logical Style Size and Color Other elements Other elements Horizontal Lines Preformatted Text Lists Linking other pages Creating Links to Other Files Creating Internal Links Embedding image in Web Page HTML Table HTML Table Syntax Images and Multimedia - I Images and Multimedia - I Home workRead from book 19-35 pagesBook: Creating a Web Site: Missing Manual QuestionGive examples of container elementGive examples of standalone element Understanding ImagesTo display pictures on a page, you use the element in Alternate textAttributes: src and altsrc – location of the imagealt- if the Examples of with attributes Picture SizeWeb weavers measure graphics in units called pixels. A pixel represents HTML Elements for Tables wraps the whole shebang. It’s the starting point Example HTML Forms The ElementThe HTML  element defines a form that is used to collect user The ElementThe  element is the most important form element.The element can be displayed Text Input defines a one-line input field for text input: Radio Button Input defines a radio button.Radio buttons let a user select ONE of The Submit Button defines a button for submitting the form data to a form-handler.The form-handler is Grouping Form Data with The  element is used to group related data in Example Label ElementThe tag defines a label for an element.The element does not HTML FormsThree radio buttons with labels: HTML  TagAn HTML text area: The tag defines a multi-line text input control.A Attributes HTML  TagCreate a drop-down list with four options: HTML  TagThe is used to group related options in a drop-down list. HTML  TagThe tag defines an option in a select list. HTML  TagThe tag defines a division or a section in an HTML document. HTML class AttributeThe class attribute specifies one or more classnames for an element. HTML id Attribute HTML5 Semantic ElementsA semantic element clearly describes its meaning to both the browser HTML  TagThe tag defines a division or a section in an HTML document. Semantic ElementsThe element defines a set of navigation links.The Specifies a header Home WorkRead CHAPTER 5
Слайды презентации

Слайд 2 In 1969, the first transmission over the Internet

In 1969, the first transmission over the Internet took placeWeb pages

took place
Web pages are the basic unit of a

website, and every website is a collection of one or more pages

Introducing the World Wide Web


Слайд 3 Web pages are written in HTML (HyperText Markup

Web pages are written in HTML (HyperText Markup Language)A markup language

Language)
A markup language is a set of markup tags
It tells

browsers how to display the contents of a web page, using special instructions (called tags) that instruct the browser when to start a paragraph, italicize a word, or display a picture

Introducing HTML: The Language of the Web


Слайд 4 Fire up your favorite text editor
Start writing HTML

Fire up your favorite text editorStart writing HTML content.When you finish

content.
When you finish your web page, save the document.

In the Encoding list, choose UTF-8.
When you name your file, use the extension .htm or .html


Creating an HTML File


Слайд 5 HTML tags are formatting instructions that tell a

HTML tags are formatting instructions that tell a browser how to

browser how to transform ordinary text into something visually

appealing. If you were to take all the tags out of an HTML document, the resulting page would consist of nothing more than plain, unformatted text.

HTML Tags


Слайд 6 To create a tag, you type HTML code

To create a tag, you type HTML code between the brackets.

between the brackets. (look like this: < >)
For example,

one simple tag is the tag, which stands for “bold” (tag names are always lowercase).
As you’ve seen, tags come in pairs. When you use a start tag (like for bold), you have to include an end tag (like ). This combination of start and end tags and the text in between them makes up an HTML element.

What’s in a Tag


Слайд 7 Example 1

Example 1

Слайд 8 Container elements are, by far, the most common

Container elements are, by far, the most common type. They apply

type. They apply formatting to the content nestled between

the start and end tags.
Standalone elements don’t turn formatting on or off. Instead, they insert something, like an image, into a page. One example is the
element, which inserts a line break in a page. Standalone elements don’t come in pairs, as container elements do, and you may hear them referred to as empty elements because you can’t put any text inside them.

Types of elements:


Слайд 9 Nesting elements is one of the basic building

Nesting elements is one of the basic building block techniques of

block techniques of web pages.
You can also nest

elements to create more complicated page components, like bulleted lists.

Nesting Elements


Слайд 10 This word has italic and bold formatting.

This

This word has italic and bold formatting.This word has italic and bold formattingExample 3

word has italic and bold formatting
Example 3


Слайд 11 DOCTYPE – tells process Web files - such

DOCTYPE – tells process Web files - such as validators, Web

as validators, Web browsers, etc. about the HTML specification

used in the file’s source.
The document type definition (DTD) is the first piece of information in an HTML file. Always on the first line of a file, before beginning tag.
It tells the browser what markup standard you used to write the page.

DOCTYPE element


Слайд 12 Any HTML document begins with the following tag

Any HTML document begins with the following tag pair - This

pair
- This element wraps everything (other than the

doctype) in your web page.
- This element designates the header portion of your document. The header can include some optional information about your web page, including the required title, optional search keywords, and an optional style sheet
- This element holds the meat of your web page, including the actual content you want to display to the world.
-element of the title

- paragraph tag
- comments tag

Main HTML Components


Слайд 13 HTML Page Structure

HTML Page Structure

Слайд 14 Certain styles can be enforced to the browser

Certain styles can be enforced to the browser by using following

by using following tags.
Bold
Italics
Monospace (fixed width)
Underline
Subscript
Superscript

Physical Styles


Слайд 15
Logical Style

Logical Style

Слайд 16 Size and Color

Size and Color

Слайд 17 Other elements

Other elements

Слайд 18 Other elements

Other elements

Слайд 19
Horizontal Lines

Horizontal Lines

Слайд 20 Preformatted Text

Preformatted Text

Слайд 22 Linking other pages

Linking other pages

Слайд 23 Creating Links to Other Files

Creating Links to Other Files

Слайд 24 Creating Internal Links

Creating Internal Links

Слайд 25 Embedding image in Web Page

Embedding image in Web Page

Слайд 26 HTML Table

HTML Table

Слайд 27 HTML Table Syntax

HTML Table Syntax

Слайд 28 Images and Multimedia - I

Images and Multimedia - I

Слайд 29 Images and Multimedia - I

Images and Multimedia - I

Слайд 30 Home work
Read from book 19-35 pages
Book: Creating a

Home workRead from book 19-35 pagesBook: Creating a Web Site: Missing Manual

Web Site: Missing Manual


Слайд 31 Question
Give examples of container element
Give examples of standalone

QuestionGive examples of container elementGive examples of standalone element

element


Слайд 32 Understanding Images
To display pictures on a page, you

Understanding ImagesTo display pictures on a page, you use the element

use the element in your HTML document
Example

/>
Standalone
Inline element (you can put them inside inside other block element, like paragraph)




Слайд 33 Alternate text
Attributes: src and alt
src – location of

Alternate textAttributes: src and altsrc – location of the imagealt- if

the image
alt- if the user for some reason cannot

view it (slow connection)

Слайд 34 Examples of with attributes

Examples of with attributes

text, use title attribute:

in welcome."
title="Welcome to the ring." />

Слайд 35 Picture Size
Web weavers measure graphics in units called

Picture SizeWeb weavers measure graphics in units called pixels. A pixel

pixels.
A pixel represents one tiny dot on a

computer screen.
An explicitly sized picture

Слайд 36 HTML Elements for Tables
wraps the whole shebang.

HTML Elements for Tables wraps the whole shebang. It’s the starting

It’s the starting point for every table.
represents a

single table row. Every table element () contains a series of one or more elements.
represents a table cell (“td” stands for “table data”). For each cell you want in a row, you add one element. You put the text that you want to appear in that cell inside the element.
is an optional table element; you use it when you want to define a column heading. You can use a element instead of a element any time, although it usually makes the most sense in the first row of a table.

Слайд 37 Example

Example

Слайд 38 HTML Forms

HTML Forms

Слайд 39 The Element
The HTML  element defines a form that

The ElementThe HTML  element defines a form that is used to collect

is used to collect user input:
An HTML form contains form

elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Слайд 40 The Element

The  element is the most important form

The ElementThe  element is the most important form element.The element can be

element.
The element can be displayed in several ways,

depending on the type attribute.

Слайд 41 Text Input
 defines a one-line input field for text

Text Input defines a one-line input field for text input:

input:


Слайд 42 Radio Button Input
 defines a radio button.
Radio buttons let

Radio Button Input defines a radio button.Radio buttons let a user select ONE

a user select ONE of a limited number of

choices:


Слайд 43 The Submit Button
 defines a button for submitting the form

The Submit Button defines a button for submitting the form data to a form-handler.The form-handler

data to a form-handler.
The form-handler is typically a server page

with a script for processing input data.
The form-handler is specified in the form's action attribute:

Слайд 44 Grouping Form Data with
The  element is used to

Grouping Form Data with The  element is used to group related data

group related data in a form.
The  element defines a caption

for the
element.


Слайд 45 Example

Example

Слайд 46 Label Element
The tag defines a label for

Label ElementThe tag defines a label for an element.The element does

an element.
The element does not render as

anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the

Слайд 47 HTML Forms
Three radio buttons with labels:

HTML FormsThree radio buttons with labels:

Слайд 48 HTML  Tag
An HTML text area: The tag defines

HTML  TagAn HTML text area: The tag defines a multi-line text input

a multi-line text input control.
A text area can hold

an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).


Слайд 49 Attributes

Attributes

Слайд 50 HTML  Tag
Create a drop-down list with four options:

HTML  TagCreate a drop-down list with four options:

Слайд 51 HTML  Tag
The is used to group related options

HTML  TagThe is used to group related options in a drop-down list.

in a drop-down list.


Слайд 52 HTML  Tag
The tag defines an option in a

HTML  TagThe tag defines an option in a select list.

select list.


Слайд 53 HTML  Tag
The tag defines a division or a

HTML  TagThe tag defines a division or a section in an HTML document.

section in an HTML document.


Слайд 54 HTML class Attribute
The class attribute specifies one or more classnames

HTML class AttributeThe class attribute specifies one or more classnames for an element.

for an element.


Слайд 55 HTML id Attribute

HTML id Attribute

Слайд 56 HTML5 Semantic Elements
A semantic element clearly describes its meaning

HTML5 Semantic ElementsA semantic element clearly describes its meaning to both the

to both the browser and the developer.
Examples of non-semantic elements:

and - Tells nothing about its content.
Examples of semantic elements:
, , and
- Clearly defines its content.

Слайд 57 HTML  Tag
The tag defines a division or a

HTML  TagThe tag defines a division or a section in an HTML document.

section in an HTML document.


Слайд 58 Semantic Elements
The element defines a set of

Semantic ElementsThe element defines a set of navigation links.The Specifies a

navigation links.
The Specifies a header for a document

or section

The

Specifies the main content of a document

The

Defines a footer for a document or section

  • Имя файла: introducing-the-world-wide-web.pptx
  • Количество просмотров: 144
  • Количество скачиваний: 0