HTML

1

• HTML
• (Hypertext Markup Language )

2
Short history of HTML and World Wide Web

• Before Web, the information exchange through
  Internet was by
• Telnet protocol, which give the client access to
  remote computer
• FTP - File Transfer Protocol, which allows
  exchange of files among the computers, connected
  in the network.
• The base of World Wide Web is done by Tim
  Berners-Lee at 1989

3

• The application software for Internet is based on
  the model client-server. According to this
  model the software is divided on two parts
  software for the client (PC looking for
  information) and for the server (PC delivering
  services). The clients software translates the
  clients query to a type, understandable for the
  server and make a connection with it.
• HTML is a computer language at the clients
  side, which says to the web browser how to
  present the document (web page)

4

• Standardization of HTML
• As HTML has being developed continuously, there
  are a lot of new ideas and elements in it. As a
  result, it was a time when a lot of different
  versions of HTML incompatible with the different
  browsers and their different versions exist.
• A need for standardization of HTML appeared.
• That is why a special organization was created
  - World Wide Web Consortium (www.w3.org),
• All proposals and additions for changing HTML
  are directed to it.

5
Commands in HTML

• The elements of HTML are called tags.
• The name of the tag hints what is the tag
  designed for.
• Usually, the tags are in pairs opening and
  closing tag.
• Between the tags is placed text (usually).
• The result ca be seen by the browser.

6
Syntaxes of the tags

• HTML tags are commands written between less than
  (lt) and greater than (gt) signs, also known as
  angle brackets that indicate how the browser
  should display the text.
• ltname_ of_ taggt Text between the opening and
  closing tag
• lt/name_ of_ taggt
• Example ltBgtVacationlt/Bgt
• The browser presents at the monitor
  Vacation

7

• lthtmlgt is the command, obligatory for all
  HTML-documents.
• The end of the HTML-document is lt/htmlgt
• More of the HTML tags have attributes with
  values.
• Please notice
• You have the possibility to write in your native
  language (if it is not English) in the HTML
  document, however the tags and attributes are
  always in Latin alphabet.
• Between the text of the commands and angle
  brackets you should not leave a space. There is a
  space between the tags attributes.

8

• Creating HTML document
• To create a HTML- document you need any text
  editor.
• As more of them put additional information, which
  make the editing later hard, use the simplest
  one Notepad, which is a part of Windows and can
  be open from "Start" (bottom, at left of the
  monitor) and choose "Programs"--gt"Accessories"--
  gt"Notepad".

9

• When you open Notepad,
• please write something, for instance
  lthtmlgtHere is my first HTML-page!lt/htmlgt Then
  save the file from the menu "File of Notepad
  choose "Save As" and write the name of your first
  HTML-page index.html (or index.htm)
• The first page of nearly each Internet site is
  named index.html or index.htm
• The browser will distinguish it as a first page
  and it will open the site only if it has the name
  index.html or index.htm.

10
Structure of HTML

• The beginning and the end of the HTML document
  are lthtmlgt and lt/htmlgt
• Between these tags are the both main parts of the
  HTML document.
• The first part is HEAD, the second - BODY.
  These two parts of the HTML-document have
  opening and closing tags.
• One typical HTML document looks likelthtmlgt
  ltheadgt lt/headgt ltbodygt lt/bodygtlt/htmlgt

11

• Nesting tags
• You can use simultaneously more than one tag. For
  instance, you can want to format your text using
  bold, italic and underline. Order for opening and
  closing tags is very important. The first opened
  tag must be closed last. The last open tag must
  be closed first.
• HEAD
• HEAD begins just after the first tag lthtmlgt.
• Title
• The HTML document must have a title.
• lttitlegt The written between these two tags in
  some browsers appears in the title bar of the
  window, in others at the top of the screen
  lt/titlegt
• ExampleThe HEAD section including the title
  looks likeltheadgtlttitlegt Stoilova
  lt/titlegtlt/headgt

12
Content of section HEAD ???? tags

• META tags are elements of HEAD ???? tags are
  very important and useful instrument because you
  can advertise your site, so that the search
  indexes can find it among the huge amount of
  information in Internet.
• Meta tags are two groups
• ???? tags, including the attribute HTTP-EQUIV and
  the attribute CONTENT. These Meta tags have the
  following format ltmeta http-equivname"
  contentcontent" /gt ???? tags with attributes
  HTTP-EQUIV are used for managing the action of
  the browsers.

