Getting started with HTML

What is HTML?

HTML stands for Hypertext Markup Language, and it is a standard markup language used to create web pages. It is the backbone of the internet and provides the basic structure of web pages. HTML uses a series of elements and tags to describe the structure of a web page and its content, including headings, paragraphs, links, images, videos, and more. These elements are combined to create the overall layout and design of a web page, which can then be viewed in a web browser. HTML is a relatively simple language to learn and is essential for anyone looking to create and publish web pages on the internet.

Setting up the Development Environment

Setting up a development environment for HTML is relatively easy, and requires only a few necessary tools. Here are the steps to set up a basic development environment for HTML:

Text Editor: The first thing you will need is a good text editor. Examples of popular text editors include Visual Studio Code, Atom, Sublime Text, or Notepad++. Choose one that suits your needs and install it.
Web Browser: Next, you will need to install a web browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge. You will use your web browser to preview your HTML web pages as you develop them.
HTML5 Boilerplate: HTML5 Boilerplate is a popular front-end template that will get you started quickly. It includes all the necessary files and folders to get you started with HTML development. You can download the HTML5 Boilerplate from the following link: https://html5boilerplate.com/
File Structure: Once you have downloaded HTML5 Boilerplate, extract the files to a folder on your computer. Inside the folder, you will find a file called index.html. This file will be your starting point for your HTML development.
Opening index.html: Now that you have the file set up, open index.html using your text editor. You will now see the basic HTML structure that you can start working on.

The basic HTML structure

The basic HTML structure consists of several elements that form the foundation of any web page. Here are the core HTML structures:

<!DOCTYPE html>: This is the doctype declaration that tells the browser what version of HTML is being used on the page. In modern HTML, this is always set to HTML.
<html>: The <html> tag represents the root element of an HTML page, and it contains all other HTML elements. The opening tag should always be paired with a closing tag, </html>.
<head>: The <head> tag is not visible on the web page and contains metadata about the HTML page such as title, keywords, and script files.
<title>: The <title> tag goes inside the head tag and specifies the title for the HTML page that appears in the browser window.
<body>: The <body> tag contains all the visible content of the HTML page such as text, images, videos, and other HTML elements.
<h1>...<h6>: These are headers that represent the importance of the text on the page. <h1> is the most important and <h6> is the least important header.
<p>: The <p> tag stands for paragraph and is used to enclose one or more sentences of text.
<a>: The <a> tag is used to create links to other web pages or different sections on the same page.
<img>: The <img> tag is used to insert images into the web page.

These are some basic HTML structures that you can use to create your first web page. As you develop your HTML skills, you will learn more elements and better ways to structure your web pages.

Creating Headings and Text Formatting in HTML

HTML provides several options to add headings and format text. Headings are used to create headings and titles on the web page, while text formatting is used to emphasize and highlight text. Here are the HTML tags related to creating headings and formatting text:

Heading tags (<h1> to <h6>): HTML provides six levels of headings, <h1> being the most important and <h6> being the least important. You can use these tags to create headings and subheadings for your web pages.

<h1>This is the main heading</h1>
<h2>This is the subheading</h2>

Paragraph tag (<p>): The <p> tag is used to create paragraphs of text. You can use it to group multiple sentences or words together to create a block of text.

<p>This is a paragraph of text.</p>
<p>Another paragraph of text.</p>

Bold tag (<b>): The <b> tag is used to make text bold. It is often used to highlight important words or phrases.

<p>This text is <b>bold</b>.</p>

Italic tag (<i>): The <i> tag is used to make text italic. It is often used to emphasize or stress certain words or phrases.

<p>This text is <i>italic</i>.</p>

Underline tag (<u>): The <u> tag is used to underline text. It is often used to highlight or emphasize words or phrases.

<p>This text is <u>underlined</u>.</p>

Strikethrough tag (<s> or <strike>): The <s> or <strike> tag is used to create a strikethrough text effect. It is often used to show that text has been deleted or is no longer valid.

<p>This text is <s>striked through</s>.</p>

By using these tags, you can make your web pages more visually appealing and emphasize the importance of certain words or phrases.

Adding images and media files to our HTML code

Adding images and media in HTML is a straightforward process. Here are the basic steps:

Use the <img> tag to add an image. The <img> tag is a self-closing tag and does not have a closing tag. The src attribute specifies the URL or file path of the image. The alt attribute provides an alternative text description of the image that will be displayed if the image fails to load, or for screen readers used by visually impaired users.

