web fundamentals and html chapter 1

1

WEB FUNDAMENTALS AND HTML

Chapter 1

2

INTRODUCING THE WORLD WIDE WEB

Internet – is a structure made up of million of interconnected computers whose users can communicate with each other and share information.

Network – computers that are linked together

3

WORLD WIDE WEB- also known as the WWW or the Web

- is an organization of files designed around a group of servers on the Internet programmed to handle requests from browser software on users’ PC’s.

- is the fastest growing , most commercially popular technology to date.

TIM BERNERS-LEE – a programmer who wrote a program called a hypertext editor.

Hypertext document – an electronic file that contains elements that you can select, usually by clicking a mouse, to open another document.

4

Web sites – a representation of a company’s product or services available for display via the Web.

Webmaster – a person who is skilled in Web design, Web maintenance and Web upgrade.

Browser – a program designed to search for and bring in Internet resources.

Plug-in – specialized program designed to enhance a function.

5

Web server – is the computer that stores the web document that users access.

Web browser – is the software program that accesses the web document and displays it contents on the user’s computer

Hypertext Markup Language – the language of the Web

Standard Generalized Markup Language – SGML is one example of a more general mark up language

6

Versions of HTML1.HTML 0.0 – the original version

developed by Tim Berners Lee and other researcher at CERN. It has long been supplanted by the succeeding versions of HTML

2.HTML 1.0 – the first public version of HTML, which included support for inline images and text controls. Some browsers, most notably the text-based Lynx browser used on the UNIX system, operates at the 1.0 level

7

3. HTML 2.0 - the version supported by all graphical browsers including Netscape Navigator, Mosaic and Internet Explorer. It supported interactive form elements such as option buttons and text boxes. A document written to follow 2.0 specification would be readable by most browser on the Internet.

4. HTML 3.2 – this version is also referred to as HTML+. It includes more support for creating and formatting tables and expands the option for creating interactive elements. It also allows for the creation of complex mathematical equations.

8

HTML SYNTAX

Syntax – a grammar or set of rules under which HTML operates

Two Elements of HTML document1.Document contents – part of the document that you want the user to see, such as text and graphics

2.Tags – are HTML codes that indicate the document content

9

< > - identification of tag nameClassification of TagTwo sided tags

Opening tag – the first tag, which tells the browser to turn on the feature and apply it to document content that follows.

Closing tag – which turns off the feature </> - symbol to close the tagOne sided tag – also known as single tag Properties – additional information placed

within the bracket that defines the tag’s appearance.

10

CREATING A SIMPLE WEB PAGE

11

CREATING A WEB PAGEStarting a Word Processor1. Before you can begin, you’ll need to choose a program to use to create your HTML documents.

2. Any word processor will work3. WordPad is a good starting point if you’re not sure which program to use

4. Your Task: Start WordPad

12

The Empty Word Processing Document

13

All HTML Documents Have the Same Structure

<HTML>T The first 6 tags are always

the same in basic HTML document.

Also known as HTML Headings

.

<TITLE>

Online Resume</TITLE>

</HEAD>

D>

<HEAD>

</HTML>

</HTML>

<TITLE>

14

Parts of Web Page1. HTML - tags indicate codes is written in HTML

<HTML> </HTML>

2. Head – surround information about web page- Info about the documentInfo in header not generally rendered in display window

<Head> </Head>3. Title – tags identify title. It usually appears on the title

bar- name of your Web page

<Title> </Title>

15

4. Body – tags surround the portion of the document that appears in the browser

- Page content - Includes text, images, links, forms, etc. - Elements include backgrounds, link colors and font faces

<Body> </Body>

16

Common Body Tags/Syntax in Creating a Web Page

17

Creating Heading Tags

HTML has 6 levels of heading which arrange from biggest to smallest size

<H1> My Resume </H1><H2> My Resume </H2><H3> My Resume </H3><H4> My Resume </H4><H5> My Resume </H5><H6> My Resume </H6>

18

CREATING HEADING TAGSHeadings <H1...H6>

<HTML>

<HEAD>

<TITLE>Online Resume</TITLE>

</HEAD>

<BODY>

<H1>My Resume</H1>

<H2>My Resume</H2>

<H3>My Resume</H3>

<H4>My Resume</H4>

<H5>My Resume</H5>

<H6>My Resume</H6>

</BODY>

</HTML>

19

Entering Paragraph Text

<p> - P element forms a paragraph, blank line before and after

- adds an extra line before text to separate it from any text that proceeds it.</p> to close the paragraph tag

20

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

The <br /> element is an empty HTML element. It has no end tag.<br> or <br />

21

Saving a new HTML Document

1. Pull down the File menu and select save As

2. You will now see the Save As dialog box

3. Once you’ve determined the location for the file, you will need to give the file name. There are some rules to follow when naming HTML files:

