Tuesday, 19 November 2013

HTML Tutorial

HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, further tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentation HTML.

  • HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.
  • Notepad is a common text editor on Windows-based computers (usually found under the Programs > Accessories menu) and Mac OSX computers come bundled with TextEdit but any program that lets you fiddle with text will do.
  • Now create a folder called “html” wherever you like to save files on your computer and save the file as “myfirstpage.html”.
  • To look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome, Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file. Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.
  •  <html> is the opening tag that kicks things off and tells the browser that everything between that and the</html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.



Type of Tag Notation
body tag <body>
paragraph tag <p>content</p>
heading tag <h1>heading tag </h1>
italic tag <i>italic tag</i>
bold tag <b>bold tag </b>

Example 1 - Introduction


  • <h1> - headings
  • <p> - defines paragraph 

Example 2 - Link



  • An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
  • The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “http://www.htmldog.com”, or it can be relative to the current page.
  • So if, for example, you had another file called “flyingmoss.html” in the same directory then the line of code would simply be <a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.

Example 3 - List




  •  <ol> - defines ordered 
  •  <ul> - defines unordered 
  •  <li> - defines list item

Example 4 - Table



  • The table element defines the table.
  • The tr element defines a table row.
  • The td element defines a data cell. These must be enclosed in tr tags, as shown above.
  • If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.
  • cellpaddingdetermines the empty space, in pixels,the cell’s border and the table element, the default is usually about 1.

Example 5 - Image




  • Note that the syntax of inserting a moving image is no different from a non-moving image.
  • The img tag is used to put an image in an HTML document.
  • The src attribute tells the browser where to find the image.
  • The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
  • The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who are unable to see the image.

For more tutorials you can  click here :)
thank you..

No comments:

Post a Comment