Lab 12, Part 1 - HTML
In this lab, you’ll be:
- creating an html page
Instructions
ProTip: Bookmark the following page so that you can easily repeat these steps in your future labs!
Cloning a Remote Repo Using Your GitHub API Access Token
- On GitHub, create and name your new repository lab-12-html and clone it inside your /mtec1003 folder.
- Once you've completed the steps at the link above, you're ready to begin.
Open up your text editor (e.g. Atom, Sublime Text, etc.)... - Note: ALL FILES YOU CREATE BELOW MUST BE SUBMITTED IN YOUR NEW REPOSITORY THIS WEEK.
Create an HTML Page!
Basic Structure
- open up your text editor (e.g. SublimeText, Atom, VS Code, etc.)
- 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