HTML - Personal websites at UB
Download
Report
Transcript HTML - Personal websites at UB
The Web and HTML Tutorial
Building a Webpage
Chapter Overview
The World Wide Web
–
Web servers, Web browsers and Web pages
HTML Introduction
Using HTML Tags
Moving to XHTML
General Webpage Structure
Designing with Standards
UB Web Environment
Web Pages
Viewing a web page involves using a web
browser (IE, Firefox, Mozilla) to connect to a
networked machine running web server software
(IIS, Apache). This action loads an HTML file
from the web server and sends it to your
computer across the Internet using the HTTP
and TCP/IP protocols, and the file is displayed by
your web browser software as a web page.
Web Server Stats
Useful Web Stats
www.w3schools.com/browsers
gs.statcounter.com
–
OS
–
Browsers
–
Display Resolution
W3C
Founded in 1994 – World Wide Web
Consortium
Creates specifications and guidelines
that are intended to promote the web’s
evolution and ensure that web
technologies work well together
Specifications for: HTML, CSS, XML,
XHTML, DOM, etc…
W3C
Not all browser companies follow or
adhere to these guidelines
–
It was not until FireFox, Netscape 7 and IE
6 did browsers truly support the W3C Web
Standards
Web pages may look different in two
browsers
–
Browsers support different standards, not
all of them and support them in different
methods
HTML Introduction
HTML (Hypertext Markup Language) is the code
used to build web pages. Web pages are text
files with HTML code.
You can view the HTML code on any webpage
by clicking on Source from the View menu in a
web browser.
HTML files usually have either .htm or .html file
extension
Default Web pages
Default page appears when visiting a website
without specifying the file name in the URL.
–
www.cnn.com displays www.cnn.com/index.html
Default pages are usually either index.htm,
index.html, index.asp, index.cfm, default.htm,
default.html, default.asp or default.cfm. These
options are configured in the web server.
Using HTML Tags
Most HTML tags have an opening and
corresponding closing tag indicated by a slash /.
–
<pre>…</pre>
–
<b>…</b>
Anything between the tags, denoted by the “…”
in the above examples, will be modified
according to the behavior described by the tag
*All XHTML tags should be closed
HTML Caveats
Extra spaces (beyond one) in the code
and any line breaks are ignored by the
browser when rendering the HTML page.
is a special symbol that can be
used to insert extra spaces.
<br> or <p> can be used to create
necessary line breaks.
HTML Caveats
HTML Caveats
Moving to XHTML
XHTML (Extensible Hypertext Markup
Language) is a hybrid of HTML and XML and
should be used to code websites to meet the
latest standards set by W3C.
–
All tags must be closed - including tags like <br />
–
All tags should be in lowercase except for the
DOCTYPE tag.
–
All tag attributes must be quoted and have values
–
CSS are used for page formatting.
General Webpage Structure
<!DOCTYPE html PUBLIC etc…>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title> … </title>
</head>
<body> … </body>
</html>
DOCTYPE Options
DOCTYPE – 3 types to choose from
Transitional – more easy going and flexible.
Most people are using this
Strict – everything must be perfect and there
is no flexibility.
Frameset – Allows you to use frames on your
page
Designing with Standards
Does not mean “designing for the latest
browsers only”
Includes structural languages like
XHTML and XML and presentation
languages like CSS
Even the perfectly designed site will
never look identical in all browsers but it
should always function and look very
similar in any browser
Designing with Standards
Lowers production and maintenance
costs
Makes sites more accessible to users
who have special needs
Makes sites cross platform and browser
–
PDAs, Cell phone browsers, IE, Mozilla,
Netscape, Opera Screen Readers
Viewable on handheld devices
Designing with Standards
Structure:
When authored correctly XHTML will
work in all web browsers, screen
readers, text browsers, and handheld
devices
Valid/Semantic Code when:
–
–
–
Contains no errors
Tags are chosen according what they
mean- eg – h1-> headline
Code can be valid but not semantic
Designing with Standards
Structure:
A markup language (XHTML) contains text
data formatted according to its structural
(semantic) meaning.
–
Headline, paragraph, list etc..
Example:
<p>this is a paragraph of text</p>
<h1>News & Events</h1>
<ul>
<li>structure</li>
<li>presentation</li>
<li>behavior</li>
</ul>
Designing with Standards
Presentation languages (CSS) format
the web page, controlling the
typography, placement, color, etc…
Due to the separation of structure from
presentation you can easily change one
without affecting the other
CSS is implemented with inline, internal
or external style sheets
Large sites may be able to reduce
bandwidth costs too
Cleaner code with CSS
WITHOUT CSS
<p><font color=“#000000”
size=“10px”><b>heading of an
article</b></font></p>
WITH CSS
<p class=“articleheading”>heading of
an article</p>
Accessibility
Intended to ensure that our work will be
usable and available to the largest
possible number of people
Hot topic in the web design industry
Laws are in place to make sure
companies and web designers adhere
to certain rules
Who does it affect?
Visually impaired – blind or limited site
or elderly
Physically disabled
Color blind
Motor impaired – rather buy online than
deal w/the hassle of going to a store
Any thoughts on who else? There are a
whole bunch more!
Who does it affect?
Search engine crawlers – extreme blind
user
–
–
Called the “Blind Billionaire”
Biggest category of blind users
PDA users
Text only browsers
Cell Phone users
UB Web Environment
UB provides web space for each student
on the UBUNIX servers which run the
Apache webserver. Your webpage can
be viewed in any of the 3 locations.
–
www.buffalo.edu/~djmurray
–
www.acsu.buffalo.edu/~djmurray
–
wings.buffalo.edu/~djmurray
UB Web Environment
URLs and files are case sensitive because
the UNIX OS is case sensitive.
–
www.buffalo.edu/~djmurray/INDEX.html - error!
–
www.buffalo.edu/~djmurray/index.html - works!
Windows servers running IIS are not case
sensitive.
–
www.ubathletics.buffalo.edu/INDEX.html - works!
–
www.ubathletics.buffalo.edu/index.html - works!
UB Web Environment
Remember that a webpage is simply a file
stored on a webserver in a particular
location.
Your UB homepage is stored in the
public_html directory of your S: drive.
Anything in that directory is technically on
the web.
UB Web Environment
It’s easiest to work from a lab computer
since they have direct access to the S:
drive folders.
Enable your homepage first.
–
https://ubfs.buffalo.edu/cgi-bin/ubfs_activatepersonalwebsite.cgi
Use Windows Notepad to edit the
index.html file in your public_html folder.
UB Web Environment
If you are using a computer on the UB
network (Resnet, wireless, VPN), you can
map a network drive and create your own
S: drive as explained at this website.
http://ubit.buffalo.edu/ubfs/accessubfs.php
UB Web Environment
Another option is using FTP software
(Filezilla or Fetch) to upload files to your
UB web space using these settings. VPN
also required when using from off campus.
Host: ubunix.buffalo.edu
Server Type: SFTP – SSH File Transfer
Protocol
Login Type: Ask for password
Next Steps…
The hard part is often understanding how
the web environment works and where to
save the HTML files so they appear on the
web!
Now its time to try some HTML tags.