Embed Size (px)
Citation preview
1
IT 130Internet 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 consistentLowercase is preferred in htmlLowercase 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.
<!--This is an example of a comment.-->
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:[email protected]"> 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
IT130main.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 ina 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 thenumbering. 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 AssignmentsReview 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
your account (root)
public_html
IT130
Assignments.html Images
pic1
pic2
pic3
Multimedpage1 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 SSHChoose Quick ConnectEnter 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
ExampleMy assignmentsGary [email protected]
Homework1Homework2
Homework3 Homepage
About Us
Homework4 Homepage About Us
Another page
Homework5
Homework6
