Skip to content

Latest commit

 

History

History
155 lines (110 loc) · 7.5 KB

html_intro.md

File metadata and controls

155 lines (110 loc) · 7.5 KB
Raw

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) is a standard markup language used for creating web pages. It is the backbone of every web page and is used to structure content, define the layout, and specify how web browsers should display the information. HTML consists of a series of elements, each enclosed in angle brackets < >, which are used to define different parts of a web page.

why is it called a markup language?

HTML (Hypertext Markup Language) is called a "markup language" because it is a language that uses special tags to markup, or annotations, to describe the structure and formatting of text and multimedia documents

The tags are enclosed in angle brackets (<>) and they indicate to the browser how to display the content. For example, the "<p>" tag marks the beginning of a paragraph and the "</p>" tag marks the end of a paragraph. The browser will interpret these tags and display the paragraph content accordingly.

Importance of HTML

  • It is the foundation of the web. All web pages are written in HTML, so it is essential for anyone who wants to create or maintain a website to learn HTML.
  • It is easy to learn. HTML is a relatively simple language to learn, even for beginners. There are many resources available online and in libraries to help people learn HTML.
  • It is cross-platform compatible. HTML pages can be viewed on any device with a web browser, regardless of the operating system or platform.
  • HTML includes features and attributes that enhance the accessibility of web content, allowing it to be consumed by people with disabilities using assistive technologies like screen readers. Properly structured HTML promotes inclusivity on the web.
  • It is SEO-friendly. Search engines can better understand and index HTML pages, which can help to improve a website's ranking in search results.

Here are some key concepts and elements in HTML:

  1. Document Structure: An HTML document typically consists of the following structure:
<!DOCTYPE html>
<html>
<head>
    <!-- Meta information, links to stylesheets, and other head elements -->
</head>
<body>
    <!-- Content of the web page -->
</body>
</html>
  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html>: The root element that encloses the entire HTML document.
  • <head>: Contains metadata about the document and links to external resources.
  • <body>: Contains the visible content of the web page.

  1. Head Elements: Elements within the <head> section include:

    • <title>: Sets the title of the web page.
    • <meta>: Provides metadata about the document, such as character encoding.
    • <link>: Links external resources like stylesheets.
    • <script>: Embeds or links to JavaScript code.

  2. Content Elements: Elements within the <body> section are used to structure and format content. Some common content elements include:

    • Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> for different levels of headings.
    • Paragraphs: <p> for text paragraphs.
    • Lists: <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
    • Links: <a> for creating hyperlinks.
    • Images: <img> for displaying images.
    • Forms: <form> for creating input forms.

  3. Attributes: HTML elements can have attributes that provide additional information or settings. For example:

    • <a href="https://www.example.com">Link to Example</a>: The href attribute specifies the link's destination.
    • <img src="image.jpg" alt="Description">: The src attribute specifies the image source, and alt provides alternative text.

  4. Comments: You can add comments in HTML using <!-- -->:

    <!-- This is a comment -->

  5. Whitespace: HTML ignores extra spaces and line breaks, so you can format your code for readability.

HTML is the foundation of web development, and it works in conjunction with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity to create fully functional web pages and web applications.

The Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content dynamically. Essentially, the DOM represents the document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text.

Here's a simple example of a DOM structure for an HTML document:

Consider the following HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Welcome to the DOM Example</h1>
    <p>This is a simple example of the DOM structure.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

The corresponding DOM tree structure for this HTML document would look something like this:

- Document
  - Doctype
  - Element: <html>
    - Element: <head>
      - Element: <title>
        - Text: "DOM Example"
    - Element: <body>
      - Element: <h1>
        - Text: "Welcome to the DOM Example"
      - Element: <p>
        - Text: "This is a simple example of the DOM structure."
      - Element: <ul>
        - Element: <li>
          - Text: "Item 1"
        - Element: <li>
          - Text: "Item 2"
        - Element: <li>
          - Text: "Item 3"

In this example:

  • The top-level node is the Document, representing the entire HTML document.
  • The Document contains two child nodes: the Doctype declaration and the <html> element.
  • The <html> element contains two child elements: the <head> element and the <body> element.
  • The <head> element contains a child <title> element, which in turn contains text content.
  • The <body> element contains several child elements, including <h1>, <p>, and <ul>, each with their respective child nodes.

This tree structure allows you to programmatically access and manipulate the content and structure of the HTML document using JavaScript or other DOM-manipulation technologies.

pictorial representation of DOM structure img.png

For example, in website http://example.com , Dom structure will look like this

dom.png

The DOM is important because it allows web developers to dynamically change the content, structure, and style of a web page using JavaScript. This enables developers to create more interactive and dynamic web applications.

Here are some of the specific benefits of using the DOM:

  • Dynamic content updates: The DOM allows JavaScript to change the content of a web page without reloading the page. This is useful for creating things like live chat applications, news feeds, and stock tickers.
  • Interactive elements: The DOM allows JavaScript to add interactivity to web pages, such as drop-down menus, tabs, and accordions.
  • Visual effects: The DOM allows JavaScript to create visual effects on web pages, such as animations and transitions.
  • Accessibility: The DOM allows JavaScript to make web pages more accessible to users with disabilities. For example, JavaScript can be used to create screen readers and other assistive technologies.

In addition to these benefits, the DOM is also important because it is a standard interface that is supported by all major web browsers. This makes it easy for developers to write code that will work on all browsers without having to worry about cross-browser compatibility.

Overall, the DOM is an essential tool for web developers who want to create dynamic and interactive web applications.