All about Html

on


HTML Basics - <html>, <head>,<title>,<body> :
  • HTML stands for Hyper Text Markup Language
  • 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>.
  • <html>: Angle brackets i.e. less than and greater than < > signs are known as tags when we add the html text ie attribute inside it so combined <html > this is called an HTML tag. 
  • <head>: This head tag contains the metadata (data about the data). Metadata typically defines the document title, character set, styles, scripts, and other meta information
  • <title>: defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
  • <body>: tag defines the document's body.contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
video link : watch Now
headings <h1> to <h6> , <p>, <br> , <hr> , <pre> :
  • <h1>:  defines the most important heading
  • <h2><h3><h4><h5>: this lies inbetween h1 and h6 
  • <h6>: defines the least important heading
    • eg 

      H1

      H2

      H3

      H4

      H5
      H6
  • <p>: 
    • The <p> tag defines a paragraph.
    • Browsers automatically add a single blank line before and after each <p> element.
  • <br>:

    • The <br> tag inserts a single line break.

    • The <br> tag is an empty tag which means that it has no end tag.

    • The <br> tag is useful for writing addresses or poems.

  • <hr>: hr (horizontal rule) is used to separate content (or define a change) in an HTML page.
  • <pre>:
    • The <pre> tag defines preformatted text.
    • Text in a <pre> 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.
Formating tags:(b,i,u,strong,em,mark,small,del,marquee, sub ,sup):
  • <b> - Bold text
  • <i> - Italic text
  • <u> - Underline text
  • <strong> - Important text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <marquee> - scroll the text
  • <sub> - Subscript text
  • <sup> - Superscript text
<!doctype html >  and html comments :
  • <!doctype html> :

    • All HTML documents must start with a <!DOCTYPE> declaration.

    • The declaration is not an HTML tag. It is "information" to the browser about what document type to expect.

    • In HTML 5, the declaration is simple:<!DOCTYPE html>

  • html comments :
    • HTML comments are not displayed in the browser, but they can help document your HTML source code.
Quatation and Citation :

1. Introduction to HTML Quotations and Citations

HTML offers various elements to format and structure text content. When it comes to quoting or citing external sources, it's essential to use the appropriate elements to convey your message accurately. Let's explore these elements one by one:

2. The <blockquote> Element

The <blockquote> element is used to enclose a section of text that is a quotation from another source. It typically renders the text indented and may display quotation marks around it.

3. The <q> Element

The <q> element, on the other hand, is used for inline quotations within a paragraph or sentence. It wraps the quoted text within double quotation marks, providing semantic meaning to the quotation.

4. The <abbr> Element

When you need to define an abbreviation or acronym, the <abbr> element is your tool. It allows you to specify the full form of the abbreviation, enhancing accessibility and understanding.

5. The <address> Element

In HTML, the <address> element is used to provide contact information for the author or the owner of a document or an article. It's commonly placed in the footer of a web page.

6. The <cite> Element

The <cite> element is used to indicate the title of a creative work, such as a book, movie, or song, and the name of its author. It is often used within the <blockquote> or <q> elements to attribute quotes correctly.

7. The <bdo> Element

Sometimes, you might need to override the text direction of a specific part of your content, especially when dealing with multiple languages. The <bdo> element, short for "bi-directional override," comes in handy for this purpose.
 Links and Images :

  • 1. src Attribute

    The src attribute (short for "source") is perhaps the most critical attribute within the <img> tag. It specifies the path to the image file that you want to display on your webpage. The src attribute can point to either a local file on the webserver or an external resource using a URL.

    Here's an example of how the src attribute is used:

    <img src="image.jpg" alt="A beautiful landscape">

    In this example, the src attribute points to a local file named "image.jpg."

    2. alt Attribute

    The alt attribute (short for "alternative text") provides a text description of the image. This description is crucial for accessibility, as it is read aloud by screen readers to visually impaired users. Additionally, it serves as a fallback in case the image fails to load or if the user has disabled images in their browser.

    <img src="image.jpg" alt="A beautiful landscape">

    In this case, "A beautiful landscape" serves as the alternative text for the image.

    3. width and height Attributes

    The width and height attributes are used to define the dimensions of the image. These attributes are not mandatory, but they play a significant role in optimizing the page loading speed and layout consistency.

    <img src="image.jpg" alt="A beautiful landscape" width="800" height="600">

    In this example, the width is set to 800 pixels, and the height is set to 600 pixels. Specifying these attributes allows the browser to allocate the required space for the image, preventing page layout shifts while the image loads.
