lecture 3 creating a web page with html. objectives §hypertext document in www p1.4-1.5 §the html...
TRANSCRIPT
![Page 1: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/1.jpg)
Lecture 3Creating a Web Page with HTML
![Page 2: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/2.jpg)
ObjectivesHypertext Document in WWW p1.4-1.5The HTML language p.1.8-1.10
Definition Web browsers and HTML Versions of HTML Tools for creating HTML documents HTML syntax Examples of HTML tags Basic tags
![Page 3: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/3.jpg)
Objectives (con’t)Creating: p.1.11-1.34
• Headings• Paragraphs • Lists• Character tags• Special characters• Horizontal lines• Graphic images
Exercises
![Page 4: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/4.jpg)
Hypertext Document in WWW
A hypertext document is an electronic file that contains elements that a user can select, usually by clicking a mouse, to open another document.
Liner VS. hypertext document
![Page 5: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/5.jpg)
Hypertext Markup Language (HTML)Definition: Language used to create and
format Web pages, using a set of special codes, called tags
HTML doesn’t describe how text looksHTML uses a code that describes the
function the text has
![Page 6: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/6.jpg)
Web browser & HTML
A Web browser interprets the codes to determine a document’s appearance
Different browsers might display a document differently
![Page 8: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/8.jpg)
Why different browsers display a web document differently ?Portability
different computer platforms different types of fonts supported e.g. Arial, Gothic different I/O devices:
• chunky teletypes• high-end workstations• non visual media such are speech and Braille
Advantage: frees web page authors worrying about compatibility on different computers and operating systems
![Page 9: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/9.jpg)
Why different browsers display a web document differently ? (con’t)
Speed exact specification on how to display
each character dramatically increase• file size
• the time to transfer
![Page 10: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/10.jpg)
Versions of HTMLHTML has a grammar or set of rules called
syntaxThe specifications or standards have been
developed by a consortium of web authors, software companies and interested users (World Wide Web Consortium W3C)
Extensions are supported by some browsers to add new possibilities to HTML
![Page 11: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/11.jpg)
Versions of HTML (con’t)
5 versions of HTML [ref.]
HTML 0.0
HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.01
![Page 12: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/12.jpg)
HTML 4.01 Adds support for style sheets, new features to tables and forms ...
![Page 13: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/13.jpg)
Tools for Creating HTML Documents
HTML documents: text filesTools:
Text editor e.g. MS note pad HTML convertor e.g. MS Word HTML editor Other design tools: MS FrontPage,
Macromedia Dreamweaver
![Page 14: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/14.jpg)
HTML syntax2 elements:
Document content• Parts that the user sees
Tags• HTML codes that indicate the docume
nt content
![Page 15: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/15.jpg)
HTML syntax (con’t)<Tag Name Properties> Document Content </Tag
name>e.g. <H1 ALIGN=CENTER>Mary Taylor<H1>A tag contains
brackets (< >) that enclose the tag name properties (optional)
• additional information that defines the tag’s appearance
Document content: parts the user sees
![Page 16: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/16.jpg)
HTML syntax: Two-side tags
Two-sided tags require both opening and closing tags
e.g.
<H1 ALIGN=CENTRE> Mary Taylor </H1>• opening tag: tells the browser to turn on the
feature and apply it to the document content that follows
• closing tag: turns off the feature
![Page 17: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/17.jpg)
HTML syntax: One-sided tagsrequire only the opening tag e.g. <LI>, <IMG>
<OL><LI>Graduated May, 1996. M.A. International <LI>Grade Point Average: 3.5 overall, 3.9 in major</OL>
<IMG SRC= “Taylor.gif”>
![Page 18: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/18.jpg)
HTML syntax characteristicsTags are NOT case sensitive
H1=h1
HTML ignores extra blank space, blank lines or tabs
![Page 19: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/19.jpg)
HTML syntax characteristics (con’t) The following HTML statements are the
same: <H1>To be or not to be. That is the question.</H1> <H1>To be or not to be. That is the
question.</H1> <H1>To be or not to be. That is the question.</H1>
![Page 20: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/20.jpg)
Examples of HTML tags
![Page 21: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/21.jpg)
Examples of HTML tags (con’t)
![Page 22: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/22.jpg)
Basic Tags (example)
Displayed at the title line
<Head>: surround information about the Web page
<Body>: surround the part that appears in the browser
![Page 23: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/23.jpg)
Example Result: Basic Tags
![Page 24: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/24.jpg)
Creating Headings
6 levels<Hy properties>Heading text</Hy>
where y is a heading numbered 1- 6
![Page 25: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/25.jpg)
Example: Headings
![Page 26: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/26.jpg)
Example: Creating headings
![Page 27: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/27.jpg)
Example Result: Headings in the browser
![Page 28: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/28.jpg)
Creating a paragraphSyntax:
<P>text</P>
![Page 29: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/29.jpg)
Example: paragraph text (no <P> tag)
![Page 30: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/30.jpg)
Example Result: Text Not separated into paragraphs
![Page 31: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/31.jpg)
Example: <P> tag for paragraphs
<P>Satellite Technician (Front Range Media Inc. 1993-1994): Monitored satellite uplink/downlink procedures to assure quality video transmissions. Aided technicians with transmission problem. Associated in the assembly and maintenance of uplink facility.</P>
<P>Technical Assistant(Mountain View Bank 1992-1993):Managed data cessing system. Handled user requests anf\d discussed programming option Managed delivery service</P>
<P>Salesperson(Computer Visions 1991): Sales and customer support in computers and electronics. Managed commercial accounts in Mountain View and Crabtree locations.</P>
![Page 32: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/32.jpg)
Example result: paragraphs with <P> tag
![Page 33: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/33.jpg)
Creating lists: Ordered listList in numeric orderExample:
<OL><LI>Graduated May, 1996. M.A. International Telecommunications<LI>Grade Point Average: 3.5 overall, 3.9 in major<LI>Dean’s List: September 1994-May 1996<LI>Member, Phi Alpha Omega Honor Society </OL>
Result:
1. Graduated May, 1996. M.A. International Telecommunications
2. Grade Point Average: 3.5 overall, 3.9 in major
3. Dean’s List: September 1994-May 1996
4. Member, Phi Alpha Omega Honor Society
![Page 34: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/34.jpg)
Creating list: Unordered listList in which list items have no particular order.Example:
<UL><LI>Graduated May, 1996. M.A. International Telecommunications<LI>Grade Point Average: 3.5 overall, 3.9 in major<LI>Dean’s List: September 1994-May 1996<LI>Member, Phi Alpha Omega Honor Society</UL>
Result: Graduated May, 1996. M.A. International Telecommunications Grade Point Average: 3.5 overall, 3.9 in major Dean’s List: September 1994-May 1996 Member, Phi Alpha Omega Honor Society
![Page 35: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/35.jpg)
Character tagsDefinitions:Character tag: A tag that is applied to an
individual characterLogical tag: Indicates how you want to use
text, not necessarily how want it displayedPhysical tag: Indicates exactly how
characters are to be formatted
![Page 36: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/36.jpg)
Common Logical tagsIt indicates how you want it displayed.
![Page 37: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/37.jpg)
Example: Logical tags
![Page 38: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/38.jpg)
Common Physical tags
![Page 39: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/39.jpg)
Example: Physical Character tags
![Page 40: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/40.jpg)
Example: Applying character tags
![Page 41: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/41.jpg)
Example result: Applying character tags
![Page 42: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/42.jpg)
Special characters
![Page 43: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/43.jpg)
Example: Special characters<H5 ALIGN=CENTER>11 Kemper Ave. &#
183 Lake View, CO 80517 · (303 555-1012</H5>
Result:
![Page 44: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/44.jpg)
Horizontal lines <HR ALIGN=CENTER SIZE=12 WIDTH=100%> <HR ALIGN=CENTER SIZE=6 WIDTH=50%> <HR ALIGN=CENTER SIZE=3 WIDTH =25%> <HR ALIGN=CENTER SIZE=1 WIDTH=10%>
![Page 45: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/45.jpg)
Example: Horizontal lineAfter the end of Mary’s address line, press
Entertype <HR>Result:
![Page 46: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/46.jpg)
Inserting a graphic
Two types Inline image External image
![Page 47: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/47.jpg)
Inline imageappears directly on the Web pageloaded when the page is loaded2 types supported by all browsers:
GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group)
Syntax:
<IMG SRC= “filename”> e.g. <IMG SRC=“Taylor.gif”>
![Page 48: Lecture 3 Creating a Web Page with HTML. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f295503460f94c423f8/html5/thumbnails/48.jpg)
External imageNot displayed with the Web pageBrowser must have a file viewer e.g. Shockwave