Slide 1

Transcript Slide 1

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 Template
Common Coding Errors
Editing an HTML document
Empty Tags
Body Tag Attributes
A Few Considerations
Review Questions
Exercise
1
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
2
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
3
File Paths and File Extensions
Tree View
Path
c:/ HDD_1
c:/
...... Level 1
...... Level 2
...... Level 1
d:/ HDD_2
...... Level 1
...... Level 2
...... Level 3
...... Level 1
c:/Level1/Level2
d:/Level1
d:/Level1/Level2/Level3
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
4
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
5
File Paths and File Extensions
ADDRESSING STRUCTURE is same as DIRECTORY LISTING you use in Dos.
Our aim
Our method
: TO REACH a definite FILE
: 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 folder
use “/” to go forward
6
File Paths and File Extensions
... ABSOLUTE ADDRESS ... RELATIVE ADDRESS ...
assume that;
current folder
current file
target file
: html
: index.htm
: family.jpg
Absolute Address
: homedirectory/public_html/jpegs/family.jpg
Relative Address
: ../jpegs/family.jpg
7
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.
8
File Paths and File Extensions
instructor’s home directory
stamp
classes
web_design
fidelio
assignments
edp_mis
hw1
hw2
public_html
html
grades
index.htm
jpegs
family.jpg
email_notes
mail1
mail2
1.htm
quiz1.htm
index.htm
Exercise for 5 min
9
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
. Programming files
.htm .html
.asp .jsp .php
... Most Known File Extensions ...
.htm .html .asp .jsp .php
.doc .xls .txt .ppt
.jpg .gif
.pdf
.zip
10
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.
11
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
12
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.
13
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>
14
HTML
... Basic Web Page Structure (.htm or .html) ...
<html>
<head>
<title>Document</title>
</head>
<body>
Hello World
.
.
.
.
.
.
.
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
15
HTML
HTML template of commonly used codes
<html>
<head>
<title>....</title>
between <head> </head>
doen’t seen from the browser
only the descriptive information place of page
</head>
<body>
...
between <body> </body>
the code executed and viewed by the browser
...
...
Type them in to a file and save as
html_tmp.htm
...
...
</body>
</html>
16
HTML
<HTML>html document</HTML>
Description:first and last line in every HTML document
Type:container
Document Type
Beginning and
Ending of a
Web page
<HEAD>header data</HEAD>
Description:provides descriptive information about a
document as part of the header
Type:container
Identifies the
other tags that
make up the
header
17
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:
İts appearence in a
browser.
Plain Text!
- 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>
<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
18
HTML
... Important notes for Coding ...
. White Space Does not Matter!
Code:
<p>This is
the
first
</p>
Returns:
This is the first paragraph
paragraph
. Next Line; “Enter” does not work!
. Break
<br>
Code
I don’t want new paragraph<br>
I want to continue from the next line
Returns
I don’t want new paragraph
I want to continue from the next line
19
HTML
... Important notes for Coding ...
. Interpretation of Spaces, Tabs, and New Lines
HTML document ignores extra spaces, tabs, and blank lines, and treats as a single space.
   makes a space
<BR>
 makes a new line
<BLOCKQUOTE>  makes a paragraph indent
20
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
<h2>heading
<h3>heading
<h4>heading
<h5>heading
<h6>heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
</body>
</html>
21
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.
22
HTML
... More Web Page Elements ...



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

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

<body link = “#FF00FF” vlink = “#00FF00”>
Why?
23
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.
24
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 ,.....
25
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”>
26
HTML
... Key Terms ...
... New Tags ...
Attributes
Comments
Container Element
Empty Element
Horizontal Rule
Line Break
Paragraph
Style
<html> </html>
<br />
<blockquote />

<hr />
< >
<p> </p>
<head> </head>
<title> </title>
<body> </body>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
27
HTML
... Review Questions ...
1. Define each of the key terms.
2. How are each of the tags introduced in this lecture used? (provide
examples)
3. Which HTML tags should be included in a minimal HTML template?
4. What tag must be included in every <head> cotainer element.
5. Give three resons why the <title> element should be used.
6. Name 5 common HTML coding errors.
7. How do you update a browser’s screen after changing the content or
tags in the related HTML document?
8. How are comments used within an HTML document?
9. When using a graphical browser, how do you save background
images like?
28

Slide 1

Transcript Slide 1

Directory