Introduction to Html
- 1. Web design training 02 Hypertext Markup Language (HTML) PRESENTED BY FOLASADE ADEDEJI
- 2. HTML Having decided on the website’s structure, we move on to implementing the design. One of the design tools that can be used is HTML
- 3. What is HTMl ? HTML stands for Hyper Text Markup Language HTML is a markup language A "markup language" is a computer language that describes how a page should be formatted A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML is neutral and can be used on any platform or desktop unlike most other programming languages.
- 4. HTML TAGS HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> 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 end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags
- 6. HTML Page Structure <!DOCTYPE html> <html> <body> <h1>This a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
- 7. HTML page structure The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph
- 8. HTML versions Since the early days of the web, there have been many versions of HTML: HTML VERSION HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2012
- 9. HTML Elements An HTML element is everything from the start tag to the end tag: Example, whereas “<title>” and “</title>” are tags, “<title>Rumple Stilt skin</title>” is a title element. · An HTML element starts with a start tag / opening tag · An HTML element ends with an end tag / closing tag · The element content is everything between the start and the end tag · Some HTML elements have empty content · Empty elements are closed in the start tag
- 10. 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" Attribute Example <tag attribute="value">Margarine</tag>. For Example: <a href="http://www.eac.edu.ng">This is a link</a>
- 11. HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
- 12. HTML Paragraphs HTML paragraphs are defined with the <p> tag. Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>
- 13. HTML LINKs HTML links are defined with the <a> tag. The link address is specified in the href attribute: Example <a href="http://www.eac.edu.ng">This is a link</a> Always Quote Attribute Values Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.
- 14. Html link Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson' 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
- 15. HTML Link Syntax The HTML code for a link is simple. It looks like this: <a href="url">Link text</a> The href attribute specifies the destination of a link. Example <a href="http://www.eac.edu.ng/">Visit EAC</a> which will display like this: Visit EAC Clicking on this hyperlink will send the user to EAC’s homepage. Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
- 16. HTML Links - The target Attribute The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: Example <a href="http://www.eac.edu.ng/" target="_blank">Visit EAC!</a>
- 17. HTML Images HTML images are defined with the <img> tag. Example <img src=“eac.jpg" alt=“Educational Advancement Centre" width="104" height="142"> Note: The filename and the size of the image are provided as attributes.
- 18. HTML IMAGES HTML Images - Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="smiley.gif" alt="Smiley face" width="42" height="42">
- 19. HTML IMAGES HTML Images - The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and 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.
- 20. Syntax for defining an image: <img src="url" alt="some_text"> The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.eac.edu.ng" has the URL: http://www.eac.edu.ng/images/boat.gif. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
- 21. HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: <img src="smiley.gif" alt="Smiley face"> The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
- 22. HTML Lines The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content: Example <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
- 23. HTML Line Break Use the <br> tag if you want a line break (a new line) without starting a new paragraph: Example <p>This is<br>a para<br>graph with line breaks</p>
- 24. HTML Text Formatting This text is bold This text is italic This is computer output This is subscript and superscript
- 25. HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags. Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!
- 26. HTML comments Comment tags <!-- and --> are used to insert comments in HTML. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> Note: There is an exclamation point (!) in the opening tag, but not in the closing tag. Comments are not displayed by the browser, but they can help document your HTML. With comments you can place notifications and reminders in your HTML: Example <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here -->
- 27. HTML Lists An ordered list: An unordered list: 1. The first list item • List item 2. The second list item • List item 3. The third list item • List item
- 28. 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
- 29. 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
- 30. 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): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
- 31. This is how the HTML code above looks in a browser: Coffee - black hot drink Milk - white cold drink
- 32. HTML TABLEs HTML Table Example: Firstname Lastname Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67
- 33. HTML Tables Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading) The <td> elements are the data containers in the table. The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc. The width of a table can be defined using CSS.
- 34. hTML TABLE Example <table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
- 35. An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: Example <table border="1" style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> HTML Forms are used to select different kinds of user input.
- 36. HTML FORMS HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form>
- 37. HTML Forms - The Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below.
- 38. Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
- 39. Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles).
- 40. Radio buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> How the HTML code above looks in a browser: Male Female
- 41. Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> How the HTML code above looks in a browser: I have a bike I have a car
- 42. <input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> How the HTML code above looks in a browser: Username: