HTML Attributes and Tags in Depth PDF

HTML ATTRIBUTES AND TAGS IN DEPTH  Agenda 1 Anatomy of HTML Tags 7 Nested List 2 Attributes 3 Important Tags 4 Quotation, Abbreviation and Citations 5...

HTML ATTRIBUTES AND TAGS IN DEPTH  Agenda 1 Anatomy of HTML Tags 7 Nested List 2 Attributes 3 Important Tags 4 Quotation, Abbreviation and Citations 5 Text Tags 6 Types of List Tags Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  Anatomy of HTML Tags Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  Anatomy of HTML Tags Element Attribute Attribute name Attribute value Welcome to Facebook !! Opening Tag Content Closing Tag Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  Attributes Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Attributes Properties associated with each tag. is the structure. Global Attribute: ○ Title : Add extra information(hover). ○ Style : Add style information(font, background, color, size). ○ src is the attribute used in image tag to define path. ○ Width is attribute used to define width in pixels. ○ Alt i.e alternate text if image is not loaded. Name of the link href used to define path of the link. Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  Basic Tags Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Basic Tags Enclosed within Different tags render different meaning. tag ○ Whatever is written this tag comes up in the web page’s tab. ○ Defines the title of the page. ○ Syntax: Home tag ○ Defines the paragraph. ○ Syntax: This is our first Paragraph Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  - Headings Are Important Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. headings should be used for main headings, followed by headings, then the less important , and so on… Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold. Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  The tag defines preformatted text. Text in a element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code. Text in a pre element This text is is displayed in a fixed-width in a fixed-pitch font, and it preserves font, and it preserves both both spaces and spaces and line breaks line breaks Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Quotations, Abbreviations and Citations To define along quotation or block quotation, 1. tags are used. The HTML tag tagindents definesthe quotation a short in browsers quotation. 2. Browsers normally insert quotation marks around the The HTML tag defines an abbreviation or an quotation. 3. acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking The HTML abbreviations tagcandefines give useful information the contact to information 4. browsers, translation of for the author/owner systems and search-engines. a document or an article. HTML The contact tag defines information can bethe antitle of a email creativeURL, address, work 5. (e.g. a book, physical a poem, address, phonea song, number,a movie, social amedia painting, a etc. handle, sculpture, BDO stands etc.). for Bi-Directional Override. 6. The HTML tag is used to override the current text direction. Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Text Tags B element displays text in bold  and I element displays text in italics  and SMALL element makes the text appear smaller in browser  and U element underlines a text  and DEL element encloses deleted text  and INS element encloses inserted text  and STRONG element emphasizes the text  and SUB element displays a text as subscript  and SUP element displays a text as superscript  and em is used for emphasized text  and dfn is used for definition term  and Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited List of Self closing/Empty tags tag ○ Stands for horizontal rule. ○ Dividing the web page. tag ○ Stands for break line. ○ Moving to next line. tag ○ To add images in the web page. Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Some more Tags and tags ○ Both of these are used to group different tags. ○ Acts like a container. ○ Effective while styling. ○ Difference is block level and is inline level. tag ○ Used to add images in a web page. ○ Syntax: ○ Self closing tag. tags ○ Used to add links in a web page. ○ Name of the link Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  List Tags Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited List Tags tag ○ Stands for ordered list. ○ To define series of events that take place in some order. ○ Example making a tea (like a flow chart). ○......... tag ○ Stands for unordered list. ○ To define series of events that take place where order is not important. ○ Example your hobbies. ○......... tag ○ Defines the list item. ○ Used inside the ol and ul tag to define the events. ○ Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited List Tags Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Nested List Example 1 :- Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited Nested List Example 2 :- Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited  Thank You Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited