slide1
Download
Skip this Video
Download Presentation
Today

Loading in 2 Seconds...

play fullscreen
1 / 28

Today - PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on

Today. File Paths and File Extensions Files and Folders Defining Absolute and Relative Addresses Most Known File Extensions Your First Web Page

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Today' - bert


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Today

File Paths and File Extensions

Files and Folders Defining Absolute and Relative Addresses Most Known File Extensions

Your First Web Page

Elements of a Web Page Creating an HTML TemplateCommon Coding Errors Editing an HTML document Empty Tags Body Tag Attributes A Few ConsiderationsReview QuestionsExercise

slide2

Objectives

  • Understand an “absolute path” and it’s usage
  • Use an HTML template to create a new web page
  • Integrate into HTML documents meaningful titles and comments
  • Use a browser to view Web pages saved on a local drive
  • Employ heading and paragraph elements within a well-written HTML document
  • Appropriately use line and paragraph breaks within a Web Page
  • Use colors in a Web page
slide3

File Paths and File Extensions

... The crucial term is : CLASSSIFICATION ...

Think about your File Organization by Windows Explorer

My Computer

c:/ HDD_1

...... Level 1

...... ...... Level 2

...... Level 1

d:/ HDD_2

...... Level 1

...... ...... Level 2

...... ...... ...... Level 3

...... Level 1

e:/ CdRom

slide4

File Paths and File Extensions

Tree View Path

c:/ HDD_1 c:/

...... Level 1

...... Level 2 c:/Level1/Level2

...... Level 1

d:/ HDD_2

...... Level 1 d:/Level1

...... Level 2

...... Level 3 d:/Level1/Level2/Level3

...... Level 1

e:/ CdRom

FILE is be a related description, so IT MUST HAVE AN EXTENSION

means name.ext

FOLDER is a containing description, so IT CONTAINS something else

slide5

File Paths and File Extensions

http://www.bilkent.edu.tr/bim/staff/arzuikinci/index.htm

bim

...... staff

...... arzuikinci

... index.htm

Terms we generally use;

. Root Folder : top level folder, use “/” (forward slash)

. Current Folder : folder you are working in

. Pathname : from top level through lower level folder names,

Don’t USE above for Folder and File names;

. space (blank character)

. \ / : * ? “ < > |

. turkish characters

. capital letters

slide6

File Paths and File Extensions

ADDRESSING STRUCTURE is same as DIRECTORY LISTING you use in Dos.

Our aim : TO REACH a definite FILE

Our method : 1. find the FILE’s destination

2. define your addressing method (absolute/relative)3.set the pathname

... ABSOLUTE ADDRESS ...

is the full pathname of your file.begins with the top level directory listing through the lowest level.

. find the File’s destination

. and then, type this destination from the highest level.

... RELATIVE ADDRESS ...

is the directory naming according to your working folder. . set your working folder in mind,

. and target yourself to the file you want to reach,

. the path you follow is the relative address of your file.use “../” to go up one folderuse “/” to go forward

slide7

File Paths and File Extensions

... ABSOLUTE ADDRESS ... RELATIVE ADDRESS ...

assume that;

current folder : html current file : index.htm

target file : family.jpg

Absolute Address : homedirectory/public_html/jpegs/family.jpg

Relative Address : ../jpegs/family.jpg

slide8

File Paths and File Extensions

... ABSOLUTE ADDRESS ...

