The web and html tutorial building a webpage
Download
1 / 33

The Web and HTML Tutorial - PowerPoint PPT Presentation


  • 514 Views
  • Updated On :

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.

Related searches for The Web and HTML Tutorial

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'The Web and HTML Tutorial' - arleen


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
The web and html tutorial building a webpage l.jpg

The Web and HTML TutorialBuilding a Webpage


Chapter overview l.jpg
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 l.jpg
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.



Useful web stats l.jpg
Useful Web Stats

  • www.w3schools.com/browsers

    • OS

    • Browsers

    • Display Resolution


Slide6 l.jpg
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…


Slide7 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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

  • *AllXHTML tags should be closed


Html caveats l.jpg
HTML Caveats

  • Extra spaces (beyond one) in the code and any line breaks are ignored by the browser when rendering the HTML page.

  • &nbsp; is a special symbol that can be used to insert extra spaces.

  • <br> or <p> can be used to create necessary line breaks.




Moving to xhtml l.jpg
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 l.jpg
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>


Xhtml syntax l.jpg
XHTML Syntax

  • 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 l.jpg
Designing with Standards

  • Does not mean “designing for the latest browsers only”

  • The perfectly designed site (w/standards) will never look identical in all browsers – both current, past, and future browsers

    • Should always function and look pretty close in any browser


Web standards l.jpg
Web Standards

  • Structural languages like XHTML and XML, presentation languages like CSS

  • Designing with standards

    • lowers production and maintenance costs

    • makes sites more accessible to users who have special needs

    • Makes sites cross platform and browser

    • Viewable on handheld devices


Designing with standards19 l.jpg
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 standards20 l.jpg
Designing with Standards

Structure:

  • When authored corrected 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 standards21 l.jpg
Designing with Standards

Presentation:

  • 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 w/o effecting the other

    • Eg – change the font type for the entire site w/o touching and of the actual web pages


Designing with standards22 l.jpg
Designing with Standards

Presentation:

  • Cleans up the actual web page code

    • Eg: <p><font color=“#000000” size=“10px”><b>heading of an article</b></font></p>WITH CSS<p class=“articleheading”>heading of an article</p>


Web standards23 l.jpg
Web Standards

  • Allows you to design on web page and have it look correct on:

    • PDAs

    • Cell phone browsers

    • Desktop browsers – IE, Mozilla, Netscape, Opera

    • Screen Readers

    • Print


Accessibility l.jpg
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 l.jpg
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 affect26 l.jpg
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 l.jpg
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 environment28 l.jpg
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 environment29 l.jpg
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 environment30 l.jpg
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 environment31 l.jpg
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 environment32 l.jpg
UB Web Environment

  • If you are off campus, another option is using FTP software (Filezilla) to upload files to your UB web space using these settings.

  • Server: ubunix.buffalo.edu

  • Login/Username: your UBITname

  • Password: your UBITname password

  • Initial path/directory: public_html


Next steps l.jpg
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.


ad