The Web and HTML Instructional exercise Building a Page.


122 views
Uploaded on:
Category: Travel / Places
Description
www.buffalo.edu/~djmurray/index.html - works! Windows servers running ... https://ubfs.buffalo.edu/cgi-canister/ubfs_activatepersonalwebsite.cgi. Use Windows Notepad to ...
Transcripts
Slide 1

The Web and HTML Tutorial Building a Webpage

Slide 2

Chapter Overview The World Wide Web servers, Web programs and Web pages HTML Introduction Using HTML Tags Moving to XHTML General Webpage Structure Designing with Standards UB Web Environment

Slide 3

Web Pages Viewing a website page includes utilizing a web program (IE, Firefox, Mozilla) to interface with an arranged machine running web server programming (IIS, Apache). This activity stacks a HTML record from the web server and sends it to your PC over the Internet utilizing the HTTP and TCP/IP conventions, and the document is shown by your web program programming as a site page.

Slide 4

Web Server Stats

Slide 5

Useful Web Stats www.w3schools.com/programs OS Browsers Display Resolution

Slide 6

W3C Founded in 1994 – World Wide Web Consortium Creates particulars and rules that are expected to advance the web\'s development and guarantee that web innovations function admirably together Specifications for: HTML, CSS, XML, XHTML, DOM, and so forth…

Slide 7

W3C Not all program organizations take after or hold fast to these rules It was not until FireFox, Netscape 7 and IE 6 did programs genuinely bolster the W3C Web Standards Web pages may look changed in two programs Browsers support diverse guidelines, not every one of them and bolster them in various techniques

Slide 8

HTML Introduction HTML ( H yper t ext M arkup L anguage) is the code used to assemble site pages. Site pages are content documents with HTML code. You can see the HTML code on any website page by tapping on Source from the View menu in a web program. HTML documents normally have either .htm or .html record augmentation

Slide 9

Default Web pages Default page shows up when going by a site without indicating the document name in the URL. www.cnn.com shows www.cnn.com/index.html Default pages are normally either index.htm, index.html, index.asp, index.cfm, default.htm, default.html, default.asp or default.cfm. These choices are arranged in the web server.

Slide 10

Using HTML Tags Most HTML labels have an opening and relating shutting tag demonstrated by a slice/. <pre>… </pre> <b>… </b> Anything between the labels, indicated by the "… " in the above illustrations, will be changed by conduct portrayed by the tag *All XHTML labels ought to be shut

Slide 11

HTML Caveats Extra spaces (past one) in the code and any line breaks are disregarded by the program when rendering the HTML page. &nbsp; is an extraordinary image that can be utilized to embed additional spaces. <br> or <p> can be utilized to make fundamental line breaks.

Slide 12

HTML Caveats

Slide 13

HTML Caveats

Slide 14

Moving to XHTML (E x tensible H yper t ext M arkup L anguage) is a half and half of HTML and XML and ought to be utilized to code sites to meet the most recent norms set by W3C. All labels must be shut - including labels like <br/> All labels ought to be in lowercase with the exception of the DOCTYPE tag. All label qualities must be cited and have values CSS are utilized for page arranging.

Slide 15

General Webpage Structure <!DOCTYPE html PUBLIC and so on… > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> … </title> </head> <body> … </body> </html>

Slide 16

XHTML Syntax DOCTYPE – 3 sorts to look over Transitional – all the more nice and adaptable. A great many people are utilizing this Strict – everything must be flawless and there is no adaptability Frameset – Allows you to utilize outlines on your page

Slide 17

Designing with Standards Does not signify "planning for the most recent programs just" The superbly composed webpage (w/benchmarks) will never appear to be indistinguishable in all programs – both present, past, and future programs Should dependably capacity and look truly close in any program

Slide 18

Web Standards Structural dialects like XHTML and XML, presentation dialects like CSS Designing with measures brings down creation and upkeep costs makes destinations more available to clients who have uncommon necessities Makes locales cross stage and program Viewable on handheld gadgets

Slide 19

Designing with Standards Structure: A markup dialect (XHTML) contains content information organized by auxiliary (semantic) which means. Feature, section, list and so forth.. Illustration: <p>this is a passage of text</p> <h1>News & Events</h1> <ul> <li>structure</li> <li>presentation</li> <li>behavior</li> </ul>

Slide 20

Designing with Standards Structure: When wrote redressed XHTML will work in all web programs, screen perusers, content programs, and handheld gadgets Valid/Semantic Code when: Contains no blunders Tags are picked agreeing what they mean-eg – h1-> feature Code can be substantial yet not semantic

Slide 21

Designing with Standards Presentation: Presentation dialects (CSS) position the site page, controlling the typography, situation, shading, and so on… Due to the division of structure from presentation you can without much of a stretch change one w/o affecting the other Eg – change the textual style sort for the whole website w/o touching and of the real site pages

Slide 22

Designing with Standards Presentation: Cleans up the real site 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>

Slide 23

Web Standards Allows you to plan on site page and have it look right on: PDAs Cell telephone programs Desktop programs – IE, Mozilla, Netscape, Opera Screen Readers Print

Slide 24

Accessibility Intended to guarantee that our work will be usable and accessible to the biggest conceivable number of individuals Hot subject in the web outline industry Laws are set up to ensure organizations and web fashioners stick to specific tenets

Slide 25

Who does it influence? Outwardly debilitated – visually impaired or restricted webpage or elderly Physically crippled Color visually impaired Motor hindered – preferably purchase online than arrangement w/the bother of setting off to a store Any contemplations on who else? There are an entire group more!

Slide 26

Who does it influence? Internet searcher crawlers – great visually impaired client Called the "Visually impaired Billionaire" Biggest classification of visually impaired clients PDA clients Text just programs Cell Phone clients

Slide 27

UB Web Environment UB gives web space to every understudy on the UBUNIX servers which run the Apache webserver. Your website page can be seen in any of the 3 areas. www.buffalo.edu/~djmurray www.acsu.buffalo.edu/~djmurray wings.buffalo.edu/~djmurray

Slide 28

UB Web Environment URLs and records are case delicate on the grounds that the UNIX OS is case touchy. www.buffalo.edu/~djmurray/INDEX.html - mistake! www.buffalo.edu/~djmurray/index.html - works! Windows servers running IIS are not case touchy. www.ubathletics.buffalo.edu/INDEX.html - works! www.ubathletics.buffalo.edu/index.html - works!

Slide 29

UB Web Environment Remember that a site page is essentially a document put away on a webserver in a specific area. Your UB landing page is put away in the public_html index of your S: drive. Anything in that index is actually on the web.

Slide 30

UB Web Environment It\'s most effortless to work from a lab PC since they have direct access to the S: drive envelopes. Empower your landing page first. https://ubfs.buffalo.edu/cgi-container/ubfs_activatepersonalwebsite.cgi Use Windows Notepad to alter the index.html record in your public_html envelope.

Slide 31

UB Web Environment If you are utilizing a PC on the UB system (Resnet, remote, VPN), you can delineate system drive and make your own S: drive as clarified at this site. http://ubit.buffalo.edu/ubfs/accessubfs.php

Slide 32

UB Web Environment If you are off grounds, another choice is utilizing FTP programming (Filezilla) to transfer documents to your UB web space utilizing these settings. Server: ubunix.buffalo.edu Login/Username: your UBITname Password: your UBITname secret key Initial way/index: public_html

Slide 33

Next Steps… The critical step is frequently seeing how the web environment functions and where to spare the HTML records so they show up on the web! Presently its opportunity to attempt some HTML labels.

Recommended
View more...