Your GitHub Learning Lab Repository for Intro to HTML

By Bora KIŞ
Last update: Dec 24, 2021
Comments: 4

Your GitHub Learning Lab Repository for Intro to HTML

Welcome to your repository for your GitHub Learning Lab course. This repository will be used during the different activities that I will be guiding you through.

Oh! I haven't introduced myself...

I'm the GitHub Learning Lab bot and I'm here to help guide you in your journey to learn and master the various topics covered in this course. I will be using Issue and Pull Request comments to communicate with you. In fact, I already added an issue for you to check out.

I'll meet you over there, can't wait to get started!

Github

https://github.com/BoraKis/intro-html

Comments(4)

1

Add some style to your page
Step 12: Make it beautiful

You may be wondering why your page hasn't looked exactly the same as the sample I showed in the beginning. That's because HTML gives your webpage structure, but the simple tags you have learned so far don't tell the web browser how you want each page element to appear.

The appearance of each page element is defined through styles and is the subject of another course. For now, I have added a stylesheet for you.

For your webpage to use your new stylesheet, you just need to link it within the <head> of your index.html file. If you include the following link in your index.html file, your webpage will begin using the css file to make your website look awesome!
```
  <link rel="stylesheet" href="style.css">
```
As an example, your index.html file might look like this:
```
    <head>
        <title>I am a title!</title>
        <link rel="stylesheet" href="style.css">
    </head>
```
:keyboard: Activity: Create a style to your site
1. Edit the index.html file in the add-style branch by using this direct link or going to the Code tab, selecting the add-style branch, clicking on the index.html file, and clicking the pencil :pencil: to edit.
2. Between the <head> tags, add the following <link rel="stylesheet" href="style.css">.
3. In the Commit changes section, enter a commit message that describes what you've done.
4. Click on Commit changes.
I'll respond when I detect you've committed in this pull request.
2

Welcome
Let's build your first webpage

HTML is the markup language that forms the backbone of the internet. In this course, you will learn how to build a clean, stunning webpage using HTML which you can set as your browser's default start page. This is only the first step in your journey, but it will form an important foundation in your journey as a new developer.

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is not a programming language. It is simply a way to describe the structure of your website. Your web browser reads the HTML document and displays it in the window.

Where does your website begin?

When someone enters your web address, the web standards will automatically look for a file called index.html and display it in your browser. Most people call this your home page.

Step 1: Hosting your webpage

It isn't enough to simply create a webpage on GitHub. You must deploy your webpage to a web host that is connected to the internet. For this course we will use GitHub Pages, but you could publish the HTML to any static host.

:keyboard: Activity: Turn on GitHub Pages
1. Under your repository name, click Settings.
2. In the GitHub Pages section, use the Select source drop-down menu to select main as your GitHub Pages publishing source.
3. Return to this issue.
I may take up to a minute to respond as I wait for GitHub Pages to create a deployment of your repository. If you don't see anything after a minute, refresh this page.

For more information, see Configuring a publishing source for GitHub Pages in the GitHub Help.

I'll respond in this issue after GitHub Pages has finished deploying your site.
3

Create a list
Step 9: Create a list

Your site with your new photo can be seen at: https://borakis.github.io/intro-html/

Note: Sometimes it takes a few minutes for a GitHub Pages site to reload. If your changes still don't appear after a few minutes, you might try clearing the cache in your browser and refreshing the page.

Ordered and unordered lists

Lists are used all over the internet. They come in two flavors: ordered and unordered.
1. This
2. Is an
3. Ordered list
And...
- This
- Is an
- Unordered list
You can create a list using the <ol> tag for ordered lists, and the <ul> tag for unordered lists. Then, each item must be wrapped in an <li>, or list item, tag. Here's the code that generates the list I showed you above:
```
<ol>
    <li>This</li>
    <li>Is an</li>
    <li>Ordered list</li>
</ol>
```
And...
```
<ul>
    <li>This</li>
    <li>Is an</li>
    <li>Unordered list</li>
</ul>
```
For the next exercise, you are going to create a list of your favorite websites. Later, we will add links so you can access those links quickly. For now, focus on creating the individual list items.

:keyboard: Activity: Create a list of your favorite sites
1. Edit the index.html file in your main branch by using this direct link or going to the Code tab, clicking on the index.html file, clicking the pencil :pencil: to edit the HTML.
2. Inside the body tag, create a list, either ordered or unordered, of your favorite sites on the internet.
3. In the Commit changes section, enter a commit message that describes what you've done.
4. Ensure you've selected Create a new branch for this commit and start a pull request.
5. Give your branch a descriptive name, like add-links-and-lists.
6. Click on Commit changes.
7. Give your pull request a title, and a comment.
8. Click on Create pull request.
Look for my response in your new pull request
4

Add a header
Step 6: Add a header

Take a peek at your shiny new web page! It can be found at: https://borakis.github.io/intro-html/

Headers create prominent text in the body of your web page. Headers come in different levels. For example, a header 1, or h1, is the largest, while a header 3, or h3, is smaller, and a header 6, or h6, smaller still. You can create headers in html using the h1, h2, h3, h4, h5, and h6 tags. Here's an example:
```
<h1>I'm a header 1!</h1>
```
:keyboard: Create a header for your web page
1. Edit the index.html file in your main branch by using this direct link or going to the Code tab, clicking on the index.html file, clicking the pencil :pencil: to edit the HTML.
2. Between the body tags, add an opening <h1> tag, some content for the header, and a closing </h1> tag.
3. In the Commit changes section, enter a commit message that describes what you've done.
4. Ensure you've selected Create a new branch for this commit and start a pull request.
5. Give your branch a descriptive name, like add-headers-and-images.
6. Click on Propose file change.
7. Give your pull request a title, and a comment.
8. Click on Create pull request.
Look for my next response in your pull request

Your GitHub Learning Lab Repository for Intro to HTML