The Web and HTML Tutorial Building a Webpage. Chapter Overview m The World Wide Web – Web servers,...

The Web and HTML TutorialBuilding 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>

– …

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.

 or can be used to create

necessary line breaks.

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 

– 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


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


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


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

Structure: A markup language (XHTML) contains text data

formatted according to its structural (semantic) meaning.– Headline, paragraph, list etc..

Example:this is a paragraph of text<h1>News & Events</h1> <ul>

<li>structure</li><li>presentation</li><li>behavior</li>

</ul>


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

heading of an article

WITH CSSheading of an article

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.

The Web and HTML Tutorial Building a Webpage. Chapter Overview m The World Wide Web – Web servers,...

Documents

Transcript of The Web and HTML Tutorial Building a Webpage. Chapter Overview m The World Wide Web – Web servers,...