HTML describes the structure of a web page. HTML pages are text documents. HTML provides a set of general rules that suggest how content should look when rendered.
Elements are chatacters that live inside angled brackets. Tags open and close each element. Each Element tells the browser something about the information between its opening and closing tags.
Attributes are used to tell us more about elements. They appear on the opening tag of the element and are made up of two parts, a name and a value.
The head element contains information about the page. The contents of the title element are shown in the top of the browser, or on the tab for that page. The body element shows everything inside the main browser window.
In Chrome, in order to view the source of a website go to the view menu in the browser, developer, and then view source.
6. List five different HTML elements and what they are used for. For example, p is a paragraph element, and it is used to represent a paragraph of text.
h1 is a heading tag, and it is used for main headings. h2 is a heading tag, and it is used for subheadings. b is used to make characters appear bold. i is used to make characters appear italic. br is used to add aline break inside the middle of a paragraph.
Empty elements are elements that do not have any words between an opening and closing tag.
Semantic markup provides extra information to web pages, such as where emphasis is placed in a sentence. This extra information could be a quotation, ect. Semantic elements are not inteded to affect the structure of web pages, though they are intended to describe the content of web pages 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.
Some of the new semantic elements in HTML 5 include, header, nav, and article elements. The purpose of these new elements is so that developers can use them to help describe the structure of the page. Possible improving SEO.
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists are lists where each item in the list is numbered. Unordered lists use bullet points instead of numbers. Definition lists are made up of a set of terms along with the defintions for each of those terms.
The element a is used with an attribute href to link to another wesite. The href needs to be the absolute URL. Users can click on anything that appears between the opening a tag and the closing a tag.
To open a link in a new window or tab (depending on what your browser is set to), use the attribute target. Set the value of target to blank.
You can link to a specific part of the same page by first, identifying the points in the page that the link will go to. Do this using the id attribute, which can be used on every HTML element. Then use this id attribute in the href.
CSS allows you to create rules that specity how the content of an element should appear. CSS treats each HTML element as if it appears inside its own box and uses rules to indicate how that element should look.
CSS means Cascading Style Sheets. Cascading means that styles can fall (cascade) from one style sheet to another, thus enabling multiple style sheets to be used on one HTML document.
A CSS rule contains two parts, a selector and a declaration. Selectors indicate which element the rule apllies to. Declarations indicate how the elements referred to in the selector should be styled.
The link element can be used in an HTML document to tell the browser where to find the CSS file used. The href attribute specifies the path to the CSS file, wich is often placed in a css or styles folder. The type attribute specifies the type of document being linked to. The rel attribute specifies the relationship between the HTML page and the file it is linked to.
It is advantageous to use an external stylesheet so that all your pages can share one stylesheet instead of repeating the same code on every page.
A color hex code is a six digit code that represents the amount of red, green and blue in hexadecimal code. It is a unique identifier for a specific color.
The three parts of an HSL color property are Hue, Saturation, and Lightness.
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main categories of fonts are Serif, Sans-serif, and Monospace. Serif fonts have extra details on the ends of the main strokes of the letters. Sans-serif fonts have straight ends to letters. Every letter in Monoscape fonts is the same width, Serif and Sans-serif fonts have letters of different widths.
The three main units to specify font-size are Pixels, Percentages, and EMS.
The type attribute controls the behavior of the input element in a form.
The select element is used to create a dropdown list.
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 is used to group similar form items together.
Border separates the edge of one box from another. Margin is the area outside the edge of the border. Padding is the space between the border of a box and any content inside it.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
Top 1px, right 2px, bottom 5px, and left 10px.
An inline element does not cause a line break and does not take up the full width of the page, only the space bounded by its opening and closing tag. A block-level element always starts on a new line and takes up the full width of a page, from left to right. A block-level element can take up one line or multiple lines and has a line break before and after the element.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element. Elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page. Z-index is important because when you don't use normal flow, boxes can overlap. The z-index property allows you to control which box appears on top.
Fixed layouts do not change size as the user increases or decreases the size of their browser window. Liquid layouts stretch and contract as the user increases or decreases the size of their browser window.
The alt attribute in an image element provides a text description to the image which describes the image if you cannot see it.
Where you place the image in the code is important because if the image is followed by a block level element then the block level element will sit on a new line after the image. If the image element is inside a block level element, any text or other inline elements will flow around the image. You can change it into a block level element using the display property with a value of block.
JPEG benefits images with many different colors. PNG benefits images with few colors or 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?
Whenever you use consistently sized images across a site, you can use CSS to control the dimensions of the images, instead of putting the dimensions in the HTML.
When a single image is used for several different parts of an interface, it is known as a Sprite. The advantage of using sprites is that the web browser only needs to request one image rather than many images, thus enabling the web page to load faster.
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are used to represent numeric values. Strings are used to represent text. Booleans are used to represent just two values, true and false.
The three logical operators that JavaScript supports are: and, or, and not.
The naming convention used for variable is: var. Var is a keyword used to create a variable. In order to use a variable you must give it a name. All names must start with a letter, $, or an underscore. Names cannot contain a dash, period, keywords, or reserved words. Variables are case sensitive. If a variable name is more than one word, it must be written in camelCase.
An expression is a fragment of code that produces a value. A statement corresponds to a full sentence in a human language. An expression can be content to just produce a value, which can then be used by the enclosing expression. A statement stands on its own and amounts to something only if it affects the world.
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
A few JavaScript reserved words include, abstract, else, instanceof, super, boolean, enum, int, and switch. Reserved words are a number of words that are reserved for use in future versions of JavaScript. These reserved words might be the problem when a variable definition does not work as expected.
Control flow is when your program contains more than one statement, the statements are executed, predictably, from top to bottom. This is useful becuase we can use the output from an earlier statement and use it as the input for a later statement.
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?
When entering sayHello without the parentheses returns a syntax error. The parentheses calls the function, therefore they are needed.
Return statements cease execution in a function and return a value to the caller. JavaScript functions require an explicit return statement for returning the result of an expression from a function. When a return statement is not present, the interpreter automatically returns undefined.
Function parameters are the names listed in the function definition. The parameters to a function behave like regular variables, but their initial values are given by the caller of the function.
In order to use a function you give it a name followed by parentheses. All names must start with a letter, $, or an underscore. Names cannot contain a dash, period, keywords, or reserved words. Functions are case sensitive. If a function name is more than one word, it must be written in camelCase.
- Good Example
Duolingo The user's motivation is to learn another language. Duolingo makes this easy, by asking just a few basic quesions. Then the user is able to immediately start learning a new language. They are able to do this without singing up for a plan or installing any software. Therefore, tailoring the experience to the motivation that the user is visiting their website.
- Bad Example
Arngren Arngren is confusing because when you get to the home page with the combination of small links, different categories, and different sizes doesn't give the user a clear motivation of why they are there.
- Good Example
Airbnb This is a website to look for and book homes or rooms to rent (similar to booking a hotel, though this is a person's house). While the primary focus is the search call to action on the home page with date and destination. The user can also filter their search results using many different filters. This, combined with the fact that the expeirence is very photo focused, helps the user to visually see the properties they might potentially book.
- Bad Example
Push Sports This website is about wearing and using gloves for your bicycle. It does not provide the user locations to buy gloves, nor does it sell them on their website.
Design: Do the colours, shapes, and typography help people find what they want and improve usability of the details?
- Good Example
Dropbox Dopbox is a pretty simple idea, secure file sharing and storage solutions. Their website is very simple but elegant. The use of complementary colors, a lot of white space, and a simple but powerfull image helps the user to find what they want and improves usability. The fact that they have a call to action button that stands out because it contrasts with the background and it's their free option, allows the user to try their service without any obligation.
- Bad Example
NRTD The national rolled thread die company's website is not responsive and shows up very small on the scrren. They use a black background with some blue colored font that is not easy to read. Also, when you hover over some of the links they are not a uniform color.
- Good Example
Airbnb The biggest and only text on the screen aside from the menu is, "Book unique homes and experiences all over the world." This is the main thing the user is interested in, therefore it is the focus of the hompage and the website.
- Bad Example
NRTD The biggest text is "Welcome to NationalDie.com." This in not the most important text because it does't solve any problem for the user or give them any information about what National Die does.
- Good Example
Airbnb When you search on Airbnb, you enter a city or location to look for homes to book. Therefore, they must collect data and display data to the user that is correct.
- Bad Example
CSI Fabricated Metal Bins This website doesn't work because there is no information about what they do and there is no site menu. They also don't provide a phone number or address. There are just random images to click on that bring up another page. Some of those links say under construction. They are not using or providing the correct data.