HTML Basic

1. Within HTML, tags serve as crucial markers, delineating elements across web pages, encapsulating vital components such as headings, paragraphs, and images. Enclosed within angle brackets (< >), these tags conventionally manifest as pairs, comprising an opening tag and a corresponding closing tag.
2. Attributes: HTML tags can also have attributes, which provide additional information about an element. Attributes are specified in the opening tag and are written in the format “attribute=value”.
3. Head section: The head section of an HTML document contains information about the web page, such as the title of the page and links to external stylesheets or scripts.
4. Body section: The body section of an HTML document contains the actual content of the web page, such as text, images, and videos.
5. HTML comments: HTML comments are used to write notes in the source code that are not displayed on the web page. Comments are enclosed in <!–  and –> tags.
6. Links: HTML allows you to create hyperlinks between pages, or to other resources such as images or PDF documents, using the <a> tag.
7. Images: HTML also allows you to embed images in a web page using the <img> tag. Images can have various attributes, such as width, height, and alt text.

These are just a few basic concepts in HTML, but there is much more to learn. HTML is a versatile and powerful language for creating web pages and is often used in conjunction with other web development technologies, such as CSS and JavaScript, to create rich and dynamic web experiences.

<a href="https://www.example.com">Click here to go to Example.com</a>

In this example, the href attribute specifies the URL of the web page or resource that the link points to. Upon clicking the link, the user’s web browser will seamlessly transition to the designated web address.

You can also create links that point to other pages on your own website by using a relative URL. For example, if you want to link to a page called “about.html” in the same directory as your current page, you can use the following code:

<a href="about.html">Click here to go to the About page</a>

You can also add text or images inside the <a> tag to make them clickable, like this:

<a href="https://www.example.com"><img src="example-logo.png" alt="Example logo"></a>

HTML Basic: In this example, the link contains an image (specified using the <img> tag) that is clickable. When the user clicks on the image, their web browser will navigate to the specified URL.

HTML links can also have various attributes, such as target , which specifies where the linked page should be opened (in the same window or a new window), and title , which provides additional information about the linked page when the user hovers over the link with their mouse.

HTML Basic: In HTML, you can add images to your web pages using the <img> tag. Here’s an example of how to add an image to a web page:

<img src="image.jpg" alt="An example image">

HTML Basic: In this example, the src attribute specifies the location of the image file (in this case, “image.jpg”), and the alt attribute provides alternative text to be displayed in case the image cannot be loaded or read by a screen reader. The alt attribute is also important for search engine optimization (SEO) and accessibility purposes.

You can also specify additional attributes for the <img> tag, such as the width and height attributes, which set the size of the image:

<img src="image.jpg" alt="An example image" width="500" height="300">

HTML Basic: In this example, the width attribute sets the width of the image to 500 pixels, and the height attribute sets the height of the image to 300 pixels.

You can also add a caption or description to an image by wrapping it in a <figure> tag and using a <figcaption> tag:

<figure>
  <img src="image.jpg" alt="An example image" width="500" height="300">
  <figcaption>An example image with a caption.</figcaption>
</figure>

HTML Basic: In this example, the <figure> tag groups the image and its caption together, and the <figcaption> tag adds a caption to the image.

It’s also a good practice to use the srcset attribute to specify multiple image sources with different sizes or resolutions to improve the page loading performance on different devices with different screen sizes.

<img src="small.jpg"
     srcset="medium.jpg 800w,
             large.jpg 1200w"
     alt="An example image">

In this example, the srcset attribute specifies three image sources with different widths and resolutions. The browser will automatically choose the best image source to load based on the device’s screen size and resolution.

Adding images to your web pages can enhance the visual appeal and user experience of your site.