1 / 22

Web Development

Web Development. Part 1. HTML (Hyper Text Markup Language). With HTML you can create your own Web site. These slides teaches you everything about HTML. HTML is easy to learn - You will enjoy it. HTML (First Program).

dusty
Download Presentation

Web Development

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. Web Development Part 1

  2. HTML (Hyper Text Markup Language) • With HTML you can create your own Web site. • These slides teaches you everything about HTML. • HTML is easy to learn - You will enjoy it.

  3. HTML (First Program) <!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph</p></body></html>

  4. HTML Headings and Paragraph HTML headings are defined with the <h1> to <h6> tags <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3> HTML paragraphs are defined with the <p> tag <p>This is a paragraph.</p><p>This is another paragraph.</p>

  5. The HTML <head> Element • The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. • The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

  6. The HTML <title> Element • The <title> tag defines the title of the document. • The <title> element is required in all HTML/XHTML documents. • The <title> element: • defines a title in the browser toolbar • provides a title for the page when it is added to favorites • displays a title for the page in search-engine results

  7. HTML Link • The HTML <a> tag defines a hyperlink. • A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. • When you move the cursor over a link in a Web page, the arrow will turn into a little hand. • The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. • By default, links will appear as follows in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red

  8. HTML Link HTML links are defined with the <a> tag <a href="http://www.w3schools.com">This is a link</a> Example: <!DOCTYPE html> <html> <body> <a href="http://www.usa.edu.pk"> HyperLink</a> </body> </html>

  9. HTML Images HTML images are defined with the <img> tag <imgsrc="w3schools.jpg" width="104" height="142"> Example <!DOCTYPE html> <html> <body> <imgsrc="w3schools.jpg" width="104" height="142"></body> </html>

  10. HTML Elements An HTML element is everything from the start tag to the end tag * The start tag is often called the opening tag. The end tag is often called the closing tag

  11. HTML Attributes Attributes provide additional information about HTML elements • HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value"

  12. Attribute Example HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="http://www.usa.edu.pk">This is a link</a> • Attribute values should always be enclosed in quotes. • Double style quotes are the most common, but single style quotes are also allowed

  13. HTML Formatting Tags Example code Result This text is bold This text is strong This text is italic This text is emphasized This is computer output This is subscript and superscript <!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

  14. 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). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

  15. HTML Tables Table Example How the HTML code above looks in a browser <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>

  16. HTML Tables and the Border Attribute If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute: <table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

  17. HTML Table Headers Header Example Output in the Browser <table border="1"><tr><th>Header 1</th><th>Header 2</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>

  18. HTML Lists An ordered list: • The first list item • The second list item • The third list item An unordered list: • List item • List item • List item

  19. HTML Unordered Lists • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. • The list items are marked with bullets (typically small black circles). <ul> <li>Coffee</li> <li>Milk</li> </ul> • How the HTML code above looks in a browser: • Coffee • Milk

  20. HTML Ordered Lists • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. • The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol> • How the HTML code above looks in a browser: • Coffee • Milk

  21. HTML Description Lists • A description list is a list of terms/names, with a description of each term/name • The <dl> tag defines a description list • The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name)

  22. HTML Description Lists Example <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> How the HTML code above looks in a browser: Coffee - black hot drink Milk - white cold drink

More Related