1 / 31

HTML ( Hypertext Markup Language )

HTML ( Hypertext Markup Language ). 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;

rollin
Download Presentation

HTML ( Hypertext Markup Language )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML (Hypertext Markup Language )

  2. Short history of HTML and World Wide Web Before Web, the information exchange through Internet wasby: • 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 softwarefor 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 client’s software translates the client’s query to a type, understandable for the server and make a connection with it. • HTMLis a computer language at the client’s 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 ofHTMLare 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 thetags: HTML tags are commands written between less than (<) and greater than (>) signs, also known as angle brackets that indicate how the browser should display the text. <name_ of_ tag>Text between the opening and closing tag </name_ of_ tag> • Example: <B>Vacation</B> The browser presents at the monitor: Vacation

  7. <html>is the command, obligatory for allHTML-documents. The end of the HTML-document is:</html> 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 tag’s 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"-->"Accessories"-->"Notepad".

  9. When you open Notepad, please write something, for instance: <html>Here is my first HTML-page!</html>Then save the file : from the menu"File“ ofNotepad choose"Save As"and write the name of your first HTML-page:index.html (orindex.htm) The first page of nearly each Internet site isnamed index.html orindex.htm The browser will distinguish it as a first page and it will open the site only if it has the name index.htmlorindex.htm.

  10. Structure ofHTML • The beginning and the end of the HTML documentare <html>and</html> • Between these tags are the both main parts of the HTML document. • The first part isHEAD, the second - BODY. These two parts of the HTML-document have opening and closing tags. • One typical HTML document looks like:<html> <head>………</head> <body>……… </body></html>

  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<html>. Title The HTML document must have a title. <title>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</title> ExampleThe HEAD section including the title looks like:<head><title>Stoilova</title></head>

  12. Content of sectionHEAD: МЕТА 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-EQUIVandthe attributeCONTENT. These Meta tags have the following format: <metahttp-equiv=“name" content=“content" /> МЕТА tags with attributes HTTP-EQUIV are used for managing the action of the browsers. < metahttp-equiv ="Content-Type" content ="text/html; charset=windows-1251">

  13. МЕТА tags containing the attribute NAMEandattributeCONTENT. They have the form: <meta name=“name" content=“content" /> МЕТА tags with attributes NAMEare used for giving information to search indexes Typical of the МЕТА tags is that they have opening tag<META>, butthey have not closing tag </META>. 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 “>”.

  14. BODY Just afterHEAD sectionbeginsBODYsection. Tag <body>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 ofBODY section: bgcolor(background color of the page) • The attributebgcolordetermine the background color of the page. <bodybgcolor=“the color of the page in English">If you want your page to have black background, you have to write the following code: <bodybgcolor="black">For yellow background: <bodybgcolor="yellow"> etc.

  16. Attributes ofBODY 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: <bodybackground="picture.jpg">

  17. Attributes ofBODY section: text Using thetext attribute you can give a color of the page’s text. The coding is similar to the background color. If you want blue text, for example, you have to write: <bodytext="blue">Text is black by default.

  18. Attributes ofBODY section : link, alink и vlink • Attributelinkshows the color of text’s hyperlinks of the HTML-document(unvisited hyperlinks) <bodylink="green"> • Attributealinkdetermines the color of the hyperlink on clicking by the mouse. • Attributevlinkdetermines the color of the visited hyperlinks. Example: <bodylink="green" alink=”yellow” vlink=”brown”>

  19. Example of using the attributes ofBODYtagWe 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: <bodybgcolor="black" text="white" link="blue" alink="yellow" vlink="green">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 inHTML Tag<font> In contrast to the command <body>, <font>is used always with attributes. The attributes of<font>are: face, sizeandcolor.

  21. Attributes ofFONT: face(type of the font) The type of the font is determined by the code: <fontface=“Font’s name">Here is written the text</font> There are two main and often used fonts - times new romanandarial. • The font of this page is arial:<fontface="arial">This is text, written in arial.</font>The effect at the browser’s screen is: This is text, written in arial. • The other popular font is“times new roman”: <fontface="times new roman"> This is text, written in times new roman.</font>The effect at the browser’s screen is: This is text, written intimes 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 client’s chance to see the text as you want. <fontface="arial, helvetica, verdana, sans-sherif">Това е текст, написан на arial, helvetica, verdana, sans-sherif.</font><fontface="times new roman, georgia, timoku">Това е текст, написан на times new roman, georgia, timoku.</font>

  23. Attributes ofFONTtag:size (font’s size) <fontsize=“digit from 1 to 7">The text is written here</font> <fontsize="2">This is text with size 2</font>Text written by “arial” font with different size is the following: This is text with size1This is text with size 2 This is text with size3This is text with size4This is text with size5This is text with size6This is text with size7

  24. You can use not only absolute but relative size as well: <fontsize="-1"> This text has a size less of those by default with 1.</font>For text bigger of those by default with 1 use: <fontsize="+1">Това е текст с един размер по-голям от подразбиращия се.</font> 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 defaultwith 1.

  25. Command for titles <h> There is a special command for creating titles in HTML - <h>together with digits from 1 to 6 (included). It has closing tag - </h>,which has to have the same digit . Example:<h2>This is a title with size 2</h2>The usage of<h>automatically adds empty row above and bellow of the text’s title. The titles are in the form: This is a title with size1 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(font’s color) Giving a color of the text becomes by assigning a value to the colorattribute, for example: <fontcolor="blue">This is blue text</font><fontcolor="green">This is green text</font>etcExample for usage of attributes of Font tag <fontface="arial, helvetica, verdana, sans-sherif" size="4" color="blue">This is text in arial font and its similar with size 4, blue color</font>

  27. Instruments for additional influence to the text view The main instruments for influence of the text view are the tags <b>, <i> and <u>. Each of them has closing tag <b> text bold</b> <i> text italic</i> <u> underline text< u > Examples: <b> <i> <u>This text is at the same time bold, italic and underline</u> </i> </b> Wrong(the principle of nesting tags is not correct) <b> <i> < This text is at the same time bold, italic and underline</i> </b> </u>

  28. Other possibilities for changing the text’s view • <strong>The text is bold like using the tag<b></strong> • <ins>The text is underline, similar to tag<u></ins> • <em>Shows the text italic like tag <i></em> • <cite>Shows the text italic like tag <i></cite> • <dfn>Shows the text italic like tag <i></dfn> • <var>Shows the text italic like tag <i></var> • <big>Increase the font size with 1 after each usage of the tag</big> • <small>Decrease the font size with 1 after each usage of the tag</small> • <strike>Strike the text</strike> • <s>Strike the text</s> • <sup>Write the text like supreme indices</sup> • <sub>Write the text like sub indices</sub>

  29. Други възможности за променяне на вида на текста • <tt>The text is like using typewriter, similar to font Courier</tt> • <code>The text is like using typewriter, similar to font Courier</code> • <samp>The text is like using typewriter similar to font Courier</samp> • <kbd>The text is like using typewriter similar to font Courier</kbd> • <acronym> </acronym>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<p> </p> • Go to next row<br> • Margin of block text • <blockquote> </blockquote> • Using preformatted text <pre></pre> • 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 <div> </div><div align="left"> <div align="right"> <div align="center"> <center> </center> • Text alignment in left and rightsimultaneously <div align="justify"> text</div> <p align="justify">Text of paragraph</p> <h2 align="center">Text of title</h2>

More Related