lt meta http-equiv "Content-Type" content
"text/html charsetwindows-1251"gt
13

• ???? tags containing the attribute NAME and
  attribute CONTENT. They have the form ltmeta
  namename" contentcontent" /gt ???? tags with
  attributes NAME are used for giving information
  to search indexes
• Typical of the ???? tags is that they have
  opening tagltMETAgt, but they have not closing tag
  lt/METAgt.
• According to the requirements of XHTML all tags
  have to have closing tags. This is the reason at
  the end of ???? tags to write / before gt.

14
BODY

• Just after HEAD section begins BODY section.
• Tag ltbodygt can contain several attributes (they
  are not obligatory), which determine the view of
  the HTML page. These attributes are
• bgcolor (background color of the page)
• background (image as a background)
• text
• link, alink ? vlink (colors of the hyperlinks)

15
Attributes of BODY section bgcolor (background
color of the page)

• The attribute bgcolor determine the background
  color of the page.
• ltbody bgcolorthe color of the page in
  English"gt If you want your page to have black
  background, you have to write the following code
  ltbody bgcolor"black"gt For yellow background
  ltbody bgcolor"yellow"gt
• etc.

16
Attributes of BODY section background (image
as background)

• The background of the HTML-page, except color,
  can be used an image.
• If you want your page to have as a background
  the image picture.jpg, you have to write the
  code
• ltbody background"picture.jpg"gt

17
Attributes of BODY section text

• Using the text attribute you can give a color of
  the pages text. The coding is similar to the
  background color. If you want blue text, for
  example, you have to write ltbody text"blue"gt
  Text is black by default.

18
Attributes of BODY section link, alink ?
vlink

• Attribute link shows the color of texts
  hyperlinks of the HTML-document (unvisited
  hyperlinks )
• ltbody link"green"gt
• Attribute alink determines the color of the
  hyperlink on clicking by the mouse.
• Attribute vlink determines the color of the
  visited hyperlinks.
• Example
• ltbody link"green" alinkyellow vlinkbrowngt
  

19

• Example of using the attributes of BODY tagWe
  want to create a page with black background,
  white text, blue color of unvisited hyperlinks,
  green color of visited hyperlinks, yellow color
  on clicking. The code is
• ltbody bgcolor"black" text"white" link"blue"
  alink"yellow" vlink"green"gt None of the above
  attribute is not obligatory!
• By default
• The page background is white
• The text color is black
• The unvisited hyperlinks color is blue
• The visited hyperlinks color is violet
• (if there are not done any other settings of the
  browser)

20
TEXT formatting in HTML

• Tag ltfontgt
• In contrast to the command ltbodygt, ltfontgt is used
  always with attributes.
• The attributes of ltfontgt are face, size and
  color.

21
Attributes of FONT face (type of the font)

• The type of the font is determined by the code
• ltfont faceFonts name"gtHere is written the
  textlt/fontgt
• There are two main and often used fonts - times
  new roman and arial.
• The font of this page is arial ltfont
  face"arial"gtThis is text, written in
  arial.lt/fontgt The effect at the browsers
  screen is This is text, written in arial.
• The other popular font is times new roman
  ltfont face"times new roman"gt This is text,
  written in times new roman.lt/fontgt The effect
  at the browsers screen is This is text, written
  in times new roman.
• Usually, the font times new roman is given by
  default.

22

• Important for the fonts the same or similar
  fonts have different names in the different
  computer systems. That is why it is good to
  include not only one but several similar fonts,
  divided by commas. This increase the clients
  chance to see the text as you want.
• ltfont face"arial, helvetica, verdana,
  sans-sherif"gt???? ? ?????, ??????? ?? arial,
  helvetica, verdana, sans-sherif.lt/fontgt ltfont
  face"times new roman, georgia, timoku"gt???? ?
  ?????, ??????? ?? times new roman, georgia,
  timoku.lt/fontgt

23
Attributes of FONT tag size (fonts size)

• ltfont sizedigit from 1 to 7"gtThe text is
  written herelt/fontgt
• ltfont size"2"gtThis is text with size 2lt/fontgt
  Text written by arial font with different
  size is the following This is text with size 1
  This is text with size 2 This is text with
  size 3 This is text with size 4 This is text
  with size 5 This is text with size 6 This is
  text with size 7

