Take the quiz:
UTF-8, Binary and Hexadecimal Quiz
0 of 10 questions completed
This quiz tests your knowledge of UTF-8 encoding, binary and hexadecimal numbering systems and key vocabulary.
Binary conversions should be grouped in 4 bit Bytes separated by a space. Example 20 in binary is 0001 0011.
Hexadecimal answers should be in character form. Example: 5a, f2 etc. Capitals are allowed so answers can also be 5A, F2.
You have already completed the quiz before. Hence you can not start it again.
Quiz is loading...
You must sign in or sign up to start the quiz.
You have to finish following quiz, to start this quiz:
0 of 10 questions answered correctly
Time has elapsed
You have reached 0 of 0 points, (0)
Question 1 of 10
A comma, when used in php is:Correct
Question 2 of 10
Question 3 of 10
Convert the period, . or full stop character to a UTF-8 code.Correct
Question 4 of 10
Convert the period, . or full stop character to hexadecimal.Correct
Question 5 of 10
A hexadecimal digit can range in value from;Correct
Question 6 of 10
Convert hex A1 to binary.Correct
Question 7 of 10
Convert hex 0F to binary.Correct
Question 8 of 10
Convert hex FF to binary.Correct
Question 9 of 10
Concatenation means to:Correct
Question 10 of 10
In this project you will begin developing a code library for future reference. Imagine your frustration 10 years from now when you are developing code for a website and can’t remember how to do something and then you suddenly remember wrote this code in High School. – Whew! What a relief!
Then all you need to do is jump to your cloud9 account or your archive disk and pull up the right page, copy and paste the code, test it, call your client to say you completed the task and ask them to send you a check!
Part 1: Build a mini-site:
Your code library mini site should have the following path:
Go to your c9.io panel and create a folder named ‘code’. note that folder names must be lowercase. While this is not required in any written documentation anywhere, I have had to solve hard to trace problems with capital letters not being recognized by the domain name server (remember what we said about DNS in the first week of this class?)
Create the 6 files you’ll need inside this code folder.
Your directory structure should look like this:
Next copy and paste code from your navbar project into the navbar.html page (only).
CAUTION: take only the essential code, drop any fancy backgrounds and images. When you look at this code later in life, you’ll need to quickly get to the code ‘snippets’ you need without having to sort through endless lines of coolstuffcode.
Copy the ‘ link rel=”stylesheet” etc ‘ statement into the head section of your new navbar.html page. Next copy the unordered list of page links into the body of this page.
Once that’s all working we’ll start working on the individual pages.
You can select common objects in your html code and style them all at once using CSS Selectors.
There are three CSS Selectors you will need to know. These are, in order of cascading priority (remember cascading styles?????);
element – the element selector selects all html elements of a certain type and applies the style to all of them in the page. So yo can select <p> to apply this style to all paragraphs or <h3> to apply a style to all h3 headings. Example:
id – the id selector uses the html tag’s attribute to select one or more html elements in a page: The id starts with a # followed by the id name ex. #name. The html element needs to contain the attribute id=”name”, do not use the # in the html element.
<p id=”para1″>Hello World!</p>
<p>This paragraph is not affected by the style.</p>
class – the class selector lets you apply a style to a specific type of element. You can specify different styling to various type elements using the class statement preceded by the element type and a period or not, simply by not including the element type and period.
Example – without element type
<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>
Or you can specify the style only applies to a specific element type.
<h1 class=”center”>This heading will not be affected</h1>
<p class=”center”>This paragraph will be red and center-aligned.</p>
Here’s the w3schools CSS Selector lesson.
Learning Objective: In this lesson you’ll learn how to build a multi-level navbar also known as a dropdown menu. An example of a dropdown menu in a vertical navbar is used in the left hand column of math-sceinces…
Here’s a full treatment of 2 level nav bars from Tom at jsfiddle;
You can read the original post at Stack Overflow http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu but it is a bit complicated.
the basic idea is that the navbar consists of a ul with links but navbar elements with a dropdown contain another ul nested within that element. Ie a ul within a ul.
Lesson Objective: create a code library for future reference.
I was amazed when I reviewed your navbar.html pages! Some of these sites had beautiful imagery, animated images and some integrated the navbar beautifully in the body of page content.
All that is good but now we need to create a code library for you to use later as a reference when you are doing webwork for a client.
Step 1: Log on to cloud9, create a new folder named ‘code’ (without the quote marks of course).
Step 2: create a new set of files; navbar, about, etc as you did in your last project. Change the ‘interests’ page name to ‘2-level-navbar.html‘. Change your ul to include this new page. You can access these pages online using name.avance-student.com/code/filename.
Step 3: Build these pages with the css and navbar code from the last project. DO NOT INCLUDE ANY IMAGES, PAGE BACKGROUNDS OR ANY FANCY FEATURES! You should include 1 sentence of regular text which describes the page. Example: This is a NAVBAR. Remember – this is a code reference for later use and years down the road you will need to find and grab snippets of code quickly. Keep it simple! This assignment will be graded and I will take off points for anything extra I find on the page.
Next lesson: Floating the navbar to full page width ie Full width float.
Learn to develop a site Navigation Bar as seen in commercially produced websites.
link and block styling
There are 3 basic link formats
1] external link – you can never go wrong with this one; <a href=”URL”>Anchor Text</a>
2] internal links: use this format to link to other pages in the same domain <a href=”/folder/filename.html>Anchor Text</a> or <a href=”filename.html>Anchor Text</a>
3] text anchors or placeholders – these are normally used to link to a section or div in the current page. Do not use this format for the navbar.<a href=”#anchorname”>Anchor Text</a>
A word about SEO:
How nasty is Google – this week’s fiasco!
Project 1 (Unit 2)
Use the poem “The Jabberwocky” to demonstrate your knowledge of essential html tags.
- Format the poem into paragraphs.
- Enlarge and change the color of all characters who appear in this poem.
- List the characters using an unordered list.
- List the characters in order of importance using a) an ordered list with square bullets, b) an ordered list using the Roman Numeral style tag.
- List the characters and their attribute(s) using a descriptive list.