1 / 17

HTML Basics

HTML Basics. (Part-2). HTML Elements. An HTML element is everything from the start tag to the end tag. <p>This is a paragraph</p> HTML Element Syntax -An HTML element starts with a start tag -An HTML element ends with an end tag

joannberry
Download Presentation

HTML Basics

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. HTML Basics (Part-2)

  2. HTML Elements • An HTML element is everything from the start tag to the end tag. <p>This is a paragraph</p> • HTML Element Syntax -An HTML element starts with a start tag -An HTML element ends with an end tag -The element content is everything between the start and end tag -Some HTML elements have empty content -Some HTML elements have a missing end tag

  3. HTML Elements Note:The start tag can have additional information (attributes) Nested HTML Elements • Most HTML elements can be nested (can contain other HTML elements). • Most HTML documents consist of nested HTML elements.

  4. HTML Document Example <html> <body><p>This is my first paragraph</p></body> </html> The example above contains 3 HTML elements.

  5. Empty HTML Elements • HTML elements without content are called empty elements. Empty elements have no end tag. • <br/> is an empty element without a closing tag. • HTML Tip - Lowercase Tags HTML tags are not case sensitive: <P> means the same as <p>.

  6. HTML Attributes • HTML elements can have attributes. • Attributes provide additional information about the element. • Attributes are always specified in the start tag. • Attribute Syntax Attributes always come in name/value pairs like this: name="value". Example: border="1"

  7. Attributes Examples • Example 1: <a> defines an anchor (an HTML link). <a href="http://www.google.com"> The href attribute provides the link address for the <a> element. • Example 2: <body> defines the body of an HTML document. <body bgcolor="yellow"> The bgcolorattribute defines the background color for the <body> element.

  8. Attribute Values Note: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. • In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: • name='John "ShotGun" Nelson'

  9. HTML Attributes Reference • Below is a list of some attributes that are standard for all HTML elements (with a few exceptions):

  10. HTML Styles • The purpose of the style attribute is: To provide a common way to style all HTML elements. • HTML Style Examples style="background-color:yellow" style="font-size:10px" style="font-family:Times" style="text-align:center"

  11. HTML Styles • These tags and attributes should be avoided:

  12. Style Examples • Background Color <body style="background-color:yellow"> The style attribute defines a style for the <body> element. • Font Family, Color and Size <p style="font-family:courier new; color:red; font-size:20px"> The style attribute defines a style for the <p> element.

  13. Style Examples • Text Alignment <h1 style="text-align:center"> The style attribute defines a style for the <h1> element.

  14. HTML Links Hyperlinks, Anchors, and Links • In web terms, a hyperlink is a reference (an address) to a resource (HTML page, an image, a sound file, a movie, etc) on the web. • An anchor is a term used to define a hyperlink destination inside a document. • The HTML anchor element <a>, is used to define both hyperlinks and anchors. • We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document..

  15. HTML Links An HTML Link • Link syntax:  <a href="url">Link text</a> • The start tag contains attributes about the link. • The element content (Link text) defines the part to be displayed. Note:The element content don't have to be a text. You can link from an image or any other HTML element.

  16. HTML Links The href Attribute The href attribute defines the link "address". <a href="http://www.google.com/">Visit Google</a> The target Attribute The target attribute defines where the linked document will be opened. <a href="http://www.google.com/" target="_blank">Visit Google</a>

  17. HTML Links The name Attribute When the name attribute is used, the <a> element defines a named anchor inside a HTML document. <a name="label">Any content</a> <a href="#label">Any content</a> • Named anchor are not displayed in any special way. They are invisible to the reader.

More Related