Download presentation
Presentation is loading. Please wait.
1
HTML Notes for Self Study
2
What you should know about HTML General Structure of HTML headings, setting style Text, paragraphs, and lists Anchors, Names and Links Images Tables fames and miscellaneous style sheets
3
What is HTML HTML was developed by Tim Berners-Lee of CERN around 1990 HTML is understood by WWW browsers— e.g., Netscape’s Navigator, and Microsoft’s Internet Explorer—which interpret and display the output to the viewer Depends on browsers, same html page may look differently.
4
What is HTML Hypertext Markup Language (HTML) is a language in which one can describe: –The display and format of text –The display of graphics –Pointers to other html files –Pointers to files containing graphics, digitized video and sound –Forms that capture information from the viewer
5
An Example The nine planets of the solar system are mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto. The very nearest star is about 7,000 times farther away than pluto is to our sun. Save this file as example1.txt & as example1.html
6
Browser Output - Example 1 example1.htmlexample1.txt
7
Example 2: Adding Some Markup The nine planets of the solar system are mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto. The very nearest star is about 7,000 times farther away than pluto is to our sun.
8
General Structure HTML documents have a head and body –head should contain a title –body may have paragraphs A leading line indicates which version of HTML this document conforms to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> The Solar System The nine planets of the solar system are...
9
Browsers Are Tolerant Browsers follow the rule of being tolerant of mistakes in the input –They ignore markup they don’t understand Netscape Navigator/Microsoft Internet Explorer are tolerant browsers –They do not insist that the HTML document begin and end with – and/or tags are not required –But, there is no guarantee that this behavior will be the same for all browsers
10
Example - Browsers are Tolerant Suppose the entire document is one line, such as: Text placed between HEAD markers is not normally displayed.
11
HTML Elements and Tags Each element consists of a start tag, content, and an end tag E.g. some text A slash after the “<“ indicates an end tag Some elements do not require end tags, e.g. paragraph tag Some elements do not require content, e.g. horizontal rule tag places a straight line across the page
12
Attributes Elements may have parameters, called attributes Attributes are placed in the start tag before the final ">" Attributes have the form name=value E.g. is the first heading tag Start of Chapter 1 Attribute values are often enclosed in quotes, either double or single Quotes are not required when the value contains only letters, digits, hyphens, and periods. Attribute names are case insensitive, but not necessarily attribute values
13
Comments in HTML Comments start with <!-- and end with --> Comments cannot be nested –Whitespace is permitted between the -- and the closing angle bracket, > –It is not permitted between the opening angle bracket, exclamation point, and the -- E.g. <!-- This is a comment and hence not displayed --> But this will be displayed
14
Example of tag attributes Using inline style settings to set the font size, background and color of text Setting Body Attributes <BODY style="font-size: 20pt; background: green; color: fuchsia"> The nine planets of the solar system...
15
Browser Output - Body Tag Attributes
16
Headings There are six levels of headings: Navigator and Internet Explorer render them left aligned and bold Includes paragraph breaks before and after and sufficient white space to render the heading The Solar System Headings The Solar System
17
Browser Output
18
Text Styling Underline style – … Align elements with ALIGN attribute –right, left or center Close nested tags in the reverse order from which they were opened Emphasis (italics) style – … Strong (bold) style – … and tags deprecated –Overstep boundary between content and presentation
19
Stylizing text on Web pages
20
Formatting Text With SIZE –To make text larger, set SIZE = “+x” –To make text smaller, set SIZE = “-x” –x is the number of font point sizes FACE –Font of the text you are formatting –Be careful to use common fonts like Times, Arial, Courier and Helvetica –Browser will display default if unable to display specified font Example …
21
1 2 3 4 5 6 7 Internet and WWW How to Program - Welcome 8 9 10 11 12 Welcome to Our Web Site! 13 14 15 We have 16designed this site to teach about the wonders of 17 HTML. 18 19 We have been 20using HTML since version 2.0, 21and we enjoy the features that have been added recently. 22 23 It 24seems only a short time ago that we read our first HTML 25book. 26 27 Soon you will 28know about many of the great new feature of HTML 4.0. 29 30 Have Fun With the Site! 31 32 33
22
Using the FONT element to format text
23
Horizontal Rule The tag causes a horizontal line to be drawn; attributes include: –Size, thickness in pixels –Width, either pixels or percent –The default positioning of a line is centered, but that can be overridden with the ALIGN attribute; its options are left, right, and center
24
Example - Horizontal Rule Examples of Horizontal rule Examples of Horizontal Rules Rules of different sizes, SIZE=5, 10, and 25. Rules of different alignment, ALIGN=left, center and right. Rules of different width, width=10%, 25%, and 50%
25
Browser Output
26
Anchors An anchor is a way to designate a link to another document or to a specific place in the same document Begins with and ends with The link location is given by the attribute HREF (Hypertext Reference); e.g., See Class Home Page for a description of the class project Hypertext links are displayed using underlining, color, or highlighting –Depends on the browser defaults or the use of style settings –Once a link is taken, it should change color
27
Example Using Anchors for Naming Welcome to my HTML Tutorial Introduction Chapter 1 Chapter 2... Lots of text here... Introduction: This document contains a short tutorial on how to write HTML.... Chapter 1 In this chapter we learn what a markup language... Chapter 2 In this chapter we learn about anchors and their...
28
Browser Output for Naming
29
Examples of Anchors a file in the same directory and same domain as the current page a file on your local machine in directory G:\351 a file in directory mydocs on machine tlaloc.sfsu.edu, a WWW site the newsgroup computers.compilers opens an an e-mail window for sending a message … Connects to lycos and runs pursuit with three arguments Download RFC1866 An anchor that executes the ftp program to fetch a file
30
Element The IMG element embeds an image in the current document, e.g. Some attributes of include –Align=top, middle, or bottom to align text around an image –border to place a border around an image If set to 1 or higher, places a black box around the image If set to 0, leaves no surrounding box –height and width to control the dimensions of the image –Alt to replace an image with text, if the image is unavailable or a text browser is used; e.g.,
31
Image - Formats Four image formats are always supported by Web browsers –x-bitmaps Commonly found on UNIX workstations Black and white –x-pixelmaps Similar to x-bitmaps, but 8 bits are given to each pixel, permitting 256 colors in the image –Graphic Interchange Format (GIF) images The most common Support black and white, grayscale, and color –Joint Photographic Experts Group (JPEG) image format Designed for photographic images Includes image compression
32
Active Images & Animated GIF Active images are images that can be clicked and, just like an anchor, they act as a hypertext link –Active images have a border around them and the cursor changes shape when passed over Active images can be quite attractive, but remember, some people run line-only browsers, while others have low- bandwidth Internet connections and typically turn off the downloading of images Animated GIF provides a multiframe images in one image file
33
Image Maps Image maps are active images with multiple clickable regions each region can be associated with a specific action (e.g., retrieve a document, run a program, etc.) yahoo.com starts with an image map When the region is activated by the user, e.g. by a mouse click, the action is taken There are two types of image maps: Client-side: the pixel coordinates are interpreted by the browser. Server-side: the pixel coordinates are interpreted by a server-side program.
Similar presentations
