Html basics
- 1. 1 Introduction to HTML
- 2. 2 Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags
- 3. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
- 4. Do You Want to Try It? If you are running Windows, start Notepad. Type in the following text: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
- 5. Save the file as "mypage.html". 1. Start your Internet browser. 2. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. 3. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". 4. Now you should see an address in the dialog box, for example C:MyDocumentsmypage.htm". 5. Click OK, and the browser will display the page.
- 6. Example Explained The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.
- 7. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
- 8. When you save an HTML file, you can use either the .htm or the .html extension. You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.
- 9. HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags. HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets
- 10. HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>
- 11. The most important tags in HTML are tags that define headings, paragraphs and line breaks. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
- 12. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> HTML automatically adds an extra blank line before and after a heading.
- 13. Paragraphs Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically adds an extra blank line before and after a paragraph.
- 14. Line Breaks The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>This <br> is a para<br>graph with line breaks</p>
- 15. Comments in HTML 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. <!-- This is a comment --> Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
- 16. Attributes provide additional information to an HTML element. HTML Tag Attributes HTML tags can have attributes. Attributes provide additional information to an HTML element. Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start tag of an HTML element.
- 17. <h1> defines the start of a heading. <h1 align="center"> has additional information about the alignment. Attributes Example 2: <body> defines the body of an HTML document. <body bgcolor="yellow"> has additional information about the background color.
- 19. Control the line breaks and spaces with the pre tag.
- 20. ADDRESS
- 21. abbreviation or an acronym
- 22. HTML uses a hyperlink to link to another document on the Web HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
- 23. The syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. <a href="http://www.w3schools.com/">Visit W3Schools!</a> Hyperlink
- 24. The Target Attribute With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
- 25. The Anchor Tag and the Name Attribute The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
- 26. The line below defines a named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>
- 28. HTML Frames With frames, you can display more than one Web page in the same browser window. With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
- 29. The Frameset Tag The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy
- 30. <FRAMESET COLS="50, 2*, *, 80"> This example defines a four-column frame. The first is 50 pixels wide, and the fourth is 80 pixels wide. The second occupies two-thirds of the remaining width, while the third occupies the final third of the remaining width.
- 31. The Frame Tag The <frame> tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
- 32. <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> <frameset rows=“50%,50% "> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
- 33. If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Add the <noframes> tag for browsers that do not support frames.
- 34. <html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html> This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns.
- 35. Navigation frame navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code of the links: <a href ="frame_a.htm" target="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a> The second frame will show the linked document.
- 36. Navigation frame cont: Second Frame <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html>
- 37. An inline frame (a frame inside an HTML page). <html> <body> <iframe src="default.asp"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>
- 38. HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
- 39. <table border="1"> tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
- 40. Table cells with no content are not displayed very well in most browsers.
- 41. A table with a caption <table border="6"> <caption>My Caption</caption>
- 42. Table cells that span more than one row or one column
- 43. Table cells that span more than one row or one column
- 44. How to display elements inside other elements
- 45. How to use cell padding to create more white space between the cell content and its borders
- 46. How to add a background to a table <table border="1" bgcolor="red"> <table border="1" background="bgdesert.jpg">
- 47. How to add a background to one or more table cells.
- 48. How to use the "align" attribute to align the content of cells
- 49. HTML Lists Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
- 50. Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
- 53. This example demonstrates a definition list.
- 54. HTML Forms and Input
- 59. How to create a simple drop-down box on an HTML page. A drop-down box is a selectable list.
- 60. how to create a simple drop-down box with a pre-selected value.
- 61. how to create a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters.
- 62. This example demonstrates how to create a button. On the button you can define your own text.
- 63. HTML Images In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: <img src="url">
- 64. The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
- 65. The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat"> The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.
- 66. HTML <fieldset> tag Definition and Usage The fieldset element draws a box around its containing elements
- 67. HTML <legend> tag Definition and Usage The legend element defines a caption for a fieldset.
- 68. HTML <optgroup> tag Definition and Usage Defines an option group. This element allows you to group choices. When you have a long list of options, groups of related choices are easier to handle.
- 69. <select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select>