IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt

1
IT 130
Internet and the WWW
Introduction to HTML

2
What is HTML?
 A simple, universal mark-up language
 HTML = HyperText Markup Language
 Just a series of tags that are integrated into
a text document
 Like stage directions - silently telling the
browser what to do, and what props to use.
 Can be created in a simple text editor

3
Creating your Web pages
In order to create your own web pages you need:
 A simple text editor (for example: Notepad)
 An HTTP browser for testing the pages
(for example: Internet Explorer, Netscape)
• Browsers:
http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_
Wide_Web/Browsers/
• Browser statistics:
http://www.w3schools.com/browsers/browsers_stats.asp
 A Web server on which to store your files and
make them available for viewing.
(for example: students.depaul.edu)

4
Creating Web pages
 Each page on your web site
corresponds to an HTML file
 HTML files
 are written in ASCII text format
 should have the extension .html
or .htm
 should have a “644” permission
 Pictures should also be
uploaded to students.

5
Naming in HTML
Files:
 should begin with a letter
 should not contain spaces
 should indicate the contents or
purpose of the page

6
HTML Tags
 Usually English words (example: "blockquote") or
abbreviations ("p" for paragraph)
 Are distinguished from the regular text because they
are placed inside small angle brackets (example: <p>
or <blockquote>)
 Tags dictate:
 How the page will be formatted (<p> begins a new
paragraph)
 How the words appear (<b> makes text bold)
 Provide information that doesn't appear on the page
itself (example: <title> tag).

7
HTML tag syntax
 Generally tags come in two parts
 Beginning tag: <html>
 Ending tag: </html>
The two parts mark off a part of the text and
specify its format.
 Most tags support various attributes.
<tag attr1=“value”> item to be formatted </tag>
 Appearance of the web page depends also
on the specific browser settings, and the
user’s system and monitor.

8
Capitalization in HTML
 HTML is not case sensitive
 XHTML is case sensitive!
Be consistent
Lowercase is preferred in html
Lowercase is required in the new
XHTML standard.

9
Basic tag types
 Document tags: identify the various parts of
the document (Head, Body).
 Text structure tags: determine the layout
of the text (lists, paragraphs).
 Style tags: tell the browser how to display
the text.
 Image tags: to incorporate images.
 Anchor tags: to create hyperlinks.

10
Header and Body
 The header is enclosed by the <head> and
</head> tags
 Contains information about a page that won't
appear on the page itself, such as the title.
 The body is enclosed by <body> and
</body>
 Where the action is
 Everything that appears on the page is
contained within these tags.

11
The <p> Tag
 Creates a new paragraph
 Skips a line from the previous item
 A <p> tag is one of the few tags that
doesn't need to be closed off by a
corresponding </p> in HTML,
however, the new XHTML standard
does require closing tags.

12
Headlines
 <h1> turns on large headlines
 </h1> turns off large headlines
 <h3> turns on medium sized headlines
 </h3> turns off medium sized headlines
 <h6> turns on small headlines
 </h6> turns off small headlines

13
Example
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>I love HTML!</h1>
<p>This is our first try using HTML. So far it seems pretty easy. </p>
<p>I hope we get to memorize every single HTML tag in this class. </p>
</body>
</html>
Notepad
or
Textpad
window
Save as
.html

14
Viewing Source Code
 Every Web page you visit is actually
just a plain text document
 In Netscape: choose Page Source
from the View menu
 In Explorer: choose Source from the
View menu

15
Commenting Your Code
 Comment does not appear on your web page
 You can use it for personal reminders or notes to
the people you're working with
 visible to anyone who views your source code
 Do not include any embedded HTML code in
commented text because the results are
unpredictable.


16
Hyperlinks : Anchor Tags
 Link your site to any other page or file
in your site, or on the Internet
 Default text is blue and underlined
 Normally the link opens in the same
browser window

17
Hyperlinks
 <a href=“…."> and </a>
<a> means “anchor point”
href= means hypertext reference
“….” Is where you put the URL you
want to reference
 Example
<a href="http://www.depaul.edu">Visit
the DePaul site.</a>
Visit the DePaul site

18
Hyperlinks
 Relative:
 In same directory
• href=“filename.html”
 In a subfolder
• href=“subfoldername/filename.html”
 Up a directory
• href=“../filename.html”
 Absolute:
 Include entire URL
• Example:
href=“http://condor.depaul.edu/~gandrus/index.html”

19
Mailto
 Links to an email address
 Example
<a
href="mailto:yourname@hotmail.com"
> Email me</a>.
Email me

20
Relative pathnames
Example, you want to insert inside file1.htm a hyperlink
to file2.htm
 <a href=“file2.htm”> If file2 is in the same folder as file1
 < a href=“foldername/file2.htm”> If file2 is in a child folder (subfolder)
 < a href=“../file2.htm”> If file2 is in a parent folder
It is important that the folder structure on your local
machine matches the directory structure on students.

21
<a href=“HW3_d/hw3.html”>
<a href=“../main.html”>
<a href=“../Images/pic2.jpg”>
Relative path
public_html
hw3.html
IT130
main.html
Images
pic2.jpg
Link main.html to
hw3.html:
Link hw3.html to
main.html:
HW3_d
Link hw3.html to pic2.jpg:

22
A few Style tags
 <i>…</i> Italic
 <b>…</b> Boldface
 <u>…</u> Underlined
 <strike>…</strike>
crosses out a word by
having a line drawn
through it
 <sub>…</sub>
generates subscripts
 <sup>…</sup>
generates superscripts

23
Font Tag (depreciated)
 <font> … </font> used to change the color,
size, and face of any portion of text
 Font tag has three attributes
 Font color: <font color=“#0000FF”>
 Font size: < font size=“+3”>
 Font face: < font face=“Arial”>
 The size attribute is relative to the text
before it.
 See next slide for prefered method.

24
Using CSS to style fonts
 Example:
Instead of writing
<font color=green size=12pt face=verdana>This text
is different</font>
 We would first define a CSS style rule like:
span.txt1 {color: green; font-size: 12pt;
font-family: verdana}
 And then use this rule in the body of our HTML
document, like so:
<span class=“txt1”>This text different</span>

25
Horizontal Rules
 <hr> produces a horizontal line
 Default is shaded engraved line
 In HTML the <hr> tag has no end tag.
 In XHTML the <hr> tag must be properly closed,
like this: <hr />
 Attributes
 <hr size=number>: how thick is the line
 <hr width=number of pixels or percent>: Default
horizontal rule is as wide as the page
 <hr align=left|right|center>
 <hr noshade>: the line appears as a solid bar

26
Breaks
 <br> inserts a line break
 Does not skip a space as <p> does
 In HTML the <br> tag has no end tag.
 In XHTML the <br> tag must be properly
closed, like this: <br /> (the space after
br is required)

27
Special Characters
Special Character
Sequence
Corresponding
Character
< <
> >
& &
" “
@ @

28
Special Characters (cont’d)
Special Character
Sequence
Corresponding
Character
© ©
© ©
® ®
® ®
  Non-breaking space

29
Aligning Text
 <p align=“left”> aligns a paragraph to the left
 <p align=“right”> aligns a paragraph to the right
 <p align=“center”> centers a paragraph
 Better - do it in CSS
 <p style=“text-align: left”> aligns a paragraph to
the left</p>
 Similarly for aligning right and center

30
Lists
Two types:
 Unordered lists
 Ordered lists

31
Unordered lists
 An unordered (or bullet) list uses the tag pair <ul> … </ul>
 Each item in the list is preceded by a single list item tag
<li>
 It produces an indented list with a browser-supplied character in
front of it (a small circle or a square)
 You can specify the type of symbol used by using the TYPE attribute
