HTML

1
?? ???? ?? ?????? ???????
???? ???
?????? ?? ???? ? ????? ????? HTML
2
??????? ? ???? ? ????

• What is the Internet?
• The Internet is a connection of all worldwide
  networks using the same network communication
  protocol.
• What is the Web?
• The Web is a term that is used to refer to the
  many files that are written in HTML. HTML allows
  users to view text, graphic, video, sound, etc.
  The World Wide Web (www) enables you to access
  documents linked across the Internet.
• What is HTML?
• HTML (Hypertext Markup Language) is a set of
  special codes embedded in text which add
  formatting and linking information. HTML
  consists of tags inserted by the user which
  enable the production of the WEB page on the
  Internet. For example, in the statement
  ltBgtSamplelt/bgt, the ltBgt indicates the start of
  bold and the lt/bgt indicates the ending of the
  bold.
• What is a browser?
• A browser is software that allows you to view or
  browse an HTML document, i.e., Netscape.
• Do I need a special software package to write my
  HTML file?
• No, you can use any text editor or word processor
  to write your HTML code. One of the most popular
  ones is Microsoft Notepad, which can be found
  under START, PROGRAMS, ACCESSORIES using Windows
  95.

3
???? ?? ?? (Web Page) ???? ?? ??? ?? ?? ???? ??
?????? ?? ???? ????? ??? ?? ?? ???? ?? ????????.
???? ?? ?? ??? ?? ???? ???? ??? ?? ???????? ????
?????? ?? ?? ????. ??? ??????? ?? TAG ?? ?????
?????? ???????? ?????? ????? ???? ? ?????? ?? ??
?? ???? ?? ????? ???????.
????? ?? ???? ??
Web Browser
Source Code (HTML)
Design View (Preview)
HTML Hypertext Markup Language Hypertext text
containing links to other texts
4
???? ????? ???? ??
Save As HTML
Browse by a browser
5
HTML Basic
HTML ElementsHTML Basic TagsHTML
FormattingHTML EntitiesHTML LinksHTML
FramesHTML TablesHTML ListsHTML FormsHTML
ImagesHTML Background
6
HTML Advanced
HTML LayoutHTML FontsHTML 4.0 WhyHTML
StylesHTML HeadHTML MetaHTML URLsHTML
ScriptsHTML Web server
7
????? ?? ??? HTML
lthtmlgt ltheadgt lttitlegt My name is A. N.
lt/titlegt lt/headgt ltbodygt This is some text
that will appear on the web page.
lt/bodygt lt/htmlgt
8
Tag Attributes

• ltbody bgcolorVALUE"gt
• Attribute values should always be enclosed in
  quotes. Double style quotes are the most common,
  but single style quotes are also allowed.

lt!-- XXXXXX--gt . The comment tag is used to
insert a comment in the HTML source code. A
comment will be ignored by the browser. You can
use comments to explain your code, which can help
you when you edit the source code at a later date.
9
Some Common Tags HTML Tag Close
Tag Meaning ltHTMLgt lt/htmlgt Defines a
Web-formatted document ltHEADgt lt/headgt Defines
heading section of document ltTITLEgt lt/titlegt Tit
le of page ltBODYgt lt/bodygt Defines the body of
the HTML page ltBRgt none Line break/one carriage
return ltHRgt none Horizontal line ltCENTERgt lt/cent
ergt Places text within the center of a
line ltPgt none Paragraph breaks two carriage
returns
10
Some More Tags HTML Tag Close
Tag Meaning ltHngt lt/hngt Document header level
(n1-6) ltBgt lt/bgt Bold ltIgt lt/igt Italics ltUgt lt/
ugt Underline ltTTgt lt/ttgt Teletype
text Lists ltOLgt lt/olgt Ordered (numbered)
list ltULgt lt/ulgt Unordered (bulleted)
list ltLIgt none List item ltDLgt lt/dlgt Creates a
glossary list ltDTgt none Defined term in a
glossary list ltDDgt none Definition in a
glossary list
11
?????? ?? ???????? ? ????????? ?????

• Link Tags
• lta hrefhttp//www.google.com/gt This is a link
  to somewhere lt/agt