No spaces, and special characters a (é,%,#....)

No very long name

Generally, keep the file names all lower case.

All file names must end with the extension of .htm or html

22

After Saving the Document, you should see the name of the document at the top of your WordPad window

In this case, the file is called index. You will not see the extension of .html and that is to be expected.

23

Previewing a Local HTML Document

Go to the local folder and double clic on the index.htm file This will open the index.htm in your default internet bowser (Netscape or MS internet explorer)

24

BACKGROUND COLOR

25

Background Colors<HTML>

<HEAD>

<TITLE>Backgrounds</TITLE>

</HEAD>

<BODY BGCOLOR="#0000FF">

This page has a blue background.

<P>

</BODY>

</HTML>

26

HTML COLOR CODES

27

000000 000000 000000 000000 000000 000000 000000

111111 110000 111100 001100 001111 000011 110011

222222 220000 222200 002200 002222 000022 220022

333333 330000 333300 003300 003333 000033 330033

444444 440000 444400 004400 004444 000044 440044

555555 550000 555500 005500 005555 000055 550055

666666 660000 666600 006600 006666 000066 660066

777777 770000 777700 007700 007777 000077 770077

888888 880000 888800 008800 008888 000088 880088

999999 990000 999900 009900 009999 000099 990099

AAAAAA AA0000 AAAA00 00AA00 00AAAA 0000AA AA00AA

BBBBBB BB0000 BBBB00 00BB00 00BBBB 0000BB BB00BB

CCCCCC CC0000 CCCC00 00CC00 00CCCC 0000CC CC00CC

DDDDDD DD0000 DDDD00 00DD00 00DDDD 0000DD DD00DD

EEEEEE EE0000 EEEE00 00EE00 00EEEE 0000EE EE00EE

FFFFFF FF0000 FFFF00 00FF00 00FFFF 0000FF FF00FF

28

00FF80 80FF00 8000FF 0080FF FF8000 FF0080

11FF80 80FF11 8011FF 1180FF FF8011 FF1180

22FF80 80FF22 8022FF 2280FF FF8022 FF2280

33FF80 80FF33 8033FF 3380FF FF8033 FF3380

44FF80 80FF44 8044FF 4480FF FF8044 FF4480

55FF80 80FF55 8055FF 5580FF FF8055 FF5580

66FF80 80FF66 8066FF 6680FF FF8066 FF6680

77FF80 80FF77 8077FF 7780FF FF8077 FF7780

88FF80 80FF88 8088FF 8880FF FF8088 FF8880

99FF80 80FF99 8099FF 9980FF FF8099 FF9980

AAFF80 80FFAA 80AAFF AA80FF FF80AA FFAA80

BBFF80 80FFBB 80BBFF BB80FF FF80BB FFBB80

CCFF80 80FFCC 80CCFF CC80FF FF80CC FFCC80

DDFF80 80FFDD 80DDFF DD80FF FF80DD FFDD80

EEFF80 80FFEE 80EEFF EE80FF FF80EE FFEE80

FFFF80 80FFFF 80FFFF FF80FF FF80FF FFFF80

29

800080 808000 008080 400040 404000 004040

801180 808011 118080 401140 404011 114040

802280 808022 228080 402240 404022 224040

803380 808033 338080 403340 404033 334040

804480 808044 448080 404440 404044 444040

805580 808055 558080 405540 404055 554040

806680 808066 668080 406640 404066 664040

807780 808077 778080 407740 404077 774040

808880 808088 888080 408840 404088 884040

809980 808099 998080 409940 404099 994040

80AA80 8080AA AA8080 40AA40 4040AA AA4040

80BB80 8080BB BB8080 40BB40 4040BB BB4040

80CC80 8080CC CC8080 40CC40 4040CC CC4040

80DD80 8080DD DD8080 40DD40 4040DD DD4040

80EE80 8080EE EE8080 40EE40 4040EE EE4040

80FF80 8080FF FF8080 40FF40 4040FF FF4040

30

66FF00 66FF33 66FF66 66FF99 66FFDD 66FFFF

990000 990033 990066 990099 9900DD 9900FF

993300 993333 993366 993399 9933DD 9933FF

996600 996633 996666 996699 9966DD 9966FF

999900 999933 999966 999999 9999DD 9999FF

99DD00 99DD33 99DD66 99DD99 99DDDD 99DDFF

99FF00 99FF33 99FF66 99FF99 99FFDD 99FFFF

DD0000 DD0033 DD0066 DD0099 DD00DD DD00FF




DDDD00 DDDD33 DDDD66 DDDD99 DDDDDD DDDDFF

DDFF00 DDFF33 DDFF66 DDFF99 DDFFDD DDFFFF

FF0000 FF0033 FF0066 FF0099 FF00DD FF00FF




FFDD00 FFDD33 FFDD66 FFDD99 FFDDDD FFDDFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFDD FFFFFF

31

Character Formatting<CENTER>Centering</CENTER><HTML><HEAD><TITLE>The Moroccan NODC, Rabat</TITLE></HEAD><BODY>

<CENTER><H1>Welcome to The Moroccan

National Oceanographic Data Center – Odinafrica - Rabat

</H1></CENTER></BODY>

</HTML>

32

Character Formatting<B> Bold </B> & <I> Italics </I>

<BR> - The Break Tag<HTML><HEAD><TITLE>The Moroccan NODC, Rabat</TITLE></HEAD><BODY><CENTER>

<H1>Welcome to The Moroccan National Oceanographic Data Center – Odinafrica - Rabat

</H1></CENTER>

</BODY></HTML>

<H3>Contact Information</H3><B>CNDIO Maroc</B><BR>

PO Box 1014-Avenue Ibn Batouta, Rabat Maroc <BR>

Téléphone : (212). 37. 67. 59. 09 <BR>

Fax : (212). 37 67 59 09 <BR>

33

FORMATTING TEXT WITH <FONT>

FONT elementAdd color and formatting to textFONT attributes:

COLOR Preset or hex color codeValue in quotation marksNote: you can set font color for whole document using TEXT attribute in BODY element

34

FORMATTING TEXT WITH <FONT> SIZE

To make text larger, set SIZE = “+x”To make text smaller, set SIZE = “-x”x is the number of font point sizes

FACEFont of the text you are formattingBe careful to use common fonts like Times, Arial, Courier and Helvetica

Browser will display default if unable to display specified font

Example<FONT COLOR = “red” SIZE = “+1” FACE = “Arial”>…</FONT>

35

SPECIAL CHARACTERS, HORIZONTAL RULES AND MORE LINE BREAKS Special characters

Inserted in code formFormat always &code;

Ex. & Insert an ampersand

Codes often abbreviated forms of the character

Codes can be in hex formEx. & to insert an ampersand

Strikethrough with DEL element Superscript: SUP element Subscript: SUB element

36

TEXT STYLING Underline style

<U>…</U> Align elements with ALIGN attribute

right, left or center Close nested tags in the reverse order from which

they were opened Emphasis (italics) style

<EM>…</EM> Strong (bold) style

<STRONG>…</STRONG> <B> and <I> tags deprecated

Overstep boundary between content and presentation

37

Character Formatting<CENTER>Centering</CENTER>

<HTML><HEAD><TITLE>The Moroccan NODC, Rabat</TITLE></HEAD><BODY><CENTER>

<H1>Welcome to The Moroccan National Oceanographic Data Center – Odinafrica - Rabat

</H1></CENTER></BODY></HTML>

38

Attribute Example Purpose

size="number" size="2"Defines the font size

size="+number" size="+1"Increases the font size

size="-number" size="-1"Decreases the font size

face="face-name" face="Times"Defines the font-name

color="color-value" color="#eeff00"Defines the font color

color="color-name" color="red"Defines the font color

39

INSERTING HORIZONTAL LINES

40

HTML Rules (Lines)

The <hr /> tag is used to create an horizontal rule (line).Example<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>

41

Horizontal rule<HR> tagInserts a line break directly below itHR attributes:

WIDTHAdjusts the width of the ruleEither a number (in pixels) or a percentage

SIZEDetermines the height of the horizontal ruleIn pixels

ALIGNEither left, right or center

NOSHADEEliminates default shading effect and displays horizontal rule as a solid-color bar

42

Text Styling Underline style

<U>…</U> Align elements with ALIGN attribute

right, left or center Close nested tags in the reverse order from

which they were opened Emphasis (italics) style

<EM>…</EM> Strong (bold) style

<STRONG>…</STRONG> <B> and <I> tags deprecated

Overstep boundary between content and presentation

43

Three Kinds of lists

1.Ordered list – is a list in numeric order

<OL> - ordered list </OL><LI> - list items

2.Unordered list – is one in which list items have no particular order

<UL> - unordered list </UL><LI> - list items

3.Definition list – is a list of terms, each followed by a definition line, usually indented slightly to the right.<DL> - definition list </DL>

<DT>- tag used for each term in the list<DD> - tag used for each term’s definition

44

Inserting a Graphic Image

45

Two graphic types of inline images

Inline Graphics – appear directly on the web page.

1.GIF - Graphics Interchange Format – common2.JPEG – Joint Photographic Expert Group – need to convert

External Image – not displayed with the web page, need a file viewer to display.

46

CREATING A HYPERTEXT DOCUMENT

47

Destination – a hypertext document contains links that you can select, usually by clicking a mouse, to instantly view another topic or document.

Creating Anchors

<A> - tag creates an anchor, text that is specially marked so you can link to it from other pointsin the document.

<A Name = “EMP”>Employment</A><Name = “PHOTO”>IMG SRC=“Taylor.gif></A>

48

<A HREF = “EMP”> EMPLOYMENT</A>

Link tags – tags that create links

HREF – Hypertext REFerence- refer to an anchor that you place in

the document.

“#anchor_name” refers to that anchor with a pound (#)symbol.

49

Attributes:SRC = “location”HEIGHT (in pixels)WIDTH (in pixels)BORDER (black by default)ALT (text description for browsers that have images turned off or cannot view images)

50

Designing a Web Page with Tables

Two ways to insert table on a web page

1.Text table – it contains only text, evenly spaced out on the page in row and columns

51

Web Page Structures

52

System – is a set of pages, usually created by the same person or group, that treat the same topic and that have the same loo

web fundamentals and html chapter 1

Education