Download presentation
Presentation is loading. Please wait.
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=" is a link</a> Example: <!DOCTYPE html> <html> <body> <a href=" HyperLink</a> </body> </html>
9
HTML Images HTML images are defined with the <img> tag <img src="w3schools.jpg" width="104" height="142"> Example <!DOCTYPE html> <html> <body> <img src="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 Start tag * Element content End tag * <p> This is a paragraph </p> <a href="default.htm"> This is a link </a> <br>
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=" 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
<!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> 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
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> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
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 Header 1
<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> Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
18
HTML Lists An ordered list: An unordered list: The first list item
The second list item The third list item An unordered list: 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
Similar presentations