Html Lists :

  • Unordered Lists (ul) and List Items (li)

    Unordered lists, denoted by the <ul> tag, are used to represent a collection of items with no specific order or sequence. Each item within an unordered list is marked with the <li> (list item) tag.

    Here's an example of an unordered list:

    <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

    In this example, we have an unordered list with three list items. The browser typically renders these as bullet points, although the exact style can be customized using CSS.

    Ordered Lists (ol) and List Items (li)

    Ordered lists, on the other hand, are created with the <ol> tag and are used when you want to represent a list of items in a specific, ordered sequence. Each list item is still marked with the <li> tag.

    Here's an example of an ordered list:

    <ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

    In this case, the browser will typically render the list items with sequential numbers, such as "1.", "2.", "3."

    Definition Lists (dl), Definition Terms (dt), and Definition Descriptions (dd)

    Definition lists are useful when you want to present terms and their corresponding definitions. They consist of three parts: the <dl> (definition list) tag, the <dt> (definition term) tag, and the <dd> (definition description) tag.

    Here's an example of a definition list:

    <dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A high-level, interpreted scripting language</dd>
</dl>

    In this example, we have a definition list with three term-definition pairs. The <dt> tag represents the term (e.g., "HTML"), and the <dd> tag represents the corresponding definition (e.g., "HyperText Markup Language").
Html Tables :

  • The Basic Table Structure

    Before we dive into the specifics, let's start with the basic structure of an HTML table:

    <table>
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

    In this example, we have a table containing a caption, a header row with three header cells (th), and two data rows with corresponding data cells (td).

    Borders

    Borders help define the boundaries of table elements, making the table easier to read and understand. You can add borders to your table using CSS or by adding the border attribute to the <table> element:

    <table border="1">
  <!-- Table content here -->
</table>

    Here, the border attribute with a value of "1" adds a border with a thickness of one pixel around the entire table.

    Table Headers (th)

    Table headers, represented by the <th> element, are used to label and describe the content in a table column. They are typically placed in the <thead> section of the table for clarity. Browsers often render table headers in bold text and center them by default.

    Table Data Cells (td)

    Data cells, represented by the <td> element, contain the actual data in a table. They are placed within the <tbody> section of the table. Browsers typically render data cells with regular text alignment.

    Captions

    A table caption, enclosed within the <caption> element, provides a brief description or title for the table. It is displayed above or below the table, depending on CSS styles or user settings. Captions enhance accessibility and understanding for users.

    Colspan and Rowspan

    Colspan and rowspan attributes allow you to merge table cells horizontally (colspan) or vertically (rowspan) to create more complex table structures.

    • Colspan: Use the colspan attribute to specify how many columns a cell should span. For example, to make a cell span two columns, use colspan="2".
    <td colspan="2">This cell spans two columns</td>
    • Rowspan: Use the rowspan attribute to specify how many rows a cell should span vertically. For example, to make a cell span two rows, use rowspan="2".
    <td rowspan="2">This cell spans two rows</td>
Html Forms:

  • The <form> Element

    The <form> element serves as the container for all form-related elements. It defines the form's structure and behavior, including where the submitted data should be sent. It typically includes attributes like action and method.

    <form action="/submit" method="post">
  <!-- Form elements go here -->
</form>

    Input Fields: <input>

    The <input> element is the workhorse of forms. It allows users to input various types of data, such as text, numbers, dates, and more. The type attribute specifies the input field's behavior

    <input type="text" name="username" placeholder="Enter your username">

    Associating Labels: <label>

    Labels, defined by the <label> element, provide a text description for input fields, making it clear to users what information is expected. It's essential for accessibility and user experience.

    <label for="username">Username:</label>
<input type="text" id="username" name="username">

    Dropdown Menus: <select> and <option>

    Dropdown menus, created with the <select> element, allow users to choose from a list of options. The <option> element defines each selectable item within the menu.

    <select name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

    Multiline Text: <textarea>

    For longer text input, use the <textarea> element. It provides a resizable text input area where users can enter paragraphs of text.

    <textarea name="comments" rows="4" cols="50" placeholder="Enter your comments"></textarea>

    Form Submission: <button>

    To submit the form, use the <button> element with the type="submit" attribute. It triggers the form submission when clicked.

    <button type="submit">Submit</button>

    Autocomplete Suggestions: <datalist> and <option>

    The <datalist> element provides a list of predefined options for input fields, enhancing user experience by offering autocomplete suggestions.

    <label for="fruits">Choose a fruit:</label>
<input type="text" id="fruits" name="fruit" list="fruits-list">
<datalist id="fruits-list">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

    Grouping Options: <optgroup>

    The <optgroup> element allows you to group related options within a <select> element, improving the organization of selectable items.

    <select name="vehicle">
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Bikes">
    <option value="sports">Sports Bike</option>
    <option value="cruiser">Cruiser Bike</option>
  </optgroup>
</select>

    The name Attribute

    The name attribute is crucial for form elements, as it defines the variable name for the data submitted to the server. It's essential for processing form data on the server-side.

    <input type="text" name="email" placeholder="Enter your email">
Html Forms Input Types:

  • 1. Text Input

    The text input type, defined by <input type="text">, allows users to enter single-line text, such as names, addresses, and messages.

    <input type="text" name="username" placeholder="Enter your username">

    2. Radio Buttons

    Radio buttons (<input type="radio">) are used when users need to select one option from a list. Only one radio button within the same group can be selected at a time.

    <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

    3. Checkboxes

    Checkboxes (<input type="checkbox">) allow users to select one or more options from a list independently

    <input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music"> Music

    4. Submit and Button

    Submit buttons (<input type="submit">) are used to submit the form, while button elements (<button>) can trigger custom JavaScript actions.

    <input type="submit" value="Submit">
<button type="button" onclick="myFunction()">Click me</button>

    5. Color

    The color input type (<input type="color">) allows users to choose colors from a color picker dialog.

    <label for="colorPicker">Choose a color:</label>
<input type="color" id="colorPicker" name="color">

    6. Date, Datetime, and Week

    Date-related input types (<input type="date">, <input type="datetime-local">, <input type="week">) enable users to select specific dates, date-time combinations, or weeks.

    <input type="date" name="birthdate">
<input type="datetime-local" name="eventDateTime">
<input type="week" name="vacationWeek">

    7. Email, Number, and Range

    The email input type (<input type="email">) ensures valid email addresses, while the number input type (<input type="number">) restricts input to numeric values. The range input type (<input type="range">) allows users to select values from a specified range.

    <input type="email" name="useremail">
<input type="number" name="quantity" min="1" max="100">
<input type="range" name="volume" min="0" max="10">

    8. Search, Tel, and URL

    The search input type (<input type="search">) provides a search input field with built-in search functionality. The tel input type (<input type="tel">) is used for telephone numbers, and the URL input type (<input type="url">) ensures valid URLs.

    <input type="search" name="searchQuery">
<input type="tel" name="phoneNumber">
<input type="url" name="websiteUrl">

    9. Time

    The time input type (<input type="time">) allows users to input a specific time.

    <input type="time" name="appointmentTime">
Html Elements:

  • <audio> and <video> Elements

    The <audio> and <video> elements enable web developers to seamlessly integrate multimedia content into webpages. They support a variety of audio and video formats, providing compatibility with different browsers and devices.

    Embedding Audio with <audio>

    <audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
    • The controls attribute adds playback controls, such as play, pause, and volume, to the audio player.
    • Multiple <source> elements can be included to provide alternative formats for broader compatibility.

    Embedding Video with <video>

    <video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>
    • The controls attribute adds video playback controls.
    • Width and height attributes determine the video's display size.
    • As with <audio>, multiple <source> elements can be used to support various video formats.

    <iframe> Element

    The <iframe> (inline frame) element allows web developers to embed external web content, such as maps, videos, or other websites, within their own pages.

    <iframe src="https://www.example.com" width="800" height="600" title="External Website"></iframe>
    • The src attribute specifies the URL of the embedded content.
    • Width and height attributes determine the frame's dimensions.
    • The title attribute provides a text description for accessibility.

    <legend> and <fieldset> Elements

    The <legend> and <fieldset> elements are used to group and label form controls, making complex forms more accessible and organized.

    <fieldset>
  <legend>Contact Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
</fieldset>
    • The <fieldset> element creates a container for grouping related form controls.
    • <legend> provides a title or label for the fieldset, helping users understand the purpose of the grouped controls.
    • The for attribute in <label> elements associates labels with their corresponding form controls by referencing the control's id.
Html Elements:

  • <article>

    The <article> element is used to encapsulate a self-contained piece of content, such as a news article, blog post, or forum post. It should make sense on its own and be able to be distributed independently.

    <article>
  <h2>Introducing HTML5 Semantic Elements</h2>
  <p>HTML5 semantic elements are designed to...</p>
</article>

    <aside>

    <aside> is used for content that is tangentially related to the main content but can be considered separate, such as sidebars, pull quotes, or advertisements.

    <article>
  <h2>Exploring HTML5 Elements</h2>
  <p>...</p>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">Understanding HTML5 Semantics</a></li>
      <li><a href="#">Mastering CSS Grid</a></li>
    </ul>
  </aside>
</article>

    <figcaption> and <figure>

    <figcaption> and <figure> work together to associate a caption with an image or other media content, enhancing accessibility and providing context.

    <figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>Scenic view of a serene landscape.</figcaption>
</figure>

    <footer>

    The <footer> element represents the footer of a section or page, typically containing copyright information, contact details, and related links.

    <footer>
  <p>&copy; 2023 MyWebsite</p>
  <nav>
    <ul>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</footer>

    <header>

    <header> represents the header of a section or page, often containing logos, headings, and navigation menus.

    <header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
    </ul>
  </nav>
</header>

    <mark>

    The <mark> element highlights or marks text for reference or emphasis.

    <p>Important dates:<mark> October 24, 2023</mark> and <mark>November 10, 2023</mark></p>

    <nav>

    <nav> is used to define navigation menus or links within a page or site.

    <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

    <progress>

    The <progress> element represents the completion progress of a task, such as a file upload or a form submission.

    <progress value="70" max="100"></progress>

    <section>

    <section> defines a thematic grouping of content within a document, such as chapters, subsections, or parts of an article.

    <section>
  <h2>Section 1: Introduction</h2>
  <p>...</p>
</section>
<section>
  <h2>Section 2: Features</h2>
  <p>...</p>
</section>

    <summary>

    The <summary> element is used in conjunction with the <details> element to provide a summary or heading for a collapsible content section.

    <details>
  <summary>Click to expand</summary>
  <p>Hidden content goes here...</p>
</details>

    <time>

    <time> represents a specific point in time or a range of time. It helps machines and search engines understand dates and times on the page.

    <p>Event date: <time datetime="2023-09-30T18:30:00">September 30, 2023, 6:30 PM</time></p>
Location: India

Comments

Post a Comment