Skip to content

Latest commit

 

History

History
119 lines (88 loc) · 9.68 KB

clcbwu3gv000908mh9lk35du8.md

File metadata and controls

119 lines (88 loc) · 9.68 KB
Raw

HTML Elements

The main tag in HTML is <html> which is the root of all the tags among the tags present for any webpage. It's also known as the root element and in this case, all other elements would be the decedent of the root i.e. <html> element.

This <html> is then been divided into 2 i.e. <head> and <body>. Let's talk about MetaData, as it contains all the information regarding the such as styling scripting and also helps to connect with the page (i.e. external resources) CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
// It encodes most common characters, basics numbers,english with 8 // bits. 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//
    <title>Html Elements</title>
  </head>
  <body>
    <!-- HTML Elements -->
  </body>
</html>

Sectioning Root

It also knows as <body></body> tag which consists of all the content which is going to render on the web page.

Content sectioning

This allows you to organize the document logically, which helps to create the logical structure for the content on your web page, including header, footer, navigation and headline elements to identify the content.

Elements

Descriptions

<head>

Whatever page-related information is required is present in the <head>
it can be script, external CSS, or external resources.

<body>

Whatever content is rendered on the web page it's in <body> tag.

<h1-h6>

We have 6 types of headlines in HTML, all of the headline elements are block-level elements.

<a href="">

A href is used to create the link, any image for the tag can be wrapped in to give it a link and then use for visual representation.

Here, we have the option to open mail when the user clicks on the link, i.e. by using "mailto:" option to add an email can be provided also along with this you can open a default Email option that the user has already picked.

You can also add target="_blank" you can also add rel="noopener" to the href tag and then use them accordingly i.e to open them in the new tab and ask the browser to navigate without granting a new browser context access to the document that opened it.

This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document.

<img>

The image tag is an inline element, it contains src attribute its and required attribute in an image tag along with it we also have srcset used to render an image for smaller devices i.e. mobile devices.

Along with it we also have alt attributes which are also helpful for describing the image for screen reading and another way around it can be an alternative description for an image.

Along with this we also have an height and width attributes for rendering the images in specific width and height dimensions.

<p>

the paragraph is and block-level element, one of the most commonly used tag for adding content on webpage. The attributes title can be also added to it.

<dd>

Provides the description, definition or value of proceeding terms.

<div>

It is a generic container for content flow, it has not to effect on elements unless CSS is applied to it. It is a pure container for any element and block-level element. It's recommended to use when no semantic element is available to use.

<dl>

Description list element. The element encloses a list of groups of terms and descriptions, it is commonly used for displaying key-value pairs.

<blockquote>

Describes the section that has been quoted from another source.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <figure>
      <blockquote cite="http://www.google.com"
                  title="blockquotes">This is demo for "blockquote"
      </blockquote>
    </figure>

    <!-- Headline from h1-h6 -->
    <h1>Headline Demo 1</h1>
    .
    .
    .
    .
    <h6>Headline Demo 6</h6>

    <!-- Descriptive List  -->
    <dl>
      <dt>Descriptive List</dt>
      <dd>Descrition</dd>
    </dl>

    <!-- Paragreph Tags -->
    <p title="Paragraph tag 1">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
      expedita, culpa placeat, voluptates quod beatae vel incidunt, 
      quis nobis debitis omnis harum reprehenderit maxime porro unde 
      numquam.
    </p>

    <p title="Paragraph tag 2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.                   
      repudiandae non culpa vitae optio minus sit eos itaque quasi?
    </p>

    <!-- Image Tag -->
<img src="https://www.test.com" srcset="https://www.test.com/2/"        alt="Test Flower" size="(max-width: 800px) 200px">

    <!-- Hyper Link -->
    <a href="http://test">Data</a>
    <a href="mailto:test@gmail">email</a>
    <a href="tel:+91 256527537537">Phone</a>
  </body>
</html>

Lorem

Lorem is demo text which is been used to add when you want to add test content for your website in the development mode.

//Alternavtive to add specific words for an lorem text is 

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

You can add this text at any point in time to respective tags as and when required.

How can you create a basic WebPage?

  1. You can follow the below steps to create the basic webpage.

  2. In case you are developing this page on your local machine then code editors like VS code, Sublime etc. are easily available online you can refer to the link to download it and install it on your machine.

  3. Also, create a folder on your desktop or any drive you want to and add the file name index.html to it.

  4. This is a simple HTML page where you can write code for any website which you want to try out for.

  5. To fill the demo content you can use the lorem Ipsum text for demo purposes.

  6. As you will have to load this page in the browser for testing purposes, you can install the live server extension from Ritwik Dey.

  7. This extension i.e. live server will help you to load the webpage in the browser.

Image tag in Detail

We have and <img> where we have several attributes to play with some of which are listed in the table and their example as we demonstrated in the code snippet has src, srcset , width, height, size etc.