Hi everyone, Jaya Krishna Reddy here! I like to share my journey in web development so far with you all. In actual facts, I'm a beginner as well I complete my graduation in civil engineering I don't know about HTML language. I joined in a full stack python course**.**

First 2-3 classes all about introduction of HTML

Download text-editor VScode and extensions in vscode.

What is HTML?

HTML stands for Hypertext Markup Language. It's the standard markup language for creating web pages and web applications. Essentially, HTML provides the structure for web content by using various tags and attributes to define elements such as headings, paragraphs, links, images, forms, and more. When a web browser renders an HTML document, it interprets these tags and displays the content according to the specified structure and formatting instructions.

HTML Basic Structure:

<!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>

</body>
</html>

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.
<html>: The root element of the HTML document. It contains all other elements.
<head>: This section contains meta-information about the document, such as its title, character encoding, viewport settings, and links to external resources like stylesheets and scripts.
<body>: This section contains the visible content of the web page, including headings, paragraphs, images, links, forms, etc.

What is Element:

In HTML, the <element> refers to the building blocks used to structure a web page's content. Elements are composed of tags, attributes, and content.

My first HTML code :

<!DOCTYPE html> <!-- doctype is used to make brower understand following is a HTML Document-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First HTML code</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus<br> maiores facilis iste provident. Impedit cupiditate numquam eum aliquam quia possimus officiis, eos reiciendis repellendus similique vero explicabo, quas saepe sit.
    </p>
    <a href="https://www.google.com/" target="_blank">Go to google</a>

</body>
</html>

My first html code is about heading tags ,paragraph tag,anchor tag

h1 to h6
<p></p>
<a href=""></a>

Heading Tags:

Heading tags in HTML are used to define headings or titles within a document. They provide a way to structure and organize content hierarchically, indicating the importance and relationship of different sections of the document. In HTML, there are six levels of heading tags, from <h1> to <h6>, where <h1> represents the highest level of importance and <h6> the lowest.

<h1> is used for the main heading.
<h2> is used for subheadings.
<h3> is used for a subheading of a subheading.
<h4> is used for a small subheading
<p> is used for paragraphs of text.

The output you get in browser:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph Tag:

The <p> tag in HTML is used to define a paragraph of text. It's a structural element that separates blocks of text or content. When you enclose text within <p> tags, it tells web browsers to display that content as a paragraph, typically with some default spacing before and after.

<p>text</p>

Git and Githib:

How push VS code to Github:

1.Install Git: First, ensure that Git is installed on your computer.

2.Set Up GitHub: If you haven't already, create a GitHub account.

3.Initialize Git Repository: In your VSCode, open the folder containing your project.

4.In vscode left side--> accounts ->sign in--> choose github and it will open browser and github login screen , enter username,password--> login-->authorize-->it will redirect to vscode.

5. Then, open the integrated terminal by selecting Terminal > New Terminal from the menu, or by using the shortcut Ctrl + `. In the terminal, run the following command to initialize a Git repository:

\>>>git init - it will initiate git into your folder

\>>>git add . -- it will add all the files into git

\>>>git commit -m "update" - it will commit your git and added a message update

First time I get errors this two

git config --global user.email"you@example.com"

git config --global user.name"Your Name"

To over come this errors

git config --global user.email"your email id" git config --global user.name"username"

Enter your github email and user_name of github account

\>>>git remote add origin "link"

\>link you get in GitHub repository copy and paste it

Push Changes to GitHub: Finally, push your committed changes to GitHub

\>>>git push -u origin master

Anchor Tag:

The anchor tag, <a>, is one of the most fundamental elements in HTML. It's primarily used to create hyperlinks, allowing users to navigate between different web pages or sections within the same page.

<a href="URL">Link Text</a>

href: The attribute that specifies the URL (Uniform Resource Locator) of the page or resource that the link points to. It can be an absolute URL (starting with http:// or https://) or a relative URL (relative to the current page).
Link Text: The visible text or content of the link that users can click on to navigate to the specified URL.

            <!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>
                <h3>Instagram Profile</h3>
                <a href="https://www.instagram.com/mr.jaya_045?utm_source=qr&igsh=MWYyYnpzZnR2aGh2OA==" target="_blank">mr.jaya045</a>
            </body>
            </html>

In this example, the anchor tag <a> creates a hyperlink to my instagram profle. The link text "mr.jaya045" is displayed on the page, and when users click on it, they will be directed to the specified URL ("instagram.com/mr.jaya_045?utm_source=qr&..").

Additionally, I use the target attribute to specify where the linked content should be displayed. For example, _blank will open the link in a new tab.

Image Tag:

The image tag in HTML is used to embed images into a web page. It's represented by the <img> element. Unlike other HTML elements, the image tag does not have a closing tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myself</title>
</head>
<body>
    <h1><u>Self Introduction</u></h1>
    <img src="../HTML/IMG_20230508_175919.jpg" alt="image" height="150" width="150">
</body>
</head>

src: Specifies the URL or file path of the image.
alt: Provides alternative text for the image, which is displayed if the image cannot be loaded or for accessibility purposes.
../HTML/IMG_20230508_175919.jpg: This is the source of the image. You would replace it with the actual URL or file path of the image you want to display.
"image": This is the alternative text for the image.

Here's a more detailed example that includes additional attributes
width: Specifies the width of the image in pixels.
height: Specifies the height of the image in pixels.

These attributes help control the size of the displayed image on the web page.

Self closing Tags:

Self-closing tags, also known as void elements or empty elements, are HTML elements that do not require a closing tag because they don't have any content inside them. Instead, they may have attributes that define their behavior or appearance. These elements are closed in the opening tag itself with a trailing slash before the closing angle bracket.

Some common self-closing tags include <img>, <br>, <hr>. I know this .

<img src="../HTML/IMG_20230508_175919.jpg" alt="image" height="150" width="150">
<hr> <!-- hr tag for horizontal line -->
<br> <!-- br tag for break the paragraphs -->

They are terminated with a forward slash (/) before the closing angle bracket (>).

Attributes can be added to self-closing tags to provide additional information or settings. For example, the src and alt attributes for the <img> tag.

Formatting Tags:

Formatting tags in HTML are used to structure and style the content of a web page. These tags typically don't carry any semantic meaning but are essential for controlling the presentation of the content. Some common formatting tags include <b>, <i>, <u>, <strong>, <em>, <sub>, <sup>, <br>, <hr>, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <h1>Formatting Tag Demo</h1>
    <img src="https://qph.cf2.quoracdn.net/main-qimg-953adb64071e441bcf54bbe71c9d9b60-pjlq" alt="Formatting tags image" height="100" width="100">
    <p>HTML Formatting is a process that allows us to format text to increase its visual appeal. Various HTML tags can change how text appears on a web page and make the text attractive. We can use HTML text formatting tags to bold, italicize, underlined text, and do more.</p>
    <b>This is used to bold the text</b><br>
    <strong>This is used to bold the text</strong><br>
    <i>This is used to italic the text</i><br>
    <em>This is used to italic the text</em><br>
    <u>This will make text underline</u>
    <p>H<sub>2</sub>O</p>
    <!--sub tag is used to subscript-->
    <p>(a+b)<sup>2</sup></p>
    <!--sup tag is used to superscript-->
    <del>text deleted</del><br>
    <ins>added</ins><br>
    <big>big text</big><br>
    <small>small text</small><br>
    <pre>
        Hi everyone
        my self Jaya Krishna Reddy
        ------------
    </pre>
    <code>
        def f1(a,b):
             return a+b
        print f1(10,20)
    </code>
</body>
</html>

<b>: Renders the enclosed text in bold.
<i>: Renders the enclosed text in italic.
<u>: Renders the enclosed text with an underline.
<strong>: Indicates that the enclosed text is of strong importance, typically rendered as bold.
<em>: Indicates emphasis, typically rendered as italic.
<sub>: Renders the enclosed text as subscript (appears below the baseline).
<sup>: Renders the enclosed text as superscript (appears above the baseline).
<br>: Inserts a line break, forcing text or elements after it onto the next line.
<hr>: Inserts a horizontal line to create a thematic break in the content flow.
<pre> :tag is especially handy when displaying code snippets, as it maintains the indentation and structure of the code, making it easier to read and understand.
<del> tag: It indicates text that has been removed or deleted from the document. Browsers typically render text enclosed in <del> tags with a strikethrough style, indicating that it has been deleted.
<ins> tag: It represents text that has been inserted or added to the document. Browsers usually render text enclosed in <ins> tags with an underline or a different color to indicate that it's new content.
<strike> tag: This tag is used to render text with a strikethrough effect, indicating that it's no longer relevant or accurate. It's similar to the <del> tag but is deprecated in HTML5.

Conclusion:

Thanks for visiting my blog......

This is my first week journey in HTML ............

Thanks you Durga Prasad sir..

Github Profile:

Check there my codes I done.......

https://github.com/Jaya045

My HTML journey week 1