always you will write the full pathname (http://www....), so it is not efficient.you have to change all pathnames when you update somewhere in your site.leads to typing errors

Think that someone saves your web site in his machine. Since the html source has the full pathname, it will go to your web site and get the files.

... RELATIVE ADDRESS ...

important to set the path name from your current file’s folder to the target file’s folder.

Examples from Front Page. 1. open a blank page. 2. do not save the page. 3 .import an image to this page from a folder, and view the HTML Code part.

slide9

File Paths and File Extensions

instructor’s home directory

stamp

email_notes

classes

public_html

web_design

fidelio

mail1

mail2

jpegs

html

1.htm

grades

index.htm

family.jpg

assignments

edp_mis

hw1

quiz1.htm

hw2

index.htm

Exercise for 5 min

slide10

File Paths and File Extensions

extension defines the type of file.... Why do we need? ...

. set the program we will open, edit, execute the file.

... What about Internet Files? ...

. HTML files .htm .html . Programming files .asp .jsp .php

... Most Known File Extensions ...

.htm .html .asp .jsp .php .doc .xls .txt .ppt .jpg .gif

.pdf .zip

slide11

HTML

HyperText Markup Language : open source coding + scripting.

HTML is the way of interpreting most kind of files through a web browser..doc is a Word Document file; where it means you will create, edit, with the same tool : Ms Word.However, .html or .htm is non-platform based.Different platforms having common attributes defined by W3C.Not a word Processing tool and a desktop publishing solution.More complex and more general.Also contains programming codes, that all platforms understand.

slide12

HTML

  • ... Elements of a Web Page ...
    • Empty elements (used for page formatting, no closing tags)
      • <HR width = “50%”>
    • Contatiners (used to manipulate, or control the contents placing within them)
  • <HTML> ........ </HTML>
  • TAGS : the way you differentiate the text from coding.<p>Can, this doesn\'t look so hard. Now I <strong>really</strong> want to
  • learn HTML.</p>
  • The <p></p> and <strong></strong>are called as HTML tags
slide13

HTML

... Do I Need to Learn? ...

. If you want to understand background of the Web,

. If you want to have control of unsatisfactory results of an authoring tool,

. If you want to examine other’s HTML sources -especially to copy its code to your web page-,

. If you want to make server side programming.

slide14

HTML

... How do We use TAGS ...think TAG as a command which means . you want to implement something to a phrase, . you have only the TEXT tools, . so, you need to differentiate the phrase from the command.how can we differentiate the TAG from the phrase? . using “<“ and “>” for tags . using “<>” and “</>” for opening and closing a tag

tags can be nested which means

<tag1>

<tag2> .... </tag2></tag1>

slide15

HTML

  • ... Basic Web Page Structure (.htm or .html) ... <html> <head> </head> <body>
          • </body> </html>

<html> <head> <title>Document</title> </head><body>Hello World .......</body></html>

slide16

HTML

HTML template of commonly used codesbetween <head> </head> doen’t seen from the browser only the descriptive information place of page

between <body> </body> the code executed and viewed by the browser

<html> <head> <title>....</title> </head> <body> ...

...

...

...

...

</body></html>

Type them in to a file and save as

html_tmp.htm

Create an HTML template

slide17

HTML

Document TypeBeginning and

Ending of a

Web page

<HTML>html document</HTML>

Description:first and last line in every HTML document

Type:container

Identifies the other tags that make up the header

<HEAD>header data</HEAD>

Description:provides descriptive information about a document as part of the header

Type:container

slide18

HTML

<TITLE>descriptive title</TITLE>

Description:provides descriptive information about the document for display at the top of the screen, not in the

body of the document

Type:container

It’s important: - Visitors may use in a bookmark, Favorite, or Hot List

- Searching with “Title”

- idea of the contents as soon as they arrive

Good  and Bad  Examples:

<title>Basic HTML commands</title>

<title>stuff</title>

<title>Pictures of Green Sea Turtles</title>

<title>Really Cool Pictures of Turtles I have taken While On Vacation</title>

<title>My Home Page</title>

<title>TNT’s Ten Terrific Test</title>

İts appearence in a browser. Plain Text!

<BODY>header data</BODY>

Description:Identifies the content of the Web page

Type:container

Attributes: alink, background, bgcolor, class, dir, id, lang, link, onclick, on dblclick,onkeydown, onkeypress, onkeyup, on mousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload, style, text, title, vlink

slide19

HTML

... Important notes for Coding .... White Space Does not Matter!<p>This is Code: the first paragraph </p>

Returns: This is the first paragraph. Next Line; “Enter” does not work!

. Break <br>Code

I don’t want new paragraph<br> I want to continue from the next lineReturns I don’t want new paragraph I want to continue from the next line

slide20

HTML

... Important notes for Coding .... Interpretation of Spaces, Tabs, and New LinesHTML document ignores extra spaces, tabs, and blank lines, and treats as a single space.

&nbsp; makes a space

<BR>  makes a new line

<BLOCKQUOTE>  makes a paragraph indent

slide21

HTML

... Style Tags (physical and logical)...

A style is a set of formatting rules;

alignment, size,color,font.....

<h1 style = “color:blue;font-style:italic”>Fancy Heading 1</h1>

<html><head><title>Heading Tag (H1-H6) Demonstration</title></head>

<body>

<h1>heading 1</h1><h2>heading 2</h2><h3>heading 3</h3><h4>heading 4</h4><h5>heading 5</h5><h6>heading 6</h6>

</body>

</html>

slide22

HTML

  • ... Common Coding Errors ...
  • A missing <title> tag results in the title not appearing in the title bar.
  • Missing beginning <title> tag results in having title in wrong place
  • Missing </h1> ending tag, rest of the text will be in heading 1 format.
  • forgetting the ending tag
  • Reversing the order of ending tag
  • Placing the slash in the ending tag in the wrong place
  • Forgetting to place attribute values within quotes
  • Forgetting one of the quotes around an attribute value
  • Forgetting to include an octothorp (#) in front of an RGB hexadecimal number
  • Using less than or more than six digits in an RGB hexadecimal number.
slide23

HTML

  • ... More Web Page Elements ...

<!--COMMENT>

Description:Used to annotate an HTML document (browsers ignore any text enclosed within this tag)

Type:empty

Attributes: none

Special Note: used to identify the author and original creation date of the document or to take some notes.

<!-- Author: Arzu İkinci-->

<!-- Created: 05/10/04 -->

<!--Make the Link colors FF00FF and the Vlink 00FF00--> What?

<body link = “#FF00FF” vlink = “#00FF00”>

<!--Set link to Magenta and vlink to Green” --> Why?

<body link = “#FF00FF” vlink = “#00FF00”>

<!-- Use the following colors to match the school’s colors --> Why?

<body link = “#FF00FF” vlink = “#00FF00”>

slide24

HTML

  • ... More Web Page Elements ...

<h1>heading<h1>, <h2>heading</h2>,....,<h6>heading</h6>

Description:Identifies one of six levels of heading

Type:container

Attributes:align, class, dir, id, lang, onclick, on dblclick, onkeydown, onkeypress, onkeyup, on mousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title.

<p>paragraph</p>

Description:Identifies a continuous string of text within the page

Type:container

Attributes:align, class, dir, id, lang, onclick, on dblclick, onkeydown, onkeypress, onkeyup, on mousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title.

slide25

HTML

  • ... Editing an HTML Document ...

Use ASCII editor to create and save your document: File / Save (As)

*.htm or *. html

To Preview your document: BrowserFile / Open

*.htm or *. html

To display saved changes in your document: Browser  Refresh or Reload

Just a note on safety: save backup(s) of your document: File / Save (As)

*.001 , *. 002 ,.....

slide26

HTML

... Body Tag Attributes ...

<body>...</body>background color: <body bgcolor=“#ffff00”>

<body bgcolor=“#yellow”>

background image: <body background=“picture.jpg”>text color: <body text=“#ff0000”>

link colors: <body link=“#ff0000” vlink=“#ff0000”

alink = “#ff00ff”>

slide27

HTML

... Key Terms ...

Attributes

Comments

Container Element

Empty Element

Horizontal Rule

Line Break

Paragraph

Style

... New Tags ...

<html> </html>

<br />

<blockquote />

<!--comment-->

<hr />

<&nbsp;>

<p> </p>

<head> </head>

<title> </title>

<body> </body>

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

slide28

HTML

  • ... Review Questions ...
  • Define each of the key terms.
  • How are each of the tags introduced in this lecture used? (provide examples)
  • Which HTML tags should be included in a minimal HTML template?
  • What tag must be included in every <head> cotainer element.
  • Give three resons why the <title> element should be used.
  • Name 5 common HTML coding errors.
  • How do you update a browser’s screen after changing the content or tags in the related HTML document?
  • How are comments used within an HTML document?
  • When using a graphical browser, how do you save background images like?
ad