# BUILDING YOUR FIRST WEB PAGE WITH HTML AND GIT
HTML(Hyper Text Markup Language)is the most basic building block of a Web. It defines the meaning and structure of a web.
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.
HTML is a markup language, not a programming language, meaning it annotates text to define how it is structured and displayed by web browsers.
It forms the building blocks of all websites and is complemented by CSS for style and JavaScript for interactivity.
HTML uses "Markup" to annotate text, images and other content for displaying in a web browser. HTML markup includes special elements such as <``head``>, <``body``>, <``header``>, <``p``>, and so many more we'll be using in the article.
These elements usually come in pairs - opening and closing tags. Except for some elements that do not have closing tag and are called 'void' element (eg <``br``>).
HTML elements are everything from the opening tags, the content and the closing tags.
Attrributes:They are words used inside an oppening tag that provides more information about html elements e.g href, type="text", src and lots more.
To start writing in HTML, one has to first declear the <!DOCTYPE> which is HTML5. We use index.html to lunch a file because that is the name the browser recognizes.
HTML pages has two main areas;
1.The area that contains data that are not displayed on the page but is considered to be meta data.This is the <head>.
2. The area that is seen in the browser, it is held within the <body>.
The following are some commonly used HTML tags and their meaning.
a``> tags.
<``img: Is used to insert images in a page``>
<``p``>: It is used to create paragraph.
<``br``>: to create line breaks.
<``li``>:list
<``ul``>:unordered list.
<``nav``><:to define a section of navigation.
<``ol``>:ordered list.
<``form``>: to create a form file.
<``table``>: To create a table in Html.
<``head``>: it is used to define information about the content.
<``footer``>:is used to define a footer for a document.
<``p``>.
Let's create a simple html page using some html tags.
<!DOCTYPE html>
<``html lang="en"``>
<``head``>
<``meta charset="UTF-8"``>
<``meta name="viewport" content="width=device-width, initial-scale=1.0"``>
<``title``>My first web page<``/title``>
<``/head``>
<``body``>
<``h1>Blessing's Page</h1``>
<div>
<``p>My name is Blessing Gideon</p``>
<``p>I am 18 years old</p``>
<``p><i>I love to sing and tarvel</i></p``>
<``p> I am <strong>Nigerian</strong></p``>
<``p>my favorite foods are</p``>
<``ul>
<li>fried rice an chicken</li>
<li>Pounded yam and egusi soup</li>
<li>Sharwarma</li>
<``li``>Barbeque fish</li``>
<``/ul``>
<p> i love to travel and make new friends<br> and i'm open for <br> new frienships.<``/p``>
</div>
<``/body``>
<``/html``>
**GIT**
Git is a disributed version control system (CVS) that helps developers track their data bases, colaborate with others and manage multiple versions of a project. It is used to backup codes.
Unlike other version control system, Git is decentralized, which means you do not need a central server, instead every developer has a full copy of the repository on their machine.
Repository which can be seen as a digital file and cabinet that stores all the files and all the changes that have been made. It is like a time machine for code.
Why is version control (GIT) important?
. Distributed system; it is decentralized and there is no need for a central sever.
. Version tracking; keeps track of changes made on the code.
. Collaboration; multiple developers can work on the same project.
. Branching; if you want to create a seperate branch to work on outside of the main code, or if you want to fix a bug or create another feature.
. Merging; is a way of putting a forked history back together again.
. Remote repositories; are versions of your project that are hosted on the internet or network somewhere.
. Extensive tooling; this refers to the wide range of features and commands available within the Git version control system.
. Staging area; it is a file, generally contained in your Git directory, that stores information about what will go into the next commit.
. Speed; Git is fast. Whith git almost all operations are done locally, giving it a huge speed advantage over centrallized sysytems that constantly have to communicate with a server somewhere.
. Open source and free(no liscense needed).
**Setting up a project folder**
In this article, we'll be using GITHUB as our remote platform.
We'll install the github app, register and create an account. Its supper easy to create a Github account.
You need to run a couple initial configuration commands after Github, with your name and email address that was used to register Github on your (VS code) terminal.
Below is the command to run on your teminal.
``git config --global user.name "your name"``
``git config --global user.email "your email"``
After a successful configuration using the above command, we are going to follow the steps bellow to create our html file.
Step 1. we'll create a folder for our first project on our desktop with our teminal or on our Visual studio code editor. We'll name the folder "fproject", then inside the folder we'll create a file and name it "index.html" (from our html page above).
Step 2. we will initialize the git by using the ``git init`` command.
Step 3. We'll then use the
git add origin(remote rep_repo_url
(You get your URl from your github profile).
For example:
``git remote add origin https://github.com/username/repository.git``
command to add our file which we named "index.html" to the staging area.
Step 4. We'll use the
git commit -m
when we are ready to commit our file to our local machine.
Step 5. which is the last step, here we push the commited file to our remote repository which is Github. we use the
``git push command``
to do this.
Sign in with Wallet
Connect another wallet