2 Html Intro
-
Upload
drauscher -
Category
Technology
-
view
384 -
download
2
description
Transcript of 2 Html Intro
![Page 1: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/1.jpg)
Web Terminology
Presented by:
Dawn Rauscher
September 9, 2008
![Page 2: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/2.jpg)
Discussion Topics
• What is HTML?
• Web Browsers
• URL
• HTML Terminology
• File Transfer Protocol (FTP)
• Questions & Answers
![Page 3: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/3.jpg)
XHTML (Hyper Text Markup Language)
• Portable across platforms• Write the code in a document using a text-
editor program• View the page in a browser
• In Dreamweaver choose Code view to view the HTML code
![Page 4: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/4.jpg)
The World Wide Web
Purpose for Communication
• Internet is vast network that connects computers all over the world
• World Wide Web – 1990 & 1991 was created by Tim Berners-Lee– (WWW). A hypermedia-based system for browsing Internet sites. It
is named the Web because it is made of many sites linked together; users can travel from one site to another by clicking on hyperlinks. Text, graphics, sound, and video can all be accessed with browsers like Mosaic, Netscape, or Internet Explorer.
![Page 5: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/5.jpg)
BrowsersIs one better than the other?
Which one should I use?
• 1994 Netscape released Navigator• Navigator controlled 75% of the market• 1996 Microsoft came out with Explorer and the wars began• Browser Statistics
When developing Web pages -- it is very important to check Your web sites in as many browsers as possible.
![Page 6: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/6.jpg)
Browsers Worth Noting
There is more to the web than Internet Explorer!
•Amaya – http://www.w3.org/amaya•Firefox – http://www.mozilla.com/en-US/firefox/•Opera – http://www.opera.com•Safari – Default browser for Mac OS X•Konqueror – Free browser and file manager for Linux•OmniWed – Browser for Mac OS X that costs a small fee
I have added these browsers to our delicious account
![Page 7: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/7.jpg)
HTML
Hypertext Markup Language
• XHTML is a simple language – Used to create Web pages that appear on World Wide Web– Based on an older language
• SGML: Standard Generalized Markup Language• HTML originally designed to define elements in a document
independent of how they would appear• XHTML now capable of defining how elements should appear in a
browser
![Page 8: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/8.jpg)
Cascading Style Sheets (CSS)
• HTML lacks a proper means of influencing the display of content - It was intended to provide structure.
• CSS was introduced in the late 1990’s
• CSS describes how HTML documents should be visually presented while leaving the structural markup clean and meaningful.
![Page 9: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/9.jpg)
Benefits of CSS
• Style sheets can be applied to any HTML document adding an attractive layer of visual design
• Separating content from presentation allows both aspects to become stronger and more adaptable.
• An entire Web site can be redesigned by changing a single style sheet
• Today’s browsers support CSS!
![Page 10: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/10.jpg)
URL (Uniform Resource Locator)
• Internet Address of a resource
• The address that allows a web-connected device to locate a specific file on a specific server in order to download and display it to the user.
• Protocol://domain name/path/filename
Yahoo URL – http://www.yahoo.com
ProtocolDomain Name
![Page 11: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/11.jpg)
• First part of the URL
• Describes the format of the information accessed from the Internet– http: (links that point to other web pages)– file: (file you want browser to read)– ftp: (download or copy a file to a computer)– mailto: (Start a mail program)– telnet: (login remotely to a specified
computer)
URL (Uniform Resource Locator)
![Page 12: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/12.jpg)
Domain Name
• Second Part of the URL
• Physical location of the file or resource
• IP Address – 198.95.251.5
• Domain Name – yahoo.com
• Domain Name Server (DNS) will translate domain name into the IP address
![Page 13: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/13.jpg)
Domain Name Extensions
• .edu - Education
• .com - Commercial
• .gov - Government
• .org – Nonprofit Organization
• .net – Usually an ISP
![Page 14: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/14.jpg)
New Extensions
• .aero – Air Transport Industry
• .biz – Business
• .coop – Cooperatives
• .info – Unrestricted
• .museum – Museums
• .name – Personal Applications
• .pro – Professionals such as accountants, doctors, and lawyers
![Page 15: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/15.jpg)
Path and FileName
Example –
http://home1.fvcc.edu/~drausche/cmpa270/calendar.htm
![Page 16: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/16.jpg)
Basic HTML Syntax• HTML documents are text documents
– Contain formatting instructions, called tags• All HTML documents must use the <html> element as the root
element• A root element contains all the other elements in a document• Opening and closing <html>...</html> tags are required• Two other important HTML elements are the <head> element and the
<body> element
![Page 17: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/17.jpg)
Basic Syntax
![Page 18: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/18.jpg)
Attributes
• Empty or starting container tags can contain attributes, which modify the related tag
• Example: <p align="right">• Default values – used if attribute not
specified
• Example: <p>
![Page 19: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/19.jpg)
HTML Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html401/loose.dtd"><html><head> <title>Welcome to My Web Site!</title></head><body> <h1>Dawn Rauscher</h1>
<p> I teach at FVCC
</p></body></html>
![Page 20: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/20.jpg)
How do you buy a domain name?
• Go Daddy
• Dot Easy
![Page 21: 2 Html Intro](https://reader033.fdocuments.us/reader033/viewer/2022061220/54bb62cd4a795979098b45cb/html5/thumbnails/21.jpg)
Questions?