<img src="image.jpg" alt="A picture of a cute cat">

To add audio or video, you can use the <audio> and <video> tags, respectively. The src attribute specifies the URL or file path of the media file. The <source> tag can be used inside the <audio> and <video> tags to provide alternative file types that the browser can use, depending on its compatibility.

<!-- audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

<!-- video -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

If you want to embed media from another website or service, you can use the <iframe> tag. The src attribute specifies the URL of the video or audio player. You can adjust the width and height of the player by using the width and height attributes, respectively.

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

Keep in mind that images and media files can take up a lot of bandwidth and slow down web page loading times. It's important to optimize images and videos for the web and use a content delivery network (CDN) whenever possible to mitigate these issues.

Creating links in our HTML web page

Creating links in HTML is a simple process. Here are the basic steps:

Use the <a> tag to create a link. The href attribute specifies the destination URL that the user will be directed to when they click on the link.

<a href="https://www.example.com">Link text</a>

To create an internal link within your website, you can use a relative URL. For example, if you want to link to a page called "about.html" that is located in the same folder as your current HTML file, you can use the following code:

<a href="about.html">About Us</a>

If you want to link to a specific section on a web page, you can use an anchor tag. An anchor tag creates a named target within the same HTML file that can be linked to from elsewhere. To create an anchor tag, you can use the id attribute to specify the anchor's name, and then link to it with a pound symbol # followed by the anchor name.

<!-- anchor tag -->
<h2 id="features">Features</h2>
<p>Some information about the product features...</p>

<!-- link to the anchor -->
<a href="#features">Jump to Features</a>

You can style your links using CSS, and you can use the target attribute to specify how the link should be opened, either in the same or in a new window or tab.

<a href="https://www.example.com" target="_blank" class="my-link">Link text</a>

With these basic steps, you can create links that direct users to other pages, or specific sections within the same page.

HTML Forms

In HTML, a form is an area in which the user can enter information that can be sent to a server for processing. Forms are essential for collecting and processing user inputs for various purposes such as contacting the website owner, making a payment, or signing up for a newsletter. A form allows users to enter data and interact with a website.

Here is an example of a basic form:

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

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

In the above example, we have created a form using the <form> tag. The action attribute specifies the URL where the form data will be sent. The method attribute specifies the HTTP method that will be used to send the data. In this example, we are using the POST method.

We have also created three form fields using the <label> and <input> tags. The first input is of text type and used to collect the user's name; the second input is of email type and used to collect the user's email address, and the final input is a textarea used to collect the user's message.

The required attribute on each input field ensures that the user can not submit the form without filling out all required information.

Finally, we have a submit button using the <button> tag. When the user clicks the submit button, the form data is sent to the URL specified in the forms action attribute using the method specified in the method attribute.

Overall, HTML forms are a powerful way to allow users to input data and interact with your website. Many attributes can be used with input fields, such as placeholder to show a hint within the input field or maxlength to limit the maximum number of characters that can be entered. Since forms can contain sensitive information, it is important to handle form submissions securely on the server side.

Hosting our HTML website on GitHub

Publishing a website on GitHub is a straightforward process. Here are the steps you can follow:

Create a new repository: First, create a new repository on GitHub. Name the repository with the same name as the domain name you want to assign to your website, for example, if you want to name your website "example.com," the repository name should be "example.github.io."
Create a new index file: Create an index.html file in the root directory of your new repository. This file will be the homepage of your website. You can write your HTML and CSS code in this file.
Commit and push your changes: Commit your changes and push them to the master branch of your repository.
Enable GitHub Pages: Once you have pushed the index.html file to the master branch, you can enable GitHub Pages to host your website. Go to your repository's settings and scroll down to the GitHub Pages section. Select the master branch as the source and click on "Save." GitHub Pages should now be enabled for your repository.
Access your website: Now you can access your website by navigating to https://yourusername.github.io/repositoryname. Replace yourusername with your GitHub username and repositoryname with the name of the repository you created.

That's it! Your website should now be up and running on GitHub Pages. From now on, any changes you push to the master branch of your repository will be reflected on your website.

Hope you had a good reading experience.

Feedback in the comment section would be immensely appreciated.

Connect with me on my socials:

Twitter: https://twitter.com/utkarshktweets

LinkedIn: https://www.linkedin.com/in/utkarsh-krishna-3bab41240

GitHub: https://github.com/utkarshkrishna2004

Alright folks, that's all from my side.

This is Utkarsh Krishna

Signing-Off

Cheers.

Utkarsh Krishna's Blog