Close

2 Intro to HTML

Leave a comment

Intro to HTML

Add the following definitions to the Web Development page of your ePortfolio.

  • HTML - Stands for Hypertext Markup Language and is used to create the content of a web page.
  • HTML Element - A piece of a website. Marked by a start tag and sometimes closed with an end tag. Also includes the content of the element as well.
  • HTML Tag - The special set of characters that tells the machine where the start and end of an HTML element is and what type it is.
  • Website Structure - The purpose of different pieces of content in a web page, used to help the computer determine how that content should be displayed

Tags

Open  Code.org, Unit 2, Lesson 3. You'll see 5 tags that are essential in the development of web pages. In each lesson bubble, you'll be introduced to and implement a new HTML tag or set of tags. You need to keep a running dictionary of what you learn so that you have a reference to come back to.

Create a new page in your ePortfolio called HTML Tags.

Then, create a 2 column, 10 row table inside of this page.

Then, you'll need to format the table according to the image below

The first column will be the tag itself, the second column will be YOUR explanation of what the tag does. Fill it in for these first 5 tags.

Welcome to the Web Lab

Click continue to go to Bubble 3 to see how the Web Lab is set up in Code.org.

Headings

Add the following definition at the top of the Web Development page with Headings as the section heading.

Heading - A title or summary for a document or section of a document.

Add the <h1></h1> tags to the HTML Tags page.

NOTE: Make sure you have completed the previous Lesson (Intro to HTML) before starting this one since each lesson builds on the previous one. 

Use the Snipping Tool to take screenshots of the Workspace & Preview windows after bubbles 6 and 10. Save the image with an appropriate name of the lesson/section. Upload them to your ePortfolio Files, then embed them below the Headings defintion. Ex.

 

 

We're skipping over Lesson 5 about Digital Footprints for now...

Lists

You'll need to log in and open Code.org, Unit 2 Lesson 6, Lists

You have 3 sets of tags from the Overview to add to your HTML Tags page.  Do that before you move through the bubbles.

Work your way through all of the bubbles, practice using the List Tags - don't forget to use the closing tags so that the browser knows where you want the code to end.

When you get to bubble 8, think about what you can add  as a list to your Personal Website that you have planned for. When you finish, take a screenshot (using the Snipping Tool)  of the Files, Workspace & Preview windows.  Save it as Lesson6-8.png to upload to your ePortfolio Files & embed at the top of the Web Development page under a new heading called Lists.  Ex.

Intellectual Property & Images

In Lesson 7, you'll need to read through and add some important vocabulary at the top of your Web Development page.  Put in the heading of Intellectual Property & Images, then add:

  • Citation - A quotation from or reference to a book, paper, or author, especially in a scholarly work.
  • Copyright - the exclusive legal right, given to an originator or an assignee to print, publish, perform, film, or record literary, artistic, or musical material, and to authorize others to do the same.
  • Creative Commons - A public copyright licenses that enable the free distribution of an otherwise copyrighted work. A CC license is used when an author wants to give people the right to share, use, and build upon a work that they have created.
  • Intellectual Property - A work or invention that is the result of creativity, such as a manuscript or a design, to which one has rights and for which one may apply for a patent, copyright, trademark, etc.

Open the Activity Guide in Bubble 1.  Read through it and answer Scenario 1, 2 & 3. You may quietly work with someone next to you to answer these. Put the answers below these definitions on your Web Development page.

When you get to bubble 2, you'll see a good explanation of the tag and attributes you need to add to your HTML Tags page. Add the tag to add an image to your website. Notice that this tag is a single tag, it does not require a closing tag.

Work through the rest of the bubbles in Lesson 7.  Take a screenshot (using the Snipping Tool) of the Files, Workspace, and Preview window of bubble 7. Save it as Lesson7-7.png to upload to your ePortfolio Files & embed at the top of the Web Development page under the heading & definitions called Intellectual Property & Images.

 

Clean Code & Debugging

You are in Lesson 8 of Unit 2 in Code.org. Add the following definitions at the top of your Web Development page under a new heading called Clean Code & Debugging.

  • Bug - Part of a program that does not work correctly.
  • Comment - A comment is a programmer-readable note in the source code of a computer program.
  • Debugging - Finding and fixing problems in your algorithm or program.
  • Indentation - The placement of text farther to the right, or left, to separate it from surrounding text which helps to convey the program's structure.
  • Whitespace - Whitespace refers to any character that shows up as a blank space on the screen, such as a space, a tab, or a new line. Whitespace helps separate different parts of the document to make it easier to read.

Add the Comment tag to your HTML Tags page.

Work through the remaining bubbles.  Take a screenshot (using the Snipping Tool) of the Files, Workspace, and Preview window of bubble 8. Save it as Lesson8-8.png to upload to your ePortfolio Files & embed at the top of the Web Development page under the heading & definitions called Clean Code & Debugging.

Multi-page Websites

You're in Unit 2, Lesson 9 in Code.org. Add the following definitions at the top of your Web Development page under a new heading called Multi-page Websites.

Hyperlink - A link from a HTML file to another location or file, typically activated by clicking on a highlighted word or image on the screen.

In bubble 2, you'll see a new piece of code for adding Hyperlinks to your website. Add the tag and attributes to your HTML Tags page.

Work your way through the rest of the bubbles, take your time to make sure you are meeting all of the requirements and guidelines. When you complete it in bubble 10, refer back to the Rubric in bubble 1 to check to make sure you are really done. If you are, hit the share button, copy the link and email to me.

Also, paste the link under the Multi-page Website definitions at the top of your Web Development page.  Use the link tool to make your link active.