1 / 74

Chapter 01

Chapter 01. HTML Basic. Agenda. Introduction Know about Elements, Attributes, Tags Know how to create Entities Know about how to create links Know how to create table. Using iFrame Know how to create lists Know how to put marquee Know how to create images, and image link

xavier-ramsey
Download Presentation

Chapter 01

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. Chapter 01 HTML Basic

  2. Agenda • Introduction • Know about Elements, Attributes, Tags • Know how to create Entities • Know about how to create links • Know how to create table. • Using iFrame • Know how to create lists • Know how to put marquee • Know how to create images, and image link • Know how to create background & color • Know how to create Form

  3. Introduction • HTML stands for Hypertext Markup Language. • It is the most widely used language to write Web Pages. • Hypertext refers to the way in which Web pages (HTML documents) are linked together. • Markup Language describes how HTML works. • To create HTML document file, you need two things: • Text Editor: use to write your code. They are Wordpad, Notepad, Adobe Dreamweaver,… • Web Browser: use to view your HTML file. They are IE, FireFox, Opera, Chrome,…… • HTML has extension as .htmor .html

  4. Introduction • Getting start: • Open Adobe Dreamweaver CS3 or notepad Save it to sample.htm or sample.html <html> <head> <title>sample html</title> </head> <body> Hello! <br/> <b>This is the sample html</b> </body> </html>

  5. Introduction • Explanation • <html> tell the browser that the entire document is composed in HTM. • <head> contain information about the document such as title, calling style sheet, calling javascript. Information inside this tag does not display outside. • <body> contain all information that you can see on the screen. • Word “Hello” the text that show on the browser. • <br/> give one line break space • <b> format the text inside to bold

  6. Introduction <html> </html> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd> Doctype statement indicates type of document Root HTML element <head> <meta http-equip=“Content-Type” content=“text/html; charset=utf-8” /> <title>Page Title</title> </head> Head contains info about the page <body> </body> Body to be displayed in the body screen

  7. HTML Elements • HTML Elements: • Start with pair tag • Start with open tag/start tag. • End with end tag/close tag. • Contain every thing inside start tag and close tag. • Some HTMl Element have empty content. • Empty element are closed in the start tag. • Most Elements have attribute that place in the start tag. <element_name>text to be play</element_name> end tag start tag HTML element

  8. HTML Elements • Example • Pair tag (start tag then close tag) • Empty tag <b>This is the sample html</b> B element <br/>This is the sample html

  9. HTML Elements • There are two element types: • Blog element: produce one line break space automatic <h1><h2><p><div>,…… • Inline element: effect inline applied <b>, <em>, <strong>, <span>, ……

  10. HTML Tag • Remember this code? <html> <head> <title>sample html</title> </head> <body> Hello! <br/> <b>This is the sample html</b> </body> </html>

  11. HTML Tag • Explain • <html></html>, <head></head>, <body></body>, … we call HTML Tag. • It is the HTML key word or syntax to make the browser understand.

  12. HTML Heading Tag • It defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. • HTML automatically adds an extra blank line before and after a heading. <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>

  13. HTML Paragraph • Paragraphs are defined with the <p> tag. • HTML automatically adds an extra blank line before and after a paragraph. <p>This is a paragraph</p> <p>This is another paragraph</p>

  14. HTML Line Break • The <br/> tag is used when you want to end a line, but don't want to start a new paragraph. The <br/> tag forces a line break wherever you place it. • The <br> tag is an empty tag. It has no closing tag. <p>This <br> is a paragraph with line breaks</p>

  15. HTML Comment Tag • 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. • Note that you need an exclamation point after the opening bracket, but not before the closing bracket. <!-- This is comment -->

  16. Most Common HTML Tag

  17. HTML Attribute • What is HTML Attribute? • It provide additional information to an HTML element. • It comes with pair like this • AttributeName=“AttributeValue” • or AttributeName=‘AttributeValue’ • It places in the HTML Tag. • They are name, id, title, align, width, height, color, style, …..

  18. HTML Attribute • Example <html> <head> <title>sample html</title> </head> <body> <p align=“center”>Hello world</p> </body> </html> Attribute “align”

  19. Note (Element, Tag, Attribute) • Note: • All the HTML Element, Tag, Attribute are not case sensitive, but the recommendation is lower case (w3c rule). <B> or <b> the same. • The Attribute value can put with quote (‘) or double quote (“) inside it. EX: <table name=‘Mr.”A”’.

  20. Question? Any questions?

  21. HTML Entities • Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. • A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). • To display a less than sign in an HTML document we must write: &lt; or &#60; • The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. • Note that the entities are case sensitive. 

  22. HTML Entities • Example: <b>&lt;Hello&gt;</b>

  23. Most Common Entities

  24. Question? Any questions?

  25. HTML Link • 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. • The syntax of creating an anchor: • 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="url">Text to be displayed</a> <a href=“http://www.google.com">Go to Google</a>

  26. HTML Link • Target Attribute • With the target attribute, you can define where the linked document will be opened. • The value of this attribute such as: _blank, _parent, _self, _top. • The line below will open the document in a new browser window: <a href=“http://www.google.com“ target=“_blank”>Go to Google</a>

  27. HTML Link • Anchor tag and 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. • Below is the syntax of a named anchor: • The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. <a name=“label”>text to display</a>

  28. HTML Link • The line below defines a named anchor: • To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this: • To link to the “tips” section on the same page, like this: <a name="tips">Useful Tips Section</a> <a href=“http://www.google.com#tips">Jump to the Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>

  29. HTML Link • Using Send Mail Link • You can use the link to send the mail in your outlook or other application similar • To send mail is written bellow: • When you click on the link, it will go to open your outlook (for windows) to send mail to test@test.com <a href=“mailto:test@test.com">Send to test@test.com</a>

  30. Question? Any questions?

  31. HTML Table • 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. <table border="1"> <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>

  32. HTML Table • Heading Table • Headings in a table are defined with the <th> tag. <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>

  33. HTML Table • cellpadding and cellspacing attributes • Cellpadding is used to set the margin between text inside the cell to the border of cell. • Cellspacing is used to set the margin between cell border and cell border <table border="1“ cellpadding=“10” cellspacing=“10”> <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>

  34. HTML Table • Td rowspanand colspanattribute • Rowspan is used to merge the row of the table. • Colspan is used to merge the column of the table. • Value is the number. <td rowspan=“value”></td> <td colspan=“value”></td>

  35. Question? Any questions?

  36. HTML Iframe • The <iframe> tag defines an inline frame that contains another document. It is supported in all major browsers. • The syntax shown as bellow: <iframe src =“url" width=“x" height=“y">  --your message to show if not work-- </iframe>

  37. HTML Iframe • Example My Iframe:<br/> <iframe name="myframe" src="http://www.google.com"> This browser is not support the iframe. </iframe>

  38. HTML Iframe • You can link Iframe: <a href=“http://www.yahoo.com” target=“myframe”>Yahoo</a><br> My Iframe:<br/> <iframe name="myframe" src="http://www.google.com"> This browser is not support the iframe. </iframe>

  39. Question? Any questions?

  40. HTML Lists • You can list out your items, subjects or menu in the form of a list. HTML gives you three different types of lists. • <ul> - An unordered list. This will list items using bullets • <ol> - A ordered list. This will use different schemes of numbers to list your items • <dl> - A definition list. This is arrange your items in the same way as they are arranged in a dictionary.

  41. HTML Lists • Unordered Lists: • <ul> type attribute: there are 3 types <h3>Movie List</h3> <ul> <li>Ram Teri Ganga Meli</li> <li>Mera Naam Jocker</li> <li>Titanic</li> <li>Ghost in the ship</li> </ul> <h3>Movie List</h3> <ul> <li>Ram Teri Ganga Meli</li> <li>Mera Naam Jocker</li> <li>Titanic</li> <li>Ghost in the ship</li> </ul>

  42. HTML Lists • Ordered Lists: This list is created by using <ol> tag. Each item in the list is marked with a number. • <ol> type attribute: there are 5 types <h3>Movie List</h3> <ol> <li>Ram Teri Ganga Meli</li> <li>Mera Naam Jocker</li> <li>Titanic</li> <li>Ghost in the ship</li> </ol>

  43. HTML Lists • <ol> start attribute: specify the beginning of any index. <h3>Movie List</h3> <ol type="A" start="5"> <li>Ram Teri Ganga Meli</li> <li>Mera Naam Jocker</li> <li>Titanic</li> <li>Ghost in the ship</li> </ol> <h3>Movie List</h3> <ol type="A" start="5"> <li>Ram Teri Ganga Meli</li> <li>Mera Naam Jocker</li> <li>Titanic</li> <li>Ghost in the ship</li> </ol>

  44. HTML Lists • Definition Lists: • Definition List is the ideal way to present a glossary, list of terms, or other name/value list. • Definition List makes use of following three tags. • <dl> - Defines the start of the list • <dt> - A term • <dd> - Term definition • </dl> - Defines the end of the list <dl> <dt><b>HTML</b></dt> <dd>Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>Hyper Text Transfer Protocol</dd> </dl>

  45. Question? Any questions?

  46. HTML Marquee • Marquee is a tag that we can do the word have animation. • Marquee have two attributes type are Direction and Behavior. • Direction: has 4 type values are Down, Left, Right, and Top. • Behavior: has 3 type values are Alternate, Scroll, and Slide.

  47. HTML Marquee • Example <marquee behavior=“alternate” direction=“left”> Hello friends! </marquee> Direction to left

  48. Question? Any questions?

  49. 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: • The URL points to the location where the image is stored. • Example: <img src=“url”/> <img src=“c://document and setting/user/desktop/image.jpg”/>

  50. HTML Images • 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: • 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. • Other attribute: there are many attributes inside <img> such as width, height, border, title, valign, align, id, style,…. <imgsrc=“c://document and setting/user/desktop/image.jpg” alt=“my image”/>

More Related