<ul type=“disc”>
<li>Items
</ul>
Other possible types are:
square|circle

32
<html>
<head>
<title> Lists </title>
</head>
<body>
<h1>Here is an example of a list</h1>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ul type=“square”>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>
Example
• First item
• Second item
 Third item
 Fourth item

33
Ordered lists
 An ordered list uses the tag pair <ol>… </ol>
 Each item in the list is preceded by a single list
item tag <li>
1. This also produces an indented list but the items are
ordered.
2. The default is to order by numbers (like this)

34
Example
<html>
<head>
<title> …. </title>
</head>
<body>
<h1>An example of a ordered list</h1>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
</body>
</html>
1. First item
2. Second item

35
 type can change the type of numbering used in
a list.
 type = “I” Uppercase Roman numerals
 type = “i” Lowercase Roman numerals
 type = “A” Uppercase Latin letters
 type = “a” Lowercase Latin letters
 start can change where the lists begins the
numbering.
 start = “3” Starts from 3 instead of 1
 start = “2” Starts from b instead of a
Attributes for ordered lists

36
<html>
<head><title>ECT270 Lists</title></head>
<body><h1>To do list</h1>
<ol type =“A” >
<li>Pick up dry cleaning</li>
<li>Clean the house
<ul>
<li>Sweep the floors</li>
<li>Take out garbage</li>
<li>Clean kitchen</li>
</ul></li>
<li>Stop by post office
<ul>
<li>Get stamps
<ul>
<li>Overseas airmail</li>
<li>Domestic</li>
</ul></li>
<li>Mail package</li>
</ul></li>
</ol>
</body></html>
Example

37
Nested lists
 Both ordered and unordered lists can be
nested.
 This is done by starting a new list before the
current list has ended.
 There is no limit to the number of levels of
nesting.
 Use indenting in the source code to
distinguish between each level of nesting.

38
For Assignments
Review of how to:
• Post your pages,
• transfer files to students with SSH,
• check permissions,
• what should your file structure be

39
Where do we put it?
 File structure on your account should
be:
public_html (directory)
IT130 (sub-directory in above
directory)
files (.html or text etc.) in the directory
‘IT130’
Image files in a sub-directory of IT130
named “Images”.

40
Your directory structure
mail
your
account
(root)
public_html
IT130
Assignments.html Images
pic1
pic2
pic3
Multimed
page1 page2 page3
animation
sound
Homepage.html

41
Hosting your site
 You will host your site on the server
called “students”.
 Accounts on “students” are provided
by DePaul.
 Off campus specify the host name as
“students.depaul.edu”

42
How to connect to “students”
 Start SSH
Choose Quick Connect
Enter Username and Password (see
next slide)

43
How to connect to students
 Instead of “janedoe”, use your username
 When prompted for a password, enter yours.

44
Permissions
 Be sure to check
that your
permissions are
set correctly!
 Right click on
public_html and
look at “properties”
Make sure it
looks like this:

45
About HW Assignment 3
 Starting from scratch, and using only
Notepad (or similar text editor), you will
be creating 3 pages, and link them
together.
 One page is your “Assignment list”
page that you will be updating after
every HW.
 The other 2 pages are the first versions
of your Website’s ‘Homepage’ and
‘AboutUs’ page.

46
HW3:
Part 2: Your “Assignments.html” page
 This page will be a list or table of contents
for all your assignments.
 It will contain links to all of your homework
assignments
 Create the page on your local machine
 Name it “Assignments.html”
 Upload it to your IT130 directory on
students.

47
Example
My assignments
Gary Andrus
gandrus@cdm.depaul.edu
Homework1
Homework2
Homework3
Homepage
About Us
Homework4
Homepage
About Us
Another page
Homework5
Homework6

IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt

More Related Content

Similar to IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt

Recently uploaded

IntroHTMzczczscasasaklahduasihiaSUJScgGJKKL.ppt