Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie HTML - part 1
Ähnlich wie HTML - part 1 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
HTML - part 1
- 2. Contents HTML introduction HTML page structure HTML Basics HTML Tags HTML Elements HTML Attributes
- 3. HTML Introduction HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are building blocks of HTML pages HTML elements are represented by tags
- 4. What is markup? Markup is also known as HTML tags.
- 5. Example <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 7. HTML Basics All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.
- 8. HTML Tags Headings Paragraphs Inputs Labels Images Tables Lists
- 9. Continued… What are HTML Tags? The hidden keywords within a webpage that define how our web browser must format & display the content. Most tags have two parts an opening and closing part, e.g; <html> is opening tag and </html> is closing tag.
- 10. Headings Headings are defined with <h1> to <h6> tags. <h1> defines the most important heading while <h6> is defined the least important heading <h1> should be used for main heading, followed by <h2>, then the less important <h3> & so on…
- 11. Importance Search engines use the headings to index the structure & content of your web pages. Users skim your pages by its headings, so it’s important to use headings to show the document structure.
- 12. Paragraphs The HTML <p> defines a paragraph. Never forget the end tag, else it might produce unexpected results or errors.
- 13. Continued… HTML Line breaks: The HTML <br> element defines the line break. Output:
- 14. Inputs There are many types of inputs from which text is default. <input type=“value” /> The value defines which type of data do you want to insert. There are many types of data you can insert some of them are from HTML5 but as we’re on to HTML so we will only discuss them.
- 15. Input type=“?” Description Text Default, defines a single-line text field. Checkbox Defines a checkbox Password Defines a password field. File Defines a file-select field & a “Browse…” button Image Defines an image as the submit button Button Defines a clickable button Submit Defines a submit button Hidden Defines a hidden input field Radio Defines a radio button Reset Defines a reset button
- 16. Labels The <label> tag defines a label for an <input> element. The <label> element provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
- 17. Images The <img> tag defines an image in an HTML page. The <img> tag has two required attributes; src & alt. src: defines the url (or path) of the image alt: specifies an alternate text for an image Where some common attributes are height, width, border etc.
- 18. Table The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th> & <td> elements. More complex HTML table may also include <caption>, <tbody>, <col>, <colgroup>, <thead> & <tfoot>
- 19. Tags Description <tr> Defines a table row <th> Defines a table header <td> Defines a table cell <tbody> Used to group the body content in an HTML table <thead> Used to group header content in an HTML table <tfoot> Used to group footer content in an HTML table <caption> Defines a table caption <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting
- 20. Example
- 21. Lists There are two types of lists. Ordered Lists Unordered Lists. Definition Lists
- 22. Ordered Lists If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag.
- 23. Example
- 24. Unordered Lists A collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
- 25. Example
- 26. Definition Lists HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition list makes use of the following three tags: <dl> - Defines the start of the list <dt> - A term <dd> - Term definition </dl> - Defines the end of the list
- 27. Example
- 28. HTML Elements An HTML element is defined by a starting tag. If the element contains any content it ends with a closing tag. Example: Start Tag Content End Tag <p> Paragraph content </p> <h1> Heading content </h1> <div> Division content </div> <br />
- 29. Continued… <start tag> … content … </end tag> Element
- 30. HTML Attributes Attributes are the specific properties of every HTML element. They provide additional information They are always specified in start tag of an element. Attributes consist of two parts: name & value Name is the property you want to set. Value is what you want the value of the property to be set and always put within quotations.
- 31. Continued… For example; <img /> tag have two main attributes src & alt <a></a> is a link tag whose main attribute is href whose value is equal to any external link or its link itself. While attributes like height, width, align etc are common for all HTML elements.
- 32. Core Attributes The four core attributes that can be used on majority of HTML elements(not all) are: Id Class Title Style
- 33. Id Attribute The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element: If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content. If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
- 34. Example
- 35. Class Attribute The class attribute is used to associate an element with a style sheet, and specifies the class of element. The value of the attribute may also be a space separated list of class names.
- 36. Title Attribute The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute.
- 37. Style Attribute The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
- 38. Generic Attributes Attributes Options Function Align Left, right, center Horizontally align tags Valign Top, middle, bottom Vertically align tags Bgcolor Numeric, decimal, RGB values Places a background color behind an element Background URL Places a background image behind an element Width Numeric value Specifies the width Height Numeric value Specifies the height