Lab 12, Part 1 - HTML
In this lab, you’ll be:
- Creating a repository on the GitHub website
- Cloning the repository on your local machine
- Associating a name and email address with your local repository
- Editing the README file in your local repository
- creating an html page
Instructions
Create Your Remote Repository
This will create a remote git repository on github.
- Go to your account home (github.com/username).
- Click on the Repositories tab.
- Click the green New button on the right side.
- Give your repository the name lab-12-html
- The repository should be public (the default).
- Click "Initialize this repository with a README".
- Click Create Repository.
- Refresh your main GitHub page and you should see the new repository.
Cloning your repository
This will clone the repository you just created on GitHub on your local machine.
- open terminal
- (if doesn’t already exist) create a folder that consists of your first initial and last name in your home directory
cd ~
mkdir myname
- use pwd to verify that you’re in the correct folder
- you should be in ~/myname/
- if you’re not, cd into it
- to prove that this is not yet a repository, list all files in your current directory
ls -al
- it should contain only your previous labs
- it should not contain any .git folders
- Make sure again that you're in the correct directory! (/Users/student/myname or ~/myname)
- Clone the GitHub repository you just created: lab-12-html
git clone https://github.com/your_username/lab-12-html.git
- The output should be:
Cloning into 'lab-12-html'...
remote: Counting ojects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
Checking connectivity... done.
- Check to make sure you've linked to your remote repository:
- Change into your repository directory (lab-12-html).
- Use the git remote command.
cd lab-12-html
git remote -v
- You should see:
origin https://github.com/your_username/lab-12-html.git (fetch)
origin https://github.com/your_username/lab-12-html.git (push)
- configure your name and email for your commits
# in the directory of your repository
git config user.name "my first and last name"
git config user.email "my@email.address"
- finally, use git config again to see if this worked:
git config -l
- (use should see your name and email appear in the configuration)
Create an HTML Page!
Basic Structure
- open up SublimeText (try Command+SPACEBAR to search for SublimeText)
- create a new file
- save it… browse to home→Desktop→usernamefolder→lab-12-html→ and save as index.html
- create a skeleton page by using the following tags (don't use tab completion here)
- <!DOCTYPE html> (note that this has no closing tag)
- <html lang="en">
- <head>
- <title> </title>
- </head>
- <body>
- </body>
- </html>
- view your page by opening it in your browser (double click on the file from finder or option-click→Open With… your browser)
- add text between the body tags
- view your page (now just hit the refresh/reload button on your browser)
- add a title; it should go in head
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)… and of course, push origin master
Paragraphs and Headings
- add another line of text
- view your page (note that there are no line breaks!)
- add paragraph tags around each line of text
- <p>line of text</p>
- view your page (note that the text is now on separate lines!)
- add some emphasis and strong tags around some text in one of the paragraphs
- <em> </em>
- <strong> </strong>
- view your page (look for italicized and bolded text!)
- add a heading tag before each paragraph
- add an <h1> first
- add an <h2> next
- add one more heading tag, an h1 again… and add another paragraph tag underneath it
- view your page (look for both headers)
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
Lists and Links
- add an ordered list after your headers and paragraphs
- <ol>
- <li>
- view your page (look for both headers)
- add an unordered list after your previous list
- <ul>
- <li>
- change one of your list items so that some of the text within it is a link
- <a href="http://somelinkhere.com">link text</a>
- do the same for some text within one of the paragraphs
- add another link in one of your paragraphs
- view your page and check that your links work
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
Images and Tables
- add an image somewhere on your page
- <img> (no closing tag)
- set the src attribute, equal to http://cdn3.whatculture.com/images/2018/12/6a04de7e319b8a08-600x338.jpg
- view your page
- add a table
- make it 2 columns, 3 rows
- <table>, <tr>, <td>
- add text into each table cell
- view your page
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
Submit Your Work Through GitHub
- use git to check the status, add, commit (don’t forget the -m ‘message’ part)
- so, all you have to do is push (don’t forget origin master)
- check that your code is on github by refreshing the page