HTML stands for Hypertext Markup Language. It is a text document which tells the computer what the structure of each page should look like.
Elements usually refer to the opening and the closing tags along with the content that lies between those tags. "Tag" is strictly regards each individual tag, not what's in between them.
Attributes provide more information about the elements. Attributes are made up of two parts, a name and a value. These are separated by an equals sign. The name tells the computer what kind of extra information it's given, while the value is that information.
- The HTML element informs the computer that HTML is the code language being used.
- The head element gives information about the page.
- The title element is usually found inside of the head element. This is what you'll see typically at the top of your browser.
- The body element is telling the computer that everything inside of that element should be shown inside the main browser.
Once on the website, click on the 3 dot icon in the upper-right side of the browser window. From the drop-down menu that appears, select "More tools" and then "Developer tools". Click the Elements tab at the top of the new section that appears. Alternatively, use the shortcut: Command+Option+U.
6. List five different HTML elements and what they are used for. For example,
is a paragraph element, and it is used to represent a paragraph of text.<div></div> is a divider and is used to divide parts of text for better organization.
<img> is used to include an image in your webpage.
<ul></ul> is an unordered, bulleted list, its contents which are not necessarily in any particular order.
<ol></ul> is an ordered list, meaning the list will will numbered.
<a></a> is an anchor and is used for including a link in the webpage.
Empty elements usually only have one tag instead of a separate opening and closing tag. For instance, <img> <br> <li> would all be examples of empty elements. Along with this, any element with no content between their opening and cosing tags would also be considered empty elements.
Semantic markups provide extra information about the page but are not intended to affect the structure of the webpage. These help other programs (such as screen readers) understand the page more accurately.
9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
The new elements are navigation <nav>, article <article> and header <header>. These are used in part because a search engine is more likely to put emphasis on an article title rather than a header/footer.
https://codepen.io/zoekharvey/pen/qGGPBE
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists are numbered, as in steps to do a task.
- Unordered lists use bullet points (which doesn’t indicate order)
- Definition lists are lists of words and terms which are followed by their definitions.
<a href=“absolute_url_of_website”>Text User Clicks On</a>
Include target="_blank" to have that link open in a new tab.
First, divide the page into sections by using the id attribute. Using the the id to label the area on the page that is your introduction, it would be formatted as <h1 id="intro">. After it's divided up with unique labels for the sections, create a link to that part of the page by using the <a> element and then including the # symbol within the href attribute. For example, it would look along the lines of <a href="#intro"> if you wanted that link to bring the user to the intro part of the page.
It gives style to a webpage. CSS lets you control presentation of the page with things like color, size, font, placement, etc.
It stands for "Cascading Style Sheets". Cascading means that if more than one rule matches an element, it will determine which style rule applies.
A CSS rule has two parts, a selector and a declaration. The selector indicates which elements the rule applies to while the declaration indicates how those elements mentioned should be styled. Within the declaration there are two parts, a property and a value.
Use the <link> element in the HTML document to tell the computer where to find the style sheet for that page. This will be found inside the <head> element, and it should be made up of three attributes:
hrefwhich specifies the path to the CSS filetypewhich specifies which type of file is being linked (text/css)relwhich specifies the relationship between the HTML file and the file you're linking it to (if it's css this would be "stylesheet") It will end up looking along the lines of<link href="css/styles.css" type="text/css"rel="stylesheet" />
Typically one uses an external stylesheet when building a site with more than one page. It's more efficient because one can control and change the style of the whole site in one page, instead of having to repeat all of the styling on each individual page.
A color hex code describes a specific color. It does so by using a # followed by 6 digits to represent the amount of green, blue and red.
The three parts of HSL is the Hue (the classic idea of color), Saturation (the amount of grey in a color) and Lightness (amount of white/black in a color) values.
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main categories are monospace, cursive and fantasy. Monospace is where every letter has the same width. Cursive is where the letters either have joining strokes or other cursive characteristics (like handwriting styles). Fantasy is typically used for titles, not long sentences or paragraphs because they're more decorative.
The three main units include pixels, percentages and EMs. Pixels represent how much space the text will take up. Percentages uses the default size of 16px to specify size (in the form of a percent related to the default 16px ). EMs represents the width of the letter "m".
The value of the <type> attribute will determine what type of input will happen.
The <select> element is used along with the <option> element and records which options to give the user.
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
The type attribute should be set to "submit".
The <fieldset> element groups form items together, usually using a box (which can be adjusted using CSS). Along with this, you can add the <legend> element which should come directly after the <fieldset> tab which includes a brief description of why those items are grouped together.
Borders separate the edges from one box to another on your webpage. Margins control the gap in between adjacent boxes (the margin is the area that lies outside of the border). Padding is the space between the border and the content within that border. Adjusting the padding makes that space either larger or smaller.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
CSS rule padding goes in clockwise order starting from the top. In this case, 1px=top, 2px=right 5px=bottom 10px=left
Block-level elements will refuse to be shown on the same line as any other HTML element and usually have some whitespace above and below it. Inline elements are shown on the same line as other elements and inside the current box.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning is when an element has one absolute position on the screen, instead of having a position that is affected by other elements. Z-index is important as there may be some box overlap with fix positioning and z-index indicates which box should appear in front.
Fixed width layouts do not change in size as the user increases or decreases their window size. Liquid layouts do change in size as the user increases or decreases their window size. With a fixed layout, there may end up being gaps around the edges of the page, while liquid layouts will adapt to the screen's size.
The alt attribute provides a brief yet detailed description of the image in case it can't be seen. Screen readers for visually impaired users will use the text in the alt attribute to describe the image.
An image element is inline when it can be found within a block element, and it doesn't necessarily start a new line. If the <img> is followed by a block element then the block level element will sit on a new line. If the <img> is within a block element, the block element will flow around the image.
Jpg files should be used when there are many different colors in the picture and png file format should be used when there are few colors, or for pictures with large areas of the same color.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
HTML has names for sizes (small, medium, large, etc.), while CSS can size images specifically to the desired dimensions.
A sprite is when one image is being used for several different parts of an interface. This allows a web page to load faster because the browser only needs to request one image rather than multiple.
1. How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
The equals sign is called an assignment operator in Java Script. This tells the program that a value is about to be assigned to the variable. To declare a variable, one must create it and give it a name. For example: var quantity; where "var" is the keyword and "quantity" is the variable name. Once the variable has been created, it can then be told what to store.
2. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are what represents numeric data, strings represent letters and other characters (surrounded by quotation marks), and booleans are either true or false values.
3. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- The name must begin with a letter, dollar sign or an underscore. It must not start with a number.
- The name can contain letters, numbers, a dollar sign, or an underscore. You must not use a dash or period in a variable name.
- Keywords or reserved words cannot be used. Keywords are existing words that tell the interpreter to do something. Reserved words are words that may be used in a future version of JavaScript.
- All variables are case sensitive and it is bad practice to have the same name using different cases.
- Use a name that describes the kind of info that the variable stores.
- If the variable name is made up of more than one word, use a capital letter for the first letter of every word after the first word. An underscore can also be used, but a dash may not.
4. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
An array is useful when it is uncertain how many items a list will contain, as when the array is created it is not necessary to specify how many values it will hold. It's also helpful that the values in the array do not need to be the same data type, so one can store a string, a number and a Boolean all in the same array. Each item in an array is automatically given a number called an index and is used to access specific items in the array. After the array name, specify the index number for that value inside square brackets and can change the value by selecting a new value.
Expressions have a value and statements do not. An expression results in a single value (calculate this), while statements are commands (open this file.
Arithmetic operators are used with numbers (divide /, subtract -, multiply * ), while string operators (+) are used to combine the strings on either side of the symbol. Combining strings to make one new string is called concatenation. Assignment operators are used to give value to variables.
1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
The code in the function only runs when one enters the name of the function name followed by parentheses. If sayHello is entered in the console the computer wouldn't recognize it as a function.
When one calls a method, the arguments are the data passed into the method's parameters. Parameter is a variable in the declaration of function while the argument is the actual value of this variable that gets passed to the function.
The keyword return is used to return a value to the code that called the function.
4. How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?
Local variables are when the variable is created inside of the function, while global variables are when you create the variable outside of the function. Local variables are preferred because they take up less memory than global variables. Global variables also have the possibility of getting hard-to-fix bugs because keeping track of the global variable is crazy hard to do. It seems like global variables should only be used circumstantially, perhaps for some type of global state or static resource. Honestly, the idea of a global variable is a little confusing to me so I'm not 100% sure about a specific example when you'd want to use one. From everything that I've read, local variables should always be used when the option is available.
https://www.house.gov/ There are many reasons why someone would want to visit a government website from research to getting contact information. The website for the House of Representatives takes a very simple and organized approach to help the user to find what they want. The vast amount of information on the page doesn't overwhelm the user as it's divided into short, concise pages with no over-flashy designs.
http://web.archive.org/web/20101225204203/http://teacherxpress.com/ This site isn't set up for easy use. Everything's kind of just plopped onto the page, and if you're looking for something specific there's not an efficient way to find it. Along with this, a couple of the links at the top (which seem like they were supposed to help navigate the page) don't even work.
https://www.google.com/ Google is probably the best example of simplicity. Their sight has no frills yet still does its job.
https://heretherestudio.com/ Although it's super flashy, this website could be much more user friendly by taking the graphics down a notch. The user has to scroll over each seemingly-random picture to get a brief description about a project. They could've made navigating it simpler without (in my opinion) sacrificing the visuals.
https://democrats.org/ Political websites are interesting because every aspect of the website has te end goal of raising money. This site puts that goal front and center, drawing the user's eye immediately to the donation amounts, and then to the educational portions of the site.
https://www.oxygen.com/ The layout of the page doesn't draw the user's eyes to any specific place. It's really cluttered and a bit overwhelming, especially if you're going to their site for a specific purpose.
https://www.earthday.org/ "Join the World's Largest Environmental Movement" is immediately what greets the user in big text. They have the logo in the center of the page, but much smaller than the text. This is because the logo isn't the most important text, with the statement of the "world's largest environmental movement" it's giving the user the immediate thought of either "what is this movement" or "how do I join?".
http://art.yale.edu/ Not exactly sure what's going on in this website, but the biggest text is definitely not the most important. It has a big "Click Here!" without big enough text to immediately tell the user what they're clicking on.
This is a tricky category to find examples of because it's hard to tell how a website analyzes data just from looking at a website. https://www.usability.gov/ This site outlines different strategies of analyzing user data and behaviors. After reading more about it, I realized that most large websites use these strategies. Netflix and other streaming sites keep track of the number of views and the quality of user reviews on each movie/show to be able to make educated decisions on what content to keep around. Lots of educational sites and message boards will have the quick option of answering "was this helpful?" to make sure their information is being conveyed efficiently and correctly. From my understanding, most (or even all) successful commercial websites implement many ways of analyzing their websites to gain the best results.