24

• You can use not only absolute but relative size
  as well
• ltfont size"-1"gt This text has a size less of
  those by default with 1.lt/fontgt For text bigger
  of those by default with 1 use
• ltfont size"1"gt???? ? ????? ? ???? ??????
  ??-????? ?? ????????????? ??.lt/fontgt
• This is the size of the text less than those by
  default with 2. This is the size of the text
  less than those by default with 1. This is the
  size of the text by default. This is the size
  of the text bigger of those by default with 1.

25
Command for titles lthgt

• There is a special command for creating titles in
  HTML - lthgt together with digits from 1 to 6
  (included). It has closing tag - lt/hgt, which has
  to have the same digit .
• Example lth2gt This is a title with size 2lt/h2gt
  The usage of lthgt automatically adds empty row
  above and bellow of the texts title.
• The titles are in the form
• This is a title with size 1
• This is a title with size 2
• This is a title with size 3
• This is a title with size 4
• This is a title with size 5
• This is a title with size 6

26
Attributes for tag FONT color (fonts color)

• Giving a color of the text becomes by assigning a
  value to the color attribute, for example
  ltfont color"blue"gtThis is blue textlt/fontgt
  ltfont color"green"gtThis is green textlt/fontgt
  etc Example for usage of
  attributes of Font tag
• ltfont face"arial, helvetica, verdana,
  sans-sherif" size"4" color"blue"gtThis is text
  in arial font and its similar with size 4, blue
  colorlt/fontgt

27
Instruments for additional influence to the text
view

• The main instruments for influence of the text
  view are the tags ltbgt, ltigt and ltugt. Each of them
  has closing tag
• ltbgt text bold lt/bgt
• ltigt text italic lt/igt
• ltugt underline text lt u gt
• Examples
• ltbgt ltigt ltugtThis text is at the same time bold,
  italic and underline lt/ugt lt/igt lt/bgt
• Wrong (the principle of nesting tags is not
  correct)
• ltbgt ltigt lt This text is at the same time bold,
  italic and underline lt/igt lt/bgt lt/ugt

28
Other possibilities for changing the texts view

• ltstronggt The text is bold like using the tag
  ltbgtlt/stronggt
• ltinsgtThe text is underline, similar to
  tagltugtlt/insgt
• ltemgtShows the text italic like tag ltigt lt/emgt
• ltcitegtShows the text italic like tag ltigtlt/citegt
• ltdfngtShows the text italic like tag ltigtlt/dfngt
• ltvargtShows the text italic like tag ltigtlt/vargt
• ltbiggtIncrease the font size with 1 after each
  usage of the taglt/biggt
• ltsmallgtDecrease the font size with 1 after each
  usage of the taglt/smallgt
• ltstrikegtStrike the textlt/strikegt
• ltsgtStrike the textlt/sgt
• ltsupgtWrite the text like supreme indiceslt/supgt
• ltsubgt Write the text like sub indices lt/subgt

29
????? ??????????? ?? ????????? ?? ???? ?? ??????

• ltttgtThe text is like using typewriter, similar to
  font Courierlt/ttgt
• ltcodegtThe text is like using typewriter, similar
  to font Courierlt/codegt
• ltsampgtThe text is like using typewriter similar
  to font Courierlt/sampgt
• ltkbdgtThe text is like using typewriter similar to
  font Courierlt/kbdgt
• ltacronymgt lt/acronymgt This tag is not used by
  graphical browsers but only by audio-browsers
  where cause spelling each word.

30
Disposal of text on the page and text alignment

• New paragraph ltpgt lt/pgt
• Go to next row ltbrgt
• Margin of block text
• ltblockquotegt lt/blockquotegt
• Using preformatted text ltpregt lt/pregt
• Leaving larger space nbsp
• nbsp does not allow dividing two words to the
  next row

31
Disposal of text on the page and text alignment

• Text alignment in left, right, center
• ltdivgt lt/divgt ltdiv align"left"gt ltdiv
  align"right"gt ltdiv align"center"gt
• ltcentergt lt/centergt
• Text alignment in left and right simultaneously
• ltdiv align"justify"gt text lt/divgt
• ltp align"justify"gtText of paragraphlt/pgt
• lth2 align"center"gtText of titlelt/h2gt