HOW TO BUILD A SIMPLE WEBPAGE AND TRACK IT WITH GIT,

INTRODUCTION:
1.Explainwhat HTML an GIT are.
what is html:Hypertext Markup Language (HTML) is the standard markup language[a] for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript, a programming language.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img> and <input> directly introduce content into the page. Other tags such as <p> and </p> surround and provide informationabout document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page.

WHAT IS GIT:Git (/ɡɪt/)[8] is a distributed version control system[9] that tracks versions of files. It is often used to control source code by programmers who are developing software collaboratively.

Design goals of Git include speed, data integrity, and support for distributed, non-linear workflows — thousands of parallel branches running on different computers.[10][11][12]

As with most other distributed version control systems, and unlike most client–server systems, Git maintains a local copy of the entire repository, also known as "repo", with history and version-tracking abilities, independent of network access or a central server. A repository is stored on each computer in a standard directory with additional, hidden files to provide version control capabilities.[13] Git provides features to synchronize changes between repositories that share history; copied (cloned) from each other. For collaboration, Git supports synchronizing with repositories on remote machines. Although all repositories (with the same history) are peers, developers often use a central server to host a repository to hold an integrated copy.

WHY IS VERSION CONTROLGIT IS IMPORTANT.Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source.

2.SETTING UP A PROJECT;

How to create a project folder:

To create a folder on your computer, right-click on an empty space in the desired location, then select "New" and choose "Folder"; you can also use the keyboard shortcut Ctrl + Shift + N (on Windows) to quickly create a new folder.
Key steps:
Navigate: Go to the location where you want to create the folder.
Right-click: Click right on an empty area.
Select "New": From the menu, choose "New".
Choose "Folder": Click on "Folder" to create a new folder.
Name it: Type the desired name for your folder.

How to initialize a git repository:

A Git repository is a virtual storage of your project. It allows you to save versions of your code, which you can access when needed.

To create a new repo, you'll use the git init command. git init is a one-time command you use during the initial setup of a new repo. Executing this command will create a new .git subdirectory in your current working directory. This will also create a new main branch.

Versioning an existing project with a new git repository
This example assumes you already have an existing project folder that you would like to create a repo within. You'll first cd to the root project folder and then execute the git init command.

cd /path/to/your/existing/code
git init
Pointing git init to an existing project directory will execute the same initialization setup as mentioned above, but scoped to that project directory.

git init <project directory>

Creating the first index.html file:

Inside the new folder create a file named index.html. index.html is a special file name which indicates that this is the default webpage for this directory of our website.

Just like most people organize their files into folders and sub-folders, websites are also organized in this same way. When your website is run by the browser it will use the directory of the HTML file to determine the web page’s URL. This URL is either relative to your local file system, or to your hosted website.

Now that we have our file created, let’s add some text in it and test it out on the browser. Inside index.html type Hello World.

3.Writting the HTML code;

A simple structure for a webpage:Example;

<!DOCTYPE html>
<html>
<head>
<title>My Website Title</title>
</head>
<body>
Hello World
</body>
</html>

<html>

Adding title an some content;
(e.g.,heading,paragraphs,and link):
Headings in HTML serve the essential purpose of structuring content. They play a vital role in organizing and categorizing information, making it more comprehensible for both human users and search engine algorithms.

HTML offers a total of six hierarchical levels of headings, ranging from <h1> to <h6>, each with a unique significance. <h1> is the highest level, typically used for the main title or primary section of a webpage, while <h6> represents the lowest level, usually reserved for sub-subsections or minor details within the contentParagraphs in HTML,
represented by the <p> element, serve as the fundamental means of organizing textual content on webpages. They are used to group together related text content. By wrapping text in <p> tags, you indicate that this content forms a cohesive unit.

These tags play a crucial role in enhancing the readability and comprehension of the information presented. By encapsulating text within <p> tags, web developers signal to both browsers and readers that the enclosed content is a coherent and standalone unit of information.

HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

4.Using Git For Version Control:

git add:
To connect a new project to a remote Git repository, you must create a Git repo locally, add files and perform at least one commit.
Git's commit history is designed to be immutable (for the most part) and track every change in your project so you never lose work. However, sometimes it's necessary to rewrite Git history, so Git provides a few tools for editing existing commits.

Adding New Changes To Commits
The most common use case for this is when you make a commit message, and then, before pushing to your remote, realize that you messed up and need to make a small change. You could of course just make a second commit, but that's unnecessary, and also shows all your coworkers your dumb mistake when you eventually push to the remote.

And added every change in your repo to the staged changes, and committed it, before realizing, "oh crap! I didn't mean to commit that one file!" In this case, you would need to send all the changes back to staging, and then manually unstage the files you don't want to push.

The solution is to perform a reset, removing the commit and sending the changes back. There are a few kinds of resets, but they all involve taking commits from Git's history and sending them back to either staging, the local directory, or straight to the trash.

writting maninful commit mssages:

Any seasoned developer who's rifled through Git
Git commit message best practices
The seven commonly accepted git commit message best practices are as follows:

Limit the subject line to 50 characters.
Capitalize only the first letter in the subject line.
Don't put a period at the end of the subject line.
Insert a blank line between the subject line and the body.
Wrap the body at 72 characters.
Use the imperative mood.
Describe what was done and why, but not how.

5.Pushing Code To GitHub;
How to crate GitHub repository:
Optionally, to create a repository with the directory structure and files of an existing repository, select the Choose a template dropdown menu and click a template repository. You'll see template repositories that are owned by you and organizations you're a member of or that you've used before. For more information, see Creating a repository from a template.

Optionally, if you chose to use a template, to include the directory structure and files from all branches in the template, and not just the default branch, select Include all branches.

Use the Owner dropdown menu to select the account you want to own the repository.

Connectting local repository to github:
You can add a Git repository from your local computer to GitHub Desktop by dragging the folder onto the GitHub Desktop window. If you drag multiple Git folders into GitHub Desktop at the same time, each folder will be added as a separate Git repository.

Pushing changes to GitHub:
git pull origin master
git push origin master
Note that git pull will merge the remote's changes into your local branch, but an alternative to this would be to rebase instead:

git pull --rebase origin master
Share
Improve this answer
Follow
answered Sep 20, 2016 at 1:22
Tim Biegeleisen's user avatar
Tim Biegeleisen
521k2929 gold badges315315 silver badges388388 bronze badges
This did not help. I kept getting the same error. I just manully added the files! –
GVS
CommentedSep 20, 2016 at 1:36
1
I just manually added the file ... what does this mean? Pulling should unequivocally bring your local branch up to date with the remote. –

6. Conclusion;
Summary of what i learn,
I look forward to geting more knowlege.