Html basics
0 likes84 views
The document discusses various HTML elements and their usage in creating web pages. It describes common elements like headings, paragraphs, lists, links and images. It also explains the structure of an HTML document with root, head and body elements. The head contains meta information while the body contains the visible page content. Semantic elements are recommended for accessibility, maintenance and search engine optimization.
![[1] Randy Connolly, Ricardo Hoar, "Fundamentals of Web
Development”, 1stEdition,Pearson Education India.
(ISBN:978-9332575271)
[2] https://www.w3schools.com/
LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 28
LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE](https://image.slidesharecdn.com/htmlbasics-200923085532/85/Html-basics-28-320.jpg)
Html basics
- 1. By Lakshmi R Asst. professor Dept. of ISE
- 2. Elements attributes LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE Tag <element-name> <beginning-tag> </ending-tag> <body bgcolor = "purple"> Hello Everybody! </body> Element name Attribute Content May be text or other HTML elements Closing tag Name = value pair <img src = “file-name.jpg“ /> Element name Trailing slashAttributeEmpty Element An empty element does not contain any text content; instead, it is an instruction to the browser to do something. 2
- 3. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE HTML element will contain other HTML elements Container element - a parent of the contained - child, element. Elements contained within the child - descendants of the parent element Any given child element, may have a variety of ancestors. Outline 3
- 4. In order to properly construct this hierarchy of elements, each HTML nested element to be properly nested. child’s ending tag must occur before its parent’s ending tag LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 4
- 5. Structural markup and presentation-oriented markup (visual markup) Semantic - structural LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE HTML CSS Structural - headings, lists, paragraphs, links, images, navigation, footers, and so on. Styling - Typeface/font Emphasis (bold, italics, underline) Justification, indentation, Color Advantages – Semantic markup Maintainability. Semantic markup is easier to update and change than web pages that contain a great deal of presentation markup. Faster. Semantic web pages are typically quicker to author and faster to download. Accessibility. voice reading software can be a very frustrating experience if the site does not use semantic markup. (For visually impaired) Search engine optimization. Most important users of a website are the various search engine crawlers - are automated programs that cross the web scanning sites for their content - used for users’ search queries. Semantic markup provides better instructions for these crawlers: it tells them what things are important content on the site. 5
- 6. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE The <title> element: broad description of the content used by the browser for its bookmarks browser history list search engines will use the page’s title as the linked text in their search engine result pages. 6
- 7. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 7
- 8. Document Type Definition Tells the browser (or any other client software that is reading this HTML document) what type of document it is about to process. Document Type Definitions (DTD) define a document’s type for markup languages such as HTML and XML. The HTML5 doctype is quite short in comparison to one of the standard doctype specifications for XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 8
- 9. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE <html> - root element as it contains all the other HTML elements in the document. lang attribute - optional attribute tells the browser the natural language that is being used for textual content in the HTML document, which is English in this example. Two sections – head and body 9
- 10. Descriptive elements about the document <head> Meta information Title Style sheets JavaScript Search Engines LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 10
- 11. <meta> Encoding for the document is UTF-8. Character encoding - which character set standard is being used to encode the characters in the document. ASCII standard – 8-bit for each character English (or more properly Latin) upper and lowercase letters common punctuation symbols UTF-8 is a more complete variable-width encoding system Encode all 110,000 characters in the Unicode character set (which in itself supports over 100 different language scripts). LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 11
- 12. <link> Specifies an external CSS style sheet file that is used with this document. To define the visual look of the HTML elements in the document. For consistency’s sake, most sites place most or all of their style definitions within one or more external style sheet files. In this example, the file being referenced (main.css) resides within a subfolder called css. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 12
- 13. <script> references an external JavaScript file. Like with style definitions, JavaScript code can be written directly within the HTML or contained within an external file. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 13
- 14. 14 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 15. Six levels of heading : <h1> <h2> <h3> <h4> <h5> <h6> Why Heading? To create document outline for the page Document outline is not seen on page; it is an internal data representation of the control on the page. Used to render the page Document outline is constructed from headings and other structural tags Specify a heading level that sis semantically (structurally) accurate. Note: Do not choose a heading level because of its default presentation (e.g., choosing <h3> because you want your text to be bold and 16pt). LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 15 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 16. <p> </p> <div> </div> Used to create logical grouping of contents LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 16 Container elements LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 17. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 17 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 18. Block-level elements Unordered list - <ul> Collections of items in no particular order. Bulleted list Ordered list - <ol> Collections of items that have a set order Numbered list LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 18 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 19. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 19 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE • Improves maintainability and accessibility of web pages. • There is no predefined presentation for these tags • They give indication as to what type of content they contain or what role that content plays in the page. • That explicit information helps robots/crawlers like Google to better understand which content is important, which is a subsidiary, which is for navigation, and so on.
- 20. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 20 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE • Site logo • Title • Subtitles • Taglines • Horizontal navigation links • Horizontal Banners
- 21. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 21 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 22. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 22 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE •Less important material •Smaller text version of navigation •Contact us •Copyright notices •Site’s privacy policy •Link to other social sites
- 23. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 23 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 24. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 24 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE • Section of a page that contains links to other pages or to other parts within the page • Does not apply any special presentation.
- 25. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 25 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE • Element specifies independent, self-contained content • Examples • Forum post • Blog post • New • HTML pages can have <section> element containing <article>, and <article> element containing <section> element.
- 26. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 26 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE • For marking up the content that is separate from the main content • Examples: • Sidebars • Pull quotes • Advertising images • Grouping of non- essential elements
- 27. LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 27 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE
- 28. [1] Randy Connolly, Ricardo Hoar, "Fundamentals of Web Development”, 1stEdition,Pearson Education India. (ISBN:978-9332575271) [2] https://www.w3schools.com/ LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE 28 LAKSHMI R, ASST. PROFESSOR, DEPT. OF ISE