• Image Tags
• ltimg srchttp//www.iums.ac.ir/hello.jpggt
  lt/imggt
• Markup tags
• ltbgt This text will be bold lt/bgt
• And this is ltugt underlined lt/ugt

12
Text Format, Cont.Below is an example in Notepad
and Netscape of using headings, fonts, and lists.
13
Page Format
Below is a partial list of different tags for
formatting a page. You can change the color of
the background, text and links. You can also
change fonts. rrggbb indicates the amount of
red, green and blue in a certain color ranging
from the number 0 to the letter F. For example,
000000black, while FF0000red.
Tag Meaning ltBASEFONT SIZEngt Changes the
default font size throughout the page to
the specified size (range 1-7). ltBODYgt
bgcolorrrggbb Specifies background color
for the page. backgroundfile Uses the
specified file as the background image on
page textrrggbb Sets text in specific
color. ltFONTgtlt/fontgt facefont name Defines
the font of the text. sizen Specifies size
of font (range 1-7). colorcolor Changes the
font color. ltHRgt Horizontal
line noshade Makes line solid
black sizen Sets the height of horizontal
line. widthn Sets the width of line
n0-100 colorrrggbb Specifies the color of
the line.
14
Page Format

• Below are examples using different colors and
  fonts.
• In Notepad
• In Netscape

15
Adding Links

• As a hypertext system, HTML allows you to link
  portions of a document to other locations that
  can be in either the same document or other
  documents. When a Web browser sees a link, it
  signals the available links to the user by
  underlining or coloring the link region. The
  link markup tag in HTML is ltAgt (denoting
  anchor). This is followed by the URL of the
  destination document. You can also include a
  link to your e-mail. This is done by using the
  URL tag, mailto and then your e-mail address. To
  add a link follow these steps
• Begin your anchor with ltA. Dont forget the
  space after the A.
• Enter the URL of the destination document by
  typing HREFURL (HREF stands for hyper
  reference.
• Enter gt.
• Enter the text that serves as the name or pointer
  to the destination document.
• Enter the closing container tag, lt/agt.
• HTML Tag Close tag Meaning
• ltAgt lt/agt Defines an anchor for the link.
• HREFurl address Gives the destination of
  the link using
• its URL
• mailtoe-mail address Identifies address
  where e-mail will be sent
• ltBODY LINKrrggbbgt Sets the color of the link.
• ltBODY ALINKrrggbbgt Sets the color of the
  active link.
• ltBODY VLINKrrggbbgt Sets the color of the
  visited link.

16
Adding links, cont.

• Below is what your Notepad document would look
  like if you were to add Suffolks Web page and
  your e-mail address to your Web page.
• This is what it will
• look like in Netscape.

17
Tables

• Within HTML language, you are able to construct
  tables. Below are the tags used to create tables.
• HTML Tag Close Tag Meaning
• ltTABLEgt lt/tablegt Defines the start and end of
  a table
• border Displays the lines within a table.
• alignleft, center or right Defines the
  position of the table on the page.
• widthn Width of entire table on the page
  n0-100.
• ltTRgt lt/trgt Defines the start and end of a row.
• ltTDgt lt/tdgt Defines the start and end of a data
  table entry.
• Alignleft, center, right Aligns entries in a
  row.
• Below are examples in Notepad and Netscape

18
Adding Images

• Including images in your Web document is very
  easy with the ltIMGgt (image) format tag. The two
  formats supported by HTML are GIF, CompuServes
  Graphics Interchange Format and JPEG, the
  industry-standard Joint Photographic Expert Group
  format. The HTML tag that you use to place a
  graphic image is the Image tag ltIMGgt. It is used
  along with the source attribute (SRC), which is a
  reference to the location of the image file. To
  place an image on a Web page follow these steps
• Type ltIMG SRCfilename.gif or .jpeg
• Type a closing angle bracket (gt)
• You can also modify the image on your web page.
  Below are tags and descriptions for adding images
  and modifying images to you Web page.
• HTML Tag Meaning
• ltIMGgt Includes an inline image
• srcgraphic filename Filename of the image
• align left, right, top, middle or
  bottom Determines the alignment of a graphic
  image,
• and how the text around it will align.
• alttext Text description of the image
• bordern Size of picture border
• heightn Fixed height of image
• widthn Fixed width of image

19
Images, Cont.
Here are examples of using images in Notepad and
Netscape.
20
HTML Quick Reference

• Tag Definition
• Structure Tags
• ltHTMLgtlt/htmlgt Marks beginning and end of html
  document
• ltHEADgtlt/headgt Marks beginning and end of the
  header
• ltTITLEgtlt/titlegt Identifies the title of
  document
• ltBODYgtlt/bodygt Marks the beginning and end of
  the body
• background Specifies image for background
• bgcolorcolor Specifies color for background
• textcolor Specifies color for text
• linkcolor Specifies color for unvisited
  links
• alinkcolor The color briefly seen when
  linked is clicked
• vlinkcolor The color of visited links
• Paragraphs and Text Dividers
• ltBRgt Inserts a line break
• ltPgt Paragraph break
• aligncenter, left or right Aligns paragraph
• ltHRgt Adds a horizontal line

21

• Tags Definition
• ltIgtlt/igt Text is in italics
• ltFONTgtlt/fontgt
• sizen Changes the font size range is 1-7.
• colorcolor Changes the font color
• facefont name Changes the font style
• ltMARQUEEgtlt/marqueegt(Internet Explorer) Inserts a
  marquee of moving text
• alignleft, right, center, bottom, top,
  middle Alignment of text surrounding marquee
• behaviorscroll, slide alternate How the text
  moves
• bgcolorcolor Background color of the marquee
• directionleft, right Direction of text
  scrolls
• heightn Height of the marquee
• widthn Width of the marquee
• loopn Scrolls the marquee n times
• ltSgtlt/sgt Puts text in a strikethrough font
• ltSMALLgtlt/smallgt Text is a small-print font
• ltSUBgtlt/subgt Text is in subscript
• ltSUPgtlt/supgt Text is in superscript

22

• Tags Definition
• Lists
• ltOLgtlt/olgt Creates an numbered list
• typeA, a, I, i, or 1 Specifies type of
  numbering
• startn Starting number of list
• ltULgtlt/ulgt Creates a bulleted list
• typecircle, disc or square Specifies type of
  bullet
• ltLIgt Identifies a list item
• ltDLgtlt/dlgt Creates glossary list
• ltDTgt Defined term in a glossary list
• ltDDgt Definition in a glossary list
• Hyperlinks
• ltAgtlt/agt Defines an anchor for a link
• HREFurl URL of the document where the link
  points
• mailto Used to create link to an e-mail
  address
• namename Defines an anchor location in a
  document

23
HTML Color Table

• Color rrggbb Color rrggbb
• White FFFFFF Light Green 32CD32
• Red FF0000 Maroon 8E236B
• Green 00FF00 Medium Blue 3232CD
• Blue 0000FF Navy Blue 23238E
• Yellow FFFF00 Neon Blue 4D4DFF
• Black 000000 Neon Pink FF6EC7
• Blue Violet 9F5F9F Orchid DB70DB
• Orange FF7F00 Pale Green 8FBC8F
• Brown A62AA2 Pink BC8F8F
• Dark Green 2F4F2F Plum EAADEA
• Dark Brown 5C4033 Scarlet 8C1717
• Dark Purple 871F78 Sea Green 238E68
• Dark Slate Blue 6B238E Sky Blue 3299CC
• Dusty Rose 856363 Slate Blue 007FFF
• Forest Green 238E23 Summer Sky 38BODE
• Gold CD7F32 Tan DB9370
• Gray C0C0C0 Turquoise ADEAEA
• Hunter Green 215E21 Violet 4F2F4F

24

Special Characters (" lt gt etc)
quot
Hello,
quot
lt/pgt
ltpgt
she said.
pound
1.99 only
lt/pgt
ltpgt
eacute
r
sum
eacute
lt/pgt
ltpgt
gt
lt
,
and
amp
are special in HTML
ltpgt
lt/pgt
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
(No Transcript)